@hyphen/hyphen-components 2.15.6 → 2.16.1

package/dist/components/SelectInput/SelectInput.d.ts

@@ -1,4 +1,4 @@
-import { FC, FocusEvent, ReactNode } from 'react';
+import { FocusEvent, ReactNode } from 'react';
 import { OptionsOrGroups, OnChangeValue } from 'react-select';
 import { ResponsiveProp } from '../../types';
 import { GroupBase } from 'react-select/dist/declarations/src/types';
@@ -25,10 +25,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.
      */
@@ -110,5 +106,35 @@ export interface SelectInputProps {
      */
     [x: string]: any;
 }
-export declare const SelectInput: FC<SelectInputProps>;
+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 declare function SelectInput(props: AsyncSelectInputProps): JSX.Element;
+export declare function SelectInput(props: SyncSelectInputProps): JSX.Element;
 export {};

package/dist/components/SelectInput/SelectInput.stories.d.ts

@@ -9,6 +9,8 @@ export declare const HelpText: () => React.JSX.Element;
 export declare const Placeholder: () => React.JSX.Element;
 export declare const HiddenLabel: () => React.JSX.Element;
 export declare const CreatableSelect: () => React.JSX.Element;
+export declare const AsyncSelect: () => React.JSX.Element;
+export declare const AsyncCreatableSelect: () => React.JSX.Element;
 export declare const MultiSelect: () => React.JSX.Element;
 export declare const MultiSelectAndPreSelected: () => React.JSX.Element;
 export declare const MultiSelectCreatable: () => React.JSX.Element;

package/dist/hyphen-components.cjs.development.js

@@ -18,6 +18,8 @@ var FocusLock = require('react-focus-lock');
 var reactRemoveScroll = require('react-remove-scroll');
 var formik = require('formik');
 var Select = require('react-select');
+var AsyncCreatableSelect = require('react-select/async-creatable');
+var AsyncSelect = require('react-select/async');
 var CreatableSelect = require('react-select/creatable');
 var uuid = require('uuid');
 
