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

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

@@ -13,7 +13,6 @@ var _calculate = require("../../utils/calculate");
 var _environment = require("../../utils/environment");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
-var _ComboBoxItem2 = require("./combobox-item/ComboBoxItem.styles");
 var _ComboBox = require("./ComboBox.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -158,7 +157,10 @@ const ComboBox = ({
     const textArray = allItems === null || allItems === void 0 ? void 0 : allItems.map(({
       text
     }) => text);
-    const contentHeight = (0, _calculate.calculateContentHeight)(textArray);
+    const groupNames = lists.map(({
+      groupName
+    }) => groupName || 'Unnamed');
+    const contentHeight = (0, _calculate.calculateContentHeight)([...textArray, ...groupNames]);
     const maxHeightInPixels = (0, _calculate.getMaxHeightInPixels)(maxHeight, styledComboBoxElementRef.current ?? document.body);
     setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');
     textArray.push(placeholder);
@@ -229,20 +231,24 @@ const ComboBox = ({
     list
   }) => /*#__PURE__*/_react.default.createElement("div", {
     key: groupName ?? 'default-group'
-  }, groupName && lists.length > 1 && /*#__PURE__*/_react.default.createElement(_ComboBoxItem2.StyledComboBoxTopic, null, groupName), list.map(({
+  }, groupName && lists.length > 1 && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxTopic, null, groupName), list.map(({
     imageUrl,
     icons,
+    rightElement,
+    subtext,
     suffixElement,
     text,
     value
   }) => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.default, {
-    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/cjs/components/combobox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBoxItem2","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","isAtLeastOneItemWithImageGiven","imageUrl","isAtLeastOneItemWithIconGiven","icons","textArray","map","text","contentHeight","calculateContentHeight","maxHeightInPixels","getMaxHeightInPixels","push","width","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","groupName","createElement","StyledComboBoxTopic","suffixElement","isSelected","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} 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":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","useEffect","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","isAtLeastOneItemWithImageGiven","imageUrl","isAtLeastOneItemWithIconGiven","icons","textArray","map","text","groupNames","groupName","contentHeight","calculateContentHeight","maxHeightInPixels","getMaxHeightInPixels","push","width","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","createElement","StyledComboBoxTopic","rightElement","subtext","suffixElement","isSelected","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} 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/cjs/components/combobox/ComboBox.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionComboBoxBody = exports.StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholder = exports.StyledComboBoxIconWrapper = exports.StyledComboBoxHeader = exports.StyledComboBox = void 0;
+exports.StyledMotionComboBoxBody = exports.StyledComboBoxTopic = exports.StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholder = exports.StyledComboBoxIconWrapper = exports.StyledComboBoxHeader = exports.StyledComboBox = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _comboBox = require("../../types/comboBox");
@@ -161,4 +161,22 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
                   }
               `}
 `;
+const StyledComboBoxTopic = exports.StyledComboBoxTopic = _styledComponents.default.div`
+    align-items: center;
+    color: rgba(${({
+  theme
+}) => 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: ${({
+  theme
+}) => theme['secondary-101']};
+`;
 //# sourceMappingURL=ComboBox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","theme","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","StyledComboBoxPlaceholderImage","img","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$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":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","css","StyledComboBoxHeader","$isDisabled","theme","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","StyledComboBoxPlaceholderImage","img","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { 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/cjs/components/combobox/combobox-item/ComboBoxItem.js

@@ -12,14 +12,16 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ComboBoxItem = ({
+  icons,
+  id,
   imageUrl,
   isSelected,
-  icons,
   onSelect,
+  rightElement,
   shouldShowRoundImage,
+  subtext,
   suffixElement,
   text,
-  id,
   value
 }) => {
   const handleItemClick = (0, _react.useCallback)(() => {
@@ -38,10 +40,13 @@ const ComboBoxItem = ({
     $isSelected: isSelected
   }, imageUrl && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemImage, {
     src: imageUrl,
+    $shouldShowBigImage: typeof subtext === 'string',
     $shouldShowRoundImage: shouldShowRoundImage
   }), icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: icons
-  }), text, suffixElement), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, shouldShowRoundImage, suffixElement, text]);
+  }), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContent, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeader, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderText, {
+    $shouldShowBoldText: typeof subtext === 'string'
+  }, text, suffixElement), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderRightElement, null, rightElement)), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, rightElement, shouldShowRoundImage, subtext, suffixElement, text]);
 };
 ComboBoxItem.displayName = 'ComboBoxItem';
 var _default = exports.default = ComboBoxItem;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBoxItem","imageUrl","isSelected","icons","onSelect","shouldShowRoundImage","suffixElement","text","id","value","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isTouch","$isSelected","StyledComboBoxItemImage","src","$shouldShowRoundImage","displayName","_default","exports"],"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":"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","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBoxItem","icons","id","imageUrl","isSelected","onSelect","rightElement","shouldShowRoundImage","subtext","suffixElement","text","value","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isTouch","$isSelected","StyledComboBoxItemImage","src","$shouldShowBigImage","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","$shouldShowBoldText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext","displayName","_default","exports"],"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":"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","ignoreList":[]}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledComboBoxTopic = exports.StyledComboBoxItemImage = exports.StyledComboBoxItem = void 0;
