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

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

@@ -357,7 +357,8 @@ const ComboBox = ({
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
-    $shouldUseFullWidth: shouldUseFullWidth
+    $shouldUseFullWidth: shouldUseFullWidth,
+    $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth
   }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
     $direction: direction,
     onClick: handleHeaderClick,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","useRef","contentRef","functions","useFunctions","values","useValues","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleClick","useCallback","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","body","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","calculateContentWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","StyledComboBoxTopic","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxPlaceholderText","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageBackground={item.imageBackground}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        if (!newContainer) {\n            return;\n        }\n\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","useRef","contentRef","functions","useFunctions","values","useValues","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleClick","useCallback","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","body","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","calculateContentWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","StyledComboBoxTopic","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxPlaceholderText","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageBackground?: CSSProperties['background'];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageBackground={item.imageBackground}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        if (!newContainer) {\n            return;\n        }\n\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -15,20 +15,27 @@ const StyledComboBox = exports.StyledComboBox = _styledComponents.default.div`
 
     ${({
   $shouldUseFullWidth,
-  $minWidth
+  $minWidth,
+  $shouldUseCurrentItemWidth
 }) => {
   if (typeof $minWidth !== 'number') {
     return (0, _styledComponents.css)`
                 width: fit-content;
             `;
   }
-  return $shouldUseFullWidth ? (0, _styledComponents.css)`
-                  min-width: ${$minWidth}px;
-                  width: 100%;
-              ` : (0, _styledComponents.css)`
-                  min-width: ${$minWidth}px;
-                  max-width: ${$minWidth}px;
-              `;
+  if ($shouldUseFullWidth) {
+    return (0, _styledComponents.css)`
+                min-width: ${$minWidth}px;
+                width: 100%;
+            `;
+  }
+  if ($shouldUseCurrentItemWidth) {
+    return '';
+  }
+  return (0, _styledComponents.css)`
+            min-width: ${$minWidth}px;
+            max-width: ${$minWidth}px;
+        `;
 }}
 `;
 const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.default.div`

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","StyledComboBoxPlaceholderText","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    flex: 1 1 auto;\n    gap: 10px;\n    min-width: 0;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\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['100']};\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    overflow-x: hidden;\n    min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n    ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n        !$shouldUseCurrentItemWidth &&\n        css`\n            max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\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","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","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    $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n        if (typeof $minWidth !== 'number') {\n            return css`\n                width: fit-content;\n            `;\n        }\n\n        if ($shouldUseFullWidth) {\n            return css`\n                min-width: ${$minWidth}px;\n                width: 100%;\n            `;\n        }\n\n        if ($shouldUseCurrentItemWidth) {\n            return '';\n        }\n\n        return 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    flex: 1 1 auto;\n    gap: 10px;\n    min-width: 0;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\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['100']};\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    overflow-x: hidden;\n    min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n    ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n        !$shouldUseCurrentItemWidth &&\n        css`\n            max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\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/cjs/components/search-box/SearchBox.js

@@ -57,6 +57,8 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   const boxRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
   const inputRef = (0, _react.useRef)(null);
+  const hasFocusRef = (0, _react.useRef)(false);
+  const isAnimatingRef = (0, _react.useRef)(false);
   const theme = (0, _styledComponents.useTheme)();
   const {
     browser
@@ -265,11 +267,20 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       setValue('');
     }
   }, [selectedId]);
+  (0, _react.useEffect)(() => {
+    isAnimatingRef.current = isAnimating;
+  }, [isAnimating]);
+  (0, _react.useEffect)(() => {
+    if (matchingListsItems.length !== 0 && !isAnimatingRef.current && hasFocusRef.current) {
+      handleOpen();
+    }
+  }, [handleOpen, matchingListsItems.length]);
 
   /**
    * This function sets the items on focus if shouldShowContentOnEmptyInput
    */
   const handleFocus = (0, _react.useCallback)(() => {
+    hasFocusRef.current = true;
     if (shouldShowContentOnEmptyInput) {
       const newMatchingItems = [];
       activeList.forEach(({
@@ -416,6 +427,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
    * This function handles the blur event of the input
    */
   const handleBlur = (0, _react.useCallback)(event => {
+    hasFocusRef.current = false;
     if (typeof onBlur === 'function') {
       onBlur(event);
     }