@chayns-components/core 5.0.0-beta.890 → 5.0.0-beta.892

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","_ref3","imageUrl","hasIcon","_ref4","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","baseWidth","text","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","disabled","onChange","onBlur","onFocus","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = allItems.some(({ imageUrl }) => imageUrl);\n        const hasIcon = allItems.some(({ icons }) => icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n        ]);\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    {typeof inputValue === 'string' ? (\n                        <StyledComboBoxInput\n                            disabled={isDisabled}\n                            value={inputValue}\n                            onChange={onInputChange}\n                            onBlur={onInputBlur}\n                            onFocus={onInputFocus}\n                            placeholder={placeholderText}\n                        />\n                    ) : (\n                        <StyledComboBoxPlaceholder\n                            $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                        >\n                            {placeholderImageUrl && (\n                                <StyledComboBoxPlaceholderImage\n                                    src={placeholderImageUrl}\n                                    shouldShowRoundImage={shouldShowRoundImage}\n                                />\n                            )}\n                            {placeholderIcon && <Icon icons={placeholderIcon} />}\n                            {placeholderText}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\n                    )}\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            shouldUseFullWidth,\n            minWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","contentRef","browser","isTouch","current","el","element","closest","handleClick","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","_ref3","imageUrl","hasIcon","_ref4","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","baseWidth","text","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","disabled","onChange","onBlur","onFocus","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = allItems.some(({ imageUrl }) => imageUrl);\n        const hasIcon = allItems.some(({ icons }) => icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n        ]);\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        if (!newContainer) {\n            return;\n        }\n\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    {typeof inputValue === 'string' ? (\n                        <StyledComboBoxInput\n                            disabled={isDisabled}\n                            value={inputValue}\n                            onChange={onInputChange}\n                            onBlur={onInputBlur}\n                            onFocus={onInputFocus}\n                            placeholder={placeholderText}\n                        />\n                    ) : (\n                        <StyledComboBoxPlaceholder\n                            $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                        >\n                            {placeholderImageUrl && (\n                                <StyledComboBoxPlaceholderImage\n                                    src={placeholderImageUrl}\n                                    shouldShowRoundImage={shouldShowRoundImage}\n                                />\n                            )}\n                            {placeholderIcon && <Icon icons={placeholderIcon} />}\n                            {placeholderText}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\n                    )}\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            shouldUseFullWidth,\n            minWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAMRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACnF,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SACIC,cAAc,EACdC,oBAAoB,EACpBC,yBAAyB,EACzBC,mBAAmB,EACnBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,mBAAmB,EACnBC,wBAAwB,QACrB,mBAAmB;AA0F1B,MAAMC,QAA2B,GAAGC,IAAA,IAiB9B;EAAA,IAjB+B;IACjCC,SAAS,GAAGhB,iBAAiB,CAACiB,MAAM;IACpCC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,QAAQ;IACRC,WAAW;IACXC,SAAS;IACTC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,YAAY;IACZC,kBAAkB,GAAG,KAAK;IAC1BC,aAAa;IACbC,yBAAyB,GAAG,KAAK;IACjCC,WAAW;IACXC;EACJ,CAAC,GAAAjB,IAAA;EACG,MAAM,CAACkB,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGpC,QAAQ,CAAgB,CAAC;EACjF,MAAM,CAACqC,WAAW,EAAEC,cAAc,CAAC,GAAGtC,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACuC,QAAQ,EAAEC,WAAW,CAAC,GAAGxC,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAM,CAACyC,YAAY,EAAEC,eAAe,CAAC,GAAG1C,QAAQ,CAAC,CAAC,CAAC;EACnD,MAAM,CAAC2C,YAAY,EAAEC,eAAe,CAAC,GAAG5C,QAAQ,CAAgB,IAAI,CAAC;EACrE,MAAM,CAAC6C,SAAS,EAAEC,YAAY,CAAC,GAAG9C,QAAQ,CAA6B,QAAQ,CAAC;EAChF,MAAM,CAAC+C,MAAM,EAAEC,SAAS,CAAC,GAAGhD,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACiD,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGlD,QAAQ,CAAyB;IACnFmD,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGtD,QAAQ,CAAiByB,SAAS,IAAI,IAAI,CAAC;EAEnF,MAAM8B,wBAAwB,GAAGxD,MAAM,CAAiB,IAAI,CAAC;EAC7D,MAAMyD,UAAU,GAAGzD,MAAM,CAAwB,IAAI,CAAC;EAEtD,MAAM;IAAE0D;EAAQ,CAAC,GAAGhE,SAAS,CAAC,CAAC;EAE/B,MAAMiE,OAAO,GAAGrD,UAAU,CAAC,CAAC;EAE5BR,SAAS,CAAC,MAAM;IACZ,IAAI0D,wBAAwB,CAACI,OAAO,IAAI,CAAClC,SAAS,EAAE;MAChD,MAAMmC,EAAE,GAAGL,wBAAwB,CAACI,OAAsB;MAE1D,MAAME,OAAO,GAAGD,EAAE,CAACE,OAAO,CAAC,eAAe,CAAC,IAAIF,EAAE,CAACE,OAAO,CAAC,MAAM,CAAC;MAEjER,eAAe,CAACO,OAAO,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACpC,SAAS,CAAC,CAAC;EAEf,MAAMsC,WAAW,GAAGnE,WAAW,CAC1BoE,KAAiB,IAAK;IACnB,IACIT,wBAAwB,CAACI,OAAO,IAChC,CAACJ,wBAAwB,CAACI,OAAO,CAACM,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,IAChEV,UAAU,CAACG,OAAO,IAClB,CAACH,UAAU,CAACG,OAAO,CAACM,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EACpD;MACE5B,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACiB,wBAAwB,CAC7B,CAAC;EAED,MAAMY,UAAU,GAAGvE,WAAW,CAAC,MAAM;IACjC,IAAI2D,wBAAwB,CAACI,OAAO,IAAIN,YAAY,EAAE;MAClD,MAAM;QACFe,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBC;MACJ,CAAC,GAAGjB,wBAAwB,CAACI,OAAO,CAACc,qBAAqB,CAAC,CAAC;MAC5D,MAAM;QAAEL,IAAI,EAAEM,aAAa;QAAEJ,GAAG,EAAEK;MAAa,CAAC,GAAGtB,YAAY,CAACoB,qBAAqB,CAAC,CAAC;MAEvF,MAAMtB,CAAC,GAAGkB,YAAY,GAAGK,aAAa,GAAGrB,YAAY,CAACuB,UAAU;MAChE,MAAMxB,CAAC,GAAGmB,WAAW,GAAGI,YAAY,GAAGtB,YAAY,CAACwB,SAAS;MAE7D3B,sBAAsB,CAAC;QACnBC,CAAC;QACDC,CAAC,EAAElC,SAAS,KAAKhB,iBAAiB,CAAC4E,GAAG,GAAG1B,CAAC,GAAGA,CAAC,GAAGoB;MACrD,CAAC,CAAC;MAEFlC,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACe,YAAY,EAAEnC,SAAS,CAAC,CAAC;EAE7B,MAAM6D,WAAW,GAAGnF,WAAW,CAAC,MAAM;IAClC0C,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACIzC,SAAS,CAAC,MAAM;IACZmF,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAElB,WAAW,CAAC;IAE/C,OAAO,MAAM;MACTiB,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEnB,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAER,wBAAwB,CAAC,CAAC;;EAE3C;AACJ;AACA;EACI,MAAM4B,qBAAqB,GAAGvF,WAAW,CACpCwF,YAA2B,IAAK;IAC7B,IAAI,OAAO7D,QAAQ,KAAK,UAAU,EAAE;MAChC,MAAM8D,sBAAsB,GAAG9D,QAAQ,CAAC6D,YAAY,CAAC,KAAK,KAAK;MAE/D,IAAIC,sBAAsB,EAAE;IAChC;IAEAjD,uBAAuB,CAACgD,YAAY,CAAC;IACrC9C,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EACD,CAACf,QAAQ,CACb,CAAC;EAED1B,SAAS,CAAC,MAAM;IACZ,MAAMyF,cAAc,GAAG9B,UAAU,CAACG,OAAO;IAEzC,IAAIZ,MAAM,IAAIV,WAAW,IAAIiD,cAAc,EAAE;MACzC,MAAMC,YAAY,GAAGD,cAAc,CAACC,YAAY,IAAI,CAAC;MAErD,MAAMC,iBAAiB,GAAGpF,oBAAoB,CAC1CkB,SAAS,EACTiC,wBAAwB,CAACI,OAAO,IAAIqB,QAAQ,CAACS,IACjD,CAAC;MAED3C,YAAY,CAACyC,YAAY,GAAGC,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxE;EACJ,CAAC,EAAE,CAACnD,WAAW,EAAEf,SAAS,EAAEyB,MAAM,CAAC,CAAC;EAEpClD,SAAS,CAAC,MAAM;IACZ,MAAM6F,aAAa,GAAIC,CAAgB,IAAK;MACxC,IAAI,CAACtD,WAAW,EAAE;QACd;MACJ;MAEA,IAAIsD,CAAC,CAACC,GAAG,KAAK,SAAS,IAAID,CAAC,CAACC,GAAG,KAAK,WAAW,EAAE;QAC9CD,CAAC,CAACE,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,GAAGtC,UAAU,CAACG,OAAO,EAAEmC,QAAQ;QAC7C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMC,QAAQ,GACVrD,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IAAIgD,CAAC,CAACC,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAGE,QAAQ,CAACC,MAAM,IAChED,QAAQ,CAACC,MAAM,GACf,CAAC;UAEX,IAAIpD,YAAY,KAAK,IAAI,EAAE;YACvB,MAAMsD,WAAW,GAAGH,QAAQ,CAACnD,YAAY,CAAmB;YAC5DsD,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEAtD,eAAe,CAACoD,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGL,QAAQ,CAACE,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAIT,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIjD,YAAY,KAAK,IAAI,EAAE;QACnD,MAAMkB,OAAO,GAAGL,UAAU,CAACG,OAAO,EAAEmC,QAAQ,CAACnD,YAAY,CAAC;QAE1D,IAAI,CAACkB,OAAO,EAAE;UACV;QACJ;QAEA,MAAM;UAAEwC;QAAG,CAAC,GAAGxC,OAAO;QAEtB,IAAIyC,eAA0C;QAE9CjF,KAAK,CAACkF,IAAI,CAAEC,IAAI,IAAK;UACjBF,eAAe,GAAGE,IAAI,CAACA,IAAI,CAACC,IAAI,CAC5BC,KAAA;YAAA,IAAC;cAAEC;YAAM,CAAC,GAAAD,KAAA;YAAA,OAAKE,MAAM,CAACD,KAAK,CAAC,KAAKN,EAAE,CAACQ,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;UAAA,CACtE,CAAC;UACD,OAAO,CAAC,CAACP,eAAe;QAC5B,CAAC,CAAC;QAEF,IAAI,CAACA,eAAe,EAAE;UAClB;QACJ;QAEAnB,qBAAqB,CAACmB,eAAe,CAAC;MAC1C;IACJ,CAAC;IAEDtB,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAES,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTV,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEQ,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAAC/C,YAAY,EAAEwC,qBAAqB,EAAE9C,WAAW,EAAEhB,KAAK,CAAC,CAAC;;EAE7D;AACJ;AACA;EACIxB,SAAS,CAAC,MAAM;IACZ,MAAMiH,QAAQ,GAAGzF,KAAK,CAAC0F,OAAO,CAAEP,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IACnD,MAAMQ,QAAQ,GAAGF,QAAQ,CAACP,IAAI,CAACU,KAAA;MAAA,IAAC;QAAEC;MAAS,CAAC,GAAAD,KAAA;MAAA,OAAKC,QAAQ;IAAA,EAAC;IAC1D,MAAMC,OAAO,GAAGL,QAAQ,CAACP,IAAI,CAACa,KAAA;MAAA,IAAC;QAAEC;MAAM,CAAC,GAAAD,KAAA;MAAA,OAAKC,KAAK;IAAA,EAAC;IAEnD,MAAMC,WAAW,GACb/D,wBAAwB,CAACI,OAAO,EAAE4D,aAAa,EAAE9C,qBAAqB,CAAC,CAAC,CAAC+C,KAAK,IAAI,CAAC;IAEvF,MAAMC,YAAY,GAAG,EAAE,CAAC,CAAC;IACzB,MAAMC,UAAU,GAAGV,QAAQ,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IACtC,MAAMW,SAAS,GAAGR,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;;IAEpC,MAAMS,SAAS,GAAGzH,qBAAqB,CAAC,CACpC,GAAG2G,QAAQ,EACX;MAAEe,IAAI,EAAErG,WAAW;MAAEmF,KAAK,EAAE;IAAc,CAAC,CAC9C,CAAC;IACF,MAAMmB,eAAe,GAAGF,SAAS,GAAGH,YAAY,GAAGC,UAAU,GAAGC,SAAS;IAEzE,IAAII,WAAW,GAAGD,eAAe;IACjC,IAAIE,eAAe,GAAGF,eAAe;;IAErC;IACA,IAAIhG,kBAAkB,EAAE;MACpBiG,WAAW,GAAGT,WAAW;MAEzBU,eAAe,GACXV,WAAW,GAAGQ,eAAe,GAAG,EAAE,GAAGA,eAAe,GAAG,EAAE,GAAGR,WAAW;IAC/E;;IAEA;IAAA,KACK,IAAItF,yBAAyB,IAAIG,oBAAoB,EAAE;MACxD,MAAM8F,SAAS,GACX9H,qBAAqB,CAAC,CAACgC,oBAAoB,CAAC,CAAC,GAC7CsF,YAAY,GACZC,UAAU,GACVC,SAAS;MAEbI,WAAW,GAAGE,SAAS;MAEvBD,eAAe,GAAGC,SAAS,GAAGH,eAAe,GAAG,EAAE,GAAGA,eAAe,GAAG,EAAE,GAAGG,SAAS;IACzF;IAEAzF,WAAW,CAACuF,WAAW,CAAC;IACxBrF,eAAe,CAACsF,eAAe,CAAC;EACpC,CAAC,EAAE,CAAC3G,KAAK,EAAEG,WAAW,EAAEM,kBAAkB,EAAEE,yBAAyB,EAAEG,oBAAoB,CAAC,CAAC;;EAE7F;AACJ;AACA;EACItC,SAAS,CAAC,MAAM;IACZyC,cAAc,CAAC,KAAK,CAAC;IACrBF,uBAAuB,CAACV,YAAY,CAAC;EACzC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMwG,mBAAmB,GAAGpI,OAAO,CAAC,MAAM;IACtC,IAAI4B,YAAY,EAAE;MACd,OAAOA,YAAY,CAACwF,QAAQ;IAChC;IAEA,IAAI/E,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAAC+E,QAAQ;IACxC;IAEA,OAAOiB,SAAS;EACpB,CAAC,EAAE,CAAChG,oBAAoB,EAAET,YAAY,CAAC,CAAC;EAExC,MAAM0G,eAAe,GAAGtI,OAAO,CAAC,MAAM;IAClC,IAAI4B,YAAY,EAAE;MACd,OAAOA,YAAY,CAAC2F,KAAK;IAC7B;IAEA,IAAIlF,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACkF,KAAK;IACrC;IAEA,OAAOc,SAAS;EACpB,CAAC,EAAE,CAAChG,oBAAoB,EAAET,YAAY,CAAC,CAAC;;EAExC;AACJ;AACA;EACI,MAAM2G,eAAe,GAAGvI,OAAO,CAAC,MAAM;IAClC,IAAI+H,IAAI,GAAGrG,WAAW;IAEtB,IAAIE,YAAY,EAAE;MACdmG,IAAI,GAAGnG,YAAY,CAACmG,IAAI;IAC5B,CAAC,MAAM,IAAI1F,oBAAoB,EAAE;MAC7B0F,IAAI,GAAG1F,oBAAoB,CAAC0F,IAAI;IACpC;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAC1F,oBAAoB,EAAEX,WAAW,EAAEE,YAAY,CAAC,CAAC;;EAErD;AACJ;AACA;EACI,MAAM4G,iBAAiB,GAAG1I,WAAW,CAAC,MAAM;IACxC,IAAI,CAACwB,UAAU,EAAE;MACb,IAAIiB,WAAW,EAAE;QACb0C,WAAW,CAAC,CAAC;MACjB,CAAC,MAAM;QACHZ,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACY,WAAW,EAAEZ,UAAU,EAAE9B,WAAW,EAAEjB,UAAU,CAAC,CAAC;EAEtD,MAAMmH,cAAc,GAAGzI,OAAO,CAC1B,MACIuB,KAAK,CAACmH,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,SAAS;MAAElC;IAAK,CAAC,GAAAiC,KAAA;IAAA,oBAC1B9I,KAAA,CAAAgJ,aAAA;MAAK/C,GAAG,EAAE8C,SAAS,IAAI;IAAgB,GAClCA,SAAS,IAAIrH,KAAK,CAAC0E,MAAM,GAAG,CAAC,iBAC1BpG,KAAA,CAAAgJ,aAAA,CAAC7H,mBAAmB,QAAE4H,SAA+B,CACxD,EACAlC,IAAI,CAACgC,GAAG,CAAEI,IAAI;IAAA;IACX;IACAjJ,KAAA,CAAAgJ,aAAA,CAACpI,YAAY;MACT8G,KAAK,EAAEuB,IAAI,CAACvB,KAAM;MAClBhB,EAAE,EAAEuC,IAAI,CAACjC,KAAM;MACfO,QAAQ,EAAE0B,IAAI,CAAC1B,QAAS;MACxB9F,UAAU,EAAEwH,IAAI,CAACxH,UAAW;MAC5ByH,UAAU,EAAEnH,YAAY,GAAGkH,IAAI,CAACjC,KAAK,KAAKjF,YAAY,CAACiF,KAAK,GAAG,KAAM;MACrEf,GAAG,EAAEgD,IAAI,CAACjC,KAAM;MAChBpF,QAAQ,EAAE4D,qBAAsB;MAChC2D,YAAY,EAAEF,IAAI,CAACE,YAAa;MAChCnH,kBAAkB,EAAEA,kBAAmB;MACvCC,oBAAoB,EAAEA,oBAAqB;MAC3CmH,OAAO,EAAEH,IAAI,CAACG,OAAQ;MACtBC,aAAa,EAAEJ,IAAI,CAACI,aAAc;MAClCnB,IAAI,EAAEe,IAAI,CAACf,IAAK;MAChBlB,KAAK,EAAEiC,IAAI,CAACjC,KAAM;MAClBsC,UAAU,EAAEL,IAAI,CAACK;IAAW,CAC/B,CACJ,CACA,CAAC;EAAA,CACT,CAAC,EACN,CAAC9D,qBAAqB,EAAE9D,KAAK,EAAEK,YAAY,EAAEC,kBAAkB,EAAEC,oBAAoB,CACzF,CAAC;EAED,MAAMsH,UAAU,GAAGpJ,OAAO,CAAC,MAAM;IAC7B,IAAIqJ,MAAqB,GAAG;MAAE/E,IAAI,EAAEnB,mBAAmB,CAACE,CAAC;MAAEmB,GAAG,EAAErB,mBAAmB,CAACG;IAAE,CAAC;IAEvF,IAAIlC,SAAS,KAAKhB,iBAAiB,CAAC4E,GAAG,EAAE;MACrCqE,MAAM,GAAG;QAAE,GAAGA,MAAM;QAAEC,SAAS,EAAE;MAAoB,CAAC;IAC1D;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAACjI,SAAS,EAAE+B,mBAAmB,CAACE,CAAC,EAAEF,mBAAmB,CAACG,CAAC,CAAC,CAAC;EAE7DvD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACwD,YAAY,EAAE;MACf;IACJ;IAEAL,SAAS,CAAC,mBACN/C,YAAY,cACRN,KAAA,CAAAgJ,aAAA,CAACjJ,eAAe;MAAC2J,OAAO,EAAE;IAAM,GAC3BhH,WAAW,iBACR1C,KAAA,CAAAgJ,aAAA,CAAC5H,wBAAwB;MACrBuI,QAAQ,EAAE7F,OAAO,EAAE8F,IAAK;MACxBC,OAAO,EAAE;QAAEhF,MAAM,EAAE,aAAa;QAAEiF,OAAO,EAAE;MAAE,CAAE;MAC/CC,UAAU,EAAE7G,SAAU;MACtBwG,OAAO,EAAE;QAAE7E,MAAM,EAAE,CAAC;QAAEiF,OAAO,EAAE;MAAE,CAAE;MACnCE,IAAI,EAAE;QAAEnF,MAAM,EAAE,CAAC;QAAEiF,OAAO,EAAE;MAAE,CAAE;MAChCG,UAAU,EAAEtI,SAAU;MACtBuI,SAAS,EAAEpH,YAAa;MACxBqH,KAAK,EAAEZ,UAAW;MAClBa,UAAU,EAAE7I,SAAU;MACtB8I,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI,CAAE;MAC9B/D,QAAQ,EAAE,CAAE;MACZgE,GAAG,EAAE1G;IAAW,GAEf+E,cACqB,CAEjB,CAAC,EAClBlF,YACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCZ,YAAY,EACZyG,UAAU,EACVzF,OAAO,EAAE8F,IAAI,EACbhB,cAAc,EACdlF,YAAY,EACZnC,SAAS,EACTmB,WAAW,EACXf,SAAS,EACTiB,QAAQ,EACRM,SAAS,CACZ,CAAC;EAEF,OAAO/C,OAAO,CACV,mBACIH,KAAA,CAAAgJ,aAAA,CAACnI,cAAc;IACX0J,GAAG,EAAE3G,wBAAyB;IAC9B4G,mBAAmB,EAAErI,kBAAmB;IACxC+H,SAAS,EAAEtH;EAAS,gBAEpB5C,KAAA,CAAAgJ,aAAA,CAAClI,oBAAoB;IACjBsJ,UAAU,EAAE7I,SAAU;IACtBkJ,OAAO,EAAE9B,iBAAkB;IAC3B+B,OAAO,EAAEhI,WAAY;IACrBiI,QAAQ,EAAE5G,OAAQ;IAClB6G,WAAW,EAAEnJ;EAAW,GAEvB,OAAOc,UAAU,KAAK,QAAQ,gBAC3BvC,KAAA,CAAAgJ,aAAA,CAAChI,mBAAmB;IAChB6J,QAAQ,EAAEpJ,UAAW;IACrBuF,KAAK,EAAEzE,UAAW;IAClBuI,QAAQ,EAAE1I,aAAc;IACxB2I,MAAM,EAAEzI,WAAY;IACpB0I,OAAO,EAAE9I,YAAa;IACtBL,WAAW,EAAE6G;EAAgB,CAChC,CAAC,gBAEF1I,KAAA,CAAAgJ,aAAA,CAAC/H,yBAAyB;IACtBgK,oBAAoB,EAAE,CAAClJ,YAAY,IAAI,CAACS;EAAqB,GAE5D+F,mBAAmB,iBAChBvI,KAAA,CAAAgJ,aAAA,CAAC9H,8BAA8B;IAC3BgK,GAAG,EAAE3C,mBAAoB;IACzBtG,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EACAwG,eAAe,iBAAIzI,KAAA,CAAAgJ,aAAA,CAACrI,IAAI;IAAC+G,KAAK,EAAEe;EAAgB,CAAE,CAAC,EACnDC,eAAe,EACflG,oBAAoB,IACjBA,oBAAoB,CAAC6G,aAAa,IAClC7G,oBAAoB,CAAC6G,aACF,CAC9B,eACDrJ,KAAA,CAAAgJ,aAAA,CAACjI,yBAAyB,qBACtBf,KAAA,CAAAgJ,aAAA,CAACrI,IAAI;IAAC+G,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,EACtBtE,MACW,CACnB,EACD,CACIjB,kBAAkB,EAClBS,QAAQ,EACRrB,SAAS,EACToH,iBAAiB,EACjBjG,WAAW,EACXqB,OAAO,EACPtC,UAAU,EACVc,UAAU,EACVH,aAAa,EACbE,WAAW,EACXJ,YAAY,EACZwG,eAAe,EACf3G,YAAY,EACZS,oBAAoB,EACpB+F,mBAAmB,EACnBtG,oBAAoB,EACpBwG,eAAe,EACfrF,MAAM,CAEd,CAAC;AACL,CAAC;AAED/B,QAAQ,CAAC8J,WAAW,GAAG,UAAU;AAEjC,eAAe9J,QAAQ","ignoreList":[]}

