@commercetools-uikit/select-utils 16.12.1 → 17.0.1

package/dist/commercetools-uikit-select-utils.cjs.d.ts

@@ -1,2 +1,2 @@
 export * from "./declarations/src/index";
-//# sourceMappingURL=commercetools-uikit-select-utils.cjs.d.ts.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy11aWtpdC1zZWxlY3QtdXRpbHMuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

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

@@ -255,6 +255,14 @@ var messages = reactIntl.defineMessages({
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+const getHorizontalConstraintValue = value => {
+  switch (value) {
+    case 'auto':
+      return 'initial';
+    default:
+      return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
+  }
+};
 const getInputBackgroundColor = props => {
   if (props.appearance === 'quiet') {
     return designSystem.designTokens.backgroundColorForInputAsQuiet;
@@ -370,7 +378,8 @@ const menuStyles = props => base => {
       return base.borderColorForInput;
     })(),
     width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
-    minWidth: designSystem.designTokens.constraint3
+    minWidth: props.minMenuWidth ? getHorizontalConstraintValue(props.minMenuWidth) : designSystem.designTokens.constraint3,
+    maxWidth: props.maxMenuWidth ? getHorizontalConstraintValue(props.maxMenuWidth) : designSystem.designTokens.constraintScale
   });
 };
 const indicatorSeparatorStyles = () => base => {
@@ -496,8 +505,9 @@ const groupHeadingStyles = () => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designSystem.designTokens.fontColorForInputWhenReadonly,
     fontSize: designSystem.designTokens.fontSizeSmall,
+    borderBottom: "1px solid ".concat(designSystem.designTokens.borderColorForGroupHeadingSelectInputOptions),
     textTransform: 'none',
-    fontWeight: 'bold',
+    fontWeight: designSystem.designTokens.fontWeight500,
     padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
     '&:empty': {
       padding: 0
@@ -604,7 +614,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.12.1";
+var version = "17.0.1";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

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

@@ -255,6 +255,14 @@ var messages = reactIntl.defineMessages({
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+const getHorizontalConstraintValue = value => {
+  switch (value) {
+    case 'auto':
+      return 'initial';
+    default:
+      return designSystem.designTokens["constraint".concat(value)] || designSystem.designTokens.constraintScale;
+  }
+};
 const getInputBackgroundColor = props => {
   if (props.appearance === 'quiet') {
     return designSystem.designTokens.backgroundColorForInputAsQuiet;
@@ -370,7 +378,8 @@ const menuStyles = props => base => {
       return base.borderColorForInput;
     })(),
     width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
-    minWidth: designSystem.designTokens.constraint3
+    minWidth: props.minMenuWidth ? getHorizontalConstraintValue(props.minMenuWidth) : designSystem.designTokens.constraint3,
+    maxWidth: props.maxMenuWidth ? getHorizontalConstraintValue(props.maxMenuWidth) : designSystem.designTokens.constraintScale
   });
 };
 const indicatorSeparatorStyles = () => base => {
@@ -496,8 +505,9 @@ const groupHeadingStyles = () => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designSystem.designTokens.fontColorForInputWhenReadonly,
     fontSize: designSystem.designTokens.fontSizeSmall,
+    borderBottom: "1px solid ".concat(designSystem.designTokens.borderColorForGroupHeadingSelectInputOptions),
     textTransform: 'none',
-    fontWeight: 'bold',
+    fontWeight: designSystem.designTokens.fontWeight500,
     padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
     '&:empty': {
       padding: 0
@@ -601,7 +611,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.12.1";
+var version = "17.0.1";
 
 exports.ClearIndicator = ClearIndicator$1;
 exports.CustomSelectInputOption = CustomSelectInputOption;

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

@@ -235,6 +235,14 @@ var messages = defineMessages({
 
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+const getHorizontalConstraintValue = value => {
+  switch (value) {
+    case 'auto':
+      return 'initial';
+    default:
+      return designTokens["constraint".concat(value)] || designTokens.constraintScale;
+  }
+};
 const getInputBackgroundColor = props => {
   if (props.appearance === 'quiet') {
     return designTokens.backgroundColorForInputAsQuiet;
@@ -350,7 +358,8 @@ const menuStyles = props => base => {
       return base.borderColorForInput;
     })(),
     width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
-    minWidth: designTokens.constraint3
+    minWidth: props.minMenuWidth ? getHorizontalConstraintValue(props.minMenuWidth) : designTokens.constraint3,
+    maxWidth: props.maxMenuWidth ? getHorizontalConstraintValue(props.maxMenuWidth) : designTokens.constraintScale
   });
 };
 const indicatorSeparatorStyles = () => base => {
@@ -476,8 +485,9 @@ const groupHeadingStyles = () => base => {
   return _objectSpread(_objectSpread({}, base), {}, {
     color: designTokens.fontColorForInputWhenReadonly,
     fontSize: designTokens.fontSizeSmall,
+    borderBottom: "1px solid ".concat(designTokens.borderColorForGroupHeadingSelectInputOptions),
     textTransform: 'none',
-    fontWeight: 'bold',
+    fontWeight: designTokens.fontWeight500,
     padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.paddingForGroupHeadingSelectInputOptions),
     '&:empty': {
       padding: 0
@@ -584,6 +594,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.12.1";
+var version = "17.0.1";
 
 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

@@ -11,6 +11,8 @@ type TProps = {
     hasValue?: boolean;
     controlShouldRenderValue?: boolean;
     appearance?: 'default' | 'quiet';
+    minMenuWidth?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    maxMenuWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
 };
 type TBase = {
@@ -65,7 +67,8 @@ export default function createSelectStyles(props: TProps): {
         margin: string;
         borderColor: string | undefined;
         width: string;
-        minWidth: "var(--constraint-3, 142px)";
+        minWidth: string;
+        maxWidth: string;
         fontColorForInput?: string | undefined;
         borderColorForInput?: string | undefined;
         color?: string | undefined;
@@ -275,8 +278,9 @@ export default function createSelectStyles(props: TProps): {
     groupHeading: (base: TBase) => {
         color: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
         fontSize: "var(--font-size-small, 0.9231rem)";
+        borderBottom: string;
         textTransform: string;
-        fontWeight: string;
+        fontWeight: "var(--font-weight-500, 500)";
         padding: string;
         '&:empty': {
             padding: number;

package/package.json

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

package/dist/commercetools-uikit-select-utils.cjs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"commercetools-uikit-select-utils.cjs.d.ts","sourceRoot":"","sources":["./declarations/src/index.d.ts"],"names":[],"mappings":"AAAA"}