+exports.StyledComboBoxItemImage = exports.StyledComboBoxItemContentSubtext = exports.StyledComboBoxItemContentHeaderText = exports.StyledComboBoxItemContentHeaderRightElement = exports.StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContent = exports.StyledComboBoxItem = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -34,36 +34,46 @@ const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.defaul
             }
         `}
 `;
-const StyledComboBoxTopic = exports.StyledComboBoxTopic = _styledComponents.default.div`
-    align-items: center;
-    color: ${({
-  theme
-}) => 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: ${({
-  theme
-}) => theme['secondary-101']};
-`;
 const StyledComboBoxItemImage = exports.StyledComboBoxItemImage = _styledComponents.default.img`
-    box-shadow: 0 0 0 1px
-        rgba(${({
-  theme
-}) => theme['009-rgb']}, 0.15);
-    height: 22px;
-    width: 22px;
-
     ${({
   $shouldShowRoundImage
 }) => $shouldShowRoundImage && (0, _styledComponents.css)`
             border-radius: 50%;
         `}
+
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    flex: 0 0 auto;
+    height: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+    width: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+`;
+const StyledComboBoxItemContent = exports.StyledComboBoxItemContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    line-height: normal;
+`;
+const StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContentHeader = _styledComponents.default.div`
+    display: flex;
+    justify-content: space-between;
+`;
+const StyledComboBoxItemContentHeaderText = exports.StyledComboBoxItemContentHeaderText = _styledComponents.default.div`
+    display: flex;
+    font-weight: ${({
+  $shouldShowBoldText
+}) => $shouldShowBoldText ? 'bold' : 'normal'};
+    gap: 4px;
+`;
+const StyledComboBoxItemContentHeaderRightElement = exports.StyledComboBoxItemContentHeaderRightElement = _styledComponents.default.div``;
+const StyledComboBoxItemContentSubtext = exports.StyledComboBoxItemContentSubtext = _styledComponents.default.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.85;
 `;
 //# sourceMappingURL=ComboBoxItem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isTouch","css","StyledComboBoxTopic","StyledComboBoxItemImage","img","$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,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,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,SAAAH,wBAAAG,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;AAQzC,MAAMW,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAqC,CAAC,KAChEA,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAC7C,aAAa,CAAC;EAAEA;AAA+B,CAAC,KAAKA,KAAK,CAACE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEH;AAA+B,CAAC,KAC3C,CAACG,QAAQ,IACT,IAAAC,qBAAG;AACX;AACA,oCAAoCJ,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;AAEM,MAAMK,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACC,GAAG;AAC7C;AACA,aAAa,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAACE,IAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AAC7D,CAAC;AAIM,MAAMM,uBAAuB,GAAAT,OAAA,CAAAS,uBAAA,GAAGR,yBAAM,CAACS,GAAiC;AAC/E;AACA,eAAe,CAAC;EAAEP;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA;AACA;AACA,MAAM,CAAC;EAAEQ;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isTouch","css","StyledComboBoxItemImage","img","$shouldShowRoundImage","$shouldShowBigImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","$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":"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","ignoreList":[]}

package/lib/cjs/components/select-button/SelectButton.js

