misc: remove extraneous dep list from Effect in custom hook useCallbackRef; remove extraneous useMemo wrapper for isMenuTopPosition calculation in custom hook useMenuPositioner

Author: based-ghost

package.json

@@ -53,7 +53,7 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^9.0.2",
     "@storybook/addon-storysource": "^6.5.13",

src/Select.tsx

@@ -273,8 +273,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
   const debouncedInputValue = useDebounce<string>(inputValue, inputDelay);
 
   // Custom ref objects
-  const onSearchChangeRef = useCallbackRef(onSearchChange);
-  const onOptionChangeRef = useCallbackRef(onOptionChange);
+  const onSearchChangeFn = useCallbackRef(onSearchChange);
+  const onOptionChangeFn = useCallbackRef(onOptionChange);
   const onSearchChangeIsFn = useLatestRef<boolean>(isFunction(onSearchChange));
   const onOptionChangeIsFn = useLatestRef<boolean>(isFunction(onOptionChange));
   const menuOpenRef = useLatestRef<boolean>(menuOpen);
@@ -421,9 +421,9 @@ const Select = forwardRef<SelectRef, SelectProps>((
   useEffect(() => {
     if (onSearchChangeIsFn.current && onChangeEvtValue.current) {
       onChangeEvtValue.current = false;
-      onSearchChangeRef(debouncedInputValue);
+      onSearchChangeFn(debouncedInputValue);
     }
-  }, [onSearchChangeRef, debouncedInputValue]);
+  }, [onSearchChangeFn, debouncedInputValue]);
 
   /**
    * useUpdateEffect
@@ -437,9 +437,9 @@ const Select = forwardRef<SelectRef, SelectProps>((
           ? selectedOption[0].data
           : null;
 
-      onOptionChangeRef(normalSelectedOpts);
+      onOptionChangeFn(normalSelectedOpts);
     }
-  }, [onOptionChangeRef, isMulti, selectedOption]);
+  }, [onOptionChangeFn, isMulti, selectedOption]);
 
   /**
    * useUpdateEffect
@@ -677,9 +677,10 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, []);
 
   const handleOnCaretMouseDown = useCallback((e: MouseOrTouchEvent<HTMLElement>): void => {
-    if (isDisabled || openMenuOnClick) return;
-    handleOnMouseDown(e);
-    menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
+    if (!isDisabled && !openMenuOnClick) {
+      handleOnMouseDown(e);
+      menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
+    }
   }, [isDisabled, openMenuOnClick, openMenuAndFocusOption]);
 
   const flexValueWrapper = !!isMulti && hasSelectedOptions;

src/components/Menu/Option.tsx

@@ -9,8 +9,11 @@ type OptionProps = Readonly<{
   style: CSSProperties;
 }>;
 
-// Extends react-window "areEqual" adding early bailout based on "memoOptions" flag
-const _areEqual = (prevProps: OptionProps, nextProps: OptionProps): boolean => {
+// extends react-window 'areEqual'
+const _areEqual = (
+  prevProps: OptionProps,
+  nextProps: OptionProps
+): boolean => {
   const { memoOptions } = nextProps.data;
   return memoOptions && areEqual(prevProps, nextProps);
 };
@@ -27,7 +30,7 @@ const Option = memo<OptionProps>(({
 }) => {
   const opt = menuOptions[index];
 
-  const _className = buildOptionClsName(
+  const className = buildOptionClsName(
     opt.isDisabled,
     opt.isSelected,
     index === focusedOptionIndex
@@ -36,7 +39,7 @@ const Option = memo<OptionProps>(({
   return (
     <div
       style={style}
-      className={_className}
+      className={className}
       onClick={() => selectOption(opt)}
     >
       {renderOptionLabel(opt.data)}

src/components/Menu/index.tsx

@@ -52,7 +52,6 @@ const MenuWrapper = styled.div<MenuWrapperProps>`
     white-space: nowrap;
     text-overflow: ellipsis;
     -webkit-tap-highlight-color: transparent;
-    will-change: top;
 	  padding: ${({ theme }) => theme.menu.option.padding};
 	  text-align: ${({ theme }) => theme.menu.option.textAlign};
 

src/hooks/useCallbackRef.ts

@@ -5,14 +5,14 @@ import { useEffect, useRef, useCallback } from 'react';
  * Hook that converts a callback to a ref to avoid triggering re-renders when
  * passed as a prop or avoid re-executing effects when passed as a dependency
  *
- * @param callback the callback to write to a ref object
+ * @param callback the callback to write to ref object
  */
