bump node dev deps; update README.md

Author: based-ghost

README.md

@@ -46,18 +46,16 @@ $ yarn add react-window styled-components react-functional-select
 
 ```jsx
 import { Select } from 'react-functional-select';
-import { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Card, CardHeader, CardBody, Container, SelectContainer } from '../shared/components';
 
-import type { FunctionComponent } from 'react';
-
 type Option = Readonly<{
   id: number;
   city: string;
   state: string;
 }>;
 
-type SingleSelectDemoProps = Readonly<{
+type SingleSelectProps = Readonly<{
   isDisabled: boolean;
 }>;
 
@@ -69,7 +67,7 @@ const CITY_OPTIONS: Option[] = [
   { id: 5, city: 'Houston', state: 'TX' }
 ];
 
-const SingleSelectDemo: FunctionComponent<SingleSelectDemoProps> = ({ isDisabled }) => {
+const SingleSelect: React.FC<SingleSelectProps> = ({ isDisabled }) => {
   const [isInvalid, setIsInvalid] = useState<boolean>(false);
   const [selectedOption, setSelectedOption] = useState<Option | null>(null);
 
@@ -105,7 +103,7 @@ const SingleSelectDemo: FunctionComponent<SingleSelectDemoProps> = ({ isDisabled
   );
 };
 
-export default SingleSelectDemo;
+export default SingleSelect;
 ```
 
 ## Properties

package.json

@@ -71,8 +71,8 @@
     "@types/react-dom": "^18.0.9",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.44.0",
+    "@typescript-eslint/parser": "^5.44.0",
     "babel-jest": "^29.3.1",
     "babel-loader": "^9.1.0",
     "babel-plugin-styled-components": "^2.0.7",
@@ -95,7 +95,7 @@
     "react-toastify": "^9.1.1",
     "react-window": "^1.8.8",
     "rimraf": "^3.0.2",
-    "rollup": "^3.3.0",
+    "rollup": "^3.4.0",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.3.6",
     "typescript": "^4.9.3",

src/Select.tsx

