@chayns-components/core 5.0.17 → 5.0.19

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

@@ -32,7 +32,10 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
   placeholder,
   prefix,
   container,
+  shouldCaptureEvents,
   selectedItem,
+  onHide,
+  onShow,
   shouldShowBigImage,
   shouldShowClearIcon,
   shouldShowRoundImage,
@@ -101,11 +104,17 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
     onInputBlur === null || onInputBlur === void 0 || onInputBlur(event);
   }, [onInputBlur]);
   const handleOpen = (0, _react.useCallback)(() => {
+    if (typeof onShow === 'function') {
+      onShow();
+    }
     setIsAnimating(true);
-  }, []);
+  }, [onShow]);
   const handleClose = (0, _react.useCallback)(() => {
+    if (typeof onHide === 'function') {
+      onHide();
+    }
     setIsAnimating(false);
-  }, []);
+  }, [onHide]);
 
   /**
    * This function sets the selected item
@@ -120,13 +129,13 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
         void onSelectResult.then(shouldPreventSelection => {
           if (shouldPreventSelection) return;
           setInternalSelectedItem(itemToSelect);
-          setIsAnimating(false);
+          handleClose();
         });
         return;
       }
     }
     setInternalSelectedItem(itemToSelect);
-    setIsAnimating(false);
+    handleClose();
   }, [onSelect]);
   const handleClear = (0, _react.useCallback)(event => {
     event.preventDefault();
@@ -378,6 +387,7 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
     anchorElement: styledComboBoxElementRef.current,
     bodyWidth: bodyWidth,
     contentHeight: contentHeight,
+    shouldCaptureEvents: shouldCaptureEvents,
     onClose: handleClose,
     direction: direction,
     container: container,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBoxSize","exports","ComboBox","forwardRef","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","useRef","styledComboBoxElementRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","useIsTouch","browser","useDevice","areaProvider","useContext","AreaContext","useEffect","width","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","_styledComboBoxElemen","allItems","maxItemWidth","calculateMaxComboBoxItemWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","internalSelectedItemWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","useImperativeHandle","hide","show","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","$browser","name","displayName","_default"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    Fragment,\n    ReactHTML,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateMaxComboBoxItemWidth } from '../../utils/calculate';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\n\nexport interface ComboBoxRef {\n    hide: VoidFunction;\n    show: VoidFunction;\n}\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?: CSSPropertiesWithVars;\n    className?: string;\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 enum ComboBoxSize {\n    NORMAL = 'normal',\n    SMALL = 'small',\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The width of the body.\n     */\n    bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 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) => Promise<boolean> | 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, a clear icon is displayed at the end of the combo box if an item is selected.\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: 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     * If true, the dropdown will use the maximum width of the items.\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n    /**\n     * The size of the ComboBox.\n     */\n    size?: ComboBoxSize;\n    /**\n     * Optional min width for the prefix element.\n     */\n    prefixMinWidth?: number;\n};\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n    (\n        {\n            bodyWidth,\n            direction = DropdownDirection.RIGHT,\n            isDisabled = false,\n            lists,\n            maxHeight = 280,\n            onSelect,\n            placeholder,\n            prefix,\n            container,\n            selectedItem,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldShowRoundImage,\n            onInputFocus,\n            prefixMinWidth,\n            size = ComboBoxSize.NORMAL,\n            shouldUseFullWidth = false,\n            onInputChange,\n            shouldUseCurrentItemWidth = false,\n            onInputBlur,\n            shouldShowTransparentBackground = false,\n            inputValue,\n            shouldDropDownUseMaxItemWidth = false,\n        },\n        ref,\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\n        const isInputFocused = useRef(false);\n\n        const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n\n        const parentSize = useElementSize(styledComboBoxElementRef, {\n            shouldUseParentElement: true,\n        });\n\n        const functions = useFunctions();\n        const values = useValues();\n\n        const isTouch = useIsTouch();\n\n        const { browser } = useDevice();\n\n        const areaProvider = useContext(AreaContext);\n\n        useEffect(() => {\n            if (shouldUseFullWidth && parentSize) {\n                setMinWidth(parentSize.width);\n            }\n        }, [parentSize, shouldUseFullWidth]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldDisableActions = useMemo(() => {\n            if (!selectedItem) {\n                return false;\n            }\n\n            const combinedLists = lists.flatMap((list) => list.list);\n\n            return (\n                combinedLists.length === 1 &&\n                combinedLists.some((item) => item.value === selectedItem.value)\n            );\n        }, [lists, selectedItem]);\n\n        const contentHeight = useMemo(() => {\n            const flatItems = lists.flatMap((list) => list.list);\n\n            let height = flatItems.reduce((value, item) => {\n                const isBigItem =\n                    shouldShowBigImage ||\n                    (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n                return value + (isBigItem ? 56 : 38);\n            }, 0);\n\n            if (lists.length > 1) {\n                height += lists.length * 38;\n            }\n\n            if (maxHeight < height) {\n                height = maxHeight;\n            }\n\n            return height;\n        }, [lists, maxHeight, shouldShowBigImage]);\n\n        const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = true;\n                onInputFocus?.(event);\n            },\n            [onInputFocus],\n        );\n\n        const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = false;\n                onInputBlur?.(event);\n            },\n            [onInputBlur],\n        );\n\n        const handleOpen = useCallback(() => {\n            setIsAnimating(true);\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        /**\n         * This function sets the selected item\n         */\n        const handleSetSelectedItem = useCallback(\n            (itemToSelect?: IComboBoxItem) => {\n                if (typeof onSelect === 'function') {\n                    const onSelectResult = onSelect(itemToSelect);\n\n                    if (onSelectResult === false) {\n                        return;\n                    }\n\n                    if (onSelectResult instanceof Promise) {\n                        void onSelectResult.then((shouldPreventSelection) => {\n                            if (shouldPreventSelection) return;\n\n                            setInternalSelectedItem(itemToSelect);\n                            setIsAnimating(false);\n                        });\n\n                        return;\n                    }\n                }\n\n                setInternalSelectedItem(itemToSelect);\n                setIsAnimating(false);\n            },\n            [onSelect],\n        );\n\n        const handleClear = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleSetSelectedItem(undefined);\n            },\n            [handleSetSelectedItem],\n        );\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) return;\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n\n                    const children = contentRef.current?.children;\n\n                    if (!children || children.length === 0) return;\n\n                    const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                    let newIndex = focusedIndex ?? -1;\n\n                    let attempts = 0;\n\n                    do {\n                        newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n\n                        let shouldSkip = false;\n\n                        if (\n                            newElement.id.startsWith('combobox-group--') ||\n                            newElement.id.endsWith('--disabled-item')\n                        ) {\n                            shouldSkip = true;\n                        }\n\n                        if (!shouldSkip) break;\n\n                        attempts++;\n                    } while (attempts < children.length);\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const focusedElement = children[newIndex] as HTMLDivElement;\n\n                    focusedElement.tabIndex = 0;\n\n                    focusedElement.focus();\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) return;\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\n                        return !!newSelectedItem;\n                    });\n\n                    if (newSelectedItem) {\n                        handleSetSelectedItem(newSelectedItem);\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => document.removeEventListener('keydown', handleKeyDown);\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            let maxItemWidth = calculateMaxComboBoxItemWidth({\n                list: [\n                    ...allItems,\n                    { text: placeholder, value: 'placeholder' },\n                    ...(selectedItem ? [selectedItem] : []),\n                ],\n                functions,\n                shouldShowBigImage,\n                values,\n            });\n\n            if (shouldDropDownUseMaxItemWidth) {\n                maxItemWidth += 20 + 2 + 1; // 20px padding (left and right), 2px border, 1px puffer for rounding errors\n\n                setBodyMinWidth(maxItemWidth);\n                setMinWidth(maxItemWidth);\n\n                return;\n            }\n\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 = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 = calculateMaxComboBoxItemWidth({\n                    list: [{ text: prefix, value: 'prefix' }],\n                    functions,\n                    values,\n                });\n\n                prefixWidth = Math.max(prefixTextWidth + 5, 32);\n            }\n\n            const calculatedWidth =\n                maxItemWidth + 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            // Current item width settings\n            else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n                const internalSelectedItemWidth = calculateMaxComboBoxItemWidth({\n                    list: [internalSelectedItem],\n                    functions,\n                    shouldShowBigImage,\n                    values,\n                });\n\n                const itemWidth =\n                    internalSelectedItemWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n                tmpMinWidth = itemWidth;\n\n                tmpBodyMinWidth =\n                    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            functions,\n            internalSelectedItem,\n            lists,\n            placeholder,\n            prefix,\n            selectedItem,\n            shouldDropDownUseMaxItemWidth,\n            shouldShowBigImage,\n            shouldUseCurrentItemWidth,\n            shouldUseFullWidth,\n            values,\n        ]);\n\n        /**\n         * This function sets the external selected item\n         */\n        useEffect(() => {\n            setIsAnimating(false);\n            setInternalSelectedItem(selectedItem);\n        }, [selectedItem]);\n\n        const placeholderImageUrl = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.imageUrl;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.imageUrl;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        const placeholderIcon = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.icons;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.icons;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        /**\n         * This function resets the placeholder\n         */\n        const placeholderText = useMemo(() => {\n            let text = placeholder;\n\n            if (selectedItem) {\n                text = selectedItem.text;\n            } else if (internalSelectedItem) {\n                text = internalSelectedItem.text;\n            }\n\n            return text;\n        }, [internalSelectedItem, placeholder, selectedItem]);\n\n        const shouldShowRoundPlaceholderImage = useMemo(() => {\n            const selectedItemList = lists.find((list) =>\n                list.list.some(\n                    ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n                ),\n            );\n\n            return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n        }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n        /**\n         * This function opens the content of the combobox\n         */\n        const handleHeaderClick = useCallback(() => {\n            if (!isDisabled && !isInputFocused.current) {\n                if (isAnimating) {\n                    handleClose();\n                } else {\n                    handleOpen();\n                }\n            }\n        }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleClose,\n                show: handleOpen,\n            }),\n            [handleClose, handleOpen],\n        );\n\n        const comboBoxGroups = useMemo(\n            () =>\n                lists.map((list) => (\n                    <Fragment key={list.groupName ?? 'default-group'}>\n                        {list.groupName && lists.length > 1 && (\n                            <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                                {list.groupName}\n                            </StyledComboBoxTopic>\n                        )}\n                        {list.list.map((item) => (\n                            <ComboBoxItem\n                                key={`item-${item.text}`}\n                                item={item}\n                                isSelected={\n                                    selectedItem ? item.value === selectedItem.value : false\n                                }\n                                onSelect={handleSetSelectedItem}\n                                shouldShowBigImage={shouldShowBigImage}\n                                shouldShowRoundImage={\n                                    list.shouldShowRoundImage ?? shouldShowRoundImage\n                                }\n                            />\n                        ))}\n                    </Fragment>\n                )),\n            [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\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                        $size={size}\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $isDisabled={isDisabled}\n                        $shouldChangeColor={shouldChangeColor}\n                        $shouldShowBigImage={shouldShowBigImage}\n                    >\n                        <StyledComboBoxPrefixAndPlaceholderWrapper>\n                            {prefix && (\n                                <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n                                    {prefix}\n                                </StyledComboBoxPrefix>\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                                {typeof inputValue === 'string' ? (\n                                    <StyledComboBoxInput\n                                        disabled={isDisabled}\n                                        value={inputValue}\n                                        onChange={onInputChange}\n                                        onBlur={handleInputBlur}\n                                        onFocus={handleInputFocus}\n                                        placeholder={placeholderText}\n                                    />\n                                ) : (\n                                    <StyledComboBoxPlaceholderText>\n                                        {placeholderText}\n                                    </StyledComboBoxPlaceholderText>\n                                )}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        </StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {shouldShowClearIcon && internalSelectedItem && (\n                            <StyledComboBoxClearIconWrapper\n                                $isDisabled={isDisabled}\n                                onClick={handleClear}\n                            >\n                                <Icon icons={['fa fa-times']} />\n                            </StyledComboBoxClearIconWrapper>\n                        )}\n                        {!shouldDisableActions && (\n                            <StyledComboBoxIconWrapper\n                                $isDisabled={isDisabled}\n                                $size={size}\n                                $shouldShowBorderLeft={\n                                    shouldShowClearIcon === true &&\n                                    internalSelectedItem !== undefined\n                                }\n                            >\n                                <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n                            </StyledComboBoxIconWrapper>\n                        )}\n                    </StyledComboBoxHeader>\n                    {styledComboBoxElementRef.current && (\n                        <DropdownBodyWrapper\n                            anchorElement={styledComboBoxElementRef.current}\n                            bodyWidth={bodyWidth}\n                            contentHeight={contentHeight}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                            maxHeight={maxHeight}\n                        >\n                            <StyledComboBoxBody\n                                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                                $maxHeight={maxHeight}\n                                $minWidth={bodyWidth ?? bodyMinWidth}\n                                $browser={browser?.name as BrowserName}\n                                ref={contentRef}\n                                tabIndex={0}\n                            >\n                                {comboBoxGroups}\n                            </StyledComboBoxBody>\n                        </DropdownBodyWrapper>\n                    )}\n                </StyledComboBox>\n            ),\n            [\n                minWidth,\n                shouldUseFullWidth,\n                shouldUseCurrentItemWidth,\n                direction,\n                handleHeaderClick,\n                isAnimating,\n                isTouch,\n                size,\n                shouldShowTransparentBackground,\n                isDisabled,\n                shouldChangeColor,\n                shouldShowBigImage,\n                prefix,\n                prefixMinWidth,\n                selectedItem,\n                internalSelectedItem,\n                placeholderImageUrl,\n                shouldShowRoundPlaceholderImage,\n                placeholderIcon,\n                inputValue,\n                onInputChange,\n                handleInputBlur,\n                handleInputFocus,\n                placeholderText,\n                shouldShowClearIcon,\n                handleClear,\n                shouldDisableActions,\n                bodyWidth,\n                contentHeight,\n                handleClose,\n                container,\n                bodyMinWidth,\n                maxHeight,\n                browser?.name,\n                comboBoxGroups,\n            ],\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","_react","_interopRequireWildcard","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBoxSize","exports","ComboBox","forwardRef","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","useRef","styledComboBoxElementRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","useIsTouch","browser","useDevice","areaProvider","useContext","AreaContext","useEffect","width","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","_styledComboBoxElemen","allItems","maxItemWidth","calculateMaxComboBoxItemWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","internalSelectedItemWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","useImperativeHandle","hide","show","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","$browser","name","displayName","_default"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    Fragment,\n    ReactHTML,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateMaxComboBoxItemWidth } from '../../utils/calculate';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\n\nexport interface ComboBoxRef {\n    hide: VoidFunction;\n    show: VoidFunction;\n}\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?: CSSPropertiesWithVars;\n    className?: string;\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 enum ComboBoxSize {\n    NORMAL = 'normal',\n    SMALL = 'small',\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The width of the body.\n     */\n    bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 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) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is shown.\n     */\n    onShow?: () => void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is hidden.\n     */\n    onHide?: () => 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, a clear icon is displayed at the end of the combo box if an item is selected.\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: 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     * If true, the dropdown will use the maximum width of the items.\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n    /**\n     * The size of the ComboBox.\n     */\n    size?: ComboBoxSize;\n    /**\n     * Optional min width for the prefix element.\n     */\n    prefixMinWidth?: number;\n};\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n    (\n        {\n            bodyWidth,\n            direction = DropdownDirection.RIGHT,\n            isDisabled = false,\n            lists,\n            maxHeight = 280,\n            onSelect,\n            placeholder,\n            prefix,\n            container,\n            shouldCaptureEvents,\n            selectedItem,\n            onHide,\n            onShow,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldShowRoundImage,\n            onInputFocus,\n            prefixMinWidth,\n            size = ComboBoxSize.NORMAL,\n            shouldUseFullWidth = false,\n            onInputChange,\n            shouldUseCurrentItemWidth = false,\n            onInputBlur,\n            shouldShowTransparentBackground = false,\n            inputValue,\n            shouldDropDownUseMaxItemWidth = false,\n        },\n        ref,\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\n        const isInputFocused = useRef(false);\n\n        const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n\n        const parentSize = useElementSize(styledComboBoxElementRef, {\n            shouldUseParentElement: true,\n        });\n\n        const functions = useFunctions();\n        const values = useValues();\n\n        const isTouch = useIsTouch();\n\n        const { browser } = useDevice();\n\n        const areaProvider = useContext(AreaContext);\n\n        useEffect(() => {\n            if (shouldUseFullWidth && parentSize) {\n                setMinWidth(parentSize.width);\n            }\n        }, [parentSize, shouldUseFullWidth]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldDisableActions = useMemo(() => {\n            if (!selectedItem) {\n                return false;\n            }\n\n            const combinedLists = lists.flatMap((list) => list.list);\n\n            return (\n                combinedLists.length === 1 &&\n                combinedLists.some((item) => item.value === selectedItem.value)\n            );\n        }, [lists, selectedItem]);\n\n        const contentHeight = useMemo(() => {\n            const flatItems = lists.flatMap((list) => list.list);\n\n            let height = flatItems.reduce((value, item) => {\n                const isBigItem =\n                    shouldShowBigImage ||\n                    (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n                return value + (isBigItem ? 56 : 38);\n            }, 0);\n\n            if (lists.length > 1) {\n                height += lists.length * 38;\n            }\n\n            if (maxHeight < height) {\n                height = maxHeight;\n            }\n\n            return height;\n        }, [lists, maxHeight, shouldShowBigImage]);\n\n        const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = true;\n                onInputFocus?.(event);\n            },\n            [onInputFocus],\n        );\n\n        const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = false;\n                onInputBlur?.(event);\n            },\n            [onInputBlur],\n        );\n\n        const handleOpen = useCallback(() => {\n            if (typeof onShow === 'function') {\n                onShow();\n            }\n\n            setIsAnimating(true);\n        }, [onShow]);\n\n        const handleClose = useCallback(() => {\n            if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            setIsAnimating(false);\n        }, [onHide]);\n\n        /**\n         * This function sets the selected item\n         */\n        const handleSetSelectedItem = useCallback(\n            (itemToSelect?: IComboBoxItem) => {\n                if (typeof onSelect === 'function') {\n                    const onSelectResult = onSelect(itemToSelect);\n\n                    if (onSelectResult === false) {\n                        return;\n                    }\n\n                    if (onSelectResult instanceof Promise) {\n                        void onSelectResult.then((shouldPreventSelection) => {\n                            if (shouldPreventSelection) return;\n\n                            setInternalSelectedItem(itemToSelect);\n                            handleClose();\n                        });\n\n                        return;\n                    }\n                }\n\n                setInternalSelectedItem(itemToSelect);\n                handleClose();\n            },\n            [onSelect],\n        );\n\n        const handleClear = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleSetSelectedItem(undefined);\n            },\n            [handleSetSelectedItem],\n        );\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) return;\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n\n                    const children = contentRef.current?.children;\n\n                    if (!children || children.length === 0) return;\n\n                    const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                    let newIndex = focusedIndex ?? -1;\n\n                    let attempts = 0;\n\n                    do {\n                        newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n\n                        let shouldSkip = false;\n\n                        if (\n                            newElement.id.startsWith('combobox-group--') ||\n                            newElement.id.endsWith('--disabled-item')\n                        ) {\n                            shouldSkip = true;\n                        }\n\n                        if (!shouldSkip) break;\n\n                        attempts++;\n                    } while (attempts < children.length);\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const focusedElement = children[newIndex] as HTMLDivElement;\n\n                    focusedElement.tabIndex = 0;\n\n                    focusedElement.focus();\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) return;\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\n                        return !!newSelectedItem;\n                    });\n\n                    if (newSelectedItem) {\n                        handleSetSelectedItem(newSelectedItem);\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => document.removeEventListener('keydown', handleKeyDown);\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            let maxItemWidth = calculateMaxComboBoxItemWidth({\n                list: [\n                    ...allItems,\n                    { text: placeholder, value: 'placeholder' },\n                    ...(selectedItem ? [selectedItem] : []),\n                ],\n                functions,\n                shouldShowBigImage,\n                values,\n            });\n\n            if (shouldDropDownUseMaxItemWidth) {\n                maxItemWidth += 20 + 2 + 1; // 20px padding (left and right), 2px border, 1px puffer for rounding errors\n\n                setBodyMinWidth(maxItemWidth);\n                setMinWidth(maxItemWidth);\n\n                return;\n            }\n\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 = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 = calculateMaxComboBoxItemWidth({\n                    list: [{ text: prefix, value: 'prefix' }],\n                    functions,\n                    values,\n                });\n\n                prefixWidth = Math.max(prefixTextWidth + 5, 32);\n            }\n\n            const calculatedWidth =\n                maxItemWidth + 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            // Current item width settings\n            else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n                const internalSelectedItemWidth = calculateMaxComboBoxItemWidth({\n                    list: [internalSelectedItem],\n                    functions,\n                    shouldShowBigImage,\n                    values,\n                });\n\n                const itemWidth =\n                    internalSelectedItemWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n                tmpMinWidth = itemWidth;\n\n                tmpBodyMinWidth =\n                    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            functions,\n            internalSelectedItem,\n            lists,\n            placeholder,\n            prefix,\n            selectedItem,\n            shouldDropDownUseMaxItemWidth,\n            shouldShowBigImage,\n            shouldUseCurrentItemWidth,\n            shouldUseFullWidth,\n            values,\n        ]);\n\n        /**\n         * This function sets the external selected item\n         */\n        useEffect(() => {\n            setIsAnimating(false);\n            setInternalSelectedItem(selectedItem);\n        }, [selectedItem]);\n\n        const placeholderImageUrl = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.imageUrl;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.imageUrl;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        const placeholderIcon = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.icons;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.icons;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        /**\n         * This function resets the placeholder\n         */\n        const placeholderText = useMemo(() => {\n            let text = placeholder;\n\n            if (selectedItem) {\n                text = selectedItem.text;\n            } else if (internalSelectedItem) {\n                text = internalSelectedItem.text;\n            }\n\n            return text;\n        }, [internalSelectedItem, placeholder, selectedItem]);\n\n        const shouldShowRoundPlaceholderImage = useMemo(() => {\n            const selectedItemList = lists.find((list) =>\n                list.list.some(\n                    ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n                ),\n            );\n\n            return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n        }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n        /**\n         * This function opens the content of the combobox\n         */\n        const handleHeaderClick = useCallback(() => {\n            if (!isDisabled && !isInputFocused.current) {\n                if (isAnimating) {\n                    handleClose();\n                } else {\n                    handleOpen();\n                }\n            }\n        }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleClose,\n                show: handleOpen,\n            }),\n            [handleClose, handleOpen],\n        );\n\n        const comboBoxGroups = useMemo(\n            () =>\n                lists.map((list) => (\n                    <Fragment key={list.groupName ?? 'default-group'}>\n                        {list.groupName && lists.length > 1 && (\n                            <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                                {list.groupName}\n                            </StyledComboBoxTopic>\n                        )}\n                        {list.list.map((item) => (\n                            <ComboBoxItem\n                                key={`item-${item.text}`}\n                                item={item}\n                                isSelected={\n                                    selectedItem ? item.value === selectedItem.value : false\n                                }\n                                onSelect={handleSetSelectedItem}\n                                shouldShowBigImage={shouldShowBigImage}\n                                shouldShowRoundImage={\n                                    list.shouldShowRoundImage ?? shouldShowRoundImage\n                                }\n                            />\n                        ))}\n                    </Fragment>\n                )),\n            [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\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                        $size={size}\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $isDisabled={isDisabled}\n                        $shouldChangeColor={shouldChangeColor}\n                        $shouldShowBigImage={shouldShowBigImage}\n                    >\n                        <StyledComboBoxPrefixAndPlaceholderWrapper>\n                            {prefix && (\n                                <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n                                    {prefix}\n                                </StyledComboBoxPrefix>\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                                {typeof inputValue === 'string' ? (\n                                    <StyledComboBoxInput\n                                        disabled={isDisabled}\n                                        value={inputValue}\n                                        onChange={onInputChange}\n                                        onBlur={handleInputBlur}\n                                        onFocus={handleInputFocus}\n                                        placeholder={placeholderText}\n                                    />\n                                ) : (\n                                    <StyledComboBoxPlaceholderText>\n                                        {placeholderText}\n                                    </StyledComboBoxPlaceholderText>\n                                )}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        </StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {shouldShowClearIcon && internalSelectedItem && (\n                            <StyledComboBoxClearIconWrapper\n                                $isDisabled={isDisabled}\n                                onClick={handleClear}\n                            >\n                                <Icon icons={['fa fa-times']} />\n                            </StyledComboBoxClearIconWrapper>\n                        )}\n                        {!shouldDisableActions && (\n                            <StyledComboBoxIconWrapper\n                                $isDisabled={isDisabled}\n                                $size={size}\n                                $shouldShowBorderLeft={\n                                    shouldShowClearIcon === true &&\n                                    internalSelectedItem !== undefined\n                                }\n                            >\n                                <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n                            </StyledComboBoxIconWrapper>\n                        )}\n                    </StyledComboBoxHeader>\n                    {styledComboBoxElementRef.current && (\n                        <DropdownBodyWrapper\n                            anchorElement={styledComboBoxElementRef.current}\n                            bodyWidth={bodyWidth}\n                            contentHeight={contentHeight}\n                            shouldCaptureEvents={shouldCaptureEvents}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                            maxHeight={maxHeight}\n                        >\n                            <StyledComboBoxBody\n                                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                                $maxHeight={maxHeight}\n                                $minWidth={bodyWidth ?? bodyMinWidth}\n                                $browser={browser?.name as BrowserName}\n                                ref={contentRef}\n                                tabIndex={0}\n                            >\n                                {comboBoxGroups}\n                            </StyledComboBoxBody>\n                        </DropdownBodyWrapper>\n                    )}\n                </StyledComboBox>\n            ),\n            [\n                minWidth,\n                shouldUseFullWidth,\n                shouldUseCurrentItemWidth,\n                direction,\n                handleHeaderClick,\n                isAnimating,\n                isTouch,\n                size,\n                shouldShowTransparentBackground,\n                isDisabled,\n                shouldChangeColor,\n                shouldShowBigImage,\n                prefix,\n                prefixMinWidth,\n                selectedItem,\n                internalSelectedItem,\n                placeholderImageUrl,\n                shouldShowRoundPlaceholderImage,\n                placeholderIcon,\n                inputValue,\n                onInputChange,\n                handleInputBlur,\n                handleInputFocus,\n                placeholderText,\n                shouldShowClearIcon,\n                handleClear,\n                shouldDisableActions,\n                bodyWidth,\n                contentHeight,\n                handleClose,\n                container,\n                bodyMinWidth,\n                maxHeight,\n                browser?.name,\n                comboBoxGroups,\n            ],\n        );\n    },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js

@@ -25,6 +25,7 @@ const DropdownBodyWrapper = ({
   onClose,
   onOutsideClick,
   onMeasure,
+  shouldCaptureEvents = true,
   shouldShowDropdown
 }) => {
   const isInChaynsWalletRef = (0, _react.useRef)(false);
@@ -97,7 +98,8 @@ const DropdownBodyWrapper = ({
     onClick: handleClick,
     onClose: handleClose,
     onTouchEnd: handleTouchEnd,
-    onTouchStart: handleTouchStart
+    onTouchStart: handleTouchStart,
+    shouldCaptureEvents
   });
   (0, _react.useEffect)(() => {
     const isBottomDirection = [_dropdown.DropdownDirection.BOTTOM, _dropdown.DropdownDirection.BOTTOM_LEFT, _dropdown.DropdownDirection.BOTTOM_RIGHT].includes(direction);

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldShowDropdown","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","contentWidth","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        anchorElement,\n        container,\n        contentHeight,\n        contentWidth: bodyWidth ?? measuredContentWidth,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            setMeasuredContentWidth(measurements.width);\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","contentWidth","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldCaptureEvents = true,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        anchorElement,\n        container,\n        contentHeight,\n        contentWidth: bodyWidth ?? measuredContentWidth,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            setMeasuredContentWidth(measurements.width);\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n        shouldCaptureEvents,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/hooks/dropdown.js

@@ -11,17 +11,18 @@ const useDropdownListener = ({
   onClick,
   onClose,
   onTouchEnd,
-  onTouchStart
+  onTouchStart,
+  shouldCaptureEvents
 }) => {
   (0, _react.useEffect)(() => {
-    document.addEventListener('click', onClick, true);
-    document.addEventListener('touchend', onTouchEnd, true);
-    document.addEventListener('touchstart', onTouchStart, true);
+    document.addEventListener('click', onClick, shouldCaptureEvents);
+    document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);
+    document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);
     window.addEventListener('blur', onClose);
     return () => {
-      document.removeEventListener('click', onClick, true);
-      document.removeEventListener('touchend', onTouchEnd, true);
-      document.removeEventListener('touchstart', onTouchStart, true);
+      document.removeEventListener('click', onClick, shouldCaptureEvents);
+      document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);
+      document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);
       window.removeEventListener('blur', onClose);
     };
   }, [onClick, onClose, onTouchEnd, onTouchStart]);

package/lib/cjs/hooks/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","exports","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","useCallback","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, true);\n        document.addEventListener('touchend', onTouchEnd, true);\n        document.addEventListener('touchstart', onTouchStart, true);\n\n        window.addEventListener('blur', onClose);\n\n        return () => {\n            document.removeEventListener('click', onClick, true);\n            document.removeEventListener('touchend', onTouchEnd, true);\n            document.removeEventListener('touchstart', onTouchStart, true);\n\n            window.removeEventListener('blur', onClose);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    contentWidth: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    anchorElement,\n    contentWidth,\n    direction,\n    shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction)\n        ) {\n            const difference = anchorElement.clientWidth - contentWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, contentWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    contentWidth: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    container,\n    contentHeight,\n    contentWidth,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        anchorElement,\n        contentWidth,\n        direction,\n        shouldUseTopAlignment,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","exports","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","useCallback","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n    shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n    shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, shouldCaptureEvents);\n        document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n        document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n        window.addEventListener('blur', onClose);\n\n        return () => {\n            document.removeEventListener('click', onClick, shouldCaptureEvents);\n            document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n            document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n            window.removeEventListener('blur', onClose);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    contentWidth: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    anchorElement,\n    contentWidth,\n    direction,\n    shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction)\n        ) {\n            const difference = anchorElement.clientWidth - contentWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, contentWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    contentWidth: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    container,\n    contentHeight,\n    contentWidth,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        anchorElement,\n        contentWidth,\n        direction,\n        shouldUseTopAlignment,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -24,7 +24,10 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   placeholder,
   prefix,
   container,
+  shouldCaptureEvents,
   selectedItem,
+  onHide,
+  onShow,
   shouldShowBigImage,
   shouldShowClearIcon,
   shouldShowRoundImage,
@@ -93,11 +96,17 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     onInputBlur?.(event);
   }, [onInputBlur]);
   const handleOpen = useCallback(() => {
+    if (typeof onShow === 'function') {
+      onShow();
+    }
     setIsAnimating(true);
-  }, []);
+  }, [onShow]);
   const handleClose = useCallback(() => {
+    if (typeof onHide === 'function') {
+      onHide();
+    }
     setIsAnimating(false);
-  }, []);
+  }, [onHide]);
 
   /**
    * This function sets the selected item
@@ -112,13 +121,13 @@ const ComboBox = /*#__PURE__*/forwardRef(({
         void onSelectResult.then(shouldPreventSelection => {
           if (shouldPreventSelection) return;
           setInternalSelectedItem(itemToSelect);
-          setIsAnimating(false);
+          handleClose();
         });
         return;
       }
     }
     setInternalSelectedItem(itemToSelect);
-    setIsAnimating(false);
+    handleClose();
   }, [onSelect]);
   const handleClear = useCallback(event => {
     event.preventDefault();
@@ -367,6 +376,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     anchorElement: styledComboBoxElementRef.current,
     bodyWidth: bodyWidth,
     contentHeight: contentHeight,
+    shouldCaptureEvents: shouldCaptureEvents,
     onClose: handleClose,
     direction: direction,
     container: container,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateMaxComboBoxItemWidth","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","browser","areaProvider","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","allItems","maxItemWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","internalSelectedItemWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","$browser","name","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    Fragment,\n    ReactHTML,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateMaxComboBoxItemWidth } from '../../utils/calculate';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\n\nexport interface ComboBoxRef {\n    hide: VoidFunction;\n    show: VoidFunction;\n}\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?: CSSPropertiesWithVars;\n    className?: string;\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 enum ComboBoxSize {\n    NORMAL = 'normal',\n    SMALL = 'small',\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The width of the body.\n     */\n    bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 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) => Promise<boolean> | 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, a clear icon is displayed at the end of the combo box if an item is selected.\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: 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     * If true, the dropdown will use the maximum width of the items.\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n    /**\n     * The size of the ComboBox.\n     */\n    size?: ComboBoxSize;\n    /**\n     * Optional min width for the prefix element.\n     */\n    prefixMinWidth?: number;\n};\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n    (\n        {\n            bodyWidth,\n            direction = DropdownDirection.RIGHT,\n            isDisabled = false,\n            lists,\n            maxHeight = 280,\n            onSelect,\n            placeholder,\n            prefix,\n            container,\n            selectedItem,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldShowRoundImage,\n            onInputFocus,\n            prefixMinWidth,\n            size = ComboBoxSize.NORMAL,\n            shouldUseFullWidth = false,\n            onInputChange,\n            shouldUseCurrentItemWidth = false,\n            onInputBlur,\n            shouldShowTransparentBackground = false,\n            inputValue,\n            shouldDropDownUseMaxItemWidth = false,\n        },\n        ref,\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\n        const isInputFocused = useRef(false);\n\n        const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n\n        const parentSize = useElementSize(styledComboBoxElementRef, {\n            shouldUseParentElement: true,\n        });\n\n        const functions = useFunctions();\n        const values = useValues();\n\n        const isTouch = useIsTouch();\n\n        const { browser } = useDevice();\n\n        const areaProvider = useContext(AreaContext);\n\n        useEffect(() => {\n            if (shouldUseFullWidth && parentSize) {\n                setMinWidth(parentSize.width);\n            }\n        }, [parentSize, shouldUseFullWidth]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldDisableActions = useMemo(() => {\n            if (!selectedItem) {\n                return false;\n            }\n\n            const combinedLists = lists.flatMap((list) => list.list);\n\n            return (\n                combinedLists.length === 1 &&\n                combinedLists.some((item) => item.value === selectedItem.value)\n            );\n        }, [lists, selectedItem]);\n\n        const contentHeight = useMemo(() => {\n            const flatItems = lists.flatMap((list) => list.list);\n\n            let height = flatItems.reduce((value, item) => {\n                const isBigItem =\n                    shouldShowBigImage ||\n                    (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n                return value + (isBigItem ? 56 : 38);\n            }, 0);\n\n            if (lists.length > 1) {\n                height += lists.length * 38;\n            }\n\n            if (maxHeight < height) {\n                height = maxHeight;\n            }\n\n            return height;\n        }, [lists, maxHeight, shouldShowBigImage]);\n\n        const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = true;\n                onInputFocus?.(event);\n            },\n            [onInputFocus],\n        );\n\n        const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = false;\n                onInputBlur?.(event);\n            },\n            [onInputBlur],\n        );\n\n        const handleOpen = useCallback(() => {\n            setIsAnimating(true);\n        }, []);\n\n        const handleClose = useCallback(() => {\n            setIsAnimating(false);\n        }, []);\n\n        /**\n         * This function sets the selected item\n         */\n        const handleSetSelectedItem = useCallback(\n            (itemToSelect?: IComboBoxItem) => {\n                if (typeof onSelect === 'function') {\n                    const onSelectResult = onSelect(itemToSelect);\n\n                    if (onSelectResult === false) {\n                        return;\n                    }\n\n                    if (onSelectResult instanceof Promise) {\n                        void onSelectResult.then((shouldPreventSelection) => {\n                            if (shouldPreventSelection) return;\n\n                            setInternalSelectedItem(itemToSelect);\n                            setIsAnimating(false);\n                        });\n\n                        return;\n                    }\n                }\n\n                setInternalSelectedItem(itemToSelect);\n                setIsAnimating(false);\n            },\n            [onSelect],\n        );\n\n        const handleClear = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleSetSelectedItem(undefined);\n            },\n            [handleSetSelectedItem],\n        );\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) return;\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n\n                    const children = contentRef.current?.children;\n\n                    if (!children || children.length === 0) return;\n\n                    const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                    let newIndex = focusedIndex ?? -1;\n\n                    let attempts = 0;\n\n                    do {\n                        newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n\n                        let shouldSkip = false;\n\n                        if (\n                            newElement.id.startsWith('combobox-group--') ||\n                            newElement.id.endsWith('--disabled-item')\n                        ) {\n                            shouldSkip = true;\n                        }\n\n                        if (!shouldSkip) break;\n\n                        attempts++;\n                    } while (attempts < children.length);\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const focusedElement = children[newIndex] as HTMLDivElement;\n\n                    focusedElement.tabIndex = 0;\n\n                    focusedElement.focus();\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) return;\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\n                        return !!newSelectedItem;\n                    });\n\n                    if (newSelectedItem) {\n                        handleSetSelectedItem(newSelectedItem);\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => document.removeEventListener('keydown', handleKeyDown);\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            let maxItemWidth = calculateMaxComboBoxItemWidth({\n                list: [\n                    ...allItems,\n                    { text: placeholder, value: 'placeholder' },\n                    ...(selectedItem ? [selectedItem] : []),\n                ],\n                functions,\n                shouldShowBigImage,\n                values,\n            });\n\n            if (shouldDropDownUseMaxItemWidth) {\n                maxItemWidth += 20 + 2 + 1; // 20px padding (left and right), 2px border, 1px puffer for rounding errors\n\n                setBodyMinWidth(maxItemWidth);\n                setMinWidth(maxItemWidth);\n\n                return;\n            }\n\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 = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 = calculateMaxComboBoxItemWidth({\n                    list: [{ text: prefix, value: 'prefix' }],\n                    functions,\n                    values,\n                });\n\n                prefixWidth = Math.max(prefixTextWidth + 5, 32);\n            }\n\n            const calculatedWidth =\n                maxItemWidth + 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            // Current item width settings\n            else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n                const internalSelectedItemWidth = calculateMaxComboBoxItemWidth({\n                    list: [internalSelectedItem],\n                    functions,\n                    shouldShowBigImage,\n                    values,\n                });\n\n                const itemWidth =\n                    internalSelectedItemWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n                tmpMinWidth = itemWidth;\n\n                tmpBodyMinWidth =\n                    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            functions,\n            internalSelectedItem,\n            lists,\n            placeholder,\n            prefix,\n            selectedItem,\n            shouldDropDownUseMaxItemWidth,\n            shouldShowBigImage,\n            shouldUseCurrentItemWidth,\n            shouldUseFullWidth,\n            values,\n        ]);\n\n        /**\n         * This function sets the external selected item\n         */\n        useEffect(() => {\n            setIsAnimating(false);\n            setInternalSelectedItem(selectedItem);\n        }, [selectedItem]);\n\n        const placeholderImageUrl = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.imageUrl;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.imageUrl;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        const placeholderIcon = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.icons;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.icons;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        /**\n         * This function resets the placeholder\n         */\n        const placeholderText = useMemo(() => {\n            let text = placeholder;\n\n            if (selectedItem) {\n                text = selectedItem.text;\n            } else if (internalSelectedItem) {\n                text = internalSelectedItem.text;\n            }\n\n            return text;\n        }, [internalSelectedItem, placeholder, selectedItem]);\n\n        const shouldShowRoundPlaceholderImage = useMemo(() => {\n            const selectedItemList = lists.find((list) =>\n                list.list.some(\n                    ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n                ),\n            );\n\n            return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n        }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n        /**\n         * This function opens the content of the combobox\n         */\n        const handleHeaderClick = useCallback(() => {\n            if (!isDisabled && !isInputFocused.current) {\n                if (isAnimating) {\n                    handleClose();\n                } else {\n                    handleOpen();\n                }\n            }\n        }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleClose,\n                show: handleOpen,\n            }),\n            [handleClose, handleOpen],\n        );\n\n        const comboBoxGroups = useMemo(\n            () =>\n                lists.map((list) => (\n                    <Fragment key={list.groupName ?? 'default-group'}>\n                        {list.groupName && lists.length > 1 && (\n                            <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                                {list.groupName}\n                            </StyledComboBoxTopic>\n                        )}\n                        {list.list.map((item) => (\n                            <ComboBoxItem\n                                key={`item-${item.text}`}\n                                item={item}\n                                isSelected={\n                                    selectedItem ? item.value === selectedItem.value : false\n                                }\n                                onSelect={handleSetSelectedItem}\n                                shouldShowBigImage={shouldShowBigImage}\n                                shouldShowRoundImage={\n                                    list.shouldShowRoundImage ?? shouldShowRoundImage\n                                }\n                            />\n                        ))}\n                    </Fragment>\n                )),\n            [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\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                        $size={size}\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $isDisabled={isDisabled}\n                        $shouldChangeColor={shouldChangeColor}\n                        $shouldShowBigImage={shouldShowBigImage}\n                    >\n                        <StyledComboBoxPrefixAndPlaceholderWrapper>\n                            {prefix && (\n                                <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n                                    {prefix}\n                                </StyledComboBoxPrefix>\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                                {typeof inputValue === 'string' ? (\n                                    <StyledComboBoxInput\n                                        disabled={isDisabled}\n                                        value={inputValue}\n                                        onChange={onInputChange}\n                                        onBlur={handleInputBlur}\n                                        onFocus={handleInputFocus}\n                                        placeholder={placeholderText}\n                                    />\n                                ) : (\n                                    <StyledComboBoxPlaceholderText>\n                                        {placeholderText}\n                                    </StyledComboBoxPlaceholderText>\n                                )}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        </StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {shouldShowClearIcon && internalSelectedItem && (\n                            <StyledComboBoxClearIconWrapper\n                                $isDisabled={isDisabled}\n                                onClick={handleClear}\n                            >\n                                <Icon icons={['fa fa-times']} />\n                            </StyledComboBoxClearIconWrapper>\n                        )}\n                        {!shouldDisableActions && (\n                            <StyledComboBoxIconWrapper\n                                $isDisabled={isDisabled}\n                                $size={size}\n                                $shouldShowBorderLeft={\n                                    shouldShowClearIcon === true &&\n                                    internalSelectedItem !== undefined\n                                }\n                            >\n                                <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n                            </StyledComboBoxIconWrapper>\n                        )}\n                    </StyledComboBoxHeader>\n                    {styledComboBoxElementRef.current && (\n                        <DropdownBodyWrapper\n                            anchorElement={styledComboBoxElementRef.current}\n                            bodyWidth={bodyWidth}\n                            contentHeight={contentHeight}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                            maxHeight={maxHeight}\n                        >\n                            <StyledComboBoxBody\n                                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                                $maxHeight={maxHeight}\n                                $minWidth={bodyWidth ?? bodyMinWidth}\n                                $browser={browser?.name as BrowserName}\n                                ref={contentRef}\n                                tabIndex={0}\n                            >\n                                {comboBoxGroups}\n                            </StyledComboBoxBody>\n                        </DropdownBodyWrapper>\n                    )}\n                </StyledComboBox>\n            ),\n            [\n                minWidth,\n                shouldUseFullWidth,\n                shouldUseCurrentItemWidth,\n                direction,\n                handleHeaderClick,\n                isAnimating,\n                isTouch,\n                size,\n                shouldShowTransparentBackground,\n                isDisabled,\n                shouldChangeColor,\n                shouldShowBigImage,\n                prefix,\n                prefixMinWidth,\n                selectedItem,\n                internalSelectedItem,\n                placeholderImageUrl,\n                shouldShowRoundPlaceholderImage,\n                placeholderIcon,\n                inputValue,\n                onInputChange,\n                handleInputBlur,\n                handleInputFocus,\n                placeholderText,\n                shouldShowClearIcon,\n                handleClear,\n                shouldDisableActions,\n                bodyWidth,\n                contentHeight,\n                handleClose,\n                container,\n                bodyMinWidth,\n                maxHeight,\n                browser?.name,\n                comboBoxGroups,\n            ],\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","useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","calculateMaxComboBoxItemWidth","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","browser","areaProvider","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","allItems","maxItemWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","internalSelectedItemWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","$browser","name","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    Fragment,\n    ReactHTML,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateMaxComboBoxItemWidth } from '../../utils/calculate';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\n\nexport interface ComboBoxRef {\n    hide: VoidFunction;\n    show: VoidFunction;\n}\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?: CSSPropertiesWithVars;\n    className?: string;\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 enum ComboBoxSize {\n    NORMAL = 'normal',\n    SMALL = 'small',\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The width of the body.\n     */\n    bodyWidth?: number;\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?: DropdownDirection;\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?: number;\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 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) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is shown.\n     */\n    onShow?: () => void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is hidden.\n     */\n    onHide?: () => 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, a clear icon is displayed at the end of the combo box if an item is selected.\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: 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     * If true, the dropdown will use the maximum width of the items.\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n    /**\n     * The size of the ComboBox.\n     */\n    size?: ComboBoxSize;\n    /**\n     * Optional min width for the prefix element.\n     */\n    prefixMinWidth?: number;\n};\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n    (\n        {\n            bodyWidth,\n            direction = DropdownDirection.RIGHT,\n            isDisabled = false,\n            lists,\n            maxHeight = 280,\n            onSelect,\n            placeholder,\n            prefix,\n            container,\n            shouldCaptureEvents,\n            selectedItem,\n            onHide,\n            onShow,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldShowRoundImage,\n            onInputFocus,\n            prefixMinWidth,\n            size = ComboBoxSize.NORMAL,\n            shouldUseFullWidth = false,\n            onInputChange,\n            shouldUseCurrentItemWidth = false,\n            onInputBlur,\n            shouldShowTransparentBackground = false,\n            inputValue,\n            shouldDropDownUseMaxItemWidth = false,\n        },\n        ref,\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\n        const isInputFocused = useRef(false);\n\n        const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n\n        const parentSize = useElementSize(styledComboBoxElementRef, {\n            shouldUseParentElement: true,\n        });\n\n        const functions = useFunctions();\n        const values = useValues();\n\n        const isTouch = useIsTouch();\n\n        const { browser } = useDevice();\n\n        const areaProvider = useContext(AreaContext);\n\n        useEffect(() => {\n            if (shouldUseFullWidth && parentSize) {\n                setMinWidth(parentSize.width);\n            }\n        }, [parentSize, shouldUseFullWidth]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldDisableActions = useMemo(() => {\n            if (!selectedItem) {\n                return false;\n            }\n\n            const combinedLists = lists.flatMap((list) => list.list);\n\n            return (\n                combinedLists.length === 1 &&\n                combinedLists.some((item) => item.value === selectedItem.value)\n            );\n        }, [lists, selectedItem]);\n\n        const contentHeight = useMemo(() => {\n            const flatItems = lists.flatMap((list) => list.list);\n\n            let height = flatItems.reduce((value, item) => {\n                const isBigItem =\n                    shouldShowBigImage ||\n                    (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n                return value + (isBigItem ? 56 : 38);\n            }, 0);\n\n            if (lists.length > 1) {\n                height += lists.length * 38;\n            }\n\n            if (maxHeight < height) {\n                height = maxHeight;\n            }\n\n            return height;\n        }, [lists, maxHeight, shouldShowBigImage]);\n\n        const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = true;\n                onInputFocus?.(event);\n            },\n            [onInputFocus],\n        );\n\n        const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = false;\n                onInputBlur?.(event);\n            },\n            [onInputBlur],\n        );\n\n        const handleOpen = useCallback(() => {\n            if (typeof onShow === 'function') {\n                onShow();\n            }\n\n            setIsAnimating(true);\n        }, [onShow]);\n\n        const handleClose = useCallback(() => {\n            if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            setIsAnimating(false);\n        }, [onHide]);\n\n        /**\n         * This function sets the selected item\n         */\n        const handleSetSelectedItem = useCallback(\n            (itemToSelect?: IComboBoxItem) => {\n                if (typeof onSelect === 'function') {\n                    const onSelectResult = onSelect(itemToSelect);\n\n                    if (onSelectResult === false) {\n                        return;\n                    }\n\n                    if (onSelectResult instanceof Promise) {\n                        void onSelectResult.then((shouldPreventSelection) => {\n                            if (shouldPreventSelection) return;\n\n                            setInternalSelectedItem(itemToSelect);\n                            handleClose();\n                        });\n\n                        return;\n                    }\n                }\n\n                setInternalSelectedItem(itemToSelect);\n                handleClose();\n            },\n            [onSelect],\n        );\n\n        const handleClear = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleSetSelectedItem(undefined);\n            },\n            [handleSetSelectedItem],\n        );\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) return;\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n\n                    const children = contentRef.current?.children;\n\n                    if (!children || children.length === 0) return;\n\n                    const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                    let newIndex = focusedIndex ?? -1;\n\n                    let attempts = 0;\n\n                    do {\n                        newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n\n                        let shouldSkip = false;\n\n                        if (\n                            newElement.id.startsWith('combobox-group--') ||\n                            newElement.id.endsWith('--disabled-item')\n                        ) {\n                            shouldSkip = true;\n                        }\n\n                        if (!shouldSkip) break;\n\n                        attempts++;\n                    } while (attempts < children.length);\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const focusedElement = children[newIndex] as HTMLDivElement;\n\n                    focusedElement.tabIndex = 0;\n\n                    focusedElement.focus();\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) return;\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\n                        return !!newSelectedItem;\n                    });\n\n                    if (newSelectedItem) {\n                        handleSetSelectedItem(newSelectedItem);\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => document.removeEventListener('keydown', handleKeyDown);\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            let maxItemWidth = calculateMaxComboBoxItemWidth({\n                list: [\n                    ...allItems,\n                    { text: placeholder, value: 'placeholder' },\n                    ...(selectedItem ? [selectedItem] : []),\n                ],\n                functions,\n                shouldShowBigImage,\n                values,\n            });\n\n            if (shouldDropDownUseMaxItemWidth) {\n                maxItemWidth += 20 + 2 + 1; // 20px padding (left and right), 2px border, 1px puffer for rounding errors\n\n                setBodyMinWidth(maxItemWidth);\n                setMinWidth(maxItemWidth);\n\n                return;\n            }\n\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 = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 = calculateMaxComboBoxItemWidth({\n                    list: [{ text: prefix, value: 'prefix' }],\n                    functions,\n                    values,\n                });\n\n                prefixWidth = Math.max(prefixTextWidth + 5, 32);\n            }\n\n            const calculatedWidth =\n                maxItemWidth + 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            // Current item width settings\n            else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n                const internalSelectedItemWidth = calculateMaxComboBoxItemWidth({\n                    list: [internalSelectedItem],\n                    functions,\n                    shouldShowBigImage,\n                    values,\n                });\n\n                const itemWidth =\n                    internalSelectedItemWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n                tmpMinWidth = itemWidth;\n\n                tmpBodyMinWidth =\n                    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            functions,\n            internalSelectedItem,\n            lists,\n            placeholder,\n            prefix,\n            selectedItem,\n            shouldDropDownUseMaxItemWidth,\n            shouldShowBigImage,\n            shouldUseCurrentItemWidth,\n            shouldUseFullWidth,\n            values,\n        ]);\n\n        /**\n         * This function sets the external selected item\n         */\n        useEffect(() => {\n            setIsAnimating(false);\n            setInternalSelectedItem(selectedItem);\n        }, [selectedItem]);\n\n        const placeholderImageUrl = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.imageUrl;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.imageUrl;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        const placeholderIcon = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.icons;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.icons;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        /**\n         * This function resets the placeholder\n         */\n        const placeholderText = useMemo(() => {\n            let text = placeholder;\n\n            if (selectedItem) {\n                text = selectedItem.text;\n            } else if (internalSelectedItem) {\n                text = internalSelectedItem.text;\n            }\n\n            return text;\n        }, [internalSelectedItem, placeholder, selectedItem]);\n\n        const shouldShowRoundPlaceholderImage = useMemo(() => {\n            const selectedItemList = lists.find((list) =>\n                list.list.some(\n                    ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n                ),\n            );\n\n            return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n        }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n        /**\n         * This function opens the content of the combobox\n         */\n        const handleHeaderClick = useCallback(() => {\n            if (!isDisabled && !isInputFocused.current) {\n                if (isAnimating) {\n                    handleClose();\n                } else {\n                    handleOpen();\n                }\n            }\n        }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleClose,\n                show: handleOpen,\n            }),\n            [handleClose, handleOpen],\n        );\n\n        const comboBoxGroups = useMemo(\n            () =>\n                lists.map((list) => (\n                    <Fragment key={list.groupName ?? 'default-group'}>\n                        {list.groupName && lists.length > 1 && (\n                            <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                                {list.groupName}\n                            </StyledComboBoxTopic>\n                        )}\n                        {list.list.map((item) => (\n                            <ComboBoxItem\n                                key={`item-${item.text}`}\n                                item={item}\n                                isSelected={\n                                    selectedItem ? item.value === selectedItem.value : false\n                                }\n                                onSelect={handleSetSelectedItem}\n                                shouldShowBigImage={shouldShowBigImage}\n                                shouldShowRoundImage={\n                                    list.shouldShowRoundImage ?? shouldShowRoundImage\n                                }\n                            />\n                        ))}\n                    </Fragment>\n                )),\n            [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\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                        $size={size}\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $isDisabled={isDisabled}\n                        $shouldChangeColor={shouldChangeColor}\n                        $shouldShowBigImage={shouldShowBigImage}\n                    >\n                        <StyledComboBoxPrefixAndPlaceholderWrapper>\n                            {prefix && (\n                                <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n                                    {prefix}\n                                </StyledComboBoxPrefix>\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                                {typeof inputValue === 'string' ? (\n                                    <StyledComboBoxInput\n                                        disabled={isDisabled}\n                                        value={inputValue}\n                                        onChange={onInputChange}\n                                        onBlur={handleInputBlur}\n                                        onFocus={handleInputFocus}\n                                        placeholder={placeholderText}\n                                    />\n                                ) : (\n                                    <StyledComboBoxPlaceholderText>\n                                        {placeholderText}\n                                    </StyledComboBoxPlaceholderText>\n                                )}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        </StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {shouldShowClearIcon && internalSelectedItem && (\n                            <StyledComboBoxClearIconWrapper\n                                $isDisabled={isDisabled}\n                                onClick={handleClear}\n                            >\n                                <Icon icons={['fa fa-times']} />\n                            </StyledComboBoxClearIconWrapper>\n                        )}\n                        {!shouldDisableActions && (\n                            <StyledComboBoxIconWrapper\n                                $isDisabled={isDisabled}\n                                $size={size}\n                                $shouldShowBorderLeft={\n                                    shouldShowClearIcon === true &&\n                                    internalSelectedItem !== undefined\n                                }\n                            >\n                                <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n                            </StyledComboBoxIconWrapper>\n                        )}\n                    </StyledComboBoxHeader>\n                    {styledComboBoxElementRef.current && (\n                        <DropdownBodyWrapper\n                            anchorElement={styledComboBoxElementRef.current}\n                            bodyWidth={bodyWidth}\n                            contentHeight={contentHeight}\n                            shouldCaptureEvents={shouldCaptureEvents}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                            maxHeight={maxHeight}\n                        >\n                            <StyledComboBoxBody\n                                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                                $maxHeight={maxHeight}\n                                $minWidth={bodyWidth ?? bodyMinWidth}\n                                $browser={browser?.name as BrowserName}\n                                ref={contentRef}\n                                tabIndex={0}\n                            >\n                                {comboBoxGroups}\n                            </StyledComboBoxBody>\n                        </DropdownBodyWrapper>\n                    )}\n                </StyledComboBox>\n            ),\n            [\n                minWidth,\n                shouldUseFullWidth,\n                shouldUseCurrentItemWidth,\n                direction,\n                handleHeaderClick,\n                isAnimating,\n                isTouch,\n                size,\n                shouldShowTransparentBackground,\n                isDisabled,\n                shouldChangeColor,\n                shouldShowBigImage,\n                prefix,\n                prefixMinWidth,\n                selectedItem,\n                internalSelectedItem,\n                placeholderImageUrl,\n                shouldShowRoundPlaceholderImage,\n                placeholderIcon,\n                inputValue,\n                onInputChange,\n                handleInputBlur,\n                handleInputFocus,\n                placeholderText,\n                shouldShowClearIcon,\n                handleClear,\n                shouldDisableActions,\n                bodyWidth,\n                contentHeight,\n                handleClose,\n                container,\n                bodyMinWidth,\n                maxHeight,\n                browser?.name,\n                comboBoxGroups,\n            ],\n        );\n    },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js

@@ -17,6 +17,7 @@ const DropdownBodyWrapper = ({
   onClose,
   onOutsideClick,
   onMeasure,
+  shouldCaptureEvents = true,
   shouldShowDropdown
 }) => {
   const isInChaynsWalletRef = useRef(false);
@@ -89,7 +90,8 @@ const DropdownBodyWrapper = ({
     onClick: handleClick,
     onClose: handleClose,
     onTouchEnd: handleTouchEnd,
-    onTouchStart: handleTouchStart
+    onTouchStart: handleTouchStart,
+    shouldCaptureEvents
   });
   useEffect(() => {
     const isBottomDirection = [DropdownDirection.BOTTOM, DropdownDirection.BOTTOM_LEFT, DropdownDirection.BOTTOM_RIGHT].includes(direction);

package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBodyWrapper.js","names":["React","useCallback","useEffect","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldShowDropdown","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        anchorElement,\n        container,\n        contentHeight,\n        contentWidth: bodyWidth ?? measuredContentWidth,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            setMeasuredContentWidth(measurements.width);\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropdownBodyWrapper.js","names":["React","useCallback","useEffect","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldCaptureEvents","shouldShowDropdown","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","measuredContentWidth","setMeasuredContentWidth","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","contentWidth","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n    /**\n     * Whether the outside events should be captured.\n     */\n    shouldCaptureEvents?: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldCaptureEvents = true,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [measuredContentWidth, setMeasuredContentWidth] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        anchorElement,\n        container,\n        contentHeight,\n        contentWidth: bodyWidth ?? measuredContentWidth,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            setMeasuredContentWidth(measurements.width);\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n        shouldCaptureEvents,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/hooks/dropdown.js

@@ -5,17 +5,18 @@ export const useDropdownListener = ({
   onClick,
   onClose,
   onTouchEnd,
-  onTouchStart
+  onTouchStart,
+  shouldCaptureEvents
 }) => {
   useEffect(() => {
-    document.addEventListener('click', onClick, true);
-    document.addEventListener('touchend', onTouchEnd, true);
-    document.addEventListener('touchstart', onTouchStart, true);
+    document.addEventListener('click', onClick, shouldCaptureEvents);
+    document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);
+    document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);
     window.addEventListener('blur', onClose);
     return () => {
-      document.removeEventListener('click', onClick, true);
-      document.removeEventListener('touchend', onTouchEnd, true);
-      document.removeEventListener('touchstart', onTouchStart, true);
+      document.removeEventListener('click', onClick, shouldCaptureEvents);
+      document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);
+      document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);
       window.removeEventListener('blur', onClose);
     };
   }, [onClick, onClose, onTouchEnd, onTouchStart]);

package/lib/esm/hooks/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, true);\n        document.addEventListener('touchend', onTouchEnd, true);\n        document.addEventListener('touchstart', onTouchStart, true);\n\n        window.addEventListener('blur', onClose);\n\n        return () => {\n            document.removeEventListener('click', onClick, true);\n            document.removeEventListener('touchend', onTouchEnd, true);\n            document.removeEventListener('touchstart', onTouchStart, true);\n\n            window.removeEventListener('blur', onClose);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    contentWidth: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    anchorElement,\n    contentWidth,\n    direction,\n    shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction)\n        ) {\n            const difference = anchorElement.clientWidth - contentWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, contentWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    contentWidth: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    container,\n    contentHeight,\n    contentWidth,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        anchorElement,\n        contentWidth,\n        direction,\n        shouldUseTopAlignment,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","shouldCaptureEvents","document","addEventListener","removeEventListener","useDropdownAlignment","anchorElement","contentWidth","direction","shouldUseTopAlignment","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n    shouldCaptureEvents?: boolean;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n    shouldCaptureEvents,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, shouldCaptureEvents);\n        document.addEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n        document.addEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n        window.addEventListener('blur', onClose);\n\n        return () => {\n            document.removeEventListener('click', onClick, shouldCaptureEvents);\n            document.removeEventListener('touchend', onTouchEnd, shouldCaptureEvents);\n            document.removeEventListener('touchstart', onTouchStart, shouldCaptureEvents);\n\n            window.removeEventListener('blur', onClose);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    contentWidth: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    anchorElement,\n    contentWidth,\n    direction,\n    shouldUseTopAlignment,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction)\n        ) {\n            const difference = anchorElement.clientWidth - contentWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, contentWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    contentWidth: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    container,\n    contentHeight,\n    contentWidth,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        anchorElement,\n        contentWidth,\n        direction,\n        shouldUseTopAlignment,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -76,6 +76,14 @@ export type ComboBoxProps = {
      * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.
      */
     onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> | boolean | void;
+    /**
+     * Function to be executed when the content of the `ComboBox` is shown.
+     */
+    onShow?: () => void;
+    /**
+     * Function to be executed when the content of the `ComboBox` is hidden.
+     */
+    onHide?: () => void;
     /**
      * A text that should be displayed when no item is selected.
      */
@@ -116,6 +124,10 @@ export type ComboBoxProps = {
      * If true, the dropdown will use the maximum width of the items.
      */
     shouldDropDownUseMaxItemWidth?: boolean;
+    /**
+     * Whether the outside events should be captured.
+     */
+    shouldCaptureEvents?: boolean;
     /**
      * The size of the ComboBox.
      */

package/lib/types/components/dropdown-body-wrapper/DropdownBodyWrapper.d.ts

@@ -51,6 +51,10 @@ interface DropdownBodyWrapperProps {
      * Whether the dropdown should be visible.
      */
     shouldShowDropdown: boolean;
+    /**
+     * Whether the outside events should be captured.
+     */
+    shouldCaptureEvents?: boolean;
 }
 declare const DropdownBodyWrapper: FC<DropdownBodyWrapperProps>;
 export default DropdownBodyWrapper;

package/lib/types/hooks/dropdown.d.ts

@@ -4,8 +4,9 @@ interface UseDropdownListenerOptions {
     onClose: () => void;
     onTouchEnd: (event: TouchEvent) => void;
     onTouchStart: (event: TouchEvent) => void;
+    shouldCaptureEvents?: boolean;
 }
-export declare const useDropdownListener: ({ onClick, onClose, onTouchEnd, onTouchStart, }: UseDropdownListenerOptions) => void;
+export declare const useDropdownListener: ({ onClick, onClose, onTouchEnd, onTouchStart, shouldCaptureEvents, }: UseDropdownListenerOptions) => void;
 interface UseDropdownAlignmentOptions {
     direction: DropdownDirection;
     shouldUseTopAlignment: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.17",
+    "version": "5.0.19",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "606dcaba3f7f387ec85917d0fa890dccb2fab5e5"
+    "gitHead": "669f559b26f9c2f94a6ed7d6c586f388502ddd65"
 }