@commercetools-uikit/select-input 20.3.0 → 20.3.1

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

@@ -51,7 +51,7 @@ const customizedComponents = {
   ClearIndicator: selectUtils.ClearIndicator,
   MultiValueRemove: selectUtils.TagRemove
 };
-const isOptionObject = option => option.options !== undefined;
+const isOptionObject = option => 'options' in option && !!option.options;
 const SelectInput = _ref => {
   var _context, _context2;
   let _ref$appearance = _ref.appearance,
@@ -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 = "20.3.0";
+var version = "20.3.1";
 
 exports["default"] = SelectInput$1;
 exports.version = version;

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

@@ -51,7 +51,7 @@ const customizedComponents = {
   ClearIndicator: selectUtils.ClearIndicator,
   MultiValueRemove: selectUtils.TagRemove
 };
-const isOptionObject = option => option.options !== undefined;
+const isOptionObject = option => 'options' in option && !!option.options;
 const SelectInput = _ref => {
   var _context, _context2;
   let _ref$appearance = _ref.appearance,
@@ -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 = "20.3.0";
+var version = "20.3.1";
 
 exports["default"] = SelectInput$1;
 exports.version = version;

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

@@ -29,7 +29,7 @@ const customizedComponents = {
   ClearIndicator,
   MultiValueRemove: TagRemove
 };
-const isOptionObject = option => option.options !== undefined;
+const isOptionObject = option => 'options' in option && !!option.options;
 const SelectInput = _ref => {
   var _context, _context2;
   let _ref$appearance = _ref.appearance,
@@ -245,6 +245,6 @@ SelectInput.ValueContainer = components.ValueContainer;
 var SelectInput$1 = SelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.3.0";
+var version = "20.3.1";
 
 export { SelectInput$1 as default, version };

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

@@ -5,10 +5,10 @@ export type TOption = {
     label?: ReactNode;
     isDisabled?: boolean;
 };
-export type TOptionObject = {
-    options: TOption[];
+export type TOptionObject<T extends TOption = TOption> = {
+    options: T[];
 };
-export type TOptions = TOption[] | TOptionObject[];
+export type TOptions<T extends TOption = TOption> = T[] | TOptionObject<T>[];
 export type TCustomEvent = {
     target: {
         id?: ReactSelectProps<TOption>['inputId'];
@@ -17,7 +17,7 @@ export type TCustomEvent = {
     };
     persist: () => void;
 };
-export type TSelectInputProps = {
+export type TSelectInputProps<T extends TOption = TOption> = {
     /**
      * Indicates the appearance of the input.
      * `quiet` appearance is meant to be used with the `horizontalConstraint="auto"`.
@@ -46,25 +46,25 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    'aria-label'?: ReactSelectProps<TOption>['aria-label'];
+    'aria-label'?: ReactSelectProps<T>['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<TOption>['aria-labelledby'];
+    'aria-labelledby'?: ReactSelectProps<T>['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<TOption>['aria-invalid'];
+    'aria-invalid'?: ReactSelectProps<T>['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<TOption>['aria-errormessage'];
+    'aria-errormessage'?: ReactSelectProps<T>['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<TOption>['backspaceRemovesValue'];
+    backspaceRemovesValue?: ReactSelectProps<T>['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<TOption>['components'];
+    components?: ReactSelectProps<T>['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<TOption>['controlShouldRenderValue'];
+    controlShouldRenderValue?: ReactSelectProps<T>['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<TOption>['filterOption'];
+    filterOption?: ReactSelectProps<T>['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<TOption>['hideSelectedOptions'];
+    hideSelectedOptions?: ReactSelectProps<T>['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<TOption>['inputId'];
+    id?: ReactSelectProps<T>['inputId'];
     /**
      * The value of the search input
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    inputValue?: ReactSelectProps<TOption>['inputValue'];
+    inputValue?: ReactSelectProps<T>['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<TOption>['id'];
+    containerId?: ReactSelectProps<T>['id'];
     /**
      * Is the select value clearable
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isClearable?: ReactSelectProps<TOption>['isClearable'];
+    isClearable?: ReactSelectProps<T>['isClearable'];
     /**
      * Is the select disabled
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isDisabled?: ReactSelectProps<TOption>['isDisabled'];
+    isDisabled?: ReactSelectProps<T>['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<TOption>['isOptionDisabled'];
+    isOptionDisabled?: ReactSelectProps<T>['isOptionDisabled'];
     /**
      * Support multiple selected options
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isMulti?: ReactSelectProps<TOption>['isMulti'];
+    isMulti?: ReactSelectProps<T>['isMulti'];
     /**
      * Whether to enable search functionality
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    isSearchable?: ReactSelectProps<TOption>['isSearchable'];
+    isSearchable?: ReactSelectProps<T>['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<TOption>['menuIsOpen'];
+    menuIsOpen?: ReactSelectProps<T>['menuIsOpen'];
     /**
      * Maximum height of the menu before scrolling
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    maxMenuHeight?: ReactSelectProps<TOption>['maxMenuHeight'];
+    maxMenuHeight?: ReactSelectProps<T>['maxMenuHeight'];
     /**
      * Dom element to portal the select menu to
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    menuPortalTarget?: ReactSelectProps<TOption>['menuPortalTarget'];
+    menuPortalTarget?: ReactSelectProps<T>['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<TOption>['menuShouldBlockScroll'];
+    menuShouldBlockScroll?: ReactSelectProps<T>['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<TOption>['closeMenuOnSelect'];
+    closeMenuOnSelect?: ReactSelectProps<T>['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<TOption>['name'];
+    name?: ReactSelectProps<T>['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<TOption>['noOptionsMessage'];
+    noOptionsMessage?: ReactSelectProps<T>['noOptionsMessage'];
     /**
      * Handle blur events on the control
      */
@@ -218,17 +218,17 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    onFocus?: ReactSelectProps<TOption>['onFocus'];
+    onFocus?: ReactSelectProps<T>['onFocus'];
     /**
      * Handle change events on the input
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    onInputChange?: ReactSelectProps<TOption>['onInputChange'];
+    onInputChange?: ReactSelectProps<T>['onInputChange'];
     /**
      * Array of options that populate the select menu
      */
-    options?: TOptions;
+    options?: TOptions<T>;
     /** defines how options are rendered */
     optionStyle?: 'list' | 'checkbox';
     showOptionGroupDivider?: boolean;
@@ -237,19 +237,19 @@ export type TSelectInputProps = {
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    placeholder?: ReactSelectProps<TOption>['placeholder'];
+    placeholder?: ReactSelectProps<T>['placeholder'];
     /**
      * Sets the tabIndex attribute on the input
      * <br>
      * [Props from React select was used](https://react-select.com/props)
      */
-    tabIndex?: ReactSelectProps<TOption>['tabIndex'];
+    tabIndex?: ReactSelectProps<T>['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<TOption>['tabSelectsValue'];
+    tabSelectsValue?: ReactSelectProps<T>['tabSelectsValue'];
     /**
      * The value of the select; reflected by the selected option
      */
@@ -270,7 +270,7 @@ export type TSelectInputProps = {
     count?: number;
 };
 declare const SelectInput: {
-    ({ appearance, maxMenuHeight, menuPortalZIndex, options, optionStyle, ...props }: TSelectInputProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    <T extends TOption>({ appearance, maxMenuHeight, menuPortalZIndex, options, optionStyle, ...props }: TSelectInputProps<T>): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
     isTouched(touched: boolean | unknown[]): boolean;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-input",
   "description": "An input component getting a selection from the user.",
-  "version": "20.3.0",
+  "version": "20.3.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,15 +21,15 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "20.3.0",
-    "@commercetools-uikit/design-system": "20.3.0",
-    "@commercetools-uikit/icons": "20.3.0",
-    "@commercetools-uikit/select-utils": "20.3.0",
-    "@commercetools-uikit/utils": "20.3.0",
+    "@commercetools-uikit/constraints": "20.3.1",
+    "@commercetools-uikit/design-system": "20.3.1",
+    "@commercetools-uikit/icons": "20.3.1",
+    "@commercetools-uikit/select-utils": "20.3.1",
+    "@commercetools-uikit/utils": "20.3.1",
     "@emotion/is-prop-valid": "1.4.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
+    "lodash": "4.17.23",
     "react-select": "5.10.2"
   },
   "devDependencies": {