@chayns-components/core 5.0.0-beta.1155 → 5.0.0-beta.1158

package/lib/cjs/components/combobox/ComboBox.js

@@ -5,24 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _react = require("motion/react");
-var _react2 = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
-var _comboBox = require("../../types/comboBox");
+var _react = _interopRequireWildcard(require("react"));
 var _calculate = require("../../utils/calculate");
 var _environment = require("../../utils/environment");
 var _AreaContextProvider = require("../area-provider/AreaContextProvider");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
 var _ComboBox = require("./ComboBox.styles");
+var _DropdownBodyWrapper = _interopRequireDefault(require("../dropdown-body-wrapper/DropdownBodyWrapper"));
+var _dropdown = require("../../types/dropdown");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ComboBox = ({
   bodyWidth,
-  direction = _comboBox.ComboBoxDirection.RIGHT,
+  direction = _dropdown.DropdownDirection.RIGHT,
   isDisabled = false,
   lists,
-  maxHeight = '280px',
+  maxHeight = 280,
   onSelect,
   placeholder,
   prefix,
@@ -38,40 +37,30 @@ const ComboBox = ({
   onInputBlur,
   inputValue
 }) => {
-  const [internalSelectedItem, setInternalSelectedItem] = (0, _react2.useState)();
-  const [isAnimating, setIsAnimating] = (0, _react2.useState)(false);
-  const [minWidth, setMinWidth] = (0, _react2.useState)(undefined);
-  const [bodyMinWidth, setBodyMinWidth] = (0, _react2.useState)(0);
-  const [focusedIndex, setFocusedIndex] = (0, _react2.useState)(null);
-  const [overflowY, setOverflowY] = (0, _react2.useState)('hidden');
-  const [translateX, setTranslateX] = (0, _react2.useState)('0px');
-  const [translateY, setTranslateY] = (0, _react2.useState)('0px');
-  const [portal, setPortal] = (0, _react2.useState)();
-  const [internalCoordinates, setInternalCoordinates] = (0, _react2.useState)({
-    x: 0,
-    y: 0
-  });
-  const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
-  const [shouldUseTopAlignment, setShouldUseTopAlignment] = (0, _react2.useState)(false);
-  const isInputFocused = (0, _react2.useRef)(false);
-  const styledComboBoxElementRef = (0, _react2.useRef)(null);
-  const contentRef = (0, _react2.useRef)(null);
+  const [internalSelectedItem, setInternalSelectedItem] = (0, _react.useState)();
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [minWidth, setMinWidth] = (0, _react.useState)(undefined);
+  const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
+  const isInputFocused = (0, _react.useRef)(false);
+  const styledComboBoxElementRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
   const functions = (0, _chaynsApi.useFunctions)();
   const values = (0, _chaynsApi.useValues)();
+  const isTouch = (0, _environment.getIsTouch)();
   const {
     browser
   } = (0, _chaynsApi.useDevice)();
-  const isTouch = (0, _environment.getIsTouch)();
-  const areaProvider = (0, _react2.useContext)(_AreaContextProvider.AreaContext);
-  const shouldChangeColor = (0, _react2.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
-  const shouldDisableActions = (0, _react2.useMemo)(() => {
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldDisableActions = (0, _react.useMemo)(() => {
     if (!selectedItem) {
       return false;
     }
     const combinedLists = lists.flatMap(list => list.list);
     return combinedLists.length === 1 && combinedLists.some(item => item.value === selectedItem.value);
   }, [lists, selectedItem]);
-  const contentHeight = (0, _react2.useMemo)(() => {
+  const contentHeight = (0, _react.useMemo)(() => {
     const flatItems = lists.flatMap(list => list.list);
     let result = flatItems.length * 36;
     if (lists.length > 1) {
@@ -87,81 +76,25 @@ const ComboBox = ({
     }
     return result;
   }, [lists, maxHeight]);
-  (0, _react2.useEffect)(() => {
-    if (styledComboBoxElementRef.current && !container) {
-      const el = styledComboBoxElementRef.current;
-      const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('body');
-      setNewContainer(element);
-    }
-  }, [container]);
-  (0, _react2.useEffect)(() => {
-    if (container instanceof Element) {
-      setNewContainer(container);
-    }
-  }, [container]);
-  const handleInputFocus = (0, _react2.useCallback)(event => {
+  const handleInputFocus = (0, _react.useCallback)(event => {
     isInputFocused.current = true;
     onInputFocus === null || onInputFocus === void 0 || onInputFocus(event);
   }, [onInputFocus]);
-  const handleInputBlur = (0, _react2.useCallback)(event => {
+  const handleInputBlur = (0, _react.useCallback)(event => {
     isInputFocused.current = false;
     onInputBlur === null || onInputBlur === void 0 || onInputBlur(event);
   }, [onInputBlur]);
-  const handleClick = (0, _react2.useCallback)(event => {
-    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
-      setIsAnimating(false);
-    }
-  }, [styledComboBoxElementRef]);
-  const handleOpen = (0, _react2.useCallback)(() => {
-    if (shouldDisableActions) {
-      return;
-    }
-    if (styledComboBoxElementRef.current && newContainer) {
-      const {
-        left: comboBoxLeft,
-        top: comboBoxTop,
-        height
-      } = styledComboBoxElementRef.current.getBoundingClientRect();
-      const {
-        left,
-        top,
-        height: containerHeight
-      } = newContainer.getBoundingClientRect();
-      const x = comboBoxLeft - left + newContainer.scrollLeft;
-      const y = comboBoxTop - top + newContainer.scrollTop;
-      let useTopAlignment = [_comboBox.ComboBoxDirection.TOP, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.TOP_RIGHT].includes(direction);
-      const hasBottomAlignment = [_comboBox.ComboBoxDirection.BOTTOM, _comboBox.ComboBoxDirection.BOTTOM_LEFT, _comboBox.ComboBoxDirection.BOTTOM_RIGHT].includes(direction);
-      if (!hasBottomAlignment && y + height + contentHeight > containerHeight) {
-        useTopAlignment = true;
-        setShouldUseTopAlignment(true);
-      } else {
-        setShouldUseTopAlignment(false);
-      }
-      setInternalCoordinates({
-        x,
-        y: useTopAlignment ? y : y + height
-      });
-      setIsAnimating(true);
-    }
-  }, [shouldDisableActions, newContainer, contentHeight, direction]);
-  const handleClose = (0, _react2.useCallback)(() => {
+  const handleOpen = (0, _react.useCallback)(() => {
+    setIsAnimating(true);
+  }, []);
+  const handleClose = (0, _react.useCallback)(() => {
     setIsAnimating(false);
   }, []);
 
-  /**
-   * This function adds an event listener to the document to close the combobox when the user clicks outside of it
-   */
-  (0, _react2.useEffect)(() => {
-    document.addEventListener('click', handleClick);
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [handleClick, styledComboBoxElementRef]);
-
   /**
    * This function sets the selected item
    */
-  const handleSetSelectedItem = (0, _react2.useCallback)(itemToSelect => {
+  const handleSetSelectedItem = (0, _react.useCallback)(itemToSelect => {
     if (typeof onSelect === 'function') {
       const onSelectResult = onSelect(itemToSelect);
       if (onSelectResult === false) {
@@ -179,45 +112,44 @@ const ComboBox = ({
     setInternalSelectedItem(itemToSelect);
     setIsAnimating(false);
   }, [onSelect]);
-  const handleClear = (0, _react2.useCallback)(event => {
+  const handleClear = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
     handleSetSelectedItem(undefined);
   }, [handleSetSelectedItem]);
-  (0, _react2.useEffect)(() => {
-    const currentContent = contentRef.current;
-    if (portal && isAnimating && currentContent) {
-      const scrollHeight = currentContent.scrollHeight ?? 0;
-      const maxHeightInPixels = (0, _calculate.getMaxHeightInPixels)(maxHeight, styledComboBoxElementRef.current ?? document.body);
-      setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
-    }
-  }, [isAnimating, maxHeight, portal]);
-  (0, _react2.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     const handleKeyDown = e => {
-      if (!isAnimating) {
-        return;
-      }
+      if (!isAnimating) return;
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         var _contentRef$current;
         e.preventDefault();
         const children = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.children;
-        if (children && children.length > 0) {
-          const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
-          if (focusedIndex !== null) {
-            const prevElement = children[focusedIndex];
-            prevElement.tabIndex = -1;
-          }
-          setFocusedIndex(newIndex);
+        if (!children || children.length === 0) return;
+        const stepDirection = e.key === 'ArrowUp' ? -1 : 1;
+        let newIndex = focusedIndex ?? -1;
+        let attempts = 0;
+        do {
+          newIndex = (newIndex + stepDirection + children.length) % children.length;
           const newElement = children[newIndex];
-          newElement.tabIndex = 0;
-          newElement.focus();
+          let shouldSkip = false;
+          if (newElement.id.startsWith('combobox-group--') || newElement.id.endsWith('--disabled-item')) {
+            shouldSkip = true;
+          }
+          if (!shouldSkip) break;
+          attempts++;
+        } while (attempts < children.length);
+        if (focusedIndex !== null) {
+          const prevElement = children[focusedIndex];
+          prevElement.tabIndex = -1;
         }
+        setFocusedIndex(newIndex);
+        const focusedElement = children[newIndex];
+        focusedElement.tabIndex = 0;
+        focusedElement.focus();
       } else if (e.key === 'Enter' && focusedIndex !== null) {
         var _contentRef$current2;
         const element = (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.children[focusedIndex];
-        if (!element) {
-          return;
-        }
+        if (!element) return;
         const {
           id
         } = element;
@@ -228,22 +160,19 @@ const ComboBox = ({
           }) => String(value) === id.replace('combobox-item__', ''));
           return !!newSelectedItem;
         });
-        if (!newSelectedItem) {
-          return;
+        if (newSelectedItem) {
+          handleSetSelectedItem(newSelectedItem);
         }
-        handleSetSelectedItem(newSelectedItem);
       }
     };
     document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
+    return () => document.removeEventListener('keydown', handleKeyDown);
   }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
 
   /**
    * This function calculates the greatest width
    */
-  (0, _react2.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     var _styledComboBoxElemen;
     const allItems = lists.flatMap(list => list.list);
     const hasImage = [selectedItem, ...allItems].some(item => item === null || item === void 0 ? void 0 : item.imageUrl);
@@ -294,19 +223,11 @@ const ComboBox = ({
   /**
    * This function sets the external selected item
    */
-  (0, _react2.useEffect)(() => {
+  (0, _react.useEffect)(() => {
     setIsAnimating(false);
     setInternalSelectedItem(selectedItem);
   }, [selectedItem]);
-  (0, _react2.useEffect)(() => {
-    if ([_comboBox.ComboBoxDirection.BOTTOM_LEFT, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.LEFT].includes(direction) && typeof bodyWidth === 'number' && typeof minWidth === 'number') {
-      const difference = minWidth - bodyWidth;
-      setTranslateX(`${difference}px`);
-    } else {
-      setTranslateX('0px');
-    }
-  }, [bodyWidth, direction, minWidth]);
-  const placeholderImageUrl = (0, _react2.useMemo)(() => {
+  const placeholderImageUrl = (0, _react.useMemo)(() => {
     if (selectedItem) {
       return selectedItem.imageUrl;
     }
@@ -315,7 +236,7 @@ const ComboBox = ({
     }
     return undefined;
   }, [internalSelectedItem, selectedItem]);
-  const placeholderIcon = (0, _react2.useMemo)(() => {
+  const placeholderIcon = (0, _react.useMemo)(() => {
     if (selectedItem) {
       return selectedItem.icons;
     }
@@ -328,7 +249,7 @@ const ComboBox = ({
   /**
    * This function resets the placeholder
    */
-  const placeholderText = (0, _react2.useMemo)(() => {
+  const placeholderText = (0, _react.useMemo)(() => {
     let text = placeholder;
     if (selectedItem) {
       text = selectedItem.text;
@@ -337,7 +258,7 @@ const ComboBox = ({
     }
     return text;
   }, [internalSelectedItem, placeholder, selectedItem]);
-  const shouldShowRoundPlaceholderImage = (0, _react2.useMemo)(() => {
+  const shouldShowRoundPlaceholderImage = (0, _react.useMemo)(() => {
     const selectedItemList = lists.find(list => list.list.some(({
       value
     }) => value === ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) ?? (internalSelectedItem === null || internalSelectedItem === void 0 ? void 0 : internalSelectedItem.value))));
@@ -347,7 +268,7 @@ const ComboBox = ({
   /**
    * This function opens the content of the combobox
    */
-  const handleHeaderClick = (0, _react2.useCallback)(() => {
+  const handleHeaderClick = (0, _react.useCallback)(() => {
     if (!isDisabled && !isInputFocused.current) {
       if (isAnimating) {
         handleClose();
@@ -356,12 +277,14 @@ const ComboBox = ({
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxGroups = (0, _react2.useMemo)(() => lists.map(list => /*#__PURE__*/_react2.default.createElement("div", {
+  const comboBoxGroups = (0, _react.useMemo)(() => lists.map(list => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: list.groupName ?? 'default-group'
-  }, list.groupName && lists.length > 1 && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxTopic, null, list.groupName), list.list.map(item =>
+  }, list.groupName && lists.length > 1 && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxTopic, {
+    id: `combobox-group--${list.groupName}`
+  }, list.groupName), list.list.map(item =>
   /*#__PURE__*/
   // ToDo: Cleanup this - item should be given as a prop to avoid full spreading
-  _react2.default.createElement(_ComboBoxItem.default, {
+  _react.default.createElement(_ComboBoxItem.default, {
     icons: item.icons,
     id: item.value,
     imageBackground: item.imageBackground,
@@ -379,59 +302,12 @@ const ComboBox = ({
     value: item.value,
     textStyles: item.textStyles
   })))), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
-  const bodyStyles = (0, _react2.useMemo)(() => ({
-    left: internalCoordinates.x,
-    top: internalCoordinates.y
-  }), [internalCoordinates.x, internalCoordinates.y]);
-  (0, _react2.useEffect)(() => {
-    const useTopAlignment = shouldUseTopAlignment || [_comboBox.ComboBoxDirection.TOP, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.TOP_RIGHT].includes(direction);
-    if (useTopAlignment) {
-      setTranslateY('-100%');
-    } else {
-      setTranslateY('0px');
-    }
-  }, [direction, shouldUseTopAlignment]);
-  (0, _react2.useEffect)(() => {
-    if (!newContainer) {
-      return;
-    }
-    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
-      initial: false
-    }, isAnimating && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
-      $browser: browser === null || browser === void 0 ? void 0 : browser.name,
-      animate: {
-        height: 'fit-content',
-        opacity: 1
-      },
-      $overflowY: overflowY,
-      $translateX: translateX,
-      $translateY: translateY,
-      initial: {
-        height: 0,
-        opacity: 0
-      },
-      exit: {
-        height: 0,
-        opacity: 0
-      },
-      $maxHeight: maxHeight,
-      $minWidth: bodyWidth ?? bodyMinWidth,
-      style: bodyStyles,
-      $direction: direction,
-      $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
-      transition: {
-        duration: 0.2
-      },
-      tabIndex: 0,
-      ref: contentRef
-    }, comboBoxGroups)), newContainer));
-  }, [bodyWidth, bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth, translateX, translateY]);
-  return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBox, {
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
     $shouldUseFullWidth: shouldUseFullWidth,
     $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth
-  }, /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxHeader, {
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
     $direction: direction,
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
@@ -439,30 +315,47 @@ const ComboBox = ({
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage
-  }, /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPrefix, null, prefix), /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefix, null, prefix), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
-  }, placeholderImageUrl && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
+  }, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
     $shouldShowBigImage: shouldShowBigImage,
     $shouldShowRoundImage: shouldShowRoundPlaceholderImage
-  }), placeholderIcon && /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+  }), placeholderIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: placeholderIcon
-  }), typeof inputValue === 'string' ? /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxInput, {
+  }), typeof inputValue === 'string' ? /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxInput, {
     disabled: isDisabled,
     value: inputValue,
     onChange: onInputChange,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     placeholder: placeholderText
-  }) : /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxClearIconWrapper, {
+  }) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxClearIconWrapper, {
     onClick: handleClear
-  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-times']
-  })), !shouldDisableActions && /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBoxIconWrapper, {
+  })), !shouldDisableActions && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, {
     $shouldShowBorderLeft: shouldShowClearIcon === true && internalSelectedItem !== undefined
-  }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-chevron-down']
-  }))), portal), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, portal]);
+  }))), styledComboBoxElementRef.current && /*#__PURE__*/_react.default.createElement(_DropdownBodyWrapper.default, {
+    anchorElement: styledComboBoxElementRef.current,
+    bodyWidth: bodyWidth,
+    contentHeight: contentHeight,
+    onClose: handleClose,
+    direction: direction,
+    container: container,
+    shouldShowDropdown: isAnimating,
+    minBodyWidth: bodyWidth ?? bodyMinWidth,
+    maxHeight: maxHeight
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxBody, {
+    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
+    $maxHeight: maxHeight,
+    $minWidth: bodyWidth ?? bodyMinWidth,
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    ref: contentRef,
+    tabIndex: 0
+  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, handleClose, container, bodyMinWidth, maxHeight, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;