changed separator node type from div to span in Indicator IndicatorIcons component; hoisted the memo wrapper from the MultiValue component to it's parent Value component (in addition, modified the Value component props to now take a boolean "hasInput" instead of a string "inputValue" to reduce the amount of renders triggered during search input mutations).; fix React Hooks linter rule warnings (although triggered erroneously it looks like)

Author: based-ghost

.storybook/manager-head.html

@@ -96,7 +96,7 @@
   }
 
   #storybook-panel-root .os-content > pre > div:last-of-type .token.function {
-    color: #82AAFF;
+    color: #85ADFF;
   }
 
   #storybook-panel-root .os-content > pre > div:last-of-type .token.string,

__stories__/helpers/components/CodeMarkup.tsx

@@ -64,18 +64,15 @@ const PreContainer = styled.div`
         color: #FF9CAC;
       }
 
-      .number {
-        color: #F78C6C;
-      }
-
       .function {
-        color: #82AAFF;
+        color: #85ADFF;
       }
 
       .tag {
         color: #F07178;
       }
 
+      .number,
       .attr-name {
         color: #c792ea;
       }

__tests__/Value.test.tsx

@@ -37,7 +37,7 @@ const createValueProps = () => {
 
   const props: ValueProps = {
     isMulti: false,
-    inputValue: '',
+    hasInput: false,
     focusedMultiValue: null,
     selectedOption: EMPTY_ARRAY,
     renderMultiOptions: undefined,
@@ -63,13 +63,13 @@ test('"placeholder" text displays when no option is selected', async () => {
   expect(getByText(PLACEHOLDER_DEFAULT)).toBeInTheDocument();
 });
 
-test('component renders NULL if "inputValue" is truthy AND ("isMulti" != true OR ("isMulti" = true AND selectedOptions is empty))', async () => {
+test('component renders NULL if "hasInput" is true AND ("isMulti" !== true OR ("isMulti" === true AND "selectedOptions" is empty))', async () => {
   const { props } = createValueProps();
 
   // Render with truthy "inputValue" and "isMulti" = false
   const singleProps = {
     ...props,
-    inputValue: 'test search',
+    hasInput: true,
   };
 
   const { container, rerender } = renderValue(singleProps);

package.json

@@ -65,14 +65,14 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.3",
-    "@types/node": "^18.11.10",
+    "@types/jest": "^29.2.4",
+    "@types/node": "^18.11.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
     "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.5.1",
+    "rollup": "^3.6.0",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.3.6",
     "typescript": "^4.9.3",

src/Select.tsx

@@ -676,22 +676,24 @@ const Select = forwardRef<SelectRef, SelectProps>((
     setMenuOpen(true);
   };
 
-  const handleOnMouseDown = (e: SyntheticEvent<Element>): void => {
+  // React Hooks linter rules require that this function be memoized in
+  // ...order to be referenced in deps array of callback functions below
+  const handleOnMouseDown = useCallback((e: SyntheticEvent<HTMLElement>): void => {
     suppressEvent(e);
     focusInput();
-  };
+  }, []);
 
   const handleOnClearMouseDown = useCallback((e: MouseOrTouchEvent<HTMLElement>): void => {
     handleOnMouseDown(e);
     setSelectedOption(EMPTY_ARRAY);
-  }, []);
+  }, [handleOnMouseDown]);
 
   const handleOnCaretMouseDown = useCallback((e: MouseOrTouchEvent<HTMLElement>): void => {
     if (!isDisabled && !openMenuOnClick) {
       handleOnMouseDown(e);
       menuOpenRef.current ? setMenuOpen(false) : openMenuAndFocusOption(OptionIndexEnum.FIRST);
     }
-  }, [isDisabled, openMenuOnClick, openMenuAndFocusOption]);
+  }, [isDisabled, menuOpenRef, openMenuOnClick, handleOnMouseDown, openMenuAndFocusOption]);
 
   const flexValueWrapper = !!isMulti && hasSelectedOptions;
   const showClear = !!isClearable && !isDisabled && hasSelectedOptions;
@@ -717,7 +719,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
           <ValueWrapper flex={flexValueWrapper}>
             <Value
               isMulti={isMulti}
-              inputValue={inputValue}
+              hasInput={!!inputValue}
               placeholder={placeholder}
               selectedOption={selectedOption}
               focusedMultiValue={focusedMultiValue}

src/components/AutosizeInput/index.tsx

@@ -2,10 +2,6 @@ import styled, { css } from 'styled-components';
 import { AUTOSIZE_INPUT_ATTRS } from '../../constants';
 import React, { forwardRef, type Ref, type FormEventHandler, type FocusEventHandler } from 'react';
 
-type InputProps = Readonly<{
-  invalid?: boolean;
-}>;
-
 type AutosizeInputProps = Readonly<{
   id?: string;
   menuId?: string;
@@ -22,6 +18,8 @@ type AutosizeInputProps = Readonly<{
   onChange: FormEventHandler<HTMLInputElement>;
 }>;
 
+type InputProps = Pick<AutosizeInputProps, 'isInvalid'>;
+
 const INPUT_BASE_STYLE = css`
   border: 0;
   margin: 0;
