@hyphen/hyphen-components 2.15.5 → 2.16.0

package/dist/lib/tokens.d.ts

@@ -7,7 +7,7 @@ export declare const BREAKPOINTS: Breakpoint[];
 export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900")[];
 export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
 export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "white" | "grey" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
-export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "brand-gradient" | "brand-gradient-purple" | "brand-gradient-cyan" | "chart-1" | "chart-2" | "chart-3")[];
+export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "brand-gradient" | "brand-gradient-purple" | "brand-gradient-cyan" | "chart-1" | "chart-2" | "chart-3")[];
 export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
 export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl")[];
 export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.15.5",
+  "version": "2.16.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -119,7 +119,7 @@
     "@rollup/rollup-linux-x64-gnu": "^4.21.2"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.9.0",
+    "@hyphen/hyphen-design-tokens": "^4.10.0",
     "@popperjs/core": "^2.11.8",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",

package/src/components/FormLabel/FormLabel.module.scss

@@ -9,6 +9,6 @@
   }
 
   &.disabled {
-    color: var(--color-base-grey-300);
+    color: var(--color-font-disabled);
   }
 }

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.module.scss

@@ -278,6 +278,7 @@
       &:global(.react-select__control--is-disabled) {
         :global(.react-select__dropdown-indicator) {
           color: var(--color-font-disabled);
+          background-color: var(--color-background-disabled);
         }
       }
     }
@@ -314,8 +315,6 @@
     }
   }
 
-
-
   &.size-sm {
     @extend %size-sm;
   }
@@ -364,10 +363,10 @@
 
   &.disabled {
     :global(.react-select__control--is-disabled) {
-      background-color: var(
-        --form-control-background-color-disabled,
-        var(--INTERNAL_form-control-background-color-disabled)
-      );
+      background-color: var(--color-background-disabled);
+    }
+    &:hover {
+      cursor: not-allowed;
     }
   }
 }

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>
   );
-};
+}

package/src/components/SelectInputInset/SelectInputInset.module.scss

@@ -165,18 +165,9 @@
 
 // https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios
 %disabled-base {
-  background-color: var(
-    --form-control-background-color-disabled,
-    var(--INTERNAL_form-control-background-color-disabled)
-  );
-  color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
-  -webkit-text-fill-color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
+  background-color: var(--color-background-disabled);
+  color: var(--color-font-disabled);
+  -webkit-text-fill-color: var(--color-font-disabled);
   opacity: 1;
 
   &:hover {

package/src/components/SelectInputNative/SelectInputNative.module.scss

@@ -1,14 +1,9 @@
 @import '@hyphen/hyphen-design-tokens/build/scss/variables';
 
 %disabled-base {
-  background-color: var(
-    --form-control-background-color-disabled,
-    var(--INTERNAL_form-control-background-color-disabled)
-  );
-  color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
+  background-color: var(--color-background-disabled);
+  color: var(--color-font-disabled);
+  -webkit-text-fill-color: var(--color-font-disabled);
   opacity: 1;
 
   &:hover {

package/src/components/TextInput/TextInput.module.scss

@@ -200,18 +200,9 @@
 
 // https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios
 %disabled-base {
-  background-color: var(
-    --form-control-background-color-disabled,
-    var(--INTERNAL_form-control-background-color-disabled)
-  );
-  color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
-  -webkit-text-fill-color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
+  background-color: var(--color-background-disabled);
+  color: var(--color-font-disabled);
+  -webkit-text-fill-color: var(--color-font-disabled);
   opacity: 1;
 
   &:hover {

package/src/components/TextInputInset/TextInputInset.module.scss

@@ -193,18 +193,9 @@
 
 // https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios
 %disabled-base {
-  background-color: var(
-    --form-control-background-color-disabled,
-    var(--INTERNAL_form-control-background-color-disabled)
-  );
-  color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
-  -webkit-text-fill-color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
+  background-color: var(--color-background-disabled);
+  color: var(--color-font-disabled);
+  -webkit-text-fill-color: var(--color-font-disabled);
   opacity: 1;
 
   &:hover {

package/src/components/TextareaInput/TextareaInput.module.scss

@@ -91,14 +91,10 @@
 }
 
 %disabled-base {
-  background-color: var(
-    --form-control-background-color-disabled,
-    var(--INTERNAL_form-control-background-color-disabled)
-  );
-  color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
+  background-color: var(--color-background-disabled);
+  color: var(--color-font-disabled);
+  -webkit-text-fill-color: var(--color-font-disabled);
+  opacity: 1;
 
   &:hover {
     cursor: not-allowed;

package/src/components/TextareaInputInset/TextareaInputInset.module.scss

@@ -142,18 +142,9 @@
 
 // https://stackoverflow.com/questions/262158/disabled-input-text-color-on-ios
 %disabled-base {
-  background-color: var(
-    --form-control-background-color-disabled,
-    var(--INTERNAL_form-control-background-color-disabled)
-  );
-  color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
-  -webkit-text-fill-color: var(
-    --form-control-font-color-disabled,
-    var(--INTERNAL_form-control-font-color-disabled)
-  );
+  background-color: var(--color-background-disabled);
+  color: var(--color-font-disabled);
+  -webkit-text-fill-color: var(--color-font-disabled);
   opacity: 1;
 
   &:hover {