refactor AutosizeInput.tsx component; update README.md; general code refactoring

Author: based-ghost

README.md

@@ -61,7 +61,7 @@ type SingleSelectDemoProps = Readonly<{
   isDisabled: boolean;
 }>;
 
-const _cityOptions: Option[] = [
+const CITY_OPTIONS: Option[] = [
   { id: 1, city: 'Austin', state: 'TX' },
   { id: 2, city: 'Denver', state: 'CO' },
   { id: 3, city: 'Chicago', state: 'IL' },
@@ -92,7 +92,7 @@ const SingleSelectDemo: FunctionComponent<SingleSelectDemoProps> = ({ isDisabled
             <Select
               isClearable
               isInvalid={isInvalid}
-              options={_cityOptions}
+              options={CITY_OPTIONS}
               isDisabled={isDisabled}
               onOptionChange={onOptionChange}
               getOptionValue={getOptionValue}
@@ -126,6 +126,7 @@ All properties are technically optional (with a few having default values). Very
 |`isLoading`| bool | `false` | Is the select in a state of loading - shows loading dots animation
 |`isInvalid`| bool | `false` | Is the current value invalid - control recieves invalid styling
 |`inputDelay`| number | `undefined` | The debounce delay in for the input search (milliseconds)
+|`pageSize`| number | `5` | Number of options to jump in menu when page{up|down} keys are used
 |`isDisabled`| bool | `false` | Is the select control disabled - recieves disabled styling
 |`required`| bool | `false` | Is the select control required - applied to the `input` element. When `true`, the optionally specified CSS from the `themeConfig.input.cssRequired` field will be applied to the `input` element.
 |`placeholder`| string | `Select option..` | Placeholder text for the select value

__stories__/helpers/constants/markup.ts

@@ -17,11 +17,13 @@ export const CLASS_NAME_HTML =
   <div class="${CONTROL_CONTAINER_CLS}">
     <div>
       <div>${PLACEHOLDER_DEFAULT}</div>
-      <input
-        value=""
-        type="text"
-        class="${AUTOSIZE_INPUT_CLS}"
-      />
+      <div>
+        <input
+          value=""
+          type="text"
+          class="${AUTOSIZE_INPUT_CLS}"
+        />
+      </div>
     </div>
     <div>
       <div>

src/Select.tsx

@@ -325,10 +325,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
   const blurInput = (): void => inputRef.current?.blur();
   const focusInput = (): void => inputRef.current?.focus();
   const scrollToItemIndex = (idx: number): void => listRef.current?.scrollToItem(idx);
-
   const hasSelectedOptions = isArrayWithLength(selectedOption);
-  const showClear = !!isClearable && !isDisabled && hasSelectedOptions;
-  const inputReadOnly = isDisabled || !isSearchable || !!focusedMultiValue;
 
   const openMenuAndFocusOption = useCallback((position: OptionIndexEnum): void => {
     if (!isArrayWithLength(menuOptions)) {
@@ -656,18 +653,18 @@ const Select = forwardRef<SelectRef, SelectProps>((
     if (isNotInput) e.preventDefault();
   };
 
+  const handleOnInputFocus = (e: FocusEvent<HTMLInputElement>): void => {
+    onInputFocus?.(e);
+    setIsFocused(true);
+  };
+
   const handleOnInputBlur = (e: FocusEvent<HTMLInputElement>): void => {
     onInputBlur?.(e);
     setIsFocused(false);
     setMenuOpen(false);
     setInputValue('');
   };
 
-  const handleOnInputFocus = (e: FocusEvent<HTMLInputElement>): void => {
-    onInputFocus?.(e);
-    setIsFocused(true);
-  };
-
   const handleOnInputChange = (e: FormEvent<HTMLInputElement>): void => {
     onChangeEvtValue.current = true;
     onInputChange?.(e.currentTarget.value);
@@ -692,6 +689,9 @@ const Select = forwardRef<SelectRef, SelectProps>((
     }
   }, [isDisabled, openMenuOnClick, openMenuAndFocusOption]);
 
+  const showClear = !!isClearable && !isDisabled && hasSelectedOptions;
+  const inputReadOnly = isDisabled || !isSearchable || !!focusedMultiValue;
+
   return (
     <ThemeProvider theme={theme}>
       <SelectWrapper

src/components/AutosizeInput/index.tsx

@@ -63,43 +63,41 @@ const Input = styled.input.attrs(AUTOSIZE_INPUT_ATTRS) <InputProps>`
   ${({ theme }) => theme.input.css}
 `;
 
-const AutosizeInput = forwardRef<HTMLInputElement, AutosizeInputProps>(
-  (
-    {
-      id,
-      onBlur,
-      onFocus,
-      readOnly,
-      required,
-      onChange,
-      ariaLabel,
-      inputValue,
-      ariaLabelledBy,
-      hasSelectedOptions
-    },
-    ref: Ref<HTMLInputElement>
-  ) => {
-    const isInvalid = !!required && !hasSelectedOptions;
+const AutosizeInput = forwardRef<HTMLInputElement, AutosizeInputProps>((
+  {
+    id,
+    onBlur,
+    onFocus,
+    readOnly,
+    required,
+    onChange,
+    ariaLabel,
+    inputValue,
+    ariaLabelledBy,
+    hasSelectedOptions
+  },
+  ref: Ref<HTMLInputElement>
+) => {
+  const isInvalid = !!required && !hasSelectedOptions;
 
-    return (
-      <InputWrapper data-value={inputValue}>
-        <Input
-          id={id}
-          ref={ref}
-          isInvalid
-          onBlur={onBlur}
-          onFocus={onFocus}
-          value={inputValue}
-          readOnly={readOnly}
-          required={isInvalid}
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledBy}
-          onChange={!readOnly ? onChange : undefined}
-        />
-      </InputWrapper>
-    );
-  }
-);
+  return (
+    <InputWrapper data-value={inputValue}>
+      <Input
+        id={id}
+        ref={ref}
+        isInvalid
+        onBlur={onBlur}
+        onFocus={onFocus}
+        value={inputValue}
+        readOnly={readOnly}
+        required={isInvalid}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        onChange={!readOnly ? onChange : undefined}
+      />
+    </InputWrapper>
+  );
+});
 
 AutosizeInput.displayName = 'AutosizeInput';
 

src/components/IndicatorIcons/ClearSvgIcon.tsx

@@ -26,5 +26,4 @@ const ClearSvgIcon: FunctionComponent = () => (
   </ClearSvg>
 );
 
-
 export default ClearSvgIcon;

src/components/Value/MultiValue.tsx

@@ -75,7 +75,7 @@ const MultiValue = memo<MultiValueProps>(({
         onMouseDown={suppressEvent}
         data-testid={CLEAR_ICON_MV_TESTID}
       >
-        ✖
+        &#10006;
       </Clear>
     </MultiValueWrapper>
   );

src/components/Value/index.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, type ReactNode, type FunctionComponent } from 'react';
 import MultiValue from './MultiValue';
+import styled from 'styled-components';
 import { isArrayWithLength } from '../../utils';
-import styled, { css } from 'styled-components';
 import type { MultiParams, SelectedOption, RenderLabelCallback } from '../../types';
 
 type ValueProps = Readonly<{
@@ -15,22 +15,17 @@ type ValueProps = Readonly<{
   renderMultiOptions?: (params: MultiParams) => ReactNode;
 }>;
 
-const SINGLE_VALUE_BASE_STYLE = css`
+const SingleValue = styled.div`
   margin: 0 2px;
+  max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
   box-sizing: border-box;
   text-overflow: ellipsis;
   grid-area: 1 / 1 / 2 / 3;
 `;
 
-const SingleValue = styled.div`
-  ${SINGLE_VALUE_BASE_STYLE}
-  max-width: 100%;
-`;
-
-const Placeholder = styled.div`
-  ${SINGLE_VALUE_BASE_STYLE}
+const Placeholder = styled(SingleValue)`
   color: ${({ theme }) => theme.color.placeholder};
 `;
 

src/constants/theme.ts

@@ -1,18 +1,17 @@
 import type { DefaultTheme } from 'styled-components';
 import { BOUNCE_ANIMATION_CSS, FADE_IN_ANIMATION_CSS } from './styled';
 
-/**
- * A contextual styled-components DefaultTheme object with default key-value pairs for CSS props.
- */
+const color = {
+  border: '#ced4da',
+  danger: '#dc3545',
+  primary: '#007bff',
+  disabled: '#e9ecef',
+  placeholder: '#6E7276',
+  dangerLight: 'rgba(220, 53, 69, 0.25)'
+};
+
 export const DEFAULT_THEME: DefaultTheme = {
-  color: {
-    border: '#ced4da',
-    danger: '#dc3545',
-    primary: '#007bff',
-    disabled: '#e9ecef',
-    placeholder: '#6E7276',
-    dangerLight: 'rgba(220, 53, 69, 0.25)'
-  },
+  color,
   input: {},
   select: {},
   loader: {
@@ -58,8 +57,8 @@ export const DEFAULT_THEME: DefaultTheme = {
     option: {
       textAlign: 'left',
       selectedColor: '#fff',
-      selectedBgColor: '#007bff',
       padding: '0.375rem 0.75rem',
+      selectedBgColor: color.primary,
       focusedBgColor: 'rgba(0, 123, 255, 0.15)'
     }
   },
@@ -85,7 +84,7 @@ export const DEFAULT_THEME: DefaultTheme = {
       color: '#a6a6a6',
       fontSize: '0.65em',
       alignSelf: 'center',
-      focusColor: '#808080',
+      focusColor: color.danger,
       transition: 'color 0.2s ease-out'
     }
   }

src/hooks/useCallbackRef.ts

@@ -7,16 +7,19 @@ import { useEffect, useRef, useCallback } from 'react';
  *
  * @param callback the callback to write to a ref object
  */
-const useCallbackRef = <T extends CallbackFn>(
-  callback: T | undefined
-): T => {
+const useCallbackRef = <T extends CallbackFn>(callback: T | undefined): T => {
   const callbackRef = useRef(callback);
 
   useEffect(() => {
     callbackRef.current = callback;
-  });
+  }, [callback]);
 
-  return useCallback(((...args) => callbackRef.current?.(...args)) as T, []);
+  return useCallback(
+    ((...args) => {
+      return callbackRef.current?.(...args);
+    }) as T,
+    []
+  );
 };
 
 export default useCallbackRef;

src/hooks/useMenuOptions.ts

@@ -32,13 +32,12 @@ const useMenuOptions = (
 ): MenuOption[] => {
   const getFilterOptionStringRef = useCallbackRef(getFilterOptionString || FUNCTIONS.optionFilter);
   const getIsOptionDisabledRef = useCallbackRef(getIsOptionDisabled || FUNCTIONS.isOptionDisabled);
-
-  const searchValue = !async ? debouncedInputValue : ''; // Prevent recomputing/filtering on input mutations in async mode
-  const isFilterMatchAny = filterMatchFrom === FilterMatchEnum.ANY;
   const hideSelectedOptionsOrDefault = isBoolean(hideSelectedOptions) ? hideSelectedOptions : isMulti;
+  const searchValue = !async ? debouncedInputValue : ''; // Prevent recomputing/filtering on input mutations in async mode
 
   const menuOptions = useMemo<MenuOption[]>(() => {
     const selectedValues = selectedOption.map((x) => x.value);
+    const isFilterMatchAny = filterMatchFrom === FilterMatchEnum.ANY;
     const matchVal = trimAndFormatFilterStr(searchValue, filterIgnoreCase, filterIgnoreAccents);
 
     const isOptionFilterMatch = (option: MenuOption): boolean => {
@@ -54,8 +53,9 @@ const useMenuOptions = (
       const isDisabled = getIsOptionDisabledRef(data);
       const isSelected = selectedValues.includes(value);
       const menuOption: MenuOption = { data, value, label, isDisabled, isSelected };
-      const filterOut = !isOptionFilterMatch(menuOption) || (hideSelectedOptionsOrDefault && isSelected);
-      return filterOut ? undefined : menuOption;
+      return (!isOptionFilterMatch(menuOption) || (hideSelectedOptionsOrDefault && isSelected))
+        ? undefined
+        : menuOption;
     };
 
     return options.reduce((acc: MenuOption[], option: OptionData) => {
@@ -69,7 +69,7 @@ const useMenuOptions = (
     getOptionValue,
     getOptionLabel,
     selectedOption,
-    isFilterMatchAny,
+    filterMatchFrom,
     filterIgnoreCase,
     filterIgnoreAccents,
     getIsOptionDisabledRef,

src/utils/common.ts

@@ -2,7 +2,6 @@ import type { SyntheticEvent } from 'react';
 import type { SelectedOption, OptionValueCallback, OptionLabelCallback, CallbackFn } from '../types';
 import { OPTION_CLS, EMPTY_ARRAY, OPTION_FOCUSED_CLS, OPTION_SELECTED_CLS, OPTION_DISABLED_CLS } from '../constants';
 
-const STYLED_ANI_KEY = 'animation';
 const DIACRITICS_REG_EXP = /[\u0300-\u036f]/g;
 
 /**
@@ -99,7 +98,7 @@ export const mergeDeep = <T>(target: any, source: any): T => {
   Object.keys(source).forEach((key) => {
     const sourceProp = source[key];
     output[key] =
-      (key !== STYLED_ANI_KEY && isPlainObject(sourceProp))
+      (key !== 'animation' && isPlainObject(sourceProp))
         ? target[key]
           ? mergeDeep(target[key], sourceProp)
           : sourceProp