@commercetools-uikit/select-utils
Version:
Utilities for working with select components.
617 lines (601 loc) • 54.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var reactIntl = require('react-intl');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var designSystem = require('@commercetools-uikit/design-system');
var utils = require('@commercetools-uikit/utils');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var react = require('@emotion/react');
var icons = require('@commercetools-uikit/icons');
var jsxRuntime = require('@emotion/react/jsx-runtime');
var omit = require('lodash/omit');
var AccessibleButton = require('@commercetools-uikit/accessible-button');
var reactSelect = require('react-select');
var react$1 = require('react');
var Spacings = require('@commercetools-uikit/spacings');
var Text = require('@commercetools-uikit/text');
var CheckboxInput = require('@commercetools-uikit/checkbox-input');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var omit__default = /*#__PURE__*/_interopDefault(omit);
var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
var Text__default = /*#__PURE__*/_interopDefault(Text);
var CheckboxInput__default = /*#__PURE__*/_interopDefault(CheckboxInput);
var messages$1 = reactIntl.defineMessages({
clearButtonLabel: {
id: 'UIKit.ClearButton.clearButtonLabel',
description: 'Label for the clear button',
defaultMessage: 'Clear'
}
});
const _excluded = ["ref", "onMouseDown"];
function ownKeys$7(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; }
function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const ClearIndicator = props => {
const intl = reactIntl.useIntl();
const getStyles = props.getStyles,
_props$innerProps = props.innerProps,
ref = _props$innerProps.ref,
onMouseDown = _props$innerProps.onMouseDown,
restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
selectProps = props.selectProps;
return jsxRuntime.jsx("button", _objectSpread$7(_objectSpread$7({}, restInnerProps), {}, {
ref: ref,
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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIFJlZiwgSlNYIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUgeyBDbGVhckluZGljYXRvclByb3BzIH0gZnJvbSAncmVhY3Qtc2VsZWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgQ2xvc2VJY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IG1lc3NhZ2VzIGZyb20gJy4vbWVzc2FnZXMnO1xuaW1wb3J0IHsgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbnR5cGUgVElubmVyUHJvcHMgPSB7XG4gIHJlZjogUmVmPEhUTUxCdXR0b25FbGVtZW50Pjtcbn0gJiBKU1guSW50cmluc2ljRWxlbWVudHNbJ2J1dHRvbiddO1xuXG5leHBvcnQgdHlwZSBUQ2xlYXJJbmRpY2F0b3JQcm9wcyA9IHtcbiAgaW5uZXJQcm9wczogVElubmVyUHJvcHM7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8Q2xlYXJJbmRpY2F0b3JQcm9wcz47XG5cbmNvbnN0IENsZWFySW5kaWNhdG9yID0gKHByb3BzOiBUQ2xlYXJJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCB7XG4gICAgZ2V0U3R5bGVzLFxuICAgIGlubmVyUHJvcHM6IHsgcmVmLCBvbk1vdXNlRG93biwgLi4ucmVzdElubmVyUHJvcHMgfSxcbiAgICBzZWxlY3RQcm9wcyxcbiAgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxidXR0b25cbiAgICAgIHsuLi5yZXN0SW5uZXJQcm9wc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGJvcmRlcjogbm9uZTtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDQwfTtcbiAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvckVycm9yfTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAgIHN0eWxlPXtnZXRTdHlsZXMoJ2NsZWFySW5kaWNhdG9yJywgcHJvcHMpIGFzIENTU1Byb3BlcnRpZXN9XG4gICAgICB0aXRsZT17aW50bC5mb3JtYXRNZXNzYWdlKG1lc3NhZ2VzLmNsZWFyQnV0dG9uTGFiZWwpfVxuICAgICAgYXJpYS1sYWJlbD17aW50bC5mb3JtYXRNZXNzYWdlKG1lc3NhZ2VzLmNsZWFyQnV0dG9uTGFiZWwpfVxuICAgICAgLy8gb3ZlcnJpZGluZyB0aGUgZGVmYXVsdCBgYXJpYS1oaWRkZW5gIHByb3AgdmFsdWUgdG8gbWFrZSB0aGUgY29tcG9uZW50IGFjY2Vzc2libGUgYnkga2V5Ym9hcmQgLSBodHRwczovL2dpdGh1Yi5jb20vSmVkV2F0c29uL3JlYWN0LXNlbGVjdC9pc3N1ZXMvNDc5M1xuICAgICAgYXJpYS1oaWRkZW49e2ZhbHNlfVxuICAgICAgLy8gb25seSBvbk1vdXNlRG93biBhbmQgb25Ub3VjaEVuZCBldmVudCBoYW5kbGVycyBhcmUgcGFzc2VkIGJ5IGByZWFjdC1zZWxlY3RgIHRvIHRoZSBjb21wb25lbnQgYnkgZGVmYXVsdCwgd2hpY2ggbWFrZXMgaXQgbm90IGFjY2Vzc2libGUgYnkga2V5Ym9hcmRcbiAgICAgIG9uQ2xpY2s9e29uTW91c2VEb3dufVxuICAgID5cbiAgICAgIDxDbG9zZUljb24gc2l6ZT17c2VsZWN0UHJvcHMuaXNDb25kZW5zZWQgPyAnc21hbGwnIDogJ21lZGl1bSd9IC8+XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5DbGVhckluZGljYXRvci5kaXNwbGF5TmFtZSA9ICdDbGVhckluZGljYXRvcic7XG5cbmV4cG9ydCBkZWZhdWx0IENsZWFySW5kaWNhdG9yO1xuIl19 */"),
style: getStyles('clearIndicator', props),
title: intl.formatMessage(messages$1.clearButtonLabel),
"aria-label": intl.formatMessage(messages$1.clearButtonLabel)
// overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
,
"aria-hidden": false
// only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
,
onClick: onMouseDown,
children: jsxRuntime.jsx(icons.CloseIcon, {
size: selectProps.isCondensed ? 'small' : 'medium'
})
}));
};
ClearIndicator.displayName = 'ClearIndicator';
var ClearIndicator$1 = ClearIndicator;
function ownKeys$6(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; }
function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
// see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
const TagRemove = props => {
const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
// when the select input is disabled,
// we don't want to spread the removeProp event handlers
const innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$6(_objectSpread$6({
label: "Remove"
}, innerProps), {}, {
children: jsxRuntime.jsx(icons.CloseBoldIcon, {
color: isDisabled ? 'neutral60' : 'solid',
size: props.selectProps.isCondensed ? 'small' : 'medium'
})
}));
};
TagRemove.displayName = 'TagRemove';
var TagRemove$1 = TagRemove;
function ownKeys$5(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; }
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$5(_objectSpread$5({}, props), {}, {
children: jsxRuntime.jsx(icons.CaretDownIcon, {
color: props.isDisabled ? 'neutral60' : undefined,
size: "small"
})
}));
DropdownIndicator.displayName = 'DropdownIndicator';
var DropdownIndicator$1 = DropdownIndicator;
function ownKeys$4(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; }
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const SearchIconDropdownIndicator = props => {
return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
children: jsxRuntime.jsx(icons.SearchIcon, {
color: 'neutral60',
size: props.selectProps.isCondensed ? 'medium' : 'big'
})
}));
};
SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
function ownKeys$3(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; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const getDefaultComponent = type => {
if (type === 'singleValue') return reactSelect.components.SingleValue;
if (type === 'placeholder') return reactSelect.components.Placeholder;
return null;
};
const WrapperWithIcon = props => {
const DefaultComponent = getDefaultComponent(props.type);
if (!DefaultComponent) {
return null;
}
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
size: props.selectProps.isCondensed ? '30' : '40'
}), jsxRuntime.jsx("span", {
// react-select uses absolute positioning for the SingleValue/Placeholder
// the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
// spacingsXs is the margin between the icon and value
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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCwgdHlwZSBKU1ggfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7XG4gIGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMsXG4gIHR5cGUgU2luZ2xlVmFsdWVQcm9wcyxcbiAgdHlwZSBQbGFjZWhvbGRlclByb3BzLFxufSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuaW1wb3J0IHsgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCB0eXBlIFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzID0ge1xuICB0eXBlOiAnc2luZ2xlVmFsdWUnO1xufSAmIFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzPFNpbmdsZVZhbHVlUHJvcHM+O1xuZXhwb3J0IHR5cGUgVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdwbGFjZWhvbGRlcic7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8UGxhY2Vob2xkZXJQcm9wcz47XG5leHBvcnQgdHlwZSBUV3JhcHBlcldpdGhJY29uUHJvcHM8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9XG4gIFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBUU2luZ2xlVmFsdWVXcmFwcGVyV2l0aEljb25Qcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFRQbGFjZWhvbGRlcldyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBuZXZlcjtcbmV4cG9ydCB0eXBlIFREZWZhdWx0Q29tcG9uZW50PFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4gPSAoXG4gIHByb3BzOiBUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJ1xuICAgID8gU2luZ2xlVmFsdWVQcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFBsYWNlaG9sZGVyUHJvcHNcbiAgICA6IG5ldmVyXG4pID0+IEpTWC5FbGVtZW50O1xuXG5jb25zdCBnZXREZWZhdWx0Q29tcG9uZW50ID0gPFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4oXG4gIHR5cGU6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlsndHlwZSddXG4pOiBURGVmYXVsdENvbXBvbmVudDxUeXBlPiB8IG51bGwgPT4ge1xuICBpZiAodHlwZSA9PT0gJ3NpbmdsZVZhbHVlJylcbiAgICByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuU2luZ2xlVmFsdWUgYXMgVERlZmF1bHRDb21wb25lbnQ8VHlwZT47XG4gIGlmICh0eXBlID09PSAncGxhY2Vob2xkZXInKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5QbGFjZWhvbGRlciBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgcmV0dXJuIG51bGw7XG59O1xuXG5jb25zdCBXcmFwcGVyV2l0aEljb24gPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgcHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlxuKSA9PiB7XG4gIGNvbnN0IERlZmF1bHRDb21wb25lbnQgPSBnZXREZWZhdWx0Q29tcG9uZW50PFR5cGU+KHByb3BzLnR5cGUpO1xuXG4gIGlmICghRGVmYXVsdENvbXBvbmVudCkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge3Byb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0ICYmXG4gICAgICAgIGNsb25lRWxlbWVudChwcm9wcy5zZWxlY3RQcm9wcy5pY29uTGVmdCwge1xuICAgICAgICAgIHNpemU6IHByb3BzLnNlbGVjdFByb3BzLmlzQ29uZGVuc2VkID8gJzMwJyA6ICc0MCcsXG4gICAgICAgIH0pfVxuICAgICAgPHNwYW5cbiAgICAgICAgLy8gcmVhY3Qtc2VsZWN0IHVzZXMgYWJzb2x1dGUgcG9zaXRpb25pbmcgZm9yIHRoZSBTaW5nbGVWYWx1ZS9QbGFjZWhvbGRlclxuICAgICAgICAvLyB0aGUgaWNvbiBoYXMgYSBmaXhlZCBzaXplIG9mIDI0cHggKD09IFNwYWNpbmdzWGwpLCB0aGVyZWZvcmUgd2UgY2FuIHVzZSBhIGZpeGVkIG1hcmdpblxuICAgICAgICAvLyBzcGFjaW5nc1hzIGlzIHRoZSBtYXJnaW4gYmV0d2VlbiB0aGUgaWNvbiBhbmQgdmFsdWVcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIHsvKiBAdHMtaWdub3JlICovfVxuICAgICAgICA8RGVmYXVsdENvbXBvbmVudCB7Li4ucHJvcHN9IC8+XG4gICAgICA8L3NwYW4+XG4gICAgPC8+XG4gICk7XG59O1xuXG5XcmFwcGVyV2l0aEljb24uZGlzcGxheU5hbWUgPSAnV3JhcHBlcldpdGhJY29uJztcblxuZXhwb3J0IGRlZmF1bHQgV3JhcHBlcldpdGhJY29uO1xuXG5jb25zdCBjdXN0b21Db21wb25lbnRzID0ge1xuICBTaW5nbGVWYWx1ZTogKHByb3BzOiBUV3JhcHBlcldpdGhJY29uUHJvcHM8J3NpbmdsZVZhbHVlJz4pID0+IChcbiAgICA8V3JhcHBlcldpdGhJY29uPCdzaW5nbGVWYWx1ZSc+IHsuLi5wcm9wc30gdHlwZT1cInNpbmdsZVZhbHVlXCIgLz5cbiAgKSxcbiAgUGxhY2Vob2xkZXI6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdwbGFjZWhvbGRlcic+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwncGxhY2Vob2xkZXInPiB7Li4ucHJvcHN9IHR5cGU9XCJwbGFjZWhvbGRlclwiIC8+XG4gICksXG59O1xuXG5leHBvcnQgeyBjdXN0b21Db21wb25lbnRzIH07XG4iXX0= */"),
children: jsxRuntime.jsx(DefaultComponent, _objectSpread$3({}, props))
})]
});
};
WrapperWithIcon.displayName = 'WrapperWithIcon';
var WrapperWithIcon$1 = WrapperWithIcon;
const customComponents = {
SingleValue: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
type: "singleValue"
})),
Placeholder: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
type: "placeholder"
}))
};
const NO_VALUE_FALLBACK = '- - - -';
const SELECT_DROPDOWN_OPTION_TYPES = {
SINGLE_PROPERTY: 'single-property',
DOUBLE_PROPERTY: 'double-property',
MULTIPLE_PROPERTIES: 'multiple-properties'
};
function ownKeys$2(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; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const MultiplePropertiesSelectInputOption = props => {
const data = props.data;
const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
scale: "xs",
children: [jsxRuntime.jsx(Text__default["default"].Detail, {
fontWeight: "bold",
children: data?.label || noValueFallback
}), jsxRuntime.jsxs(Text__default["default"].Detail, {
children: ["Key: ", data?.key || noValueFallback]
}), jsxRuntime.jsxs(Text__default["default"].Detail, {
children: ["ID: ", data?.id || noValueFallback]
})]
})
}));
};
MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
const DoublePropertySelectInputOption = props => {
const data = props.data;
const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
scale: "xs",
children: [jsxRuntime.jsx(Text__default["default"].Detail, {
fontWeight: "bold",
children: data?.label || noValueFallback
}), jsxRuntime.jsxs(Text__default["default"].Detail, {
children: ["Key: ", data?.key || noValueFallback]
})]
})
}));
};
DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
const CustomSelectInputOption = props => {
const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
switch (props.optionType) {
case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
noValueFallback: noValueFallback
}));
case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
noValueFallback: noValueFallback
}));
default:
return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
children: jsxRuntime.jsx(Text__default["default"].Detail, {
children: props.optionInnerProps.data?.label || noValueFallback
})
}));
}
};
CustomSelectInputOption.displayName = 'CustomSelectInputOption';
function ownKeys$1(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; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const optionStyleCheckboxComponents = appearance => {
return {
Option: props => {
const innerRef = props.innerRef,
innerProps = props.innerProps,
label = props.label,
isDisabled = props.isDisabled,
isFocused = props.isFocused,
isSelected = props.isSelected,
className = props.className,
data = props.data;
return jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1({
"data-component": "option",
ref: innerRef
}, innerProps), {}, {
css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && `background-color: ${designSystem.designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
className: className,
"aria-disabled": isDisabled,
children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
isDisabled: isDisabled,
isChecked: isSelected,
onChange: () => {},
children: jsxRuntime.jsx("span", {
children: label
})
}), appearance === 'filter' && jsxRuntime.jsx("div", {
css: /*#__PURE__*/react.css("display:flex;align-items:center;font-weight:400;line-height:", designSystem.designTokens.lineHeight05, ";color:", designSystem.designTokens.colorNeutral50, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNERzQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
children: data.count
})]
}));
}
};
};
/**
* Returns react-select props to be used with the <Select> component, when optionStyle is set to "checkbox"
*/
const optionsStyleCheckboxSelectProps = () => {
return {
// selected options should still be visible in the option-list, otherwise you cant toggle them
hideSelectedOptions: false,
// don't close the menu on check / uncheck of a checkbox
closeMenuOnSelect: false
};
};
var messages = reactIntl.defineMessages({
createLabel: {
id: 'UIKit.CreatableSelectInput.createLabel',
description: 'Text of dropdown when creating option',
defaultMessage: 'Create "{inputValue}"'
},
noOptionsMessageWithInputValue: {
id: 'UIKit.SelectInput.noOptionsMessageWithInputValue',
description: 'Text of dropdown when no options match search text',
defaultMessage: 'No options'
},
noOptionsMessageWithoutInputValue: {
id: 'UIKit.SelectInput.noOptionsMessageWithoutInputValue',
description: 'Text of dropdown when no options exist',
defaultMessage: 'No options'
},
placeholder: {
id: 'UIKit.SelectInput.placeholder',
description: 'Default input placeholder text',
defaultMessage: 'Select...'
},
selectInputAsFilterPlaceholder: {
id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
description: 'Default input placeholder text when used as filter',
defaultMessage: 'Search'
},
loadingOptions: {
id: 'UIKit.SelectInput.loadingOptions',
description: 'Default input loading text',
defaultMessage: 'Loading...'
}
});
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; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const getHorizontalConstraintValue = value => {
switch (value) {
case 'auto':
return 'initial';
default:
return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
}
};
const getInputBackgroundColor = props => {
if (props.appearance === 'quiet') {
return designSystem.designTokens.colorTransparent;
}
if (props.isDisabled) {
return designSystem.designTokens.backgroundColorForInputWhenDisabled;
}
if (props.isReadOnly) {
return designSystem.designTokens.backgroundColorForInputWhenReadonly;
}
return designSystem.designTokens.backgroundColorForInput;
};
const getMultiValueBackgroundColor = props => {
if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
return designSystem.designTokens.colorPrimary95;
};
const getInputBorderColor = (props, state) => {
if (props.appearance === 'quiet') {
return designSystem.designTokens.colorTransparent;
}
if (props.isDisabled) {
return designSystem.designTokens.borderColorForInputWhenDisabled;
}
if (props.isReadOnly) {
return designSystem.designTokens.colorNeutral95;
}
if (state.isFocused) {
return designSystem.designTokens.borderColorForInputWhenFocused;
}
if (props.hasError) {
return designSystem.designTokens.borderColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.borderColorForInputWhenWarning;
}
return designSystem.designTokens.borderColorForInput;
};
const getHoverInputBorderColor = props => {
if (props.appearance === 'quiet') {
return designSystem.designTokens.colorTransparent;
}
if (props.isDisabled) {
return designSystem.designTokens.borderColorForInputWhenDisabled;
}
if (props.isReadOnly) {
return designSystem.designTokens.colorNeutral95;
}
if (props.hasError) {
return designSystem.designTokens.borderColorForInputWhenError;
}
if (props.hasWarning) {
return designSystem.designTokens.borderColorForInputWhenWarning;
}
return designSystem.designTokens.borderColorForInputWhenHovered;
};
const getHoverInputBackgroundColor = props => {
if (!props.isDisabled && !props.isReadOnly) {
if (props.appearance === 'quiet') {
return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
} else {
return designSystem.designTokens.backgroundColorForInputWhenHovered;
}
}
return null;
};
const controlStyles = props => (base, state) => {
return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
backgroundColor: getInputBackgroundColor(props),
borderColor: getInputBorderColor(props, state),
borderWidth: (() => {
if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
return designSystem.designTokens.borderWidth2;
}
return designSystem.designTokens.borderWidth1;
})(),
borderRadius: designSystem.designTokens.borderRadiusForInput,
minHeight: props.isCondensed ? designSystem.designTokens.heightForInputAsSmall : designSystem.designTokens.heightForInput,
cursor: (() => {
if (props.isDisabled) return 'not-allowed';
if (props.isReadOnly) return 'default';
return 'pointer';
})(),
padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
transition: `border-color ${designSystem.designTokens.transitionStandard},
box-shadow ${designSystem.designTokens.transitionStandard}`,
outline: 0,
boxShadow: 'none'
}, props.horizontalConstraint === 'auto' ? {
display: 'inline-flex'
} : {}), {}, {
'&:focus-within': {
borderColor: (() => {
if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenFocused;
return null;
})()
},
'&:hover': {
borderColor: getHoverInputBorderColor(props),
backgroundColor: getHoverInputBackgroundColor(props)
},
pointerEvents: 'auto',
color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
});
};
const menuStyles = props => base => {
return _objectSpread(_objectSpread(_objectSpread({}, base), props.appearance === 'filter' ? {
position: 'inherit',
zIndex: 'inherit'
} : {}), {}, {
border: `1px solid ${designSystem.designTokens.colorSurface}`,
borderRadius: designSystem.designTokens.borderRadiusForInput,
backgroundColor: designSystem.designTokens.backgroundColorForInput,
boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
fontSize: designSystem.designTokens.fontSize30,
fontFamily: 'inherit',
margin: `${designSystem.designTokens.spacing10} 0 0 0`,
borderColor: (() => {
if (props.hasError || props.hasWarning) {
return designSystem.designTokens.colorSurface;
}
return base.borderColorForInput;
})(),
width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
minWidth: props.minMenuWidth ? getHorizontalConstraintValue(props.minMenuWidth) : designSystem.designTokens.constraint3,
maxWidth: props.maxMenuWidth ? getHorizontalConstraintValue(props.maxMenuWidth) : designSystem.designTokens.constraintScale
});
};
const indicatorSeparatorStyles = () => base => {
return _objectSpread(_objectSpread({}, base), {}, {
display: 'none',
margin: '0',
padding: '0',
marginLeft: designSystem.designTokens.spacing10
});
};
const dropdownIndicatorStyles = props => base => {
return _objectSpread(_objectSpread({}, base), {}, {
color: designSystem.designTokens.fontColorForInput,
margin: '0',
padding: '0',
marginLeft: designSystem.designTokens.spacing20,
fill: (() => {
if (props.isDisabled || props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenDisabled;
if (props.hasError) return designSystem.designTokens.colorError;
if (props.hasWarning) return designSystem.designTokens.colorWarning;
return designSystem.designTokens.colorNeutral60;
})()
});
};
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
display: 'flex',
padding: 0,
marginLeft: designSystem.designTokens.spacing20
});
const menuListStyles = () => base => {
return _objectSpread(_objectSpread({}, base), {}, {
padding: `${designSystem.designTokens.spacing10} 0`,
borderRadius: designSystem.designTokens.borderRadiusForInput,
backgroundColor: designSystem.designTokens.backgroundColorForInput
});
};
const optionStyles = props => (base, state) => {
return _objectSpread(_objectSpread({}, base), {}, {
transition: `border-color ${designSystem.designTokens.transitionStandard},
background-color ${designSystem.designTokens.transitionStandard},
color ${designSystem.designTokens.transitionStandard}`,
padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
lineHeight: designSystem.designTokens.lineHeight40,
fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
cursor: state.isDisabled ? 'not-allowed' : 'pointer',
color: (() => {
if (state.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
return designSystem.designTokens.fontColorForInput;
})(),
borderRadius: props.appearance === 'filter' && '4px',
backgroundColor: (() => {
if (state.isSelected) return designSystem.designTokens.colorPrimary95;
if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
return base.backgroundColor;
})(),
'&:active': {
backgroundColor: (() => {
if (state.isDisabled) return designSystem.designTokens.colorTransparent;
return designSystem.designTokens.colorPrimary95;
})()
}
});
};
const placeholderStyles = props => base => {
return _objectSpread(_objectSpread({}, base), {}, {
color: (() => {
if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
if (props.hasError) {
return designSystem.designTokens.colorError;
}
if (props.hasWarning) {
return designSystem.designTokens.colorWarning;
}
}
return designSystem.designTokens.colorNeutral60;
})(),
width: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
});
};
const getInputValueLayout = props => {
switch (true) {
case props.appearance === 'filter':
return 'grid';
// Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
// Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
// See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
return 'flex';
default:
return 'grid';
}
};
const valueContainerStyles = props => base => {
return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
flexWrap: 'nowrap'
}), {}, {
padding: '0',
backgroundColor: 'none',
overflow: 'hidden',
display: getInputValueLayout(props),
fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
});
};
const singleValueStyles = props => base => {
return _objectSpread(_objectSpread({}, base), {}, {
color: (() => {
if (props.isDisabled) {
return designSystem.designTokens.fontColorForInputWhenDisabled;
}
if (props.isReadOnly) {
return designSystem.designTokens.fontColorForInputWhenReadonly;
}
if (props.hasError) return designSystem.designTokens.colorError;
if (props.hasWarning) return designSystem.designTokens.colorWarning;
return designSystem.designTokens.fontColorForInput;
})()
});
};
const groupStyles = props => base => {
return _objectSpread(_objectSpread({}, base), {}, {
padding: 0,
'&:not(:first-of-type)': {
borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
}
});
};
const groupHeadingStyles = () => base => {
return _objectSpread(_objectSpread({}, base), {}, {
color: designSystem.designTokens.fontColorForInputWhenReadonly,
fontSize: designSystem.designTokens.fontSize20,
borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
textTransform: 'none',
fontWeight: designSystem.designTokens.fontWeight500,
padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
'&:empty': {
padding: 0
}
});
};
const containerStyles = () => (base, state) => {
return _objectSpread(_objectSpread({}, base), {}, {
fontFamily: 'inherit',
minHeight: designSystem.designTokens.heightForInputAsSmall,
borderRadius: designSystem.designTokens.borderRadiusForInput,
borderColor: state.isFocused ? designSystem.designTokens.borderColorForInputWhenFocused : base.borderColor,
boxShadow: state.isFocused ? 'none' : base.boxShadow
});
};
const indicatorsContainerStyles = () => () => ({
background: 'none',
display: 'flex',
alignItems: 'center'
});
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
zIndex: props.menuPortalZIndex
});
const multiValueStyles = props => base => {
return _objectSpread(_objectSpread({}, base), {}, {
display: 'flex',
alignItems: 'center',
height: props.isCondensed ? 'inherit' : '32px',
backgroundColor: getMultiValueBackgroundColor(props),
padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
borderRadius: designSystem.designTokens.borderRadius20
});
};
const mu