package/lib/esm/components/context-menu/ContextMenu.js

@@ -15,7 +15,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
       icons: ['ts-ellipsis_v'],
       size: 18
     }),
-    container = document.querySelector('.page-provider') || document.querySelector('.tapp') || document.body,
+    container,
     coordinates,
     isInDialog = false,
     items,
@@ -27,6 +27,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     x: 0,
     y: 0
   });
+  const [newContainer, setNewContainer] = useState(container ?? null);
   const [internalAlignment, setInternalAlignment] = useState(ContextMenuAlignment.TopLeft);
   const [isContentShown, setIsContentShown] = useState(false);
   const [portal, setPortal] = useState();
@@ -35,6 +36,13 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   // ToDo: Replace with hook if new chayns api is ready
   const contextMenuContentRef = useRef(null);
   const contextMenuRef = useRef(null);
+  useEffect(() => {
+    if (contextMenuRef.current && !container) {
+      const el = contextMenuRef.current;
+      const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('.tapp') || el.closest('body');
+      setNewContainer(element);
+    }
+  }, [container]);
   const handleHide = useCallback(() => {
     setIsContentShown(false);
   }, []);
@@ -62,6 +70,9 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
         void items[result[0]]?.onClick();
       }
     } else if (contextMenuRef.current) {
+      if (!newContainer) {
+        return;
+      }
       const {
         height: childrenHeight,
         left: childrenLeft,
@@ -73,7 +84,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
         width,
         top,
         left
-      } = container.getBoundingClientRect();
+      } = newContainer.getBoundingClientRect();
       const x = childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;
       const y = childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;
       setInternalCoordinates({
@@ -93,7 +104,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
       setIsContentShown(true);
     }
-  }, [container, isInDialog, items]);
+  }, [isInDialog, items, newContainer]);
   const handleClick = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -125,6 +136,9 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     };
   }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
   useEffect(() => {
+    if (!newContainer) {
+      return;
+    }
     setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
     }, isContentShown && /*#__PURE__*/React.createElement(ContextMenuContent, {
@@ -133,8 +147,8 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
       key: `contextMenu_${uuid}`,
       alignment: alignment ?? internalAlignment,
       ref: contextMenuContentRef
-    })), container));
-  }, [alignment, container, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
+    })), newContainer));
+  }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContextMenu, {
     className: "beta-chayns-context-menu",
     onClick: handleClick,

package/lib/esm/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","document","querySelector","body","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","current","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * Whether the ContextMenu is inside a dialog.\n     */\n    isInDialog?: boolean;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n    buttonType: number;\n    result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container = document.querySelector('.page-provider') ||\n                document.querySelector('.tapp') ||\n                document.body,\n            coordinates,\n            isInDialog = false,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const isTouch = getIsTouch();\n\n            if (isTouch) {\n                const { result } = (await createDialog({\n                    type: DialogType.SELECT,\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        id: index,\n                        icon: icons[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = container.getBoundingClientRect();\n\n                const x =\n                    childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;\n                const y =\n                    childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [container, isInDialog, items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","current","el","element","closest","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","document","addEventListener","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * Whether the ContextMenu is inside a dialog.\n     */\n    isInDialog?: boolean;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n    buttonType: number;\n    result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container,\n            coordinates,\n            isInDialog = false,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        useEffect(() => {\n            if (contextMenuRef.current && !container) {\n                const el = contextMenuRef.current as HTMLElement;\n\n                const element =\n                    el.closest('.dialog-inner') ||\n                    el.closest('.page-provider') ||\n                    el.closest('.tapp') ||\n                    el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const isTouch = getIsTouch();\n\n            if (isTouch) {\n                const { result } = (await createDialog({\n                    type: DialogType.SELECT,\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        id: index,\n                        icon: icons[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const x =\n                    childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;\n                const y =\n                    childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [isInDialog, items, newContainer]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/popup/Popup.js

@@ -11,7 +11,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     content,
     onShow,
-    container = document.querySelector('.page-provider') || document.querySelector('.tapp') || document.body,
+    container,
     onHide,
     children,
     shouldShowOnHover = false,
@@ -29,6 +29,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [menuHeight, setMenuHeight] = useState(0);
   const [isMeasuring, setIsMeasuring] = useState(true);
   const [pseudoSize, setPseudoSize] = useState();
+  const [newContainer, setNewContainer] = useState(container ?? null);
   const timeout = useRef();
   const uuid = useUuid();
 
@@ -37,6 +38,13 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const popupContentRef = useRef(null);
   const popupPseudoContentRef = useRef(null);
   const popupRef = useRef(null);
+  useEffect(() => {
+    if (popupRef.current && !container) {
+      const el = popupRef.current;
+      const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('.tapp') || el.closest('body');
+      setNewContainer(element);
+    }
+  }, [container]);
   const measureHeight = () => {
     if (popupPseudoContentRef.current) {
       const height = popupPseudoContentRef.current.offsetHeight;
@@ -180,6 +188,9 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
     };
   }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);
   useEffect(() => {
+    if (!newContainer) {
+      return;
+    }
     setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
     }, isOpen && /*#__PURE__*/React.createElement(PopupContentWrapper, {
@@ -193,8 +204,8 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
       onMouseEnter: handleMouseEnter
     }, /*#__PURE__*/React.createElement(AreaContextProvider, {
       shouldChangeColor: false
-    }, content))), container));
-  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize?.width, uuid]);
+    }, content))), newContainer));
+  }, [alignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize?.width, uuid]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, isMeasuring && /*#__PURE__*/React.createElement(StyledPopupPseudo, {
     ref: popupPseudoContentRef,
     $menuHeight: menuHeight

package/lib/esm/components/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","document","querySelector","body","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","measureHeight","current","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container = document.querySelector('.page-provider') ||\n                document.querySelector('.tapp') ||\n                document.body,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n        const [isMeasuring, setIsMeasuring] = useState(true);\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const measureHeight = () => {\n            if (popupPseudoContentRef.current) {\n                const height = popupPseudoContentRef.current.offsetHeight;\n                const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n                setPseudoSize({ height, width });\n            }\n        };\n\n        useEffect(() => {\n            measureHeight();\n\n            setIsMeasuring(false);\n        }, []);\n\n        useEffect(() => {\n            const handleResize = () => {\n                setIsMeasuring(true);\n\n                setTimeout(() => {\n                    measureHeight();\n                    setIsMeasuring(false);\n                }, 0);\n            };\n\n            window.addEventListener('resize', handleResize);\n\n            return () => {\n                window.removeEventListener('resize', handleResize);\n            };\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            handleShow();\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {isMeasuring && (\n                    <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                        {content}\n                    </StyledPopupPseudo>\n                )}\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IACRC,UAAU,EAGVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,cAAc,QAAoC,mBAAmB;AAC9E,OAAOC,mBAAmB,MAAM,sCAAsC;AACtE,OAAOC,mBAAmB,MAAM,6CAA6C;AAC7E,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,gBAAgB;AAqC/D,MAAMC,KAAK,gBAAGb,UAAU,CACpB,CAAAc,IAAA,EAaIC,GAAG,KACF;EAAA,IAbD;IACIC,OAAO;IACPC,MAAM;IACNC,SAAS,GAAGC,QAAQ,CAACC,aAAa,CAAC,gBAAgB,CAAC,IAChDD,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,IAC/BD,QAAQ,CAACE,IAAI;IACjBC,MAAM;IACNC,QAAQ;IACRC,iBAAiB,GAAG,KAAK;IACzBC,sBAAsB,GAAG,IAAI;IAC7BC,OAAO,GAAG;EACd,CAAC,GAAAZ,IAAA;EAGD,MAAM,CAACa,WAAW,EAAEC,cAAc,CAAC,GAAGvB,QAAQ,CAAmB;IAC7DwB,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG3B,QAAQ,CAAiBG,cAAc,CAACyB,OAAO,CAAC;EAClF,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG9B,QAAQ,CAAS,CAAC,CAAC;EAC/C,MAAM,CAAC+B,MAAM,EAAEC,SAAS,CAAC,GAAGhC,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAACiC,MAAM,EAAEC,SAAS,CAAC,GAAGlC,QAAQ,CAAc,CAAC;EACnD,MAAM,CAACmC,UAAU,EAAEC,aAAa,CAAC,GAAGpC,QAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACqC,WAAW,EAAEC,cAAc,CAAC,GAAGtC,QAAQ,CAAC,IAAI,CAAC;EACpD,MAAM,CAACuC,UAAU,EAAEC,aAAa,CAAC,GAAGxC,QAAQ,CAAoC,CAAC;EAEjF,MAAMyC,OAAO,GAAG1C,MAAM,CAAS,CAAC;EAEhC,MAAM2C,IAAI,GAAGxC,OAAO,CAAC,CAAC;;EAEtB;;EAEA,MAAMyC,eAAe,GAAG5C,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAM6C,qBAAqB,GAAG7C,MAAM,CAAiB,IAAI,CAAC;EAC1D,MAAM8C,QAAQ,GAAG9C,MAAM,CAAiB,IAAI,CAAC;EAE7C,MAAM+C,aAAa,GAAGA,CAAA,KAAM;IACxB,IAAIF,qBAAqB,CAACG,OAAO,EAAE;MAC/B,MAAMC,MAAM,GAAGJ,qBAAqB,CAACG,OAAO,CAACE,YAAY;MACzD,MAAMC,KAAK,GAAGN,qBAAqB,CAACG,OAAO,CAACI,WAAW,GAAG,CAAC;MAE3DX,aAAa,CAAC;QAAEQ,MAAM;QAAEE;MAAM,CAAC,CAAC;IACpC;EACJ,CAAC;EAEDrD,SAAS,CAAC,MAAM;IACZiD,aAAa,CAAC,CAAC;IAEfR,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAENzC,SAAS,CAAC,MAAM;IACZ,MAAMuD,YAAY,GAAGA,CAAA,KAAM;MACvBd,cAAc,CAAC,IAAI,CAAC;MAEpBe,UAAU,CAAC,MAAM;QACbP,aAAa,CAAC,CAAC;QACfR,cAAc,CAAC,KAAK,CAAC;MACzB,CAAC,EAAE,CAAC,CAAC;IACT,CAAC;IAEDgB,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTE,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,UAAU,GAAG7D,WAAW,CAAC,MAAM;IACjC,IAAIiD,QAAQ,CAACE,OAAO,IAAIR,UAAU,EAAE;MAChC,MAAM;QAAES,MAAM,EAAEU,YAAY;QAAER,KAAK,EAAES;MAAY,CAAC,GAAGpB,UAAU;MAE/D,MAAM;QACFS,MAAM,EAAEY,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBd,KAAK,EAAEe;MACX,CAAC,GAAGpB,QAAQ,CAACE,OAAO,CAACmB,qBAAqB,CAAC,CAAC;MAE5C,IAAIR,YAAY,GAAGM,WAAW,GAAG,EAAE,EAAE;QACjC,IAAIG,OAAO,GAAG,KAAK;QAEnB,IAAIR,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrDtC,YAAY,CAACxB,cAAc,CAACiE,WAAW,CAAC;UAExCD,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHxC,YAAY,CAACxB,cAAc,CAACkE,UAAU,CAAC;QAC3C;QAEA,MAAM7C,CAAC,GAAGsC,YAAY,GAAGG,aAAa,GAAG,CAAC;QAC1C,MAAMxC,CAAC,GAAGuC,WAAW,GAAGJ,cAAc,GAAGvC,OAAO;QAEhD,IAAIiD,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACL9C,CAAC,GAAGmC,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAC9B/C,CAAC,GAAGmC,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHD,SAAS,GAAG,CAAC;UAEb,MAAME,KAAK,GAAGlB,MAAM,CAACiB,UAAU,IAAIT,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEK,SAAS,GACLE,KAAK,GAAGb,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAClCC,KAAK,GAAGb,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACvC,CAAC;QACf;QAEAzC,SAAS,CAACwC,SAAS,CAAC;QAEpB,MAAMG,IAAI,GAAGjD,CAAC,GAAG8C,SAAS;QAE1B/C,cAAc,CAAC;UACXC,CAAC,EAAEiD,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBhD,CAAC,EAAEA,CAAC,GAAGJ;QACX,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAI8C,OAAO,GAAG,KAAK;QAEnB,IAAIR,WAAW,GAAGG,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrDtC,YAAY,CAACxB,cAAc,CAACuE,QAAQ,CAAC;UAErCP,OAAO,GAAG,IAAI;QAClB,CAAC,MAAM;UACHxC,YAAY,CAACxB,cAAc,CAACyB,OAAO,CAAC;QACxC;QAEA,MAAMJ,CAAC,GAAGsC,YAAY,GAAGG,aAAa,GAAG,CAAC;QAC1C,MAAMxC,CAAC,GAAGuC,WAAW,GAAG3C,OAAO;QAE/B,IAAIiD,SAAS;QAEb,IAAIH,OAAO,EAAE;UACTG,SAAS,GACL9C,CAAC,GAAGmC,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAC9B/C,CAAC,GAAGmC,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACnC,CAAC;QACf,CAAC,MAAM;UACHD,SAAS,GAAG,CAAC;UAEb,MAAME,KAAK,GAAGlB,MAAM,CAACiB,UAAU,IAAIT,YAAY,GAAGG,aAAa,GAAG,CAAC,CAAC;UAEpEK,SAAS,GACLE,KAAK,GAAGb,WAAW,IAAIL,MAAM,CAACiB,UAAU,GAClCC,KAAK,GAAGb,WAAW,GAAGL,MAAM,CAACiB,UAAU,GACvC,CAAC;QACf;QAEAzC,SAAS,CAACwC,SAAS,CAAC;QAEpB,MAAMG,IAAI,GAAGjD,CAAC,GAAG8C,SAAS;QAE1B/C,cAAc,CAAC;UACXC,CAAC,EAAEiD,IAAI,GAAG,EAAE,GAAG,EAAE,GAAGA,IAAI;UACxBhD,CAAC,EAAEA,CAAC,GAAGJ;QACX,CAAC,CAAC;MACN;MAEAW,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACO,UAAU,EAAElB,OAAO,CAAC,CAAC;EAEzB,MAAMsD,mBAAmB,GAAGA,CAAA,KAAM;IAC9BlB,UAAU,CAAC,CAAC;EAChB,CAAC;EAED,MAAMmB,UAAU,GAAGhF,WAAW,CAAC,MAAM;IACjCoC,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM6C,gBAAgB,GAAGjF,WAAW,CAAC,MAAM;IACvC,IAAIuB,iBAAiB,EAAE;MACnBmC,MAAM,CAACwB,YAAY,CAACrC,OAAO,CAACM,OAAO,CAAC;MACpCU,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACA,UAAU,EAAEtC,iBAAiB,CAAC,CAAC;EAEnC,MAAM4D,gBAAgB,GAAGnF,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,iBAAiB,EAAE;MACpB;IACJ;IAEAsB,OAAO,CAACM,OAAO,GAAGO,MAAM,CAACD,UAAU,CAAC,MAAM;MACtCuB,UAAU,CAAC,CAAC;IAChB,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,CAACA,UAAU,EAAEzD,iBAAiB,CAAC,CAAC;EAEnC,MAAM6D,mBAAmB,GAAGpF,WAAW,CAClCqF,KAAK,IAAK;IACP,IAAI,CAACtC,eAAe,CAACI,OAAO,EAAEmC,QAAQ,CAACD,KAAK,CAACE,MAAc,CAAC,EAAE;MAC1DP,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,CACf,CAAC;EAED9E,mBAAmB,CACfY,GAAG,EACH,OAAO;IACH0E,IAAI,EAAER,UAAU;IAChBS,IAAI,EAAE5B;EACV,CAAC,CAAC,EACF,CAACmB,UAAU,EAAEnB,UAAU,CAC3B,CAAC;EAED5D,SAAS,CAAC,MAAM;IACZ,KAAKL,gBAAgB,CAAC,CAAC,CAAC8F,IAAI,CAAEC,MAAM,IAAK;MACrC,IAAIA,MAAM,CAACC,YAAY,EAAE;QACrBpD,aAAa,CAACmD,MAAM,CAACC,YAAY,CAAC;MACtC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN3F,SAAS,CAAC,MAAM;IACZ,IAAIkC,MAAM,EAAE;MACRjB,QAAQ,CAACyC,gBAAgB,CAAC,OAAO,EAAEyB,mBAAmB,EAAE,IAAI,CAAC;MAC7D1B,MAAM,CAACC,gBAAgB,CAAC,MAAM,EAAEqB,UAAU,CAAC;MAE3C,IAAI,OAAOhE,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOK,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTH,QAAQ,CAAC0C,mBAAmB,CAAC,OAAO,EAAEwB,mBAAmB,EAAE,IAAI,CAAC;MAChE1B,MAAM,CAACE,mBAAmB,CAAC,MAAM,EAAEoB,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACI,mBAAmB,EAAEJ,UAAU,EAAE7C,MAAM,EAAEd,MAAM,EAAEL,MAAM,CAAC,CAAC;EAE7Df,SAAS,CAAC,MAAM;IACZqC,SAAS,CAAC,mBACNjC,YAAY,cACRP,KAAA,CAAA+F,aAAA,CAAChG,eAAe;MAACiG,OAAO,EAAE;IAAM,GAC3B3D,MAAM,iBACHrC,KAAA,CAAA+F,aAAA,CAACpF,mBAAmB;MAChB6C,KAAK,EAAEX,UAAU,EAAEW,KAAK,IAAI,CAAE;MAC9BrB,MAAM,EAAEA,MAAO;MACfP,WAAW,EAAEA,WAAY;MACzBqE,GAAG,EAAE,WAAWjD,IAAI,EAAG;MACvBhB,SAAS,EAAEA,SAAU;MACrBhB,GAAG,EAAEiC,eAAgB;MACrBiD,YAAY,EAAEb,gBAAiB;MAC/Bc,YAAY,EAAEhB;IAAiB,gBAE/BnF,KAAA,CAAA+F,aAAA,CAACrF,mBAAmB;MAAC0F,iBAAiB,EAAE;IAAM,GACzCnF,OACgB,CACJ,CAEZ,CAAC,EAClBE,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCa,SAAS,EACTb,SAAS,EACTF,OAAO,EACPW,WAAW,EACXuD,gBAAgB,EAChBE,gBAAgB,EAChBhD,MAAM,EACNF,MAAM,EACNU,UAAU,EAAEW,KAAK,EACjBR,IAAI,CACP,CAAC;EAEF,oBACIhD,KAAA,CAAA+F,aAAA,CAAA/F,KAAA,CAAAqG,QAAA,QACK1D,WAAW,iBACR3C,KAAA,CAAA+F,aAAA,CAAClF,iBAAiB;IAACG,GAAG,EAAEkC,qBAAsB;IAACoD,WAAW,EAAE7D;EAAW,GAClExB,OACc,CACtB,eACDjB,KAAA,CAAA+F,aAAA,CAACnF,WAAW;IACRI,GAAG,EAAEmC,QAAS;IACdoD,OAAO,EAAEtB,mBAAoB;IAC7BiB,YAAY,EAAEb,gBAAiB;IAC/Bc,YAAY,EAAEhB,gBAAiB;IAC/BqB,uBAAuB,EAAE9E;EAAuB,GAE/CF,QACQ,CAAC,EACbe,MACH,CAAC;AAEX,CACJ,CAAC;AAEDzB,KAAK,CAAC2F,WAAW,GAAG,OAAO;AAE3B,eAAe3F,KAAK","ignoreList":[]}
+{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","container","onHide","children","shouldShowOnHover","shouldUseChildrenWidth","yOffset","coordinates","setCoordinates","x","y","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","isMeasuring","setIsMeasuring","pseudoSize","setPseudoSize","newContainer","setNewContainer","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","current","el","element","closest","measureHeight","height","offsetHeight","width","offsetWidth","handleResize","setTimeout","window","addEventListener","removeEventListener","handleShow","pseudoHeight","pseudoWidth","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","getBoundingClientRect","isRight","BottomRight","BottomLeft","newOffset","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","handleDocumentClick","event","contains","target","hide","show","then","result","topBarHeight","document","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","$shouldUseChildrenWidth","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `Popup` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    (\n        {\n            content,\n            onShow,\n            container,\n            onHide,\n            children,\n            shouldShowOnHover = false,\n            shouldUseChildrenWidth = true,\n            yOffset = 0,\n        },\n        ref,\n    ) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n        const [isMeasuring, setIsMeasuring] = useState(true);\n        const [pseudoSize, setPseudoSize] = useState<{ height: number; width: number }>();\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        useEffect(() => {\n            if (popupRef.current && !container) {\n                const el = popupRef.current as HTMLElement;\n\n                const element =\n                    el.closest('.dialog-inner') ||\n                    el.closest('.page-provider') ||\n                    el.closest('.tapp') ||\n                    el.closest('body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        const measureHeight = () => {\n            if (popupPseudoContentRef.current) {\n                const height = popupPseudoContentRef.current.offsetHeight;\n                const width = popupPseudoContentRef.current.offsetWidth + 1;\n\n                setPseudoSize({ height, width });\n            }\n        };\n\n        useEffect(() => {\n            measureHeight();\n\n            setIsMeasuring(false);\n        }, []);\n\n        useEffect(() => {\n            const handleResize = () => {\n                setIsMeasuring(true);\n\n                setTimeout(() => {\n                    measureHeight();\n                    setIsMeasuring(false);\n                }, 0);\n            };\n\n            window.addEventListener('resize', handleResize);\n\n            return () => {\n                window.removeEventListener('resize', handleResize);\n            };\n        }, []);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && pseudoSize) {\n                const { height: pseudoHeight, width: pseudoWidth } = pseudoSize;\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [pseudoSize, yOffset]);\n\n        const handleChildrenClick = () => {\n            handleShow();\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                width={pseudoSize?.width ?? 0}\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            pseudoSize?.width,\n            uuid,\n        ]);\n\n        return (\n            <>\n                {isMeasuring && (\n                    <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                        {content}\n                    </StyledPopupPseudo>\n                )}\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                    $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/scroll-view/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["getDevice","React","forwardRef","useMemo","StyledScrollView","ScrollView","_ref","ref","maxHeight","height","maxWidth","width","children","overflowX","overflowY","browser","createElement","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight?: CSSProperties['height'];\n    /**\n     * The height of the scroll view.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * The maximum width of the scroll view.\n     */\n    maxWidth?: CSSProperties['width'];\n    /**\n     * The width of the scroll view.\n     */\n    width?: CSSProperties['width'];\n    /**\n     * The overflow-x style of the scroll view.\n     */\n    overflowX?: 'scroll' | 'auto';\n    /**\n     * The overflow-y style of the scroll view.\n     */\n    overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n    ({ maxHeight = 300, height, maxWidth, width, children, overflowX = 'auto', overflowY = 'auto' }, ref) => {\n        const { browser } = getDevice();\n\n        return useMemo(\n            () => (\n                <StyledScrollView\n                    $browser={browser?.name}\n                    $maxHeight={maxHeight}\n                    $height={height}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $overflowX={overflowX}\n                    $overflowY={overflowY}\n                    ref={ref}\n                >\n                    {children}\n                </StyledScrollView>\n            ),\n            [browser?.name, children, height, maxHeight, maxWidth, overflowX, overflowY, ref, width],\n        );\n    },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAmBC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AAiCtD,MAAMC,UAAU,gBAAGH,UAAU,CACzB,CAAAI,IAAA,EAAiGC,GAAG,KAAK;EAAA,IAAxG;IAAEC,SAAS,GAAG,GAAG;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,SAAS,GAAG,MAAM;IAAEC,SAAS,GAAG;EAAO,CAAC,GAAAR,IAAA;EAC3F,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,CAAC;EAE/B,OAAOG,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,gBAAgB;IACba,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IACxBC,UAAU,EAAEX,SAAU;IACtBY,OAAO,EAAEX,MAAO;IAChBY,SAAS,EAAEX,QAAS;IACpBY,MAAM,EAAEX,KAAM;IACdY,UAAU,EAAEV,SAAU;IACtBW,UAAU,EAAEV,SAAU;IACtBP,GAAG,EAAEA;EAAI,GAERK,QACa,CACrB,EACD,CAACG,OAAO,EAAEG,IAAI,EAAEN,QAAQ,EAAEH,MAAM,EAAED,SAAS,EAAEE,QAAQ,EAAEG,SAAS,EAAEC,SAAS,EAAEP,GAAG,EAAEI,KAAK,CAC3F,CAAC;AACL,CACJ,CAAC;AAEDN,UAAU,CAACoB,WAAW,GAAG,YAAY;AAErC,eAAepB,UAAU","ignoreList":[]}
+{"version":3,"file":"ScrollView.js","names":["getDevice","React","forwardRef","useMemo","StyledScrollView","ScrollView","_ref","ref","maxHeight","height","maxWidth","width","children","overflowX","overflowY","browser","createElement","$browser","name","$maxHeight","$height","$maxWidth","$width","$overflowX","$overflowY","displayName"],"sources":["../../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, forwardRef, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight?: CSSProperties['height'] | null;\n    /**\n     * The height of the scroll view.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * The maximum width of the scroll view.\n     */\n    maxWidth?: CSSProperties['width'];\n    /**\n     * The width of the scroll view.\n     */\n    width?: CSSProperties['width'];\n    /**\n     * The overflow-x style of the scroll view.\n     */\n    overflowX?: 'scroll' | 'auto';\n    /**\n     * The overflow-y style of the scroll view.\n     */\n    overflowY?: 'scroll' | 'auto';\n};\n\nconst ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(\n    (\n        {\n            maxHeight = 300,\n            height,\n            maxWidth,\n            width,\n            children,\n            overflowX = 'auto',\n            overflowY = 'auto',\n        },\n        ref,\n    ) => {\n        const { browser } = getDevice();\n\n        return useMemo(\n            () => (\n                <StyledScrollView\n                    $browser={browser?.name}\n                    $maxHeight={maxHeight}\n                    $height={height}\n                    $maxWidth={maxWidth}\n                    $width={width}\n                    $overflowX={overflowX}\n                    $overflowY={overflowY}\n                    ref={ref}\n                >\n                    {children}\n                </StyledScrollView>\n            ),\n            [\n                browser?.name,\n                children,\n                height,\n                maxHeight,\n                maxWidth,\n                overflowX,\n                overflowY,\n                ref,\n                width,\n            ],\n        );\n    },\n);\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAAmBC,UAAU,EAAaC,OAAO,QAAQ,OAAO;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AAiCtD,MAAMC,UAAU,gBAAGH,UAAU,CACzB,CAAAI,IAAA,EAUIC,GAAG,KACF;EAAA,IAVD;IACIC,SAAS,GAAG,GAAG;IACfC,MAAM;IACNC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,SAAS,GAAG,MAAM;IAClBC,SAAS,GAAG;EAChB,CAAC,GAAAR,IAAA;EAGD,MAAM;IAAES;EAAQ,CAAC,GAAGf,SAAS,CAAC,CAAC;EAE/B,OAAOG,OAAO,CACV,mBACIF,KAAA,CAAAe,aAAA,CAACZ,gBAAgB;IACba,QAAQ,EAAEF,OAAO,EAAEG,IAAK;IACxBC,UAAU,EAAEX,SAAU;IACtBY,OAAO,EAAEX,MAAO;IAChBY,SAAS,EAAEX,QAAS;IACpBY,MAAM,EAAEX,KAAM;IACdY,UAAU,EAAEV,SAAU;IACtBW,UAAU,EAAEV,SAAU;IACtBP,GAAG,EAAEA;EAAI,GAERK,QACa,CACrB,EACD,CACIG,OAAO,EAAEG,IAAI,EACbN,QAAQ,EACRH,MAAM,EACND,SAAS,EACTE,QAAQ,EACRG,SAAS,EACTC,SAAS,EACTP,GAAG,EACHI,KAAK,CAEb,CAAC;AACL,CACJ,CAAC;AAEDN,UAAU,CAACoB,WAAW,GAAG,YAAY;AAErC,eAAepB,UAAU","ignoreList":[]}

package/lib/esm/components/scroll-view/ScrollView.styles.js

@@ -36,13 +36,17 @@ export const StyledScrollView = styled.div`
   let {
     $overflowX
   } = _ref5;
-  return css`overflow-x: ${$overflowX};`;
+  return css`
+        overflow-x: ${$overflowX};
+    `;
 }}
     ${_ref6 => {
   let {
     $overflowY
   } = _ref6;
-  return css`overflow-y: ${$overflowY};`;
+  return css`
+        overflow-y: ${$overflowY};
+    `;
 }}
 
     // Styles for custom scrollbar
@@ -57,7 +61,7 @@ export const StyledScrollView = styled.div`
               ` : css`
                   &::-webkit-scrollbar {
                       width: 10px;
-                      height: 10px
+                      height: 10px;
                   }
 
                   &::-webkit-scrollbar-track {
@@ -76,7 +80,7 @@ export const StyledScrollView = styled.div`
                       background-clip: padding-box;
                       border: solid 3px transparent;
                   }
-            
+
                   &::-webkit-scrollbar-corner {
                       background-color: transparent;
                   }

package/lib/esm/components/scroll-view/ScrollView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$height","_ref3","$maxWidth","_ref4","$width","_ref5","$overflowX","_ref6","$overflowY","_ref7","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'];\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `} \n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `} \n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `} \n    ${({ $overflowX }) => css`overflow-x: ${$overflowX};`}\n    ${({ $overflowY }) => css`overflow-y: ${$overflowY};`}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n            \n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACbC,UAAU,IACVJ,GAAG;AACX,0BAA0B,OAAOI,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACVC,OAAO,IACPN,GAAG;AACX,sBAAsB,OAAOM,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZC,SAAS,IACTR,GAAG;AACX,yBAAyB,OAAOQ,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OACTC,MAAM,IACNV,GAAG;AACX,qBAAqB,OAAOU,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKX,GAAG,eAAeY,UAAU,GAAG;AAAA;AACzD,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKb,GAAG,eAAec,UAAU,GAAG;AAAA;AACzD;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CiB,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDjB,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CiB,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"ScrollView.styles.js","names":["styled","css","StyledScrollView","div","_ref","$maxHeight","_ref2","$height","_ref3","$maxWidth","_ref4","$width","_ref5","$overflowX","_ref6","$overflowY","_ref7","$browser","theme"],"sources":["../../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    $maxHeight?: CSSProperties['height'] | null;\n    $height?: CSSProperties['height'];\n    $maxWidth?: CSSProperties['width'];\n    $width?: CSSProperties['width'];\n    $overflowX: 'scroll' | 'auto';\n    $overflowY: 'scroll' | 'auto';\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    ${({ $maxHeight }) =>\n        $maxHeight &&\n        css`\n            max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n        `}\n    ${({ $height }) =>\n        $height &&\n        css`\n            height: ${typeof $height === 'number' ? `${$height}px` : $height};\n        `} \n    ${({ $maxWidth }) =>\n        $maxWidth &&\n        css`\n            max-width: ${typeof $maxWidth === 'number' ? `${$maxWidth}px` : $maxWidth};\n        `} \n    ${({ $width }) =>\n        $width &&\n        css`\n            width: ${typeof $width === 'number' ? `${$width}px` : $width};\n        `} \n    ${({ $overflowX }) => css`\n        overflow-x: ${$overflowX};\n    `}\n    ${({ $overflowY }) => css`\n        overflow-y: ${$overflowY};\n    `}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledScrollViewProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\n                  }\n              `}\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,gBAAgB,GAAGF,MAAM,CAACG,GAA0B;AACjE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACbC,UAAU,IACVJ,GAAG;AACX,0BAA0B,OAAOI,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACzF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OACVC,OAAO,IACPN,GAAG;AACX,sBAAsB,OAAOM,OAAO,KAAK,QAAQ,GAAG,GAAGA,OAAO,IAAI,GAAGA,OAAO;AAC5E,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OACZC,SAAS,IACTR,GAAG;AACX,yBAAyB,OAAOQ,SAAS,KAAK,QAAQ,GAAG,GAAGA,SAAS,IAAI,GAAGA,SAAS;AACrF,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OACTC,MAAM,IACNV,GAAG;AACX,qBAAqB,OAAOU,MAAM,KAAK,QAAQ,GAAG,GAAGA,MAAM,IAAI,GAAGA,MAAM;AACxE,SAAS;AAAA;AACT,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKX,GAAG;AAC7B,sBAAsBY,UAAU;AAChC,KAAK;AAAA;AACL,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAKb,GAAG;AAC7B,sBAAsBc,UAAU;AAChC,KAAK;AAAA;AACL;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACzCC,QAAQ,KAAK,SAAS,GAChBhB,GAAG;AACjB,0CAA0CiB,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDjB,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CiB,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}