@commercetools-uikit/select-input 19.22.7 → 19.23.0

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

@@ -89,9 +89,9 @@ const SelectInput = _ref => {
     return option;
   });
   const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || []
-  // Pass the options in the order selected by the use, so that the
+  // Pass the options in the order selected by the user, so that the
   // sorting is not lost
-  ).call(_context2, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
+  ).call(_context2, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, option => Boolean(option)) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
@@ -247,6 +247,7 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   }))]),
   optionStyle: _pt__default["default"].oneOf(['list', 'checkbox']),
   showOptionGroupDivider: _pt__default["default"].bool,
+  value: _pt__default["default"].oneOfType([_pt__default["default"].string, _pt__default["default"].arrayOf(_pt__default["default"].string), _pt__default["default"].oneOf([null])]),
   minMenuWidth: _pt__default["default"].oneOf([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   maxMenuWidth: _pt__default["default"].oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   count: _pt__default["default"].number
@@ -298,7 +299,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.22.7";
+var version = "19.23.0";
 
 exports["default"] = SelectInput$1;
 exports.version = version;

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

@@ -88,9 +88,9 @@ const SelectInput = _ref => {
     return option;
   });
   const selectedOptions = props.isMulti ? _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = props.value || []
-  // Pass the options in the order selected by the use, so that the
+  // Pass the options in the order selected by the user, so that the
   // sorting is not lost
-  ).call(_context2, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, Boolean) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
+  ).call(_context2, value => _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, option => Boolean(option)) : _findInstanceProperty__default["default"](optionsWithoutGroups).call(optionsWithoutGroups, option => has__default["default"](option, 'value') && option.value === props.value) || null;
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, utils.filterDataAttributes(_objectSpread({
@@ -269,7 +269,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.22.7";
+var version = "19.23.0";
 
 exports["default"] = SelectInput$1;
 exports.version = version;

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

@@ -66,9 +66,9 @@ const SelectInput = _ref => {
     return option;
   });
   const selectedOptions = props.isMulti ? _filterInstanceProperty(_context = _mapInstanceProperty(_context2 = props.value || []
-  // Pass the options in the order selected by the use, so that the
+  // Pass the options in the order selected by the user, so that the
   // sorting is not lost
-  ).call(_context2, value => _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, Boolean) : _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => has(option, 'value') && option.value === props.value) || null;
+  ).call(_context2, value => _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => option.value === value))).call(_context, option => Boolean(option)) : _findInstanceProperty(optionsWithoutGroups).call(optionsWithoutGroups, option => has(option, 'value') && option.value === props.value) || null;
   return jsx(Constraints.Horizontal, {
     max: props.horizontalConstraint,
     children: jsx("div", _objectSpread(_objectSpread({}, filterDataAttributes(_objectSpread({
@@ -224,6 +224,7 @@ SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
   }))]),
   optionStyle: _pt.oneOf(['list', 'checkbox']),
   showOptionGroupDivider: _pt.bool,
+  value: _pt.oneOfType([_pt.string, _pt.arrayOf(_pt.string), _pt.oneOf([null])]),
   minMenuWidth: _pt.oneOf([2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   maxMenuWidth: _pt.oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto']),
   count: _pt.number
@@ -275,6 +276,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.22.7";
+var version = "19.23.0";
 
 export { SelectInput$1 as default, version };

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

@@ -11,8 +11,8 @@ export type TOptionObject = {
 export type TOptions = TOption[] | TOptionObject[];
 export type TCustomEvent = {
     target: {
-        id?: ReactSelectProps['inputId'];
-        name?: ReactSelectProps['name'];
+        id?: ReactSelectProps<TOption>['inputId'];
+        name?: ReactSelectProps<TOption>['name'];
         value?: string | string[] | null;
     };
     persist: () => void;
@@ -46,25 +46,25 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    'aria-label'?: ReactSelectProps['aria-label'];
+    'aria-label'?: ReactSelectProps<TOption>['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'];
+    'aria-labelledby'?: ReactSelectProps<TOption>['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'];
+    'aria-invalid'?: ReactSelectProps<TOption>['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'];
+    'aria-errormessage'?: ReactSelectProps<TOption>['aria-errormessage'];
     /**
      * Focus the control when it is mounted
      */
@@ -74,13 +74,13 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    backspaceRemovesValue?: ReactSelectProps['backspaceRemovesValue'];
+    backspaceRemovesValue?: ReactSelectProps<TOption>['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'];
+    components?: ReactSelectProps<TOption>['components'];
     /**
      * Whether the input and options are rendered with condensed paddings
      */
@@ -90,87 +90,87 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    controlShouldRenderValue?: ReactSelectProps['controlShouldRenderValue'];
+    controlShouldRenderValue?: ReactSelectProps<TOption>['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'];
+    filterOption?: ReactSelectProps<TOption>['filterOption'];
     /**
      * Custom method to determine whether selected options should be displayed in the menu
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    hideSelectedOptions?: ReactSelectProps['hideSelectedOptions'];
+    hideSelectedOptions?: ReactSelectProps<TOption>['hideSelectedOptions'];
     /**
      * 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'];
+    id?: ReactSelectProps<TOption>['inputId'];
     /**
      * The value of the search input
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    inputValue?: ReactSelectProps['inputValue'];
+    inputValue?: ReactSelectProps<TOption>['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'];
+    containerId?: ReactSelectProps<TOption>['id'];
     /**
      * Is the select value clearable
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isClearable?: ReactSelectProps['isClearable'];
+    isClearable?: ReactSelectProps<TOption>['isClearable'];
     /**
      * Is the select disabled
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isDisabled?: ReactSelectProps['isDisabled'];
+    isDisabled?: ReactSelectProps<TOption>['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'];
+    isOptionDisabled?: ReactSelectProps<TOption>['isOptionDisabled'];
     /**
      * Support multiple selected options
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isMulti?: ReactSelectProps['isMulti'];
+    isMulti?: ReactSelectProps<TOption>['isMulti'];
     /**
      * Whether to enable search functionality
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isSearchable?: ReactSelectProps['isSearchable'];
+    isSearchable?: ReactSelectProps<TOption>['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'];
+    menuIsOpen?: ReactSelectProps<TOption>['menuIsOpen'];
     /**
      * Maximum height of the menu before scrolling
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    maxMenuHeight?: ReactSelectProps['maxMenuHeight'];
+    maxMenuHeight?: ReactSelectProps<TOption>['maxMenuHeight'];
     /**
      * Dom element to portal the select menu to
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
+    menuPortalTarget?: ReactSelectProps<TOption>['menuPortalTarget'];
     /**
      * z-index value for the menu portal
      * <br>
@@ -182,19 +182,19 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    menuShouldBlockScroll?: ReactSelectProps['menuShouldBlockScroll'];
+    menuShouldBlockScroll?: ReactSelectProps<TOption>['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'];
+    closeMenuOnSelect?: ReactSelectProps<TOption>['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'];
+    name?: ReactSelectProps<TOption>['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 />
@@ -202,7 +202,7 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    noOptionsMessage?: ReactSelectProps['noOptionsMessage'];
+    noOptionsMessage?: ReactSelectProps<TOption>['noOptionsMessage'];
     /**
      * Handle blur events on the control
      */
@@ -218,13 +218,13 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    onFocus?: ReactSelectProps['onFocus'];
+    onFocus?: ReactSelectProps<TOption>['onFocus'];
     /**
      * Handle change events on the input
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    onInputChange?: ReactSelectProps['onInputChange'];
+    onInputChange?: ReactSelectProps<TOption>['onInputChange'];
     /**
      * Array of options that populate the select menu
      */
@@ -237,25 +237,23 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    placeholder?: ReactSelectProps['placeholder'];
+    placeholder?: ReactSelectProps<TOption>['placeholder'];
     /**
      * Sets the tabIndex attribute on the input
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    tabIndex?: ReactSelectProps['tabIndex'];
+    tabIndex?: ReactSelectProps<TOption>['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'];
+    tabSelectsValue?: ReactSelectProps<TOption>['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'];
+    value?: string | string[] | null;
     /**
      * 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.
@@ -297,22 +295,10 @@ declare const SelectInput: {
     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(
-    /**
-     * 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)
-     */
-    "@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;
     LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
     LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
-    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import(
-    /**
-     * Custom method to determine whether selected options should be displayed in the menu
-     * <br>
-     * [Props from React select was used](https://react-select.com/props)
-     */
-    "@emotion/react").jsx.JSX.Element;
+    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
     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: ComponentType<CommonPropsAndClassName<unknown, false, GroupBase<unknown>> & {
         appendTo: HTMLElement | undefined;
@@ -334,12 +320,6 @@ declare const SelectInput: {
     Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
     SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends 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 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 GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => 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;
+    ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
 };
 export default SelectInput;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-input",
   "description": "An input component getting a selection from the user.",
-  "version": "19.22.7",
+  "version": "19.23.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,17 +21,17 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "19.22.7",
-    "@commercetools-uikit/design-system": "19.22.7",
-    "@commercetools-uikit/icons": "19.22.7",
-    "@commercetools-uikit/select-utils": "19.22.7",
-    "@commercetools-uikit/utils": "19.22.7",
+    "@commercetools-uikit/constraints": "19.23.0",
+    "@commercetools-uikit/design-system": "19.23.0",
+    "@commercetools-uikit/icons": "19.23.0",
+    "@commercetools-uikit/select-utils": "19.23.0",
+    "@commercetools-uikit/utils": "19.23.0",
     "@emotion/is-prop-valid": "1.3.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-select": "5.9.0"
+    "react-select": "5.10.1"
   },
   "devDependencies": {
     "react": "17.0.2",