@@ -59,7 +57,7 @@ const Input = styled.input.attrs(AUTOSIZE_INPUT_ATTRS)<InputProps>`
   }
 
   ${({ theme }) => theme.input.css}
-  ${({ theme, invalid }) => invalid && theme.input.cssRequired}
+  ${({ theme, isInvalid }) => isInvalid && theme.input.cssRequired}
 `;
 
 const AutosizeInput = forwardRef<HTMLInputElement, AutosizeInputProps>((
@@ -75,34 +73,29 @@ const AutosizeInput = forwardRef<HTMLInputElement, AutosizeInputProps>((
     ariaLabel,
     isInvalid,
     inputValue,
-    ariaLabelledBy,
-    hasSelectedOptions
+    ariaLabelledBy
   },
   ref: Ref<HTMLInputElement>
-) => {
-  const invalid = isInvalid || (required && !hasSelectedOptions);
-
-  return (
-    <InputWrapper data-value={inputValue}>
-      <Input
-        invalid
-        id={id}
-        ref={ref}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        value={inputValue}
-        readOnly={readOnly}
-        aria-owns={menuId}
-        aria-controls={menuId}
-        aria-label={ariaLabel}
-        aria-required={invalid}
-        aria-expanded={menuOpen}
-        aria-labelledby={ariaLabelledBy}
-        onChange={!readOnly ? onChange : undefined}
-      />
-    </InputWrapper>
-  );
-});
+) => (
+  <InputWrapper data-value={inputValue}>
+    <Input
+      id={id}
+      ref={ref}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      value={inputValue}
+      aria-owns={menuId}
+      readOnly={readOnly}
+      isInvalid={isInvalid}
+      aria-controls={menuId}
+      aria-label={ariaLabel}
+      aria-expanded={menuOpen}
+      aria-required={required}
+      aria-labelledby={ariaLabelledBy}
+      onChange={!readOnly ? onChange : undefined}
+    />
+  </InputWrapper>
+));
 
 AutosizeInput.displayName = 'AutosizeInput';
 

src/components/Value/MultiValue.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { type FunctionComponent } from 'react';
 import { suppressEvent } from '../../utils';
 import styled, { css } from 'styled-components';
 import { CLEAR_ICON_MV_TESTID } from '../../constants';
@@ -55,19 +55,20 @@ const Clear = styled.i<ClearProps>`
    ${({ isFocused }) => isFocused && CLEAR_ICON_FOCUS_STYLE}
 `;
 
