@chayns-components/core 5.0.0-beta.985 → 5.0.0-beta.987

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

@@ -49,6 +49,7 @@ const ComboBox = ({
     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 functions = (0, _chaynsApi.useFunctions)();
@@ -71,6 +72,14 @@ const ComboBox = ({
       setNewContainer(container);
     }
   }, [container]);
+  const handleInputFocus = (0, _react.useCallback)(event => {
+    isInputFocused.current = true;
+    onInputFocus === null || onInputFocus === void 0 || onInputFocus(event);
+  }, [onInputFocus]);
+  const handleInputBlur = (0, _react.useCallback)(event => {
+    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);
@@ -277,7 +286,7 @@ const ComboBox = ({
    * This function opens the content of the combobox
    */
   const handleHeaderClick = (0, _react.useCallback)(() => {
-    if (!isDisabled) {
+    if (!isDisabled && !isInputFocused.current) {
       if (isAnimating) {
         handleClose();
       } else {
@@ -367,14 +376,7 @@ const ComboBox = ({
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage
-  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefix, null, prefix), typeof inputValue === 'string' ? /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxInput, {
-    disabled: isDisabled,
-    value: inputValue,
-    onChange: onInputChange,
-    onBlur: onInputBlur,
-    onFocus: onInputFocus,
-    placeholder: placeholderText
-  }) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPrefix, null, prefix), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
   }, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
@@ -382,9 +384,16 @@ const ComboBox = ({
     $shouldShowRoundImage: shouldShowRoundPlaceholderImage
   }), placeholderIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: placeholderIcon
-  }), /*#__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, {
+  }), typeof inputValue === 'string' ? /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxInput, {
+    disabled: isDisabled,
+    value: inputValue,
+    onChange: onInputChange,
+    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, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, portal]);
+  }))), portal), [minWidth, shouldUseFullWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, inputValue, onInputChange, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, portal, handleInputFocus, handleInputBlur, shouldUseCurrentItemWidth]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;

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","_AreaContextProvider","_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","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","useRef","contentRef","functions","useFunctions","values","useValues","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleClick","useCallback","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","body","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","calculateContentWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","StyledComboBoxTopic","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxPlaceholderText","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\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 { AreaContext } from '../area-provider/AreaContextProvider';\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    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\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     * The value of the optional input.\n     */\n    inputValue?: string;\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 to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: 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 bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\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 current item.\n     */\n    shouldUseCurrentItemWidth?: 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    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = 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    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, 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            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.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, portal]);\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        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, 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 (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\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((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageBackground={item.imageBackground}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, 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        if (!newContainer) {\n            return;\n        }\n\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={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\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","_AreaContextProvider","_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","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","isInputFocused","useRef","styledComboBoxElementRef","contentRef","functions","useFunctions","values","useValues","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleInputFocus","useCallback","event","handleInputBlur","handleClick","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","body","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","calculateContentWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","StyledComboBoxTopic","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\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 { AreaContext } from '../area-provider/AreaContextProvider';\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    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\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     * The value of the optional input.\n     */\n    inputValue?: string;\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 to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: 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 bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\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 current item.\n     */\n    shouldUseCurrentItemWidth?: 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    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = 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    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const isInputFocused = useRef(false);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = true;\n            onInputFocus?.(event);\n        },\n        [onInputFocus],\n    );\n\n    const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = false;\n            onInputBlur?.(event);\n        },\n        [onInputBlur],\n    );\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, 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            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.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, portal]);\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        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, 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 (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled && !isInputFocused.current) {\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((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageBackground={item.imageBackground}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, 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        if (!newContainer) {\n            return;\n        }\n\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={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        <StyledComboBoxPlaceholder\n                            $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                        >\n                            {placeholderImageUrl && (\n                                <StyledComboBoxPlaceholderImage\n                                    src={placeholderImageUrl}\n                                    $shouldShowBigImage={shouldShowBigImage}\n                                    $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                />\n                            )}\n                            {placeholderIcon && <Icon icons={placeholderIcon} />}\n                            {typeof inputValue === 'string' ? (\n                                <StyledComboBoxInput\n                                    disabled={isDisabled}\n                                    value={inputValue}\n                                    onChange={onInputChange}\n                                    onBlur={handleInputBlur}\n                                    onFocus={handleInputFocus}\n                                    placeholder={placeholderText}\n                                />\n                            ) : (\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                            )}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n            handleInputFocus,\n            handleInputBlur,\n            shouldUseCurrentItemWidth,\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

@@ -41,6 +41,7 @@ const ComboBox = _ref => {
     y: 0
   });
   const [newContainer, setNewContainer] = useState(container ?? null);
+  const isInputFocused = useRef(false);
   const styledComboBoxElementRef = useRef(null);
   const contentRef = useRef(null);
   const functions = useFunctions();
@@ -63,6 +64,14 @@ const ComboBox = _ref => {
       setNewContainer(container);
     }
   }, [container]);
+  const handleInputFocus = useCallback(event => {
+    isInputFocused.current = true;
+    onInputFocus?.(event);
+  }, [onInputFocus]);
+  const handleInputBlur = useCallback(event => {
+    isInputFocused.current = false;
+    onInputBlur?.(event);
+  }, [onInputBlur]);
   const handleClick = useCallback(event => {
     if (styledComboBoxElementRef.current && !styledComboBoxElementRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
       setIsAnimating(false);
@@ -272,7 +281,7 @@ const ComboBox = _ref => {
    * This function opens the content of the combobox
    */
   const handleHeaderClick = useCallback(() => {
-    if (!isDisabled) {
+    if (!isDisabled && !isInputFocused.current) {
       if (isAnimating) {
         handleClose();
       } else {
@@ -362,14 +371,7 @@ const ComboBox = _ref => {
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage
-  }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, null, prefix), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
-    disabled: isDisabled,
-    value: inputValue,
-    onChange: onInputChange,
-    onBlur: onInputBlur,
-    onFocus: onInputFocus,
-    placeholder: placeholderText
-  }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
+  }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, null, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
   }, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
@@ -377,9 +379,16 @@ const ComboBox = _ref => {
     $shouldShowRoundImage: shouldShowRoundPlaceholderImage
   }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
     icons: placeholderIcon
-  }), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+  }), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
+    disabled: isDisabled,
+    value: inputValue,
+    onChange: onInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    placeholder: placeholderText
+  }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderText, null, placeholderText), internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement)), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-chevron-down']
-  }))), portal), [minWidth, shouldUseFullWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, portal]);
+  }))), portal), [minWidth, shouldUseFullWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, inputValue, onInputChange, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, portal, handleInputFocus, handleInputBlur, shouldUseCurrentItemWidth]);
 };
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","contentRef","functions","values","browser","isTouch","areaProvider","shouldChangeColor","current","el","element","closest","Element","handleClick","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","_ref3","handleHeaderClick","comboBoxGroups","map","createElement","groupName","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","disabled","onChange","onBlur","onFocus","$shouldReduceOpacity","src","$shouldShowRoundImage","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\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 { AreaContext } from '../area-provider/AreaContextProvider';\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    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\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     * The value of the optional input.\n     */\n    inputValue?: string;\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 to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: 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 bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\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 current item.\n     */\n    shouldUseCurrentItemWidth?: 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    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = 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    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, 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            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.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, portal]);\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        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, 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 (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\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((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageBackground={item.imageBackground}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, 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        if (!newContainer) {\n            return;\n        }\n\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={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,YAAY,EAAEC,SAAS,QAAQ,YAAY;AAC/D,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAMRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACnF,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,WAAW,QAAQ,sCAAsC;AAElE,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SACIC,cAAc,EACdC,oBAAoB,EACpBC,yBAAyB,EACzBC,mBAAmB,EACnBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,6BAA6B,EAC7BC,oBAAoB,EACpBC,yCAAyC,EACzCC,mBAAmB,EACnBC,wBAAwB,QACrB,mBAAmB;AAgG1B,MAAMC,QAA2B,GAAGC,IAAA,IAkB9B;EAAA,IAlB+B;IACjCC,SAAS,GAAGpB,iBAAiB,CAACqB,MAAM;IACpCC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,QAAQ;IACRC,WAAW;IACXC,MAAM;IACNC,SAAS;IACTC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,YAAY;IACZC,kBAAkB,GAAG,KAAK;IAC1BC,aAAa;IACbC,yBAAyB,GAAG,KAAK;IACjCC,WAAW;IACXC;EACJ,CAAC,GAAAlB,IAAA;EACG,MAAM,CAACmB,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGzC,QAAQ,CAAgB,CAAC;EACjF,MAAM,CAAC0C,WAAW,EAAEC,cAAc,CAAC,GAAG3C,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAAC4C,QAAQ,EAAEC,WAAW,CAAC,GAAG7C,QAAQ,CAAqB8C,SAAS,CAAC;EACvE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGhD,QAAQ,CAAC,CAAC,CAAC;EACnD,MAAM,CAACiD,YAAY,EAAEC,eAAe,CAAC,GAAGlD,QAAQ,CAAgB,IAAI,CAAC;EACrE,MAAM,CAACmD,SAAS,EAAEC,YAAY,CAAC,GAAGpD,QAAQ,CAA6B,QAAQ,CAAC;EAChF,MAAM,CAACqD,MAAM,EAAEC,SAAS,CAAC,GAAGtD,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACuD,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGxD,QAAQ,CAAyB;IACnFyD,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG5D,QAAQ,CAAiB8B,SAAS,IAAI,IAAI,CAAC;EAEnF,MAAM+B,wBAAwB,GAAG9D,MAAM,CAAiB,IAAI,CAAC;EAC7D,MAAM+D,UAAU,GAAG/D,MAAM,CAAwB,IAAI,CAAC;EAEtD,MAAMgE,SAAS,GAAGxE,YAAY,CAAC,CAAC;EAChC,MAAMyE,MAAM,GAAGxE,SAAS,CAAC,CAAC;EAE1B,MAAM;IAAEyE;EAAQ,CAAC,GAAG3E,SAAS,CAAC,CAAC;EAE/B,MAAM4E,OAAO,GAAG7D,UAAU,CAAC,CAAC;EAE5B,MAAM8D,YAAY,GAAGvE,UAAU,CAACU,WAAW,CAAC;EAE5C,MAAM8D,iBAAiB,GAAGtE,OAAO,CAC7B,MAAMqE,YAAY,CAACC,iBAAiB,IAAI,KAAK,EAC7C,CAACD,YAAY,CAACC,iBAAiB,CACnC,CAAC;EAEDvE,SAAS,CAAC,MAAM;IACZ,IAAIgE,wBAAwB,CAACQ,OAAO,IAAI,CAACvC,SAAS,EAAE;MAChD,MAAMwC,EAAE,GAAGT,wBAAwB,CAACQ,OAAsB;MAE1D,MAAME,OAAO,GAAGD,EAAE,CAACE,OAAO,CAAC,eAAe,CAAC,IAAIF,EAAE,CAACE,OAAO,CAAC,MAAM,CAAC;MAEjEZ,eAAe,CAACW,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACzC,SAAS,CAAC,CAAC;EAEfjC,SAAS,CAAC,MAAM;IACZ,IAAIiC,SAAS,YAAY2C,OAAO,EAAE;MAC9Bb,eAAe,CAAC9B,SAAS,CAAC;IAC9B;EACJ,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,MAAM4C,WAAW,GAAG/E,WAAW,CAC1BgF,KAAiB,IAAK;IACnB,IACId,wBAAwB,CAACQ,OAAO,IAChC,CAACR,wBAAwB,CAACQ,OAAO,CAACO,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,IAChEf,UAAU,CAACO,OAAO,IAClB,CAACP,UAAU,CAACO,OAAO,CAACO,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EACpD;MACElC,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACkB,wBAAwB,CAC7B,CAAC;EAED,MAAMiB,UAAU,GAAGnF,WAAW,CAAC,MAAM;IACjC,IAAIkE,wBAAwB,CAACQ,OAAO,IAAIV,YAAY,EAAE;MAClD,MAAM;QACFoB,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBC;MACJ,CAAC,GAAGtB,wBAAwB,CAACQ,OAAO,CAACe,qBAAqB,CAAC,CAAC;MAC5D,MAAM;QAAEL,IAAI,EAAEM,aAAa;QAAEJ,GAAG,EAAEK;MAAa,CAAC,GAAG3B,YAAY,CAACyB,qBAAqB,CAAC,CAAC;MAEvF,MAAM3B,CAAC,GAAGuB,YAAY,GAAGK,aAAa,GAAG1B,YAAY,CAAC4B,UAAU;MAChE,MAAM7B,CAAC,GAAGwB,WAAW,GAAGI,YAAY,GAAG3B,YAAY,CAAC6B,SAAS;MAE7DhC,sBAAsB,CAAC;QACnBC,CAAC;QACDC,CAAC,EAAEpC,SAAS,KAAKpB,iBAAiB,CAACuF,GAAG,GAAG/B,CAAC,GAAGA,CAAC,GAAGyB;MACrD,CAAC,CAAC;MAEFxC,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACgB,YAAY,EAAErC,SAAS,CAAC,CAAC;EAE7B,MAAMoE,WAAW,GAAG/F,WAAW,CAAC,MAAM;IAClCgD,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACI9C,SAAS,CAAC,MAAM;IACZ8F,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAElB,WAAW,CAAC;IAE/C,OAAO,MAAM;MACTiB,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEnB,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAEb,wBAAwB,CAAC,CAAC;;EAE3C;AACJ;AACA;EACI,MAAMiC,qBAAqB,GAAGnG,WAAW,CACpCoG,YAA2B,IAAK;IAC7B,IAAI,OAAOpE,QAAQ,KAAK,UAAU,EAAE;MAChC,MAAMqE,sBAAsB,GAAGrE,QAAQ,CAACoE,YAAY,CAAC,KAAK,KAAK;MAE/D,IAAIC,sBAAsB,EAAE;IAChC;IAEAvD,uBAAuB,CAACsD,YAAY,CAAC;IACrCpD,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EACD,CAAChB,QAAQ,CACb,CAAC;EAED9B,SAAS,CAAC,MAAM;IACZ,MAAMoG,cAAc,GAAGnC,UAAU,CAACO,OAAO;IAEzC,IAAIhB,MAAM,IAAIX,WAAW,IAAIuD,cAAc,EAAE;MACzC,MAAMC,YAAY,GAAGD,cAAc,CAACC,YAAY,IAAI,CAAC;MAErD,MAAMC,iBAAiB,GAAG/F,oBAAoB,CAC1CsB,SAAS,EACTmC,wBAAwB,CAACQ,OAAO,IAAIsB,QAAQ,CAACS,IACjD,CAAC;MAEDhD,YAAY,CAAC8C,YAAY,GAAGC,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxE;EACJ,CAAC,EAAE,CAACzD,WAAW,EAAEhB,SAAS,EAAE2B,MAAM,CAAC,CAAC;EAEpCxD,SAAS,CAAC,MAAM;IACZ,MAAMwG,aAAa,GAAIC,CAAgB,IAAK;MACxC,IAAI,CAAC5D,WAAW,EAAE;QACd;MACJ;MAEA,IAAI4D,CAAC,CAACC,GAAG,KAAK,SAAS,IAAID,CAAC,CAACC,GAAG,KAAK,WAAW,EAAE;QAC9CD,CAAC,CAACE,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,GAAG3C,UAAU,CAACO,OAAO,EAAEoC,QAAQ;QAC7C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMC,QAAQ,GACV1D,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IAAIqD,CAAC,CAACC,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAGE,QAAQ,CAACC,MAAM,IAChED,QAAQ,CAACC,MAAM,GACf,CAAC;UAEX,IAAIzD,YAAY,KAAK,IAAI,EAAE;YACvB,MAAM2D,WAAW,GAAGH,QAAQ,CAACxD,YAAY,CAAmB;YAC5D2D,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA3D,eAAe,CAACyD,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGL,QAAQ,CAACE,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAIT,CAAC,CAACC,GAAG,KAAK,OAAO,IAAItD,YAAY,KAAK,IAAI,EAAE;QACnD,MAAMsB,OAAO,GAAGT,UAAU,CAACO,OAAO,EAAEoC,QAAQ,CAACxD,YAAY,CAAC;QAE1D,IAAI,CAACsB,OAAO,EAAE;UACV;QACJ;QAEA,MAAM;UAAEyC;QAAG,CAAC,GAAGzC,OAAO;QAEtB,IAAI0C,eAA0C;QAE9CxF,KAAK,CAACyF,IAAI,CAAEC,IAAI,IAAK;UACjBF,eAAe,GAAGE,IAAI,CAACA,IAAI,CAACC,IAAI,CAC5BC,KAAA;YAAA,IAAC;cAAEC;YAAM,CAAC,GAAAD,KAAA;YAAA,OAAKE,MAAM,CAACD,KAAK,CAAC,KAAKN,EAAE,CAACQ,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;UAAA,CACtE,CAAC;UACD,OAAO,CAAC,CAACP,eAAe;QAC5B,CAAC,CAAC;QAEF,IAAI,CAACA,eAAe,EAAE;UAClB;QACJ;QAEAnB,qBAAqB,CAACmB,eAAe,CAAC;MAC1C;IACJ,CAAC;IAEDtB,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAES,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTV,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEQ,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACpD,YAAY,EAAE6C,qBAAqB,EAAEpD,WAAW,EAAEjB,KAAK,CAAC,CAAC;;EAE7D;AACJ;AACA;EACI5B,SAAS,CAAC,MAAM;IACZ,MAAM4H,QAAQ,GAAGhG,KAAK,CAACiG,OAAO,CAAEP,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IACnD,MAAMQ,QAAQ,GAAG,CAAC5F,YAAY,EAAE,GAAG0F,QAAQ,CAAC,CAACP,IAAI,CAAEU,IAAI,IAAKA,IAAI,EAAEC,QAAQ,CAAC;IAC3E,MAAMC,OAAO,GAAG,CAAC/F,YAAY,EAAE,GAAG0F,QAAQ,CAAC,CAACP,IAAI,CAAEU,IAAI,IAAKA,IAAI,EAAEG,KAAK,CAAC;IAEvE,MAAMC,WAAW,GACbnE,wBAAwB,CAACQ,OAAO,EAAE4D,aAAa,EAAE7C,qBAAqB,CAAC,CAAC,CAAC8C,KAAK,IAAI,CAAC;IAEvF,MAAMC,YAAY,GAAG,EAAE,CAAC,CAAC;IACzB,MAAMC,UAAU,GAAGT,QAAQ,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IACtC,MAAMU,SAAS,GAAGP,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;;IAEpC,IAAIQ,WAAW,GAAG,CAAC;IAEnB,IAAIzG,MAAM,EAAE;MACR,MAAM0G,eAAe,GACjBpI,qBAAqB,CAAC,CAAC;QAAEqI,IAAI,EAAE3G,MAAM;QAAEyF,KAAK,EAAE;MAAS,CAAC,CAAC,EAAEvD,SAAS,EAAEC,MAAM,CAAC,GAAG,CAAC;MAErFsE,WAAW,GAAGG,IAAI,CAACC,GAAG,CAACH,eAAe,EAAE,EAAE,CAAC;IAC/C;IAEA,MAAMI,SAAS,GAAGxI,qBAAqB,CACnC,CACI,GAAGsH,QAAQ,EACX;MAAEe,IAAI,EAAE5G,WAAW;MAAE0F,KAAK,EAAE;IAAc,CAAC,EAC3C,IAAIvF,YAAY,GAAG,CAACA,YAAY,CAAC,GAAG,EAAE,CAAC,CAC1C,EACDgC,SAAS,EACTC,MACJ,CAAC;IAED,MAAM4E,eAAe,GAAGD,SAAS,GAAGR,YAAY,GAAGC,UAAU,GAAGC,SAAS,GAAGC,WAAW;IAEvF,IAAIO,WAAW,GAAGD,eAAe;IACjC,IAAIE,eAAe,GAAGF,eAAe;;IAErC;IACA,IAAIzG,kBAAkB,EAAE;MACpB0G,WAAW,GAAGb,WAAW;MAEzBc,eAAe,GACXd,WAAW,GAAGY,eAAe,GAAG,EAAE,GAAGA,eAAe,GAAG,EAAE,GAAGZ,WAAW;IAC/E;;IAEA;IAAA,KACK,IAAI3F,yBAAyB,IAAIG,oBAAoB,EAAE;MACxD,MAAMuG,SAAS,GACX5I,qBAAqB,CAAC,CAACqC,oBAAoB,CAAC,EAAEuB,SAAS,EAAEC,MAAM,CAAC,GAChEmE,YAAY,GACZC,UAAU,GACVC,SAAS,GACTC,WAAW;MAEfO,WAAW,GAAGE,SAAS;MAEvBD,eAAe,GAAGC,SAAS,GAAGH,eAAe,GAAG,EAAE,GAAGA,eAAe,GAAG,EAAE,GAAGG,SAAS;IACzF;IAEA,IAAIF,WAAW,GAAGb,WAAW,EAAE;MAC3Ba,WAAW,GAAGb,WAAW;IAC7B;IAEA,IAAIc,eAAe,GAAGd,WAAW,EAAE;MAC/Bc,eAAe,GAAGd,WAAW;IACjC;IAEAnF,WAAW,CAACgG,WAAW,CAAC;IACxB7F,eAAe,CAACX,yBAAyB,GAAGwG,WAAW,GAAGC,eAAe,CAAC;EAC9E,CAAC,EAAE,CACCrH,KAAK,EACLG,WAAW,EACXO,kBAAkB,EAClBE,yBAAyB,EACzBG,oBAAoB,EACpBX,MAAM,EACNE,YAAY,EACZgC,SAAS,EACTC,MAAM,CACT,CAAC;;EAEF;AACJ;AACA;EACInE,SAAS,CAAC,MAAM;IACZ8C,cAAc,CAAC,KAAK,CAAC;IACrBF,uBAAuB,CAACV,YAAY,CAAC;EACzC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMiH,mBAAmB,GAAGlJ,OAAO,CAAC,MAAM;IACtC,IAAIiC,YAAY,EAAE;MACd,OAAOA,YAAY,CAAC8F,QAAQ;IAChC;IAEA,IAAIrF,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACqF,QAAQ;IACxC;IAEA,OAAO/E,SAAS;EACpB,CAAC,EAAE,CAACN,oBAAoB,EAAET,YAAY,CAAC,CAAC;EAExC,MAAMkH,eAAe,GAAGnJ,OAAO,CAAC,MAAM;IAClC,IAAIiC,YAAY,EAAE;MACd,OAAOA,YAAY,CAACgG,KAAK;IAC7B;IAEA,IAAIvF,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACuF,KAAK;IACrC;IAEA,OAAOjF,SAAS;EACpB,CAAC,EAAE,CAACN,oBAAoB,EAAET,YAAY,CAAC,CAAC;;EAExC;AACJ;AACA;EACI,MAAMmH,eAAe,GAAGpJ,OAAO,CAAC,MAAM;IAClC,IAAI0I,IAAI,GAAG5G,WAAW;IAEtB,IAAIG,YAAY,EAAE;MACdyG,IAAI,GAAGzG,YAAY,CAACyG,IAAI;IAC5B,CAAC,MAAM,IAAIhG,oBAAoB,EAAE;MAC7BgG,IAAI,GAAGhG,oBAAoB,CAACgG,IAAI;IACpC;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAChG,oBAAoB,EAAEZ,WAAW,EAAEG,YAAY,CAAC,CAAC;EAErD,MAAMoH,+BAA+B,GAAGrJ,OAAO,CAAC,MAAM;IAClD,MAAMsJ,gBAAgB,GAAG3H,KAAK,CAAC2F,IAAI,CAAED,IAAI,IACrCA,IAAI,CAACA,IAAI,CAACD,IAAI,CACVmC,KAAA;MAAA,IAAC;QAAE/B;MAAM,CAAC,GAAA+B,KAAA;MAAA,OAAK/B,KAAK,MAAMvF,YAAY,EAAEuF,KAAK,IAAI9E,oBAAoB,EAAE8E,KAAK,CAAC;IAAA,CACjF,CACJ,CAAC;IAED,OAAO8B,gBAAgB,EAAEnH,oBAAoB,IAAIA,oBAAoB;EACzE,CAAC,EAAE,CAACO,oBAAoB,EAAE8E,KAAK,EAAE7F,KAAK,EAAEM,YAAY,EAAEuF,KAAK,EAAErF,oBAAoB,CAAC,CAAC;;EAEnF;AACJ;AACA;EACI,MAAMqH,iBAAiB,GAAG3J,WAAW,CAAC,MAAM;IACxC,IAAI,CAAC6B,UAAU,EAAE;MACb,IAAIkB,WAAW,EAAE;QACbgD,WAAW,CAAC,CAAC;MACjB,CAAC,MAAM;QACHZ,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACY,WAAW,EAAEZ,UAAU,EAAEpC,WAAW,EAAElB,UAAU,CAAC,CAAC;EAEtD,MAAM+H,cAAc,GAAGzJ,OAAO,CAC1B,MACI2B,KAAK,CAAC+H,GAAG,CAAErC,IAAI,iBACXzH,KAAA,CAAA+J,aAAA;IAAKlD,GAAG,EAAEY,IAAI,CAACuC,SAAS,IAAI;EAAgB,GACvCvC,IAAI,CAACuC,SAAS,IAAIjI,KAAK,CAACiF,MAAM,GAAG,CAAC,iBAC/BhH,KAAA,CAAA+J,aAAA,CAACvI,mBAAmB,QAAEiG,IAAI,CAACuC,SAA+B,CAC7D,EACAvC,IAAI,CAACA,IAAI,CAACqC,GAAG,CAAE5B,IAAI;EAAA;EAChB;EACAlI,KAAA,CAAA+J,aAAA,CAACjJ,YAAY;IACTuH,KAAK,EAAEH,IAAI,CAACG,KAAM;IAClBf,EAAE,EAAEY,IAAI,CAACN,KAAM;IACfqC,eAAe,EAAE/B,IAAI,CAAC+B,eAAgB;IACtC9B,QAAQ,EAAED,IAAI,CAACC,QAAS;IACxBrG,UAAU,EAAEoG,IAAI,CAACpG,UAAW;IAC5BoI,UAAU,EAAE7H,YAAY,GAAG6F,IAAI,CAACN,KAAK,KAAKvF,YAAY,CAACuF,KAAK,GAAG,KAAM;IACrEf,GAAG,EAAEqB,IAAI,CAACN,KAAM;IAChB3F,QAAQ,EAAEmE,qBAAsB;IAChC+D,YAAY,EAAEjC,IAAI,CAACiC,YAAa;IAChC7H,kBAAkB,EAAEA,kBAAmB;IACvCC,oBAAoB,EAAEkF,IAAI,CAAClF,oBAAoB,IAAIA,oBAAqB;IACxE6H,OAAO,EAAElC,IAAI,CAACkC,OAAQ;IACtBC,aAAa,EAAEnC,IAAI,CAACmC,aAAc;IAClCvB,IAAI,EAAEZ,IAAI,CAACY,IAAK;IAChBlB,KAAK,EAAEM,IAAI,CAACN,KAAM;IAClB0C,UAAU,EAAEpC,IAAI,CAACoC;EAAW,CAC/B,CACJ,CACA,CACR,CAAC,EACN,CAAClE,qBAAqB,EAAErE,KAAK,EAAEM,YAAY,EAAEC,kBAAkB,EAAEC,oBAAoB,CACzF,CAAC;EAED,MAAMgI,UAAU,GAAGnK,OAAO,CAAC,MAAM;IAC7B,IAAIoK,MAAqB,GAAG;MAAEnF,IAAI,EAAExB,mBAAmB,CAACE,CAAC;MAAEwB,GAAG,EAAE1B,mBAAmB,CAACG;IAAE,CAAC;IAEvF,IAAIpC,SAAS,KAAKpB,iBAAiB,CAACuF,GAAG,EAAE;MACrCyE,MAAM,GAAG;QAAE,GAAGA,MAAM;QAAEC,SAAS,EAAE;MAAoB,CAAC;IAC1D;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAAC5I,SAAS,EAAEiC,mBAAmB,CAACE,CAAC,EAAEF,mBAAmB,CAACG,CAAC,CAAC,CAAC;EAE7D7D,SAAS,CAAC,MAAM;IACZ,IAAI,CAAC8D,YAAY,EAAE;MACf;IACJ;IAEAL,SAAS,CAAC,mBACNrD,YAAY,cACRP,KAAA,CAAA+J,aAAA,CAAChK,eAAe;MAAC2K,OAAO,EAAE;IAAM,GAC3B1H,WAAW,iBACRhD,KAAA,CAAA+J,aAAA,CAACtI,wBAAwB;MACrBkJ,QAAQ,EAAEpG,OAAO,EAAEqG,IAAK;MACxBC,OAAO,EAAE;QAAEpF,MAAM,EAAE,aAAa;QAAEqF,OAAO,EAAE;MAAE,CAAE;MAC/CC,UAAU,EAAEtH,SAAU;MACtBiH,OAAO,EAAE;QAAEjF,MAAM,EAAE,CAAC;QAAEqF,OAAO,EAAE;MAAE,CAAE;MACnCE,IAAI,EAAE;QAAEvF,MAAM,EAAE,CAAC;QAAEqF,OAAO,EAAE;MAAE,CAAE;MAChCG,UAAU,EAAEjJ,SAAU;MACtBkJ,SAAS,EAAE7H,YAAa;MACxB8H,KAAK,EAAEZ,UAAW;MAClBa,UAAU,EAAExJ,SAAU;MACtByJ,0BAA0B,EAAE1I,yBAA0B;MACtD2I,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI,CAAE;MAC9BpE,QAAQ,EAAE,CAAE;MACZqE,GAAG,EAAEpH;IAAW,GAEfyF,cACqB,CAEjB,CAAC,EAClB5F,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCZ,YAAY,EACZkH,UAAU,EACVhG,OAAO,EAAEqG,IAAI,EACbf,cAAc,EACd5F,YAAY,EACZrC,SAAS,EACToB,WAAW,EACXhB,SAAS,EACTkB,QAAQ,EACRO,SAAS,EACTd,yBAAyB,CAC5B,CAAC;EAEF,OAAOvC,OAAO,CACV,mBACIJ,KAAA,CAAA+J,aAAA,CAAChJ,cAAc;IACXyK,GAAG,EAAErH,wBAAyB;IAC9B+G,SAAS,EAAEhI,QAAS;IACpBuI,mBAAmB,EAAEhJ,kBAAmB;IACxC4I,0BAA0B,EAAE1I;EAA0B,gBAEtD3C,KAAA,CAAA+J,aAAA,CAAC/I,oBAAoB;IACjBoK,UAAU,EAAExJ,SAAU;IACtB8J,OAAO,EAAE9B,iBAAkB;IAC3B+B,OAAO,EAAE3I,WAAY;IACrB4I,QAAQ,EAAEpH,OAAQ;IAClBqH,WAAW,EAAE/J,UAAW;IACxBgK,kBAAkB,EAAEpH,iBAAkB;IACtCqH,mBAAmB,EAAEzJ;EAAmB,gBAExCtC,KAAA,CAAA+J,aAAA,CAACxI,yCAAyC,QACrCY,MAAM,iBAAInC,KAAA,CAAA+J,aAAA,CAACzI,oBAAoB,QAAEa,MAA6B,CAAC,EAC/D,OAAOU,UAAU,KAAK,QAAQ,gBAC3B7C,KAAA,CAAA+J,aAAA,CAAC7I,mBAAmB;IAChB8K,QAAQ,EAAElK,UAAW;IACrB8F,KAAK,EAAE/E,UAAW;IAClBoJ,QAAQ,EAAEvJ,aAAc;IACxBwJ,MAAM,EAAEtJ,WAAY;IACpBuJ,OAAO,EAAE3J,YAAa;IACtBN,WAAW,EAAEsH;EAAgB,CAChC,CAAC,gBAEFxJ,KAAA,CAAA+J,aAAA,CAAC5I,yBAAyB;IACtBiL,oBAAoB,EAAE,CAAC/J,YAAY,IAAI,CAACS;EAAqB,GAE5DwG,mBAAmB,iBAChBtJ,KAAA,CAAA+J,aAAA,CAAC3I,8BAA8B;IAC3BiL,GAAG,EAAE/C,mBAAoB;IACzByC,mBAAmB,EAAEzJ,kBAAmB;IACxCgK,qBAAqB,EAAE7C;EAAgC,CAC1D,CACJ,EACAF,eAAe,iBAAIvJ,KAAA,CAAA+J,aAAA,CAAClJ,IAAI;IAACwH,KAAK,EAAEkB;EAAgB,CAAE,CAAC,eACpDvJ,KAAA,CAAA+J,aAAA,CAAC1I,6BAA6B,QACzBmI,eAC0B,CAAC,EAC/B1G,oBAAoB,IACjBA,oBAAoB,CAACuH,aAAa,IAClCvH,oBAAoB,CAACuH,aACF,CAEQ,CAAC,eAC5CrK,KAAA,CAAA+J,aAAA,CAAC9I,yBAAyB,qBACtBjB,KAAA,CAAA+J,aAAA,CAAClJ,IAAI;IAACwH,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,EACtB1E,MACW,CACnB,EACD,CACIT,QAAQ,EACRT,kBAAkB,EAClBb,SAAS,EACTgI,iBAAiB,EACjB5G,WAAW,EACXwB,OAAO,EACP1C,UAAU,EACV4C,iBAAiB,EACjBpC,kBAAkB,EAClBH,MAAM,EACNU,UAAU,EACVH,aAAa,EACbE,WAAW,EACXJ,YAAY,EACZgH,eAAe,EACfnH,YAAY,EACZS,oBAAoB,EACpBwG,mBAAmB,EACnBG,+BAA+B,EAC/BF,eAAe,EACf5F,MAAM,CAEd,CAAC;AACL,CAAC;AAEDjC,QAAQ,CAAC6K,WAAW,GAAG,UAAU;AAEjC,eAAe7K,QAAQ","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","isInputFocused","styledComboBoxElementRef","contentRef","functions","values","browser","isTouch","areaProvider","shouldChangeColor","current","el","element","closest","Element","handleInputFocus","event","handleInputBlur","handleClick","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","_ref3","handleHeaderClick","comboBoxGroups","map","createElement","groupName","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\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 { AreaContext } from '../area-provider/AreaContextProvider';\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    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\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     * The value of the optional input.\n     */\n    inputValue?: string;\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 to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: 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 bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\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 current item.\n     */\n    shouldUseCurrentItemWidth?: 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    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = 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    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const isInputFocused = useRef(false);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = true;\n            onInputFocus?.(event);\n        },\n        [onInputFocus],\n    );\n\n    const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = false;\n            onInputBlur?.(event);\n        },\n        [onInputBlur],\n    );\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, 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            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.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, portal]);\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        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, 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 (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled && !isInputFocused.current) {\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((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageBackground={item.imageBackground}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, 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        if (!newContainer) {\n            return;\n        }\n\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={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        <StyledComboBoxPlaceholder\n                            $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                        >\n                            {placeholderImageUrl && (\n                                <StyledComboBoxPlaceholderImage\n                                    src={placeholderImageUrl}\n                                    $shouldShowBigImage={shouldShowBigImage}\n                                    $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                />\n                            )}\n                            {placeholderIcon && <Icon icons={placeholderIcon} />}\n                            {typeof inputValue === 'string' ? (\n                                <StyledComboBoxInput\n                                    disabled={isDisabled}\n                                    value={inputValue}\n                                    onChange={onInputChange}\n                                    onBlur={handleInputBlur}\n                                    onFocus={handleInputFocus}\n                                    placeholder={placeholderText}\n                                />\n                            ) : (\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                            )}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n            handleInputFocus,\n            handleInputBlur,\n            shouldUseCurrentItemWidth,\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.985",
+    "version": "5.0.0-beta.987",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "622cd1c98cb7e80e62db7da22725dd4dbbbb70ce"
+    "gitHead": "5eebb4024881cd26aff757e4624596c9bfd9ef72"
 }