@chayns-components/core 5.0.0-beta.937 → 5.0.0-beta.938

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

@@ -40,7 +40,7 @@ const ComboBox = ({
   const [internalSelectedItem, setInternalSelectedItem] = (0, _react.useState)();
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(undefined);
-  const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(undefined);
+  const [bodyMinWidth, setBodyMinWidth] = (0, _react.useState)(0);
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
   const [overflowY, setOverflowY] = (0, _react.useState)('hidden');
   const [portal, setPortal] = (0, _react.useState)();
@@ -180,11 +180,6 @@ const ComboBox = ({
    */
   (0, _react.useEffect)(() => {
     var _styledComboBoxElemen;
-    if (shouldUseCurrentItemWidth) {
-      setMinWidth(undefined);
-      setBodyMinWidth(undefined);
-      return;
-    }
     const allItems = lists.flatMap(list => list.list);
     const hasImage = [selectedItem, ...allItems].some(item => item === null || item === void 0 ? void 0 : item.imageUrl);
     const hasIcon = [selectedItem, ...allItems].some(item => item === null || item === void 0 ? void 0 : item.icons);
@@ -222,7 +217,7 @@ const ComboBox = ({
       tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
     }
     setMinWidth(tmpMinWidth);
-    setBodyMinWidth(tmpBodyMinWidth);
+    setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
   }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);
 
   /**
@@ -342,13 +337,14 @@ const ComboBox = ({
       $minWidth: bodyMinWidth,
       style: bodyStyles,
       $direction: direction,
+      $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
       transition: {
         duration: 0.2
       },
       tabIndex: 0,
       ref: contentRef
     }, comboBoxGroups)), newContainer));
-  }, [bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  }, [bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,

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","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","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } 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    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    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<number | undefined>(undefined);\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 { 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        if(shouldUseCurrentItemWidth){\n            setMinWidth(undefined);\n            setBodyMinWidth(undefined);\n\n            return;\n        }\n\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some(\n            item => item?.imageUrl\n        );\n        const hasIcon = [selectedItem, ...allItems].some(\n            item => item?.icons\n        );\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 = calculateContentWidth([{ text: prefix, value: 'prefix' }]) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(selectedItem ? [selectedItem] : [])\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]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);\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                            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                            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    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\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                                {placeholderText}\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","styledComboBoxElementRef","useRef","contentRef","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","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","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } 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    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    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 { 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(\n            item => item?.imageUrl\n        );\n        const hasIcon = [selectedItem, ...allItems].some(\n            item => item?.icons\n        );\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 = calculateContentWidth([{ text: prefix, value: 'prefix' }]) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(selectedItem ? [selectedItem] : [])\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]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);\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                            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    }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\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                                {placeholderText}\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":[]}

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

@@ -146,12 +146,16 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
   $overflowY
 }) => $overflowY};
     
-    ${({
+    min-width: ${({
   $minWidth
-}) => typeof $minWidth === 'number' && (0, _styledComponents.css)`
-        min-width: ${$minWidth - 2}px;
-        max-width: ${$minWidth - 2}px;
-    `}
+}) => $minWidth - 2}px;
+    
+    ${({
+  $minWidth,
+  $shouldUseCurrentItemWidth
+}) => !$shouldUseCurrentItemWidth && (0, _styledComponents.css)`
+                max-width: ${$minWidth - 2}px;
+            `}
 
     ${({
   $direction

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) => {\n        if(typeof $minWidth !== 'number') {\n            return css`\n            width: fit-content`;\n        }\n        \n        \n        return $shouldUseFullWidth\n                ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n                : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n    flex: 0 0 auto;\n    min-width: 32px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth?: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n    \n    ${({$minWidth})=> typeof $minWidth === 'number' && css`\n        min-width: ${$minWidth - 2}px;\n        max-width: ${$minWidth - 2}px;\n    `\n}\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$shouldUseCurrentItemWidth","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) => {\n        if(typeof $minWidth !== 'number') {\n            return css`\n            width: fit-content`;\n        }\n        \n        \n        return $shouldUseFullWidth\n                ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n                : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n    flex: 0 0 auto;\n    min-width: 32px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth: number;\n    $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n    \n    min-width: ${({ $minWidth }) => $minWidth - 2}px;\n    \n    ${({$minWidth, $shouldUseCurrentItemWidth})=>\n            !$shouldUseCurrentItemWidth && css`\n                max-width: ${$minWidth - 2}px;\n            `\n}\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -32,7 +32,7 @@ const ComboBox = _ref => {
   const [internalSelectedItem, setInternalSelectedItem] = useState();
   const [isAnimating, setIsAnimating] = useState(false);
   const [minWidth, setMinWidth] = useState(undefined);
-  const [bodyMinWidth, setBodyMinWidth] = useState(undefined);
+  const [bodyMinWidth, setBodyMinWidth] = useState(0);
   const [focusedIndex, setFocusedIndex] = useState(null);
   const [overflowY, setOverflowY] = useState('hidden');
   const [portal, setPortal] = useState();
@@ -172,11 +172,6 @@ const ComboBox = _ref => {
    * This function calculates the greatest width
    */
   useEffect(() => {
-    if (shouldUseCurrentItemWidth) {
-      setMinWidth(undefined);
-      setBodyMinWidth(undefined);
-      return;
-    }
     const allItems = lists.flatMap(list => list.list);
     const hasImage = [selectedItem, ...allItems].some(item => item?.imageUrl);
     const hasIcon = [selectedItem, ...allItems].some(item => item?.icons);
@@ -214,7 +209,7 @@ const ComboBox = _ref => {
       tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
     }
     setMinWidth(tmpMinWidth);
-    setBodyMinWidth(tmpBodyMinWidth);
+    setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
   }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);
 
   /**
@@ -337,13 +332,14 @@ const ComboBox = _ref => {
       $minWidth: bodyMinWidth,
       style: bodyStyles,
       $direction: direction,
+      $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
       transition: {
         duration: 0.2
       },
       tabIndex: 0,
       ref: contentRef
     }, comboBoxGroups)), newContainer));
-  }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY]);
+  }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","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","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","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","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 } 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    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    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<number | undefined>(undefined);\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 { 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        if(shouldUseCurrentItemWidth){\n            setMinWidth(undefined);\n            setBodyMinWidth(undefined);\n\n            return;\n        }\n\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some(\n            item => item?.imageUrl\n        );\n        const hasIcon = [selectedItem, ...allItems].some(\n            item => item?.icons\n        );\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 = calculateContentWidth([{ text: prefix, value: 'prefix' }]) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(selectedItem ? [selectedItem] : [])\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]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);\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                            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                            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    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\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                                {placeholderText}\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":["useDevice","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","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","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","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 } 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    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    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 { 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(\n            item => item?.imageUrl\n        );\n        const hasIcon = [selectedItem, ...allItems].some(\n            item => item?.icons\n        );\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 = calculateContentWidth([{ text: prefix, value: 'prefix' }]) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(selectedItem ? [selectedItem] : [])\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]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);\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                            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    }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\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                                {placeholderText}\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":[]}

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

@@ -182,20 +182,27 @@ export const StyledMotionComboBoxBody = styled(motion.div)`
   return $overflowY;
 }};
     
-    ${_ref17 => {
+    min-width: ${_ref17 => {
   let {
     $minWidth
   } = _ref17;
-  return typeof $minWidth === 'number' && css`
-        min-width: ${$minWidth - 2}px;
-        max-width: ${$minWidth - 2}px;
-    `;
+  return $minWidth - 2;
+}}px;
+    
+    ${_ref18 => {
+  let {
+    $minWidth,
+    $shouldUseCurrentItemWidth
+  } = _ref18;
+  return !$shouldUseCurrentItemWidth && css`
+                max-width: ${$minWidth - 2}px;
+            `;
 }}
 
-    ${_ref18 => {
+    ${_ref19 => {
   let {
     $direction
-  } = _ref18;
+  } = _ref19;
   if ($direction === ComboBoxDirection.BOTTOM) {
     return css`
                 border-bottom-left-radius: 3px;
@@ -211,11 +218,11 @@ export const StyledMotionComboBoxBody = styled(motion.div)`
 }}
 
     // Styles for custom scrollbar
-    ${_ref19 => {
+    ${_ref20 => {
   let {
     $browser,
     theme
-  } = _ref19;
+  } = _ref20;
   return $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;
@@ -242,10 +249,10 @@ export const StyledMotionComboBoxBody = styled(motion.div)`
 `;
 export const StyledComboBoxTopic = styled.div`
     align-items: center;
-    color: rgba(${_ref20 => {
+    color: rgba(${_ref21 => {
   let {
     theme
-  } = _ref20;
+  } = _ref21;
   return theme['text-rgb'];
 }}, 0.65);
     position: sticky;
@@ -257,10 +264,10 @@ export const StyledComboBoxTopic = styled.div`
     gap: 10px;
     z-index: 10;
     padding: 4px 10px;
-    background-color: ${_ref21 => {
+    background-color: ${_ref22 => {
   let {
     theme
-  } = _ref21;
+  } = _ref22;
   return theme['secondary-101'];
 }};
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","_ref10","_ref11","_ref12","_ref13","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref14","_ref15","$maxHeight","_ref16","$overflowY","_ref17","_ref18","_ref19","$browser","StyledComboBoxTopic","_ref20","_ref21"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) => {\n        if(typeof $minWidth !== 'number') {\n            return css`\n            width: fit-content`;\n        }\n        \n        \n        return $shouldUseFullWidth\n                ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n                : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n    flex: 0 0 auto;\n    min-width: 32px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth?: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n    \n    ${({$minWidth})=> typeof $minWidth === 'number' && css`\n        min-width: ${$minWidth - 2}px;\n        max-width: ${$minWidth - 2}px;\n    `\n}\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","_ref10","_ref11","_ref12","_ref13","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref14","_ref15","$maxHeight","_ref16","$overflowY","_ref17","_ref18","$shouldUseCurrentItemWidth","_ref19","_ref20","$browser","StyledComboBoxTopic","_ref21","_ref22"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) => {\n        if(typeof $minWidth !== 'number') {\n            return css`\n            width: fit-content`;\n        }\n        \n        \n        return $shouldUseFullWidth\n                ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n                : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n    flex: 0 0 auto;\n    min-width: 32px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth: number;\n    $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n    \n    min-width: ${({ $minWidth }) => $minWidth - 2}px;\n    \n    ${({$minWidth, $shouldUseCurrentItemWidth})=>\n            !$shouldUseCurrentItemWidth && css`\n                max-width: ${$minWidth - 2}px;\n            `\n}\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,iBAAiB,QAAQ,sBAAsB;AASxD,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA,MAAMC,IAAA,IAAwC;EAAA,IAAvC;IAAEC,mBAAmB;IAAEC;EAAU,CAAC,GAAAF,IAAA;EACjC,IAAG,OAAOE,SAAS,KAAK,QAAQ,EAAE;IAC9B,OAAON,GAAG;AACtB,+BAA+B;EACvB;EAGA,OAAOK,mBAAmB,GAChBL,GAAG;AACrB,+BAA+BM,SAAS;AACxC;AACA,eAAe,GACGN,GAAG;AACrB,+BAA+BM,SAAS;AACxC,+BAA+BA,SAAS;AACxC,eAAe;AACX,CAAC;AACL,CAAC;AAWD,OAAO,MAAMC,oBAAoB,GAAGR,MAAM,CAACI,GAA8B;AACzE;AACA;AACA;AACA;AACA,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAM,CAACC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACzE,wBAAwBC,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA8C,CAAC,GAAAF,KAAA;EAAA,OACzEC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF,eAAeG,KAAA;EAAA,IAAC;IAAEL;EAAY,CAAC,GAAAK,KAAA;EAAA,OAAML,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OACtBC,mBAAmB,IACnBhB,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMiB,KAAA,IAA6B;EAAA,IAA5B;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAAF,KAAA;EACtB,IAAIC,OAAO,EAAE;IACT,OAAOC,UAAU,KAAKlB,iBAAiB,CAACmB,MAAM,GACxCpB,GAAG;AACrB;AACA;AACA,mBAAmB,GACDA,GAAG;AACrB;AACA;AACA,mBAAmB;EACX;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAMqB,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEb,WAAW;IAAEE;EAAiC,CAAC,GAAAU,KAAA;EAAA,OAC1D,CAACC,QAAQ,IACT,CAACb,WAAW,IACZT,GAAG;AACX;AACA,oCAAoCW,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMY,yBAAyB,GAAGxB,MAAM,CAACI,GAAmC;AACnF;AACA,aAAaqB,KAAA;EAAA,IAAC;IAAEb;EAAsC,CAAC,GAAAa,KAAA;EAAA,OAAKb,KAAK,CAACc,IAAI;AAAA;AACtE;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC7E,CAAC;AAED,OAAO,MAAMC,yCAAyC,GAAG7B,MAAM,CAACI,GAAG;AACnE;AACA;AACA,CAAC;AAED,OAAO,MAAM0B,oBAAoB,GAAG9B,MAAM,CAACI,GAAG;AAC9C;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,mBAAmB,GAAG/B,MAAM,CAACgC,KAAK;AAC/C;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,8BAA8B,GAAGjC,MAAM,CAACkC,GAAwC;AAC7F;AACA,eAAeC,MAAA;EAAA,IAAC;IAAEvB;EAA2C,CAAC,GAAAuB,MAAA;EAAA,OAAKvB,KAAK,CAAC,SAAS,CAAC;AAAA;AACnF,cAAcwB,MAAA;EAAA,IAAC;IAAEnB;EAAoB,CAAC,GAAAmB,MAAA;EAAA,OAAMnB,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAaoB,MAAA;EAAA,IAAC;IAAEpB;EAAoB,CAAC,GAAAoB,MAAA;EAAA,OAAMpB,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF;AACA,MAAMqB,MAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,MAAA;EAAA,OACxBC,qBAAqB,IACrBtC,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMuC,yBAAyB,GAAGxC,MAAM,CAACI,GAAG;AACnD;AACA;AACA;AACA,CAAC;AAWD,OAAO,MAAMqC,wBAAwB,GAAGzC,MAAM,CAACD,MAAM,CAACK,GAAG,CAA0B;AACnF,kBAAkBsC,MAAA;EAAA,IAAC;IAAE9B;EAA+B,CAAC,GAAA8B,MAAA;EAAA,OAAK9B,KAAK,CAAC,KAAK,CAAC;AAAA;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB+B,MAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,MAAA;EAAA,OAAKC,UAAU;AAAA;AAChD,kBAAkBC,MAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,MAAA;EAAA,OAAKC,UAAU;AAAA;AAChD;AACA,iBAAiBC,MAAA;EAAA,IAAC;IAAExC;EAAU,CAAC,GAAAwC,MAAA;EAAA,OAAKxC,SAAS,GAAG,CAAC;AAAA;AACjD;AACA,MAAMyC,MAAA;EAAA,IAAC;IAACzC,SAAS;IAAE0C;EAA0B,CAAC,GAAAD,MAAA;EAAA,OAClC,CAACC,0BAA0B,IAAIhD,GAAG;AAC9C,6BAA6BM,SAAS,GAAG,CAAC;AAC1C,aAAa;AAAA;AACb;AACA,MACM2C,MAAA,IAAoB;EAAA,IAAnB;IAAE9B;EAAW,CAAC,GAAA8B,MAAA;EACb,IAAI9B,UAAU,KAAKlB,iBAAiB,CAACmB,MAAM,EAAE;IACzC,OAAOpB,GAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,MAAMkD,MAAA;EAAA,IAAC;IAAEC,QAAQ;IAAExC;EAA+B,CAAC,GAAAuC,MAAA;EAAA,OAC3CC,QAAQ,KAAK,SAAS,GAChBnD,GAAG;AACjB,0CAA0CW,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDX,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CW,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAID,OAAO,MAAMyC,mBAAmB,GAAGrD,MAAM,CAACI,GAAG;AAC7C;AACA,kBAAkBkD,MAAA;EAAA,IAAC;IAAE1C;EAAgC,CAAC,GAAA0C,MAAA;EAAA,OAAK1C,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB2C,MAAA;EAAA,IAAC;IAAE3C;EAAgC,CAAC,GAAA2C,MAAA;EAAA,OAAK3C,KAAK,CAAC,eAAe,CAAC;AAAA;AACvF,CAAC","ignoreList":[]}

package/lib/types/components/combobox/ComboBox.styles.d.ts

@@ -35,7 +35,8 @@ type StyledComboBoxBodyProps = WithTheme<{
     $maxHeight: CSSProperties['maxHeight'];
     $direction: ComboBoxDirection;
     $browser: Browser | 'bot' | null | undefined;
-    $minWidth?: number;
+    $minWidth: number;
+    $shouldUseCurrentItemWidth: boolean;
 }>;
 export declare const StyledMotionComboBoxBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.937",
+    "version": "5.0.0-beta.938",
     "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": "2b4ce787c0d53da18af0f0b2900a7a9f3e890f02"
+    "gitHead": "5341361f65ea82792781cdf73c5a83644587cdf8"
 }