@@ -22,6 +22,7 @@ import {
   EMPTY_ARRAY,
   DEFAULT_THEME,
   SELECT_WRAPPER_ATTRS,
+  PAGE_SIZE_DEFAULT,
   PLACEHOLDER_DEFAULT,
   LOADING_MSG_DEFAULT,
   CONTROL_CONTAINER_CLS,
@@ -222,7 +223,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
     hideSelectedOptions,
     getIsOptionDisabled,
     getFilterOptionString,
-    pageSize = 5,
     isSearchable = true,
     memoOptions = false,
     lazyLoadMenu = false,
@@ -235,6 +235,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
     filterMatchFrom = FilterMatchEnum.ANY,
     menuPosition = MenuPositionEnum.BOTTOM,
     options = EMPTY_ARRAY,
+    pageSize = PAGE_SIZE_DEFAULT,
     loadingMsg = LOADING_MSG_DEFAULT,
     placeholder = PLACEHOLDER_DEFAULT,
     noOptionsMsg = NO_OPTIONS_MSG_DEFAULT,
@@ -333,12 +334,12 @@ const Select = forwardRef<SelectRef, SelectProps>((
       return;
     }
 
-    const selectedIndex = !isMulti
+    const selectedIdx = !isMulti
       ? menuOptions.findIndex((x) => x.isSelected)
       : -1;
 
-    const index = selectedIndex > -1
-      ? selectedIndex
+    const index = selectedIdx > -1
+      ? selectedIdx
       : position === OptionIndexEnum.FIRST
         ? 0
         : menuOptions.length - 1;
@@ -388,11 +389,12 @@ const Select = forwardRef<SelectRef, SelectProps>((
         setFocusedOption(FOCUSED_OPTION_DEFAULT);
       },
       setValue: (option?: OptionData) => {
-        const normalizedOpts = normalizeValue(option, getOptionValueFn, getOptionLabelFn);
-        setSelectedOption(normalizedOpts);
+        setSelectedOption(
+          normalizeValue(option, getOptionValueFn, getOptionLabelFn)
+        );
       },
       toggleMenu: (state?: boolean) => {
-        if (state === true || (state === undefined && !menuOpenRef.current)) {
+        if (state || (state === undefined && !menuOpenRef.current)) {
           focusInput();
           openMenuAndFocusOption(OptionIndexEnum.FIRST);
         } else {
@@ -474,24 +476,24 @@ const Select = forwardRef<SelectRef, SelectProps>((
   const focusValueOnArrowKey = (key: string): void => {
     if (!hasSelectedOptions) return;
 
-    let nextFocusedIdx = -1;
+    let focusedIdx = -1;
     const lastValueIdx = selectedOption.length - 1;
     const curFocusedIdx = focusedMultiValue ? selectedOption.findIndex((x) => x.value === focusedMultiValue) : -1;
 
     if (key === 'ArrowRight') {
-      nextFocusedIdx = (curFocusedIdx > -1 && curFocusedIdx < lastValueIdx)
+      focusedIdx = (curFocusedIdx > -1 && curFocusedIdx < lastValueIdx)
         ? curFocusedIdx + 1
         : -1;
     } else {
-      nextFocusedIdx = curFocusedIdx !== 0
+      focusedIdx = curFocusedIdx !== 0
         ? curFocusedIdx === -1
           ? lastValueIdx
           : curFocusedIdx - 1
         : 0;
     }
 
-    const nextFocusedVal = nextFocusedIdx >= 0
-      ? selectedOption[nextFocusedIdx].value!
+    const nextFocusedVal = focusedIdx >= 0
+      ? selectedOption[focusedIdx].value!
       : null;
 
     if (focusedOption.data) setFocusedOption(FOCUSED_OPTION_DEFAULT);
@@ -512,13 +514,13 @@ const Select = forwardRef<SelectRef, SelectProps>((
         break;
       }
       case OptionIndexEnum.PAGEUP: {
-        const pageIndex = focusedOption.index - pageSize;
-        index = (pageIndex < 0) ? 0 : pageIndex;
+        const pageIdx = focusedOption.index - pageSize;
+        index = (pageIdx < 0) ? 0 : pageIdx;
         break;
       }
       case OptionIndexEnum.PAGEDOWN: {
-        const pageIndex = focusedOption.index + pageSize;
-        index = (pageIndex > menuOptions.length - 1) ? menuOptions.length - 1 : pageIndex;
+        const pageIdx = focusedOption.index + pageSize;
+        index = (pageIdx > menuOptions.length - 1) ? menuOptions.length - 1 : pageIdx;
         break;
       }
     }
@@ -599,14 +601,13 @@ const Select = forwardRef<SelectRef, SelectProps>((
         if (inputValue) return;
 
         if (focusedMultiValue) {
-          const clearFocusedIndex = selectedOption.findIndex((x) => x.value === focusedMultiValue);
-          const nexFocusedMultiValue =
-            (clearFocusedIndex > -1 && (clearFocusedIndex < (selectedOption.length - 1)))
-              ? selectedOption[clearFocusedIndex + 1].value!
-              : null;
+          const focusedIdx = selectedOption.findIndex((x) => x.value === focusedMultiValue);
+          const nextFocusedMultiValue = (focusedIdx > -1 && (focusedIdx < (selectedOption.length - 1)))
+            ? selectedOption[focusedIdx + 1].value!
+            : null;
 
           removeSelectedOption(focusedMultiValue);
-          setFocusedMultiValue(nexFocusedMultiValue);
+          setFocusedMultiValue(nextFocusedMultiValue);
         } else {
           if (!backspaceClearsValue) return;
           if (!hasSelectedOptions) break;
@@ -681,6 +682,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
     menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
   }, [isDisabled, openMenuOnClick, openMenuAndFocusOption]);
 
+  const flexValueWrapper = !!isMulti && hasSelectedOptions;
   const showClear = !!isClearable && !isDisabled && hasSelectedOptions;
   const inputReadOnly = isDisabled || !isSearchable || !!focusedMultiValue;
 
@@ -702,7 +704,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
           onMouseDown={handleOnControlMouseDown}
           data-testid={CONTROL_CONTAINER_TESTID}
         >
-          <ValueWrapper flex={!!isMulti && hasSelectedOptions}>
+          <ValueWrapper flex={flexValueWrapper}>
             <Value
               isMulti={isMulti}
               inputValue={inputValue}

src/components/IndicatorIcons/LoadingDots.tsx

@@ -12,7 +12,6 @@ const StyledLoadingDots = styled.div`
   > div {
     border-radius: 100%;
     display: inline-block;
-
     ${({ theme }) => css`
       width: ${theme.loader.size};
       height: ${theme.loader.size};

src/constants/defaults.ts

@@ -6,15 +6,15 @@ import type {
   OptionDisabledCallback
 } from '../types';
 
+export const PAGE_SIZE_DEFAULT = 5;
 export const MENU_ITEM_SIZE_DEFAULT = 35;
 export const MENU_MAX_HEIGHT_DEFAULT = 300;
 export const LOADING_MSG_DEFAULT = 'Loading..';
 export const NO_OPTIONS_MSG_DEFAULT = 'No options';
 export const PLACEHOLDER_DEFAULT = 'Select option..';
-export const FOCUSED_OPTION_DEFAULT: FocusedOption = { index: -1 };
 
-// Default for options and selectedOption props
-export const EMPTY_ARRAY: any[] = [];
+export const EMPTY_ARRAY: any[] = []; // Default for options and selectedOption props
+export const FOCUSED_OPTION_DEFAULT: FocusedOption = { index: -1 };
 
 export const FUNCTIONS = {
   optionLabel: ((x) => x.label) as OptionLabelCallback,

src/hooks/useMenuPositioner.ts

@@ -27,8 +27,6 @@ const useMenuPositioner = (
   menuScrollDuration?: number,
   scrollMenuIntoView?: boolean
 ): [string | undefined, number] => {
-  const [menuHeight, setMenuHeight] = useState<number>(menuHeightDefault);
-
   const isMenuTopPosition = useMemo<boolean>(() => {
     return menuPosition === MenuPositionEnum.TOP ||
       (menuPosition === MenuPositionEnum.AUTO && !menuFitsBelowControl(menuRef.current));
@@ -37,6 +35,7 @@ const useMenuPositioner = (
   const onMenuOpenRef = useCallbackRef(onMenuOpen);
   const onMenuCloseRef = useCallbackRef(onMenuClose);
   const resetMenuHeightRef = useRef<boolean>(false);
+  const [menuHeight, setMenuHeight] = useState<number>(menuHeightDefault);
   const shouldScrollRef = useLatestRef<boolean>(!isMenuTopPosition && !isMenuPortaled);
 
   useUpdateEffect(() => {