@hyphen/hyphen-components 2.15.6 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.15.6",
+  "version": "2.16.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/SelectInput/SelectInput.mdx

@@ -69,6 +69,18 @@ Use the `isMulti` and `isCreatable` props to allow the selection of multiple opt
 
 <Canvas of={Stories.MultiSelectCreatable} />
 
+## Async Select
+
+Use the `options` prop to pass a function that returns a promise to load options asynchronously.
+
+<Canvas of={Stories.AsyncSelect} />
+
+## Async Creatable Select
+
+Use the `isCreatable` prop to allow the creation of new options and the `options` prop to pass a function that returns a promise to load options asynchronously.
+
+<Canvas of={Stories.AsyncCreatableSelect} />
+
 ## Autofocus
 
 Use the `autoFocus` prop to autofocus a SelectInput.

package/src/components/SelectInput/SelectInput.stories.tsx

@@ -143,6 +143,92 @@ export const CreatableSelect = () => {
   );
 };
 
+export const AsyncSelect = () => {
+  type Option = {
+    value: string;
+    label: string;
+  };
+
+  const [value, setValue] = useState(null);
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+  ];
+
+  const filterOptions = (inputValue: string) => {
+    return options.filter((i) =>
+      i.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+  };
+  const loadOptions = (inputValue: string) => {
+    return new Promise<Option[]>((resolve) => {
+      setTimeout(() => {
+        resolve(filterOptions(inputValue));
+      }, 1000);
+    });
+  };
+
+  return (
+    <div style={{ height: '200px' }}>
+      <SelectInput
+        id="asyncSelect"
+        label="Label"
+        value={value}
+        // @ts-ignore - TS is not recognizing the value as a valid option
+        onChange={(event) => setValue(event.target.value)}
+        options={loadOptions}
+        defaultOptions
+        cacheOptions
+        isAsync
+      />
+    </div>
+  );
+};
+
+export const AsyncCreatableSelect = () => {
+  type Option = {
+    value: string;
+    label: string;
+  };
+
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+  ];
+
+  const [value, setValue] = useState(null);
+
+  const filterOptions = (inputValue: string) => {
+    return options.filter((i) =>
+      i.label.toLowerCase().includes(inputValue.toLowerCase())
+    );
+  };
+  const loadOptions = (inputValue: string) => {
+    return new Promise<Option[]>((resolve) => {
+      setTimeout(() => {
+        resolve(filterOptions(inputValue));
+      }, 1000);
+    });
+  };
+
+  return (
+    <div style={{ height: '200px' }}>
+      <SelectInput
+        id="asyncCreateSelect"
+        label="Label"
+        value={value}
+        // @ts-ignore - TS is not recognizing the value as a valid option
+        onChange={(event) => setValue(event.target.value)}
+        options={loadOptions}
+        isCreatable
+        defaultOptions
+        cacheOptions
+        isAsync
+      />
+    </div>
+  );
+};
+
 export const MultiSelect = () => {
   const [value, setValue] = useState(null);
   const options = [

package/src/components/SelectInput/SelectInput.test.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { render, fireEvent, screen, Matcher } from '@testing-library/react';
+import {
+  render,
+  fireEvent,
+  screen,
+  Matcher,
+  waitFor,
+} from '@testing-library/react';
 import selectEvent from 'react-select-event';
 import { SelectInput, TextInputSize } from './SelectInput';
 
@@ -200,6 +206,31 @@ describe('SelectInput', () => {
       });
     });
 
