@commercetools-uikit/async-creatable-select-input 19.8.0 → 19.10.0

package/dist/commercetools-uikit-async-creatable-select-input.cjs.dev.js

@@ -252,7 +252,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.8.0";
+var version = "19.10.0";
 
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-async-creatable-select-input.cjs.prod.js

@@ -234,7 +234,7 @@ AsyncCreatableSelectInput.ValueContainer = reactSelect.components.ValueContainer
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.8.0";
+var version = "19.10.0";
 
 exports["default"] = AsyncCreatableSelectInput$1;
 exports.version = version;

package/dist/commercetools-uikit-async-creatable-select-input.esm.js

@@ -231,6 +231,6 @@ AsyncCreatableSelectInput.ValueContainer = components.ValueContainer;
 var AsyncCreatableSelectInput$1 = AsyncCreatableSelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.8.0";
+var version = "19.10.0";
 
 export { AsyncCreatableSelectInput$1 as default, version };

package/dist/declarations/src/async-creatable-select-input.d.ts

@@ -11,59 +11,280 @@ type TCustomEvent = {
 };
 type ReactSelectAsyncCreatableProps = AsyncCreatableProps<unknown, boolean, GroupBase<unknown>>;
 export type TAsyncCreatableSelectInputProps = {
+    /**
+     * Horizontal size limit of the input fields.
+     */
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    /**
+     * Indicates the input field has an error
+     */
     hasError?: boolean;
+    /**
+     * Indicates the input field has a warning
+     */
     hasWarning?: boolean;
+    /**
+     *  Is the select read-only
+     */
     isReadOnly?: boolean;
+    /**
+     * Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
+     */
     iconLeft?: ReactNode;
+    /**
+     * Aria label (for assistive tech)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     'aria-label'?: ReactSelectAsyncCreatableProps['aria-label'];
+    /**
+     * HTML ID of an element that should be used as the label (for assistive tech)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     'aria-labelledby'?: ReactSelectAsyncCreatableProps['aria-labelledby'];
+    /**
+     * Indicate if the value entered in the input is invalid.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     'aria-invalid'?: ReactSelectAsyncCreatableProps['aria-invalid'];
+    /**
+     * HTML ID of an element containing an error message related to the input.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     'aria-errormessage'?: ReactSelectAsyncCreatableProps['aria-errormessage'];
+    /**
+     * Focus the control when it is mounted
+     */
     isAutofocussed?: boolean;
+    /**
+     * Remove the currently focused option when the user presses backspace
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     backspaceRemovesValue?: ReactSelectAsyncCreatableProps['backspaceRemovesValue'];
+    /**
+     * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     components?: ReactSelectAsyncCreatableProps['components'];
+    /**
+     * Custom method to filter whether an option should be displayed in the menu
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     filterOption?: ReactSelectAsyncCreatableProps['filterOption'];
+    /**
+     * The id of the search input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     id?: ReactSelectAsyncCreatableProps['inputId'];
+    /**
+     * The value of the search input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     inputValue?: ReactSelectAsyncCreatableProps['inputValue'];
+    /**
+     * The id to set on the SelectContainer component
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     containerId?: ReactSelectAsyncCreatableProps['id'];
+    /**
+     * Is the select value clearable
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isClearable?: ReactSelectAsyncCreatableProps['isClearable'];
+    /**
+     * Use this property to reduce the paddings of the component for a ui compact variant
+     */
     isCondensed?: boolean;
+    /**
+     * Is the select disabled
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isDisabled?: ReactSelectAsyncCreatableProps['isDisabled'];
+    /**
+     * Override the built-in logic to detect whether an option is disabled
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isOptionDisabled?: ReactSelectAsyncCreatableProps['isOptionDisabled'];
+    /**
+     * Support multiple selected options
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isMulti?: ReactSelectAsyncCreatableProps['isMulti'];
+    /**
+     * Whether to enable search functionality
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isSearchable?: ReactSelectAsyncCreatableProps['isSearchable'];
+    /**
+     * Maximum height of the menu before scrolling
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     maxMenuHeight?: ReactSelectAsyncCreatableProps['maxMenuHeight'];
+    /**
+     * Dom element to portal the select menu to
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     menuPortalTarget?: ReactSelectAsyncCreatableProps['menuPortalTarget'];
+    /**
+     * z-index value for the menu portal
+     * <br>
+     * Use in conjunction with `menuPortalTarget`
+     */
     menuPortalZIndex: number;
+    /**
+     * whether the menu should block scroll while open
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     menuShouldBlockScroll?: ReactSelectAsyncCreatableProps['menuShouldBlockScroll'];
+    /**
+     * Whether the menu should close after a value is selected. Defaults to `true`.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     closeMenuOnSelect?: ReactSelectAsyncCreatableProps['closeMenuOnSelect'];
+    /**
+     * Name of the HTML Input (optional - without this, no input will be rendered)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     name?: ReactSelectAsyncCreatableProps['name'];
+    /**
+     * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place). Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     noOptionsMessage?: ReactSelectAsyncCreatableProps['noOptionsMessage'];
+    /**
+     * Handle blur events on the control
+     */
     onBlur?: (event: TCustomEvent) => void;
+    /**
+     * Called with a fake event when value changes. The event's `target.name` will be the `name` supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
+     */
     onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
+    /**
+     * Handle focus events on the control
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     onFocus?: ReactSelectAsyncCreatableProps['onFocus'];
+    /**
+     * Handle change events on the input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     onInputChange?: ReactSelectAsyncCreatableProps['onInputChange'];
+    /**
+     * Placeholder text for the select value
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     placeholder?: ReactSelectAsyncCreatableProps['placeholder'];
+    /**
+     * Sets the tabIndex attribute on the input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     tabIndex?: ReactSelectAsyncCreatableProps['tabIndex'];
+    /**
+     * Select the currently focused option when the user presses tab
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     tabSelectsValue?: ReactSelectAsyncCreatableProps['tabSelectsValue'];
+    /**
+     * The value of the select; reflected by the selected option
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     value?: ReactSelectAsyncCreatableProps['value'];
+    /**
+     * The default set of options to show before the user starts searching. When set to true, the results for loadOptions('') will be autoloaded.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     defaultOptions?: ReactSelectAsyncCreatableProps['defaultOptions'];
+    /**
+     * Function that returns a promise, which is the set of options to be used once the promise resolves.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     loadOptions: ReactSelectAsyncCreatableProps['loadOptions'];
+    /**
+     * If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     cacheOptions?: ReactSelectAsyncCreatableProps['cacheOptions'];
+    /**
+     * Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     allowCreateWhileLoading?: ReactSelectAsyncCreatableProps['allowCreateWhileLoading'];
+    /**
+     * Gets the label for the "create new ..." option in the menu. Is given the current input value.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     formatCreateLabel?: ReactSelectAsyncCreatableProps['formatCreateLabel'];
+    /**
+     * Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isValidNewOption?: ReactSelectAsyncCreatableProps['isValidNewOption'];
+    /**
+     * Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     getNewOptionData?: ReactSelectAsyncCreatableProps['getNewOptionData'];
+    /**
+     * If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     onCreateOption?: ReactSelectAsyncCreatableProps['onCreateOption'];
+    /**
+     * Sets the position of the createOption element in your options list.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     createOptionPosition?: ReactSelectAsyncCreatableProps['createOptionPosition'];
+    /**
+     * Determines if option groups will be separated by a divider
+     */
     showOptionGroupDivider?: boolean;
 };
 declare const AsyncCreatableSelectInput: {
     (props: TAsyncCreatableSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
     defaultProps: Pick<TAsyncCreatableSelectInputProps, "value" | "isSearchable" | "menuPortalZIndex">;
+    /**
+     * Expose static helper methods.
+     */
     isTouched(touched: unknown): boolean;
+    /**
+     * Expose react-select components for customization purposes.
+     */
     ClearIndicator: {
         (props: import("@commercetools-uikit/select-utils").TClearIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -79,7 +300,11 @@ declare const AsyncCreatableSelectInput: {
     GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
     IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
     IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
-    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
+    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react" /**
+     * Is the select value clearable
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */).jsx.JSX.Element;
     LoadingIndicator: {
         (): import("@emotion/react/jsx-runtime").JSX.Element;
         displayName: string;
@@ -89,7 +314,13 @@ declare const AsyncCreatableSelectInput: {
     MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
     MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
     MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
-    MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import(
+    /**
+     * whether the menu should block scroll while open
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
+    "@emotion/react").jsx.JSX.Element;
     MultiValueLabel: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
     MultiValueRemove: {
         (props: import("@commercetools-uikit/select-utils").TTagRemoveProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/async-creatable-select-input",
   "description": "An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.",
-  "version": "19.8.0",
+  "version": "19.10.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "19.8.0",
-    "@commercetools-uikit/design-system": "19.8.0",
-    "@commercetools-uikit/icons": "19.8.0",
-    "@commercetools-uikit/loading-spinner": "19.8.0",
-    "@commercetools-uikit/select-utils": "19.8.0",
-    "@commercetools-uikit/spacings": "19.8.0",
-    "@commercetools-uikit/text": "19.8.0",
-    "@commercetools-uikit/utils": "19.8.0",
+    "@commercetools-uikit/constraints": "19.10.0",
+    "@commercetools-uikit/design-system": "19.10.0",
+    "@commercetools-uikit/icons": "19.10.0",
+    "@commercetools-uikit/loading-spinner": "19.10.0",
+    "@commercetools-uikit/select-utils": "19.10.0",
+    "@commercetools-uikit/spacings": "19.10.0",
+    "@commercetools-uikit/text": "19.10.0",
+    "@commercetools-uikit/utils": "19.10.0",
     "@emotion/is-prop-valid": "1.2.2",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",