@chayns-components/core 5.0.0-beta.878 → 5.0.0-beta.879

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

@@ -28,6 +28,7 @@ const ComboBox = ({
   selectedItem,
   shouldShowBigImage,
   shouldShowRoundImage,
+  onInputFocus,
   shouldUseFullWidth = false,
   onInputChange,
   onInputBlur,
@@ -309,6 +310,7 @@ const ComboBox = ({
     value: inputValue,
     onChange: onInputChange,
     onBlur: onInputBlur,
+    onFocus: onInputFocus,
     placeholder: placeholderText
   }) : /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
@@ -319,7 +321,7 @@ const ComboBox = ({
     icons: placeholderIcon
   }), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-chevron-down']
-  }))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
+  }))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;

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

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

@@ -20,6 +20,7 @@ const ComboBox = _ref => {
     selectedItem,
     shouldShowBigImage,
     shouldShowRoundImage,
+    onInputFocus,
     shouldUseFullWidth = false,
     onInputChange,
     onInputBlur,
@@ -310,6 +311,7 @@ const ComboBox = _ref => {
     value: inputValue,
     onChange: onInputChange,
     onBlur: onInputBlur,
+    onFocus: onInputFocus,
     placeholder: placeholderText
   }) : /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
     $shouldReduceOpacity: !selectedItem && !internalSelectedItem
@@ -320,7 +322,7 @@ const ComboBox = _ref => {
     icons: placeholderIcon
   }), placeholderText, internalSelectedItem && internalSelectedItem.suffixElement && internalSelectedItem.suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-chevron-down']
-  }))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
+  }))), portal), [shouldUseFullWidth, minWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, inputValue, onInputChange, onInputBlur, onInputFocus, placeholderText, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundImage, placeholderIcon, portal]);
 };
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;

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

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

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

@@ -46,7 +46,10 @@ export type ComboBoxProps = {
     /**
      * Function to be executed when the optional input lost its focus.
      */
-    onInputBlur?: FocusEventHandler<HTMLInputElement>;
+    onInputBlur?: FocusEventHandler<HTMLInputElement> /**
+     * Function to be executed when the optional input gets its focus.
+     */;
+    onInputFocus?: FocusEventHandler<HTMLInputElement>;
     /**
      * Function that should be executed when an item is selected.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.878",
+    "version": "5.0.0-beta.879",
     "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": "82f177633ae02b6c7478c4fdc383312a32e025db"
+    "gitHead": "66e087a2be3f83bc736ed394dd2c26af2a40e6a5"
 }