@activecollab/components 1.0.414 → 2.0.0

package/dist/esm/components/ComboBox/ComboBox.js

@@ -1,73 +1,72 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _styled from "styled-components";
-var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper", "onClose", "onClear", "onDeselect"];
-import React, { useCallback, useState, useEffect, useRef, useMemo, Fragment } from "react";
-import { RadioButton } from "../RadioButton";
-import { Autocomplete } from "../Autocomplete";
-import { IconButton } from "../IconButton";
-import { isOptionGroup } from "../Autocomplete/Autocomplete";
-import useForkRef from "../../utils/useForkRef";
-import { Popper } from "../Popper";
-import { RemoveScroll } from "react-remove-scroll";
-import { SpinnerLoader } from "../Loaders/Spinner/SpinnerLoader";
-import { OptionContent } from "../Select/OptionContent/OptionContent";
-import { StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledChipWrapper } from "./Styles";
-import { InputAdornment } from "../Input/InputAdornment";
-import { Checkbox } from "../Checkbox";
-import { Chip } from "../Chip";
-import { StyledInput, StyledInputWrapper } from "../Input/Styles";
-import { useOnClickOutside } from "../../hooks/useOnClickOutside";
-import { Avatar } from "../Avatar";
-import { Trigger } from "../Trigger";
-import { Typography } from "../Typography/Typography";
-import { Portal } from "../../helpers";
-import { ConditionalWrapper } from "../../helpers/ConditionWrapper/ConditionWrapper";
-import classNames from "classnames";
-import { useIsFirstRender } from "../../hooks/useIsFirstRender";
-import { MultiAvatar } from "../MultiAvatar";
-export var 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,
-    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,
-    prop = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var selectedName = useMemo(function () {
-    var value = "";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboBox = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = _interopRequireWildcard(require("react"));
+var _RadioButton = require("../RadioButton");
+var _Autocomplete = require("../Autocomplete");
+var _IconButton = require("../IconButton");
+var _Autocomplete2 = require("../Autocomplete/Autocomplete");
+var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
+var _Popper = require("../Popper");
+var _reactRemoveScroll = require("react-remove-scroll");
+var _SpinnerLoader = require("../Loaders/Spinner/SpinnerLoader");
+var _OptionContent = require("../Select/OptionContent/OptionContent");
+var _Styles = require("./Styles");
+var _InputAdornment = require("../Input/InputAdornment");
+var _Checkbox = require("../Checkbox");
+var _Chip = require("../Chip");
+var _Styles2 = require("../Input/Styles");
+var _useOnClickOutside = require("../../hooks/useOnClickOutside");
+var _Avatar = require("../Avatar");
+var _Trigger = require("../Trigger");
+var _Typography = require("../Typography/Typography");
+var _helpers = require("../../helpers");
+var _ConditionWrapper = require("../../helpers/ConditionWrapper/ConditionWrapper");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useIsFirstRender = require("../../hooks/useIsFirstRender");
+var _MultiAvatar = require("../MultiAvatar");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const ComboBox = _ref => {
+  let {
+    options = [],
+    selected,
+    loading = false,
+    loadingText,
+    onChange,
+    placeholder,
+    handleEmptyAction,
+    disabled = false,
+    size = "regular",
+    invalid = false,
+    type = "single",
+    renderChip,
+    forceCloseMenu = type === "single",
+    renderOption,
+    limitChips = 2,
+    hiddenNumberText,
+    inPortal = false,
+    inputWrapperClassName,
+    scrollWrapper,
+    onClose,
+    onClear,
+    onDeselect,
+    ...prop
+  } = _ref;
+  const selectedName = (0, _react.useMemo)(() => {
+    let value = "";
     if (!selected) {
       return value;
     }
-    options.map(function (v) {
-      if (v != null && v.options) {
-        return v.options.find(function (q) {
+    options.map(v => {
+      if (v?.options) {
+        return v.options.find(q => {
           if (q.id === selected) {
             value = q.name;
             return;
@@ -82,33 +81,24 @@ export var ComboBox = function ComboBox(_ref) {
     });
     return value;
   }, [options, selected]);
-  var _useState = useState(selectedName),
-    value = _useState[0],
-    setValue = _useState[1];
-  var _useState2 = useState(false),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
-  var handleOnChange = useCallback(function (e) {
-    return setValue(e.target.value);
-  }, []);
-  var childNode = useRef();
-  var elementRef = useRef(null);
-  var handleRef = useForkRef(childNode, elementRef);
-  var wrapperRef = useRef(null);
-  var chipWrapper = useRef(null);
-  var comboBoxRef = useRef(null);
-  var _useState3 = useState(false),
-    open = _useState3[0],
-    setOpen = _useState3[1];
-  var isFirstRender = useIsFirstRender();
-  useOnClickOutside(wrapperRef, function (e) {
-    var _comboBoxRef$current;
-    if (e.target && (_comboBoxRef$current = comboBoxRef.current) != null && _comboBoxRef$current.contains(e.target)) {
+  const [value, setValue] = (0, _react.useState)(selectedName);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const handleOnChange = (0, _react.useCallback)(e => setValue(e.target.value), []);
+  const childNode = (0, _react.useRef)();
+  const elementRef = (0, _react.useRef)(null);
+  const handleRef = (0, _useForkRef.default)(childNode, elementRef);
+  const wrapperRef = (0, _react.useRef)(null);
+  const chipWrapper = (0, _react.useRef)(null);
+  const comboBoxRef = (0, _react.useRef)(null);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const isFirstRender = (0, _useIsFirstRender.useIsFirstRender)();
+  (0, _useOnClickOutside.useOnClickOutside)(wrapperRef, e => {
+    if (e.target && comboBoxRef.current?.contains(e.target)) {
       return;
     }
     setOpen(false);
   });
-  var handleOnKeyDown = useCallback(function (e) {
+  const handleOnKeyDown = (0, _react.useCallback)(e => {
     if (e.key === "Escape" && open) {
       setOpen(false);
       setValue(selectedName);
@@ -121,26 +111,25 @@ export var ComboBox = function ComboBox(_ref) {
       setOpen(true);
     }
   }, [focused, open, selectedName, type]);
-  useEffect(function () {
-    var _childNode$current, _childNode$current2;
-    open && (childNode == null ? void 0 : (_childNode$current = childNode.current) == null ? void 0 : _childNode$current.focus());
-    !open && (childNode == null ? void 0 : (_childNode$current2 = childNode.current) == null ? void 0 : _childNode$current2.blur());
+  (0, _react.useEffect)(() => {
+    open && childNode?.current?.focus();
+    !open && childNode?.current?.blur();
   }, [childNode, open]);
-  useEffect(function () {
+  (0, _react.useEffect)(() => {
     setValue(selectedName);
   }, [selectedName]);
-  useEffect(function () {
+  (0, _react.useEffect)(() => {
     if (!open && !isFirstRender && !focused) {
       if (typeof onClose === "function") {
         onClose();
       }
     }
   }, [focused, isFirstRender, onClose, open]);
-  var emptyAction = useCallback(function (v) {
-    handleEmptyAction == null ? void 0 : handleEmptyAction(v);
+  const emptyAction = (0, _react.useCallback)(v => {
+    handleEmptyAction?.(v);
     setOpen(false);
   }, [handleEmptyAction]);
-  var handleChange = useCallback(function (selectedValue) {
+  const handleChange = (0, _react.useCallback)(selectedValue => {
     if (selectedValue !== selected && typeof onChange === "function") {
       onChange(selectedValue);
     }
@@ -148,54 +137,54 @@ export var ComboBox = function ComboBox(_ref) {
       setOpen(false);
     }
   }, [forceCloseMenu, onChange, selected]);
-  var onOpen = useCallback(function () {
+  const onOpen = (0, _react.useCallback)(() => {
     if (!disabled) {
       setOpen(true);
     }
   }, [disabled]);
-  var handleRenderOption = useCallback(function (option, props) {
+  const handleRenderOption = (0, _react.useCallback)((option, props) => {
     if (typeof renderOption === "function") {
       return renderOption(option, props);
     }
     if (type === "multiple") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionContent, {
+      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.createElement(Checkbox, props));
+      }), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionContent, {
+    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.createElement(RadioButton, props));
+    }), /*#__PURE__*/_react.default.createElement(_RadioButton.RadioButton, props));
   }, [type, renderOption]);
-  var handleDeselect = useCallback(function (e) {
+  const handleDeselect = (0, _react.useCallback)(e => {
     e.stopPropagation();
     if (typeof onDeselect === "function") {
       onDeselect();
     } else if (type === "multiple") {
-      onChange == null ? void 0 : onChange([]);
+      onChange?.([]);
     } else {
-      onChange == null ? void 0 : onChange("");
+      onChange?.("");
     }
-    onClear == null ? void 0 : onClear();
+    onClear?.();
     setOpen(false);
   }, [type, onChange, onClear, onDeselect]);
-  var handleMouseDown = useCallback(function (e) {
+  const handleMouseDown = (0, _react.useCallback)(e => {
     e.preventDefault();
   }, []);
-  var handleBlur = useCallback(function () {
+  const handleBlur = (0, _react.useCallback)(() => {
     setValue(selectedName);
     setFocused(!focused);
   }, [focused, selectedName]);
-  var renderChipAdornment = useCallback(function (option, index) {
+  const renderChipAdornment = (0, _react.useCallback)((option, index) => {
     if (typeof renderChip === "function") {
       return renderChip(option, index);
     }
-    var avatarProps = {
+    const avatarProps = {
       size: 18
     };
     switch (size) {
@@ -206,7 +195,7 @@ export var ComboBox = function ComboBox(_ref) {
         avatarProps.size = 14;
         break;
     }
-    var leftAdornment = option.image ? /*#__PURE__*/React.createElement(_StyledAvatar, _extends({
+    const leftAdornment = option.image ? /*#__PURE__*/_react.default.createElement(_StyledAvatar, (0, _extends2.default)({
       url: option.image
     }, avatarProps, {
       $_css: {
@@ -217,26 +206,24 @@ export var ComboBox = function ComboBox(_ref) {
         "marginRight": "0.125rem"
       }
     })) : undefined;
-    var onClose = function onClose(e) {
+    const 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;
-          });
+          const newSelected = selected.filter(item => item !== option.id);
           onChange(newSelected);
         }
       }
     };
-    var showOnClose = true;
+    let showOnClose = true;
     if (disabled) {
       showOnClose = false;
     }
     if (option.color) {
       showOnClose = false;
     }
-    return /*#__PURE__*/React.createElement(Chip, {
+    return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
       className: "c-combo-box-chip",
       leftAdornment: leftAdornment,
       label: option.name,
@@ -248,61 +235,57 @@ export var ComboBox = function ComboBox(_ref) {
       variant: "Caption 1"
     });
   }, [disabled, onChange, renderChip, selected, size]);
-  var autoSize = useMemo(function () {
+  const autoSize = (0, _react.useMemo)(() => {
     if (type === "multiple" && open && Array.isArray(selected) && selected.length > 1) {
       return "auto";
     }
     return size;
   }, [open, selected, size, type]);
-  var startAdornment = useMemo(function () {
+  const startAdornment = (0, _react.useMemo)(() => {
     if (type === "multiple" && Array.isArray(selected) && selected.length > 0) {
-      var elements = [];
-      var total = 0;
-      options.forEach(function (option, index) {
-        var isGrouped = isOptionGroup(option);
+      const elements = [];
+      let total = 0;
+      options.forEach((option, index) => {
+        const 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);
-          });
+          const groupedOptions = option.options.filter(o => selected.includes(o.id));
           total = total + groupedOptions.length;
           if (groupedOptions.length > 0) {
-            groupedOptions.forEach(function (o, _index) {
-              elements.push(renderChipAdornment(o, index + "_" + _index));
+            groupedOptions.forEach((o, _index) => {
+              elements.push(renderChipAdornment(o, `${index}_${_index}`));
             });
           }
         }
       });
-      var _hidden = 0;
+      let hidden = 0;
       if (!open && limitChips > 0 && elements.length > limitChips) {
-        _hidden = elements.splice(limitChips, elements.length - limitChips).length;
+        hidden = elements.splice(limitChips, elements.length - limitChips).length;
       }
-      return /*#__PURE__*/React.createElement(Fragment, null, elements, _hidden > 0 && /*#__PURE__*/React.createElement(_StyledTypography, {
+      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) : "+" + _hidden));
+      }, typeof hiddenNumberText === "function" ? hiddenNumberText(hidden) : `+${hidden}`));
     }
     if (type === "single" && selected) {
-      var optionItem;
-      options.forEach(function (option) {
-        if (isOptionGroup(option)) {
-          optionItem = option.options.find(function (child) {
-            return child.id === selected;
-          });
+      let optionItem;
+      options.forEach(option => {
+        if ((0, _Autocomplete2.isOptionGroup)(option)) {
+          optionItem = option.options.find(child => child.id === selected);
         } else if (!optionItem && option.id === selected) {
           optionItem = option;
         }
       });
       if (optionItem && optionItem.image) {
-        var avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
+        const avatarSize = size === "big" ? 22 : size === "regular" ? 18 : 14;
         if (Array.isArray(optionItem.image)) {
-          return /*#__PURE__*/React.createElement(MultiAvatar, {
+          return /*#__PURE__*/_react.default.createElement(_MultiAvatar.MultiAvatar, {
             url: optionItem.image,
             size: avatarSize
           });
         }
-        return /*#__PURE__*/React.createElement(Avatar, {
+        return /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {
           url: optionItem.image,
           size: avatarSize
         });
@@ -310,31 +293,30 @@ export var ComboBox = function ComboBox(_ref) {
     }
     return undefined;
   }, [type, selected, options, open, limitChips, hiddenNumberText, renderChipAdornment, size]);
-  var showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
-  var hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
-  return /*#__PURE__*/React.createElement("div", {
+  const showXIcon = Array.isArray(selected) && type === "multiple" && selected.length > 0;
+  const hasSelected = type === "multiple" && Array.isArray(selected) && selected.length > 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "c-combo-box"
-  }, type === "multiple" ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StyledStyledInputWrapper, {
+  }, type === "multiple" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_StyledStyledInputWrapper, {
     $disabled: disabled,
     $size: size,
     $invalid: invalid,
     ref: comboBoxRef,
-    className: classNames("c-combo-box-input-wrapper", inputWrapperClassName),
-    onClick: function onClick() {
-      var _elementRef$current;
-      (_elementRef$current = elementRef.current) == null ? void 0 : _elementRef$current.click();
+    className: (0, _classnames.default)("c-combo-box-input-wrapper", inputWrapperClassName),
+    onClick: () => {
+      elementRef.current?.click();
     },
     $_css3: autoSize === "auto" ? "auto" : undefined,
     $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
     $_css5: autoSize === "auto" && scrollWrapper ? "80px" : undefined
-  }, /*#__PURE__*/React.createElement(StyledChipWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledChipWrapper, {
     $autoSize: autoSize,
     $open: open,
     ref: chipWrapper
-  }, startAdornment, /*#__PURE__*/React.createElement(StyledInput, {
+  }, startAdornment, /*#__PURE__*/_react.default.createElement(_Styles2.StyledInput, {
     className: "c-combo-box-input",
     onBlur: handleBlur,
-    onFocus: function onFocus() {
+    onFocus: () => {
       setFocused(!focused);
     },
     onClick: onOpen,
@@ -352,17 +334,17 @@ export var ComboBox = function ComboBox(_ref) {
       alignSelf: "center",
       width: autoSize === "auto" ? "auto" : "100%"
     }
-  })), !disabled && /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, showXIcon && /*#__PURE__*/React.createElement(_StyledTrigger, {
+  })), !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.createElement(StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)), /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
     $open: open
-  }))))) : /*#__PURE__*/React.createElement(StyledComboBoxInput, {
-    className: classNames("c-combo-box-input", inputWrapperClassName),
+  }))))) : /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
+    className: (0, _classnames.default)("c-combo-box-input", inputWrapperClassName),
     onBlur: handleBlur,
     wrapperClick: onOpen,
-    onFocus: function onFocus() {
+    onFocus: () => {
       setFocused(!focused);
     },
     onClick: onOpen,
@@ -377,37 +359,35 @@ export var ComboBox = function ComboBox(_ref) {
     invalid: invalid,
     $loading: loading,
     startAdornment: startAdornment,
-    endAdornment: !disabled ? /*#__PURE__*/React.createElement(InputAdornment, {
+    endAdornment: !disabled ? /*#__PURE__*/_react.default.createElement(_InputAdornment.InputAdornment, {
       disablePointerEvents: disabled
-    }, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(IconButton, {
+    }, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : selected ? /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
       onMouseDown: handleMouseDown,
       onClick: handleDeselect,
       variant: "text gray",
       size: "small"
-    }, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
+    }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
       $open: open
     })) : null
-  }), !disabled ? /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  }), !disabled ? /*#__PURE__*/_react.default.createElement(_ConditionWrapper.ConditionalWrapper, {
     condition: inPortal,
-    wrap: function wrap(children) {
-      return /*#__PURE__*/React.createElement(Portal, null, children);
-    }
-  }, /*#__PURE__*/React.createElement(Popper, {
+    wrap: children => /*#__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 ? void 0 : _comboBoxRef$current2.clientWidth
+      width: comboBoxRef.current?.clientWidth
     },
     ref: wrapperRef,
     strategy: "fixed"
-  }, /*#__PURE__*/React.createElement(RemoveScroll, {
+  }, /*#__PURE__*/_react.default.createElement(_reactRemoveScroll.RemoveScroll, {
     noIsolation: true,
     allowPinchZoom: true
-  }, /*#__PURE__*/React.createElement(StyledComboBoxList, {
-    $width: (_comboBoxRef$current3 = comboBoxRef.current) == null ? void 0 : _comboBoxRef$current3.clientWidth
-  }, /*#__PURE__*/React.createElement(Autocomplete, _extends({}, prop, {
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxList, {
+    $width: comboBoxRef.current?.clientWidth
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, (0, _extends2.default)({}, prop, {
     inputEl: childNode,
     selected: selected,
     handleChange: handleChange,
@@ -417,30 +397,21 @@ export var ComboBox = function ComboBox(_ref) {
     handleEmptyAction: emptyAction
   })))))) : null);
 };
+exports.ComboBox = ComboBox;
 ComboBox.displayName = "ComboBox";
-var _StyledAvatar = _styled(Avatar).withConfig({
+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 = _styled(Typography).withConfig({
+})(["", " ", ""], p => p.$_css, p => 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 = _styled(StyledInputWrapper).withConfig({
+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:", ";max-height:", ";"], function (p) {
-  return p.$_css3;
-}, function (p) {
-  return p.$_css4;
-}, function (p) {
-  return p.$_css5;
-});
-var _StyledTrigger = _styled(Trigger).withConfig({
+})(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], p => p.$_css3, p => p.$_css4, p => p.$_css5);
+var _StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
   displayName: "ComboBox___StyledTrigger",
   componentId: "sc-uvsz9l-3"
 })(["display:flex;justify-content:center;"]);