@@ -2223,48 +2225,50 @@ var FormikRadioGroup = function FormikRadioGroup(_ref) {
 
 var styles$e = {"react-select-icon":"SelectInput-module_react-select-icon__PvocB","size-sm":"SelectInput-module_size-sm__PKB-J","size-md":"SelectInput-module_size-md__n9Fj8","size-lg":"SelectInput-module_size-lg__LQ-uG","error":"SelectInput-module_error__Avf98","size-sm-tablet":"SelectInput-module_size-sm-tablet__2Dg01","size-md-tablet":"SelectInput-module_size-md-tablet__-iOSg","size-lg-tablet":"SelectInput-module_size-lg-tablet__9xmuJ","size-sm-desktop":"SelectInput-module_size-sm-desktop__tOWI4","size-md-desktop":"SelectInput-module_size-md-desktop__vo-UC","size-lg-desktop":"SelectInput-module_size-lg-desktop__nxQdj","size-sm-hd":"SelectInput-module_size-sm-hd__qamTH","size-md-hd":"SelectInput-module_size-md-hd__Cf8hk","size-lg-hd":"SelectInput-module_size-lg-hd__E4-mZ","disabled":"SelectInput-module_disabled__4ezAy","select-input-label":"SelectInput-module_select-input-label__eqEYa"};
 
-var _excluded$k = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isCreatable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
-var SelectInput = function SelectInput(_ref) {
-  var _ref2, _classNames;
-  var id = _ref.id,
-    label = _ref.label,
-    onChange = _ref.onChange,
-    options = _ref.options,
-    value = _ref.value,
-    _ref$autoFocus = _ref.autoFocus,
-    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
-    helpText = _ref.helpText,
-    _ref$hideLabel = _ref.hideLabel,
-    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
-    _ref$isClearable = _ref.isClearable,
-    isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
-    _ref$isCreatable = _ref.isCreatable,
-    isCreatable = _ref$isCreatable === void 0 ? false : _ref$isCreatable,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isMulti = _ref.isMulti,
-    isMulti = _ref$isMulti === void 0 ? false : _ref$isMulti,
-    _ref$isRequired = _ref.isRequired,
-    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
-    _ref$menuPortalTarget = _ref.menuPortalTarget,
-    menuPortalTarget = _ref$menuPortalTarget === void 0 ? null : _ref$menuPortalTarget,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? '' : _ref$name,
-    _ref$onFocus = _ref.onFocus,
-    onFocus = _ref$onFocus === void 0 ? null : _ref$onFocus,
-    _ref$onBlur = _ref.onBlur,
-    onBlur = _ref$onBlur === void 0 ? null : _ref$onBlur,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? undefined : _ref$placeholder,
-    _ref$requiredIndicato = _ref.requiredIndicator,
-    requiredIndicator = _ref$requiredIndicato === void 0 ? ' *' : _ref$requiredIndicato,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+var _excluded$k = ["id", "label", "onChange", "options", "value", "autoFocus", "className", "error", "helpText", "hideLabel", "isClearable", "isAsync", "isCreatable", "isDisabled", "isMulti", "isRequired", "menuPortalTarget", "name", "onFocus", "onBlur", "placeholder", "requiredIndicator", "size"];
+function SelectInput(props) {
+  var _ref, _classNames;
+  var id = props.id,
+    label = props.label,
+    onChange = props.onChange,
+    options = props.options,
+    value = props.value,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$error = props.error,
+    error = _props$error === void 0 ? false : _props$error,
+    helpText = props.helpText,
+    _props$hideLabel = props.hideLabel,
+    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
+    _props$isClearable = props.isClearable,
+    isClearable = _props$isClearable === void 0 ? false : _props$isClearable,
+    _props$isAsync = props.isAsync,
+    isAsync = _props$isAsync === void 0 ? false : _props$isAsync,
+    _props$isCreatable = props.isCreatable,
+    isCreatable = _props$isCreatable === void 0 ? false : _props$isCreatable,
+    _props$isDisabled = props.isDisabled,
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    _props$isMulti = props.isMulti,
+    isMulti = _props$isMulti === void 0 ? false : _props$isMulti,
+    _props$isRequired = props.isRequired,
+    isRequired = _props$isRequired === void 0 ? false : _props$isRequired,
+    _props$menuPortalTarg = props.menuPortalTarget,
+    menuPortalTarget = _props$menuPortalTarg === void 0 ? null : _props$menuPortalTarg,
+    _props$name = props.name,
+    name = _props$name === void 0 ? '' : _props$name,
+    _props$onFocus = props.onFocus,
+    onFocus = _props$onFocus === void 0 ? null : _props$onFocus,
+    _props$onBlur = props.onBlur,
+    onBlur = _props$onBlur === void 0 ? null : _props$onBlur,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? undefined : _props$placeholder,
+    _props$requiredIndica = props.requiredIndicator,
+    requiredIndicator = _props$requiredIndica === void 0 ? ' *' : _props$requiredIndica,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'md' : _props$size,
+    restProps = _objectWithoutPropertiesLoose(props, _excluded$k);
   var handleChange = function handleChange(values) {
     var simulatedEventPayloadType = {
       target: {
@@ -2283,7 +2287,7 @@ var SelectInput = function SelectInput(_ref) {
   var responsiveClasses = generateResponsiveClasses('size', size);
   var wrapperClasses = classNames.apply(void 0, ['hyphen-components__variables__form-control', 'select-input-wrapper', className].concat(responsiveClasses.map(function (c) {
     return styles$e[c];
-  }), [(_ref2 = {}, _ref2[styles$e.disabled] = isDisabled, _ref2)]));
+  }), [(_ref = {}, _ref[styles$e.disabled] = isDisabled, _ref)]));
   var inputClasses = classNames('react-select', (_classNames = {}, _classNames[styles$e.error] = error, _classNames));
   var labelProps = {
     inputId: id,
@@ -2298,11 +2302,15 @@ var SelectInput = function SelectInput(_ref) {
       name: "remove"
     }));
   };
-  var Component = isCreatable ? CreatableSelect : Select;
+  var Component = isCreatable && isAsync ? AsyncCreatableSelect : isCreatable ? CreatableSelect : isAsync ? AsyncSelect : Select;
   return React.createElement(Box, {
     width: "100%",
     className: wrapperClasses
-  }, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Component, _extends({}, restProps, {
+  }, label && !hideLabel && React.createElement(FormLabel, _extends({}, labelProps), label), React.createElement(Component, _extends({}, restProps, isAsync ? {
+    loadOptions: options
+  } : {
+    options: options
+  }, {
     inputId: id,
     "aria-label": label,
     components: {
@@ -2318,7 +2326,6 @@ var SelectInput = function SelectInput(_ref) {
     menuPortalTarget: menuPortalTarget,
     name: name,
     autoFocus: autoFocus,
-    options: options,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur,
@@ -2331,7 +2338,7 @@ var SelectInput = function SelectInput(_ref) {
     },
     value: value
   })), error && typeof error !== 'boolean' && React.createElement(InputValidationMessage, null, error));
-};
+}
 
 var _excluded$j = ["field", "form", "onChange", "id", "label", "options", "error"];
 var FormikSelectInput = function FormikSelectInput(_ref) {