@chayns-components/core 5.0.0-beta.776 → 5.0.0-beta.778

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

@@ -34,7 +34,6 @@ const ComboBox = ({
   const [minWidth, setMinWidth] = (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
@@ -94,15 +93,23 @@ const ComboBox = ({
       onSelect(itemToSelect);
     }
   }, [onSelect]);
+  (0, _react.useEffect)(() => {
+    if (isAnimating) {
+      var _contentRef$current;
+      const scrollHeight = ((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.scrollHeight) ?? 0;
+      const maxHeightInPixels = (0, _calculate.getMaxHeightInPixels)(maxHeight, styledComboBoxElementRef.current ?? document.body);
+      setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
+    }
+  }, [isAnimating, maxHeight]);
   (0, _react.useEffect)(() => {
     const handleKeyDown = e => {
       if (!isAnimating) {
         return;
       }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        var _contentRef$current;
+        var _contentRef$current2;
         e.preventDefault();
-        const children = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.children;
+        const children = (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.children;
         if (children && children.length > 0) {
           const newIndex = focusedIndex !== null ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
           if (focusedIndex !== null) {
@@ -115,8 +122,8 @@ const ComboBox = ({
           newElement.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];
+        var _contentRef$current3;
+        const element = (_contentRef$current3 = contentRef.current) === null || _contentRef$current3 === void 0 ? void 0 : _contentRef$current3.children[focusedIndex];
         if (!element) {
           return;
         }
@@ -154,16 +161,6 @@ const ComboBox = ({
     const isAtLeastOneItemWithIconGiven = allItems.some(({
       icons
     }) => icons);
-    const textArray = allItems === null || allItems === void 0 ? void 0 : allItems.map(({
-      text
-    }) => text);
-    const groupNames = lists.map(({
-      groupName
-    }) => groupName || 'Unnamed');
-    const contentHeight = (0, _calculate.calculateContentHeight)([...textArray, ...groupNames]);
-    const maxHeightInPixels = (0, _calculate.getMaxHeightInPixels)(maxHeight, styledComboBoxElementRef.current ?? document.body);
-    setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');
-    textArray.push(placeholder);
     const width = ((_styledComboBoxElemen = styledComboBoxElementRef.current) === null || _styledComboBoxElemen === void 0 || (_styledComboBoxElemen = _styledComboBoxElemen.parentElement) === null || _styledComboBoxElemen === void 0 ? void 0 : _styledComboBoxElemen.getBoundingClientRect().width) ?? 0;
 
     // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left
@@ -266,35 +263,33 @@ const ComboBox = ({
     }
     return styles;
   }, [direction, internalCoordinates.x, internalCoordinates.y]);
-  (0, _react.useEffect)(() => {
-    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: minWidth,
-      style: bodyStyles,
-      $direction: direction,
-      transition: {
-        duration: 0.2
-      },
-      tabIndex: 0,
-      ref: contentRef
-    }, comboBoxGroups)), container));
-  }, [bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  const portal = (0, _react.useMemo)(() => /*#__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: minWidth,
+    style: bodyStyles,
+    $direction: direction,
+    transition: {
+      duration: 0.2
+    },
+    tabIndex: 0,
+    ref: contentRef
+  }, comboBoxGroups)), container), [bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $shouldUseFullWidth: shouldUseFullWidth,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","isAtLeastOneItemWithImageGiven","imageUrl","isAtLeastOneItemWithIconGiven","icons","textArray","map","text","groupNames","groupName","contentHeight","calculateContentHeight","maxHeightInPixels","getMaxHeightInPixels","push","width","parentElement","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","createElement","StyledComboBoxTopic","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n    calculateContentHeight,\n    calculateContentWidth,\n    getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowRoundImage,\n    shouldUseFullWidth = false,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n\n        const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n        const textArray = allItems?.map(({ text }) => text);\n\n        const groupNames = lists.map(({ groupName }) => groupName || 'Unnamed');\n\n        const contentHeight = calculateContentHeight([...textArray, ...groupNames]);\n\n        const maxHeightInPixels = getMaxHeightInPixels(\n            maxHeight,\n            styledComboBoxElementRef.current ?? document.body,\n        );\n\n        setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n        textArray.push(placeholder);\n\n        const width =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        // 40px = icon width + flex gap\n        setMinWidth(\n            shouldUseFullWidth\n                ? width\n                : calculateContentWidth([\n                      ...allItems,\n                      { text: placeholder, value: 'placeholder' },\n                  ]) +\n                      45 +\n                      (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                      (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (item) {\n            return item.icons;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map(\n                        ({\n                            imageUrl,\n                            icons,\n                            rightElement,\n                            subtext,\n                            suffixElement,\n                            text,\n                            value,\n                        }) => (\n                            <ComboBoxItem\n                                icons={icons}\n                                id={value}\n                                imageUrl={imageUrl}\n                                isSelected={selectedItem ? value === selectedItem.value : false}\n                                key={value}\n                                onSelect={handleSetSelectedItem}\n                                rightElement={rightElement}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                                subtext={subtext}\n                                suffixElement={suffixElement}\n                                text={text}\n                                value={value}\n                            />\n                        ),\n                    )}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={minWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder $shouldReduceOpacity={!selectedItem && !item}>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderIcon && <Icon icons={placeholderIcon} />}\n                        {placeholderText}\n                        {item && item.suffixElement && item.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            portal,\n            selectedItem,\n            shouldShowRoundImage,\n            shouldUseFullWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","_contentRef$current","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","handleKeyDown","key","_contentRef$current2","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current3","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","isAtLeastOneItemWithImageGiven","imageUrl","isAtLeastOneItemWithIconGiven","icons","width","parentElement","calculateContentWidth","text","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","groupName","createElement","StyledComboBoxTopic","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","portal","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowRoundImage,\n    shouldUseFullWidth = false,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        if (isAnimating) {\n            const scrollHeight = contentRef.current?.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n\n        const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n        const width =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        // 40px = icon width + flex gap\n        setMinWidth(\n            shouldUseFullWidth\n                ? width\n                : calculateContentWidth([\n                      ...allItems,\n                      { text: placeholder, value: 'placeholder' },\n                  ]) +\n                      45 +\n                      (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                      (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (item) {\n            return item.icons;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map(\n                        ({\n                            imageUrl,\n                            icons,\n                            rightElement,\n                            subtext,\n                            suffixElement,\n                            text,\n                            value,\n                        }) => (\n                            <ComboBoxItem\n                                icons={icons}\n                                id={value}\n                                imageUrl={imageUrl}\n                                isSelected={selectedItem ? value === selectedItem.value : false}\n                                key={value}\n                                onSelect={handleSetSelectedItem}\n                                rightElement={rightElement}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                                subtext={subtext}\n                                suffixElement={suffixElement}\n                                text={text}\n                                value={value}\n                            />\n                        ),\n                    )}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    const portal = useMemo(\n        () =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={minWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        [\n            bodyStyles,\n            browser?.name,\n            comboBoxGroups,\n            container,\n            direction,\n            isAnimating,\n            maxHeight,\n            minWidth,\n            overflowY,\n        ],\n    );\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder $shouldReduceOpacity={!selectedItem && !item}>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderIcon && <Icon icons={placeholderIcon} />}\n                        {placeholderText}\n                        {item && item.suffixElement && item.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            portal,\n            selectedItem,\n            shouldShowRoundImage,\n            shouldUseFullWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,7 +3,7 @@ import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ComboBoxDirection } from '../../types/comboBox';
-import { calculateContentHeight, calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';
+import { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';
 import { getIsTouch } from '../../utils/environment';
 import Icon from '../icon/Icon';
 import ComboBoxItem from './combobox-item/ComboBoxItem';
@@ -26,7 +26,6 @@ const ComboBox = _ref => {
   const [minWidth, setMinWidth] = useState(0);
   const [focusedIndex, setFocusedIndex] = useState(null);
   const [overflowY, setOverflowY] = useState('hidden');
-  const [portal, setPortal] = useState();
   const [internalCoordinates, setInternalCoordinates] = useState({
     x: 0,
     y: 0
@@ -86,6 +85,13 @@ const ComboBox = _ref => {
       onSelect(itemToSelect);
     }
   }, [onSelect]);
+  useEffect(() => {
+    if (isAnimating) {
+      const scrollHeight = contentRef.current?.scrollHeight ?? 0;
+      const maxHeightInPixels = getMaxHeightInPixels(maxHeight, styledComboBoxElementRef.current ?? document.body);
+      setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');
+    }
+  }, [isAnimating, maxHeight]);
   useEffect(() => {
     const handleKeyDown = e => {
       if (!isAnimating) {
@@ -152,22 +158,6 @@ const ComboBox = _ref => {
       } = _ref4;
       return icons;
     });
-    const textArray = allItems?.map(_ref5 => {
-      let {
-        text
-      } = _ref5;
-      return text;
-    });
-    const groupNames = lists.map(_ref6 => {
-      let {
-        groupName
-      } = _ref6;
-      return groupName || 'Unnamed';
-    });
-    const contentHeight = calculateContentHeight([...textArray, ...groupNames]);
-    const maxHeightInPixels = getMaxHeightInPixels(maxHeight, styledComboBoxElementRef.current ?? document.body);
-    setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');
-    textArray.push(placeholder);
     const width = styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;
 
     // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left
@@ -230,14 +220,14 @@ const ComboBox = _ref => {
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxGroups = useMemo(() => lists.map(_ref7 => {
+  const comboBoxGroups = useMemo(() => lists.map(_ref5 => {
     let {
       groupName,
       list
-    } = _ref7;
+    } = _ref5;
     return /*#__PURE__*/React.createElement("div", {
       key: groupName ?? 'default-group'
-    }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), list.map(_ref8 => {
+    }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), list.map(_ref6 => {
       let {
         imageUrl,
         icons,
@@ -246,7 +236,7 @@ const ComboBox = _ref => {
         suffixElement,
         text,
         value
-      } = _ref8;
+      } = _ref6;
       return /*#__PURE__*/React.createElement(ComboBoxItem, {
         icons: icons,
         id: value,
@@ -276,35 +266,33 @@ const ComboBox = _ref => {
     }
     return styles;
   }, [direction, internalCoordinates.x, internalCoordinates.y]);
-  useEffect(() => {
-    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: minWidth,
-      style: bodyStyles,
-      $direction: direction,
-      transition: {
-        duration: 0.2
-      },
-      tabIndex: 0,
-      ref: contentRef
-    }, comboBoxGroups)), container));
-  }, [bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  const portal = useMemo(() => /*#__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: minWidth,
+    style: bodyStyles,
+    $direction: direction,
+    transition: {
+      duration: 0.2
+    },
+    tabIndex: 0,
+    ref: contentRef
+  }, comboBoxGroups)), container), [bodyStyles, browser?.name, comboBoxGroups, container, direction, isAnimating, maxHeight, minWidth, overflowY]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $shouldUseFullWidth: shouldUseFullWidth,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","textArray","map","_ref5","text","groupNames","_ref6","groupName","contentHeight","maxHeightInPixels","push","width","parentElement","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","_ref7","createElement","_ref8","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n    calculateContentHeight,\n    calculateContentWidth,\n    getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowRoundImage,\n    shouldUseFullWidth = false,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n\n        const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n        const textArray = allItems?.map(({ text }) => text);\n\n        const groupNames = lists.map(({ groupName }) => groupName || 'Unnamed');\n\n        const contentHeight = calculateContentHeight([...textArray, ...groupNames]);\n\n        const maxHeightInPixels = getMaxHeightInPixels(\n            maxHeight,\n            styledComboBoxElementRef.current ?? document.body,\n        );\n\n        setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n        textArray.push(placeholder);\n\n        const width =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        // 40px = icon width + flex gap\n        setMinWidth(\n            shouldUseFullWidth\n                ? width\n                : calculateContentWidth([\n                      ...allItems,\n                      { text: placeholder, value: 'placeholder' },\n                  ]) +\n                      45 +\n                      (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                      (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (item) {\n            return item.icons;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map(\n                        ({\n                            imageUrl,\n                            icons,\n                            rightElement,\n                            subtext,\n                            suffixElement,\n                            text,\n                            value,\n                        }) => (\n                            <ComboBoxItem\n                                icons={icons}\n                                id={value}\n                                imageUrl={imageUrl}\n                                isSelected={selectedItem ? value === selectedItem.value : false}\n                                key={value}\n                                onSelect={handleSetSelectedItem}\n                                rightElement={rightElement}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                                subtext={subtext}\n                                suffixElement={suffixElement}\n                                text={text}\n                                value={value}\n                            />\n                        ),\n                    )}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={minWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder $shouldReduceOpacity={!selectedItem && !item}>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderIcon && <Icon icons={placeholderIcon} />}\n                        {placeholderText}\n                        {item && item.suffixElement && item.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            portal,\n            selectedItem,\n            shouldShowRoundImage,\n            shouldUseFullWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","_ref6","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","portal","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowRoundImage,\n    shouldUseFullWidth = false,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        if (isAnimating) {\n            const scrollHeight = contentRef.current?.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n\n        const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n        const width =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        // 40px = icon width + flex gap\n        setMinWidth(\n            shouldUseFullWidth\n                ? width\n                : calculateContentWidth([\n                      ...allItems,\n                      { text: placeholder, value: 'placeholder' },\n                  ]) +\n                      45 +\n                      (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                      (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (item) {\n            return item.icons;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map(\n                        ({\n                            imageUrl,\n                            icons,\n                            rightElement,\n                            subtext,\n                            suffixElement,\n                            text,\n                            value,\n                        }) => (\n                            <ComboBoxItem\n                                icons={icons}\n                                id={value}\n                                imageUrl={imageUrl}\n                                isSelected={selectedItem ? value === selectedItem.value : false}\n                                key={value}\n                                onSelect={handleSetSelectedItem}\n                                rightElement={rightElement}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                                subtext={subtext}\n                                suffixElement={suffixElement}\n                                text={text}\n                                value={value}\n                            />\n                        ),\n                    )}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    const portal = useMemo(\n        () =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={minWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        [\n            bodyStyles,\n            browser?.name,\n            comboBoxGroups,\n            container,\n            direction,\n            isAnimating,\n            maxHeight,\n            minWidth,\n            overflowY,\n        ],\n    );\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder $shouldReduceOpacity={!selectedItem && !item}>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderIcon && <Icon icons={placeholderIcon} />}\n                        {placeholderText}\n                        {item && item.suffixElement && item.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            portal,\n            selectedItem,\n            shouldShowRoundImage,\n            shouldUseFullWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.776",
+    "version": "5.0.0-beta.778",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e63300a57924d14c1d1220ceb7505c4caeaa3689"
+    "gitHead": "9b2295f410b43de2221d4818436a86197ffae502"
 }