@commercetools-uikit/select-utils 15.2.4 → 15.3.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.
|
|
69
|
+
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", designSystem.designTokens.colorWarning, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcblxudHlwZSBUSW5uZXJQcm9wcyA9IHtcbiAgcmVmOiBMZWdhY3lSZWY8SFRNTEJ1dHRvbkVsZW1lbnQ+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbnR5cGUgVENsZWFySW5kaWNhdG9yID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yKSA9PiB7XG4gIGNvbnN0IGludGwgPSB1c2VJbnRsKCk7XG4gIGNvbnN0IHtcbiAgICBnZXRTdHlsZXMsXG4gICAgaW5uZXJQcm9wczogeyByZWYsIG9uTW91c2VEb3duLCAuLi5yZXN0SW5uZXJQcm9wcyB9LFxuICB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgey4uLnJlc3RJbm5lclByb3BzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvcldhcm5pbmd9O1xuICAgICAgICB9XG4gICAgICBgfVxuICAgICAgc3R5bGU9e2dldFN0eWxlcygnY2xlYXJJbmRpY2F0b3InLCBwcm9wcykgYXMgQ1NTUHJvcGVydGllc31cbiAgICAgIHRpdGxlPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgICBhcmlhLWxhYmVsPXtpbnRsLmZvcm1hdE1lc3NhZ2UobWVzc2FnZXMuY2xlYXJCdXR0b25MYWJlbCl9XG4gICAgICAvLyBvdmVycmlkaW5nIHRoZSBkZWZhdWx0IGBhcmlhLWhpZGRlbmAgcHJvcCB2YWx1ZSB0byBtYWtlIHRoZSBjb21wb25lbnQgYWNjZXNzaWJsZSBieSBrZXlib2FyZCAtIGh0dHBzOi8vZ2l0aHViLmNvbS9KZWRXYXRzb24vcmVhY3Qtc2VsZWN0L2lzc3Vlcy80NzkzXG4gICAgICBhcmlhLWhpZGRlbj17ZmFsc2V9XG4gICAgICAvLyBvbmx5IG9uTW91c2VEb3duIGFuZCBvblRvdWNoRW5kIGV2ZW50IGhhbmRsZXJzIGFyZSBwYXNzZWQgYnkgYHJlYWN0LXNlbGVjdGAgdG8gdGhlIGNvbXBvbmVudCBieSBkZWZhdWx0LCB3aGljaCBtYWtlcyBpdCBub3QgYWNjZXNzaWJsZSBieSBrZXlib2FyZFxuICAgICAgb25DbGljaz17b25Nb3VzZURvd259XG4gICAgPlxuICAgICAgPENsb3NlSWNvbiBjb2xvcj1cInNvbGlkXCIgc2l6ZT1cIm1lZGl1bVwiIC8+XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5DbGVhckluZGljYXRvci5kaXNwbGF5TmFtZSA9ICdDbGVhckluZGljYXRvcic7XG5cbmV4cG9ydCBkZWZhdWx0IENsZWFySW5kaWNhdG9yO1xuIl19 */"),
|
|
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
|
|
@@ -164,7 +164,7 @@ var WrapperWithIcon = function WrapperWithIcon(props) {
|
|
|
164
164
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
165
165
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
166
166
|
// spacingsXs is the margin between the icon and value
|
|
167
|
-
css: /*#__PURE__*/react.css("margin-left:", designSystem.
|
|
167
|
+
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.spacingXl + designSystem.designTokens.spacingXs, ";" + (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+O1xuICBpZiAodHlwZSA9PT0gJ3BsYWNlaG9sZGVyJylcbiAgICByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuUGxhY2Vob2xkZXIgYXMgVERlZmF1bHRDb21wb25lbnQ8VHlwZT47XG4gIHJldHVybiBudWxsO1xufTtcblxudHlwZSBUU2VsZWN0UHJvcHMgPSB7XG4gIGljb25MZWZ0PzogUmVhY3RFbGVtZW50O1xufTtcblxuY29uc3QgV3JhcHBlcldpdGhJY29uID0gPFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4oXG4gIHByb3BzOiBUV3JhcHBlcldpdGhJY29uUHJvcHM8VHlwZT5cbikgPT4ge1xuICBjb25zdCBEZWZhdWx0Q29tcG9uZW50ID0gZ2V0RGVmYXVsdENvbXBvbmVudDxUeXBlPihwcm9wcy50eXBlKTtcblxuICBpZiAoIURlZmF1bHRDb21wb25lbnQpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtwcm9wcy5zZWxlY3RQcm9wcy5pY29uTGVmdCAmJlxuICAgICAgICBjbG9uZUVsZW1lbnQocHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQsIHtcbiAgICAgICAgICBzaXplOiAnYmlnJyxcbiAgICAgICAgfSl9XG4gICAgICA8c3BhblxuICAgICAgICAvLyByZWFjdC1zZWxlY3QgdXNlcyBhYnNvbHV0ZSBwb3NpdGlvbmluZyBmb3IgdGhlIFNpbmdsZVZhbHVlL1BsYWNlaG9sZGVyXG4gICAgICAgIC8vIHRoZSBpY29uIGhhcyBhIGZpeGVkIHNpemUgb2YgMjRweCAoPT0gU3BhY2luZ3NYbCksIHRoZXJlZm9yZSB3ZSBjYW4gdXNlIGEgZml4ZWQgbWFyZ2luXG4gICAgICAgIC8vIHNwYWNpbmdzWHMgaXMgdGhlIG1hcmdpbiBiZXR3ZWVuIHRoZSBpY29uIGFuZCB2YWx1ZVxuICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICBtYXJnaW4tbGVmdDogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ1hsICsgZGVzaWduVG9rZW5zLnNwYWNpbmdYc307XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIHsvKiBAdHMtaWdub3JlICovfVxuICAgICAgICA8RGVmYXVsdENvbXBvbmVudCB7Li4ucHJvcHN9IC8+XG4gICAgICA8L3NwYW4+XG4gICAgPC8+XG4gICk7XG59O1xuXG5XcmFwcGVyV2l0aEljb24uZGlzcGxheU5hbWUgPSAnV3JhcHBlcldpdGhJY29uJztcblxuZXhwb3J0IGRlZmF1bHQgV3JhcHBlcldpdGhJY29uO1xuXG5jb25zdCBjdXN0b21Db21wb25lbnRzID0ge1xuICBTaW5nbGVWYWx1ZTogKHByb3BzOiBUV3JhcHBlcldpdGhJY29uUHJvcHM8J3NpbmdsZVZhbHVlJz4pID0+IChcbiAgICA8V3JhcHBlcldpdGhJY29uPCdzaW5nbGVWYWx1ZSc+IHsuLi5wcm9wc30gdHlwZT1cInNpbmdsZVZhbHVlXCIgLz5cbiAgKSxcbiAgUGxhY2Vob2xkZXI6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdwbGFjZWhvbGRlcic+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwncGxhY2Vob2xkZXInPiB7Li4ucHJvcHN9IHR5cGU9XCJwbGFjZWhvbGRlclwiIC8+XG4gICksXG59O1xuXG5leHBvcnQgeyBjdXN0b21Db21wb25lbnRzIH07XG4iXX0= */"),
|
|
168
168
|
children: jsxRuntime.jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
169
169
|
})]
|
|
170
170
|
});
|
|
@@ -287,100 +287,92 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["def
|
|
|
287
287
|
|
|
288
288
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
289
289
|
|
|
290
|
-
var controlStyles = function controlStyles(props
|
|
290
|
+
var controlStyles = function controlStyles(props) {
|
|
291
291
|
return function (base, state) {
|
|
292
292
|
var _context;
|
|
293
293
|
|
|
294
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
295
|
-
|
|
296
294
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
297
|
-
fontSize:
|
|
298
|
-
backgroundColor: props.isDisabled ?
|
|
295
|
+
fontSize: designSystem.designTokens.fontSizeForInput,
|
|
296
|
+
backgroundColor: props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput,
|
|
299
297
|
borderColor: function () {
|
|
300
|
-
if (props.isDisabled) return
|
|
301
|
-
if (state.isFocused) return
|
|
302
|
-
if (props.hasError) return
|
|
303
|
-
if (props.hasWarning) return
|
|
304
|
-
if (props.isReadOnly) return
|
|
305
|
-
return
|
|
298
|
+
if (props.isDisabled) return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
299
|
+
if (state.isFocused) return designSystem.designTokens.borderColorForInputWhenFocused;
|
|
300
|
+
if (props.hasError) return designSystem.designTokens.borderColorForInputWhenError;
|
|
301
|
+
if (props.hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
|
|
302
|
+
if (props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenReadonly;
|
|
303
|
+
return designSystem.designTokens.borderColorForInput;
|
|
306
304
|
}(),
|
|
307
|
-
borderRadius:
|
|
308
|
-
minHeight:
|
|
305
|
+
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
306
|
+
minHeight: designSystem.designTokens.sizeHeightInput,
|
|
309
307
|
cursor: function () {
|
|
310
308
|
if (props.isDisabled) return 'not-allowed';
|
|
311
309
|
if (props.isReadOnly) return 'default';
|
|
312
310
|
return 'pointer';
|
|
313
311
|
}(),
|
|
314
|
-
padding: "0 ".concat(
|
|
315
|
-
transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(
|
|
312
|
+
padding: "0 ".concat(designSystem.designTokens.spacingS),
|
|
313
|
+
transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
|
|
316
314
|
outline: 0,
|
|
317
315
|
boxShadow: 'none',
|
|
318
316
|
'&:focus-within': {
|
|
319
317
|
boxShadow: function () {
|
|
320
|
-
if (!props.isDisabled) return "inset 0 0 0 2px ".concat(
|
|
318
|
+
if (!props.isDisabled) return "inset 0 0 0 2px ".concat(designSystem.designTokens.borderColorForInputWhenFocused);
|
|
321
319
|
return null;
|
|
322
320
|
}(),
|
|
323
321
|
borderColor: function () {
|
|
324
|
-
if (!props.isDisabled) return
|
|
322
|
+
if (!props.isDisabled) return designSystem.designTokens.borderColorForInputWhenFocused;
|
|
325
323
|
return null;
|
|
326
324
|
}()
|
|
327
325
|
},
|
|
328
326
|
'&:hover': {
|
|
329
327
|
borderColor: function () {
|
|
330
|
-
if (!props.isDisabled && !props.isReadOnly) return
|
|
328
|
+
if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenFocused;
|
|
331
329
|
return null;
|
|
332
330
|
}()
|
|
333
331
|
},
|
|
334
332
|
pointerEvents: 'auto',
|
|
335
|
-
color: props.isDisabled || props.isReadOnly ?
|
|
333
|
+
color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
336
334
|
});
|
|
337
335
|
};
|
|
338
336
|
};
|
|
339
337
|
|
|
340
|
-
var menuStyles = function menuStyles(props
|
|
338
|
+
var menuStyles = function menuStyles(props) {
|
|
341
339
|
return function (base) {
|
|
342
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
343
|
-
|
|
344
340
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
345
|
-
border: "1px ".concat(
|
|
346
|
-
borderRadius:
|
|
347
|
-
backgroundColor:
|
|
348
|
-
boxShadow:
|
|
349
|
-
fontSize:
|
|
341
|
+
border: "1px ".concat(designSystem.designTokens.borderColorForInputWhenFocused, " solid"),
|
|
342
|
+
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
343
|
+
backgroundColor: designSystem.designTokens.backgroundColorForInput,
|
|
344
|
+
boxShadow: designSystem.designTokens.shadow7,
|
|
345
|
+
fontSize: designSystem.designTokens.fontSizeForInput,
|
|
350
346
|
fontFamily: 'inherit',
|
|
351
|
-
margin: "".concat(
|
|
347
|
+
margin: "".concat(designSystem.designTokens.spacingXs, " 0 0 0"),
|
|
352
348
|
borderColor: function () {
|
|
353
|
-
if (props.hasError) return
|
|
354
|
-
if (props.hasWarning) return
|
|
349
|
+
if (props.hasError) return designSystem.designTokens.borderColorForInputWhenError;
|
|
350
|
+
if (props.hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
|
|
355
351
|
return base.borderColorForInput;
|
|
356
352
|
}()
|
|
357
353
|
});
|
|
358
354
|
};
|
|
359
355
|
};
|
|
360
356
|
|
|
361
|
-
var indicatorSeparatorStyles = function indicatorSeparatorStyles(
|
|
357
|
+
var indicatorSeparatorStyles = function indicatorSeparatorStyles() {
|
|
362
358
|
return function (base) {
|
|
363
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
364
|
-
|
|
365
359
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
366
360
|
display: 'none',
|
|
367
361
|
margin: '0',
|
|
368
362
|
padding: '0',
|
|
369
|
-
marginLeft:
|
|
363
|
+
marginLeft: designSystem.designTokens.spacingXs
|
|
370
364
|
});
|
|
371
365
|
};
|
|
372
366
|
};
|
|
373
367
|
|
|
374
|
-
var dropdownIndicatorStyles = function dropdownIndicatorStyles(props
|
|
368
|
+
var dropdownIndicatorStyles = function dropdownIndicatorStyles(props) {
|
|
375
369
|
return function (base) {
|
|
376
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
377
|
-
|
|
378
370
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
379
|
-
color:
|
|
371
|
+
color: designSystem.designTokens.fontColorForInput,
|
|
380
372
|
margin: '0',
|
|
381
373
|
padding: '0',
|
|
382
|
-
marginLeft:
|
|
383
|
-
fill: props.isDisabled || props.isReadOnly ?
|
|
374
|
+
marginLeft: designSystem.designTokens.spacingXs,
|
|
375
|
+
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
384
376
|
});
|
|
385
377
|
};
|
|
386
378
|
};
|
|
@@ -394,68 +386,60 @@ var clearIndicatorStyles = function clearIndicatorStyles() {
|
|
|
394
386
|
};
|
|
395
387
|
};
|
|
396
388
|
|
|
397
|
-
var menuListStyles = function menuListStyles(
|
|
389
|
+
var menuListStyles = function menuListStyles() {
|
|
398
390
|
return function (base) {
|
|
399
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
400
|
-
|
|
401
391
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
402
392
|
padding: '0',
|
|
403
|
-
borderRadius:
|
|
404
|
-
backgroundColor:
|
|
393
|
+
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
394
|
+
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
405
395
|
});
|
|
406
396
|
};
|
|
407
397
|
};
|
|
408
398
|
|
|
409
|
-
var optionStyles = function optionStyles(
|
|
399
|
+
var optionStyles = function optionStyles() {
|
|
410
400
|
return function (base, state) {
|
|
411
401
|
var _context2, _context3;
|
|
412
402
|
|
|
413
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
414
|
-
|
|
415
403
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
416
|
-
transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(
|
|
417
|
-
paddingLeft:
|
|
418
|
-
paddingRight:
|
|
404
|
+
transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context2, designSystem.designTokens.transitionStandard),
|
|
405
|
+
paddingLeft: designSystem.designTokens.spacingS,
|
|
406
|
+
paddingRight: designSystem.designTokens.spacingS,
|
|
419
407
|
color: function () {
|
|
420
|
-
if (!state.isDisabled) return
|
|
421
|
-
if (state.isSelected) return
|
|
408
|
+
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
409
|
+
if (state.isSelected) return designSystem.designTokens.fontColorForInput;
|
|
422
410
|
return base.color;
|
|
423
411
|
}(),
|
|
424
412
|
backgroundColor: function () {
|
|
425
|
-
if (state.isSelected) return
|
|
426
|
-
if (state.isFocused) return
|
|
413
|
+
if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
|
|
414
|
+
if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
|
|
427
415
|
return base.backgroundColor;
|
|
428
416
|
}(),
|
|
429
417
|
'&:active': {
|
|
430
418
|
color: function () {
|
|
431
|
-
if (!state.isDisabled) return
|
|
419
|
+
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
432
420
|
return base.color;
|
|
433
421
|
}(),
|
|
434
|
-
backgroundColor:
|
|
422
|
+
backgroundColor: designSystem.designTokens.backgroundColorForInputWhenSelected
|
|
435
423
|
}
|
|
436
424
|
});
|
|
437
425
|
};
|
|
438
426
|
};
|
|
439
427
|
|
|
440
|
-
var placeholderStyles = function placeholderStyles(props
|
|
428
|
+
var placeholderStyles = function placeholderStyles(props) {
|
|
441
429
|
return function (base) {
|
|
442
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
443
|
-
|
|
444
430
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
445
|
-
color:
|
|
431
|
+
color: designSystem.designTokens.placeholderFontColorForInput,
|
|
446
432
|
width: '100%',
|
|
447
433
|
overflow: 'hidden',
|
|
448
434
|
whiteSpace: 'nowrap',
|
|
449
435
|
textOverflow: 'ellipsis',
|
|
450
|
-
fill: props.isDisabled || props.isReadOnly ?
|
|
436
|
+
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
451
437
|
});
|
|
452
438
|
};
|
|
453
439
|
};
|
|
454
440
|
|
|
455
|
-
var valueContainerStyles = function valueContainerStyles(props
|
|
441
|
+
var valueContainerStyles = function valueContainerStyles(props) {
|
|
456
442
|
return function (base) {
|
|
457
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
458
|
-
|
|
459
443
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
460
444
|
padding: '0',
|
|
461
445
|
backgroundColor: 'none',
|
|
@@ -464,57 +448,51 @@ var valueContainerStyles = function valueContainerStyles(props, theme) {
|
|
|
464
448
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
465
449
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
466
450
|
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue ? 'flex' : 'grid',
|
|
467
|
-
fill: props.isDisabled || props.isReadOnly ?
|
|
451
|
+
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
468
452
|
});
|
|
469
453
|
};
|
|
470
454
|
};
|
|
471
455
|
|
|
472
|
-
var singleValueStyles = function singleValueStyles(props
|
|
456
|
+
var singleValueStyles = function singleValueStyles(props) {
|
|
473
457
|
return function (base) {
|
|
474
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
475
|
-
|
|
476
458
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
477
459
|
color: function () {
|
|
478
460
|
if (props.isDisabled) {
|
|
479
|
-
return
|
|
461
|
+
return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
480
462
|
}
|
|
481
463
|
|
|
482
464
|
if (props.isReadOnly) {
|
|
483
|
-
return
|
|
465
|
+
return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
484
466
|
}
|
|
485
467
|
|
|
486
|
-
return
|
|
468
|
+
return designSystem.designTokens.fontColorForInput;
|
|
487
469
|
}()
|
|
488
470
|
});
|
|
489
471
|
};
|
|
490
472
|
};
|
|
491
473
|
|
|
492
|
-
var groupStyles = function groupStyles(props
|
|
474
|
+
var groupStyles = function groupStyles(props) {
|
|
493
475
|
return function (base) {
|
|
494
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
495
|
-
|
|
496
476
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
497
477
|
padding: 0,
|
|
498
478
|
'&:not(:first-of-type)': {
|
|
499
|
-
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(
|
|
479
|
+
borderTop: props.showOptionGroupDivider ? "1px solid ".concat(designSystem.designTokens.colorNeutral) : base.borderTop
|
|
500
480
|
}
|
|
501
481
|
});
|
|
502
482
|
};
|
|
503
483
|
};
|
|
504
484
|
|
|
505
|
-
var groupHeadingStyles = function groupHeadingStyles(
|
|
485
|
+
var groupHeadingStyles = function groupHeadingStyles() {
|
|
506
486
|
return function (base) {
|
|
507
487
|
var _context4;
|
|
508
488
|
|
|
509
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
510
|
-
|
|
511
489
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
512
|
-
color:
|
|
513
|
-
fontSize:
|
|
490
|
+
color: designSystem.designTokens.fontColorForInputWhenReadonly,
|
|
491
|
+
fontSize: designSystem.designTokens.fontSizeSmall,
|
|
514
492
|
textTransform: 'none',
|
|
515
493
|
fontWeight: 'bold',
|
|
516
|
-
margin: "0 ".concat(
|
|
517
|
-
padding: _concatInstanceProperty__default["default"](_context4 = "".concat(
|
|
494
|
+
margin: "0 ".concat(designSystem.designTokens.spacingXs),
|
|
495
|
+
padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacingS, " ")).call(_context4, designSystem.designTokens.spacingXs),
|
|
518
496
|
'&:empty': {
|
|
519
497
|
padding: 0
|
|
520
498
|
}
|
|
@@ -522,15 +500,13 @@ var groupHeadingStyles = function groupHeadingStyles(theme) {
|
|
|
522
500
|
};
|
|
523
501
|
};
|
|
524
502
|
|
|
525
|
-
var containerStyles = function containerStyles(
|
|
503
|
+
var containerStyles = function containerStyles() {
|
|
526
504
|
return function (base, state) {
|
|
527
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
528
|
-
|
|
529
505
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
530
506
|
fontFamily: 'inherit',
|
|
531
|
-
minHeight:
|
|
532
|
-
borderRadius:
|
|
533
|
-
borderColor: state.isFocused ?
|
|
507
|
+
minHeight: designSystem.designTokens.sizeHeightInput,
|
|
508
|
+
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
509
|
+
borderColor: state.isFocused ? designSystem.designTokens.borderColorForInputWhenFocused : base.borderColor,
|
|
534
510
|
boxShadow: state.isFocused ? 'none' : base.boxShadow
|
|
535
511
|
});
|
|
536
512
|
};
|
|
@@ -554,96 +530,90 @@ var menuPortalStyles = function menuPortalStyles(props) {
|
|
|
554
530
|
};
|
|
555
531
|
};
|
|
556
532
|
|
|
557
|
-
var multiValueStyles = function multiValueStyles(
|
|
533
|
+
var multiValueStyles = function multiValueStyles() {
|
|
558
534
|
return function (base) {
|
|
559
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
560
|
-
|
|
561
535
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
562
|
-
height: designSystem.
|
|
563
|
-
backgroundColor:
|
|
536
|
+
height: designSystem.designTokens.sizeHeightTag,
|
|
537
|
+
backgroundColor: designSystem.designTokens.backgroundColorForTag,
|
|
564
538
|
padding: '0'
|
|
565
539
|
});
|
|
566
540
|
};
|
|
567
541
|
};
|
|
568
542
|
|
|
569
|
-
var multiValueLabelStyles = function multiValueLabelStyles(props
|
|
543
|
+
var multiValueLabelStyles = function multiValueLabelStyles(props) {
|
|
570
544
|
return function (base) {
|
|
571
545
|
var _context5, _context6;
|
|
572
546
|
|
|
573
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
574
|
-
|
|
575
547
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
576
|
-
fontSize: designSystem.
|
|
548
|
+
fontSize: designSystem.designTokens.fontSizeSmall,
|
|
577
549
|
color: function () {
|
|
578
|
-
if (props.isDisabled) return
|
|
579
|
-
if (props.isReadOnly) return
|
|
550
|
+
if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
551
|
+
if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
580
552
|
return base.color;
|
|
581
553
|
}(),
|
|
582
|
-
padding: _concatInstanceProperty__default["default"](_context5 = "".concat(
|
|
583
|
-
borderRadius: _concatInstanceProperty__default["default"](_context6 = "".concat(
|
|
584
|
-
border: "1px ".concat(
|
|
554
|
+
padding: _concatInstanceProperty__default["default"](_context5 = "".concat(designSystem.designTokens.spacingXs, " ")).call(_context5, designSystem.designTokens.spacingS),
|
|
555
|
+
borderRadius: _concatInstanceProperty__default["default"](_context6 = "".concat(designSystem.designTokens.borderRadiusForTag, " 0 0 ")).call(_context6, designSystem.designTokens.borderRadiusForTag),
|
|
556
|
+
border: "1px ".concat(designSystem.designTokens.borderColorForTag, " solid"),
|
|
585
557
|
borderWidth: '1px 0 1px 1px',
|
|
586
558
|
'&:last-child': {
|
|
587
|
-
borderRadius:
|
|
559
|
+
borderRadius: designSystem.designTokens.borderRadiusForTag,
|
|
588
560
|
borderWidth: '1px'
|
|
589
561
|
}
|
|
590
562
|
});
|
|
591
563
|
};
|
|
592
564
|
};
|
|
593
565
|
|
|
594
|
-
var multiValueRemoveStyles = function multiValueRemoveStyles(props
|
|
566
|
+
var multiValueRemoveStyles = function multiValueRemoveStyles(props) {
|
|
595
567
|
return function (base, state) {
|
|
596
568
|
var _context7;
|
|
597
569
|
|
|
598
|
-
var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
|
|
599
|
-
|
|
600
570
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
601
|
-
borderColor:
|
|
602
|
-
padding: "0 ".concat(
|
|
603
|
-
borderRadius: _concatInstanceProperty__default["default"](_context7 = "0 ".concat(
|
|
571
|
+
borderColor: designSystem.designTokens.borderColorForTag,
|
|
572
|
+
padding: "0 ".concat(designSystem.designTokens.spacingXs),
|
|
573
|
+
borderRadius: _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.borderRadiusForTag, " ")).call(_context7, designSystem.designTokens.borderRadiusForTag, " 0"),
|
|
604
574
|
borderStyle: 'solid',
|
|
605
575
|
borderWidth: '1px',
|
|
606
576
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
607
|
-
backgroundColor:
|
|
577
|
+
backgroundColor: designSystem.designTokens.backgroundColorForTag,
|
|
608
578
|
'svg *': {
|
|
609
|
-
fill: props.isReadOnly ?
|
|
579
|
+
fill: props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenReadonly : ''
|
|
610
580
|
},
|
|
611
581
|
'&:hover, &:focus': {
|
|
612
|
-
borderColor:
|
|
613
|
-
backgroundColor:
|
|
582
|
+
borderColor: designSystem.designTokens.borderColorForTagWarning,
|
|
583
|
+
backgroundColor: designSystem.designTokens.backgroundColorForTag,
|
|
614
584
|
'svg *': {
|
|
615
|
-
fill:
|
|
585
|
+
fill: designSystem.designTokens.borderColorForTagWarning
|
|
616
586
|
}
|
|
617
587
|
}
|
|
618
588
|
});
|
|
619
589
|
};
|
|
620
590
|
};
|
|
621
591
|
|
|
622
|
-
function createSelectStyles(props
|
|
592
|
+
function createSelectStyles(props) {
|
|
623
593
|
return {
|
|
624
|
-
control: controlStyles(props
|
|
625
|
-
menu: menuStyles(props
|
|
626
|
-
indicatorSeparator: indicatorSeparatorStyles(
|
|
627
|
-
dropdownIndicator: dropdownIndicatorStyles(props
|
|
594
|
+
control: controlStyles(props),
|
|
595
|
+
menu: menuStyles(props),
|
|
596
|
+
indicatorSeparator: indicatorSeparatorStyles(),
|
|
597
|
+
dropdownIndicator: dropdownIndicatorStyles(props),
|
|
628
598
|
clearIndicator: clearIndicatorStyles(),
|
|
629
|
-
menuList: menuListStyles(
|
|
599
|
+
menuList: menuListStyles(),
|
|
630
600
|
menuPortal: menuPortalStyles(props),
|
|
631
|
-
multiValue: multiValueStyles(
|
|
632
|
-
multiValueLabel: multiValueLabelStyles(props
|
|
633
|
-
multiValueRemove: multiValueRemoveStyles(props
|
|
601
|
+
multiValue: multiValueStyles(),
|
|
602
|
+
multiValueLabel: multiValueLabelStyles(props),
|
|
603
|
+
multiValueRemove: multiValueRemoveStyles(props),
|
|
634
604
|
indicatorsContainer: indicatorsContainerStyles(),
|
|
635
|
-
option: optionStyles(
|
|
636
|
-
placeholder: placeholderStyles(props
|
|
637
|
-
valueContainer: valueContainerStyles(props
|
|
638
|
-
singleValue: singleValueStyles(props
|
|
639
|
-
group: groupStyles(props
|
|
640
|
-
groupHeading: groupHeadingStyles(
|
|
641
|
-
container: containerStyles(
|
|
605
|
+
option: optionStyles(),
|
|
606
|
+
placeholder: placeholderStyles(props),
|
|
607
|
+
valueContainer: valueContainerStyles(props),
|
|
608
|
+
singleValue: singleValueStyles(props),
|
|
609
|
+
group: groupStyles(props),
|
|
610
|
+
groupHeading: groupHeadingStyles(),
|
|
611
|
+
container: containerStyles()
|
|
642
612
|
};
|
|
643
613
|
}
|
|
644
614
|
|
|
645
615
|
// NOTE: This string will be replaced on build time with the package version.
|
|
646
|
-
var version = "15.
|
|
616
|
+
var version = "15.3.0";
|
|
647
617
|
|
|
648
618
|
exports.ClearIndicator = ClearIndicator$1;
|
|
649
619
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|