+    describe('Async select', () => {
+      it('it renders with loading state', async () => {
+        const mockedHandleChange = jest.fn();
+        const loadOptions = jest.fn(() => Promise.resolve([]));
+
+        const { getByLabelText } = render(
+          <SelectInput
+            id="testId"
+            onChange={mockedHandleChange}
+            label="Select Label"
+            options={loadOptions}
+            value={''}
+            isAsync
+          />
+        );
+
+        const inputElement = getByLabelText('Select Label');
+        fireEvent.change(inputElement, { target: { value: 'test' } });
+
+        await waitFor(() => {
+          expect(loadOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+
     describe('Multi select, no selection', () => {
       it('it renders input with a label, and with a default placeholder', () => {
         const mockedHandleChange = jest.fn();

package/src/components/SelectInput/SelectInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, FocusEvent, ReactNode, FocusEventHandler } from 'react';
+import React, { FocusEvent, ReactNode, FocusEventHandler } from 'react';
 import classNames from 'classnames';
 import Select, {
   components,
@@ -6,6 +6,8 @@ import Select, {
   OptionsOrGroups,
   OnChangeValue,
 } from 'react-select';
+import AsyncCreatableSelect from 'react-select/async-creatable';
+import AsyncSelect from 'react-select/async';
 import CreatableSelect from 'react-select/creatable';
 import { ResponsiveProp } from '../../types';
 import { generateResponsiveClasses, Z_INDEX_VALUES } from '../../lib';
@@ -49,10 +51,6 @@ export interface SelectInputProps {
    * Callback function to call on change event.
    */
   onChange: (event: SimulatedEventPayloadType) => void;
-  /**
-   * Options for dropdown list.
-   */
-  options: SelectInputOptions;
   /**
    * The value(s) of select.
    */
@@ -135,31 +133,67 @@ export interface SelectInputProps {
   [x: string]: any; // eslint-disable-line
 }
 
-export const SelectInput: FC<SelectInputProps> = ({
-  id,
-  label,
-  onChange,
-  options,
-  value,
-  autoFocus = false,
-  className = '',
-  error = false,
-  helpText,
-  hideLabel = false,
-  isClearable = false,
-  isCreatable = false,
-  isDisabled = false,
-  isMulti = false,
-  isRequired = false,
-  menuPortalTarget = null,
-  name = '',
-  onFocus = null,
-  onBlur = null,
-  placeholder = undefined,
-  requiredIndicator = ' *',
-  size = 'md',
-  ...restProps
-}) => {
+type AsyncOptions = (inputValue: string) => Promise<SelectInputOptions>;
+type AsyncSelectInputProps = SelectInputProps & {
+  /**
+   * Load the input asynchronously.
+   */
+  isAsync: true;
+  /**
+   * Load options asynchronously.
+   */
+  options: AsyncOptions;
+  /**
+   * If cacheOptions is passed, then the loaded data will be cached.
+   */
+  cacheOptions?: boolean;
+  /**
+   * The default set of options to show before the user starts searching.
+   */
+  defaultOptions?: boolean;
+};
+
+type SyncSelectInputProps = SelectInputProps & {
+  /**
+   * Load the input synchronously.
+   */
+  isAsync?: false;
+  /**
+   * Options for dropdown list.
+   */
+  options: SelectInputOptions;
+};
+
+export function SelectInput(props: AsyncSelectInputProps): JSX.Element;
+export function SelectInput(props: SyncSelectInputProps): JSX.Element;
+export function SelectInput(props: SelectInputProps): JSX.Element {
+  const {
+    id,
+    label,
+    onChange,
+    options,
+    value,
+    autoFocus = false,
+    className = '',
+    error = false,
+    helpText,
+    hideLabel = false,
+    isClearable = false,
+    isAsync = false,
+    isCreatable = false,
+    isDisabled = false,
+    isMulti = false,
+    isRequired = false,
+    menuPortalTarget = null,
+    name = '',
+    onFocus = null,
+    onBlur = null,
+    placeholder = undefined,
+    requiredIndicator = ' *',
+    size = 'md',
+    ...restProps
+  } = props;
+
   const handleChange = (values: OnChangeValue<SelectInputOptions, boolean>) => {
     const simulatedEventPayloadType: SimulatedEventPayloadType = {
       target: {
@@ -212,13 +246,21 @@ export const SelectInput: FC<SelectInputProps> = ({
     </components.ClearIndicator>
   );
 
-  const Component = isCreatable ? CreatableSelect : Select;
+  const Component =
+    isCreatable && isAsync
+      ? AsyncCreatableSelect
+      : isCreatable
+      ? CreatableSelect
+      : isAsync
+      ? AsyncSelect
+      : Select;
 
   return (
     <Box width="100%" className={wrapperClasses}>
       {label && !hideLabel && <FormLabel {...labelProps}>{label}</FormLabel>}
       <Component
         {...restProps}
+        {...(isAsync ? { loadOptions: options } : { options })}
         inputId={id}
         aria-label={label}
         components={{ ClearIndicator }}
@@ -232,7 +274,6 @@ export const SelectInput: FC<SelectInputProps> = ({
         menuPortalTarget={menuPortalTarget}
         name={name}
         autoFocus={autoFocus}
-        options={options}
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
@@ -249,4 +290,4 @@ export const SelectInput: FC<SelectInputProps> = ({
       )}
     </Box>
   );
-};
+}