fix: replace use of deprecated String.substr with String.startsWith (src/hooks/useMenuOptions.ts).

refactor: replace creation of Set object with Array object to hold collection of selected values (src/hooks/useMenuOptions.ts).

Author: based-ghost

__stories__/helpers/styled/index.ts

@@ -131,10 +131,10 @@ export const Li = styled.li`
 
 export const TextHeader = styled.span`
   color: #476582;
-  font-size: 95%;
+  font-size: 94%;
   line-height: 1.7;
   border-radius: 4px;
-  padding: .175em .5em;
+  padding: .175em .475em;
   word-break: break-word;
   background-color: #f1f1f1;
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

package.json

@@ -68,7 +68,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.1",
-    "@types/node": "^18.11.8",
+    "@types/node": "^18.11.9",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/react-window": "^1.8.5",
@@ -78,7 +78,7 @@
     "babel-jest": "^29.2.2",
     "babel-loader": "^9.0.1",
     "babel-plugin-styled-components": "^2.0.7",
-    "chromatic": "^6.11.3",
+    "chromatic": "^6.11.4",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
     "eslint": "^8.26.0",
@@ -94,10 +94,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "react-toastify": "^9.0.8",
+    "react-toastify": "^9.1.0",
     "react-window": "^1.8.8",
     "rimraf": "^3.0.2",
-    "rollup": "^3.2.4",
+    "rollup": "^3.2.5",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.3.6",
     "typescript": "^4.8.4",
@@ -125,6 +125,6 @@
     "chromatic": "chromatic --force-rebuild --auto-accept-changes"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.0"
+    "@babel/runtime": "^7.20.1"
   }
 }

src/Select.tsx

@@ -455,7 +455,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
    */
   useEffect(() => {
     const { current: isFunc } = onSearchChangeIsFunc;
-
     if (isFunc && onChangeEvtValue.current) {
       onChangeEvtValue.current = false;
       onSearchChangeRef(debouncedInputValue);
@@ -563,7 +562,6 @@ const Select = forwardRef<SelectRef, SelectProps>((
     if (isDisabled) return;
 
     const { key, shiftKey, defaultPrevented } = e;
-
     if (onKeyDown) {
       onKeyDown(e, inputValue, focusedOption);
       if (defaultPrevented) return;

src/components/AutosizeInput/index.tsx

@@ -79,9 +79,8 @@ const AutosizeInput = memo(
     const [inputWidth, setInputWidth] = useState<number>(INPUT_MIN_WIDTH_PX);
 
     useUpdateEffect(() => {
-      const { current: el } = sizerRef;
-      if (el) {
-        setInputWidth(el.scrollWidth + INPUT_MIN_WIDTH_PX);
+      if (sizerRef.current) {
+        setInputWidth(sizerRef.current.scrollWidth + INPUT_MIN_WIDTH_PX);
       }
     }, [inputValue]);
 

src/components/Menu/MenuList.tsx

@@ -81,7 +81,7 @@ const MenuList: FunctionComponent<MenuListProps> = ({
       >
         {Option}
       </FixedSizeList>
-      {(!isArrayWithLength(menuOptions) && noOptionsMsg) && (
+      {!isArrayWithLength(menuOptions) && noOptionsMsg && (
         <NoOptionsMsg>{noOptionsMsg}</NoOptionsMsg>
       )}
     </Fragment>

src/hooks/useMenuOptions.ts

@@ -42,25 +42,21 @@ const useMenuOptions = (
   const hideSelectedOptionsOrDefault = isBoolean(hideSelectedOptions) ? hideSelectedOptions : isMulti;
 
   useEffect(() => {
-    const selectedHash = selectedOption.length ? new Set(selectedOption.map((x) => x.value)) : null;
-    const normalizedSearch = trimAndFormatFilterStr(searchValue, filterIgnoreCase, filterIgnoreAccents);
+    const selectedValues = selectedOption.map((x) => x.value);
+    const matchVal = trimAndFormatFilterStr(searchValue, filterIgnoreCase, filterIgnoreAccents);
 
     const isOptionFilterMatch = (option: MenuOption): boolean => {
-      if (!normalizedSearch) return true;
-
+      if (!matchVal) return true;
       const filterVal = getFilterOptionStringRef(option);
-      const normalizedOptionLabel = trimAndFormatFilterStr(filterVal, filterIgnoreCase, filterIgnoreAccents);
-
-      return isFilterMatchAny
-        ? normalizedOptionLabel.includes(normalizedSearch)
-        : normalizedOptionLabel.substr(0, normalizedSearch.length) === normalizedSearch;
+      const filterValNrml = trimAndFormatFilterStr(filterVal, filterIgnoreCase, filterIgnoreAccents);
+      return isFilterMatchAny ? filterValNrml.includes(matchVal) : filterValNrml.startsWith(matchVal);
     };
 
     const parseMenuOption = (data: OptionData): MenuOption | undefined => {
       const value = getOptionValue(data);
       const label = getOptionLabel(data);
       const isDisabled = getIsOptionDisabledRef(data);
-      const isSelected = selectedHash?.has(value) ?? false;
+      const isSelected = selectedValues.includes(value);
       const menuOption: MenuOption = { data, value, label, isDisabled, isSelected };
 
       if (!isOptionFilterMatch(menuOption) || (hideSelectedOptionsOrDefault && isSelected)) {

src/hooks/useMenuPositioner.ts

@@ -39,8 +39,10 @@ const useMenuPositioner = (
   });
 
   useEffect(() => {
-    const { TOP, AUTO } = MenuPositionEnum;
-    const isTopPos = menuPosition === TOP || (menuPosition === AUTO && !menuFitsBelowControl(menuRef.current));
+    const isTopPos =
+      menuPosition === MenuPositionEnum.TOP ||
+      (menuPosition === MenuPositionEnum.AUTO && !menuFitsBelowControl(menuRef.current));
+
     setIsMenuTopPosition(isTopPos);
   }, [menuRef, menuPosition]);
 
@@ -55,7 +57,12 @@ const useMenuPositioner = (
       };
 
       shouldScrollRef.current
-        ? scrollMenuIntoViewOnOpen(menuRef.current, menuScrollDuration, scrollMenuIntoView, handleOnMenuOpen)
+        ? scrollMenuIntoViewOnOpen(
+            menuRef.current,
+            menuScrollDuration,
+            scrollMenuIntoView,
+            handleOnMenuOpen
+          )
         : handleOnMenuOpen();
     } else {
       onMenuCloseRef();

src/utils/common.ts

@@ -40,7 +40,6 @@ export const trimAndFormatFilterStr = (
   if (filterIgnoreCase) {
     trimVal = trimVal.toLowerCase();
   }
-
   return !filterIgnoreAccents ? trimVal : stripDiacritics(trimVal);
 };