-const useCallbackRef = <T extends CallbackFn>(callback: T | undefined): T => {
+const useCallbackRef = <T extends CallbackFn>(callback?: T): T => {
   const callbackRef = useRef(callback);
 
   useEffect(() => {
     callbackRef.current = callback;
-  }, [callback]);
+  });
 
   return useCallback(
     ((...args) => {

src/hooks/useMenuOptions.ts

@@ -30,10 +30,10 @@ const useMenuOptions = (
   async: boolean = false,
   hideSelectedOptions?: boolean
 ): MenuOption[] => {
-  const getFilterOptionStringRef = useCallbackRef(getFilterOptionString || FUNCTIONS.optionFilter);
-  const getIsOptionDisabledRef = useCallbackRef(getIsOptionDisabled || FUNCTIONS.isOptionDisabled);
+  const getIsOptionDisabledFn = useCallbackRef(getIsOptionDisabled || FUNCTIONS.isOptionDisabled);
+  const getFilterOptionStringFn = useCallbackRef(getFilterOptionString || FUNCTIONS.optionFilter);
   const hideSelectedOptionsOrDefault = isBoolean(hideSelectedOptions) ? hideSelectedOptions : isMulti;
-  const searchValue = !async ? debouncedInputValue : ''; // Prevent recomputing/filtering on input mutations in async mode
+  const searchValue = !async ? debouncedInputValue : ''; // prevent recomputing on input mutations in async mode
 
   const menuOptions = useMemo<MenuOption[]>(() => {
     const selectedValues = selectedOption.map((x) => x.value);
@@ -42,15 +42,15 @@ const useMenuOptions = (
 
     const isOptionFilterMatch = (option: MenuOption): boolean => {
       if (!matchVal) return true;
-      const filterVal = getFilterOptionStringRef(option);
+      const filterVal = getFilterOptionStringFn(option);
       const normalFilterVal = trimAndFormatFilterStr(filterVal, filterIgnoreCase, filterIgnoreAccents);
       return isFilterMatchAny ? normalFilterVal.includes(matchVal) : normalFilterVal.startsWith(matchVal);
     };
 
     const parseMenuOption = (data: OptionData): MenuOption | undefined => {
       const value = getOptionValue(data);
       const label = getOptionLabel(data);
-      const isDisabled = getIsOptionDisabledRef(data);
+      const isDisabled = getIsOptionDisabledFn(data);
       const isSelected = selectedValues.includes(value);
       const menuOption: MenuOption = { data, value, label, isDisabled, isSelected };
       return (!isOptionFilterMatch(menuOption) || (hideSelectedOptionsOrDefault && isSelected))
@@ -72,8 +72,8 @@ const useMenuOptions = (
     filterMatchFrom,
     filterIgnoreCase,
     filterIgnoreAccents,
-    getIsOptionDisabledRef,
-    getFilterOptionStringRef,
+    getIsOptionDisabledFn,
+    getFilterOptionStringFn,
     hideSelectedOptionsOrDefault
   ]);
 

src/hooks/useMenuPositioner.ts

@@ -3,7 +3,7 @@ import useLatestRef from './useLatestRef';
 import useCallbackRef from './useCallbackRef';
 import useUpdateEffect from './useUpdateEffect';
 import { MenuPositionEnum } from '../constants';
-import { useMemo, useState, useRef, type RefObject } from 'react';
+import { useState, useRef, type RefObject } from 'react';
 import { calculateMenuTop, menuFitsBelowControl, scrollMenuIntoViewOnOpen } from '../utils';
 
 /**
@@ -27,21 +27,20 @@ const useMenuPositioner = (
   menuScrollDuration?: number,
   scrollMenuIntoView?: boolean
 ): [string | undefined, number] => {
-  const isMenuTopPosition = useMemo<boolean>(() => {
-    return menuPosition === MenuPositionEnum.TOP ||
-      (menuPosition === MenuPositionEnum.AUTO && !menuFitsBelowControl(menuRef.current));
-  }, [menuRef, menuPosition]);
+  const isMenuTopPosition =
+    menuPosition === MenuPositionEnum.TOP ||
+    (menuPosition === MenuPositionEnum.AUTO && !menuFitsBelowControl(menuRef.current));
 
-  const onMenuOpenRef = useCallbackRef(onMenuOpen);
-  const onMenuCloseRef = useCallbackRef(onMenuClose);
+  const onMenuOpenFn = useCallbackRef(onMenuOpen);
+  const onMenuCloseFn = useCallbackRef(onMenuClose);
   const resetMenuHeightRef = useRef<boolean>(false);
   const [menuHeight, setMenuHeight] = useState<number>(menuHeightDefault);
   const shouldScrollRef = useLatestRef<boolean>(!isMenuTopPosition && !isMenuPortaled);
 
   useUpdateEffect(() => {
     if (menuOpen) {
       const handleOnMenuOpen = (availableSpace?: number) => {
-        onMenuOpenRef();
+        onMenuOpenFn();
         if (availableSpace) {
           resetMenuHeightRef.current = true;
           setMenuHeight(availableSpace);
@@ -57,7 +56,7 @@ const useMenuPositioner = (
           )
         : handleOnMenuOpen();
     } else {
-      onMenuCloseRef();
+      onMenuCloseFn();
       if (resetMenuHeightRef.current) {
         resetMenuHeightRef.current = false;
         setMenuHeight(menuHeightDefault);
@@ -69,11 +68,11 @@ const useMenuPositioner = (
     menuHeightDefault,
     scrollMenuIntoView,
     menuScrollDuration,
-    onMenuCloseRef,
-    onMenuOpenRef,
+    onMenuOpenFn,
+    onMenuCloseFn
   ]);
 
-  // Calculated menu height passed react-window; calculate MenuWrapper <div /> 'top' style prop if menu is positioned above control
+  // Calculated menu height passed react-window; calculate MenuWrapper div 'top' style prop if menu is positioned above control
   const menuHeightCalc = Math.min(menuHeight, menuOptionsLength * menuItemSize);
   const menuStyleTop = isMenuTopPosition ? calculateMenuTop(menuHeightCalc, menuRef.current, controlRef.current) : undefined;
 

src/utils/common.ts

@@ -34,9 +34,7 @@ export const trimAndFormatFilterStr = (
   filterIgnoreAccents: boolean
 ): string => {
   let trimVal = value.trim();
-  if (filterIgnoreCase) {
-    trimVal = trimVal.toLowerCase();
-  }
+  if (filterIgnoreCase) trimVal = trimVal.toLowerCase();
   return !filterIgnoreAccents ? trimVal : stripDiacritics(trimVal);
 };
 
@@ -48,16 +46,16 @@ export const buildOptionClsName = (
   isSelected: boolean,
   isFocused: boolean
 ): string => {
-  let className = OPTION_CLS;
+  let cx = OPTION_CLS;
 
   if (isDisabled)
-    className += ` ${OPTION_DISABLED_CLS}`;
+    cx += ' ' + OPTION_DISABLED_CLS;
   if (isSelected)
-    className += ` ${OPTION_SELECTED_CLS}`;
+    cx += ' ' + OPTION_SELECTED_CLS;
   if (isFocused)
-    className += ` ${OPTION_FOCUSED_CLS}`;
+    cx += ' ' + OPTION_FOCUSED_CLS;
 
-  return className;
+  return cx;
 };
 
 /**
@@ -68,17 +66,17 @@ export const normalizeValue = (
   getOptionValue: OptionValueCallback,
   getOptionLabel: OptionLabelCallback
 ): SelectedOption[] => {
-  const initValues = Array.isArray(value)
+  const initVals = Array.isArray(value)
     ? value
     : isPlainObject(value)
       ? [value]
       : EMPTY_ARRAY;
 
-  if (!isArrayWithLength(initValues)) {
-    return initValues;
+  if (!isArrayWithLength(initVals)) {
+    return initVals;
   }
 
-  return initValues.map((data: unknown) => ({
+  return initVals.map((data) => ({
     data,
     value: getOptionValue(data),
     label: getOptionLabel(data)

src/utils/device.ts

@@ -7,9 +7,7 @@ let _isTouchDevice: boolean | undefined;
  * Global, lazy evaluation.
  */
 export const isTouchDevice = (): boolean => {
-  if (isBoolean(_isTouchDevice)) {
-    return _isTouchDevice;
-  }
+  if (isBoolean(_isTouchDevice)) return _isTouchDevice;
 
   return (_isTouchDevice = (() => {
     try {