@commercetools-uikit/select-input 15.9.0 → 15.11.0

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

@@ -22,6 +22,7 @@ var Select = require('react-select');
 var Constraints = require('@commercetools-uikit/constraints');
 var selectUtils = require('@commercetools-uikit/select-utils');
 var utils = require('@commercetools-uikit/utils');
+var designSystem = require('@commercetools-uikit/design-system');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -60,6 +61,10 @@ var SelectInput = function SelectInput(props) {
   var _context, _context2;
 
   var intl = reactIntl.useIntl();
+
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
   //   const colourOptions = [{ value: 'green', label: 'Green' }];
   //   const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
@@ -108,7 +113,8 @@ var SelectInput = function SelectInput(props) {
           isReadOnly: props.isReadOnly,
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
-          hasValue: !isEmpty__default["default"](selectedOptions)
+          hasValue: !isEmpty__default["default"](selectedOptions),
+          isNewTheme: isNewTheme
         }),
         filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
@@ -258,7 +264,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 = "15.9.0";
+var version = "15.11.0";
 
 exports["default"] = SelectInput$1;
 exports.version = version;

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

@@ -22,6 +22,7 @@ var Select = require('react-select');
 var Constraints = require('@commercetools-uikit/constraints');
 var selectUtils = require('@commercetools-uikit/select-utils');
 var utils = require('@commercetools-uikit/utils');
+var designSystem = require('@commercetools-uikit/design-system');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -59,6 +60,10 @@ var SelectInput = function SelectInput(props) {
   var _context, _context2;
 
   var intl = reactIntl.useIntl();
+
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var placeholder = props.placeholder || intl.formatMessage(selectUtils.messages.placeholder); // Options can be grouped as
   //   const colourOptions = [{ value: 'green', label: 'Green' }];
   //   const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
@@ -107,7 +112,8 @@ var SelectInput = function SelectInput(props) {
           isReadOnly: props.isReadOnly,
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
-          hasValue: !isEmpty__default["default"](selectedOptions)
+          hasValue: !isEmpty__default["default"](selectedOptions),
+          isNewTheme: isNewTheme
         }),
         filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
@@ -237,7 +243,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 = "15.9.0";
+var version = "15.11.0";
 
 exports["default"] = SelectInput$1;
 exports.version = version;

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

@@ -18,6 +18,7 @@ import Select, { components } from 'react-select';
 import Constraints from '@commercetools-uikit/constraints';
 import { messages, customComponentsWithIcons, createSelectStyles, DropdownIndicator, ClearIndicator, TagRemove } from '@commercetools-uikit/select-utils';
 import { filterDataAttributes } from '@commercetools-uikit/utils';
+import { useTheme } from '@commercetools-uikit/design-system';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -37,6 +38,10 @@ var SelectInput = function SelectInput(props) {
   var _context, _context2;
 
   var intl = useIntl();
+
+  var _useTheme = useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var placeholder = props.placeholder || intl.formatMessage(messages.placeholder); // Options can be grouped as
   //   const colourOptions = [{ value: 'green', label: 'Green' }];
   //   const flavourOptions = [{ value: 'vanilla', label: 'Vanilla' }];
@@ -85,7 +90,8 @@ var SelectInput = function SelectInput(props) {
           isReadOnly: props.isReadOnly,
           iconLeft: props.iconLeft,
           isMulti: props.isMulti,
-          hasValue: !isEmpty(selectedOptions)
+          hasValue: !isEmpty(selectedOptions),
+          isNewTheme: isNewTheme
         }),
         filterOption: props.filterOption // react-select uses "id" (for the container) and "inputId" (for the input),
         // but we use "id" (for the input) and "containerId" (for the container)
@@ -235,6 +241,6 @@ SelectInput.ValueContainer = components.ValueContainer;
 var SelectInput$1 = SelectInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.9.0";
+var version = "15.11.0";
 
 export { SelectInput$1 as default, version };

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

@@ -1,14 +1,14 @@
 import type { ReactNode } from 'react';
 import { type Props as ReactSelectProps } from 'react-select';
-declare type TOption = {
+type TOption = {
     value: string;
     label?: ReactNode;
 };
-declare type TOptionObject = {
+type TOptionObject = {
     options: TOption[];
 };
-declare type TOptions = TOption[] | TOptionObject[];
-declare type TCustomEvent = {
+type TOptions = TOption[] | TOptionObject[];
+type TCustomEvent = {
     target: {
         id?: ReactSelectProps['inputId'];
         name?: ReactSelectProps['name'];
@@ -16,7 +16,7 @@ declare type TCustomEvent = {
     };
     persist: () => void;
 };
-declare type TSelectInputProps = {
+type TSelectInputProps = {
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
     hasError?: boolean;
     isReadOnly?: boolean;
@@ -95,7 +95,7 @@ declare const SelectInput: {
     };
     Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").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 import("react-select").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 import("react-select").GroupBase<Option_11>>({ appendTo, children, className, controlElement, cx, innerProps, menuPlacement, menuPosition, getStyles, }: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
+    MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").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 import("react-select").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 import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
     MultiValueLabel: <Option_15_1, IsMulti_15_1 extends boolean, Group_15_1 extends import("react-select").GroupBase<Option_15_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15_1, IsMulti_15_1, Group_15_1>) => 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": "15.9.0",
+  "version": "15.11.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,17 +21,17 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@babel/runtime-corejs3": "^7.19.1",
-    "@commercetools-uikit/constraints": "15.9.0",
-    "@commercetools-uikit/design-system": "15.9.0",
-    "@commercetools-uikit/icons": "15.9.0",
-    "@commercetools-uikit/select-utils": "15.9.0",
-    "@commercetools-uikit/utils": "15.9.0",
+    "@commercetools-uikit/constraints": "15.11.0",
+    "@commercetools-uikit/design-system": "15.11.0",
+    "@commercetools-uikit/icons": "15.11.0",
+    "@commercetools-uikit/select-utils": "15.11.0",
+    "@commercetools-uikit/utils": "15.11.0",
     "@emotion/is-prop-valid": "1.2.0",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-select": "5.5.2"
+    "react-select": "5.7.0"
   },
   "devDependencies": {
     "react": "17.0.2",