-const MultiValue = memo<MultiValueProps>(({
+const MultiValue: FunctionComponent<MultiValueProps> = ({
   data,
   value,
   isFocused,
   renderOptionLabel,
   removeSelectedOption
 }) => {
-  const labelNode = renderOptionLabel(data);
   const onClear = () => removeSelectedOption(value);
 
   return (
     <MultiValueWrapper>
-      <Label>{labelNode}</Label>
+      <Label>
+        {renderOptionLabel(data)}
+      </Label>
       <Clear
         onClick={onClear}
         onTouchEnd={onClear}
@@ -79,8 +80,6 @@ const MultiValue = memo<MultiValueProps>(({
       </Clear>
     </MultiValueWrapper>
   );
-});
-
-MultiValue.displayName = 'MultiValue';
+};
 
 export default MultiValue;

src/components/Value/index.tsx

@@ -1,12 +1,12 @@
-import React, { Fragment, type ReactNode, type FunctionComponent } from 'react';
+import React, { memo, Fragment, type ReactNode } from 'react';
 import MultiValue from './MultiValue';
 import styled from 'styled-components';
 import { isArrayWithLength } from '../../utils';
 import type { MultiParams, SelectedOption, RenderLabelCallback } from '../../types';
 
 type ValueProps = Readonly<{
   isMulti?: boolean;
-  inputValue: string;
+  hasInput: boolean;
   placeholder: string;
   selectedOption: SelectedOption[];
   focusedMultiValue: string | number | null;
@@ -29,9 +29,9 @@ const Placeholder = styled(SingleValue)`
   color: ${({ theme }) => theme.color.placeholder};
 `;
 
-const Value: FunctionComponent<ValueProps> = ({
+const Value = memo<ValueProps>(({
   isMulti,
-  inputValue,
+  hasInput,
   placeholder,
   selectedOption,
   focusedMultiValue,
@@ -40,7 +40,7 @@ const Value: FunctionComponent<ValueProps> = ({
   removeSelectedOption
 }) => {
   const noSelectedOpts = !isArrayWithLength(selectedOption);
-  if (inputValue && (!isMulti || (isMulti && (noSelectedOpts || renderMultiOptions)))) {
+  if (hasInput && (!isMulti || (isMulti && (noSelectedOpts || renderMultiOptions)))) {
     return null;
   }
 
@@ -49,8 +49,8 @@ const Value: FunctionComponent<ValueProps> = ({
   }
 
   if (!isMulti) {
-    const labelNode = renderOptionLabel(selectedOption[0].data);
-    return <SingleValue>{labelNode}</SingleValue>;
+    const label = renderOptionLabel(selectedOption[0].data);
+    return <SingleValue>{label}</SingleValue>;
   }
 
   return (
@@ -69,6 +69,8 @@ const Value: FunctionComponent<ValueProps> = ({
           ))}
     </Fragment>
   );
-};
+});
+
+Value.displayName = 'Value';
 
 export default Value;

src/constants/dom.ts

@@ -22,16 +22,17 @@ export const CONTROL_CONTAINER_CLS = 'rfs-control-container';
 
 // data-testid attributes used for DOM element querying in unit test cases
 // ...this attribute gets rendered in development and test environments (removed in production)
-export const CLEAR_ICON_TESTID = process.env.NODE_ENV === 'test' ? CLEAR_ICON_CLS : undefined;
-export const CARET_ICON_TESTID = process.env.NODE_ENV === 'test' ? CARET_ICON_CLS : undefined;
-export const AUTOSIZE_INPUT_TESTID = process.env.NODE_ENV === 'test' ? AUTOSIZE_INPUT_CLS : undefined;
-export const MENU_CONTAINER_TESTID = process.env.NODE_ENV === 'test' ? MENU_CONTAINER_CLS : undefined;
-export const CLEAR_ICON_MV_TESTID = process.env.NODE_ENV === 'test' ? `${CLEAR_ICON_CLS}-mv` : undefined;
-export const SELECT_CONTAINER_TESTID = process.env.NODE_ENV === 'test' ? SELECT_CONTAINER_CLS : undefined;
-export const CONTROL_CONTAINER_TESTID = process.env.NODE_ENV === 'test' ? CONTROL_CONTAINER_CLS : undefined;
+const isTest = process.env.NODE_ENV === 'test';
+export const CLEAR_ICON_TESTID = isTest ? CLEAR_ICON_CLS : undefined;
+export const CARET_ICON_TESTID = isTest ? CARET_ICON_CLS : undefined;
+export const AUTOSIZE_INPUT_TESTID = isTest ? AUTOSIZE_INPUT_CLS : undefined;
+export const MENU_CONTAINER_TESTID = isTest ? MENU_CONTAINER_CLS : undefined;
+export const CLEAR_ICON_MV_TESTID = isTest ? `${CLEAR_ICON_CLS}-mv` : undefined;
+export const SELECT_CONTAINER_TESTID = isTest ? SELECT_CONTAINER_CLS : undefined;
+export const CONTROL_CONTAINER_TESTID = isTest ? CONTROL_CONTAINER_CLS : undefined;
 
 /**
- * Static attributes for 'AutosizeInput' input element.
+ * Static attributes for 'AutosizeInput' input element
  */
 export const AUTOSIZE_INPUT_ATTRS: InputHTMLAttributes<HTMLInputElement> & TestableElement = {
   tabIndex: 0,

src/utils/common.ts

@@ -19,7 +19,7 @@ export const isPlainObject = (val: unknown): boolean => val !== null && typeof v
 /**
  * Prevent default behavior and propagation of an event
  */
-export const suppressEvent = (e: SyntheticEvent<Element>): void => {
+export const suppressEvent = (e: SyntheticEvent): void => {
   e.preventDefault();
   e.stopPropagation();
 };
@@ -95,7 +95,7 @@ export const mergeDeep = <T>(target: any, source: any): T => {
         ? target[key]
           ? mergeDeep(target[key], sourceProp)
           : sourceProp
-        : sourceProp ?? '';
+        : sourceProp;
   });
 
   return output;

src/utils/device.ts

@@ -7,14 +7,16 @@ let _isTouchDevice: boolean | undefined;
  * Global, lazy evaluation.
  */
 export const isTouchDevice = (): boolean => {
-  if (isBoolean(_isTouchDevice)) return _isTouchDevice;
+  if (isBoolean(_isTouchDevice)) {
+    return _isTouchDevice;
+  }
 
-  return (_isTouchDevice = (() => {
+  return _isTouchDevice = (() => {
     try {
       document.createEvent('TouchEvent');
       return true;
     } catch (e) {
       return false;
     }
-  })());
+  })();
 };