@@ -12,13 +12,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SelectButton = ({
+  buttonText,
+  isDisabled,
+  list,
   onSelect,
   selectedItemIds,
   shouldAllowMultiSelect,
-  buttonText,
+  shouldShowButtonTextWithSelection,
   shouldShowSearch,
-  list,
-  isDisabled,
   title
 }) => {
   const itemList = (0, _react.useMemo)(() => {
@@ -36,21 +37,27 @@ const SelectButton = ({
     });
     return items;
   }, [list, selectedItemIds]);
-  const selectedItemText = (0, _react.useMemo)(() => {
-    if (!selectedItemIds || selectedItemIds.length === 0) {
-      return null;
+  const internalButtonText = (0, _react.useMemo)(() => {
+    if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {
+      return buttonText;
     }
+    let addedCount = 0;
     let newText = '';
+    const additionalCount = selectedItemIds.length - 2;
     list.forEach(({
       text,
       id
     }) => {
-      if (selectedItemIds !== null && selectedItemIds !== void 0 && selectedItemIds.includes(id)) {
+      if ((addedCount < 2 || additionalCount <= 1) && selectedItemIds !== null && selectedItemIds !== void 0 && selectedItemIds.includes(id)) {
+        addedCount += 1;
         newText += newText.length === 0 ? `${text}` : `, ${text}`;
       }
     });
+    if (additionalCount > 1) {
+      newText += `, ${additionalCount} weitere`;
+    }
     return newText;
-  }, [list, selectedItemIds]);
+  }, [buttonText, list, selectedItemIds, shouldShowButtonTextWithSelection]);
   const handleClick = () => {
     void (0, _chaynsApi.createDialog)({
       text: title ? `[h1]${title}[/h1]` : undefined,
@@ -75,7 +82,7 @@ const SelectButton = ({
     isDisabled: isDisabled,
     isSecondary: true,
     shouldShowTextAsRobotoMedium: false
-  }, selectedItemText ?? buttonText));
+  }, internalButtonText));
 };
 SelectButton.displayName = 'SelectButton';
 var _default = exports.default = SelectButton;

package/lib/cjs/components/select-button/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SelectButton","onSelect","selectedItemIds","shouldAllowMultiSelect","buttonText","shouldShowSearch","list","isDisabled","title","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","selectedItemText","length","newText","handleClick","createDialog","undefined","type","DialogType","SELECT","multiselect","quickfind","open","then","result","buttonType","map","Number","createElement","StyledSelectButton","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName","_default","exports"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * A list of item that could be selected.\n     */\n    list: SelectButtonItem[];\n    /**\n     * Function to be executed after an item is selected.\n     */\n    onSelect?: (ids: number[]) => void;\n    /**\n     * The id of an item that should be preselected.\n     */\n    selectedItemIds?: number[];\n    /**\n     * Whether more than one item should be selectable.\n     */\n    shouldAllowMultiSelect?: boolean;\n    /**\n     * Whether the search should be displayed inside the dialog.\n     */\n    shouldShowSearch?: boolean;\n    /**\n     * The title of the dialog.\n     */\n    title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    buttonText,\n    shouldShowSearch,\n    list,\n    isDisabled,\n    title,\n}) => {\n    const itemList = useMemo(() => {\n        const items: DialogSelectListItemType[] = [];\n\n        list.forEach(({ text, id }) => {\n            const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n            items.push({\n                name: text,\n                id,\n                isSelected,\n            });\n        });\n\n        return items;\n    }, [list, selectedItemIds]);\n\n    const selectedItemText = useMemo(() => {\n        if (!selectedItemIds || selectedItemIds.length === 0) {\n            return null;\n        }\n\n        let newText = '';\n\n        list.forEach(({ text, id }) => {\n            if (selectedItemIds?.includes(id)) {\n                newText += newText.length === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        return newText;\n    }, [list, selectedItemIds]);\n\n    const handleClick = () => {\n        void createDialog({\n            text: title ? `[h1]${title}[/h1]` : undefined,\n            type: DialogType.SELECT,\n            list: itemList,\n            multiselect: shouldAllowMultiSelect,\n            quickfind: shouldShowSearch,\n        })\n            .open()\n            .then((result) => {\n                // Ignore because there is no type\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n                    // Ignore because there is no type\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    onSelect((result.result as string[]).map(Number));\n                }\n            });\n    };\n\n    return (\n        <StyledSelectButton>\n            <Button\n                onClick={handleClick}\n                isDisabled={isDisabled}\n                isSecondary\n                shouldShowTextAsRobotoMedium={false}\n            >\n                {selectedItemText ?? buttonText}\n            </Button>\n        </StyledSelectButton>\n    );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SelectButton.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_Button","_interopRequireDefault","_SelectButton","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SelectButton","buttonText","isDisabled","list","onSelect","selectedItemIds","shouldAllowMultiSelect","shouldShowButtonTextWithSelection","shouldShowSearch","title","itemList","useMemo","items","forEach","text","id","isSelected","includes","push","name","internalButtonText","length","addedCount","newText","additionalCount","handleClick","createDialog","undefined","type","DialogType","SELECT","multiselect","quickfind","open","then","result","buttonType","map","Number","createElement","StyledSelectButton","onClick","isSecondary","shouldShowTextAsRobotoMedium","displayName","_default","exports"],"sources":["../../../../src/components/select-button/SelectButton.tsx"],"sourcesContent":["import { createDialog, DialogType, type DialogSelectListItemType } from 'chayns-api';\nimport React, { useMemo, type FC } from 'react';\nimport type { SelectButtonItem } from '../../types/selectButton';\nimport Button from '../button/Button';\nimport { StyledSelectButton } from './SelectButton.styles';\n\nexport type SelectButtonProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * A list of item that could be selected.\n     */\n    list: SelectButtonItem[];\n    /**\n     * Function to be executed after an item is selected.\n     */\n    onSelect?: (ids: number[]) => void;\n    /**\n     * The id of an item that should be preselected.\n     */\n    selectedItemIds?: number[];\n    /**\n     * Whether more than one item should be selectable.\n     */\n    shouldAllowMultiSelect?: boolean;\n    /**\n     * Whether the button text should be displayed also if items are selected.\n     */\n    shouldShowButtonTextWithSelection?: boolean;\n    /**\n     * Whether the search should be displayed inside the dialog.\n     */\n    shouldShowSearch?: boolean;\n    /**\n     * The title of the dialog.\n     */\n    title?: string;\n};\n\nconst SelectButton: FC<SelectButtonProps> = ({\n    buttonText,\n    isDisabled,\n    list,\n    onSelect,\n    selectedItemIds,\n    shouldAllowMultiSelect,\n    shouldShowButtonTextWithSelection,\n    shouldShowSearch,\n    title,\n}) => {\n    const itemList = useMemo(() => {\n        const items: DialogSelectListItemType[] = [];\n\n        list.forEach(({ text, id }) => {\n            const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;\n\n            items.push({\n                name: text,\n                id,\n                isSelected,\n            });\n        });\n\n        return items;\n    }, [list, selectedItemIds]);\n\n    const internalButtonText = useMemo(() => {\n        if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {\n            return buttonText;\n        }\n\n        let addedCount = 0;\n        let newText = '';\n\n        const additionalCount = selectedItemIds.length - 2;\n\n        list.forEach(({ text, id }) => {\n            if ((addedCount < 2 || additionalCount <= 1) && selectedItemIds?.includes(id)) {\n                addedCount += 1;\n                newText += newText.length === 0 ? `${text}` : `, ${text}`;\n            }\n        });\n\n        if (additionalCount > 1) {\n            newText += `, ${additionalCount} weitere`;\n        }\n\n        return newText;\n    }, [buttonText, list, selectedItemIds, shouldShowButtonTextWithSelection]);\n\n    const handleClick = () => {\n        void createDialog({\n            text: title ? `[h1]${title}[/h1]` : undefined,\n            type: DialogType.SELECT,\n            list: itemList,\n            multiselect: shouldAllowMultiSelect,\n            quickfind: shouldShowSearch,\n        })\n            .open()\n            .then((result) => {\n                // Ignore because there is no type\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                if (result && result.buttonType === 1 && typeof onSelect === 'function') {\n                    // Ignore because there is no type\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore\n                    onSelect((result.result as string[]).map(Number));\n                }\n            });\n    };\n\n    return (\n        <StyledSelectButton>\n            <Button\n                onClick={handleClick}\n                isDisabled={isDisabled}\n                isSecondary\n                shouldShowTextAsRobotoMedium={false}\n            >\n                {internalButtonText}\n            </Button>\n        </StyledSelectButton>\n    );\n};\n\nSelectButton.displayName = 'SelectButton';\n\nexport default SelectButton;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAA2D,SAAAI,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAyC3D,MAAMW,YAAmC,GAAGA,CAAC;EACzCC,UAAU;EACVC,UAAU;EACVC,IAAI;EACJC,QAAQ;EACRC,eAAe;EACfC,sBAAsB;EACtBC,iCAAiC;EACjCC,gBAAgB;EAChBC;AACJ,CAAC,KAAK;EACF,MAAMC,QAAQ,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC3B,MAAMC,KAAiC,GAAG,EAAE;IAE5CT,IAAI,CAACU,OAAO,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAG,CAAC,KAAK;MAC3B,MAAMC,UAAU,GAAGX,eAAe,GAAGA,eAAe,CAACY,QAAQ,CAACF,EAAE,CAAC,GAAG,KAAK;MAEzEH,KAAK,CAACM,IAAI,CAAC;QACPC,IAAI,EAAEL,IAAI;QACVC,EAAE;QACFC;MACJ,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,OAAOJ,KAAK;EAChB,CAAC,EAAE,CAACT,IAAI,EAAEE,eAAe,CAAC,CAAC;EAE3B,MAAMe,kBAAkB,GAAG,IAAAT,cAAO,EAAC,MAAM;IACrC,IAAIJ,iCAAiC,IAAI,CAACF,eAAe,IAAIA,eAAe,CAACgB,MAAM,KAAK,CAAC,EAAE;MACvF,OAAOpB,UAAU;IACrB;IAEA,IAAIqB,UAAU,GAAG,CAAC;IAClB,IAAIC,OAAO,GAAG,EAAE;IAEhB,MAAMC,eAAe,GAAGnB,eAAe,CAACgB,MAAM,GAAG,CAAC;IAElDlB,IAAI,CAACU,OAAO,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAG,CAAC,KAAK;MAC3B,IAAI,CAACO,UAAU,GAAG,CAAC,IAAIE,eAAe,IAAI,CAAC,KAAKnB,eAAe,aAAfA,eAAe,eAAfA,eAAe,CAAEY,QAAQ,CAACF,EAAE,CAAC,EAAE;QAC3EO,UAAU,IAAI,CAAC;QACfC,OAAO,IAAIA,OAAO,CAACF,MAAM,KAAK,CAAC,GAAG,GAAGP,IAAI,EAAE,GAAG,KAAKA,IAAI,EAAE;MAC7D;IACJ,CAAC,CAAC;IAEF,IAAIU,eAAe,GAAG,CAAC,EAAE;MACrBD,OAAO,IAAI,KAAKC,eAAe,UAAU;IAC7C;IAEA,OAAOD,OAAO;EAClB,CAAC,EAAE,CAACtB,UAAU,EAAEE,IAAI,EAAEE,eAAe,EAAEE,iCAAiC,CAAC,CAAC;EAE1E,MAAMkB,WAAW,GAAGA,CAAA,KAAM;IACtB,KAAK,IAAAC,uBAAY,EAAC;MACdZ,IAAI,EAAEL,KAAK,GAAG,OAAOA,KAAK,OAAO,GAAGkB,SAAS;MAC7CC,IAAI,EAAEC,qBAAU,CAACC,MAAM;MACvB3B,IAAI,EAAEO,QAAQ;MACdqB,WAAW,EAAEzB,sBAAsB;MACnC0B,SAAS,EAAExB;IACf,CAAC,CAAC,CACGyB,IAAI,CAAC,CAAC,CACNC,IAAI,CAAEC,MAAM,IAAK;MACd;MACA;MACA;MACA,IAAIA,MAAM,IAAIA,MAAM,CAACC,UAAU,KAAK,CAAC,IAAI,OAAOhC,QAAQ,KAAK,UAAU,EAAE;QACrE;QACA;QACA;QACAA,QAAQ,CAAE+B,MAAM,CAACA,MAAM,CAAcE,GAAG,CAACC,MAAM,CAAC,CAAC;MACrD;IACJ,CAAC,CAAC;EACV,CAAC;EAED,oBACI/D,MAAA,CAAAO,OAAA,CAAAyD,aAAA,CAAC5D,aAAA,CAAA6D,kBAAkB,qBACfjE,MAAA,CAAAO,OAAA,CAAAyD,aAAA,CAAC9D,OAAA,CAAAK,OAAM;IACH2D,OAAO,EAAEhB,WAAY;IACrBvB,UAAU,EAAEA,UAAW;IACvBwC,WAAW;IACXC,4BAA4B,EAAE;EAAM,GAEnCvB,kBACG,CACQ,CAAC;AAE7B,CAAC;AAEDpB,YAAY,CAAC4C,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhE,OAAA,GAE3BkB,YAAY","ignoreList":[]}

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

@@ -80,7 +80,7 @@ const Truncation = ({
     (0, _truncation2.truncateElement)(pseudoChildrenRef.current, collapsedHeight);
     setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);
     setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);
-  }, [collapsedHeight, pseudoChildrenRef, children]);
+  }, [collapsedHeight, pseudoChildrenRef]);
 
   // Checks if the clamp should be shown
   (0, _react.useEffect)(() => {