@commercetools-uikit/select-utils 16.5.0 → 16.6.0

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

@@ -272,7 +272,7 @@ const getControlBorderColor = (props, defaultColor) => {
 };
 const controlStyles = props => (base, state) => {
   var _context;
-  return _objectSpread(_objectSpread({}, base), {}, {
+  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
     fontSize: designSystem.designTokens.fontSizeForInput,
     backgroundColor: (() => {
       if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -301,7 +301,10 @@ const controlStyles = props => (base, state) => {
     padding: "0 ".concat(designSystem.designTokens.paddingForInput),
     transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
     outline: 0,
-    boxShadow: 'none',
+    boxShadow: 'none'
+  }, props.horizontalConstraint === 'auto' ? {
+    display: 'inline-flex'
+  } : {}), {}, {
     '&:focus-within': {
       boxShadow: (() => {
         var _context2;
@@ -337,7 +340,8 @@ const menuStyles = props => base => {
       if (props.hasError) return designSystem.designTokens.borderColorForSelectInputMenuWhenError;
       if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
       return base.borderColorForInput;
-    })()
+    })(),
+    width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
   });
 };
 const indicatorSeparatorStyles = () => base => {
@@ -563,7 +567,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.5.0";
+var version = "16.6.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

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

@@ -272,7 +272,7 @@ const getControlBorderColor = (props, defaultColor) => {
 };
 const controlStyles = props => (base, state) => {
   var _context;
-  return _objectSpread(_objectSpread({}, base), {}, {
+  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
     fontSize: designSystem.designTokens.fontSizeForInput,
     backgroundColor: (() => {
       if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -301,7 +301,10 @@ const controlStyles = props => (base, state) => {
     padding: "0 ".concat(designSystem.designTokens.paddingForInput),
     transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
     outline: 0,
-    boxShadow: 'none',
+    boxShadow: 'none'
+  }, props.horizontalConstraint === 'auto' ? {
+    display: 'inline-flex'
+  } : {}), {}, {
     '&:focus-within': {
       boxShadow: (() => {
         var _context2;
@@ -337,7 +340,8 @@ const menuStyles = props => base => {
       if (props.hasError) return designSystem.designTokens.borderColorForSelectInputMenuWhenError;
       if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
       return base.borderColorForInput;
-    })()
+    })(),
+    width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
   });
 };
 const indicatorSeparatorStyles = () => base => {
@@ -560,7 +564,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.5.0";
+var version = "16.6.0";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

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

@@ -252,7 +252,7 @@ const getControlBorderColor = (props, defaultColor) => {
 };
 const controlStyles = props => (base, state) => {
   var _context;
-  return _objectSpread(_objectSpread({}, base), {}, {
+  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
     fontSize: designTokens.fontSizeForInput,
     backgroundColor: (() => {
       if (props.isDisabled) return designTokens.backgroundColorForInputWhenDisabled;
@@ -281,7 +281,10 @@ const controlStyles = props => (base, state) => {
     padding: "0 ".concat(designTokens.paddingForInput),
     transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n    box-shadow ")).call(_context, designTokens.transitionStandard),
     outline: 0,
-    boxShadow: 'none',
+    boxShadow: 'none'
+  }, props.horizontalConstraint === 'auto' ? {
+    display: 'inline-flex'
+  } : {}), {}, {
     '&:focus-within': {
       boxShadow: (() => {
         var _context2;
@@ -317,7 +320,8 @@ const menuStyles = props => base => {
       if (props.hasError) return designTokens.borderColorForSelectInputMenuWhenError;
       if (props.hasWarning) return designTokens.borderColorForSelectInputMenuWhenWarning;
       return base.borderColorForInput;
-    })()
+    })(),
+    width: props.horizontalConstraint === 'auto' ? 'auto' : '100%'
   });
 };
 const indicatorSeparatorStyles = () => base => {
@@ -543,6 +547,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.5.0";
+var version = "16.6.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, warnIfMenuPortalPropsAreMissing };

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

@@ -10,6 +10,7 @@ type TProps = {
     isMulti?: boolean;
     hasValue?: boolean;
     controlShouldRenderValue?: boolean;
+    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
 };
 type TBase = {
     fontColorForInput?: string;
@@ -28,6 +29,17 @@ type TState = {
 };
 export default function createSelectStyles(props: TProps): {
     control: (base: TBase, state: TState) => {
+        '&:focus-within': {
+            boxShadow: string | null;
+            borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
+        };
+        '&:hover': {
+            borderColor: string;
+            backgroundColor: "var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))" | null;
+        };
+        pointerEvents: string;
+        color: string | undefined;
+        display?: string | undefined;
         fontSize: "var(--font-size-for-input, 1rem)";
         backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(0, 0%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(0, 0%, 95%))";
         borderColor: "var(--border-color-for-input, #ccc)" | "var(--border-color-for-input-when-focused, #00b39e)" | "var(--border-color-for-input-when-disabled, #ccc)" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-select-input-when-readonly, hsl(0, 0%, 95%))";
@@ -39,16 +51,6 @@ export default function createSelectStyles(props: TProps): {
         transition: string;
         outline: number;
         boxShadow: string;
-        '&:focus-within': {
-            boxShadow: string | null;
-            borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
-        };
-        '&:hover': {
-            borderColor: string;
-            backgroundColor: "var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))" | null;
-        };
-        pointerEvents: string;
-        color: string | undefined;
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         borderTop?: string | undefined;
@@ -62,6 +64,7 @@ export default function createSelectStyles(props: TProps): {
         fontFamily: string;
         margin: string;
         borderColor: string | undefined;
+        width: string;
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         color?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "16.5.0",
+  "version": "16.6.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": "16.5.0",
-    "@commercetools-uikit/design-system": "16.5.0",
-    "@commercetools-uikit/icons": "16.5.0",
-    "@commercetools-uikit/spacings": "16.5.0",
-    "@commercetools-uikit/text": "16.5.0",
-    "@commercetools-uikit/utils": "16.5.0",
+    "@commercetools-uikit/accessible-button": "16.6.0",
+    "@commercetools-uikit/design-system": "16.6.0",
+    "@commercetools-uikit/icons": "16.6.0",
+    "@commercetools-uikit/spacings": "16.6.0",
+    "@commercetools-uikit/text": "16.6.0",
+    "@commercetools-uikit/utils": "16.6.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",