@chayns-components/core 5.0.0-beta.998 → 5.0.0

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

@@ -1,69 +1,83 @@
 import { useDevice, useFunctions, useValues } from 'chayns-api';
-import { AnimatePresence } from 'framer-motion';
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { ComboBoxDirection } from '../../types/comboBox';
-import { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';
-import { getIsTouch } from '../../utils/environment';
+import React, { forwardRef, Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { calculateMaxComboBoxItemWidth } from '../../utils/calculate';
+import { useIsTouch } from '../../utils/environment';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import Icon from '../icon/Icon';
 import ComboBoxItem from './combobox-item/ComboBoxItem';
-import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxInput, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledComboBoxPlaceholderText, StyledComboBoxPrefix, StyledComboBoxPrefixAndPlaceholderWrapper, StyledComboBoxTopic, StyledMotionComboBoxBody } from './ComboBox.styles';
-const ComboBox = _ref => {
-  let {
-    direction = ComboBoxDirection.BOTTOM,
-    isDisabled = false,
-    lists,
-    maxHeight = '280px',
-    onSelect,
-    placeholder,
-    prefix,
-    container,
-    selectedItem,
-    shouldShowBigImage,
-    shouldShowRoundImage,
-    onInputFocus,
-    shouldUseFullWidth = false,
-    onInputChange,
-    shouldUseCurrentItemWidth = false,
-    onInputBlur,
-    inputValue
-  } = _ref;
+import { StyledComboBox, StyledComboBoxBody, StyledComboBoxClearIconWrapper, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxInput, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledComboBoxPlaceholderText, StyledComboBoxPrefix, StyledComboBoxPrefixAndPlaceholderWrapper, StyledComboBoxTopic } from './ComboBox.styles';
+import DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';
+import { DropdownDirection } from '../../types/dropdown';
+import { useElementSize } from '../../hooks/element';
+const ComboBox = /*#__PURE__*/forwardRef(({
+  bodyWidth,
+  direction = DropdownDirection.RIGHT,
+  isDisabled = false,
+  lists,
+  maxHeight = 280,
+  onSelect,
+  placeholder,
+  prefix,
+  container,
+  selectedItem,
+  shouldShowBigImage,
+  shouldShowClearIcon,
+  shouldShowRoundImage,
+  onInputFocus,
+  prefixMinWidth,
+  shouldUseFullWidth = false,
+  onInputChange,
+  shouldUseCurrentItemWidth = false,
+  onInputBlur,
+  shouldShowTransparentBackground = false,
+  inputValue,
+  shouldDropDownUseMaxItemWidth = false
+}, ref) => {
   const [internalSelectedItem, setInternalSelectedItem] = useState();
   const [isAnimating, setIsAnimating] = useState(false);
   const [minWidth, setMinWidth] = useState(undefined);
   const [bodyMinWidth, setBodyMinWidth] = useState(0);
   const [focusedIndex, setFocusedIndex] = useState(null);
-  const [overflowY, setOverflowY] = useState('hidden');
-  const [portal, setPortal] = useState();
-  const [internalCoordinates, setInternalCoordinates] = useState({
-    x: 0,
-    y: 0
-  });
-  const [newContainer, setNewContainer] = useState(container ?? null);
   const isInputFocused = useRef(false);
   const styledComboBoxElementRef = useRef(null);
   const contentRef = useRef(null);
+  const parentSize = useElementSize(styledComboBoxElementRef, {
+    shouldUseParentElement: true
+  });
   const functions = useFunctions();
   const values = useValues();
+  const isTouch = useIsTouch();
   const {
     browser
   } = useDevice();
-  const isTouch = getIsTouch();
   const areaProvider = useContext(AreaContext);
-  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   useEffect(() => {
-    if (styledComboBoxElementRef.current && !container) {
-      const el = styledComboBoxElementRef.current;
-      const element = el.closest('.dialog-inner') || el.closest('body');
-      setNewContainer(element);
+    if (shouldUseFullWidth && parentSize) {
+      setMinWidth(parentSize.width);
     }
-  }, [container]);
-  useEffect(() => {
-    if (container instanceof Element) {
-      setNewContainer(container);
+  }, [parentSize, shouldUseFullWidth]);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldDisableActions = 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 = useMemo(() => {
+    const flatItems = lists.flatMap(list => list.list);
+    let height = flatItems.reduce((value, item) => {
+      const isBigItem = shouldShowBigImage || typeof item.subtext === 'string' && item.subtext.trim() !== '';
+      return value + (isBigItem ? 56 : 38);
+    }, 0);
+    if (lists.length > 1) {
+      height += lists.length * 38;
     }
-  }, [container]);
+    if (maxHeight < height) {
+      height = maxHeight;
+    }
+    return height;
+  }, [lists, maxHeight, shouldShowBigImage]);
   const handleInputFocus = useCallback(event => {
     isInputFocused.current = true;
     onInputFocus?.(event);
@@ -72,111 +86,87 @@ const ComboBox = _ref => {
     isInputFocused.current = false;
     onInputBlur?.(event);
   }, [onInputBlur]);
-  const handleClick = useCallback(event => {
-    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
-      setIsAnimating(false);
-    }
-  }, [styledComboBoxElementRef]);
   const handleOpen = useCallback(() => {
-    if (styledComboBoxElementRef.current && newContainer) {
-      const {
-        left: comboBoxLeft,
-        top: comboBoxTop,
-        height
-      } = styledComboBoxElementRef.current.getBoundingClientRect();
-      const {
-        left: containerLeft,
-        top: containerTop
-      } = newContainer.getBoundingClientRect();
-      const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;
-      const y = comboBoxTop - containerTop + newContainer.scrollTop;
-      setInternalCoordinates({
-        x,
-        y: direction === ComboBoxDirection.TOP ? y : y + height
-      });
-      setIsAnimating(true);
-    }
-  }, [newContainer, direction]);
+    setIsAnimating(true);
+  }, []);
   const handleClose = useCallback(() => {
     setIsAnimating(false);
   }, []);
 
-  /**
-   * This function adds an event listener to the document to close the combobox when the user clicks outside of it
-   */
-  useEffect(() => {
-    document.addEventListener('click', handleClick);
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [handleClick, styledComboBoxElementRef]);
-
   /**
    * This function sets the selected item
    */
   const handleSetSelectedItem = useCallback(itemToSelect => {
     if (typeof onSelect === 'function') {
-      const shouldPreventSelection = onSelect(itemToSelect) === false;
-      if (shouldPreventSelection) return;
+      const onSelectResult = onSelect(itemToSelect);
+      if (onSelectResult === false) {
+        return;
+      }
+      if (onSelectResult instanceof Promise) {
+        void onSelectResult.then(shouldPreventSelection => {
+          if (shouldPreventSelection) return;
+          setInternalSelectedItem(itemToSelect);
+          setIsAnimating(false);
+        });
+        return;
+      }
     }
     setInternalSelectedItem(itemToSelect);
     setIsAnimating(false);
   }, [onSelect]);
-  useEffect(() => {
-    const currentContent = contentRef.current;
-    if (portal && isAnimating && currentContent) {
-      const scrollHeight = currentContent.scrollHeight ?? 0;
-      const maxHeightInPixels = getMaxHeightInPixels(maxHeight, styledComboBoxElementRef.current ?? document.body);
-      setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
-    }
-  }, [isAnimating, maxHeight, portal]);
+  const handleClear = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    handleSetSelectedItem(undefined);
+  }, [handleSetSelectedItem]);
   useEffect(() => {
     const handleKeyDown = e => {
-      if (!isAnimating) {
-        return;
-      }
+      if (!isAnimating) return;
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
         const children = 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) {
         const element = contentRef.current?.children[focusedIndex];
-        if (!element) {
-          return;
-        }
+        if (!element) return;
         const {
           id
         } = element;
         let newSelectedItem;
         lists.some(list => {
-          newSelectedItem = list.list.find(_ref2 => {
-            let {
-              value
-            } = _ref2;
-            return String(value) === id.replace('combobox-item__', '');
-          });
+          newSelectedItem = list.list.find(({
+            value
+          }) => 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]);
 
   /**
@@ -184,26 +174,42 @@ const ComboBox = _ref => {
    */
   useEffect(() => {
     const allItems = lists.flatMap(list => list.list);
+    let maxItemWidth = calculateMaxComboBoxItemWidth({
+      list: [...allItems, {
+        text: placeholder,
+        value: 'placeholder'
+      }, ...(selectedItem ? [selectedItem] : [])],
+      functions,
+      shouldShowBigImage,
+      values
+    });
+    if (shouldDropDownUseMaxItemWidth) {
+      maxItemWidth += 20 + 2 + 1; // 20px padding (left and right), 2px border, 1px puffer for rounding errors
+
+      setBodyMinWidth(maxItemWidth);
+      setMinWidth(maxItemWidth);
+      return;
+    }
     const hasImage = [selectedItem, ...allItems].some(item => item?.imageUrl);
     const hasIcon = [selectedItem, ...allItems].some(item => item?.icons);
     const parentWidth = styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;
-    const paddingWidth = 45; // padding + border + arrow icon
+    const paddingWidth = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear icon
     const imageWidth = hasImage ? 32 : 0; // image width + gap if images present
     const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present
 
     let prefixWidth = 0;
     if (prefix) {
-      const prefixTextWidth = calculateContentWidth([{
-        text: prefix,
-        value: 'prefix'
-      }], functions, values) + 5;
-      prefixWidth = Math.max(prefixTextWidth, 32);
+      const prefixTextWidth = calculateMaxComboBoxItemWidth({
+        list: [{
+          text: prefix,
+          value: 'prefix'
+        }],
+        functions,
+        values
+      });
+      prefixWidth = Math.max(prefixTextWidth + 5, 32);
     }
-    const baseWidth = calculateContentWidth([...allItems, {
-      text: placeholder,
-      value: 'placeholder'
-    }, ...(selectedItem ? [selectedItem] : [])], functions, values);
-    const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
+    const calculatedWidth = maxItemWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
     let tmpMinWidth = calculatedWidth;
     let tmpBodyMinWidth = calculatedWidth;
 
@@ -212,10 +218,15 @@ const ComboBox = _ref => {
       tmpMinWidth = parentWidth;
       tmpBodyMinWidth = parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;
     }
-
     // Current item width settings
     else if (shouldUseCurrentItemWidth && internalSelectedItem) {
-      const itemWidth = calculateContentWidth([internalSelectedItem], functions, values) + paddingWidth + imageWidth + iconWidth + prefixWidth;
+      const internalSelectedItemWidth = calculateMaxComboBoxItemWidth({
+        list: [internalSelectedItem],
+        functions,
+        shouldShowBigImage,
+        values
+      });
+      const itemWidth = internalSelectedItemWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
       tmpMinWidth = itemWidth;
       tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
     }
@@ -227,7 +238,7 @@ const ComboBox = _ref => {
     }
     setMinWidth(tmpMinWidth);
     setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
-  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem, functions, values]);
+  }, [functions, internalSelectedItem, lists, placeholder, prefix, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
 
   /**
    * This function sets the external selected item
@@ -268,12 +279,9 @@ const ComboBox = _ref => {
     return text;
   }, [internalSelectedItem, placeholder, selectedItem]);
   const shouldShowRoundPlaceholderImage = useMemo(() => {
-    const selectedItemList = lists.find(list => list.list.some(_ref3 => {
-      let {
-        value
-      } = _ref3;
-      return value === (selectedItem?.value ?? internalSelectedItem?.value);
-    }));
+    const selectedItemList = lists.find(list => list.list.some(({
+      value
+    }) => value === (selectedItem?.value ?? internalSelectedItem?.value)));
     return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;
   }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);
 
@@ -289,75 +297,22 @@ const ComboBox = _ref => {
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxGroups = useMemo(() => lists.map(list => /*#__PURE__*/React.createElement("div", {
+  useImperativeHandle(ref, () => ({
+    hide: handleClose,
+    show: handleOpen
+  }), [handleClose, handleOpen]);
+  const comboBoxGroups = useMemo(() => lists.map(list => /*#__PURE__*/React.createElement(Fragment, {
     key: list.groupName ?? 'default-group'
-  }, list.groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, list.groupName), list.list.map(item =>
-  /*#__PURE__*/
-  // ToDo: Cleanup this - item should be given as a prop to avoid full spreading
-  React.createElement(ComboBoxItem, {
-    icons: item.icons,
-    id: item.value,
-    imageBackground: item.imageBackground,
-    imageUrl: item.imageUrl,
-    isDisabled: item.isDisabled,
+  }, list.groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, {
+    id: `combobox-group--${list.groupName}`
+  }, list.groupName), list.list.map(item => /*#__PURE__*/React.createElement(ComboBoxItem, {
+    key: `item-${item.text}`,
+    item: item,
     isSelected: selectedItem ? item.value === selectedItem.value : false,
-    key: item.value,
     onSelect: handleSetSelectedItem,
-    rightElement: item.rightElement,
     shouldShowBigImage: shouldShowBigImage,
-    shouldShowRoundImage: list.shouldShowRoundImage ?? shouldShowRoundImage,
-    subtext: item.subtext,
-    suffixElement: item.suffixElement,
-    text: item.text,
-    value: item.value,
-    textStyles: item.textStyles
+    shouldShowRoundImage: list.shouldShowRoundImage ?? shouldShowRoundImage
   })))), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
-  const bodyStyles = useMemo(() => {
-    let styles = {
-      left: internalCoordinates.x,
-      top: internalCoordinates.y
-    };
-    if (direction === ComboBoxDirection.TOP) {
-      styles = {
-        ...styles,
-        transform: 'translateY(-100%)'
-      };
-    }
-    return styles;
-  }, [direction, internalCoordinates.x, internalCoordinates.y]);
-  useEffect(() => {
-    if (!newContainer) {
-      return;
-    }
-    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
-      initial: false
-    }, isAnimating && /*#__PURE__*/React.createElement(StyledMotionComboBoxBody, {
-      $browser: browser?.name,
-      animate: {
-        height: 'fit-content',
-        opacity: 1
-      },
-      $overflowY: overflowY,
-      initial: {
-        height: 0,
-        opacity: 0
-      },
-      exit: {
-        height: 0,
-        opacity: 0
-      },
-      $maxHeight: maxHeight,
-      $minWidth: bodyMinWidth,
-      style: bodyStyles,
-      $direction: direction,
-      $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
-      transition: {
-        duration: 0.2
-      },
-      tabIndex: 0,
-      ref: contentRef
-    }, comboBoxGroups)), newContainer));
-  }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
@@ -368,10 +323,13 @@ const ComboBox = _ref => {
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
     $isTouch: isTouch,
+    $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage
-  }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, null, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
+  }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, {
+    $prefixMinWidth: prefixMinWidth
+  }, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
   }, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
@@ -386,10 +344,36 @@ const ComboBox = _ref => {
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     placeholder: placeholderText
-  }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    icons: ['fa fa-chevron-down']
-  }))), portal), [minWidth, shouldUseFullWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, inputValue, onInputChange, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, portal, handleInputFocus, handleInputBlur, shouldUseCurrentItemWidth]);
-};
+  }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/React.createElement(StyledComboBoxClearIconWrapper, {
+    $isDisabled: isDisabled,
+    onClick: handleClear
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-times']
+  })), !shouldDisableActions && /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, {
+    $isDisabled: isDisabled,
+    $shouldShowBorderLeft: shouldShowClearIcon === true && internalSelectedItem !== undefined
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-chevron-down'],
+    isDisabled: isDisabled
+  }))), styledComboBoxElementRef.current && /*#__PURE__*/React.createElement(DropdownBodyWrapper, {
+    anchorElement: styledComboBoxElementRef.current,
+    bodyWidth: bodyWidth,
+    contentHeight: contentHeight,
+    onClose: handleClose,
+    direction: direction,
+    container: container,
+    shouldShowDropdown: isAnimating,
+    minBodyWidth: bodyWidth ?? bodyMinWidth,
+    maxHeight: maxHeight
+  }, /*#__PURE__*/React.createElement(StyledComboBoxBody, {
+    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
+    $maxHeight: maxHeight,
+    $minWidth: bodyWidth ?? bodyMinWidth,
+    $browser: browser?.name,
+    ref: contentRef,
+    tabIndex: 0
+  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, shouldShowTransparentBackground, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, prefixMinWidth, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, handleClose, container, bodyMinWidth, maxHeight, browser?.name, comboBoxGroups]);
+});
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;
 //# sourceMappingURL=ComboBox.js.map