@commercetools-uikit/select-utils 15.10.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.
|
@@ -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;
|
|
@@ -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, ";}" + ("" ), "" ),
|
|
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, ";" + ("" ), "" ),
|
|
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;
|
|
@@ -46,7 +46,7 @@ var ClearIndicator = function ClearIndicator(props) {
|
|
|
46
46
|
|
|
47
47
|
return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
48
48
|
ref: ref,
|
|
49
|
-
css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", designTokens.
|
|
49
|
+
css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.fontColorForClearInputIcon, ";:hover svg *{fill:", designTokens.fontColorForClearInputIconWhenHovered, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBUSW5uZXJQcm9wcyA9IHtcbiAgcmVmOiBMZWdhY3lSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbnR5cGUgVENsZWFySW5kaWNhdG9yID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yKSA9PiB7XG4gIGNvbnN0IGludGwgPSB1c2VJbnRsKCk7XG4gIGNvbnN0IHtcbiAgICBnZXRTdHlsZXMsXG4gICAgaW5uZXJQcm9wczogeyByZWYsIG9uTW91c2VEb3duLCAuLi5yZXN0SW5uZXJQcm9wcyB9LFxuICB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgey4uLnJlc3RJbm5lclByb3BzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb259O1xuICAgICAgICA6aG92ZXIgc3ZnICoge1xuICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvckNsZWFySW5wdXRJY29uV2hlbkhvdmVyZWR9O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgICAgc3R5bGU9e2dldFN0eWxlcygnY2xlYXJJbmRpY2F0b3InLCBwcm9wcykgYXMgQ1NTUHJvcGVydGllc31cbiAgICAgIHRpdGxlPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgICBhcmlhLWxhYmVsPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgICAvLyBvdmVycmlkaW5nIHRoZSBkZWZhdWx0IGBhcmlhLWhpZGRlbmAgcHJvcCB2YWx1ZSB0byBtYWtlIHRoZSBjb21wb25lbnQgYWNjZXNzaWJsZSBieSBrZXlib2FyZCAtIGh0dHBzOi8vZ2l0aHViLmNvbS9KZWRXYXRzb24vcmVhY3Qtc2VsZWN0L2lzc3Vlcy80NzkzXG4gICAgICBhcmlhLWhpZGRlbj17ZmFsc2V9XG4gICAgICAvLyBvbmx5IG9uTW91c2VEb3duIGFuZCBvblRvdWNoRW5kIGV2ZW50IGhhbmRsZXJzIGFyZSBwYXNzZWQgYnkgYHJlYWN0LXNlbGVjdGAgdG8gdGhlIGNvbXBvbmVudCBieSBkZWZhdWx0LCB3aGljaCBtYWtlcyBpdCBub3QgYWNjZXNzaWJsZSBieSBrZXlib2FyZFxuICAgICAgb25DbGljaz17b25Nb3VzZURvd259XG4gICAgPlxuICAgICAgPENsb3NlSWNvbiBzaXplPVwibWVkaXVtXCIgLz5cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn07XG5cbkNsZWFySW5kaWNhdG9yLmRpc3BsYXlOYW1lID0gJ0NsZWFySW5kaWNhdG9yJztcblxuZXhwb3J0IGRlZmF1bHQgQ2xlYXJJbmRpY2F0b3I7XG4iXX0= */"),
|
|
50
50
|
style: getStyles('clearIndicator', props),
|
|
51
51
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
52
52
|
"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
|
|
@@ -55,7 +55,6 @@ var ClearIndicator = function ClearIndicator(props) {
|
|
|
55
55
|
,
|
|
56
56
|
onClick: onMouseDown,
|
|
57
57
|
children: jsx(CloseIcon, {
|
|
58
|
-
color: "solid",
|
|
59
58
|
size: "medium"
|
|
60
59
|
})
|
|
61
60
|
}));
|
|
@@ -144,7 +143,7 @@ var WrapperWithIcon = function WrapperWithIcon(props) {
|
|
|
144
143
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
145
144
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
146
145
|
// spacingsXs is the margin between the icon and value
|
|
147
|
-
css: /*#__PURE__*/css("margin-left:", designTokens.
|
|
146
|
+
css: /*#__PURE__*/css("margin-left:", 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= */"),
|
|
148
147
|
children: jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
149
148
|
})]
|
|
150
149
|
});
|
|
@@ -265,7 +264,7 @@ var messages = defineMessages({
|
|
|
265
264
|
|
|
266
265
|
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; }
|
|
267
266
|
|
|
268
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var
|
|
267
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context9, _context10; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(source), !0)).call(_context9, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context10 = ownKeys(Object(source))).call(_context10, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
269
268
|
|
|
270
269
|
var controlStyles = function controlStyles(props) {
|
|
271
270
|
return function (base, state) {
|
|
@@ -273,29 +272,39 @@ var controlStyles = function controlStyles(props) {
|
|
|
273
272
|
|
|
274
273
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
275
274
|
fontSize: designTokens.fontSizeForInput,
|
|
276
|
-
backgroundColor:
|
|
275
|
+
backgroundColor: function () {
|
|
276
|
+
if (props.isDisabled) return designTokens.backgroundColorForInputWhenDisabled;
|
|
277
|
+
if (props.isReadOnly) return designTokens.backgroundColorForInputWhenReadonly;
|
|
278
|
+
return designTokens.backgroundColorForInput;
|
|
279
|
+
}(),
|
|
277
280
|
borderColor: function () {
|
|
278
281
|
if (props.isDisabled) return designTokens.borderColorForInputWhenDisabled;
|
|
279
282
|
if (state.isFocused) return designTokens.borderColorForInputWhenFocused;
|
|
280
283
|
if (props.hasError) return designTokens.borderColorForInputWhenError;
|
|
281
284
|
if (props.hasWarning) return designTokens.borderColorForInputWhenWarning;
|
|
282
|
-
if (props.isReadOnly) return designTokens.
|
|
285
|
+
if (props.isReadOnly) return designTokens.borderColorForSelectInputWhenReadonly;
|
|
283
286
|
return designTokens.borderColorForInput;
|
|
284
287
|
}(),
|
|
288
|
+
borderWidth: function () {
|
|
289
|
+
if (props.hasWarning || props.hasError) return designTokens.borderWidthForSelectInput;
|
|
290
|
+
return designTokens.borderWidth1;
|
|
291
|
+
}(),
|
|
285
292
|
borderRadius: designTokens.borderRadiusForInput,
|
|
286
|
-
minHeight: designTokens.
|
|
293
|
+
minHeight: designTokens.heightForInput,
|
|
287
294
|
cursor: function () {
|
|
288
295
|
if (props.isDisabled) return 'not-allowed';
|
|
289
296
|
if (props.isReadOnly) return 'default';
|
|
290
297
|
return 'pointer';
|
|
291
298
|
}(),
|
|
292
|
-
padding: "0 ".concat(designTokens.
|
|
299
|
+
padding: "0 ".concat(designTokens.paddingForInput),
|
|
293
300
|
transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designTokens.transitionStandard),
|
|
294
301
|
outline: 0,
|
|
295
302
|
boxShadow: 'none',
|
|
296
303
|
'&:focus-within': {
|
|
297
304
|
boxShadow: function () {
|
|
298
|
-
|
|
305
|
+
var _context2;
|
|
306
|
+
|
|
307
|
+
if (!props.isDisabled) return _concatInstanceProperty(_context2 = "".concat(designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designTokens.borderColorForInputWhenFocused);
|
|
299
308
|
return null;
|
|
300
309
|
}(),
|
|
301
310
|
borderColor: function () {
|
|
@@ -305,7 +314,11 @@ var controlStyles = function controlStyles(props) {
|
|
|
305
314
|
},
|
|
306
315
|
'&:hover': {
|
|
307
316
|
borderColor: function () {
|
|
308
|
-
if (!props.isDisabled && !props.isReadOnly) return designTokens.
|
|
317
|
+
if (!props.isDisabled && !props.isReadOnly) return designTokens.borderColorForInputWhenHovered;
|
|
318
|
+
return null;
|
|
319
|
+
}(),
|
|
320
|
+
backgroundColor: function () {
|
|
321
|
+
if (!props.isDisabled && !props.isReadOnly) return designTokens.backgroundColorForInputWhenHovered;
|
|
309
322
|
return null;
|
|
310
323
|
}()
|
|
311
324
|
},
|
|
@@ -318,16 +331,16 @@ var controlStyles = function controlStyles(props) {
|
|
|
318
331
|
var menuStyles = function menuStyles(props) {
|
|
319
332
|
return function (base) {
|
|
320
333
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
321
|
-
border: "1px ".concat(designTokens.
|
|
334
|
+
border: "1px solid ".concat(designTokens.borderColorForSelectInputMenu),
|
|
322
335
|
borderRadius: designTokens.borderRadiusForInput,
|
|
323
336
|
backgroundColor: designTokens.backgroundColorForInput,
|
|
324
|
-
boxShadow: designTokens.
|
|
337
|
+
boxShadow: designTokens.shadowForSelectInputMenu,
|
|
325
338
|
fontSize: designTokens.fontSizeForInput,
|
|
326
339
|
fontFamily: 'inherit',
|
|
327
340
|
margin: "".concat(designTokens.spacing10, " 0 0 0"),
|
|
328
341
|
borderColor: function () {
|
|
329
|
-
if (props.hasError) return designTokens.
|
|
330
|
-
if (props.hasWarning) return designTokens.
|
|
342
|
+
if (props.hasError) return designTokens.borderColorForSelectInputMenuWhenError;
|
|
343
|
+
if (props.hasWarning) return designTokens.borderColorForSelectInputMenuWhenWarning;
|
|
331
344
|
return base.borderColorForInput;
|
|
332
345
|
}()
|
|
333
346
|
});
|
|
@@ -351,8 +364,13 @@ var dropdownIndicatorStyles = function dropdownIndicatorStyles(props) {
|
|
|
351
364
|
color: designTokens.fontColorForInput,
|
|
352
365
|
margin: '0',
|
|
353
366
|
padding: '0',
|
|
354
|
-
marginLeft: designTokens.
|
|
355
|
-
fill:
|
|
367
|
+
marginLeft: designTokens.marginForSelectInputIcon,
|
|
368
|
+
fill: function () {
|
|
369
|
+
if (props.isDisabled || props.isReadOnly) return designTokens.fontColorForInputWhenDisabled;
|
|
370
|
+
if (props.hasError) return designTokens.fontColorForSelectInputIconWhenError;
|
|
371
|
+
if (props.hasWarning) return designTokens.fontColorForSelectInputIconWhenWarning;
|
|
372
|
+
return designTokens.fontColorForSelectInputIcon;
|
|
373
|
+
}()
|
|
356
374
|
});
|
|
357
375
|
};
|
|
358
376
|
};
|
|
@@ -361,7 +379,8 @@ var clearIndicatorStyles = function clearIndicatorStyles() {
|
|
|
361
379
|
return function (base) {
|
|
362
380
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
363
381
|
display: 'flex',
|
|
364
|
-
padding: 0
|
|
382
|
+
padding: 0,
|
|
383
|
+
marginLeft: designTokens.marginForSelectInputIcon
|
|
365
384
|
});
|
|
366
385
|
};
|
|
367
386
|
};
|
|
@@ -369,7 +388,7 @@ var clearIndicatorStyles = function clearIndicatorStyles() {
|
|
|
369
388
|
var menuListStyles = function menuListStyles() {
|
|
370
389
|
return function (base) {
|
|
371
390
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
372
|
-
padding:
|
|
391
|
+
padding: designTokens.paddingForSelectInputMenu,
|
|
373
392
|
borderRadius: designTokens.borderRadiusForInput,
|
|
374
393
|
backgroundColor: designTokens.backgroundColorForInput
|
|
375
394
|
});
|
|
@@ -378,12 +397,14 @@ var menuListStyles = function menuListStyles() {
|
|
|
378
397
|
|
|
379
398
|
var optionStyles = function optionStyles() {
|
|
380
399
|
return function (base, state) {
|
|
381
|
-
var
|
|
400
|
+
var _context3, _context4;
|
|
382
401
|
|
|
383
402
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
384
|
-
transition: _concatInstanceProperty(
|
|
385
|
-
paddingLeft: designTokens.
|
|
386
|
-
paddingRight: designTokens.
|
|
403
|
+
transition: _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context4, designTokens.transitionStandard, ",\n color ")).call(_context3, designTokens.transitionStandard),
|
|
404
|
+
paddingLeft: designTokens.paddingLeftForSelectInputOptions,
|
|
405
|
+
paddingRight: designTokens.paddingRightForSelectInputOptions,
|
|
406
|
+
paddingTop: designTokens.paddingTopForSelectInputOptions,
|
|
407
|
+
paddingBottom: designTokens.paddingBottomForSelectInputOptions,
|
|
387
408
|
color: function () {
|
|
388
409
|
if (!state.isDisabled) return designTokens.fontColorForInput;
|
|
389
410
|
if (state.isSelected) return designTokens.fontColorForInput;
|
|
@@ -399,7 +420,7 @@ var optionStyles = function optionStyles() {
|
|
|
399
420
|
if (!state.isDisabled) return designTokens.fontColorForInput;
|
|
400
421
|
return base.color;
|
|
401
422
|
}(),
|
|
402
|
-
backgroundColor: designTokens.
|
|
423
|
+
backgroundColor: designTokens.backgroundColorForInputWhenActive
|
|
403
424
|
}
|
|
404
425
|
});
|
|
405
426
|
};
|
|
@@ -408,7 +429,9 @@ var optionStyles = function optionStyles() {
|
|
|
408
429
|
var placeholderStyles = function placeholderStyles(props) {
|
|
409
430
|
return function (base) {
|
|
410
431
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
411
|
-
color:
|
|
432
|
+
color: function () {
|
|
433
|
+
return designTokens.placeholderFontColorForInput;
|
|
434
|
+
}(),
|
|
412
435
|
width: '100%',
|
|
413
436
|
overflow: 'hidden',
|
|
414
437
|
whiteSpace: 'nowrap',
|
|
@@ -428,7 +451,7 @@ var valueContainerStyles = function valueContainerStyles(props) {
|
|
|
428
451
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
429
452
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
430
453
|
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue ? 'flex' : 'grid',
|
|
431
|
-
fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled :
|
|
454
|
+
fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.fontColorForSelectInputIcon
|
|
432
455
|
});
|
|
433
456
|
};
|
|
434
457
|
};
|
|
@@ -445,6 +468,8 @@ var singleValueStyles = function singleValueStyles(props) {
|
|
|
445
468
|
return designTokens.fontColorForInputWhenReadonly;
|
|
446
469
|
}
|
|
447
470
|
|
|
471
|
+
if (props.hasError) return designTokens.fontColorForSelectInputWhenError;
|
|
472
|
+
if (props.hasWarning) return designTokens.fontColorForSelectInputWhenWarning;
|
|
448
473
|
return designTokens.fontColorForInput;
|
|
449
474
|
}()
|
|
450
475
|
});
|
|
@@ -456,7 +481,7 @@ var groupStyles = function groupStyles(props) {
|
|
|
456
481
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
457
482
|
padding: 0,
|
|
458
483
|
'&:not(:first-of-type)': {
|
|
459
|
-
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.
|
|
484
|
+
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designTokens.borderColorForGroupHeadingSelectInputOptions) : base.borderTop
|
|
460
485
|
}
|
|
461
486
|
});
|
|
462
487
|
};
|
|
@@ -464,15 +489,14 @@ var groupStyles = function groupStyles(props) {
|
|
|
464
489
|
|
|
465
490
|
var groupHeadingStyles = function groupHeadingStyles() {
|
|
466
491
|
return function (base) {
|
|
467
|
-
var
|
|
492
|
+
var _context5;
|
|
468
493
|
|
|
469
494
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
470
495
|
color: designTokens.fontColorForInputWhenReadonly,
|
|
471
496
|
fontSize: designTokens.fontSizeSmall,
|
|
472
497
|
textTransform: 'none',
|
|
473
498
|
fontWeight: 'bold',
|
|
474
|
-
|
|
475
|
-
padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.spacing10),
|
|
499
|
+
padding: _concatInstanceProperty(_context5 = "".concat(designTokens.spacing20, " ")).call(_context5, designTokens.paddingForGroupHeadingSelectInputOptions),
|
|
476
500
|
'&:empty': {
|
|
477
501
|
padding: 0
|
|
478
502
|
}
|
|
@@ -510,19 +534,20 @@ var menuPortalStyles = function menuPortalStyles(props) {
|
|
|
510
534
|
};
|
|
511
535
|
};
|
|
512
536
|
|
|
513
|
-
var multiValueStyles = function multiValueStyles() {
|
|
537
|
+
var multiValueStyles = function multiValueStyles(props) {
|
|
514
538
|
return function (base) {
|
|
515
539
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
516
540
|
height: designTokens.sizeHeightTag,
|
|
517
541
|
backgroundColor: designTokens.backgroundColorForTag,
|
|
518
|
-
padding: '0'
|
|
542
|
+
padding: '0',
|
|
543
|
+
border: props.isNewTheme ? "1px solid ".concat(designTokens.colorNeutral85) : 'none'
|
|
519
544
|
});
|
|
520
545
|
};
|
|
521
546
|
};
|
|
522
547
|
|
|
523
548
|
var multiValueLabelStyles = function multiValueLabelStyles(props) {
|
|
524
549
|
return function (base) {
|
|
525
|
-
var
|
|
550
|
+
var _context6, _context7;
|
|
526
551
|
|
|
527
552
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
528
553
|
fontSize: designTokens.fontSizeSmall,
|
|
@@ -531,13 +556,13 @@ var multiValueLabelStyles = function multiValueLabelStyles(props) {
|
|
|
531
556
|
if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
|
|
532
557
|
return base.color;
|
|
533
558
|
}(),
|
|
534
|
-
padding: _concatInstanceProperty(
|
|
535
|
-
borderRadius: _concatInstanceProperty(
|
|
536
|
-
border: "1px ".concat(designTokens.borderColorForTag, " solid"),
|
|
559
|
+
padding: _concatInstanceProperty(_context6 = "".concat(designTokens.spacing10, " ")).call(_context6, designTokens.spacing20),
|
|
560
|
+
borderRadius: _concatInstanceProperty(_context7 = "".concat(designTokens.borderRadiusForTag, " 0 0 ")).call(_context7, designTokens.borderRadiusForTag),
|
|
561
|
+
border: props.isNewTheme ? 'none' : "1px ".concat(designTokens.borderColorForTag, " solid"),
|
|
537
562
|
borderWidth: '1px 0 1px 1px',
|
|
538
563
|
'&:last-child': {
|
|
539
564
|
borderRadius: designTokens.borderRadiusForTag,
|
|
540
|
-
borderWidth:
|
|
565
|
+
borderWidth: designTokens.borderWidth1
|
|
541
566
|
}
|
|
542
567
|
});
|
|
543
568
|
};
|
|
@@ -545,14 +570,14 @@ var multiValueLabelStyles = function multiValueLabelStyles(props) {
|
|
|
545
570
|
|
|
546
571
|
var multiValueRemoveStyles = function multiValueRemoveStyles(props) {
|
|
547
572
|
return function (base, state) {
|
|
548
|
-
var
|
|
573
|
+
var _context8;
|
|
549
574
|
|
|
550
575
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
551
576
|
borderColor: designTokens.borderColorForTag,
|
|
552
577
|
padding: "0 ".concat(designTokens.spacing10),
|
|
553
|
-
borderRadius: _concatInstanceProperty(
|
|
554
|
-
borderStyle: 'solid',
|
|
555
|
-
borderWidth: '
|
|
578
|
+
borderRadius: _concatInstanceProperty(_context8 = "0 ".concat(designTokens.borderRadiusForTag, " ")).call(_context8, designTokens.borderRadiusForTag, " 0"),
|
|
579
|
+
borderStyle: !props.isNewTheme ? 'solid' : 'none',
|
|
580
|
+
borderWidth: !props.isNewTheme ? designTokens.borderWidth1 : '0',
|
|
556
581
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
557
582
|
backgroundColor: designTokens.backgroundColorForTag,
|
|
558
583
|
'svg *': {
|
|
@@ -562,7 +587,7 @@ var multiValueRemoveStyles = function multiValueRemoveStyles(props) {
|
|
|
562
587
|
borderColor: designTokens.borderColorForTagWarning,
|
|
563
588
|
backgroundColor: designTokens.backgroundColorForTag,
|
|
564
589
|
'svg *': {
|
|
565
|
-
fill: designTokens.
|
|
590
|
+
fill: designTokens.fontColorForClearInputIconWhenHovered
|
|
566
591
|
}
|
|
567
592
|
}
|
|
568
593
|
});
|
|
@@ -578,7 +603,7 @@ function createSelectStyles(props) {
|
|
|
578
603
|
clearIndicator: clearIndicatorStyles(),
|
|
579
604
|
menuList: menuListStyles(),
|
|
580
605
|
menuPortal: menuPortalStyles(props),
|
|
581
|
-
multiValue: multiValueStyles(),
|
|
606
|
+
multiValue: multiValueStyles(props),
|
|
582
607
|
multiValueLabel: multiValueLabelStyles(props),
|
|
583
608
|
multiValueRemove: multiValueRemoveStyles(props),
|
|
584
609
|
indicatorsContainer: indicatorsContainerStyles(),
|
|
@@ -593,6 +618,6 @@ function createSelectStyles(props) {
|
|
|
593
618
|
}
|
|
594
619
|
|
|
595
620
|
// NOTE: This string will be replaced on build time with the package version.
|
|
596
|
-
var version = "15.
|
|
621
|
+
var version = "15.11.0";
|
|
597
622
|
|
|
598
623
|
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 };
|
|
@@ -25,13 +25,16 @@ type TState = {
|
|
|
25
25
|
isDisabled?: boolean;
|
|
26
26
|
isSelected?: boolean;
|
|
27
27
|
};
|
|
28
|
-
export default function createSelectStyles(props: TProps
|
|
28
|
+
export default function createSelectStyles(props: TProps & {
|
|
29
|
+
isNewTheme: boolean;
|
|
30
|
+
}): {
|
|
29
31
|
control: (base: TBase, state: TState) => {
|
|
30
32
|
fontSize: "var(--font-size-for-input, 1rem)";
|
|
31
|
-
backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))";
|
|
32
|
-
borderColor: "var(--border-color-for-input, hsl(0, 0%, 60%))" | "var(--border-color-for-input-when-focused, #00b39e)" | "var(--border-color-for-input-when-disabled, #ccc)" | "var(--border-color-for-input-when-
|
|
33
|
+
backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))" | "var(--background-color-for-input-when-readonly, #fff)";
|
|
34
|
+
borderColor: "var(--border-color-for-input, hsl(0, 0%, 60%))" | "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, #ccc)";
|
|
35
|
+
borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 1px)";
|
|
33
36
|
borderRadius: "var(--border-radius-for-input, 6px)";
|
|
34
|
-
minHeight: "var(--
|
|
37
|
+
minHeight: "var(--height-for-input, 32px)";
|
|
35
38
|
cursor: string;
|
|
36
39
|
padding: string;
|
|
37
40
|
transition: string;
|
|
@@ -42,7 +45,8 @@ export default function createSelectStyles(props: TProps): {
|
|
|
42
45
|
borderColor: "var(--border-color-for-input-when-focused, #00b39e)" | null;
|
|
43
46
|
};
|
|
44
47
|
'&:hover': {
|
|
45
|
-
borderColor: "var(--border-color-for-input-when-
|
|
48
|
+
borderColor: "var(--border-color-for-input-when-hovered, #00b39e)" | null;
|
|
49
|
+
backgroundColor: "var(--background-color-for-input-when-hovered, #fff)" | null;
|
|
46
50
|
};
|
|
47
51
|
pointerEvents: string;
|
|
48
52
|
color: string | undefined;
|
|
@@ -54,7 +58,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
54
58
|
border: string;
|
|
55
59
|
borderRadius: "var(--border-radius-for-input, 6px)";
|
|
56
60
|
backgroundColor: "var(--background-color-for-input, #fff)";
|
|
57
|
-
boxShadow: "var(--shadow-
|
|
61
|
+
boxShadow: "var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))";
|
|
58
62
|
fontSize: "var(--font-size-for-input, 1rem)";
|
|
59
63
|
fontFamily: string;
|
|
60
64
|
margin: string;
|
|
@@ -83,8 +87,8 @@ export default function createSelectStyles(props: TProps): {
|
|
|
83
87
|
color: "var(--font-color-for-input, #1a1a1a)";
|
|
84
88
|
margin: string;
|
|
85
89
|
padding: string;
|
|
86
|
-
marginLeft: "var(--
|
|
87
|
-
fill:
|
|
90
|
+
marginLeft: "var(--margin-for-select-input-icon, 4px)";
|
|
91
|
+
fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)" | "var(--font-color-for-select-input-icon-when-error, #1a1a1a)" | "var(--font-color-for-select-input-icon-when-warning, #1a1a1a)";
|
|
88
92
|
fontColorForInput?: string | undefined;
|
|
89
93
|
borderColorForInput?: string | undefined;
|
|
90
94
|
backgroundColor?: string | undefined;
|
|
@@ -96,6 +100,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
96
100
|
clearIndicator: (base: TBase) => {
|
|
97
101
|
display: string;
|
|
98
102
|
padding: number;
|
|
103
|
+
marginLeft: "var(--margin-for-select-input-icon, 4px)";
|
|
99
104
|
fontColorForInput?: string | undefined;
|
|
100
105
|
borderColorForInput?: string | undefined;
|
|
101
106
|
color?: string | undefined;
|
|
@@ -106,7 +111,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
106
111
|
pointerEvents?: string | undefined;
|
|
107
112
|
};
|
|
108
113
|
menuList: (base: TBase) => {
|
|
109
|
-
padding:
|
|
114
|
+
padding: "var(--padding-for-select-input-menu, inherit)";
|
|
110
115
|
borderRadius: "var(--border-radius-for-input, 6px)";
|
|
111
116
|
backgroundColor: "var(--background-color-for-input, #fff)";
|
|
112
117
|
fontColorForInput?: string | undefined;
|
|
@@ -132,6 +137,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
132
137
|
height: "var(--size-height-tag, 26px)";
|
|
133
138
|
backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
|
|
134
139
|
padding: string;
|
|
140
|
+
border: string;
|
|
135
141
|
fontColorForInput?: string | undefined;
|
|
136
142
|
borderColorForInput?: string | undefined;
|
|
137
143
|
color?: string | undefined;
|
|
@@ -149,7 +155,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
149
155
|
borderWidth: string;
|
|
150
156
|
'&:last-child': {
|
|
151
157
|
borderRadius: "var(--border-radius-for-tag, 2px)";
|
|
152
|
-
borderWidth:
|
|
158
|
+
borderWidth: "var(--border-width-1, 1px)";
|
|
153
159
|
};
|
|
154
160
|
fontColorForInput?: string | undefined;
|
|
155
161
|
borderColorForInput?: string | undefined;
|
|
@@ -174,7 +180,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
174
180
|
borderColor: "var(--border-color-for-tag-warning, #f16d0e)";
|
|
175
181
|
backgroundColor: "var(--background-color-for-tag, hsl(0, 0%, 95%))";
|
|
176
182
|
'svg *': {
|
|
177
|
-
fill: "var(--
|
|
183
|
+
fill: "var(--font-color-for-clear-input-icon-when-hovered, #f16d0e)";
|
|
178
184
|
};
|
|
179
185
|
};
|
|
180
186
|
fontColorForInput?: string | undefined;
|
|
@@ -190,13 +196,15 @@ export default function createSelectStyles(props: TProps): {
|
|
|
190
196
|
};
|
|
191
197
|
option: (base: TBase, state: TState) => {
|
|
192
198
|
transition: string;
|
|
193
|
-
paddingLeft: "var(--
|
|
194
|
-
paddingRight: "var(--
|
|
199
|
+
paddingLeft: "var(--padding-left-for-select-input-options, 8px)";
|
|
200
|
+
paddingRight: "var(--padding-right-for-select-input-options, 8px)";
|
|
201
|
+
paddingTop: "var(--padding-top-for-select-input-options, 4px)";
|
|
202
|
+
paddingBottom: "var(--padding-bottom-for-select-input-options, 4px)";
|
|
195
203
|
color: string | undefined;
|
|
196
204
|
backgroundColor: string | undefined;
|
|
197
205
|
'&:active': {
|
|
198
206
|
color: string | undefined;
|
|
199
|
-
backgroundColor: "var(--background-color-for-input-when-
|
|
207
|
+
backgroundColor: "var(--background-color-for-input-when-active, hsl(195, 35.2941176471%, 95%))";
|
|
200
208
|
};
|
|
201
209
|
fontColorForInput?: string | undefined;
|
|
202
210
|
borderColorForInput?: string | undefined;
|
|
@@ -225,7 +233,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
225
233
|
backgroundColor: string;
|
|
226
234
|
overflow: string;
|
|
227
235
|
display: string;
|
|
228
|
-
fill:
|
|
236
|
+
fill: "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-icon, #1a1a1a)";
|
|
229
237
|
fontColorForInput?: string | undefined;
|
|
230
238
|
borderColorForInput?: string | undefined;
|
|
231
239
|
color?: string | undefined;
|
|
@@ -235,7 +243,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
235
243
|
pointerEvents?: string | undefined;
|
|
236
244
|
};
|
|
237
245
|
singleValue: (base: TBase) => {
|
|
238
|
-
color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))";
|
|
246
|
+
color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))" | "var(--font-color-for-select-input-when-error, #1a1a1a)" | "var(--font-color-for-select-input-when-warning, #1a1a1a)";
|
|
239
247
|
fontColorForInput?: string | undefined;
|
|
240
248
|
borderColorForInput?: string | undefined;
|
|
241
249
|
backgroundColor?: string | undefined;
|
|
@@ -263,7 +271,6 @@ export default function createSelectStyles(props: TProps): {
|
|
|
263
271
|
fontSize: "var(--font-size-small, 0.9231rem)";
|
|
264
272
|
textTransform: string;
|
|
265
273
|
fontWeight: string;
|
|
266
|
-
margin: string;
|
|
267
274
|
padding: string;
|
|
268
275
|
'&:empty': {
|
|
269
276
|
padding: number;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/select-utils",
|
|
3
3
|
"description": "Utilities for working with select components.",
|
|
4
|
-
"version": "15.
|
|
4
|
+
"version": "15.11.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.19.0",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.19.1",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "15.
|
|
25
|
-
"@commercetools-uikit/design-system": "15.
|
|
26
|
-
"@commercetools-uikit/icons": "15.
|
|
27
|
-
"@commercetools-uikit/spacings": "15.
|
|
28
|
-
"@commercetools-uikit/text": "15.
|
|
29
|
-
"@commercetools-uikit/utils": "15.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "15.11.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "15.11.0",
|
|
26
|
+
"@commercetools-uikit/icons": "15.11.0",
|
|
27
|
+
"@commercetools-uikit/spacings": "15.11.0",
|
|
28
|
+
"@commercetools-uikit/text": "15.11.0",
|
|
29
|
+
"@commercetools-uikit/utils": "15.11.0",
|
|
30
30
|
"@emotion/react": "^11.4.0",
|
|
31
31
|
"@emotion/styled": "^11.3.0",
|
|
32
32
|
"lodash": "4.17.21",
|