@commercetools-uikit/select-input 19.8.0 → 19.10.0

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

@@ -267,7 +267,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
 var SelectInput$1 = SelectInput;
 
 // 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"] = SelectInput$1;
 exports.version = version;

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

@@ -242,7 +242,7 @@ SelectInput.ValueContainer = Select.components.ValueContainer;
 var SelectInput$1 = SelectInput;
 
 // 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"] = SelectInput$1;
 exports.version = version;

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

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

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

@@ -17,56 +17,257 @@ export type TCustomEvent = {
     persist: () => void;
 };
 export type TSelectInputProps = {
+    /**
+     * Indicates the appearance of the input.
+     * Quiet appearance is meant to be used with the `horizontalConstraint="auto"`.
+     */
     appearance?: 'default' | 'quiet';
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    /**
+     * Indicates that input has errors
+     */
     hasError?: boolean;
+    /**
+     * Is the select read-only
+     */
     isReadOnly?: boolean;
+    /**
+     * Control to indicate on the input if there are selected values that are potentially invalid
+     */
     hasWarning?: 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'?: ReactSelectProps['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'?: ReactSelectProps['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'?: ReactSelectProps['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'?: ReactSelectProps['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?: ReactSelectProps['backspaceRemovesValue'];
+    /**
+     * Map of components to overwrite the default ones, see what components you can override
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     components?: ReactSelectProps['components'];
+    /**
+     * Whether the input and options are rendered with condensed paddings
+     */
     isCondensed?: boolean;
+    /**
+     * Control whether the selected values should be rendered in the control
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     controlShouldRenderValue?: ReactSelectProps['controlShouldRenderValue'];
+    /**
+     * 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?: ReactSelectProps['filterOption'];
+    /**
+     * Used as HTML id property. An id is generated automatically when not provided.
+     * This forwarded as react-select's "inputId"
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     id?: ReactSelectProps['inputId'];
+    /**
+     * The value of the search input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     inputValue?: ReactSelectProps['inputValue'];
+    /**
+     * The id to set on the SelectContainer component
+     * This is forwarded as react-select's "id"
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     containerId?: ReactSelectProps['id'];
+    /**
+     * Is the select value clearable
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isClearable?: ReactSelectProps['isClearable'];
+    /**
+     * Is the select disabled
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isDisabled?: ReactSelectProps['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?: ReactSelectProps['isOptionDisabled'];
+    /**
+     * Support multiple selected options
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isMulti?: ReactSelectProps['isMulti'];
+    /**
+     * Whether to enable search functionality
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     isSearchable?: ReactSelectProps['isSearchable'];
+    /**
+     * Can be used to enforce the select input to be opened
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     menuIsOpen?: ReactSelectProps['menuIsOpen'];
+    /**
+     * Maximum height of the menu before scrolling
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     maxMenuHeight?: ReactSelectProps['maxMenuHeight'];
+    /**
+     * Dom element to portal the select menu to
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     menuPortalTarget?: ReactSelectProps['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?: ReactSelectProps['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?: ReactSelectProps['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?: ReactSelectProps['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 }.
+     * <br />
+     * `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?: ReactSelectProps['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.
+     * <br/>
+     * The value will be the selected option, or an array of options in case isMulti is true.
+     */
     onChange?: (event: TCustomEvent) => void;
+    /**
+     * Handle focus events on the control
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     onFocus?: ReactSelectProps['onFocus'];
+    /**
+     * Handle change events on the input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     onInputChange?: ReactSelectProps['onInputChange'];
+    /**
+     * Array of options that populate the select menu
+     */
     options: TOptions;
     showOptionGroupDivider?: boolean;
+    /**
+     * Placeholder text for the select value
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     placeholder?: ReactSelectProps['placeholder'];
+    /**
+     * Sets the tabIndex attribute on the input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     tabIndex?: ReactSelectProps['tabIndex'];
+    /**
+     * Select the currently focused option when the user presses tab
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     tabSelectsValue?: ReactSelectProps['tabSelectsValue'];
+    /**
+     * The value of the select; reflected by the selected option
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
     value?: ReactSelectProps['value'];
+    /**
+     * The min width (a range of values from the horizontalConrtaint set of values) for which the select-input menu
+     * is allowed to shrink. If unset, the menu will shrink to a default value.
+     */
     minMenuWidth?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    /**
+     * The max width (a range of values from the horizontalConrtaint set of values) for which the select-input menu
+     * is allowed to grow. If unset, the menu will grow horrizontally to fill its parent.
+     */
     maxMenuWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
 };
 declare const SelectInput: {
     (props: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
     defaultProps: Pick<TSelectInputProps, "appearance" | "maxMenuHeight" | "options" | "menuPortalZIndex">;
+    /**
+     * Expose static helper methods.
+     */
     isTouched(touched: boolean | 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;
@@ -97,7 +298,13 @@ declare const SelectInput: {
     };
     NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("react-select").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
     Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
-    Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
+    Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import(
+    /**
+     * Dom element to portal the select menu to
+     * <br>
+     * [Props from React select was used](https://react-select.com/props)
+     */
+    "@emotion/react").jsx.JSX.Element;
     SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
     SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("react-select").GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
     ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-input",
   "description": "An input component getting a selection from the user.",
-  "version": "19.8.0",
+  "version": "19.10.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,11 +21,11 @@
   "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/select-utils": "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/select-utils": "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",