@chayns-components/core 5.0.0-beta.760 → 5.0.0-beta.762

package/lib/cjs/components/truncation/Truncation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_debounce","_truncation2","_Truncation","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","useEffect","parentRef","useRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","useCallback","event","current","handleAnimationEnd","window","setTimeout","offsetHeight","truncateElement","_parentRef$current","firstChild","removeChild","appendChild","style","visibility","useLayoutEffect","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","debounce","observe","disconnect","useMemo","createElement","StyledTruncation","className","ref","StyledTruncationPseudoContent","StyledMotionTruncationContent","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","StyledTruncationClampWrapper","$position","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampWrapper,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n    const [hasSizeChanged, setHasSizeChanged] = useState(false);\n    const [initialRender, setInitialRender] = useState(true);\n\n    const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n    const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n    useEffect(() => {\n        setInitialRender(false);\n    }, []);\n\n    const parentRef = useRef<HTMLDivElement>(null);\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n    const hasCollapsed = useRef(false);\n    const isAnimating = useRef(false);\n    const hasSizeRecentlyChanged = useRef(false);\n    const canResetSizeChanged = useRef(true);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n            setShowClamp(!isOpen);\n        }\n    }, [isOpen]);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        hasCollapsed.current = true;\n        isAnimating.current = false;\n\n        if (canResetSizeChanged.current) {\n            setHasSizeChanged(false);\n            canResetSizeChanged.current = false;\n        }\n\n        window.setTimeout(() => {\n            hasSizeRecentlyChanged.current = false;\n        }, 10);\n\n        setShouldShowCollapsedElement(!internalIsOpen);\n\n        window.setTimeout(() => {\n            hasCollapsed.current = false;\n        }, 30);\n    }, [internalIsOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef, children]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            parentRef.current?.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? originalChildrenRef.current\n                    : pseudoChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n    useLayoutEffect(() => {\n        if (originalChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setOriginalHeight(\n                        observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(originalChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalBigHeight]);\n\n    useLayoutEffect(() => {\n        if (pseudoChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setNewCollapsedHeight(\n                        observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(pseudoChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalSmallHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n                    onAnimationComplete={handleAnimationEnd}\n                    onAnimationStart={() => {\n                        isAnimating.current = true;\n                    }}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClampWrapper $position={clampPosition}>\n                        <StyledTruncationClamp onClick={handleClampClick}>\n                            {internalIsOpen ? lessLabel : moreLabel}\n                        </StyledTruncationClamp>\n                    </StyledTruncationClampWrapper>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            clampPosition,\n            handleAnimationEnd,\n            handleClampClick,\n            hasSizeChanged,\n            internalIsOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_debounce","_truncation2","_Truncation","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","useEffect","parentRef","useRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","useCallback","event","current","handleAnimationEnd","window","setTimeout","offsetHeight","truncateElement","_parentRef$current","firstChild","removeChild","appendChild","style","visibility","useLayoutEffect","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","debounce","observe","disconnect","useMemo","createElement","StyledTruncation","className","ref","StyledTruncationPseudoContent","StyledMotionTruncationContent","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","StyledTruncationClampWrapper","$position","StyledTruncationClamp","onClick","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampWrapper,\n    StyledTruncationPseudoContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children Element in it`s collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n};\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    moreLabel = 'Mehr',\n    lessLabel = 'Weniger',\n    onChange,\n    children,\n}) => {\n    const [internalIsOpen, setInternalIsOpen] = useState(false);\n    const [showClamp, setShowClamp] = useState(true);\n    const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n    const [originalHeight, setOriginalHeight] = useState(0);\n    const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n    const [hasSizeChanged, setHasSizeChanged] = useState(false);\n    const [initialRender, setInitialRender] = useState(true);\n\n    const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n    const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n    useEffect(() => {\n        setInitialRender(false);\n    }, []);\n\n    const parentRef = useRef<HTMLDivElement>(null);\n    const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n    const childrenRef = useRef<HTMLDivElement>(null);\n    const originalChildrenRef = useRef<HTMLDivElement>(null);\n    const hasCollapsed = useRef(false);\n    const isAnimating = useRef(false);\n    const hasSizeRecentlyChanged = useRef(false);\n    const canResetSizeChanged = useRef(true);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n            setShowClamp(!isOpen);\n        }\n    }, [isOpen]);\n\n    // Changes the state of the truncation\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                if (typeof onChange === 'function') {\n                    onChange(event, !current);\n                }\n\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleAnimationEnd = useCallback(() => {\n        hasCollapsed.current = true;\n        isAnimating.current = false;\n\n        if (canResetSizeChanged.current) {\n            setHasSizeChanged(false);\n            canResetSizeChanged.current = false;\n        }\n\n        window.setTimeout(() => {\n            hasSizeRecentlyChanged.current = false;\n        }, 10);\n\n        setShouldShowCollapsedElement(!internalIsOpen);\n\n        window.setTimeout(() => {\n            hasCollapsed.current = false;\n        }, 30);\n    }, [internalIsOpen]);\n\n    useEffect(() => {\n        if (!pseudoChildrenRef.current) {\n            return;\n        }\n\n        setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n        truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n        setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n        setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n    }, [collapsedHeight, pseudoChildrenRef]);\n\n    // Checks if the clamp should be shown\n    useEffect(() => {\n        if (pseudoChildrenRef.current && !hasSizeChanged && !initialRender) {\n            setShowClamp(originalHeight > newCollapsedHeight);\n        }\n    }, [collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight]);\n\n    useEffect(() => {\n        if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n            while (childrenRef.current.firstChild) {\n                childrenRef.current.removeChild(childrenRef.current.firstChild);\n            }\n\n            childrenRef.current.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? pseudoChildrenRef.current\n                    : originalChildrenRef.current,\n            );\n\n            parentRef.current?.appendChild(\n                shouldShowCollapsedElement && !internalIsOpen\n                    ? originalChildrenRef.current\n                    : pseudoChildrenRef.current,\n            );\n\n            (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n        }\n    }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n    useLayoutEffect(() => {\n        if (originalChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setOriginalHeight(\n                        observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(originalChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalBigHeight]);\n\n    useLayoutEffect(() => {\n        if (pseudoChildrenRef.current) {\n            const resizeObserver = new ResizeObserver((entries) => {\n                if (entries && entries[0]) {\n                    const observedHeight = entries[0].contentRect.height;\n\n                    setNewCollapsedHeight(\n                        observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n                    );\n\n                    if (\n                        !hasCollapsed.current &&\n                        !isAnimating.current &&\n                        !hasSizeRecentlyChanged.current\n                    ) {\n                        void debounce(() => {\n                            canResetSizeChanged.current = true;\n                        }, 250)();\n\n                        setHasSizeChanged(true);\n                        hasSizeRecentlyChanged.current = true;\n                    }\n                }\n            });\n\n            resizeObserver.observe(pseudoChildrenRef.current);\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }\n\n        return () => {};\n    }, [originalSmallHeight]);\n\n    return useMemo(\n        () => (\n            <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n                <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledTruncationPseudoContent ref={originalChildrenRef}>\n                    {children}\n                </StyledTruncationPseudoContent>\n                <StyledMotionTruncationContent\n                    animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n                    onAnimationComplete={handleAnimationEnd}\n                    onAnimationStart={() => {\n                        isAnimating.current = true;\n                    }}\n                    ref={childrenRef}\n                />\n                {showClamp && (\n                    <StyledTruncationClampWrapper $position={clampPosition}>\n                        <StyledTruncationClamp onClick={handleClampClick}>\n                            {internalIsOpen ? lessLabel : moreLabel}\n                        </StyledTruncationClamp>\n                    </StyledTruncationClampWrapper>\n                )}\n            </StyledTruncation>\n        ),\n        [\n            children,\n            clampPosition,\n            handleAnimationEnd,\n            handleClampClick,\n            hasSizeChanged,\n            internalIsOpen,\n            lessLabel,\n            moreLabel,\n            newCollapsedHeight,\n            originalHeight,\n            showClamp,\n        ],\n    );\n};\n\nexport default Truncation;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAYA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAM6B,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAiC7B,MAAMW,UAA+B,GAAGA,CAAC;EACrCC,eAAe,GAAG,GAAG;EACrBC,aAAa,GAAGC,yBAAa,CAACC,KAAK;EACnCC,MAAM;EACNC,SAAS,GAAG,MAAM;EAClBC,SAAS,GAAG,SAAS;EACrBC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAF,eAAQ,EAAC,IAAI,CAAC;EAChD,MAAM,CAACG,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAJ,eAAQ,EAACX,eAAe,CAAC;EAC7E,MAAM,CAACgB,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAN,eAAQ,EAAC,CAAC,CAAC;EACvD,MAAM,CAACO,0BAA0B,EAAEC,6BAA6B,CAAC,GAAG,IAAAR,eAAQ,EAAC,IAAI,CAAC;EAClF,MAAM,CAACS,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAV,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAM,CAACW,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAZ,eAAQ,EAAC,IAAI,CAAC;EAExD,MAAM,CAACa,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAd,eAAQ,EAAC,CAAC,CAAC;EACjE,MAAM,CAACe,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAhB,eAAQ,EAAC,CAAC,CAAC;EAE7D,IAAAiB,gBAAS,EAAC,MAAM;IACZL,gBAAgB,CAAC,KAAK,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMM,SAAS,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC9C,MAAMC,iBAAiB,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EACtD,MAAME,WAAW,GAAG,IAAAF,aAAM,EAAiB,IAAI,CAAC;EAChD,MAAMG,mBAAmB,GAAG,IAAAH,aAAM,EAAiB,IAAI,CAAC;EACxD,MAAMI,YAAY,GAAG,IAAAJ,aAAM,EAAC,KAAK,CAAC;EAClC,MAAMK,WAAW,GAAG,IAAAL,aAAM,EAAC,KAAK,CAAC;EACjC,MAAMM,sBAAsB,GAAG,IAAAN,aAAM,EAAC,KAAK,CAAC;EAC5C,MAAMO,mBAAmB,GAAG,IAAAP,aAAM,EAAC,IAAI,CAAC;EAExC,IAAAF,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOxB,MAAM,KAAK,SAAS,EAAE;MAC7BM,iBAAiB,CAACN,MAAM,CAAC;MACzBS,YAAY,CAAC,CAACT,MAAM,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;;EAEZ;EACA,MAAMkC,gBAAgB,GAAG,IAAAC,kBAAW,EAC/BC,KAAK,IAAK;IACP9B,iBAAiB,CAAE+B,OAAO,IAAK;MAC3B,IAAI,OAAOlC,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACiC,KAAK,EAAE,CAACC,OAAO,CAAC;MAC7B;MAEA,OAAO,CAACA,OAAO;IACnB,CAAC,CAAC;EACN,CAAC,EACD,CAAClC,QAAQ,CACb,CAAC;EAED,MAAMmC,kBAAkB,GAAG,IAAAH,kBAAW,EAAC,MAAM;IACzCL,YAAY,CAACO,OAAO,GAAG,IAAI;IAC3BN,WAAW,CAACM,OAAO,GAAG,KAAK;IAE3B,IAAIJ,mBAAmB,CAACI,OAAO,EAAE;MAC7BpB,iBAAiB,CAAC,KAAK,CAAC;MACxBgB,mBAAmB,CAACI,OAAO,GAAG,KAAK;IACvC;IAEAE,MAAM,CAACC,UAAU,CAAC,MAAM;MACpBR,sBAAsB,CAACK,OAAO,GAAG,KAAK;IAC1C,CAAC,EAAE,EAAE,CAAC;IAENtB,6BAA6B,CAAC,CAACV,cAAc,CAAC;IAE9CkC,MAAM,CAACC,UAAU,CAAC,MAAM;MACpBV,YAAY,CAACO,OAAO,GAAG,KAAK;IAChC,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAAChC,cAAc,CAAC,CAAC;EAEpB,IAAAmB,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACG,iBAAiB,CAACU,OAAO,EAAE;MAC5B;IACJ;IAEAxB,iBAAiB,CAACc,iBAAiB,CAACU,OAAO,CAACI,YAAY,CAAC;IACzDlB,oBAAoB,CAACI,iBAAiB,CAACU,OAAO,CAACI,YAAY,CAAC;IAE5D,IAAAC,4BAAe,EAACf,iBAAiB,CAACU,OAAO,EAAEzC,eAAe,CAAC;IAE3De,qBAAqB,CAACgB,iBAAiB,CAACU,OAAO,CAACI,YAAY,CAAC;IAC7DpB,sBAAsB,CAACM,iBAAiB,CAACU,OAAO,CAACI,YAAY,CAAC;EAClE,CAAC,EAAE,CAAC7C,eAAe,EAAE+B,iBAAiB,CAAC,CAAC;;EAExC;EACA,IAAAH,gBAAS,EAAC,MAAM;IACZ,IAAIG,iBAAiB,CAACU,OAAO,IAAI,CAACrB,cAAc,IAAI,CAACE,aAAa,EAAE;MAChET,YAAY,CAACG,cAAc,GAAGF,kBAAkB,CAAC;IACrD;EACJ,CAAC,EAAE,CAACd,eAAe,EAAEoB,cAAc,EAAEE,aAAa,EAAER,kBAAkB,EAAEE,cAAc,CAAC,CAAC;EAExF,IAAAY,gBAAS,EAAC,MAAM;IACZ,IAAII,WAAW,CAACS,OAAO,IAAIV,iBAAiB,CAACU,OAAO,IAAIR,mBAAmB,CAACQ,OAAO,EAAE;MAAA,IAAAM,kBAAA;MACjF,OAAOf,WAAW,CAACS,OAAO,CAACO,UAAU,EAAE;QACnChB,WAAW,CAACS,OAAO,CAACQ,WAAW,CAACjB,WAAW,CAACS,OAAO,CAACO,UAAU,CAAC;MACnE;MAEAhB,WAAW,CAACS,OAAO,CAACS,WAAW,CAC3BhC,0BAA0B,IAAI,CAACT,cAAc,GACvCsB,iBAAiB,CAACU,OAAO,GACzBR,mBAAmB,CAACQ,OAC9B,CAAC;MAED,CAAAM,kBAAA,GAAAlB,SAAS,CAACY,OAAO,cAAAM,kBAAA,eAAjBA,kBAAA,CAAmBG,WAAW,CAC1BhC,0BAA0B,IAAI,CAACT,cAAc,GACvCwB,mBAAmB,CAACQ,OAAO,GAC3BV,iBAAiB,CAACU,OAC5B,CAAC;MAEAT,WAAW,CAACS,OAAO,CAACjC,QAAQ,CAAC,CAAC,CAAC,CAAoB2C,KAAK,CAACC,UAAU,GAAG,SAAS;IACpF;EACJ,CAAC,EAAE,CAAC5C,QAAQ,EAAEC,cAAc,EAAES,0BAA0B,CAAC,CAAC;EAE1D,IAAAmC,sBAAe,EAAC,MAAM;IAClB,IAAIpB,mBAAmB,CAACQ,OAAO,EAAE;MAC7B,MAAMa,cAAc,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;QACnD,IAAIA,OAAO,IAAIA,OAAO,CAAC,CAAC,CAAC,EAAE;UACvB,MAAMC,cAAc,GAAGD,OAAO,CAAC,CAAC,CAAC,CAACE,WAAW,CAACC,MAAM;UAEpD1C,iBAAiB,CACbwC,cAAc,GAAG/B,iBAAiB,GAAGA,iBAAiB,GAAG+B,cAC7D,CAAC;UAED,IACI,CAACvB,YAAY,CAACO,OAAO,IACrB,CAACN,WAAW,CAACM,OAAO,IACpB,CAACL,sBAAsB,CAACK,OAAO,EACjC;YACE,KAAK,IAAAmB,kBAAQ,EAAC,MAAM;cAChBvB,mBAAmB,CAACI,OAAO,GAAG,IAAI;YACtC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YAETpB,iBAAiB,CAAC,IAAI,CAAC;YACvBe,sBAAsB,CAACK,OAAO,GAAG,IAAI;UACzC;QACJ;MACJ,CAAC,CAAC;MAEFa,cAAc,CAACO,OAAO,CAAC5B,mBAAmB,CAACQ,OAAO,CAAC;MAEnD,OAAO,MAAM;QACTa,cAAc,CAACQ,UAAU,CAAC,CAAC;MAC/B,CAAC;IACL;IAEA,OAAO,MAAM,CAAC,CAAC;EACnB,CAAC,EAAE,CAACpC,iBAAiB,CAAC,CAAC;EAEvB,IAAA2B,sBAAe,EAAC,MAAM;IAClB,IAAItB,iBAAiB,CAACU,OAAO,EAAE;MAC3B,MAAMa,cAAc,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;QACnD,IAAIA,OAAO,IAAIA,OAAO,CAAC,CAAC,CAAC,EAAE;UACvB,MAAMC,cAAc,GAAGD,OAAO,CAAC,CAAC,CAAC,CAACE,WAAW,CAACC,MAAM;UAEpD5C,qBAAqB,CACjB0C,cAAc,GAAGjC,mBAAmB,GAAGA,mBAAmB,GAAGiC,cACjE,CAAC;UAED,IACI,CAACvB,YAAY,CAACO,OAAO,IACrB,CAACN,WAAW,CAACM,OAAO,IACpB,CAACL,sBAAsB,CAACK,OAAO,EACjC;YACE,KAAK,IAAAmB,kBAAQ,EAAC,MAAM;cAChBvB,mBAAmB,CAACI,OAAO,GAAG,IAAI;YACtC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YAETpB,iBAAiB,CAAC,IAAI,CAAC;YACvBe,sBAAsB,CAACK,OAAO,GAAG,IAAI;UACzC;QACJ;MACJ,CAAC,CAAC;MAEFa,cAAc,CAACO,OAAO,CAAC9B,iBAAiB,CAACU,OAAO,CAAC;MAEjD,OAAO,MAAM;QACTa,cAAc,CAACQ,UAAU,CAAC,CAAC;MAC/B,CAAC;IACL;IAEA,OAAO,MAAM,CAAC,CAAC;EACnB,CAAC,EAAE,CAACtC,mBAAmB,CAAC,CAAC;EAEzB,OAAO,IAAAuC,cAAO,EACV,mBACI3F,MAAA,CAAAa,OAAA,CAAA+E,aAAA,CAACtF,WAAA,CAAAuF,gBAAgB;IAACC,SAAS,EAAC,wBAAwB;IAACC,GAAG,EAAEtC;EAAU,gBAChEzD,MAAA,CAAAa,OAAA,CAAA+E,aAAA,CAACtF,WAAA,CAAA0F,6BAA6B;IAACD,GAAG,EAAEpC;EAAkB,GACjDvB,QAC0B,CAAC,eAChCpC,MAAA,CAAAa,OAAA,CAAA+E,aAAA,CAACtF,WAAA,CAAA0F,6BAA6B;IAACD,GAAG,EAAElC;EAAoB,GACnDzB,QAC0B,CAAC,eAChCpC,MAAA,CAAAa,OAAA,CAAA+E,aAAA,CAACtF,WAAA,CAAA2F,6BAA6B;IAC1BC,OAAO,EAAE;MAAEX,MAAM,EAAElD,cAAc,GAAGO,cAAc,GAAGF;IAAmB,CAAE;IAC1EyD,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAEtD,cAAc,GAAG,CAAC,GAAG;IAAI,CAAE;IAClEuD,mBAAmB,EAAEjC,kBAAmB;IACxCkC,gBAAgB,EAAEA,CAAA,KAAM;MACpBzC,WAAW,CAACM,OAAO,GAAG,IAAI;IAC9B,CAAE;IACF0B,GAAG,EAAEnC;EAAY,CACpB,CAAC,EACDpB,SAAS,iBACNxC,MAAA,CAAAa,OAAA,CAAA+E,aAAA,CAACtF,WAAA,CAAAmG,4BAA4B;IAACC,SAAS,EAAE7E;EAAc,gBACnD7B,MAAA,CAAAa,OAAA,CAAA+E,aAAA,CAACtF,WAAA,CAAAqG,qBAAqB;IAACC,OAAO,EAAE1C;EAAiB,GAC5C7B,cAAc,GAAGH,SAAS,GAAGD,SACX,CACG,CAEpB,CACrB,EACD,CACIG,QAAQ,EACRP,aAAa,EACbyC,kBAAkB,EAClBJ,gBAAgB,EAChBlB,cAAc,EACdX,cAAc,EACdH,SAAS,EACTD,SAAS,EACTS,kBAAkB,EAClBE,cAAc,EACdJ,SAAS,CAEjB,CAAC;AACL,CAAC;AAAC,IAAAqE,QAAA,GAAAC,OAAA,CAAAjG,OAAA,GAEac,UAAU","ignoreList":[]}

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

@@ -7,8 +7,7 @@ import { calculateContentHeight, calculateContentWidth, getMaxHeightInPixels } f
 import { getIsTouch } from '../../utils/environment';
 import Icon from '../icon/Icon';
 import ComboBoxItem from './combobox-item/ComboBoxItem';
-import { StyledComboBoxTopic } from './combobox-item/ComboBoxItem.styles';
-import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledMotionComboBoxBody } from './ComboBox.styles';
+import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledComboBoxTopic, StyledMotionComboBoxBody } from './ComboBox.styles';
 const ComboBox = _ref => {
   let {
     direction = ComboBoxDirection.BOTTOM,
@@ -159,7 +158,13 @@ const ComboBox = _ref => {
       } = _ref5;
       return text;
     });
-    const contentHeight = calculateContentHeight(textArray);
+    const groupNames = lists.map(_ref6 => {
+      let {
+        groupName
+      } = _ref6;
+      return groupName || 'Unnamed';
+    });
+    const contentHeight = calculateContentHeight([...textArray, ...groupNames]);
     const maxHeightInPixels = getMaxHeightInPixels(maxHeight, styledComboBoxElementRef.current ?? document.body);
     setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');
     textArray.push(placeholder);
@@ -225,29 +230,33 @@ const ComboBox = _ref => {
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
-  const comboBoxGroups = useMemo(() => lists.map(_ref6 => {
+  const comboBoxGroups = useMemo(() => lists.map(_ref7 => {
     let {
       groupName,
       list
-    } = _ref6;
+    } = _ref7;
     return /*#__PURE__*/React.createElement("div", {
       key: groupName ?? 'default-group'
-    }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), list.map(_ref7 => {
+    }, groupName && lists.length > 1 && /*#__PURE__*/React.createElement(StyledComboBoxTopic, null, groupName), list.map(_ref8 => {
       let {
         imageUrl,
         icons,
+        rightElement,
+        subtext,
         suffixElement,
         text,
         value
-      } = _ref7;
+      } = _ref8;
       return /*#__PURE__*/React.createElement(ComboBoxItem, {
-        imageUrl: imageUrl,
         icons: icons,
+        id: value,
+        imageUrl: imageUrl,
         isSelected: selectedItem ? value === selectedItem.value : false,
         key: value,
-        id: value,
         onSelect: handleSetSelectedItem,
+        rightElement: rightElement,
         shouldShowRoundImage: shouldShowRoundImage,
+        subtext: subtext,
         suffixElement: suffixElement,
         text: text,
         value: value

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

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

@@ -197,4 +197,28 @@ export const StyledMotionComboBoxBody = styled(motion.div)`
               `;
 }}
 `;
+export const StyledComboBoxTopic = styled.div`
+    align-items: center;
+    color: rgba(${_ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme['text-rgb'];
+}}, 0.65);
+    position: sticky;
+    top: 0;
+    border: black 5px;
+    cursor: default;
+    font-weight: bold;
+    display: flex;
+    gap: 10px;
+    z-index: 10;
+    padding: 4px 10px;
+    background-color: ${_ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme['secondary-101'];
+}};
+`;
 //# sourceMappingURL=ComboBox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","_ref4","_ref5","$isOpen","$direction","BOTTOM","_ref6","$isTouch","StyledComboBoxPlaceholder","_ref7","text","StyledComboBoxPlaceholderImage","img","_ref8","_ref9","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref10","_ref11","$maxHeight","_ref12","$overflowY","_ref13","_ref14","_ref15","_ref16","$browser"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\ntype StyledComboBoxProps = WithTheme<{\n    $shouldUseFullWidth: boolean;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) =>\n        $shouldUseFullWidth\n            ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n            : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n\n    min-width: ${({ $minWidth }) => $minWidth - 2}px;\n    max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","_ref4","_ref5","$isOpen","$direction","BOTTOM","_ref6","$isTouch","StyledComboBoxPlaceholder","_ref7","text","StyledComboBoxPlaceholderImage","img","_ref8","_ref9","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref10","_ref11","$maxHeight","_ref12","$overflowY","_ref13","_ref14","_ref15","_ref16","$browser","StyledComboBoxTopic","_ref17","_ref18"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\ntype StyledComboBoxProps = WithTheme<{\n    $shouldUseFullWidth: boolean;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) =>\n        $shouldUseFullWidth\n            ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n            : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n\n    min-width: ${({ $minWidth }) => $minWidth - 2}px;\n    max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js

@@ -1,17 +1,19 @@
 import React, { useCallback, useMemo } from 'react';
 import { getIsTouch } from '../../../utils/environment';
 import Icon from '../../icon/Icon';
-import { StyledComboBoxItem, StyledComboBoxItemImage } from './ComboBoxItem.styles';
+import { StyledComboBoxItem, StyledComboBoxItemContent, StyledComboBoxItemContentHeader, StyledComboBoxItemContentHeaderRightElement, StyledComboBoxItemContentHeaderText, StyledComboBoxItemContentSubtext, StyledComboBoxItemImage } from './ComboBoxItem.styles';
 const ComboBoxItem = _ref => {
   let {
+    icons,
+    id,
     imageUrl,
     isSelected,
-    icons,
     onSelect,
+    rightElement,
     shouldShowRoundImage,
+    subtext,
     suffixElement,
     text,
-    id,
     value
   } = _ref;
   const handleItemClick = useCallback(() => {
@@ -30,10 +32,13 @@ const ComboBoxItem = _ref => {
     $isSelected: isSelected
   }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
     src: imageUrl,
+    $shouldShowBigImage: typeof subtext === 'string',
     $shouldShowRoundImage: shouldShowRoundImage
   }), icons && /*#__PURE__*/React.createElement(Icon, {
     icons: icons
-  }), text, suffixElement), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, shouldShowRoundImage, suffixElement, text]);
+  }), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderText, {
+    $shouldShowBoldText: typeof subtext === 'string'
+  }, text, suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, rightElement, shouldShowRoundImage, subtext, suffixElement, text]);
 };
 ComboBoxItem.displayName = 'ComboBoxItem';
 export default ComboBoxItem;

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemImage","ComboBoxItem","_ref","imageUrl","isSelected","icons","onSelect","shouldShowRoundImage","suffixElement","text","id","value","handleItemClick","isTouch","createElement","String","onClick","$isTouch","$isSelected","src","$shouldShowRoundImage","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport { StyledComboBoxItem, StyledComboBoxItemImage } from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    imageUrl: IComboBoxItem['imageUrl'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    icons?: IComboBoxItem['icons'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    id: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    imageUrl,\n    isSelected,\n    icons,\n    onSelect,\n    shouldShowRoundImage,\n    suffixElement,\n    text,\n    id,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        onSelect({ text, value, suffixElement, imageUrl });\n    }, [imageUrl, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isTouch={isTouch}\n                $isSelected={isSelected}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                {text}\n                {suffixElement}\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageUrl,\n            isSelected,\n            isTouch,\n            shouldShowRoundImage,\n            suffixElement,\n            text,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SAASC,kBAAkB,EAAEC,uBAAuB,QAAQ,uBAAuB;AAcnF,MAAMC,YAAmC,GAAGC,IAAA,IAUtC;EAAA,IAVuC;IACzCC,QAAQ;IACRC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC,oBAAoB;IACpBC,aAAa;IACbC,IAAI;IACJC,EAAE;IACFC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,eAAe,GAAGjB,WAAW,CAAC,MAAM;IACtCW,QAAQ,CAAC;MAAEG,IAAI;MAAEE,KAAK;MAAEH,aAAa;MAAEL;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEG,QAAQ,EAAEE,aAAa,EAAEC,IAAI,EAAEE,KAAK,CAAC,CAAC;EAEpD,MAAME,OAAO,GAAGhB,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAAoB,aAAA,CAACf,kBAAkB;IACfW,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGK,MAAM,CAACL,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEM,OAAO,EAAEJ,eAAgB;IACzBK,QAAQ,EAAEJ,OAAQ;IAClBK,WAAW,EAAEd;EAAW,GAEvBD,QAAQ,iBACLT,KAAA,CAAAoB,aAAA,CAACd,uBAAuB;IACpBmB,GAAG,EAAEhB,QAAS;IACdiB,qBAAqB,EAAEb;EAAqB,CAC/C,CACJ,EACAF,KAAK,iBAAIX,KAAA,CAAAoB,aAAA,CAAChB,IAAI;IAACO,KAAK,EAAEA;EAAM,CAAE,CAAC,EAC/BI,IAAI,EACJD,aACe,CACvB,EACD,CACII,eAAe,EACfP,KAAK,EACLK,EAAE,EACFP,QAAQ,EACRC,UAAU,EACVS,OAAO,EACPN,oBAAoB,EACpBC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDR,YAAY,CAACoB,WAAW,GAAG,cAAc;AAEzC,eAAepB,YAAY","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isSelected","onSelect","rightElement","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","isTouch","createElement","String","onClick","$isTouch","$isSelected","src","$shouldShowBigImage","$shouldShowRoundImage","$shouldShowBoldText","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    icons?: IComboBoxItem['icons'];\n    id: IComboBoxItem['value'];\n    imageUrl: IComboBoxItem['imageUrl'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    rightElement: IComboBoxItem['rightElement'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    subtext: IComboBoxItem['subtext'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    icons,\n    id,\n    imageUrl,\n    isSelected,\n    onSelect,\n    rightElement,\n    shouldShowRoundImage,\n    subtext,\n    suffixElement,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        onSelect({ text, value, suffixElement, imageUrl });\n    }, [imageUrl, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isTouch={isTouch}\n                $isSelected={isSelected}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $shouldShowBigImage={typeof subtext === 'string'}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader>\n                        <StyledComboBoxItemContentHeaderText\n                            $shouldShowBoldText={typeof subtext === 'string'}\n                        >\n                            {text}\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderText>\n                        <StyledComboBoxItemContentHeaderRightElement>\n                            {rightElement}\n                        </StyledComboBoxItemContentHeaderRightElement>\n                    </StyledComboBoxItemContentHeader>\n                    <StyledComboBoxItemContentSubtext>{subtext}</StyledComboBoxItemContentSubtext>\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageUrl,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,mCAAmC,EACnCC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;AAgB9B,MAAMC,YAAmC,GAAGC,IAAA,IAYtC;EAAA,IAZuC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,IAAI;IACJC;EACJ,CAAC,GAAAX,IAAA;EACG,MAAMY,eAAe,GAAGxB,WAAW,CAAC,MAAM;IACtCiB,QAAQ,CAAC;MAAEK,IAAI;MAAEC,KAAK;MAAEF,aAAa;MAAEN;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEE,QAAQ,EAAEI,aAAa,EAAEC,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEpD,MAAME,OAAO,GAAGvB,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA2B,aAAA,CAACtB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGa,MAAM,CAACb,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEc,OAAO,EAAEJ,eAAgB;IACzBK,QAAQ,EAAEJ,OAAQ;IAClBK,WAAW,EAAEd;EAAW,GAEvBD,QAAQ,iBACLhB,KAAA,CAAA2B,aAAA,CAAChB,uBAAuB;IACpBqB,GAAG,EAAEhB,QAAS;IACdiB,mBAAmB,EAAE,OAAOZ,OAAO,KAAK,QAAS;IACjDa,qBAAqB,EAAEd;EAAqB,CAC/C,CACJ,EACAN,KAAK,iBAAId,KAAA,CAAA2B,aAAA,CAACvB,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA2B,aAAA,CAACrB,yBAAyB,qBACtBN,KAAA,CAAA2B,aAAA,CAACpB,+BAA+B,qBAC5BP,KAAA,CAAA2B,aAAA,CAAClB,mCAAmC;IAChC0B,mBAAmB,EAAE,OAAOd,OAAO,KAAK;EAAS,GAEhDE,IAAI,EACJD,aACgC,CAAC,eACtCtB,KAAA,CAAA2B,aAAA,CAACnB,2CAA2C,QACvCW,YACwC,CAChB,CAAC,eAClCnB,KAAA,CAAA2B,aAAA,CAACjB,gCAAgC,QAAEW,OAA0C,CACtD,CACX,CACvB,EACD,CACII,eAAe,EACfX,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVS,OAAO,EACPP,YAAY,EACZC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDX,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js

@@ -35,48 +35,61 @@ export const StyledComboBoxItem = styled.div`
         `;
 }}
 `;
-export const StyledComboBoxTopic = styled.div`
-    align-items: center;
-    color: ${_ref4 => {
+export const StyledComboBoxItemImage = styled.img`
+    ${_ref4 => {
   let {
-    theme
+    $shouldShowRoundImage
   } = _ref4;
-  return theme.text;
-}};
-    position: sticky;
-    top: 0;
-    border: black 5px;
-    cursor: default;
-    font-weight: bold;
-    display: flex;
-    gap: 10px;
-    z-index: 10;
-    padding: 4px 10px;
-    background-color: ${_ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme['secondary-101'];
-}};
-`;
-export const StyledComboBoxItemImage = styled.img`
+  return $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+
     box-shadow: 0 0 0 1px
-        rgba(${_ref6 => {
+        rgba(${_ref5 => {
   let {
     theme
-  } = _ref6;
+  } = _ref5;
   return theme['009-rgb'];
 }}, 0.15);
-    height: 22px;
-    width: 22px;
-
-    ${_ref7 => {
+    flex: 0 0 auto;
+    height: ${_ref6 => {
   let {
-    $shouldShowRoundImage
+    $shouldShowBigImage
+  } = _ref6;
+  return $shouldShowBigImage ? '40px' : '22px';
+}};
+    width: ${_ref7 => {
+  let {
+    $shouldShowBigImage
   } = _ref7;
-  return $shouldShowRoundImage && css`
-            border-radius: 50%;
-        `;
-}}
+  return $shouldShowBigImage ? '40px' : '22px';
+}};
+`;
+export const StyledComboBoxItemContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    line-height: normal;
+`;
+export const StyledComboBoxItemContentHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+export const StyledComboBoxItemContentHeaderText = styled.div`
+    display: flex;
+    font-weight: ${_ref8 => {
+  let {
+    $shouldShowBoldText
+  } = _ref8;
+  return $shouldShowBoldText ? 'bold' : 'normal';
+}};
+    gap: 4px;
+`;
+export const StyledComboBoxItemContentHeaderRightElement = styled.div``;
+export const StyledComboBoxItemContentSubtext = styled.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.85;
 `;
 //# sourceMappingURL=ComboBoxItem.styles.js.map

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxTopic","_ref4","_ref5","StyledComboBoxItemImage","img","_ref6","_ref7","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isTouch: boolean;\n    $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-103']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 4px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n        !$isTouch &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: ${({ theme }) => theme.text};\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }) => theme['secondary-101']};\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACTT,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAMM,mBAAmB,GAAGX,MAAM,CAACG,GAAG;AAC7C;AACA,aAAaS,KAAA;EAAA,IAAC;IAAEP;EAAM,CAAC,GAAAO,KAAA;EAAA,OAAKP,KAAK,CAACG,IAAI;AAAA;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBK,KAAA;EAAA,IAAC;IAAER;EAAM,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7D,CAAC;AAID,OAAO,MAAMS,uBAAuB,GAAGd,MAAM,CAACe,GAAiC;AAC/E;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEX;EAAoC,CAAC,GAAAW,KAAA;EAAA,OAAKX,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA;AACA;AACA,MAAMY,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBjB,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxItemImage","img","_ref4","$shouldShowRoundImage","_ref5","_ref6","$shouldShowBigImage","_ref7","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","_ref8","$shouldShowBoldText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isTouch: boolean;\n    $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-103']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 4px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n        !$isTouch &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n    $shouldShowBigImage?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    flex: 0 0 auto;\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    line-height: normal;\n`;\n\nexport const StyledComboBoxItemContentHeader = styled.div`\n    display: flex;\n    justify-content: space-between;\n`;\n\ntype StyledComboBoxItemContentHeaderTextProps = WithTheme<{ $shouldShowBoldText?: boolean }>;\n\nexport const StyledComboBoxItemContentHeaderText = styled.div<StyledComboBoxItemContentHeaderTextProps>`\n    display: flex;\n    font-weight: ${({ $shouldShowBoldText }) => ($shouldShowBoldText ? 'bold' : 'normal')};\n    gap: 4px;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div``;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n    opacity: 0.85;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACTT,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAOD,OAAO,MAAMM,uBAAuB,GAAGX,MAAM,CAACY,GAAiC;AAC/E,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBb,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA;AACA,eAAec,KAAA;EAAA,IAAC;IAAEV;EAAoC,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA,cAAcW,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAoB,CAAC,GAAAC,KAAA;EAAA,OAAMD,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGnB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,+BAA+B,GAAGpB,MAAM,CAACG,GAAG;AACzD;AACA;AACA,CAAC;AAID,OAAO,MAAMkB,mCAAmC,GAAGrB,MAAM,CAACG,GAA6C;AACvG;AACA,mBAAmBmB,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACzF;AACA,CAAC;AAED,OAAO,MAAMC,2CAA2C,GAAGxB,MAAM,CAACG,GAAG,EAAE;AAEvE,OAAO,MAAMsB,gCAAgC,GAAGzB,MAAM,CAACG,GAAG;AAC1D;AACA;AACA;AACA,CAAC","ignoreList":[]}