@commercetools-uikit/select-utils 15.9.0 → 15.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commercetools-uikit-select-utils.cjs.dev.js +68 -43
- package/dist/commercetools-uikit-select-utils.cjs.prod.js +68 -43
- package/dist/commercetools-uikit-select-utils.esm.js +68 -43
- package/dist/declarations/src/clear-indicator/clear-indicator.d.ts +2 -2
- package/dist/declarations/src/create-select-styles.d.ts +27 -20
- package/dist/declarations/src/custom-styled-select-options/custom-styled-select-options.d.ts +5 -5
- package/dist/declarations/src/tag-remove/tag-remove.d.ts +2 -2
- package/dist/declarations/src/wrapper-with-icon/wrapper-with-icon.d.ts +5 -5
- package/package.json +8 -8
|
@@ -66,7 +66,7 @@ var ClearIndicator = function ClearIndicator(props) {
|
|
|
66
66
|
|
|
67
67
|
return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
68
68
|
ref: ref,
|
|
69
|
-
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", designSystem.designTokens.
|
|
69
|
+
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.fontColorForClearInputIcon, ";:hover svg *{fill:", designSystem.designTokens.fontColorForClearInputIconWhenHovered, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBUSW5uZXJQcm9wcyA9IHtcbiAgcmVmOiBMZWdhY3lSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbnR5cGUgVENsZWFySW5kaWNhdG9yID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yKSA9PiB7XG4gIGNvbnN0IGludGwgPSB1c2VJbnRsKCk7XG4gIGNvbnN0IHtcbiAgICBnZXRTdHlsZXMsXG4gICAgaW5uZXJQcm9wczogeyByZWYsIG9uTW91c2VEb3duLCAuLi5yZXN0SW5uZXJQcm9wcyB9LFxuICB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgey4uLnJlc3RJbm5lclByb3BzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb259O1xuICAgICAgICA6aG92ZXIgc3ZnICoge1xuICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvckNsZWFySW5wdXRJY29uV2hlbkhvdmVyZWR9O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgICAgc3R5bGU9e2dldFN0eWxlcygnY2xlYXJJbmRpY2F0b3InLCBwcm9wcykgYXMgQ1NTUHJvcGVydGllc31cbiAgICAgIHRpdGxlPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgICBhcmlhLWxhYmVsPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgICAvLyBvdmVycmlkaW5nIHRoZSBkZWZhdWx0IGBhcmlhLWhpZGRlbmAgcHJvcCB2YWx1ZSB0byBtYWtlIHRoZSBjb21wb25lbnQgYWNjZXNzaWJsZSBieSBrZXlib2FyZCAtIGh0dHBzOi8vZ2l0aHViLmNvbS9KZWRXYXRzb24vcmVhY3Qtc2VsZWN0L2lzc3Vlcy80NzkzXG4gICAgICBhcmlhLWhpZGRlbj17ZmFsc2V9XG4gICAgICAvLyBvbmx5IG9uTW91c2VEb3duIGFuZCBvblRvdWNoRW5kIGV2ZW50IGhhbmRsZXJzIGFyZSBwYXNzZWQgYnkgYHJlYWN0LXNlbGVjdGAgdG8gdGhlIGNvbXBvbmVudCBieSBkZWZhdWx0LCB3aGljaCBtYWtlcyBpdCBub3QgYWNjZXNzaWJsZSBieSBrZXlib2FyZFxuICAgICAgb25DbGljaz17b25Nb3VzZURvd259XG4gICAgPlxuICAgICAgPENsb3NlSWNvbiBzaXplPVwibWVkaXVtXCIgLz5cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn07XG5cbkNsZWFySW5kaWNhdG9yLmRpc3BsYXlOYW1lID0gJ0NsZWFySW5kaWNhdG9yJztcblxuZXhwb3J0IGRlZmF1bHQgQ2xlYXJJbmRpY2F0b3I7XG4iXX0= */"),
|
|
70
70
|
style: getStyles('clearIndicator', props),
|
|
71
71
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
72
72
|
"aria-label": intl.formatMessage(messages$1.clearButtonLabel) // overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
|
|
@@ -75,7 +75,6 @@ var ClearIndicator = function ClearIndicator(props) {
|
|
|
75
75
|
,
|
|
76
76
|
onClick: onMouseDown,
|
|
77
77
|
children: jsxRuntime.jsx(icons.CloseIcon, {
|
|
78
|
-
color: "solid",
|
|
79
78
|
size: "medium"
|
|
80
79
|
})
|
|
81
80
|
}));
|
|
@@ -164,7 +163,7 @@ var WrapperWithIcon = function WrapperWithIcon(props) {
|
|
|
164
163
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
165
164
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
166
165
|
// spacingsXs is the margin between the icon and value
|
|
167
|
-
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.
|
|
166
|
+
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.marginLeftForSelectInputIcon, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRWdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCwgdHlwZSBSZWFjdEVsZW1lbnQgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7XG4gIGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMsXG4gIHR5cGUgU2luZ2xlVmFsdWVQcm9wcyxcbiAgdHlwZSBQbGFjZWhvbGRlclByb3BzLFxufSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuXG5leHBvcnQgdHlwZSBUU2luZ2xlVmFsdWVXcmFwcGVyV2l0aEljb25Qcm9wcyA9IHtcbiAgdHlwZTogJ3NpbmdsZVZhbHVlJztcbiAgc2VsZWN0UHJvcHM/OiBUU2VsZWN0UHJvcHM7XG59ICYgU2luZ2xlVmFsdWVQcm9wcztcbmV4cG9ydCB0eXBlIFRQbGFjZWhvbGRlcldyYXBwZXJXaXRoSWNvblByb3BzID0ge1xuICB0eXBlOiAncGxhY2Vob2xkZXInO1xuICBzZWxlY3RQcm9wcz86IFRTZWxlY3RQcm9wcztcbn0gJiBQbGFjZWhvbGRlclByb3BzO1xuZXhwb3J0IHR5cGUgVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4gPVxuICBUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJ1xuICAgID8gVFNpbmdsZVZhbHVlV3JhcHBlcldpdGhJY29uUHJvcHNcbiAgICA6IFR5cGUgZXh0ZW5kcyAncGxhY2Vob2xkZXInXG4gICAgPyBUUGxhY2Vob2xkZXJXcmFwcGVyV2l0aEljb25Qcm9wc1xuICAgIDogbmV2ZXI7XG5leHBvcnQgdHlwZSBURGVmYXVsdENvbXBvbmVudDxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+ID0gKFxuICBwcm9wczogVHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZSdcbiAgICA/IFNpbmdsZVZhbHVlUHJvcHNcbiAgICA6IFR5cGUgZXh0ZW5kcyAncGxhY2Vob2xkZXInXG4gICAgPyBQbGFjZWhvbGRlclByb3BzXG4gICAgOiBuZXZlclxuKSA9PiBKU1guRWxlbWVudDtcblxuY29uc3QgZ2V0RGVmYXVsdENvbXBvbmVudCA9IDxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+KFxuICB0eXBlOiBUV3JhcHBlcldpdGhJY29uUHJvcHM8VHlwZT5bJ3R5cGUnXVxuKTogVERlZmF1bHRDb21wb25lbnQ8VHlwZT4gfCBudWxsID0+IHtcbiAgaWYgKHR5cGUgPT09ICdzaW5nbGVWYWx1ZScpXG4gICAgcmV0dXJuIGRlZmF1bHRDb21wb25lbnRzLlNpbmdsZVZhbHVlIGFzIFREZWZhdWx0Q29tcG9uZW50PFR5cGU+O1xuICBpZiAodHlwZSA9PT0gJ3BsYWNlaG9sZGVyJylcbiAgICByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuUGxhY2Vob2xkZXIgYXMgVERlZmF1bHRDb21wb25lbnQ8VHlwZT47XG4gIHJldHVybiBudWxsO1xufTtcblxudHlwZSBUU2VsZWN0UHJvcHMgPSB7XG4gIGljb25MZWZ0PzogUmVhY3RFbGVtZW50O1xufTtcblxuY29uc3QgV3JhcHBlcldpdGhJY29uID0gPFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4oXG4gIHByb3BzOiBUV3JhcHBlcldpdGhJY29uUHJvcHM8VHlwZT5cbikgPT4ge1xuICBjb25zdCBEZWZhdWx0Q29tcG9uZW50ID0gZ2V0RGVmYXVsdENvbXBvbmVudDxUeXBlPihwcm9wcy50eXBlKTtcblxuICBpZiAoIURlZmF1bHRDb21wb25lbnQpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtwcm9wcy5zZWxlY3RQcm9wcy5pY29uTGVmdCAmJlxuICAgICAgICBjbG9uZUVsZW1lbnQocHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQsIHtcbiAgICAgICAgICBzaXplOiAnYmlnJyxcbiAgICAgICAgfSl9XG4gICAgICA8c3BhblxuICAgICAgICAvLyByZWFjdC1zZWxlY3QgdXNlcyBhYnNvbHV0ZSBwb3NpdGlvbmluZyBmb3IgdGhlIFNpbmdsZVZhbHVlL1BsYWNlaG9sZGVyXG4gICAgICAgIC8vIHRoZSBpY29uIGhhcyBhIGZpeGVkIHNpemUgb2YgMjRweCAoPT0gU3BhY2luZ3NYbCksIHRoZXJlZm9yZSB3ZSBjYW4gdXNlIGEgZml4ZWQgbWFyZ2luXG4gICAgICAgIC8vIHNwYWNpbmdzWHMgaXMgdGhlIG1hcmdpbiBiZXR3ZWVuIHRoZSBpY29uIGFuZCB2YWx1ZVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBtYXJnaW4tbGVmdDogJHtkZXNpZ25Ub2tlbnMubWFyZ2luTGVmdEZvclNlbGVjdElucHV0SWNvbn07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIHsvKiBAdHMtaWdub3JlICovfVxuICAgICAgICA8RGVmYXVsdENvbXBvbmVudCB7Li4ucHJvcHN9IC8+XG4gICAgICA8L3NwYW4+XG4gICAgPC8+XG4gICk7XG59O1xuXG5XcmFwcGVyV2l0aEljb24uZGlzcGxheU5hbWUgPSAnV3JhcHBlcldpdGhJY29uJztcblxuZXhwb3J0IGRlZmF1bHQgV3JhcHBlcldpdGhJY29uO1xuXG5jb25zdCBjdXN0b21Db21wb25lbnRzID0ge1xuICBTaW5nbGVWYWx1ZTogKHByb3BzOiBUV3JhcHBlcldpdGhJY29uUHJvcHM8J3NpbmdsZVZhbHVlJz4pID0+IChcbiAgICA8V3JhcHBlcldpdGhJY29uPCdzaW5nbGVWYWx1ZSc+IHsuLi5wcm9wc30gdHlwZT1cInNpbmdsZVZhbHVlXCIgLz5cbiAgKSxcbiAgUGxhY2Vob2xkZXI6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdwbGFjZWhvbGRlcic+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwncGxhY2Vob2xkZXInPiB7Li4ucHJvcHN9IHR5cGU9XCJwbGFjZWhvbGRlclwiIC8+XG4gICksXG59O1xuXG5leHBvcnQgeyBjdXN0b21Db21wb25lbnRzIH07XG4iXX0= */"),
|
|
168
167
|
children: jsxRuntime.jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
169
168
|
})]
|
|
170
169
|
});
|
|
@@ -285,7 +284,7 @@ var messages = reactIntl.defineMessages({
|
|
|
285
284
|
|
|
286
285
|
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; }
|
|
287
286
|
|
|
288
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
287
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
289
288
|
|
|
290
289
|
var controlStyles = function controlStyles(props) {
|
|
291
290
|
return function (base, state) {
|
|
@@ -293,29 +292,39 @@ var controlStyles = function controlStyles(props) {
|
|
|
293
292
|
|
|
294
293
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
295
294
|
fontSize: designSystem.designTokens.fontSizeForInput,
|
|
296
|
-
backgroundColor:
|
|
295
|
+
backgroundColor: function () {
|
|
296
|
+
if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
|
|
297
|
+
if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
|
|
298
|
+
return designSystem.designTokens.backgroundColorForInput;
|
|
299
|
+
}(),
|
|
297
300
|
borderColor: function () {
|
|
298
301
|
if (props.isDisabled) return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
299
302
|
if (state.isFocused) return designSystem.designTokens.borderColorForInputWhenFocused;
|
|
300
303
|
if (props.hasError) return designSystem.designTokens.borderColorForInputWhenError;
|
|
301
304
|
if (props.hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
|
|
302
|
-
if (props.isReadOnly) return designSystem.designTokens.
|
|
305
|
+
if (props.isReadOnly) return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
|
|
303
306
|
return designSystem.designTokens.borderColorForInput;
|
|
304
307
|
}(),
|
|
308
|
+
borderWidth: function () {
|
|
309
|
+
if (props.hasWarning || props.hasError) return designSystem.designTokens.borderWidthForSelectInput;
|
|
310
|
+
return designSystem.designTokens.borderWidth1;
|
|
311
|
+
}(),
|
|
305
312
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
306
|
-
minHeight: designSystem.designTokens.
|
|
313
|
+
minHeight: designSystem.designTokens.heightForInput,
|
|
307
314
|
cursor: function () {
|
|
308
315
|
if (props.isDisabled) return 'not-allowed';
|
|
309
316
|
if (props.isReadOnly) return 'default';
|
|
310
317
|
return 'pointer';
|
|
311
318
|
}(),
|
|
312
|
-
padding: "0 ".concat(designSystem.designTokens.
|
|
319
|
+
padding: "0 ".concat(designSystem.designTokens.paddingForInput),
|
|
313
320
|
transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
|
|
314
321
|
outline: 0,
|
|
315
322
|
boxShadow: 'none',
|
|
316
323
|
'&:focus-within': {
|
|
317
324
|
boxShadow: function () {
|
|
318
|
-
|
|
325
|
+
var _context2;
|
|
326
|
+
|
|
327
|
+
if (!props.isDisabled) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
|
|
319
328
|
return null;
|
|
320
329
|
}(),
|
|
321
330
|
borderColor: function () {
|
|
@@ -325,7 +334,11 @@ var controlStyles = function controlStyles(props) {
|
|
|
325
334
|
},
|
|
326
335
|
'&:hover': {
|
|
327
336
|
borderColor: function () {
|
|
328
|
-
if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.
|
|
337
|
+
if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenHovered;
|
|
338
|
+
return null;
|
|
339
|
+
}(),
|
|
340
|
+
backgroundColor: function () {
|
|
341
|
+
if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenHovered;
|
|
329
342
|
return null;
|
|
330
343
|
}()
|
|
331
344
|
},
|
|
@@ -338,16 +351,16 @@ var controlStyles = function controlStyles(props) {
|
|
|
338
351
|
var menuStyles = function menuStyles(props) {
|
|
339
352
|
return function (base) {
|
|
340
353
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
341
|
-
border: "1px ".concat(designSystem.designTokens.
|
|
354
|
+
border: "1px solid ".concat(designSystem.designTokens.borderColorForSelectInputMenu),
|
|
342
355
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
343
356
|
backgroundColor: designSystem.designTokens.backgroundColorForInput,
|
|
344
|
-
boxShadow: designSystem.designTokens.
|
|
357
|
+
boxShadow: designSystem.designTokens.shadowForSelectInputMenu,
|
|
345
358
|
fontSize: designSystem.designTokens.fontSizeForInput,
|
|
346
359
|
fontFamily: 'inherit',
|
|
347
360
|
margin: "".concat(designSystem.designTokens.spacing10, " 0 0 0"),
|
|
348
361
|
borderColor: function () {
|
|
349
|
-
if (props.hasError) return designSystem.designTokens.
|
|
350
|
-
if (props.hasWarning) return designSystem.designTokens.
|
|
362
|
+
if (props.hasError) return designSystem.designTokens.borderColorForSelectInputMenuWhenError;
|
|
363
|
+
if (props.hasWarning) return designSystem.designTokens.borderColorForSelectInputMenuWhenWarning;
|
|
351
364
|
return base.borderColorForInput;
|
|
352
365
|
}()
|
|
353
366
|
});
|
|
@@ -371,8 +384,13 @@ var dropdownIndicatorStyles = function dropdownIndicatorStyles(props) {
|
|
|
371
384
|
color: designSystem.designTokens.fontColorForInput,
|
|
372
385
|
margin: '0',
|
|
373
386
|
padding: '0',
|
|
374
|
-
marginLeft: designSystem.designTokens.
|
|
375
|
-
fill:
|
|
387
|
+
marginLeft: designSystem.designTokens.marginForSelectInputIcon,
|
|
388
|
+
fill: function () {
|
|
389
|
+
if (props.isDisabled || props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
390
|
+
if (props.hasError) return designSystem.designTokens.fontColorForSelectInputIconWhenError;
|
|
391
|
+
if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputIconWhenWarning;
|
|
392
|
+
return designSystem.designTokens.fontColorForSelectInputIcon;
|
|
393
|
+
}()
|
|
376
394
|
});
|
|
377
395
|
};
|
|
378
396
|
};
|
|
@@ -381,7 +399,8 @@ var clearIndicatorStyles = function clearIndicatorStyles() {
|
|
|
381
399
|
return function (base) {
|
|
382
400
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
383
401
|
display: 'flex',
|
|
384
|
-
padding: 0
|
|
402
|
+
padding: 0,
|
|
403
|
+
marginLeft: designSystem.designTokens.marginForSelectInputIcon
|
|
385
404
|
});
|
|
386
405
|
};
|
|
387
406
|
};
|
|
@@ -389,7 +408,7 @@ var clearIndicatorStyles = function clearIndicatorStyles() {
|
|
|
389
408
|
var menuListStyles = function menuListStyles() {
|
|
390
409
|
return function (base) {
|
|
391
410
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
392
|
-
padding:
|
|
411
|
+
padding: designSystem.designTokens.paddingForSelectInputMenu,
|
|
393
412
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
394
413
|
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
395
414
|
});
|
|
@@ -398,12 +417,14 @@ var menuListStyles = function menuListStyles() {
|
|
|
398
417
|
|
|
399
418
|
var optionStyles = function optionStyles() {
|
|
400
419
|
return function (base, state) {
|
|
401
|
-
var
|
|
420
|
+
var _context3, _context4;
|
|
402
421
|
|
|
403
422
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
404
|
-
transition: _concatInstanceProperty__default["default"](
|
|
405
|
-
paddingLeft: designSystem.designTokens.
|
|
406
|
-
paddingRight: designSystem.designTokens.
|
|
423
|
+
transition: _concatInstanceProperty__default["default"](_context3 = _concatInstanceProperty__default["default"](_context4 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context4, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context3, designSystem.designTokens.transitionStandard),
|
|
424
|
+
paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
|
|
425
|
+
paddingRight: designSystem.designTokens.paddingRightForSelectInputOptions,
|
|
426
|
+
paddingTop: designSystem.designTokens.paddingTopForSelectInputOptions,
|
|
427
|
+
paddingBottom: designSystem.designTokens.paddingBottomForSelectInputOptions,
|
|
407
428
|
color: function () {
|
|
408
429
|
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
409
430
|
if (state.isSelected) return designSystem.designTokens.fontColorForInput;
|
|
@@ -419,7 +440,7 @@ var optionStyles = function optionStyles() {
|
|
|
419
440
|
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
420
441
|
return base.color;
|
|
421
442
|
}(),
|
|
422
|
-
backgroundColor: designSystem.designTokens.
|
|
443
|
+
backgroundColor: designSystem.designTokens.backgroundColorForInputWhenActive
|
|
423
444
|
}
|
|
424
445
|
});
|
|
425
446
|
};
|
|
@@ -428,7 +449,9 @@ var optionStyles = function optionStyles() {
|
|
|
428
449
|
var placeholderStyles = function placeholderStyles(props) {
|
|
429
450
|
return function (base) {
|
|
430
451
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
431
|
-
color:
|
|
452
|
+
color: function () {
|
|
453
|
+
return designSystem.designTokens.placeholderFontColorForInput;
|
|
454
|
+
}(),
|
|
432
455
|
width: '100%',
|
|
433
456
|
overflow: 'hidden',
|
|
434
457
|
whiteSpace: 'nowrap',
|
|
@@ -448,7 +471,7 @@ var valueContainerStyles = function valueContainerStyles(props) {
|
|
|
448
471
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
449
472
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
450
473
|
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue ? 'flex' : 'grid',
|
|
451
|
-
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled :
|
|
474
|
+
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
|
|
452
475
|
});
|
|
453
476
|
};
|
|
454
477
|
};
|
|
@@ -465,6 +488,8 @@ var singleValueStyles = function singleValueStyles(props) {
|
|
|
465
488
|
return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
466
489
|
}
|
|
467
490
|
|
|
491
|
+
if (props.hasError) return designSystem.designTokens.fontColorForSelectInputWhenError;
|
|
492
|
+
if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputWhenWarning;
|
|
468
493
|
return designSystem.designTokens.fontColorForInput;
|
|
469
494
|
}()
|
|
470
495
|
});
|
|
@@ -476,7 +501,7 @@ var groupStyles = function groupStyles(props) {
|
|
|
476
501
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
477
502
|
padding: 0,
|
|
478
503
|
'&:not(:first-of-type)': {
|
|
479
|
-
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.
|
|
504
|
+
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.borderColorForGroupHeadingSelectInputOptions) : base.borderTop
|
|
480
505
|
}
|
|
481
506
|
});
|
|
482
507
|
};
|
|
@@ -484,15 +509,14 @@ var groupStyles = function groupStyles(props) {
|
|
|
484
509
|
|
|
485
510
|
var groupHeadingStyles = function groupHeadingStyles() {
|
|
486
511
|
return function (base) {
|
|
487
|
-
var
|
|
512
|
+
var _context5;
|
|
488
513
|
|
|
489
514
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
490
515
|
color: designSystem.designTokens.fontColorForInputWhenReadonly,
|
|
491
516
|
fontSize: designSystem.designTokens.fontSizeSmall,
|
|
492
517
|
textTransform: 'none',
|
|
493
518
|
fontWeight: 'bold',
|
|
494
|
-
|
|
495
|
-
padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing10),
|
|
519
|
+
padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context5, designSystem.designTokens.paddingForGroupHeadingSelectInputOptions),
|
|
496
520
|
'&:empty': {
|
|
497
521
|
padding: 0
|
|
498
522
|
}
|
|
@@ -530,19 +554,20 @@ var menuPortalStyles = function menuPortalStyles(props) {
|
|
|
530
554
|
};
|
|
531
555
|
};
|
|
532
556
|
|
|
533
|
-
var multiValueStyles = function multiValueStyles() {
|
|
557
|
+
var multiValueStyles = function multiValueStyles(props) {
|
|
534
558
|
return function (base) {
|
|
535
559
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
536
560
|
height: designSystem.designTokens.sizeHeightTag,
|
|
537
561
|
backgroundColor: designSystem.designTokens.backgroundColorForTag,
|
|
538
|
-
padding: '0'
|
|
562
|
+
padding: '0',
|
|
563
|
+
border: props.isNewTheme ? "1px solid ".concat(designSystem.designTokens.colorNeutral85) : 'none'
|
|
539
564
|
});
|
|
540
565
|
};
|
|
541
566
|
};
|
|
542
567
|
|
|
543
568
|
var multiValueLabelStyles = function multiValueLabelStyles(props) {
|
|
544
569
|
return function (base) {
|
|
545
|
-
var
|
|
570
|
+
var _context6, _context7;
|
|
546
571
|
|
|
547
572
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
548
573
|
fontSize: designSystem.designTokens.fontSizeSmall,
|
|
@@ -551,13 +576,13 @@ var multiValueLabelStyles = function multiValueLabelStyles(props) {
|
|
|
551
576
|
if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
552
577
|
return base.color;
|
|
553
578
|
}(),
|
|
554
|
-
padding: _concatInstanceProperty__default["default"](
|
|
555
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
556
|
-
border: "1px ".concat(designSystem.designTokens.borderColorForTag, " solid"),
|
|
579
|
+
padding: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.spacing10, " ")).call(_context6, designSystem.designTokens.spacing20),
|
|
580
|
+
borderRadius: _concatInstanceProperty__default["default"](_context7 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designSystem.designTokens.borderRadiusForTag),
|
|
581
|
+
border: props.isNewTheme ? 'none' : "1px ".concat(designSystem.designTokens.borderColorForTag, " solid"),
|
|
557
582
|
borderWidth: '1px 0 1px 1px',
|
|
558
583
|
'&:last-child': {
|
|
559
584
|
borderRadius: designSystem.designTokens.borderRadiusForTag,
|
|
560
|
-
borderWidth:
|
|
585
|
+
borderWidth: designSystem.designTokens.borderWidth1
|
|
561
586
|
}
|
|
562
587
|
});
|
|
563
588
|
};
|
|
@@ -565,14 +590,14 @@ var multiValueLabelStyles = function multiValueLabelStyles(props) {
|
|
|
565
590
|
|
|
566
591
|
var multiValueRemoveStyles = function multiValueRemoveStyles(props) {
|
|
567
592
|
return function (base, state) {
|
|
568
|
-
var
|
|
593
|
+
var _context8;
|
|
569
594
|
|
|
570
595
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
571
596
|
borderColor: designSystem.designTokens.borderColorForTag,
|
|
572
597
|
padding: "0 ".concat(designSystem.designTokens.spacing10),
|
|
573
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
574
|
-
borderStyle: 'solid',
|
|
575
|
-
borderWidth: '
|
|
598
|
+
borderRadius: _concatInstanceProperty__default["default"](_context8 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context8, designSystem.designTokens.borderRadiusForTag, " 0"),
|
|
599
|
+
borderStyle: !props.isNewTheme ? 'solid' : 'none',
|
|
600
|
+
borderWidth: !props.isNewTheme ? designSystem.designTokens.borderWidth1 : '0',
|
|
576
601
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
577
602
|
backgroundColor: designSystem.designTokens.backgroundColorForTag,
|
|
578
603
|
'svg *': {
|
|
@@ -582,7 +607,7 @@ var multiValueRemoveStyles = function multiValueRemoveStyles(props) {
|
|
|
582
607
|
borderColor: designSystem.designTokens.borderColorForTagWarning,
|
|
583
608
|
backgroundColor: designSystem.designTokens.backgroundColorForTag,
|
|
584
609
|
'svg *': {
|
|
585
|
-
fill: designSystem.designTokens.
|
|
610
|
+
fill: designSystem.designTokens.fontColorForClearInputIconWhenHovered
|
|
586
611
|
}
|
|
587
612
|
}
|
|
588
613
|
});
|
|
@@ -598,7 +623,7 @@ function createSelectStyles(props) {
|
|
|
598
623
|
clearIndicator: clearIndicatorStyles(),
|
|
599
624
|
menuList: menuListStyles(),
|
|
600
625
|
menuPortal: menuPortalStyles(props),
|
|
601
|
-
multiValue: multiValueStyles(),
|
|
626
|
+
multiValue: multiValueStyles(props),
|
|
602
627
|
multiValueLabel: multiValueLabelStyles(props),
|
|
603
628
|
multiValueRemove: multiValueRemoveStyles(props),
|
|
604
629
|
indicatorsContainer: indicatorsContainerStyles(),
|
|
@@ -613,7 +638,7 @@ function createSelectStyles(props) {
|
|
|
613
638
|
}
|
|
614
639
|
|
|
615
640
|
// NOTE: This string will be replaced on build time with the package version.
|
|
616
|
-
var version = "15.
|
|
641
|
+
var version = "15.11.0";
|
|
617
642
|
|
|
618
643
|
exports.ClearIndicator = ClearIndicator$1;
|
|
619
644
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|