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