@commercetools-uikit/select-utils 19.0.0 → 19.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.
- package/dist/commercetools-uikit-select-utils.cjs.dev.js +45 -34
- package/dist/commercetools-uikit-select-utils.cjs.prod.js +43 -32
- package/dist/commercetools-uikit-select-utils.esm.js +45 -34
- package/dist/declarations/src/clear-indicator/clear-indicator.d.ts +2 -1
- package/dist/declarations/src/create-select-styles.d.ts +8 -4
- package/dist/declarations/src/export-types.d.ts +3 -2
- package/dist/declarations/src/tag-remove/tag-remove.d.ts +2 -6
- package/dist/declarations/src/types.d.ts +16 -0
- package/dist/declarations/src/wrapper-with-icon/wrapper-with-icon.d.ts +4 -8
- package/package.json +7 -7
|
@@ -59,10 +59,11 @@ const ClearIndicator = props => {
|
|
|
59
59
|
_props$innerProps = props.innerProps,
|
|
60
60
|
ref = _props$innerProps.ref,
|
|
61
61
|
onMouseDown = _props$innerProps.onMouseDown,
|
|
62
|
-
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded)
|
|
62
|
+
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
|
|
63
|
+
selectProps = props.selectProps;
|
|
63
64
|
return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
64
65
|
ref: ref,
|
|
65
|
-
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
66
|
+
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcbmltcG9ydCB7IFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG50eXBlIFRJbm5lclByb3BzID0ge1xuICByZWY6IExlZ2FjeVJlZjxIVE1MQnV0dG9uRWxlbWVudD47XG59ICYgSlNYLkludHJpbnNpY0VsZW1lbnRzWydidXR0b24nXTtcblxuZXhwb3J0IHR5cGUgVENsZWFySW5kaWNhdG9yUHJvcHMgPSB7XG4gIGlubmVyUHJvcHM6IFRJbm5lclByb3BzO1xufSAmIFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzPENsZWFySW5kaWNhdG9yUHJvcHM+O1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gICAgc2VsZWN0UHJvcHMsXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw0MH07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuY29sb3JFcnJvcn07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9e3NlbGVjdFByb3BzLmlzQ29uZGVuc2VkID8gJ3NtYWxsJyA6ICdtZWRpdW0nfSAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
|
|
66
67
|
style: getStyles('clearIndicator', props),
|
|
67
68
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
68
69
|
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
@@ -73,7 +74,7 @@ const ClearIndicator = props => {
|
|
|
73
74
|
,
|
|
74
75
|
onClick: onMouseDown,
|
|
75
76
|
children: jsxRuntime.jsx(icons.CloseIcon, {
|
|
76
|
-
size:
|
|
77
|
+
size: selectProps.isCondensed ? 'small' : 'medium'
|
|
77
78
|
})
|
|
78
79
|
}));
|
|
79
80
|
};
|
|
@@ -94,7 +95,7 @@ const TagRemove = props => {
|
|
|
94
95
|
}, innerProps), {}, {
|
|
95
96
|
children: jsxRuntime.jsx(icons.CloseBoldIcon, {
|
|
96
97
|
color: isDisabled ? 'neutral60' : 'solid',
|
|
97
|
-
size:
|
|
98
|
+
size: props.selectProps.isCondensed ? 'small' : 'medium'
|
|
98
99
|
})
|
|
99
100
|
}));
|
|
100
101
|
};
|
|
@@ -139,12 +140,12 @@ const WrapperWithIcon = props => {
|
|
|
139
140
|
}
|
|
140
141
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
141
142
|
children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
|
|
142
|
-
size: 'big'
|
|
143
|
+
size: props.selectProps.isCondensed ? 'medium' : 'big'
|
|
143
144
|
}), jsxRuntime.jsx("span", {
|
|
144
145
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
145
146
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
146
147
|
// spacingsXs is the margin between the icon and value
|
|
147
|
-
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
148
|
+
css: /*#__PURE__*/react.css("margin-left:", designSystem.designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHtcbiAgY29tcG9uZW50cyBhcyBkZWZhdWx0Q29tcG9uZW50cyxcbiAgdHlwZSBTaW5nbGVWYWx1ZVByb3BzLFxuICB0eXBlIFBsYWNlaG9sZGVyUHJvcHMsXG59IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IHR5cGUgVFNpbmdsZVZhbHVlV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdzaW5nbGVWYWx1ZSc7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8U2luZ2xlVmFsdWVQcm9wcz47XG5leHBvcnQgdHlwZSBUUGxhY2Vob2xkZXJXcmFwcGVyV2l0aEljb25Qcm9wcyA9IHtcbiAgdHlwZTogJ3BsYWNlaG9sZGVyJztcbn0gJiBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wczxQbGFjZWhvbGRlclByb3BzPjtcbmV4cG9ydCB0eXBlIFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+ID1cbiAgVHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZSdcbiAgICA/IFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHNcbiAgICA6IG5ldmVyO1xuZXhwb3J0IHR5cGUgVERlZmF1bHRDb21wb25lbnQ8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9IChcbiAgcHJvcHM6IFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBTaW5nbGVWYWx1ZVByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gUGxhY2Vob2xkZXJQcm9wc1xuICAgIDogbmV2ZXJcbikgPT4gSlNYLkVsZW1lbnQ7XG5cbmNvbnN0IGdldERlZmF1bHRDb21wb25lbnQgPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgdHlwZTogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+Wyd0eXBlJ11cbik6IFREZWZhdWx0Q29tcG9uZW50PFR5cGU+IHwgbnVsbCA9PiB7XG4gIGlmICh0eXBlID09PSAnc2luZ2xlVmFsdWUnKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5TaW5nbGVWYWx1ZSBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgaWYgKHR5cGUgPT09ICdwbGFjZWhvbGRlcicpXG4gICAgcmV0dXJuIGRlZmF1bHRDb21wb25lbnRzLlBsYWNlaG9sZGVyIGFzIFREZWZhdWx0Q29tcG9uZW50PFR5cGU+O1xuICByZXR1cm4gbnVsbDtcbn07XG5cbmNvbnN0IFdyYXBwZXJXaXRoSWNvbiA9IDxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+KFxuICBwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+XG4pID0+IHtcbiAgY29uc3QgRGVmYXVsdENvbXBvbmVudCA9IGdldERlZmF1bHRDb21wb25lbnQ8VHlwZT4ocHJvcHMudHlwZSk7XG5cbiAgaWYgKCFEZWZhdWx0Q29tcG9uZW50KSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7cHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQgJiZcbiAgICAgICAgY2xvbmVFbGVtZW50KHByb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0LCB7XG4gICAgICAgICAgc2l6ZTogcHJvcHMuc2VsZWN0UHJvcHMuaXNDb25kZW5zZWQgPyAnbWVkaXVtJyA6ICdiaWcnLFxuICAgICAgICB9KX1cbiAgICAgIDxzcGFuXG4gICAgICAgIC8vIHJlYWN0LXNlbGVjdCB1c2VzIGFic29sdXRlIHBvc2l0aW9uaW5nIGZvciB0aGUgU2luZ2xlVmFsdWUvUGxhY2Vob2xkZXJcbiAgICAgICAgLy8gdGhlIGljb24gaGFzIGEgZml4ZWQgc2l6ZSBvZiAyNHB4ICg9PSBTcGFjaW5nc1hsKSwgdGhlcmVmb3JlIHdlIGNhbiB1c2UgYSBmaXhlZCBtYXJnaW5cbiAgICAgICAgLy8gc3BhY2luZ3NYcyBpcyB0aGUgbWFyZ2luIGJldHdlZW4gdGhlIGljb24gYW5kIHZhbHVlXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7LyogQHRzLWlnbm9yZSAqL31cbiAgICAgICAgPERlZmF1bHRDb21wb25lbnQgey4uLnByb3BzfSAvPlxuICAgICAgPC9zcGFuPlxuICAgIDwvPlxuICApO1xufTtcblxuV3JhcHBlcldpdGhJY29uLmRpc3BsYXlOYW1lID0gJ1dyYXBwZXJXaXRoSWNvbic7XG5cbmV4cG9ydCBkZWZhdWx0IFdyYXBwZXJXaXRoSWNvbjtcblxuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdzaW5nbGVWYWx1ZSc+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwnc2luZ2xlVmFsdWUnPiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+XG4gICksXG4gIFBsYWNlaG9sZGVyOiAocHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczwncGxhY2Vob2xkZXInPikgPT4gKFxuICAgIDxXcmFwcGVyV2l0aEljb248J3BsYWNlaG9sZGVyJz4gey4uLnByb3BzfSB0eXBlPVwicGxhY2Vob2xkZXJcIiAvPlxuICApLFxufTtcblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
|
|
148
149
|
children: jsxRuntime.jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
149
150
|
})]
|
|
150
151
|
});
|
|
@@ -254,7 +255,7 @@ var messages = reactIntl.defineMessages({
|
|
|
254
255
|
});
|
|
255
256
|
|
|
256
257
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
257
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
258
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
258
259
|
const getHorizontalConstraintValue = value => {
|
|
259
260
|
switch (value) {
|
|
260
261
|
case 'auto':
|
|
@@ -275,6 +276,11 @@ const getInputBackgroundColor = props => {
|
|
|
275
276
|
}
|
|
276
277
|
return designSystem.designTokens.backgroundColorForInput;
|
|
277
278
|
};
|
|
279
|
+
const getMultiValueBackgroundColor = props => {
|
|
280
|
+
if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
|
|
281
|
+
if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
|
|
282
|
+
return designSystem.designTokens.colorPrimary95;
|
|
283
|
+
};
|
|
278
284
|
const getInputBorderColor = (props, state) => {
|
|
279
285
|
if (props.appearance === 'quiet') {
|
|
280
286
|
return designSystem.designTokens.borderColorForInputAsQuiet;
|
|
@@ -314,10 +320,20 @@ const getHoverInputBorderColor = props => {
|
|
|
314
320
|
}
|
|
315
321
|
return designSystem.designTokens.borderColorForInputWhenHovered;
|
|
316
322
|
};
|
|
323
|
+
const getHoverInputBackgroundColor = props => {
|
|
324
|
+
if (!props.isDisabled && !props.isReadOnly) {
|
|
325
|
+
if (props.appearance === 'quiet') {
|
|
326
|
+
return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
|
|
327
|
+
} else {
|
|
328
|
+
return designSystem.designTokens.backgroundColorForInputWhenHovered;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
return null;
|
|
332
|
+
};
|
|
317
333
|
const controlStyles = props => (base, state) => {
|
|
318
334
|
var _context;
|
|
319
335
|
return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
|
|
320
|
-
fontSize: designSystem.designTokens.fontSize30,
|
|
336
|
+
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
|
|
321
337
|
backgroundColor: getInputBackgroundColor(props),
|
|
322
338
|
borderColor: getInputBorderColor(props, state),
|
|
323
339
|
borderWidth: (() => {
|
|
@@ -327,7 +343,7 @@ const controlStyles = props => (base, state) => {
|
|
|
327
343
|
return designSystem.designTokens.borderWidth1;
|
|
328
344
|
})(),
|
|
329
345
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
330
|
-
minHeight: designSystem.designTokens.heightForInput,
|
|
346
|
+
minHeight: props.isCondensed ? designSystem.designTokens.heightForInputAsSmall : designSystem.designTokens.heightForInput,
|
|
331
347
|
cursor: (() => {
|
|
332
348
|
if (props.isDisabled) return 'not-allowed';
|
|
333
349
|
if (props.isReadOnly) return 'default';
|
|
@@ -348,16 +364,7 @@ const controlStyles = props => (base, state) => {
|
|
|
348
364
|
},
|
|
349
365
|
'&:hover': {
|
|
350
366
|
borderColor: getHoverInputBorderColor(props),
|
|
351
|
-
backgroundColor: (
|
|
352
|
-
if (!props.isDisabled && !props.isReadOnly) {
|
|
353
|
-
if (props.appearance === 'quiet') {
|
|
354
|
-
return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
|
|
355
|
-
} else {
|
|
356
|
-
return designSystem.designTokens.backgroundColorForInputWhenHovered;
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
return null;
|
|
360
|
-
})()
|
|
367
|
+
backgroundColor: getHoverInputBackgroundColor(props)
|
|
361
368
|
},
|
|
362
369
|
pointerEvents: 'auto',
|
|
363
370
|
color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
@@ -417,12 +424,13 @@ const menuListStyles = () => base => {
|
|
|
417
424
|
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
418
425
|
});
|
|
419
426
|
};
|
|
420
|
-
const optionStyles =
|
|
427
|
+
const optionStyles = props => (base, state) => {
|
|
421
428
|
var _context2, _context3, _context4;
|
|
422
429
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
423
430
|
transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context2, designSystem.designTokens.transitionStandard),
|
|
424
431
|
padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
|
|
425
432
|
lineHeight: designSystem.designTokens.lineHeight40,
|
|
433
|
+
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
|
|
426
434
|
cursor: state.isDisabled ? 'not-allowed' : 'pointer',
|
|
427
435
|
color: (() => {
|
|
428
436
|
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
@@ -530,27 +538,30 @@ const indicatorsContainerStyles = () => () => ({
|
|
|
530
538
|
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
531
539
|
zIndex: props.menuPortalZIndex
|
|
532
540
|
});
|
|
533
|
-
const multiValueStyles =
|
|
541
|
+
const multiValueStyles = props => base => {
|
|
542
|
+
var _context6, _context7;
|
|
534
543
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
535
544
|
display: 'flex',
|
|
536
545
|
alignItems: 'center',
|
|
537
|
-
height: '32px',
|
|
538
|
-
backgroundColor:
|
|
539
|
-
padding:
|
|
540
|
-
border: "1px solid ".concat(designSystem.designTokens.colorNeutral85)
|
|
546
|
+
height: props.isCondensed ? 'inherit' : '32px',
|
|
547
|
+
backgroundColor: getMultiValueBackgroundColor(props),
|
|
548
|
+
padding: props.isCondensed ? _concatInstanceProperty__default["default"](_context6 = _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.spacing20, " 0 calc(")).call(_context7, designSystem.designTokens.spacing05, " + ")).call(_context6, designSystem.designTokens.spacing10, ")") : designSystem.designTokens.spacing20,
|
|
549
|
+
border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
|
|
550
|
+
borderRadius: designSystem.designTokens.borderRadius20
|
|
541
551
|
});
|
|
542
552
|
};
|
|
543
553
|
const multiValueLabelStyles = props => base => {
|
|
544
|
-
var
|
|
554
|
+
var _context8, _context9;
|
|
545
555
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
546
|
-
fontSize: designSystem.designTokens.fontSize30,
|
|
556
|
+
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
|
|
557
|
+
lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
|
|
547
558
|
color: (() => {
|
|
548
559
|
if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
549
560
|
if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
550
561
|
return base.color;
|
|
551
562
|
})(),
|
|
552
|
-
padding: _concatInstanceProperty__default["default"](
|
|
553
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
563
|
+
padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
|
|
564
|
+
borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
|
|
554
565
|
border: 'none',
|
|
555
566
|
borderWidth: '1px 0 1px 1px',
|
|
556
567
|
'&:last-child': {
|
|
@@ -560,11 +571,11 @@ const multiValueLabelStyles = props => base => {
|
|
|
560
571
|
});
|
|
561
572
|
};
|
|
562
573
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
563
|
-
var
|
|
574
|
+
var _context10;
|
|
564
575
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
565
576
|
borderColor: designSystem.designTokens.colorNeutral,
|
|
566
577
|
padding: "0 ".concat(designSystem.designTokens.spacing10),
|
|
567
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
578
|
+
borderRadius: _concatInstanceProperty__default["default"](_context10 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context10, designSystem.designTokens.borderRadius2, " 0"),
|
|
568
579
|
borderStyle: 'none',
|
|
569
580
|
borderWidth: '0',
|
|
570
581
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
@@ -590,11 +601,11 @@ function createSelectStyles(props) {
|
|
|
590
601
|
clearIndicator: clearIndicatorStyles(),
|
|
591
602
|
menuList: menuListStyles(),
|
|
592
603
|
menuPortal: menuPortalStyles(props),
|
|
593
|
-
multiValue: multiValueStyles(),
|
|
604
|
+
multiValue: multiValueStyles(props),
|
|
594
605
|
multiValueLabel: multiValueLabelStyles(props),
|
|
595
606
|
multiValueRemove: multiValueRemoveStyles(props),
|
|
596
607
|
indicatorsContainer: indicatorsContainerStyles(),
|
|
597
|
-
option: optionStyles(),
|
|
608
|
+
option: optionStyles(props),
|
|
598
609
|
placeholder: placeholderStyles(props),
|
|
599
610
|
valueContainer: valueContainerStyles(props),
|
|
600
611
|
singleValue: singleValueStyles(props),
|
|
@@ -613,7 +624,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
613
624
|
};
|
|
614
625
|
|
|
615
626
|
// NOTE: This string will be replaced on build time with the package version.
|
|
616
|
-
var version = "19.
|
|
627
|
+
var version = "19.1.0";
|
|
617
628
|
|
|
618
629
|
exports.ClearIndicator = ClearIndicator$1;
|
|
619
630
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|
|
@@ -59,7 +59,8 @@ const ClearIndicator = props => {
|
|
|
59
59
|
_props$innerProps = props.innerProps,
|
|
60
60
|
ref = _props$innerProps.ref,
|
|
61
61
|
onMouseDown = _props$innerProps.onMouseDown,
|
|
62
|
-
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded)
|
|
62
|
+
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
|
|
63
|
+
selectProps = props.selectProps;
|
|
63
64
|
return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
64
65
|
ref: ref,
|
|
65
66
|
css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + ("" ), "" ),
|
|
@@ -73,7 +74,7 @@ const ClearIndicator = props => {
|
|
|
73
74
|
,
|
|
74
75
|
onClick: onMouseDown,
|
|
75
76
|
children: jsxRuntime.jsx(icons.CloseIcon, {
|
|
76
|
-
size:
|
|
77
|
+
size: selectProps.isCondensed ? 'small' : 'medium'
|
|
77
78
|
})
|
|
78
79
|
}));
|
|
79
80
|
};
|
|
@@ -94,7 +95,7 @@ const TagRemove = props => {
|
|
|
94
95
|
}, innerProps), {}, {
|
|
95
96
|
children: jsxRuntime.jsx(icons.CloseBoldIcon, {
|
|
96
97
|
color: isDisabled ? 'neutral60' : 'solid',
|
|
97
|
-
size:
|
|
98
|
+
size: props.selectProps.isCondensed ? 'small' : 'medium'
|
|
98
99
|
})
|
|
99
100
|
}));
|
|
100
101
|
};
|
|
@@ -139,7 +140,7 @@ const WrapperWithIcon = props => {
|
|
|
139
140
|
}
|
|
140
141
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
141
142
|
children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
|
|
142
|
-
size: 'big'
|
|
143
|
+
size: props.selectProps.isCondensed ? 'medium' : 'big'
|
|
143
144
|
}), jsxRuntime.jsx("span", {
|
|
144
145
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
145
146
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
@@ -254,7 +255,7 @@ var messages = reactIntl.defineMessages({
|
|
|
254
255
|
});
|
|
255
256
|
|
|
256
257
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
257
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
258
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
258
259
|
const getHorizontalConstraintValue = value => {
|
|
259
260
|
switch (value) {
|
|
260
261
|
case 'auto':
|
|
@@ -275,6 +276,11 @@ const getInputBackgroundColor = props => {
|
|
|
275
276
|
}
|
|
276
277
|
return designSystem.designTokens.backgroundColorForInput;
|
|
277
278
|
};
|
|
279
|
+
const getMultiValueBackgroundColor = props => {
|
|
280
|
+
if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
|
|
281
|
+
if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
|
|
282
|
+
return designSystem.designTokens.colorPrimary95;
|
|
283
|
+
};
|
|
278
284
|
const getInputBorderColor = (props, state) => {
|
|
279
285
|
if (props.appearance === 'quiet') {
|
|
280
286
|
return designSystem.designTokens.borderColorForInputAsQuiet;
|
|
@@ -314,10 +320,20 @@ const getHoverInputBorderColor = props => {
|
|
|
314
320
|
}
|
|
315
321
|
return designSystem.designTokens.borderColorForInputWhenHovered;
|
|
316
322
|
};
|
|
323
|
+
const getHoverInputBackgroundColor = props => {
|
|
324
|
+
if (!props.isDisabled && !props.isReadOnly) {
|
|
325
|
+
if (props.appearance === 'quiet') {
|
|
326
|
+
return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
|
|
327
|
+
} else {
|
|
328
|
+
return designSystem.designTokens.backgroundColorForInputWhenHovered;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
return null;
|
|
332
|
+
};
|
|
317
333
|
const controlStyles = props => (base, state) => {
|
|
318
334
|
var _context;
|
|
319
335
|
return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
|
|
320
|
-
fontSize: designSystem.designTokens.fontSize30,
|
|
336
|
+
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
|
|
321
337
|
backgroundColor: getInputBackgroundColor(props),
|
|
322
338
|
borderColor: getInputBorderColor(props, state),
|
|
323
339
|
borderWidth: (() => {
|
|
@@ -327,7 +343,7 @@ const controlStyles = props => (base, state) => {
|
|
|
327
343
|
return designSystem.designTokens.borderWidth1;
|
|
328
344
|
})(),
|
|
329
345
|
borderRadius: designSystem.designTokens.borderRadiusForInput,
|
|
330
|
-
minHeight: designSystem.designTokens.heightForInput,
|
|
346
|
+
minHeight: props.isCondensed ? designSystem.designTokens.heightForInputAsSmall : designSystem.designTokens.heightForInput,
|
|
331
347
|
cursor: (() => {
|
|
332
348
|
if (props.isDisabled) return 'not-allowed';
|
|
333
349
|
if (props.isReadOnly) return 'default';
|
|
@@ -348,16 +364,7 @@ const controlStyles = props => (base, state) => {
|
|
|
348
364
|
},
|
|
349
365
|
'&:hover': {
|
|
350
366
|
borderColor: getHoverInputBorderColor(props),
|
|
351
|
-
backgroundColor: (
|
|
352
|
-
if (!props.isDisabled && !props.isReadOnly) {
|
|
353
|
-
if (props.appearance === 'quiet') {
|
|
354
|
-
return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
|
|
355
|
-
} else {
|
|
356
|
-
return designSystem.designTokens.backgroundColorForInputWhenHovered;
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
return null;
|
|
360
|
-
})()
|
|
367
|
+
backgroundColor: getHoverInputBackgroundColor(props)
|
|
361
368
|
},
|
|
362
369
|
pointerEvents: 'auto',
|
|
363
370
|
color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
@@ -417,12 +424,13 @@ const menuListStyles = () => base => {
|
|
|
417
424
|
backgroundColor: designSystem.designTokens.backgroundColorForInput
|
|
418
425
|
});
|
|
419
426
|
};
|
|
420
|
-
const optionStyles =
|
|
427
|
+
const optionStyles = props => (base, state) => {
|
|
421
428
|
var _context2, _context3, _context4;
|
|
422
429
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
423
430
|
transition: _concatInstanceProperty__default["default"](_context2 = _concatInstanceProperty__default["default"](_context3 = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n background-color ")).call(_context3, designSystem.designTokens.transitionStandard, ",\n color ")).call(_context2, designSystem.designTokens.transitionStandard),
|
|
424
431
|
padding: _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing20, " ")).call(_context4, designSystem.designTokens.spacing30),
|
|
425
432
|
lineHeight: designSystem.designTokens.lineHeight40,
|
|
433
|
+
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
|
|
426
434
|
cursor: state.isDisabled ? 'not-allowed' : 'pointer',
|
|
427
435
|
color: (() => {
|
|
428
436
|
if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
|
|
@@ -530,27 +538,30 @@ const indicatorsContainerStyles = () => () => ({
|
|
|
530
538
|
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
531
539
|
zIndex: props.menuPortalZIndex
|
|
532
540
|
});
|
|
533
|
-
const multiValueStyles =
|
|
541
|
+
const multiValueStyles = props => base => {
|
|
542
|
+
var _context6, _context7;
|
|
534
543
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
535
544
|
display: 'flex',
|
|
536
545
|
alignItems: 'center',
|
|
537
|
-
height: '32px',
|
|
538
|
-
backgroundColor:
|
|
539
|
-
padding:
|
|
540
|
-
border: "1px solid ".concat(designSystem.designTokens.colorNeutral85)
|
|
546
|
+
height: props.isCondensed ? 'inherit' : '32px',
|
|
547
|
+
backgroundColor: getMultiValueBackgroundColor(props),
|
|
548
|
+
padding: props.isCondensed ? _concatInstanceProperty__default["default"](_context6 = _concatInstanceProperty__default["default"](_context7 = "0 ".concat(designSystem.designTokens.spacing20, " 0 calc(")).call(_context7, designSystem.designTokens.spacing05, " + ")).call(_context6, designSystem.designTokens.spacing10, ")") : designSystem.designTokens.spacing20,
|
|
549
|
+
border: "1px solid ".concat(designSystem.designTokens.colorNeutral85),
|
|
550
|
+
borderRadius: designSystem.designTokens.borderRadius20
|
|
541
551
|
});
|
|
542
552
|
};
|
|
543
553
|
const multiValueLabelStyles = props => base => {
|
|
544
|
-
var
|
|
554
|
+
var _context8, _context9;
|
|
545
555
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
546
|
-
fontSize: designSystem.designTokens.fontSize30,
|
|
556
|
+
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
|
|
557
|
+
lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
|
|
547
558
|
color: (() => {
|
|
548
559
|
if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
|
|
549
560
|
if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
|
|
550
561
|
return base.color;
|
|
551
562
|
})(),
|
|
552
|
-
padding: _concatInstanceProperty__default["default"](
|
|
553
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
563
|
+
padding: _concatInstanceProperty__default["default"](_context8 = "".concat(props.isCondensed ? '1px' : designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20),
|
|
564
|
+
borderRadius: _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.borderRadius2, " 0 0 ")).call(_context9, designSystem.designTokens.borderRadius2),
|
|
554
565
|
border: 'none',
|
|
555
566
|
borderWidth: '1px 0 1px 1px',
|
|
556
567
|
'&:last-child': {
|
|
@@ -560,11 +571,11 @@ const multiValueLabelStyles = props => base => {
|
|
|
560
571
|
});
|
|
561
572
|
};
|
|
562
573
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
563
|
-
var
|
|
574
|
+
var _context10;
|
|
564
575
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
565
576
|
borderColor: designSystem.designTokens.colorNeutral,
|
|
566
577
|
padding: "0 ".concat(designSystem.designTokens.spacing10),
|
|
567
|
-
borderRadius: _concatInstanceProperty__default["default"](
|
|
578
|
+
borderRadius: _concatInstanceProperty__default["default"](_context10 = "0 ".concat(designSystem.designTokens.borderRadius2, " ")).call(_context10, designSystem.designTokens.borderRadius2, " 0"),
|
|
568
579
|
borderStyle: 'none',
|
|
569
580
|
borderWidth: '0',
|
|
570
581
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
@@ -590,11 +601,11 @@ function createSelectStyles(props) {
|
|
|
590
601
|
clearIndicator: clearIndicatorStyles(),
|
|
591
602
|
menuList: menuListStyles(),
|
|
592
603
|
menuPortal: menuPortalStyles(props),
|
|
593
|
-
multiValue: multiValueStyles(),
|
|
604
|
+
multiValue: multiValueStyles(props),
|
|
594
605
|
multiValueLabel: multiValueLabelStyles(props),
|
|
595
606
|
multiValueRemove: multiValueRemoveStyles(props),
|
|
596
607
|
indicatorsContainer: indicatorsContainerStyles(),
|
|
597
|
-
option: optionStyles(),
|
|
608
|
+
option: optionStyles(props),
|
|
598
609
|
placeholder: placeholderStyles(props),
|
|
599
610
|
valueContainer: valueContainerStyles(props),
|
|
600
611
|
singleValue: singleValueStyles(props),
|
|
@@ -610,7 +621,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
610
621
|
};
|
|
611
622
|
|
|
612
623
|
// NOTE: This string will be replaced on build time with the package version.
|
|
613
|
-
var version = "19.
|
|
624
|
+
var version = "19.1.0";
|
|
614
625
|
|
|
615
626
|
exports.ClearIndicator = ClearIndicator$1;
|
|
616
627
|
exports.CustomSelectInputOption = CustomSelectInputOption;
|
|
@@ -39,10 +39,11 @@ const ClearIndicator = props => {
|
|
|
39
39
|
_props$innerProps = props.innerProps,
|
|
40
40
|
ref = _props$innerProps.ref,
|
|
41
41
|
onMouseDown = _props$innerProps.onMouseDown,
|
|
42
|
-
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded)
|
|
42
|
+
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
|
|
43
|
+
selectProps = props.selectProps;
|
|
43
44
|
return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
|
|
44
45
|
ref: ref,
|
|
45
|
-
css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.colorNeutral40, ";:hover svg *{fill:", designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
46
|
+
css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.colorNeutral40, ";:hover svg *{fill:", designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIExlZ2FjeVJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB0eXBlIHsgQ2xlYXJJbmRpY2F0b3JQcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyB1c2VJbnRsIH0gZnJvbSAncmVhY3QtaW50bCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IENsb3NlSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuL21lc3NhZ2VzJztcbmltcG9ydCB7IFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG50eXBlIFRJbm5lclByb3BzID0ge1xuICByZWY6IExlZ2FjeVJlZjxIVE1MQnV0dG9uRWxlbWVudD47XG59ICYgSlNYLkludHJpbnNpY0VsZW1lbnRzWydidXR0b24nXTtcblxuZXhwb3J0IHR5cGUgVENsZWFySW5kaWNhdG9yUHJvcHMgPSB7XG4gIGlubmVyUHJvcHM6IFRJbm5lclByb3BzO1xufSAmIFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzPENsZWFySW5kaWNhdG9yUHJvcHM+O1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wczogVENsZWFySW5kaWNhdG9yUHJvcHMpID0+IHtcbiAgY29uc3QgaW50bCA9IHVzZUludGwoKTtcbiAgY29uc3Qge1xuICAgIGdldFN0eWxlcyxcbiAgICBpbm5lclByb3BzOiB7IHJlZiwgb25Nb3VzZURvd24sIC4uLnJlc3RJbm5lclByb3BzIH0sXG4gICAgc2VsZWN0UHJvcHMsXG4gIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB7Li4ucmVzdElubmVyUHJvcHN9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBib3JkZXI6IG5vbmU7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWw0MH07XG4gICAgICAgIDpob3ZlciBzdmcgKiB7XG4gICAgICAgICAgZmlsbDogJHtkZXNpZ25Ub2tlbnMuY29sb3JFcnJvcn07XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBzdHlsZT17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKSBhcyBDU1NQcm9wZXJ0aWVzfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIC8vIG92ZXJyaWRpbmcgdGhlIGRlZmF1bHQgYGFyaWEtaGlkZGVuYCBwcm9wIHZhbHVlIHRvIG1ha2UgdGhlIGNvbXBvbmVudCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkIC0gaHR0cHM6Ly9naXRodWIuY29tL0plZFdhdHNvbi9yZWFjdC1zZWxlY3QvaXNzdWVzLzQ3OTNcbiAgICAgIGFyaWEtaGlkZGVuPXtmYWxzZX1cbiAgICAgIC8vIG9ubHkgb25Nb3VzZURvd24gYW5kIG9uVG91Y2hFbmQgZXZlbnQgaGFuZGxlcnMgYXJlIHBhc3NlZCBieSBgcmVhY3Qtc2VsZWN0YCB0byB0aGUgY29tcG9uZW50IGJ5IGRlZmF1bHQsIHdoaWNoIG1ha2VzIGl0IG5vdCBhY2Nlc3NpYmxlIGJ5IGtleWJvYXJkXG4gICAgICBvbkNsaWNrPXtvbk1vdXNlRG93bn1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIHNpemU9e3NlbGVjdFByb3BzLmlzQ29uZGVuc2VkID8gJ3NtYWxsJyA6ICdtZWRpdW0nfSAvPlxuICAgIDwvYnV0dG9uPlxuICApO1xufTtcblxuQ2xlYXJJbmRpY2F0b3IuZGlzcGxheU5hbWUgPSAnQ2xlYXJJbmRpY2F0b3InO1xuXG5leHBvcnQgZGVmYXVsdCBDbGVhckluZGljYXRvcjtcbiJdfQ== */"),
|
|
46
47
|
style: getStyles('clearIndicator', props),
|
|
47
48
|
title: intl.formatMessage(messages$1.clearButtonLabel),
|
|
48
49
|
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
|
|
@@ -53,7 +54,7 @@ const ClearIndicator = props => {
|
|
|
53
54
|
,
|
|
54
55
|
onClick: onMouseDown,
|
|
55
56
|
children: jsx(CloseIcon, {
|
|
56
|
-
size:
|
|
57
|
+
size: selectProps.isCondensed ? 'small' : 'medium'
|
|
57
58
|
})
|
|
58
59
|
}));
|
|
59
60
|
};
|
|
@@ -74,7 +75,7 @@ const TagRemove = props => {
|
|
|
74
75
|
}, innerProps), {}, {
|
|
75
76
|
children: jsx(CloseBoldIcon, {
|
|
76
77
|
color: isDisabled ? 'neutral60' : 'solid',
|
|
77
|
-
size:
|
|
78
|
+
size: props.selectProps.isCondensed ? 'small' : 'medium'
|
|
78
79
|
})
|
|
79
80
|
}));
|
|
80
81
|
};
|
|
@@ -119,12 +120,12 @@ const WrapperWithIcon = props => {
|
|
|
119
120
|
}
|
|
120
121
|
return jsxs(Fragment, {
|
|
121
122
|
children: [props.selectProps.iconLeft && /*#__PURE__*/cloneElement(props.selectProps.iconLeft, {
|
|
122
|
-
size: 'big'
|
|
123
|
+
size: props.selectProps.isCondensed ? 'medium' : 'big'
|
|
123
124
|
}), jsx("span", {
|
|
124
125
|
// react-select uses absolute positioning for the SingleValue/Placeholder
|
|
125
126
|
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
|
|
126
127
|
// spacingsXs is the margin between the icon and value
|
|
127
|
-
css: /*#__PURE__*/css("margin-left:", designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
128
|
+
css: /*#__PURE__*/css("margin-left:", designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHtcbiAgY29tcG9uZW50cyBhcyBkZWZhdWx0Q29tcG9uZW50cyxcbiAgdHlwZSBTaW5nbGVWYWx1ZVByb3BzLFxuICB0eXBlIFBsYWNlaG9sZGVyUHJvcHMsXG59IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgeyBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IHR5cGUgVFNpbmdsZVZhbHVlV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdzaW5nbGVWYWx1ZSc7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8U2luZ2xlVmFsdWVQcm9wcz47XG5leHBvcnQgdHlwZSBUUGxhY2Vob2xkZXJXcmFwcGVyV2l0aEljb25Qcm9wcyA9IHtcbiAgdHlwZTogJ3BsYWNlaG9sZGVyJztcbn0gJiBUU2VsZWN0SW5wdXRDdXN0b21Db21wb25lbnRQcm9wczxQbGFjZWhvbGRlclByb3BzPjtcbmV4cG9ydCB0eXBlIFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+ID1cbiAgVHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZSdcbiAgICA/IFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHNcbiAgICA6IG5ldmVyO1xuZXhwb3J0IHR5cGUgVERlZmF1bHRDb21wb25lbnQ8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9IChcbiAgcHJvcHM6IFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBTaW5nbGVWYWx1ZVByb3BzXG4gICAgOiBUeXBlIGV4dGVuZHMgJ3BsYWNlaG9sZGVyJ1xuICAgID8gUGxhY2Vob2xkZXJQcm9wc1xuICAgIDogbmV2ZXJcbikgPT4gSlNYLkVsZW1lbnQ7XG5cbmNvbnN0IGdldERlZmF1bHRDb21wb25lbnQgPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgdHlwZTogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+Wyd0eXBlJ11cbik6IFREZWZhdWx0Q29tcG9uZW50PFR5cGU+IHwgbnVsbCA9PiB7XG4gIGlmICh0eXBlID09PSAnc2luZ2xlVmFsdWUnKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5TaW5nbGVWYWx1ZSBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgaWYgKHR5cGUgPT09ICdwbGFjZWhvbGRlcicpXG4gICAgcmV0dXJuIGRlZmF1bHRDb21wb25lbnRzLlBsYWNlaG9sZGVyIGFzIFREZWZhdWx0Q29tcG9uZW50PFR5cGU+O1xuICByZXR1cm4gbnVsbDtcbn07XG5cbmNvbnN0IFdyYXBwZXJXaXRoSWNvbiA9IDxUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJyB8ICdwbGFjZWhvbGRlcic+KFxuICBwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPFR5cGU+XG4pID0+IHtcbiAgY29uc3QgRGVmYXVsdENvbXBvbmVudCA9IGdldERlZmF1bHRDb21wb25lbnQ8VHlwZT4ocHJvcHMudHlwZSk7XG5cbiAgaWYgKCFEZWZhdWx0Q29tcG9uZW50KSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7cHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQgJiZcbiAgICAgICAgY2xvbmVFbGVtZW50KHByb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0LCB7XG4gICAgICAgICAgc2l6ZTogcHJvcHMuc2VsZWN0UHJvcHMuaXNDb25kZW5zZWQgPyAnbWVkaXVtJyA6ICdiaWcnLFxuICAgICAgICB9KX1cbiAgICAgIDxzcGFuXG4gICAgICAgIC8vIHJlYWN0LXNlbGVjdCB1c2VzIGFic29sdXRlIHBvc2l0aW9uaW5nIGZvciB0aGUgU2luZ2xlVmFsdWUvUGxhY2Vob2xkZXJcbiAgICAgICAgLy8gdGhlIGljb24gaGFzIGEgZml4ZWQgc2l6ZSBvZiAyNHB4ICg9PSBTcGFjaW5nc1hsKSwgdGhlcmVmb3JlIHdlIGNhbiB1c2UgYSBmaXhlZCBtYXJnaW5cbiAgICAgICAgLy8gc3BhY2luZ3NYcyBpcyB0aGUgbWFyZ2luIGJldHdlZW4gdGhlIGljb24gYW5kIHZhbHVlXG4gICAgICAgIGNzcz17Y3NzYFxuICAgICAgICAgIG1hcmdpbi1sZWZ0OiAke2Rlc2lnblRva2Vucy5zcGFjaW5nMjB9O1xuICAgICAgICBgfVxuICAgICAgPlxuICAgICAgICB7LyogQHRzLWlnbm9yZSAqL31cbiAgICAgICAgPERlZmF1bHRDb21wb25lbnQgey4uLnByb3BzfSAvPlxuICAgICAgPC9zcGFuPlxuICAgIDwvPlxuICApO1xufTtcblxuV3JhcHBlcldpdGhJY29uLmRpc3BsYXlOYW1lID0gJ1dyYXBwZXJXaXRoSWNvbic7XG5cbmV4cG9ydCBkZWZhdWx0IFdyYXBwZXJXaXRoSWNvbjtcblxuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdzaW5nbGVWYWx1ZSc+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwnc2luZ2xlVmFsdWUnPiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+XG4gICksXG4gIFBsYWNlaG9sZGVyOiAocHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczwncGxhY2Vob2xkZXInPikgPT4gKFxuICAgIDxXcmFwcGVyV2l0aEljb248J3BsYWNlaG9sZGVyJz4gey4uLnByb3BzfSB0eXBlPVwicGxhY2Vob2xkZXJcIiAvPlxuICApLFxufTtcblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
|
|
128
129
|
children: jsx(DefaultComponent, _objectSpread$2({}, props))
|
|
129
130
|
})]
|
|
130
131
|
});
|
|
@@ -234,7 +235,7 @@ var messages = defineMessages({
|
|
|
234
235
|
});
|
|
235
236
|
|
|
236
237
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
237
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var
|
|
238
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
238
239
|
const getHorizontalConstraintValue = value => {
|
|
239
240
|
switch (value) {
|
|
240
241
|
case 'auto':
|
|
@@ -255,6 +256,11 @@ const getInputBackgroundColor = props => {
|
|
|
255
256
|
}
|
|
256
257
|
return designTokens.backgroundColorForInput;
|
|
257
258
|
};
|
|
259
|
+
const getMultiValueBackgroundColor = props => {
|
|
260
|
+
if (props.isDisabled) return designTokens.backgroundColorForInputWhenDisabled;
|
|
261
|
+
if (props.isReadOnly) return designTokens.backgroundColorForInputWhenReadonly;
|
|
262
|
+
return designTokens.colorPrimary95;
|
|
263
|
+
};
|
|
258
264
|
const getInputBorderColor = (props, state) => {
|
|
259
265
|
if (props.appearance === 'quiet') {
|
|
260
266
|
return designTokens.borderColorForInputAsQuiet;
|
|
@@ -294,10 +300,20 @@ const getHoverInputBorderColor = props => {
|
|
|
294
300
|
}
|
|
295
301
|
return designTokens.borderColorForInputWhenHovered;
|
|
296
302
|
};
|
|
303
|
+
const getHoverInputBackgroundColor = props => {
|
|
304
|
+
if (!props.isDisabled && !props.isReadOnly) {
|
|
305
|
+
if (props.appearance === 'quiet') {
|
|
306
|
+
return designTokens.backgroundColorForInputAsQuietWhenHovered;
|
|
307
|
+
} else {
|
|
308
|
+
return designTokens.backgroundColorForInputWhenHovered;
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
return null;
|
|
312
|
+
};
|
|
297
313
|
const controlStyles = props => (base, state) => {
|
|
298
314
|
var _context;
|
|
299
315
|
return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
|
|
300
|
-
fontSize: designTokens.fontSize30,
|
|
316
|
+
fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
|
|
301
317
|
backgroundColor: getInputBackgroundColor(props),
|
|
302
318
|
borderColor: getInputBorderColor(props, state),
|
|
303
319
|
borderWidth: (() => {
|
|
@@ -307,7 +323,7 @@ const controlStyles = props => (base, state) => {
|
|
|
307
323
|
return designTokens.borderWidth1;
|
|
308
324
|
})(),
|
|
309
325
|
borderRadius: designTokens.borderRadiusForInput,
|
|
310
|
-
minHeight: designTokens.heightForInput,
|
|
326
|
+
minHeight: props.isCondensed ? designTokens.heightForInputAsSmall : designTokens.heightForInput,
|
|
311
327
|
cursor: (() => {
|
|
312
328
|
if (props.isDisabled) return 'not-allowed';
|
|
313
329
|
if (props.isReadOnly) return 'default';
|
|
@@ -328,16 +344,7 @@ const controlStyles = props => (base, state) => {
|
|
|
328
344
|
},
|
|
329
345
|
'&:hover': {
|
|
330
346
|
borderColor: getHoverInputBorderColor(props),
|
|
331
|
-
backgroundColor: (
|
|
332
|
-
if (!props.isDisabled && !props.isReadOnly) {
|
|
333
|
-
if (props.appearance === 'quiet') {
|
|
334
|
-
return designTokens.backgroundColorForInputAsQuietWhenHovered;
|
|
335
|
-
} else {
|
|
336
|
-
return designTokens.backgroundColorForInputWhenHovered;
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
return null;
|
|
340
|
-
})()
|
|
347
|
+
backgroundColor: getHoverInputBackgroundColor(props)
|
|
341
348
|
},
|
|
342
349
|
pointerEvents: 'auto',
|
|
343
350
|
color: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
|
|
@@ -397,12 +404,13 @@ const menuListStyles = () => base => {
|
|
|
397
404
|
backgroundColor: designTokens.backgroundColorForInput
|
|
398
405
|
});
|
|
399
406
|
};
|
|
400
|
-
const optionStyles =
|
|
407
|
+
const optionStyles = props => (base, state) => {
|
|
401
408
|
var _context2, _context3, _context4;
|
|
402
409
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
403
410
|
transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "border-color ".concat(designTokens.transitionStandard, ",\n background-color ")).call(_context3, designTokens.transitionStandard, ",\n color ")).call(_context2, designTokens.transitionStandard),
|
|
404
411
|
padding: _concatInstanceProperty(_context4 = "".concat(designTokens.spacing20, " ")).call(_context4, designTokens.spacing30),
|
|
405
412
|
lineHeight: designTokens.lineHeight40,
|
|
413
|
+
fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
|
|
406
414
|
cursor: state.isDisabled ? 'not-allowed' : 'pointer',
|
|
407
415
|
color: (() => {
|
|
408
416
|
if (!state.isDisabled) return designTokens.fontColorForInput;
|
|
@@ -510,27 +518,30 @@ const indicatorsContainerStyles = () => () => ({
|
|
|
510
518
|
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
|
|
511
519
|
zIndex: props.menuPortalZIndex
|
|
512
520
|
});
|
|
513
|
-
const multiValueStyles =
|
|
521
|
+
const multiValueStyles = props => base => {
|
|
522
|
+
var _context6, _context7;
|
|
514
523
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
515
524
|
display: 'flex',
|
|
516
525
|
alignItems: 'center',
|
|
517
|
-
height: '32px',
|
|
518
|
-
backgroundColor:
|
|
519
|
-
padding:
|
|
520
|
-
border: "1px solid ".concat(designTokens.colorNeutral85)
|
|
526
|
+
height: props.isCondensed ? 'inherit' : '32px',
|
|
527
|
+
backgroundColor: getMultiValueBackgroundColor(props),
|
|
528
|
+
padding: props.isCondensed ? _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "0 ".concat(designTokens.spacing20, " 0 calc(")).call(_context7, designTokens.spacing05, " + ")).call(_context6, designTokens.spacing10, ")") : designTokens.spacing20,
|
|
529
|
+
border: "1px solid ".concat(designTokens.colorNeutral85),
|
|
530
|
+
borderRadius: designTokens.borderRadius20
|
|
521
531
|
});
|
|
522
532
|
};
|
|
523
533
|
const multiValueLabelStyles = props => base => {
|
|
524
|
-
var
|
|
534
|
+
var _context8, _context9;
|
|
525
535
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
526
|
-
fontSize: designTokens.fontSize30,
|
|
536
|
+
fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
|
|
537
|
+
lineHeight: props.isCondensed ? designTokens.lineHeight20 : designTokens.lineHeight40,
|
|
527
538
|
color: (() => {
|
|
528
539
|
if (props.isDisabled) return designTokens.fontColorForInputWhenDisabled;
|
|
529
540
|
if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
|
|
530
541
|
return base.color;
|
|
531
542
|
})(),
|
|
532
|
-
padding: _concatInstanceProperty(
|
|
533
|
-
borderRadius: _concatInstanceProperty(
|
|
543
|
+
padding: _concatInstanceProperty(_context8 = "".concat(props.isCondensed ? '1px' : designTokens.spacing10, " ")).call(_context8, designTokens.spacing20),
|
|
544
|
+
borderRadius: _concatInstanceProperty(_context9 = "".concat(designTokens.borderRadius2, " 0 0 ")).call(_context9, designTokens.borderRadius2),
|
|
534
545
|
border: 'none',
|
|
535
546
|
borderWidth: '1px 0 1px 1px',
|
|
536
547
|
'&:last-child': {
|
|
@@ -540,11 +551,11 @@ const multiValueLabelStyles = props => base => {
|
|
|
540
551
|
});
|
|
541
552
|
};
|
|
542
553
|
const multiValueRemoveStyles = props => (base, state) => {
|
|
543
|
-
var
|
|
554
|
+
var _context10;
|
|
544
555
|
return _objectSpread(_objectSpread({}, base), {}, {
|
|
545
556
|
borderColor: designTokens.colorNeutral,
|
|
546
557
|
padding: "0 ".concat(designTokens.spacing10),
|
|
547
|
-
borderRadius: _concatInstanceProperty(
|
|
558
|
+
borderRadius: _concatInstanceProperty(_context10 = "0 ".concat(designTokens.borderRadius2, " ")).call(_context10, designTokens.borderRadius2, " 0"),
|
|
548
559
|
borderStyle: 'none',
|
|
549
560
|
borderWidth: '0',
|
|
550
561
|
pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
|
|
@@ -570,11 +581,11 @@ function createSelectStyles(props) {
|
|
|
570
581
|
clearIndicator: clearIndicatorStyles(),
|
|
571
582
|
menuList: menuListStyles(),
|
|
572
583
|
menuPortal: menuPortalStyles(props),
|
|
573
|
-
multiValue: multiValueStyles(),
|
|
584
|
+
multiValue: multiValueStyles(props),
|
|
574
585
|
multiValueLabel: multiValueLabelStyles(props),
|
|
575
586
|
multiValueRemove: multiValueRemoveStyles(props),
|
|
576
587
|
indicatorsContainer: indicatorsContainerStyles(),
|
|
577
|
-
option: optionStyles(),
|
|
588
|
+
option: optionStyles(props),
|
|
578
589
|
placeholder: placeholderStyles(props),
|
|
579
590
|
valueContainer: valueContainerStyles(props),
|
|
580
591
|
singleValue: singleValueStyles(props),
|
|
@@ -593,6 +604,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
|
|
|
593
604
|
};
|
|
594
605
|
|
|
595
606
|
// NOTE: This string will be replaced on build time with the package version.
|
|
596
|
-
var version = "19.
|
|
607
|
+
var version = "19.1.0";
|
|
597
608
|
|
|
598
609
|
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 };
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { LegacyRef } from 'react';
|
|
2
2
|
import type { ClearIndicatorProps } from 'react-select';
|
|
3
|
+
import { TSelectInputCustomComponentProps } from "../types.js";
|
|
3
4
|
type TInnerProps = {
|
|
4
5
|
ref: LegacyRef<HTMLButtonElement>;
|
|
5
6
|
} & JSX.IntrinsicElements['button'];
|
|
6
7
|
export type TClearIndicatorProps = {
|
|
7
8
|
innerProps: TInnerProps;
|
|
8
|
-
} & ClearIndicatorProps
|
|
9
|
+
} & TSelectInputCustomComponentProps<ClearIndicatorProps>;
|
|
9
10
|
declare const ClearIndicator: {
|
|
10
11
|
(props: TClearIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
11
12
|
displayName: string;
|
|
@@ -9,6 +9,7 @@ type TProps = {
|
|
|
9
9
|
iconLeft?: ReactNode;
|
|
10
10
|
isMulti?: boolean;
|
|
11
11
|
hasValue?: boolean;
|
|
12
|
+
isCondensed?: boolean;
|
|
12
13
|
controlShouldRenderValue?: boolean;
|
|
13
14
|
appearance?: 'default' | 'quiet';
|
|
14
15
|
minMenuWidth?: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
|
|
@@ -42,12 +43,12 @@ export default function createSelectStyles(props: TProps): {
|
|
|
42
43
|
pointerEvents: string;
|
|
43
44
|
color: string | undefined;
|
|
44
45
|
display?: string | undefined;
|
|
45
|
-
fontSize: "var(--font-size-30, 1rem)";
|
|
46
|
+
fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
|
|
46
47
|
backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-input-as-quiet, transparent)";
|
|
47
48
|
borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-as-quiet, transparent)";
|
|
48
49
|
borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-2, 2px)";
|
|
49
50
|
borderRadius: "var(--border-radius-for-input, 4px)";
|
|
50
|
-
minHeight: "var(--height-for-input, 40px)";
|
|
51
|
+
minHeight: "var(--height-for-input, 40px)" | "var(--height-for-input-as-small, 32px)";
|
|
51
52
|
cursor: string;
|
|
52
53
|
padding: "var(--padding-for-input, 0 var(--spacing-30))" | "var(--padding-for-input-as-quiet, 0 var(--spacing-20))";
|
|
53
54
|
transition: string;
|
|
@@ -143,9 +144,10 @@ export default function createSelectStyles(props: TProps): {
|
|
|
143
144
|
display: string;
|
|
144
145
|
alignItems: string;
|
|
145
146
|
height: string;
|
|
146
|
-
backgroundColor: "var(--color-
|
|
147
|
+
backgroundColor: "var(--color-primary-95, hsl(175, 90%, 95%))" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
|
|
147
148
|
padding: string;
|
|
148
149
|
border: string;
|
|
150
|
+
borderRadius: "var(--border-radius-20, 20px)";
|
|
149
151
|
fontColorForInput?: string | undefined;
|
|
150
152
|
borderColorForInput?: string | undefined;
|
|
151
153
|
color?: string | undefined;
|
|
@@ -155,7 +157,8 @@ export default function createSelectStyles(props: TProps): {
|
|
|
155
157
|
pointerEvents?: string | undefined;
|
|
156
158
|
};
|
|
157
159
|
multiValueLabel: (base: TBase) => {
|
|
158
|
-
fontSize: "var(--font-size-30, 1rem)";
|
|
160
|
+
fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
|
|
161
|
+
lineHeight: "var(--line-height-20, 1.375rem)" | "var(--line-height-40, 1.625rem)";
|
|
159
162
|
color: string | undefined;
|
|
160
163
|
padding: string;
|
|
161
164
|
borderRadius: string;
|
|
@@ -206,6 +209,7 @@ export default function createSelectStyles(props: TProps): {
|
|
|
206
209
|
transition: string;
|
|
207
210
|
padding: string;
|
|
208
211
|
lineHeight: "var(--line-height-40, 1.625rem)";
|
|
212
|
+
fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
|
|
209
213
|
cursor: string;
|
|
210
214
|
color: string | undefined;
|
|
211
215
|
backgroundColor: string | undefined;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export type { TClearIndicatorProps } from "./clear-indicator/clear-indicator.js";
|
|
2
|
-
export type {
|
|
3
|
-
export type { TWrapperWithIconProps,
|
|
2
|
+
export type { TTagRemoveProps } from "./tag-remove/tag-remove.js";
|
|
3
|
+
export type { TWrapperWithIconProps, TDefaultComponent, } from "./wrapper-with-icon/wrapper-with-icon.js";
|
|
4
|
+
export * from "./types.js";
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
import type { MultiValueGenericProps } from 'react-select';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
} & MultiValueGenericProps['selectProps'];
|
|
5
|
-
export type TTagRemoveProps = {
|
|
6
|
-
selectProps: TTagRemoveSelectProps;
|
|
7
|
-
} & MultiValueGenericProps;
|
|
2
|
+
import { TSelectInputCustomComponentProps } from "../types.js";
|
|
3
|
+
export type TTagRemoveProps = TSelectInputCustomComponentProps<MultiValueGenericProps>;
|
|
8
4
|
declare const TagRemove: {
|
|
9
5
|
(props: TTagRemoveProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
10
6
|
displayName: string;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, GroupHeadingProps, GroupProps, IndicatorSeparatorProps, IndicatorsContainerProps, InputProps, LoadingIndicatorProps, MenuListProps, MenuProps, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, NoticeProps, OptionProps, PlaceholderProps, SingleValueProps, ValueContainerProps } from 'react-select';
|
|
3
|
+
export type TReactSelectCustomComponentsProps = ClearIndicatorProps | ControlProps | DropdownIndicatorProps | GroupProps | GroupHeadingProps | IndicatorsContainerProps | IndicatorSeparatorProps | InputProps | LoadingIndicatorProps | MenuProps | MenuListProps | NoticeProps | MultiValueProps | MultiValueGenericProps | MultiValueRemoveProps | OptionProps | PlaceholderProps | ContainerProps | SingleValueProps | ValueContainerProps;
|
|
4
|
+
export type TSelectInputCustomComponentProps<T extends TReactSelectCustomComponentsProps> = T & {
|
|
5
|
+
selectProps: T['selectProps'] & {
|
|
6
|
+
isCondensed?: boolean;
|
|
7
|
+
isReadOnly?: boolean;
|
|
8
|
+
iconLeft?: ReactElement;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export type TTagRemoveSelectProps = {
|
|
12
|
+
isReadOnly: boolean;
|
|
13
|
+
} & MultiValueGenericProps['selectProps'];
|
|
14
|
+
export type TWrapperWithIconSelectProps = {
|
|
15
|
+
iconLeft?: ReactElement;
|
|
16
|
+
};
|
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { type SingleValueProps, type PlaceholderProps } from 'react-select';
|
|
3
|
-
|
|
4
|
-
iconLeft?: ReactElement;
|
|
5
|
-
};
|
|
3
|
+
import { TSelectInputCustomComponentProps } from "../types.js";
|
|
6
4
|
export type TSingleValueWrapperWithIconProps = {
|
|
7
5
|
type: 'singleValue';
|
|
8
|
-
|
|
9
|
-
} & SingleValueProps;
|
|
6
|
+
} & TSelectInputCustomComponentProps<SingleValueProps>;
|
|
10
7
|
export type TPlaceholderWrapperWithIconProps = {
|
|
11
8
|
type: 'placeholder';
|
|
12
|
-
|
|
13
|
-
} & PlaceholderProps;
|
|
9
|
+
} & TSelectInputCustomComponentProps<PlaceholderProps>;
|
|
14
10
|
export type TWrapperWithIconProps<Type extends 'singleValue' | 'placeholder'> = Type extends 'singleValue' ? TSingleValueWrapperWithIconProps : Type extends 'placeholder' ? TPlaceholderWrapperWithIconProps : never;
|
|
15
11
|
export type TDefaultComponent<Type extends 'singleValue' | 'placeholder'> = (props: Type extends 'singleValue' ? SingleValueProps : Type extends 'placeholder' ? PlaceholderProps : never) => JSX.Element;
|
|
16
12
|
declare const WrapperWithIcon: {
|
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": "19.
|
|
4
|
+
"version": "19.1.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "19.
|
|
25
|
-
"@commercetools-uikit/design-system": "19.
|
|
26
|
-
"@commercetools-uikit/icons": "19.
|
|
27
|
-
"@commercetools-uikit/spacings": "19.
|
|
28
|
-
"@commercetools-uikit/text": "19.
|
|
29
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "19.1.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "19.1.0",
|
|
26
|
+
"@commercetools-uikit/icons": "19.1.0",
|
|
27
|
+
"@commercetools-uikit/spacings": "19.1.0",
|
|
28
|
+
"@commercetools-uikit/text": "19.1.0",
|
|
29
|
+
"@commercetools-uikit/utils": "19.1.0",
|
|
30
30
|
"@emotion/react": "^11.10.5",
|
|
31
31
|
"@emotion/styled": "^11.10.5",
|
|
32
32
|
"lodash": "4.17.21",
|