@commercetools-uikit/select-utils 15.14.3 → 15.15.0

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

@@ -14,6 +14,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var designSystem = require('@commercetools-uikit/design-system');
+var utils = require('@commercetools-uikit/utils');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var react = require('@emotion/react');
 var icons = require('@commercetools-uikit/icons');
@@ -488,7 +489,7 @@ var valueContainerStyles = function valueContainerStyles(props) {
       // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
       // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
       // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-      display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue ? 'flex' : 'grid',
+      display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
       fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
     });
   };
@@ -657,8 +658,19 @@ function createSelectStyles(props) {
   };
 }
 
+var getMessage = function getMessage(componentName) {
+  return "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
+};
+
+var warnIfMenuPortalPropsAreMissing = function warnIfMenuPortalPropsAreMissing(props) {
+  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
+  ) {
+    process.env.NODE_ENV !== "production" ? utils.warning(props.menuPortalTarget, getMessage(props.componentName)) : void 0;
+  }
+};
+
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.3";
+var version = "15.15.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;
@@ -673,3 +685,4 @@ exports.createSelectStyles = createSelectStyles;
 exports.customComponentsWithIcons = customComponents;
 exports.messages = messages;
 exports.version = version;
+exports.warnIfMenuPortalPropsAreMissing = warnIfMenuPortalPropsAreMissing;

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

@@ -14,6 +14,7 @@ var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/obje
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var designSystem = require('@commercetools-uikit/design-system');
+require('@commercetools-uikit/utils');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 var react = require('@emotion/react');
 var icons = require('@commercetools-uikit/icons');
@@ -488,7 +489,7 @@ var valueContainerStyles = function valueContainerStyles(props) {
       // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
       // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
       // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-      display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue ? 'flex' : 'grid',
+      display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
       fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
     });
   };
@@ -657,8 +658,13 @@ function createSelectStyles(props) {
   };
 }
 
+var warnIfMenuPortalPropsAreMissing = function warnIfMenuPortalPropsAreMissing(props) {
+  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
+  ) ;
+};
+
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.3";
+var version = "15.15.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;
@@ -673,3 +679,4 @@ exports.createSelectStyles = createSelectStyles;
 exports.customComponentsWithIcons = customComponents;
 exports.messages = messages;
 exports.version = version;
+exports.warnIfMenuPortalPropsAreMissing = warnIfMenuPortalPropsAreMissing;

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

@@ -10,6 +10,7 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import { designTokens } from '@commercetools-uikit/design-system';
+import { warning } from '@commercetools-uikit/utils';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
 import { css } from '@emotion/react';
 import { CloseIcon, CloseBoldIcon, CaretDownIcon, SearchIcon } from '@commercetools-uikit/icons';
@@ -468,7 +469,7 @@ var valueContainerStyles = function valueContainerStyles(props) {
       // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
       // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
       // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
-      display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue ? 'flex' : 'grid',
+      display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
       fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.fontColorForSelectInputIcon
     });
   };
@@ -637,7 +638,18 @@ function createSelectStyles(props) {
   };
 }
 
+var getMessage = function getMessage(componentName) {
+  return "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
+};
+
+var warnIfMenuPortalPropsAreMissing = function warnIfMenuPortalPropsAreMissing(props) {
+  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
+  ) {
+    process.env.NODE_ENV !== "production" ? warning(props.menuPortalTarget, getMessage(props.componentName)) : void 0;
+  }
+};
+
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.14.3";
+var version = "15.15.0";
 
-export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version };
+export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };

package/dist/declarations/src/create-select-styles.d.ts

@@ -9,6 +9,7 @@ type TProps = {
     iconLeft?: ReactNode;
     isMulti?: boolean;
     hasValue?: boolean;
+    controlShouldRenderValue?: boolean;
 };
 type TBase = {
     fontColorForInput?: string;

package/dist/declarations/src/index.d.ts

@@ -8,4 +8,5 @@ export * from './custom-styled-select-options';
 export * from './export-types';
 export { default as messages } from './messages';
 export { default as createSelectStyles } from './create-select-styles';
+export { warnIfMenuPortalPropsAreMissing } from './warning';
 export { default as version } from './version';

package/dist/declarations/src/warning.d.ts

@@ -0,0 +1,8 @@
+import { type Props as ReactSelectProps } from 'react-select';
+type TWarnIfMenuPortalPropsAreMissingProps = {
+    menuPortalZIndex?: number;
+    menuPortalTarget?: ReactSelectProps['menuPortalTarget'];
+    componentName: string;
+};
+export declare const warnIfMenuPortalPropsAreMissing: (props: TWarnIfMenuPortalPropsAreMissingProps) => void;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "15.14.3",
+  "version": "15.15.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,12 +21,12 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-button": "15.14.3",
-    "@commercetools-uikit/design-system": "15.14.3",
-    "@commercetools-uikit/icons": "15.14.3",
-    "@commercetools-uikit/spacings": "15.14.3",
-    "@commercetools-uikit/text": "15.14.3",
-    "@commercetools-uikit/utils": "15.14.3",
+    "@commercetools-uikit/accessible-button": "15.15.0",
+    "@commercetools-uikit/design-system": "15.15.0",
+    "@commercetools-uikit/icons": "15.15.0",
+    "@commercetools-uikit/spacings": "15.15.0",
+    "@commercetools-uikit/text": "15.15.0",
+    "@commercetools-uikit/utils": "15.15.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",