@activecollab/components
Version:
ActiveCollab Components
522 lines (521 loc) • 25.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ComboBox = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _react = _interopRequireWildcard(require("react"));
var _reactRemoveScroll = require("react-remove-scroll");
var _classnames = _interopRequireDefault(require("classnames"));
var _Styles = require("./Styles");
var _helpers = require("../../helpers");
var _ConditionWrapper = require("../../helpers/ConditionWrapper/ConditionWrapper");
var _useIsFirstRender = require("../../hooks/useIsFirstRender");
var _useOnClickOutside = require("../../hooks/useOnClickOutside");
var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
var _Autocomplete = require("../Autocomplete");
var _Autocomplete2 = require("../Autocomplete/Autocomplete");
var _Avatar = require("../Avatar");
var _Checkbox = require("../Checkbox");
var _Chip = require("../Chip");
var _IconButton = require("../IconButton");
var _InputAdornment = require("../Input/InputAdornment");
var _Styles2 = require("../Input/Styles");
var _SpinnerLoader = require("../Loaders/Spinner/SpinnerLoader");
var _MultiAvatar = require("../MultiAvatar");
var _Popper = require("../Popper");
var _RadioButton = require("../RadioButton");
var _OptionContent = require("../Select/OptionContent/OptionContent");
var _Tooltip = require("../Tooltip");
var _Trigger = require("../Trigger");
var _Typography = require("../Typography/Typography");
var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "onInputChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect", "defaultValue", "open", "onOpen", "triggerMode", "noResultText", "emptyValue", "disableVirtualization", "hideClearButton", "errorMessage", "onCancel"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var sizeMap = {
small: 18,
regular: 24,
big: 30,
biggest: 40
};
var ComboBox = exports.ComboBox = function ComboBox(_ref) {
var _comboBoxRef$current2, _comboBoxRef$current3;
var _ref$options = _ref.options,
options = _ref$options === void 0 ? [] : _ref$options,
selected = _ref.selected,
_ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
loadingText = _ref.loadingText,
onChange = _ref.onChange,
onInputChange = _ref.onInputChange,
placeholder = _ref.placeholder,
handleEmptyAction = _ref.handleEmptyAction,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
_ref$invalid = _ref.invalid,
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "single" : _ref$type,
renderChip = _ref.renderChip,
_ref$forceCloseMenu = _ref.forceCloseMenu,
forceCloseMenu = _ref$forceCloseMenu === void 0 ? type === "single" : _ref$forceCloseMenu,
renderOption = _ref.renderOption,
_ref$limitChips = _ref.limitChips,
limitChips = _ref$limitChips === void 0 ? 2 : _ref$limitChips,
hiddenNumberText = _ref.hiddenNumberText,
_ref$inPortal = _ref.inPortal,
inPortal = _ref$inPortal === void 0 ? false : _ref$inPortal,
inputWrapperClassName = _ref.inputWrapperClassName,
scrollWrapper = _ref.scrollWrapper,
onClose = _ref.onClose,
onClear = _ref.onClear,
onDeselect = _ref.onDeselect,
defaultValue = _ref.defaultValue,
_ref$open = _ref.open,
defaultOpen = _ref$open === void 0 ? false : _ref$open,
onOpen = _ref.onOpen,
triggerMode = _ref.triggerMode,
noResultText = _ref.noResultText,
emptyValue = _ref.emptyValue,
disableVirtualization = _ref.disableVirtualization,
_ref$hideClearButton = _ref.hideClearButton,
hideClearButton = _ref$hideClearButton === void 0 ? false : _ref$hideClearButton,
errorMessage = _ref.errorMessage,
onCancel = _ref.onCancel,
prop = _objectWithoutProperties(_ref, _excluded);
var selectedName = (0, _react.useMemo)(function () {
var value = "";
if (!selected) {
return value;
}
options.map(function (v) {
if (v !== null && v !== void 0 && v.options) {
return v.options.find(function (q) {
if (q.id === selected) {
value = q.name;
return;
}
});
} else {
if (v.id === selected) {
value = v.name;
return;
}
}
});
return value;
}, [options, selected]);
var _useState = (0, _react.useState)(selectedName),
_useState2 = _slicedToArray(_useState, 2),
value = _useState2[0],
setValue = _useState2[1];
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
focused = _useState4[0],
setFocused = _useState4[1];
var handleOnChange = (0, _react.useCallback)(function (e) {
setValue(e.target.value);
onInputChange === null || onInputChange === void 0 || onInputChange(e.target.value);
}, [onInputChange]);
var childNode = (0, _react.useRef)();
var elementRef = (0, _react.useRef)(null);
var handleRef = (0, _useForkRef.default)(childNode, elementRef);
var wrapperRef = (0, _react.useRef)(null);
var chipWrapper = (0, _react.useRef)(null);
var comboBoxRef = (0, _react.useRef)(null);
var _useState5 = (0, _react.useState)(defaultOpen),
_useState6 = _slicedToArray(_useState5, 2),
open = _useState6[0],
setOpen = _useState6[1];
var isFirstRender = (0, _useIsFirstRender.useIsFirstRender)();
(0, _useOnClickOutside.useOnClickOutside)(wrapperRef, function (e) {
var _comboBoxRef$current;
if (e.target && (_comboBoxRef$current = comboBoxRef.current) !== null && _comboBoxRef$current !== void 0 && _comboBoxRef$current.contains(e.target)) {
return;
}
onCancel === null || onCancel === void 0 || onCancel(selectedName);
setOpen(false);
});
var handleOnKeyDown = (0, _react.useCallback)(function (e) {
if (e.key === "Escape" && open) {
setOpen(false);
setValue(selectedName);
onCancel === null || onCancel === void 0 || onCancel(selectedName);
e.stopPropagation();
}
if (e.key === "Enter" && type === "multiple") {
setValue("");
}
if (e.key === "Enter" && !open && focused) {
setOpen(true);
onOpen === null || onOpen === void 0 || onOpen();
}
}, [focused, onCancel, onOpen, open, selectedName, type]);
(0, _react.useEffect)(function () {
var _childNode$current, _childNode$current2;
open && (childNode === null || childNode === void 0 || (_childNode$current = childNode.current) === null || _childNode$current === void 0 ? void 0 : _childNode$current.focus());
!open && (childNode === null || childNode === void 0 || (_childNode$current2 = childNode.current) === null || _childNode$current2 === void 0 ? void 0 : _childNode$current2.blur());
}, [childNode, open]);
(0, _react.useEffect)(function () {
setValue(selectedName);
}, [selectedName]);
(0, _react.useEffect)(function () {
if (open !== defaultOpen) setOpen(defaultOpen);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultOpen]);
(0, _react.useEffect)(function () {
if (!open && !isFirstRender && !focused) {
if (typeof onClose === "function") {
onClose();
}
}
}, [focused, isFirstRender, onClose, open]);
var emptyAction = (0, _react.useCallback)(function (v) {
handleEmptyAction === null || handleEmptyAction === void 0 || handleEmptyAction(v);
setOpen(false);
}, [handleEmptyAction]);
var handleChange = (0, _react.useCallback)(function (selectedValue) {
if (selectedValue !== selected && typeof onChange === "function") {
onChange(selectedValue);
}
if (forceCloseMenu) {
setOpen(false);
}
}, [forceCloseMenu, onChange, selected]);
var handleOpen = (0, _react.useCallback)(function () {
if (!disabled) {
setOpen(true);
onOpen === null || onOpen === void 0 || onOpen();
}
}, [disabled, onOpen]);
var handleRenderOption = (0, _react.useCallback)(function (option, props) {
if (typeof renderOption === "function") {
return renderOption(option, props);
}
if (type === "multiple") {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OptionContent.OptionContent, {
imageUrl: option.image,
color: option.color,
textColor: option.textColor,
name: option.name
}), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_OptionContent.OptionContent, {
imageUrl: option.image,
color: option.color,
textColor: option.textColor,
name: option.name
}), /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, props));
}, [type, renderOption]);
var handleDeselect = (0, _react.useCallback)(function (e) {
e.stopPropagation();
if (typeof onDeselect === "function") {
onDeselect();
} else if (type === "multiple") {
onChange === null || onChange === void 0 || onChange([]);
} else {
onChange === null || onChange === void 0 || onChange("");
}
onClear === null || onClear === void 0 || onClear();
setOpen(false);
}, [type, onChange, onClear, onDeselect]);
var handleMouseDown = (0, _react.useCallback)(function (e) {
e.preventDefault();
}, []);
var handleBlur = (0, _react.useCallback)(function () {
setValue(selectedName);
setFocused(!focused);
}, [focused, selectedName]);
var renderChipAdornment = (0, _react.useCallback)(function (option, index) {
if (typeof renderChip === "function") {
return renderChip(option, index);
}
var avatarProps = {
size: 18
};
switch (size) {
case "big":
avatarProps.size = 22;
break;
case "small":
avatarProps.size = 14;
break;
}
var startAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_StyledAvatar, _extends({
url: option.image
}, avatarProps, {
$_css: {
"marginTop": "0.125rem",
"marginBottom": "0.125rem"
},
$_css2: {
"marginRight": "0.125rem"
}
})) : undefined;
var onClose = function onClose(e) {
e.preventDefault();
e.stopPropagation();
if (Array.isArray(selected) && selected.includes(option.id)) {
if (typeof onChange === "function") {
var newSelected = selected.filter(function (item) {
return item !== option.id;
});
onChange(newSelected);
}
}
};
var showOnClose = true;
if (disabled) {
showOnClose = false;
}
if (option.color) {
showOnClose = false;
}
return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
className: "c-combo-box-chip",
startAdornment: startAdornment,
label: option.name,
key: index,
backgroundColor: option.color,
color: option.chipColor,
onClose: showOnClose ? onClose : undefined,
size: size
});
}, [disabled, onChange, renderChip, selected, size]);
var autoSize = (0, _react.useMemo)(function () {
if (type === "multiple" && open && Array.isArray(selected) && selected.length > 1) {
return "auto";
}
return size;
}, [open, selected, size, type]);
var startAdornment = (0, _react.useMemo)(function () {
if (type === "multiple" && Array.isArray(selected) && selected.length > 0) {
var elements = [];
var total = 0;
options.forEach(function (option, index) {
var isGrouped = (0, _Autocomplete2.isOptionGroup)(option);
if (selected.includes(option.id) && !isGrouped) {
total = total + 1;
elements.push(renderChipAdornment(option, index));
} else if (isGrouped) {
var groupedOptions = option.options.filter(function (o) {
return selected.includes(o.id);
});
total = total + groupedOptions.length;
if (groupedOptions.length > 0) {
groupedOptions.forEach(function (o, _index) {
elements.push(renderChipAdornment(o, "".concat(index, "_").concat(_index)));
});
}
}
});
var _hidden = 0;
if (!open && limitChips > 0 && elements.length > limitChips) {
_hidden = elements.splice(limitChips, elements.length - limitChips).length;
}
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, elements, _hidden > 0 && /*#__PURE__*/_react.default.createElement(_StyledTypography, {
variant: size === "small" ? "Caption 1" : size === "regular" ? "Body 2" : "Body 1"
}, typeof hiddenNumberText === "function" ? hiddenNumberText(_hidden) : "+".concat(_hidden)));
}
if (type === "single" && selected) {
var optionItem;
options.forEach(function (option) {
if ((0, _Autocomplete2.isOptionGroup)(option)) {
optionItem = option.options.find(function (child) {
return child.id === selected;
});
} else if (!optionItem && option.id === selected) {
optionItem = option;
}
});
if (optionItem && optionItem.image) {
var avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
if (Array.isArray(optionItem.image)) {
return /*#__PURE__*/_react.default.createElement(_MultiAvatar.MultiAvatar, {
url: optionItem.image,
size: avatarSize
});
}
return /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
url: optionItem.image,
size: avatarSize
});
}
}
return undefined;
}, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0 && !hideClearButton;
var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
var showMenu = (0, _react.useMemo)(function () {
var hasOptions = (options === null || options === void 0 ? void 0 : options.length) > 0;
var valueExists = function valueExists(option) {
return (option.id.toString().includes(value) || option.name.includes(value)) && !(option !== null && option !== void 0 && option.hidden);
};
var isValueInOptions = options === null || options === void 0 ? void 0 : options.some(function (option) {
return (0, _Autocomplete2.isOptionGroup)(option) ? option.options.some(valueExists) : valueExists(option);
});
return hasOptions && (!!defaultValue || !value) || value && (isValueInOptions || emptyValue && !!handleEmptyAction || noResultText);
}, [defaultValue, emptyValue, handleEmptyAction, noResultText, options, value]);
return /*#__PURE__*/_react.default.createElement("div", {
className: "c-combo-box"
}, type === "multiple" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StyledStyledInputWrapper, {
$disabled: disabled,
$size: size,
$invalid: invalid,
ref: comboBoxRef,
$mode: triggerMode,
className: (0, _classnames.default)("c-combo-box-input-wrapper", inputWrapperClassName),
onClick: function onClick() {
var _elementRef$current;
(_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 || _elementRef$current.click();
},
$_css3: autoSize === "auto" ? "auto" : undefined,
$_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined
}, /*#__PURE__*/_react.default.createElement(_StyledStyledChipWrapper, {
$autoSize: autoSize,
$open: open,
ref: chipWrapper,
$_css5: autoSize === "auto" && scrollWrapper ? sizeMap[size] * 3 + 8 + "px" : undefined
}, startAdornment, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInput, {
className: "c-combo-box-input",
onBlur: handleBlur,
onFocus: function onFocus() {
setFocused(!focused);
},
onClick: handleOpen,
ref: handleRef,
value: loading && loadingText ? loadingText : value,
onKeyDown: handleOnKeyDown,
onChange: handleOnChange,
placeholder: !hasSelected ? placeholder : undefined,
$mode: triggerMode,
disabled: disabled,
$size: size,
$loading: loading,
style: {
display: "flex",
flex: 1,
alignSelf: "center",
width: autoSize === "auto" ? "auto" : "100%"
}
})), !disabled && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showXIcon && /*#__PURE__*/_react.default.createElement(_StyledTrigger, {
onMouseDown: handleMouseDown,
onClick: handleDeselect,
"data-testid": "deselect-all"
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)), invalid && errorMessage && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: errorMessage
}, size === "regular" ? /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoSmallIcon, null) : /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoIcon, null)), showMenu && /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
$open: open
}))))) : /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
className: (0, _classnames.default)("c-combo-box-input", inputWrapperClassName),
onBlur: handleBlur,
wrapperClick: handleOpen,
onFocus: function onFocus() {
setFocused(!focused);
handleOpen();
},
onClick: handleOpen,
mode: triggerMode,
wrapRef: comboBoxRef,
ref: handleRef,
value: loading && loadingText ? loadingText : value,
onKeyDown: handleOnKeyDown,
onChange: handleOnChange,
placeholder: placeholder,
disabled: disabled,
size: size,
invalid: invalid,
$loading: loading,
startAdornment: startAdornment,
endAdornment: !disabled ? /*#__PURE__*/_react.default.createElement(_InputAdornment.InputAdornment, {
disablePointerEvents: disabled
}, loading && /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null), !loading && selected && !hideClearButton ? /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
onMouseDown: handleMouseDown,
onClick: handleDeselect,
variant: "text gray",
size: "small"
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)) : null, invalid && errorMessage && /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
title: errorMessage
}, size === "regular" ? /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoSmallIcon, null) : /*#__PURE__*/_react.default.createElement(_Styles.StyledInfoIcon, null)), showMenu && /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
$open: open
})) : null
}), !disabled ? /*#__PURE__*/_react.default.createElement(_ConditionWrapper.ConditionalWrapper, {
condition: inPortal,
wrap: function wrap(children) {
return /*#__PURE__*/_react.default.createElement(_helpers.Portal, null, children);
}
}, /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
anchorEl: comboBoxRef.current,
open: open,
placement: "bottom",
style: {
zIndex: 10,
width: (_comboBoxRef$current2 = comboBoxRef.current) === null || _comboBoxRef$current2 === void 0 ? void 0 : _comboBoxRef$current2.clientWidth
},
ref: wrapperRef,
strategy: "fixed"
}, /*#__PURE__*/_react.default.createElement(_reactRemoveScroll.RemoveScroll, {
noIsolation: true,
allowPinchZoom: true
}, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxList, {
className: "c-combo-box--list",
$width: (_comboBoxRef$current3 = comboBoxRef.current) === null || _comboBoxRef$current3 === void 0 ? void 0 : _comboBoxRef$current3.clientWidth,
$hide: !showMenu
}, /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, _extends({}, prop, {
emptyValue: emptyValue,
noResultText: noResultText,
inputEl: childNode,
selected: selected,
handleChange: handleChange,
renderOption: handleRenderOption,
options: options,
type: type,
defaultValue: defaultValue,
handleEmptyAction: emptyAction,
disableVirtualization: disableVirtualization
})))))) : null);
};
ComboBox.displayName = "ComboBox";
var _StyledAvatar = (0, _styledComponents.default)(_Avatar.Avatar).withConfig({
displayName: "ComboBox___StyledAvatar",
componentId: "sc-uvsz9l-0"
})(["", " ", ""], function (p) {
return p.$_css;
}, function (p) {
return p.$_css2;
});
var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).withConfig({
displayName: "ComboBox___StyledTypography",
componentId: "sc-uvsz9l-1"
})(["display:flex;flex-shrink:0;align-items:center;"]);
var _StyledStyledInputWrapper = (0, _styledComponents.default)(_Styles2.StyledInputWrapper).withConfig({
displayName: "ComboBox___StyledStyledInputWrapper",
componentId: "sc-uvsz9l-2"
})(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";"], function (p) {
return p.$_css3;
}, function (p) {
return p.$_css4;
});
var _StyledStyledChipWrapper = (0, _styledComponents.default)(_Styles.StyledChipWrapper).withConfig({
displayName: "ComboBox___StyledStyledChipWrapper",
componentId: "sc-uvsz9l-3"
})(["max-height:", ";"], function (p) {
return p.$_css5;
});
var _StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
displayName: "ComboBox___StyledTrigger",
componentId: "sc-uvsz9l-4"
})(["display:flex;justify-content:center;"]);
//# sourceMappingURL=ComboBox.js.map