@commercetools-uikit/select-utils 15.15.1 → 16.1.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.
|
@@ -51,28 +51,25 @@ var messages$1 = reactIntl.defineMessages({
|
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
const _excluded = ["ref", "onMouseDown"];
|
|
54
|
-
|
|
55
54
|
function ownKeys$6(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; }
|
|
56
|
-
|
|
57
55
|
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
58
|
-
|
|
59
56
|
const ClearIndicator = props => {
|
|
60
57
|
const intl = reactIntl.useIntl();
|
|
61
|
-
|
|
62
58
|
const getStyles = props.getStyles,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
59
|
+
_props$innerProps = props.innerProps,
|
|
60
|
+
ref = _props$innerProps.ref,
|
|
61
|
+
onMouseDown = _props$innerProps.onMouseDown,
|
|
62
|
+
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
|
|
68
63
|
return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
69
64
|
ref: ref,
|
|
70
65
|
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+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbmV4cG9ydCB0eXBlIFRDbGVhckluZGljYXRvclByb3BzID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbn07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZH07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
|
|
71
66
|
style: getStyles('clearIndicator', props),
|
|
72
67
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
73
|
-
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
68
|
+
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
69
|
+
// overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
|
|
74
70
|
,
|
|
75
|
-
"aria-hidden": false
|
|
71
|
+
"aria-hidden": false
|
|
72
|
+
// only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
|
|
76
73
|
,
|
|
77
74
|
onClick: onMouseDown,
|
|
78
75
|
children: jsxRuntime.jsx(icons.CloseIcon, {
|
|
@@ -80,20 +77,17 @@ const ClearIndicator = props => {
|
|
|
80
77
|
})
|
|
81
78
|
}));
|
|
82
79
|
};
|
|
83
|
-
|
|
84
80
|
ClearIndicator.displayName = 'ClearIndicator';
|
|
85
81
|
var ClearIndicator$1 = ClearIndicator;
|
|
86
82
|
|
|
87
83
|
function ownKeys$5(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; }
|
|
88
|
-
|
|
89
84
|
function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
90
85
|
// see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
|
|
91
86
|
const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
|
|
92
|
-
|
|
93
87
|
const TagRemove = props => {
|
|
94
|
-
const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
|
|
88
|
+
const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
|
|
89
|
+
// when the select input is disabled,
|
|
95
90
|
// we don't want to spread the removeProp event handlers
|
|
96
|
-
|
|
97
91
|
const innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
|
|
98
92
|
return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$5(_objectSpread$5({
|
|
99
93
|
label: "Remove"
|
|
@@ -104,28 +98,22 @@ const TagRemove = props => {
|
|
|
104
98
|
})
|
|
105
99
|
}));
|
|
106
100
|
};
|
|
107
|
-
|
|
108
101
|
TagRemove.displayName = 'TagRemove';
|
|
109
102
|
var TagRemove$1 = TagRemove;
|
|
110
103
|
|
|
111
104
|
function ownKeys$4(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; }
|
|
112
|
-
|
|
113
105
|
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
114
|
-
|
|
115
106
|
const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
|
|
116
107
|
children: jsxRuntime.jsx(icons.CaretDownIcon, {
|
|
117
108
|
color: props.isDisabled ? 'neutral60' : undefined,
|
|
118
109
|
size: "small"
|
|
119
110
|
})
|
|
120
111
|
}));
|
|
121
|
-
|
|
122
112
|
DropdownIndicator.displayName = 'DropdownIndicator';
|
|
123
113
|
var DropdownIndicator$1 = DropdownIndicator;
|
|
124
114
|
|
|
125
115
|
function ownKeys$3(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; }
|
|
126
|
-
|
|
127
116
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
128
|
-
|
|
129
117
|
const SearchIconDropdownIndicator = props => {
|
|
130
118
|
return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
|
|
131
119
|
children: jsxRuntime.jsx(icons.SearchIcon, {
|
|
@@ -134,27 +122,21 @@ const SearchIconDropdownIndicator = props => {
|
|
|
134
122
|
})
|
|
135
123
|
}));
|
|
136
124
|
};
|
|
137
|
-
|
|
138
125
|
SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
|
|
139
126
|
var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
|
|
140
127
|
|
|
141
128
|
function ownKeys$2(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; }
|
|
142
|
-
|
|
143
129
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
144
|
-
|
|
145
130
|
const getDefaultComponent = type => {
|
|
146
131
|
if (type === 'singleValue') return reactSelect.components.SingleValue;
|
|
147
132
|
if (type === 'placeholder') return reactSelect.components.Placeholder;
|
|
148
133
|
return null;
|
|
149
134
|
};
|
|
150
|
-
|
|
151
135
|
const WrapperWithIcon = props => {
|
|
152
136
|
const DefaultComponent = getDefaultComponent(props.type);
|
|
153
|
-
|
|
154
137
|
if (!DefaultComponent) {
|
|
155
138
|
return null;
|
|
156
139
|
}
|
|
157
|
-
|
|
158
140
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
159
141
|
children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
|
|
160
142
|
size: 'big'
|
|
@@ -167,7 +149,6 @@ const WrapperWithIcon = props => {
|
|
|
167
149
|
})]
|
|
168
150
|
});
|
|
169
151
|
};
|
|
170
|
-
|
|
171
152
|
WrapperWithIcon.displayName = 'WrapperWithIcon';
|
|
172
153
|
var WrapperWithIcon$1 = WrapperWithIcon;
|
|
173
154
|
const customComponents = {
|
|
@@ -187,7 +168,6 @@ const SELECT_DROPDOWN_OPTION_TYPES = {
|
|
|
187
168
|
};
|
|
188
169
|
|
|
189
170
|
function ownKeys$1(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; }
|
|
190
|
-
|
|
191
171
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
192
172
|
const MultiplePropertiesSelectInputOption = props => {
|
|
193
173
|
const data = props.data;
|
|
@@ -225,20 +205,16 @@ const DoublePropertySelectInputOption = props => {
|
|
|
225
205
|
DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
|
|
226
206
|
const CustomSelectInputOption = props => {
|
|
227
207
|
var _props$optionInnerPro;
|
|
228
|
-
|
|
229
208
|
const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
|
|
230
|
-
|
|
231
209
|
switch (props.optionType) {
|
|
232
210
|
case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
|
|
233
211
|
return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
234
212
|
noValueFallback: noValueFallback
|
|
235
213
|
}));
|
|
236
|
-
|
|
237
214
|
case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
|
|
238
215
|
return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
239
216
|
noValueFallback: noValueFallback
|
|
240
217
|
}));
|
|
241
|
-
|
|
242
218
|
default:
|
|
243
219
|
return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
244
220
|
children: jsxRuntime.jsx(Text__default["default"].Detail, {
|
|
@@ -278,32 +254,24 @@ var messages = reactIntl.defineMessages({
|
|
|
278
254
|
});
|
|
279
255
|
|
|
280
256
|
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; }
|
|
281
|
-
|
|
282
257
|
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; }
|
|
283
|
-
|
|
284
258
|
const getControlBorderColor = (props, defaultColor) => {
|
|
285
259
|
if (props.isDisabled) {
|
|
286
260
|
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
287
261
|
}
|
|
288
|
-
|
|
289
262
|
if (props.isReadOnly) {
|
|
290
263
|
return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
|
|
291
264
|
}
|
|
292
|
-
|
|
293
265
|
if (props.hasError) {
|
|
294
266
|
return designSystem.designTokens.borderColorForInputWhenError;
|
|
295
267
|
}
|
|
296
|
-
|
|
297
268
|
if (props.hasWarning) {
|
|
298
269
|
return designSystem.designTokens.borderColorForInputWhenWarning;
|
|
299
270
|
}
|
|
300
|
-
|
|
301
271
|
return defaultColor;
|
|
302
272
|
};
|
|
303
|
-
|
|
304
273
|
const controlStyles = props => (base, state) => {
|
|
305
274
|
var _context;
|
|
306
|
-
|
|
307
275
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
308
276
|
fontSize: designSystem.designTokens.fontSizeForInput,
|
|
309
277
|
backgroundColor: (() => {
|
|
@@ -337,7 +305,6 @@ const controlStyles = props => (base, state) => {
|
|
|
337
305
|
'&:focus-within': {
|
|
338
306
|
boxShadow: (() => {
|
|
339
307
|
var _context2;
|
|
340
|
-
|
|
341
308
|
if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
|
|
342
309
|
return null;
|
|
343
310
|
})(),
|
|
@@ -357,7 +324,6 @@ const controlStyles = props => (base, state) => {
|
|
|
357
324
|
color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
358
325
|
});
|
|
359
326
|
};
|
|
360
|
-
|
|
361
327
|
const menuStyles = props => base => {
|
|
362
328
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
363
329
|
border: "1px solid ".concat(designSystem.designTokens.borderColorForSelectInputMenu),
|
|
@@ -374,7 +340,6 @@ const menuStyles = props => base => {
|
|
|
374
340
|
})()
|
|
375
341
|
});
|
|
376
342
|
};
|
|
377
|
-
|
|
378
343
|
const indicatorSeparatorStyles = () => base => {
|
|
379
344
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
380
345
|
display: 'none',
|
|
@@ -383,7 +348,6 @@ const indicatorSeparatorStyles = () => base => {
|
|
|
383
348
|
marginLeft: designSystem.designTokens.spacing10
|
|
384
349
|
});
|
|
385
350
|
};
|
|
386
|
-
|
|
387
351
|
const dropdownIndicatorStyles = props => base => {
|
|
388
352
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
389
353
|
color: designSystem.designTokens.fontColorForInput,
|
|
@@ -398,13 +362,11 @@ const dropdownIndicatorStyles = props => base => {
|
|
|
398
362
|
})()
|
|
399
363
|
});
|
|
400
364
|
};
|
|
401
|
-
|
|
402
365
|
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
403
366
|
display: 'flex',
|
|
404
367
|
padding: 0,
|
|
405
368
|
marginLeft: designSystem.designTokens.marginForSelectInputIcon
|
|
406
369
|
});
|
|
407
|
-
|
|
408
370
|
const menuListStyles = () => base => {
|
|
409
371
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
410
372
|
padding: designSystem.designTokens.paddingForSelectInputMenu,
|
|
@@ -412,10 +374,8 @@ const menuListStyles = () => base => {
|
|
|
412
374
|
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
413
375
|
});
|
|
414
376
|
};
|
|
415
|
-
|
|
416
377
|
const optionStyles = () => (base, state) => {
|
|
417
378
|
var _context3, _context4;
|
|
418
|
-
|
|
419
379
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
420
380
|
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),
|
|
421
381
|
paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
|
|
@@ -442,7 +402,6 @@ const optionStyles = () => (base, state) => {
|
|
|
442
402
|
}
|
|
443
403
|
});
|
|
444
404
|
};
|
|
445
|
-
|
|
446
405
|
const placeholderStyles = props => base => {
|
|
447
406
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
448
407
|
color: (() => {
|
|
@@ -455,8 +414,8 @@ const placeholderStyles = props => base => {
|
|
|
455
414
|
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
456
415
|
});
|
|
457
416
|
};
|
|
458
|
-
|
|
459
417
|
const valueContainerStyles = props => base => {
|
|
418
|
+
var _props$controlShouldR;
|
|
460
419
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
461
420
|
padding: '0',
|
|
462
421
|
backgroundColor: 'none',
|
|
@@ -464,29 +423,25 @@ const valueContainerStyles = props => base => {
|
|
|
464
423
|
// Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
|
|
465
424
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
466
425
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
467
|
-
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
|
|
426
|
+
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
|
|
468
427
|
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
|
|
469
428
|
});
|
|
470
429
|
};
|
|
471
|
-
|
|
472
430
|
const singleValueStyles = props => base => {
|
|
473
431
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
474
432
|
color: (() => {
|
|
475
433
|
if (props.isDisabled) {
|
|
476
434
|
return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
477
435
|
}
|
|
478
|
-
|
|
479
436
|
if (props.isReadOnly) {
|
|
480
437
|
return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
481
438
|
}
|
|
482
|
-
|
|
483
439
|
if (props.hasError) return designSystem.designTokens.fontColorForSelectInputWhenError;
|
|
484
440
|
if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputWhenWarning;
|
|
485
441
|
return designSystem.designTokens.fontColorForInput;
|
|
486
442
|
})()
|
|
487
443
|
});
|
|
488
444
|
};
|
|
489
|
-
|
|
490
445
|
const groupStyles = props => base => {
|
|
491
446
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
492
447
|
padding: 0,
|
|
@@ -495,10 +450,8 @@ const groupStyles = props => base => {
|
|
|
495
450
|
}
|
|
496
451
|
});
|
|
497
452
|
};
|
|
498
|
-
|
|
499
453
|
const groupHeadingStyles = () => base => {
|
|
500
454
|
var _context5;
|
|
501
|
-
|
|
502
455
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
503
456
|
color: designSystem.designTokens.fontColorForInputWhenReadonly,
|
|
504
457
|
fontSize: designSystem.designTokens.fontSizeSmall,
|
|
@@ -510,7 +463,6 @@ const groupHeadingStyles = () => base => {
|
|
|
510
463
|
}
|
|
511
464
|
});
|
|
512
465
|
};
|
|
513
|
-
|
|
514
466
|
const containerStyles = () => (base, state) => {
|
|
515
467
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
516
468
|
fontFamily: 'inherit',
|
|
@@ -520,17 +472,14 @@ const containerStyles = () => (base, state) => {
|
|
|
520
472
|
boxShadow: state.isFocused ? 'none' : base.boxShadow
|
|
521
473
|
});
|
|
522
474
|
};
|
|
523
|
-
|
|
524
475
|
const indicatorsContainerStyles = () => () => ({
|
|
525
476
|
background: 'none',
|
|
526
477
|
display: 'flex',
|
|
527
478
|
alignItems: 'center'
|
|
528
479
|
});
|
|
529
|
-
|
|
530
480
|
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
531
481
|
zIndex: props.menuPortalZIndex
|
|
532
482
|
});
|
|
533
|
-
|
|
534
483
|
const multiValueStyles = () => base => {
|
|
535
484
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
536
485
|
display: 'flex',
|
|
@@ -541,10 +490,8 @@ const multiValueStyles = () => base => {
|
|
|
541
490
|
border: designSystem.designTokens.borderForSelectInputTag
|
|
542
491
|
});
|
|
543
492
|
};
|
|
544
|
-
|
|
545
493
|
const multiValueLabelStyles = props => base => {
|
|
546
494
|
var _context6, _context7;
|
|
547
|
-
|
|
548
495
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
549
496
|
fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
|
|
550
497
|
color: (() => {
|
|
@@ -562,10 +509,8 @@ const multiValueLabelStyles = props => base => {
|
|
|
562
509
|
}
|
|
563
510
|
});
|
|
564
511
|
};
|
|
565
|
-
|
|
566
512
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
567
513
|
var _context8;
|
|
568
|
-
|
|
569
514
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
570
515
|
borderColor: designSystem.designTokens.borderColorForTag,
|
|
571
516
|
padding: "0 ".concat(designSystem.designTokens.spacing10),
|
|
@@ -586,7 +531,6 @@ const multiValueRemoveStyles = props => (base, state) => {
|
|
|
586
531
|
}
|
|
587
532
|
});
|
|
588
533
|
};
|
|
589
|
-
|
|
590
534
|
function createSelectStyles(props) {
|
|
591
535
|
return {
|
|
592
536
|
control: controlStyles(props),
|
|
@@ -611,7 +555,6 @@ function createSelectStyles(props) {
|
|
|
611
555
|
}
|
|
612
556
|
|
|
613
557
|
const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
|
|
614
|
-
|
|
615
558
|
const warnIfMenuPortalPropsAreMissing = props => {
|
|
616
559
|
if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
|
|
617
560
|
) {
|
|
@@ -620,7 +563,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
620
563
|
};
|
|
621
564
|
|
|
622
565
|
// NOTE: This string will be replaced on build time with the package version.
|
|
623
|
-
var version = "
|
|
566
|
+
var version = "16.1.0";
|
|
624
567
|
|
|
625
568
|
exports.ClearIndicator = ClearIndicator$1;
|
|
626
569
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|
|
@@ -51,28 +51,25 @@ var messages$1 = reactIntl.defineMessages({
|
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
const _excluded = ["ref", "onMouseDown"];
|
|
54
|
-
|
|
55
54
|
function ownKeys$6(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; }
|
|
56
|
-
|
|
57
55
|
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
58
|
-
|
|
59
56
|
const ClearIndicator = props => {
|
|
60
57
|
const intl = reactIntl.useIntl();
|
|
61
|
-
|
|
62
58
|
const getStyles = props.getStyles,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
59
|
+
_props$innerProps = props.innerProps,
|
|
60
|
+
ref = _props$innerProps.ref,
|
|
61
|
+
onMouseDown = _props$innerProps.onMouseDown,
|
|
62
|
+
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
|
|
68
63
|
return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
69
64
|
ref: ref,
|
|
70
65
|
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, ";}" + ("" ), "" ),
|
|
71
66
|
style: getStyles('clearIndicator', props),
|
|
72
67
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
73
|
-
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
68
|
+
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
69
|
+
// overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
|
|
74
70
|
,
|
|
75
|
-
"aria-hidden": false
|
|
71
|
+
"aria-hidden": false
|
|
72
|
+
// only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
|
|
76
73
|
,
|
|
77
74
|
onClick: onMouseDown,
|
|
78
75
|
children: jsxRuntime.jsx(icons.CloseIcon, {
|
|
@@ -80,20 +77,17 @@ const ClearIndicator = props => {
|
|
|
80
77
|
})
|
|
81
78
|
}));
|
|
82
79
|
};
|
|
83
|
-
|
|
84
80
|
ClearIndicator.displayName = 'ClearIndicator';
|
|
85
81
|
var ClearIndicator$1 = ClearIndicator;
|
|
86
82
|
|
|
87
83
|
function ownKeys$5(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; }
|
|
88
|
-
|
|
89
84
|
function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
90
85
|
// see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
|
|
91
86
|
const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
|
|
92
|
-
|
|
93
87
|
const TagRemove = props => {
|
|
94
|
-
const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
|
|
88
|
+
const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
|
|
89
|
+
// when the select input is disabled,
|
|
95
90
|
// we don't want to spread the removeProp event handlers
|
|
96
|
-
|
|
97
91
|
const innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
|
|
98
92
|
return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$5(_objectSpread$5({
|
|
99
93
|
label: "Remove"
|
|
@@ -104,28 +98,22 @@ const TagRemove = props => {
|
|
|
104
98
|
})
|
|
105
99
|
}));
|
|
106
100
|
};
|
|
107
|
-
|
|
108
101
|
TagRemove.displayName = 'TagRemove';
|
|
109
102
|
var TagRemove$1 = TagRemove;
|
|
110
103
|
|
|
111
104
|
function ownKeys$4(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; }
|
|
112
|
-
|
|
113
105
|
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
114
|
-
|
|
115
106
|
const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
|
|
116
107
|
children: jsxRuntime.jsx(icons.CaretDownIcon, {
|
|
117
108
|
color: props.isDisabled ? 'neutral60' : undefined,
|
|
118
109
|
size: "small"
|
|
119
110
|
})
|
|
120
111
|
}));
|
|
121
|
-
|
|
122
112
|
DropdownIndicator.displayName = 'DropdownIndicator';
|
|
123
113
|
var DropdownIndicator$1 = DropdownIndicator;
|
|
124
114
|
|
|
125
115
|
function ownKeys$3(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; }
|
|
126
|
-
|
|
127
116
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
128
|
-
|
|
129
117
|
const SearchIconDropdownIndicator = props => {
|
|
130
118
|
return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
|
|
131
119
|
children: jsxRuntime.jsx(icons.SearchIcon, {
|
|
@@ -134,27 +122,21 @@ const SearchIconDropdownIndicator = props => {
|
|
|
134
122
|
})
|
|
135
123
|
}));
|
|
136
124
|
};
|
|
137
|
-
|
|
138
125
|
SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
|
|
139
126
|
var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
|
|
140
127
|
|
|
141
128
|
function ownKeys$2(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; }
|
|
142
|
-
|
|
143
129
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
144
|
-
|
|
145
130
|
const getDefaultComponent = type => {
|
|
146
131
|
if (type === 'singleValue') return reactSelect.components.SingleValue;
|
|
147
132
|
if (type === 'placeholder') return reactSelect.components.Placeholder;
|
|
148
133
|
return null;
|
|
149
134
|
};
|
|
150
|
-
|
|
151
135
|
const WrapperWithIcon = props => {
|
|
152
136
|
const DefaultComponent = getDefaultComponent(props.type);
|
|
153
|
-
|
|
154
137
|
if (!DefaultComponent) {
|
|
155
138
|
return null;
|
|
156
139
|
}
|
|
157
|
-
|
|
158
140
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
159
141
|
children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
|
|
160
142
|
size: 'big'
|
|
@@ -167,7 +149,6 @@ const WrapperWithIcon = props => {
|
|
|
167
149
|
})]
|
|
168
150
|
});
|
|
169
151
|
};
|
|
170
|
-
|
|
171
152
|
WrapperWithIcon.displayName = 'WrapperWithIcon';
|
|
172
153
|
var WrapperWithIcon$1 = WrapperWithIcon;
|
|
173
154
|
const customComponents = {
|
|
@@ -187,7 +168,6 @@ const SELECT_DROPDOWN_OPTION_TYPES = {
|
|
|
187
168
|
};
|
|
188
169
|
|
|
189
170
|
function ownKeys$1(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; }
|
|
190
|
-
|
|
191
171
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
|
|
192
172
|
const MultiplePropertiesSelectInputOption = props => {
|
|
193
173
|
const data = props.data;
|
|
@@ -225,20 +205,16 @@ const DoublePropertySelectInputOption = props => {
|
|
|
225
205
|
DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
|
|
226
206
|
const CustomSelectInputOption = props => {
|
|
227
207
|
var _props$optionInnerPro;
|
|
228
|
-
|
|
229
208
|
const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
|
|
230
|
-
|
|
231
209
|
switch (props.optionType) {
|
|
232
210
|
case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
|
|
233
211
|
return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
234
212
|
noValueFallback: noValueFallback
|
|
235
213
|
}));
|
|
236
|
-
|
|
237
214
|
case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
|
|
238
215
|
return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
239
216
|
noValueFallback: noValueFallback
|
|
240
217
|
}));
|
|
241
|
-
|
|
242
218
|
default:
|
|
243
219
|
return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
244
220
|
children: jsxRuntime.jsx(Text__default["default"].Detail, {
|
|
@@ -278,32 +254,24 @@ var messages = reactIntl.defineMessages({
|
|
|
278
254
|
});
|
|
279
255
|
|
|
280
256
|
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; }
|
|
281
|
-
|
|
282
257
|
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; }
|
|
283
|
-
|
|
284
258
|
const getControlBorderColor = (props, defaultColor) => {
|
|
285
259
|
if (props.isDisabled) {
|
|
286
260
|
return designSystem.designTokens.borderColorForInputWhenDisabled;
|
|
287
261
|
}
|
|
288
|
-
|
|
289
262
|
if (props.isReadOnly) {
|
|
290
263
|
return designSystem.designTokens.borderColorForSelectInputWhenReadonly;
|
|
291
264
|
}
|
|
292
|
-
|
|
293
265
|
if (props.hasError) {
|
|
294
266
|
return designSystem.designTokens.borderColorForInputWhenError;
|
|
295
267
|
}
|
|
296
|
-
|
|
297
268
|
if (props.hasWarning) {
|
|
298
269
|
return designSystem.designTokens.borderColorForInputWhenWarning;
|
|
299
270
|
}
|
|
300
|
-
|
|
301
271
|
return defaultColor;
|
|
302
272
|
};
|
|
303
|
-
|
|
304
273
|
const controlStyles = props => (base, state) => {
|
|
305
274
|
var _context;
|
|
306
|
-
|
|
307
275
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
308
276
|
fontSize: designSystem.designTokens.fontSizeForInput,
|
|
309
277
|
backgroundColor: (() => {
|
|
@@ -337,7 +305,6 @@ const controlStyles = props => (base, state) => {
|
|
|
337
305
|
'&:focus-within': {
|
|
338
306
|
boxShadow: (() => {
|
|
339
307
|
var _context2;
|
|
340
|
-
|
|
341
308
|
if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designSystem.designTokens.borderColorForInputWhenFocused);
|
|
342
309
|
return null;
|
|
343
310
|
})(),
|
|
@@ -357,7 +324,6 @@ const controlStyles = props => (base, state) => {
|
|
|
357
324
|
color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
358
325
|
});
|
|
359
326
|
};
|
|
360
|
-
|
|
361
327
|
const menuStyles = props => base => {
|
|
362
328
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
363
329
|
border: "1px solid ".concat(designSystem.designTokens.borderColorForSelectInputMenu),
|
|
@@ -374,7 +340,6 @@ const menuStyles = props => base => {
|
|
|
374
340
|
})()
|
|
375
341
|
});
|
|
376
342
|
};
|
|
377
|
-
|
|
378
343
|
const indicatorSeparatorStyles = () => base => {
|
|
379
344
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
380
345
|
display: 'none',
|
|
@@ -383,7 +348,6 @@ const indicatorSeparatorStyles = () => base => {
|
|
|
383
348
|
marginLeft: designSystem.designTokens.spacing10
|
|
384
349
|
});
|
|
385
350
|
};
|
|
386
|
-
|
|
387
351
|
const dropdownIndicatorStyles = props => base => {
|
|
388
352
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
389
353
|
color: designSystem.designTokens.fontColorForInput,
|
|
@@ -398,13 +362,11 @@ const dropdownIndicatorStyles = props => base => {
|
|
|
398
362
|
})()
|
|
399
363
|
});
|
|
400
364
|
};
|
|
401
|
-
|
|
402
365
|
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
403
366
|
display: 'flex',
|
|
404
367
|
padding: 0,
|
|
405
368
|
marginLeft: designSystem.designTokens.marginForSelectInputIcon
|
|
406
369
|
});
|
|
407
|
-
|
|
408
370
|
const menuListStyles = () => base => {
|
|
409
371
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
410
372
|
padding: designSystem.designTokens.paddingForSelectInputMenu,
|
|
@@ -412,10 +374,8 @@ const menuListStyles = () => base => {
|
|
|
412
374
|
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
413
375
|
});
|
|
414
376
|
};
|
|
415
|
-
|
|
416
377
|
const optionStyles = () => (base, state) => {
|
|
417
378
|
var _context3, _context4;
|
|
418
|
-
|
|
419
379
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
420
380
|
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),
|
|
421
381
|
paddingLeft: designSystem.designTokens.paddingLeftForSelectInputOptions,
|
|
@@ -442,7 +402,6 @@ const optionStyles = () => (base, state) => {
|
|
|
442
402
|
}
|
|
443
403
|
});
|
|
444
404
|
};
|
|
445
|
-
|
|
446
405
|
const placeholderStyles = props => base => {
|
|
447
406
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
448
407
|
color: (() => {
|
|
@@ -455,8 +414,8 @@ const placeholderStyles = props => base => {
|
|
|
455
414
|
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
456
415
|
});
|
|
457
416
|
};
|
|
458
|
-
|
|
459
417
|
const valueContainerStyles = props => base => {
|
|
418
|
+
var _props$controlShouldR;
|
|
460
419
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
461
420
|
padding: '0',
|
|
462
421
|
backgroundColor: 'none',
|
|
@@ -464,29 +423,25 @@ const valueContainerStyles = props => base => {
|
|
|
464
423
|
// Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
|
|
465
424
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
466
425
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
467
|
-
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
|
|
426
|
+
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
|
|
468
427
|
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.fontColorForSelectInputIcon
|
|
469
428
|
});
|
|
470
429
|
};
|
|
471
|
-
|
|
472
430
|
const singleValueStyles = props => base => {
|
|
473
431
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
474
432
|
color: (() => {
|
|
475
433
|
if (props.isDisabled) {
|
|
476
434
|
return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
477
435
|
}
|
|
478
|
-
|
|
479
436
|
if (props.isReadOnly) {
|
|
480
437
|
return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
481
438
|
}
|
|
482
|
-
|
|
483
439
|
if (props.hasError) return designSystem.designTokens.fontColorForSelectInputWhenError;
|
|
484
440
|
if (props.hasWarning) return designSystem.designTokens.fontColorForSelectInputWhenWarning;
|
|
485
441
|
return designSystem.designTokens.fontColorForInput;
|
|
486
442
|
})()
|
|
487
443
|
});
|
|
488
444
|
};
|
|
489
|
-
|
|
490
445
|
const groupStyles = props => base => {
|
|
491
446
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
492
447
|
padding: 0,
|
|
@@ -495,10 +450,8 @@ const groupStyles = props => base => {
|
|
|
495
450
|
}
|
|
496
451
|
});
|
|
497
452
|
};
|
|
498
|
-
|
|
499
453
|
const groupHeadingStyles = () => base => {
|
|
500
454
|
var _context5;
|
|
501
|
-
|
|
502
455
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
503
456
|
color: designSystem.designTokens.fontColorForInputWhenReadonly,
|
|
504
457
|
fontSize: designSystem.designTokens.fontSizeSmall,
|
|
@@ -510,7 +463,6 @@ const groupHeadingStyles = () => base => {
|
|
|
510
463
|
}
|
|
511
464
|
});
|
|
512
465
|
};
|
|
513
|
-
|
|
514
466
|
const containerStyles = () => (base, state) => {
|
|
515
467
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
516
468
|
fontFamily: 'inherit',
|
|
@@ -520,17 +472,14 @@ const containerStyles = () => (base, state) => {
|
|
|
520
472
|
boxShadow: state.isFocused ? 'none' : base.boxShadow
|
|
521
473
|
});
|
|
522
474
|
};
|
|
523
|
-
|
|
524
475
|
const indicatorsContainerStyles = () => () => ({
|
|
525
476
|
background: 'none',
|
|
526
477
|
display: 'flex',
|
|
527
478
|
alignItems: 'center'
|
|
528
479
|
});
|
|
529
|
-
|
|
530
480
|
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
531
481
|
zIndex: props.menuPortalZIndex
|
|
532
482
|
});
|
|
533
|
-
|
|
534
483
|
const multiValueStyles = () => base => {
|
|
535
484
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
536
485
|
display: 'flex',
|
|
@@ -541,10 +490,8 @@ const multiValueStyles = () => base => {
|
|
|
541
490
|
border: designSystem.designTokens.borderForSelectInputTag
|
|
542
491
|
});
|
|
543
492
|
};
|
|
544
|
-
|
|
545
493
|
const multiValueLabelStyles = props => base => {
|
|
546
494
|
var _context6, _context7;
|
|
547
|
-
|
|
548
495
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
549
496
|
fontSize: designSystem.designTokens.fontSizeForSelectInputTag,
|
|
550
497
|
color: (() => {
|
|
@@ -562,10 +509,8 @@ const multiValueLabelStyles = props => base => {
|
|
|
562
509
|
}
|
|
563
510
|
});
|
|
564
511
|
};
|
|
565
|
-
|
|
566
512
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
567
513
|
var _context8;
|
|
568
|
-
|
|
569
514
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
570
515
|
borderColor: designSystem.designTokens.borderColorForTag,
|
|
571
516
|
padding: "0 ".concat(designSystem.designTokens.spacing10),
|
|
@@ -586,7 +531,6 @@ const multiValueRemoveStyles = props => (base, state) => {
|
|
|
586
531
|
}
|
|
587
532
|
});
|
|
588
533
|
};
|
|
589
|
-
|
|
590
534
|
function createSelectStyles(props) {
|
|
591
535
|
return {
|
|
592
536
|
control: controlStyles(props),
|
|
@@ -616,7 +560,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
616
560
|
};
|
|
617
561
|
|
|
618
562
|
// NOTE: This string will be replaced on build time with the package version.
|
|
619
|
-
var version = "
|
|
563
|
+
var version = "16.1.0";
|
|
620
564
|
|
|
621
565
|
exports.ClearIndicator = ClearIndicator$1;
|
|
622
566
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|
|
@@ -31,28 +31,25 @@ var messages$1 = defineMessages({
|
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
const _excluded = ["ref", "onMouseDown"];
|
|
34
|
-
|
|
35
34
|
function ownKeys$6(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; }
|
|
36
|
-
|
|
37
35
|
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$6(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
38
|
-
|
|
39
36
|
const ClearIndicator = props => {
|
|
40
37
|
const intl = useIntl();
|
|
41
|
-
|
|
42
38
|
const getStyles = props.getStyles,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
39
|
+
_props$innerProps = props.innerProps,
|
|
40
|
+
ref = _props$innerProps.ref,
|
|
41
|
+
onMouseDown = _props$innerProps.onMouseDown,
|
|
42
|
+
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded);
|
|
48
43
|
return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
49
44
|
ref: ref,
|
|
50
45
|
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+O1xufSAmIEpTWC5JbnRyaW5zaWNFbGVtZW50c1snYnV0dG9uJ107XG5cbmV4cG9ydCB0eXBlIFRDbGVhckluZGljYXRvclByb3BzID0ge1xuICBpbm5lclByb3BzOiBUSW5uZXJQcm9wcztcbn0gJiBDbGVhckluZGljYXRvclByb3BzO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5mb250Q29sb3JGb3JDbGVhcklucHV0SWNvbn07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9yQ2xlYXJJbnB1dEljb25XaGVuSG92ZXJlZH07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9XCJtZWRpdW1cIiAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
|
|
51
46
|
style: getStyles('clearIndicator', props),
|
|
52
47
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
53
|
-
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
48
|
+
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
49
|
+
// overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
|
|
54
50
|
,
|
|
55
|
-
"aria-hidden": false
|
|
51
|
+
"aria-hidden": false
|
|
52
|
+
// only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
|
|
56
53
|
,
|
|
57
54
|
onClick: onMouseDown,
|
|
58
55
|
children: jsx(CloseIcon, {
|
|
@@ -60,20 +57,17 @@ const ClearIndicator = props => {
|
|
|
60
57
|
})
|
|
61
58
|
}));
|
|
62
59
|
};
|
|
63
|
-
|
|
64
60
|
ClearIndicator.displayName = 'ClearIndicator';
|
|
65
61
|
var ClearIndicator$1 = ClearIndicator;
|
|
66
62
|
|
|
67
63
|
function ownKeys$5(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; }
|
|
68
|
-
|
|
69
64
|
function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$5(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
70
65
|
// see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
|
|
71
66
|
const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
|
|
72
|
-
|
|
73
67
|
const TagRemove = props => {
|
|
74
|
-
const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
|
|
68
|
+
const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
|
|
69
|
+
// when the select input is disabled,
|
|
75
70
|
// we don't want to spread the removeProp event handlers
|
|
76
|
-
|
|
77
71
|
const innerProps = isDisabled ? omit(props.innerProps, removeProps) : props.innerProps;
|
|
78
72
|
return jsx(AccessibleButton, _objectSpread$5(_objectSpread$5({
|
|
79
73
|
label: "Remove"
|
|
@@ -84,28 +78,22 @@ const TagRemove = props => {
|
|
|
84
78
|
})
|
|
85
79
|
}));
|
|
86
80
|
};
|
|
87
|
-
|
|
88
81
|
TagRemove.displayName = 'TagRemove';
|
|
89
82
|
var TagRemove$1 = TagRemove;
|
|
90
83
|
|
|
91
84
|
function ownKeys$4(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; }
|
|
92
|
-
|
|
93
85
|
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$4(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
94
|
-
|
|
95
86
|
const DropdownIndicator = props => jsx(components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
|
|
96
87
|
children: jsx(CaretDownIcon, {
|
|
97
88
|
color: props.isDisabled ? 'neutral60' : undefined,
|
|
98
89
|
size: "small"
|
|
99
90
|
})
|
|
100
91
|
}));
|
|
101
|
-
|
|
102
92
|
DropdownIndicator.displayName = 'DropdownIndicator';
|
|
103
93
|
var DropdownIndicator$1 = DropdownIndicator;
|
|
104
94
|
|
|
105
95
|
function ownKeys$3(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; }
|
|
106
|
-
|
|
107
96
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$3(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
108
|
-
|
|
109
97
|
const SearchIconDropdownIndicator = props => {
|
|
110
98
|
return jsx(components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
|
|
111
99
|
children: jsx(SearchIcon, {
|
|
@@ -114,27 +102,21 @@ const SearchIconDropdownIndicator = props => {
|
|
|
114
102
|
})
|
|
115
103
|
}));
|
|
116
104
|
};
|
|
117
|
-
|
|
118
105
|
SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
|
|
119
106
|
var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
|
|
120
107
|
|
|
121
108
|
function ownKeys$2(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; }
|
|
122
|
-
|
|
123
109
|
function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$2(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
124
|
-
|
|
125
110
|
const getDefaultComponent = type => {
|
|
126
111
|
if (type === 'singleValue') return components.SingleValue;
|
|
127
112
|
if (type === 'placeholder') return components.Placeholder;
|
|
128
113
|
return null;
|
|
129
114
|
};
|
|
130
|
-
|
|
131
115
|
const WrapperWithIcon = props => {
|
|
132
116
|
const DefaultComponent = getDefaultComponent(props.type);
|
|
133
|
-
|
|
134
117
|
if (!DefaultComponent) {
|
|
135
118
|
return null;
|
|
136
119
|
}
|
|
137
|
-
|
|
138
120
|
return jsxs(Fragment, {
|
|
139
121
|
children: [props.selectProps.iconLeft && /*#__PURE__*/cloneElement(props.selectProps.iconLeft, {
|
|
140
122
|
size: 'big'
|
|
@@ -147,7 +129,6 @@ const WrapperWithIcon = props => {
|
|
|
147
129
|
})]
|
|
148
130
|
});
|
|
149
131
|
};
|
|
150
|
-
|
|
151
132
|
WrapperWithIcon.displayName = 'WrapperWithIcon';
|
|
152
133
|
var WrapperWithIcon$1 = WrapperWithIcon;
|
|
153
134
|
const customComponents = {
|
|
@@ -167,7 +148,6 @@ const SELECT_DROPDOWN_OPTION_TYPES = {
|
|
|
167
148
|
};
|
|
168
149
|
|
|
169
150
|
function ownKeys$1(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; }
|
|
170
|
-
|
|
171
151
|
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
172
152
|
const MultiplePropertiesSelectInputOption = props => {
|
|
173
153
|
const data = props.data;
|
|
@@ -205,20 +185,16 @@ const DoublePropertySelectInputOption = props => {
|
|
|
205
185
|
DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
|
|
206
186
|
const CustomSelectInputOption = props => {
|
|
207
187
|
var _props$optionInnerPro;
|
|
208
|
-
|
|
209
188
|
const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
|
|
210
|
-
|
|
211
189
|
switch (props.optionType) {
|
|
212
190
|
case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
|
|
213
191
|
return jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
214
192
|
noValueFallback: noValueFallback
|
|
215
193
|
}));
|
|
216
|
-
|
|
217
194
|
case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
|
|
218
195
|
return jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
219
196
|
noValueFallback: noValueFallback
|
|
220
197
|
}));
|
|
221
|
-
|
|
222
198
|
default:
|
|
223
199
|
return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
|
|
224
200
|
children: jsx(Text.Detail, {
|
|
@@ -258,32 +234,24 @@ var messages = defineMessages({
|
|
|
258
234
|
});
|
|
259
235
|
|
|
260
236
|
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; }
|
|
261
|
-
|
|
262
237
|
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; }
|
|
263
|
-
|
|
264
238
|
const getControlBorderColor = (props, defaultColor) => {
|
|
265
239
|
if (props.isDisabled) {
|
|
266
240
|
return designTokens.borderColorForInputWhenDisabled;
|
|
267
241
|
}
|
|
268
|
-
|
|
269
242
|
if (props.isReadOnly) {
|
|
270
243
|
return designTokens.borderColorForSelectInputWhenReadonly;
|
|
271
244
|
}
|
|
272
|
-
|
|
273
245
|
if (props.hasError) {
|
|
274
246
|
return designTokens.borderColorForInputWhenError;
|
|
275
247
|
}
|
|
276
|
-
|
|
277
248
|
if (props.hasWarning) {
|
|
278
249
|
return designTokens.borderColorForInputWhenWarning;
|
|
279
250
|
}
|
|
280
|
-
|
|
281
251
|
return defaultColor;
|
|
282
252
|
};
|
|
283
|
-
|
|
284
253
|
const controlStyles = props => (base, state) => {
|
|
285
254
|
var _context;
|
|
286
|
-
|
|
287
255
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
288
256
|
fontSize: designTokens.fontSizeForInput,
|
|
289
257
|
backgroundColor: (() => {
|
|
@@ -317,7 +285,6 @@ const controlStyles = props => (base, state) => {
|
|
|
317
285
|
'&:focus-within': {
|
|
318
286
|
boxShadow: (() => {
|
|
319
287
|
var _context2;
|
|
320
|
-
|
|
321
288
|
if (!props.isDisabled && !props.isReadOnly) return _concatInstanceProperty(_context2 = "".concat(designTokens.boxShadowForSelectInputWhenFocused, " ")).call(_context2, designTokens.borderColorForInputWhenFocused);
|
|
322
289
|
return null;
|
|
323
290
|
})(),
|
|
@@ -337,7 +304,6 @@ const controlStyles = props => (base, state) => {
|
|
|
337
304
|
color: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
338
305
|
});
|
|
339
306
|
};
|
|
340
|
-
|
|
341
307
|
const menuStyles = props => base => {
|
|
342
308
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
343
309
|
border: "1px solid ".concat(designTokens.borderColorForSelectInputMenu),
|
|
@@ -354,7 +320,6 @@ const menuStyles = props => base => {
|
|
|
354
320
|
})()
|
|
355
321
|
});
|
|
356
322
|
};
|
|
357
|
-
|
|
358
323
|
const indicatorSeparatorStyles = () => base => {
|
|
359
324
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
360
325
|
display: 'none',
|
|
@@ -363,7 +328,6 @@ const indicatorSeparatorStyles = () => base => {
|
|
|
363
328
|
marginLeft: designTokens.spacing10
|
|
364
329
|
});
|
|
365
330
|
};
|
|
366
|
-
|
|
367
331
|
const dropdownIndicatorStyles = props => base => {
|
|
368
332
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
369
333
|
color: designTokens.fontColorForInput,
|
|
@@ -378,13 +342,11 @@ const dropdownIndicatorStyles = props => base => {
|
|
|
378
342
|
})()
|
|
379
343
|
});
|
|
380
344
|
};
|
|
381
|
-
|
|
382
345
|
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
383
346
|
display: 'flex',
|
|
384
347
|
padding: 0,
|
|
385
348
|
marginLeft: designTokens.marginForSelectInputIcon
|
|
386
349
|
});
|
|
387
|
-
|
|
388
350
|
const menuListStyles = () => base => {
|
|
389
351
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
390
352
|
padding: designTokens.paddingForSelectInputMenu,
|
|
@@ -392,10 +354,8 @@ const menuListStyles = () => base => {
|
|
|
392
354
|
backgroundColor: designTokens.backgroundColorForInput
|
|
393
355
|
});
|
|
394
356
|
};
|
|
395
|
-
|
|
396
357
|
const optionStyles = () => (base, state) => {
|
|
397
358
|
var _context3, _context4;
|
|
398
|
-
|
|
399
359
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
400
360
|
transition: _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context4, designTokens.transitionStandard, ",\n color ")).call(_context3, designTokens.transitionStandard),
|
|
401
361
|
paddingLeft: designTokens.paddingLeftForSelectInputOptions,
|
|
@@ -422,7 +382,6 @@ const optionStyles = () => (base, state) => {
|
|
|
422
382
|
}
|
|
423
383
|
});
|
|
424
384
|
};
|
|
425
|
-
|
|
426
385
|
const placeholderStyles = props => base => {
|
|
427
386
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
428
387
|
color: (() => {
|
|
@@ -435,8 +394,8 @@ const placeholderStyles = props => base => {
|
|
|
435
394
|
fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
436
395
|
});
|
|
437
396
|
};
|
|
438
|
-
|
|
439
397
|
const valueContainerStyles = props => base => {
|
|
398
|
+
var _props$controlShouldR;
|
|
440
399
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
441
400
|
padding: '0',
|
|
442
401
|
backgroundColor: 'none',
|
|
@@ -444,29 +403,25 @@ const valueContainerStyles = props => base => {
|
|
|
444
403
|
// Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
|
|
445
404
|
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
|
|
446
405
|
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
|
|
447
|
-
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && props.controlShouldRenderValue ? 'flex' : 'grid',
|
|
406
|
+
display: props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && ((_props$controlShouldR = props.controlShouldRenderValue) !== null && _props$controlShouldR !== void 0 ? _props$controlShouldR : true) ? 'flex' : 'grid',
|
|
448
407
|
fill: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : designTokens.fontColorForSelectInputIcon
|
|
449
408
|
});
|
|
450
409
|
};
|
|
451
|
-
|
|
452
410
|
const singleValueStyles = props => base => {
|
|
453
411
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
454
412
|
color: (() => {
|
|
455
413
|
if (props.isDisabled) {
|
|
456
414
|
return designTokens.fontColorForInputWhenDisabled;
|
|
457
415
|
}
|
|
458
|
-
|
|
459
416
|
if (props.isReadOnly) {
|
|
460
417
|
return designTokens.fontColorForInputWhenReadonly;
|
|
461
418
|
}
|
|
462
|
-
|
|
463
419
|
if (props.hasError) return designTokens.fontColorForSelectInputWhenError;
|
|
464
420
|
if (props.hasWarning) return designTokens.fontColorForSelectInputWhenWarning;
|
|
465
421
|
return designTokens.fontColorForInput;
|
|
466
422
|
})()
|
|
467
423
|
});
|
|
468
424
|
};
|
|
469
|
-
|
|
470
425
|
const groupStyles = props => base => {
|
|
471
426
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
472
427
|
padding: 0,
|
|
@@ -475,10 +430,8 @@ const groupStyles = props => base => {
|
|
|
475
430
|
}
|
|
476
431
|
});
|
|
477
432
|
};
|
|
478
|
-
|
|
479
433
|
const groupHeadingStyles = () => base => {
|
|
480
434
|
var _context5;
|
|
481
|
-
|
|
482
435
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
483
436
|
color: designTokens.fontColorForInputWhenReadonly,
|
|
484
437
|
fontSize: designTokens.fontSizeSmall,
|
|
@@ -490,7 +443,6 @@ const groupHeadingStyles = () => base => {
|
|
|
490
443
|
}
|
|
491
444
|
});
|
|
492
445
|
};
|
|
493
|
-
|
|
494
446
|
const containerStyles = () => (base, state) => {
|
|
495
447
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
496
448
|
fontFamily: 'inherit',
|
|
@@ -500,17 +452,14 @@ const containerStyles = () => (base, state) => {
|
|
|
500
452
|
boxShadow: state.isFocused ? 'none' : base.boxShadow
|
|
501
453
|
});
|
|
502
454
|
};
|
|
503
|
-
|
|
504
455
|
const indicatorsContainerStyles = () => () => ({
|
|
505
456
|
background: 'none',
|
|
506
457
|
display: 'flex',
|
|
507
458
|
alignItems: 'center'
|
|
508
459
|
});
|
|
509
|
-
|
|
510
460
|
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
511
461
|
zIndex: props.menuPortalZIndex
|
|
512
462
|
});
|
|
513
|
-
|
|
514
463
|
const multiValueStyles = () => base => {
|
|
515
464
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
516
465
|
display: 'flex',
|
|
@@ -521,10 +470,8 @@ const multiValueStyles = () => base => {
|
|
|
521
470
|
border: designTokens.borderForSelectInputTag
|
|
522
471
|
});
|
|
523
472
|
};
|
|
524
|
-
|
|
525
473
|
const multiValueLabelStyles = props => base => {
|
|
526
474
|
var _context6, _context7;
|
|
527
|
-
|
|
528
475
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
529
476
|
fontSize: designTokens.fontSizeForSelectInputTag,
|
|
530
477
|
color: (() => {
|
|
@@ -542,10 +489,8 @@ const multiValueLabelStyles = props => base => {
|
|
|
542
489
|
}
|
|
543
490
|
});
|
|
544
491
|
};
|
|
545
|
-
|
|
546
492
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
547
493
|
var _context8;
|
|
548
|
-
|
|
549
494
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
550
495
|
borderColor: designTokens.borderColorForTag,
|
|
551
496
|
padding: "0 ".concat(designTokens.spacing10),
|
|
@@ -566,7 +511,6 @@ const multiValueRemoveStyles = props => (base, state) => {
|
|
|
566
511
|
}
|
|
567
512
|
});
|
|
568
513
|
};
|
|
569
|
-
|
|
570
514
|
function createSelectStyles(props) {
|
|
571
515
|
return {
|
|
572
516
|
control: controlStyles(props),
|
|
@@ -591,7 +535,6 @@ function createSelectStyles(props) {
|
|
|
591
535
|
}
|
|
592
536
|
|
|
593
537
|
const getMessage = componentName => "".concat(componentName, ": use `menuPortalZIndex` in conjunction with `menuPortalTarget`");
|
|
594
|
-
|
|
595
538
|
const warnIfMenuPortalPropsAreMissing = props => {
|
|
596
539
|
if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
|
|
597
540
|
) {
|
|
@@ -600,6 +543,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
600
543
|
};
|
|
601
544
|
|
|
602
545
|
// NOTE: This string will be replaced on build time with the package version.
|
|
603
|
-
var version = "
|
|
546
|
+
var version = "16.1.0";
|
|
604
547
|
|
|
605
548
|
export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };
|
package/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": "
|
|
4
|
+
"version": "16.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,24 +21,24 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "
|
|
25
|
-
"@commercetools-uikit/design-system": "
|
|
26
|
-
"@commercetools-uikit/icons": "
|
|
27
|
-
"@commercetools-uikit/spacings": "
|
|
28
|
-
"@commercetools-uikit/text": "
|
|
29
|
-
"@commercetools-uikit/utils": "
|
|
24
|
+
"@commercetools-uikit/accessible-button": "16.1.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.1.0",
|
|
26
|
+
"@commercetools-uikit/icons": "16.1.0",
|
|
27
|
+
"@commercetools-uikit/spacings": "16.1.0",
|
|
28
|
+
"@commercetools-uikit/text": "16.1.0",
|
|
29
|
+
"@commercetools-uikit/utils": "16.1.0",
|
|
30
30
|
"@emotion/react": "^11.10.5",
|
|
31
31
|
"@emotion/styled": "^11.10.5",
|
|
32
32
|
"lodash": "4.17.21",
|
|
33
33
|
"prop-types": "15.8.1",
|
|
34
|
-
"react-select": "5.7.
|
|
34
|
+
"react-select": "5.7.3"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"react": "17.0.2",
|
|
38
|
-
"react-intl": "^
|
|
38
|
+
"react-intl": "^6.3.2"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "17.x",
|
|
42
|
-
"react-intl": "
|
|
42
|
+
"react-intl": "6.x"
|
|
43
43
|
}
|
|
44
44
|
}
|