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

package/lib/cjs/components/color-scheme-provider/hooks/useDesignSettings.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDesignSettings = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = require("react");
+var _get = require("../../../api/theme/get");
+const useDesignSettings = ({
+  color,
+  colorMode,
+  designSettings,
+  siteId
+}) => {
+  const styleSettings = (0, _chaynsApi.useStyleSettings)();
+  const [value, setValue] = (0, _react.useState)(designSettings ?? (styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings));
+  const shouldLoad = !designSettings && !(styleSettings !== null && styleSettings !== void 0 && styleSettings.designSettings);
+  (0, _react.useEffect)(() => {
+    setValue(designSettings ?? (styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings));
+  }, [designSettings, styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.designSettings]);
+  (0, _react.useEffect)(() => {
+    if (shouldLoad) {
+      void (0, _get.getDesignSettings)(siteId).then(result => {
+        setValue(result);
+      });
+    }
+  }, [shouldLoad, siteId]);
+  return (0, _react.useMemo)(() => ({
+    ...value,
+    color,
+    colorMode
+  }), [color, colorMode, value]);
+};
+exports.useDesignSettings = useDesignSettings;
+//# sourceMappingURL=useDesignSettings.js.map

package/lib/cjs/components/color-scheme-provider/hooks/useDesignSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDesignSettings.js","names":["_chaynsApi","require","_react","_get","useDesignSettings","color","colorMode","designSettings","siteId","styleSettings","useStyleSettings","value","setValue","useState","shouldLoad","useEffect","getDesignSettings","then","result","useMemo","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useDesignSettings.ts"],"sourcesContent":["import { ChaynsDesignSettings, ColorMode, useStyleSettings } from 'chayns-api';\nimport { useEffect, useMemo, useState } from 'react';\nimport { getDesignSettings } from '../../../api/theme/get';\n\ninterface UseDesignSettingsOptions {\n    color?: string;\n    colorMode?: ColorMode;\n    designSettings?: ChaynsDesignSettings;\n    siteId?: string;\n}\n\nexport const useDesignSettings = ({\n    color,\n    colorMode,\n    designSettings,\n    siteId,\n}: UseDesignSettingsOptions) => {\n    const styleSettings = useStyleSettings();\n\n    const [value, setValue] = useState<ChaynsDesignSettings | undefined>(\n        designSettings ?? styleSettings?.designSettings,\n    );\n\n    const shouldLoad = !designSettings && !styleSettings?.designSettings;\n\n    useEffect(() => {\n        setValue(designSettings ?? styleSettings?.designSettings);\n    }, [designSettings, styleSettings?.designSettings]);\n\n    useEffect(() => {\n        if (shouldLoad) {\n            void getDesignSettings(siteId).then((result) => {\n                setValue(result);\n            });\n        }\n    }, [shouldLoad, siteId]);\n\n    return useMemo(\n        () => ({ ...value, color, colorMode }) as ChaynsDesignSettings | undefined,\n        [color, colorMode, value],\n    );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AASO,MAAMG,iBAAiB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC;AACsB,CAAC,KAAK;EAC5B,MAAMC,aAAa,GAAG,IAAAC,2BAAgB,EAAC,CAAC;EAExC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAC9BN,cAAc,KAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,cAAc,CACnD,CAAC;EAED,MAAMO,UAAU,GAAG,CAACP,cAAc,IAAI,EAACE,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEF,cAAc;EAEpE,IAAAQ,gBAAS,EAAC,MAAM;IACZH,QAAQ,CAACL,cAAc,KAAIE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,cAAc,EAAC;EAC7D,CAAC,EAAE,CAACA,cAAc,EAAEE,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEF,cAAc,CAAC,CAAC;EAEnD,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAID,UAAU,EAAE;MACZ,KAAK,IAAAE,sBAAiB,EAACR,MAAM,CAAC,CAACS,IAAI,CAAEC,MAAM,IAAK;QAC5CN,QAAQ,CAACM,MAAM,CAAC;MACpB,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACJ,UAAU,EAAEN,MAAM,CAAC,CAAC;EAExB,OAAO,IAAAW,cAAO,EACV,OAAO;IAAE,GAAGR,KAAK;IAAEN,KAAK;IAAEC;EAAU,CAAC,CAAqC,EAC1E,CAACD,KAAK,EAAEC,SAAS,EAAEK,KAAK,CAC5B,CAAC;AACL,CAAC;AAACS,OAAA,CAAAhB,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/hooks/useParagraphFormat.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useParagraphFormat = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = require("react");
+var _get = require("../../../api/theme/get");
+const useParagraphFormat = (siteId, paragraphFormat) => {
+  const styleSettings = (0, _chaynsApi.useStyleSettings)();
+  const [value, setValue] = (0, _react.useState)([]);
+  const shouldLoad = !paragraphFormat && !(styleSettings !== null && styleSettings !== void 0 && styleSettings.paragraphFormats);
+  (0, _react.useEffect)(() => {
+    if (shouldLoad) {
+      void (0, _get.getParagraphFormat)(siteId).then(result => {
+        setValue(result ?? []);
+      });
+    }
+  }, [shouldLoad, siteId]);
+  return paragraphFormat ?? (styleSettings === null || styleSettings === void 0 ? void 0 : styleSettings.paragraphFormats) ?? value;
+};
+exports.useParagraphFormat = useParagraphFormat;
+//# sourceMappingURL=useParagraphFormat.js.map

package/lib/cjs/components/color-scheme-provider/hooks/useParagraphFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParagraphFormat.js","names":["_chaynsApi","require","_react","_get","useParagraphFormat","siteId","paragraphFormat","styleSettings","useStyleSettings","value","setValue","useState","shouldLoad","paragraphFormats","useEffect","getParagraphFormat","then","result","exports"],"sources":["../../../../../src/components/color-scheme-provider/hooks/useParagraphFormat.ts"],"sourcesContent":["import { ChaynsParagraphFormat, useStyleSettings } from 'chayns-api';\nimport { useEffect, useState } from 'react';\nimport { getParagraphFormat } from '../../../api/theme/get';\n\nexport const useParagraphFormat = (siteId?: string, paragraphFormat?: ChaynsParagraphFormat[]) => {\n    const styleSettings = useStyleSettings();\n    const [value, setValue] = useState<ChaynsParagraphFormat[]>([]);\n    const shouldLoad = !paragraphFormat && !styleSettings?.paragraphFormats;\n\n    useEffect(() => {\n        if (shouldLoad) {\n            void getParagraphFormat(siteId).then((result) => {\n                setValue(result ?? []);\n            });\n        }\n    }, [shouldLoad, siteId]);\n\n    return paragraphFormat ?? styleSettings?.paragraphFormats ?? value;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AAEO,MAAMG,kBAAkB,GAAGA,CAACC,MAAe,EAAEC,eAAyC,KAAK;EAC9F,MAAMC,aAAa,GAAG,IAAAC,2BAAgB,EAAC,CAAC;EACxC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAA0B,EAAE,CAAC;EAC/D,MAAMC,UAAU,GAAG,CAACN,eAAe,IAAI,EAACC,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAEM,gBAAgB;EAEvE,IAAAC,gBAAS,EAAC,MAAM;IACZ,IAAIF,UAAU,EAAE;MACZ,KAAK,IAAAG,uBAAkB,EAACV,MAAM,CAAC,CAACW,IAAI,CAAEC,MAAM,IAAK;QAC7CP,QAAQ,CAACO,MAAM,IAAI,EAAE,CAAC;MAC1B,CAAC,CAAC;IACN;EACJ,CAAC,EAAE,CAACL,UAAU,EAAEP,MAAM,CAAC,CAAC;EAExB,OAAOC,eAAe,KAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,gBAAgB,KAAIJ,KAAK;AACtE,CAAC;AAACS,OAAA,CAAAd,kBAAA,GAAAA,kBAAA","ignoreList":[]}

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

@@ -5,73 +5,87 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
-var _comboBox = require("../../types/comboBox");
 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");
+var _element = require("../../hooks/element");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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 = ({
-  direction = _comboBox.ComboBoxDirection.BOTTOM,
+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 = /*#__PURE__*/(0, _react.forwardRef)(({
+  bodyWidth,
+  direction = _dropdown.DropdownDirection.RIGHT,
   isDisabled = false,
   lists,
-  maxHeight = '280px',
+  maxHeight = 280,
   onSelect,
   placeholder,
   prefix,
   container,
   selectedItem,
   shouldShowBigImage,
+  shouldShowClearIcon,
   shouldShowRoundImage,
   onInputFocus,
+  prefixMinWidth,
   shouldUseFullWidth = false,
   onInputChange,
   shouldUseCurrentItemWidth = false,
   onInputBlur,
-  inputValue
-}) => {
+  shouldShowTransparentBackground = false,
+  inputValue,
+  shouldDropDownUseMaxItemWidth = false
+}, ref) => {
   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 [overflowY, setOverflowY] = (0, _react.useState)('hidden');
-  const [portal, setPortal] = (0, _react.useState)();
-  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
-    x: 0,
-    y: 0
-  });
-  const [newContainer, setNewContainer] = (0, _react.useState)(container ?? null);
   const isInputFocused = (0, _react.useRef)(false);
   const styledComboBoxElementRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
+  const parentSize = (0, _element.useElementSize)(styledComboBoxElementRef, {
+    shouldUseParentElement: true
+  });
   const functions = (0, _chaynsApi.useFunctions)();
   const values = (0, _chaynsApi.useValues)();
+  const isTouch = (0, _environment.useIsTouch)();
   const {
     browser
   } = (0, _chaynsApi.useDevice)();
-  const isTouch = (0, _environment.getIsTouch)();
   const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
-  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   (0, _react.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]);
-  (0, _react.useEffect)(() => {
-    if (container instanceof Element) {
-      setNewContainer(container);
+  }, [parentSize, shouldUseFullWidth]);
+  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, _react.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 = (0, _react.useCallback)(event => {
     isInputFocused.current = true;
     onInputFocus === null || onInputFocus === void 0 || onInputFocus(event);
@@ -80,90 +94,72 @@ const ComboBox = ({
     isInputFocused.current = false;
     onInputBlur === null || onInputBlur === void 0 || onInputBlur(event);
   }, [onInputBlur]);
-  const handleClick = (0, _react.useCallback)(event => {
-    if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
-      setIsAnimating(false);
-    }
-  }, [styledComboBoxElementRef]);
   const handleOpen = (0, _react.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 === _comboBox.ComboBoxDirection.TOP ? y : y + height
-      });
-      setIsAnimating(true);
-    }
-  }, [newContainer, direction]);
+    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, _react.useEffect)(() => {
-    document.addEventListener('click', handleClick);
-    return () => {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [handleClick, styledComboBoxElementRef]);
-
   /**
    * This function sets the selected item
    */
   const handleSetSelectedItem = (0, _react.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]);
-  (0, _react.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]);
+  const handleClear = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    handleSetSelectedItem(undefined);
+  }, [handleSetSelectedItem]);
   (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;
@@ -174,16 +170,13 @@ 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]);
 
   /**
@@ -192,26 +185,42 @@ const ComboBox = ({
   (0, _react.useEffect)(() => {
     var _styledComboBoxElemen;
     const allItems = lists.flatMap(list => list.list);
+    let maxItemWidth = (0, _calculate.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 === null || item === void 0 ? void 0 : item.imageUrl);
     const hasIcon = [selectedItem, ...allItems].some(item => item === null || item === void 0 ? void 0 : item.icons);
     const parentWidth = ((_styledComboBoxElemen = styledComboBoxElementRef.current) === null || _styledComboBoxElemen === void 0 || (_styledComboBoxElemen = _styledComboBoxElemen.parentElement) === null || _styledComboBoxElemen === void 0 ? void 0 : _styledComboBoxElemen.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 = (0, _calculate.calculateContentWidth)([{
-        text: prefix,
-        value: 'prefix'
-      }], functions, values) + 5;
-      prefixWidth = Math.max(prefixTextWidth, 32);
+      const prefixTextWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+        list: [{
+          text: prefix,
+          value: 'prefix'
+        }],
+        functions,
+        values
+      });
+      prefixWidth = Math.max(prefixTextWidth + 5, 32);
     }
-    const baseWidth = (0, _calculate.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;
 
@@ -220,10 +229,15 @@ const ComboBox = ({
       tmpMinWidth = parentWidth;
       tmpBodyMinWidth = parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;
     }
-
     // Current item width settings
     else if (shouldUseCurrentItemWidth && internalSelectedItem) {
-      const itemWidth = (0, _calculate.calculateContentWidth)([internalSelectedItem], functions, values) + paddingWidth + imageWidth + iconWidth + prefixWidth;
+      const internalSelectedItemWidth = (0, _calculate.calculateMaxComboBoxItemWidth)({
+        list: [internalSelectedItem],
+        functions,
+        shouldShowBigImage,
+        values
+      });
+      const itemWidth = internalSelectedItemWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
       tmpMinWidth = itemWidth;
       tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
     }
@@ -235,7 +249,7 @@ const ComboBox = ({
     }
     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
@@ -294,75 +308,22 @@ const ComboBox = ({
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxGroups = (0, _react.useMemo)(() => lists.map(list => /*#__PURE__*/_react.default.createElement("div", {
+  (0, _react.useImperativeHandle)(ref, () => ({
+    hide: handleClose,
+    show: handleOpen
+  }), [handleClose, handleOpen]);
+  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__*/_react.default.createElement(_ComboBox.StyledComboBoxTopic, null, list.groupName), list.list.map(item =>
-  /*#__PURE__*/
-  // ToDo: Cleanup this - item should be given as a prop to avoid full spreading
-  _react.default.createElement(_ComboBoxItem.default, {
-    icons: item.icons,
-    id: item.value,
-    imageBackground: item.imageBackground,
-    imageUrl: item.imageUrl,
-    isDisabled: item.isDisabled,
+  }, list.groupName && lists.length > 1 && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxTopic, {
+    id: `combobox-group--${list.groupName}`
+  }, list.groupName), list.list.map(item => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.default, {
+    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 = (0, _react.useMemo)(() => {
-    let styles = {
-      left: internalCoordinates.x,
-      top: internalCoordinates.y
-    };
-    if (direction === _comboBox.ComboBoxDirection.TOP) {
-      styles = {
-        ...styles,
-        transform: 'translateY(-100%)'
-      };
-    }
-    return styles;
-  }, [direction, internalCoordinates.x, internalCoordinates.y]);
-  (0, _react.useEffect)(() => {
-    if (!newContainer) {
-      return;
-    }
-    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
-      initial: false
-    }, isAnimating && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
-      $browser: browser === null || browser === void 0 ? void 0 : 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 === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
@@ -373,10 +334,13 @@ const ComboBox = ({
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
     $isTouch: isTouch,
+    $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage
-  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefix, null, prefix), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefix, {
+    $prefixMinWidth: prefixMinWidth
+  }, prefix), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
   }, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
@@ -391,10 +355,36 @@ const ComboBox = ({
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     placeholder: placeholderText
-  }) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    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.default.createElement(_ComboBox.StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), shouldShowClearIcon && internalSelectedItem && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxClearIconWrapper, {
+    $isDisabled: isDisabled,
+    onClick: handleClear
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-times']
+  })), !shouldDisableActions && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, {
+    $isDisabled: isDisabled,
+    $shouldShowBorderLeft: shouldShowClearIcon === true && internalSelectedItem !== undefined
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-chevron-down'],
+    isDisabled: isDisabled
+  }))), 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, 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 === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups]);
+});
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;
 //# sourceMappingURL=ComboBox.js.map