@chayns-components/core 5.0.0-beta.666 → 5.0.0-beta.669

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

@@ -110,6 +110,9 @@ const ComboBox = ({
     const isAtLeastOneItemWithImageGiven = list.some(({
       imageUrl
     }) => imageUrl);
+    const isAtLeastOneItemWithIconGiven = list.some(({
+      icons
+    }) => icons);
     const textArray = list.map(({
       text
     }) => text);
@@ -120,10 +123,11 @@ const ComboBox = ({
 
     // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left
     // 32px = image width + flex gap
+    // 40px = icon width + flex gap
     setMinWidth((0, _calculate.calculateContentWidth)([...list, {
       text: placeholder,
       value: 'placeholder'
-    }]) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));
+    }]) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0) + (isAtLeastOneItemWithIconGiven ? 40 : 0));
   }, [list, maxHeight, placeholder]);
 
   /**
@@ -142,6 +146,15 @@ const ComboBox = ({
     }
     return undefined;
   }, [item, selectedItem]);
+  const placeholderIcon = (0, _react.useMemo)(() => {
+    if (selectedItem) {
+      return selectedItem.icons;
+    }
+    if (item) {
+      return item.icons;
+    }
+    return undefined;
+  }, [item, selectedItem]);
 
   /**
    * This function resets the placeholder
@@ -167,11 +180,13 @@ const ComboBox = ({
   const comboBoxBody = (0, _react.useMemo)(() => {
     const items = list.map(({
       imageUrl,
+      icons,
       suffixElement,
       text,
       value
     }) => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.default, {
       imageUrl: imageUrl,
+      icons: icons,
       isSelected: selectedItem ? value === selectedItem.value : false,
       key: value,
       id: value,
@@ -222,9 +237,11 @@ const ComboBox = ({
   }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, null, placeholderImageUrl && /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
     shouldShowRoundImage: shouldShowRoundImage
+  }), placeholderIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: placeholderIcon
   }), placeholderText, item && item.suffixElement && item.suffixElement), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-chevron-down']
-  }))), direction === _comboBox.ComboBoxDirection.BOTTOM && comboBoxBody), [comboBoxBody, direction, handleHeaderClick, isAnimating, isDisabled, isTouch, item, minWidth, placeholderImageUrl, placeholderText, shouldShowRoundImage]);
+  }))), direction === _comboBox.ComboBoxDirection.BOTTOM && comboBoxBody), [comboBoxBody, direction, handleHeaderClick, isAnimating, isDisabled, isTouch, item, minWidth, placeholderIcon, placeholderImageUrl, placeholderText, shouldShowRoundImage]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_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","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","styledComboBoxElementRef","useRef","contentRef","browser","getDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","find","value","String","replace","isAtLeastOneItemWithImageGiven","some","imageUrl","textArray","map","text","contentHeight","calculateContentHeight","maxHeightInPixels","getMaxHeightInPixels","body","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","suffixElement","createElement","isSelected","animate","height","opacity","style","TOP","transform","StyledMotionComboBoxBody","$browser","name","$overflowY","initial","$maxHeight","$minWidth","$direction","transition","duration","ref","StyledComboBox","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","icons","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n    calculateContentHeight,\n    calculateContentWidth,\n    getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    imageUrl?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\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    list: IComboBoxItem[];\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\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\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\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = getDevice();\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    /**\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 (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                const newSelectedItem = list.find(\n                    ({ value }) => String(value) === id.replace('combobox-item__', ''),\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, list]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n        const textArray = list.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        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        setMinWidth(\n            calculateContentWidth([...list, { text: placeholder, value: 'placeholder' }]) +\n                45 +\n                (isAtLeastOneItemWithImageGiven ? 32 : 0),\n        );\n    }, [list, maxHeight, placeholder]);\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    /**\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            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = list.map(({ imageUrl, suffixElement, text, value }) => (\n            <ComboBoxItem\n                imageUrl={imageUrl}\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\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                $browser={browser?.name}\n                animate={animate}\n                $overflowY={overflowY}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n                tabIndex={0}\n                ref={contentRef}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        overflowY,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={styledComboBoxElementRef}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\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                        {placeholderText}\n                        {item && item.suffixElement && item.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_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","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","styledComboBoxElementRef","useRef","contentRef","browser","getDevice","isTouch","getIsTouch","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","element","id","newSelectedItem","find","value","String","replace","isAtLeastOneItemWithImageGiven","some","imageUrl","isAtLeastOneItemWithIconGiven","icons","textArray","map","text","contentHeight","calculateContentHeight","maxHeightInPixels","getMaxHeightInPixels","body","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderIcon","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","suffixElement","createElement","isSelected","animate","height","opacity","style","TOP","transform","StyledMotionComboBoxBody","$browser","name","$overflowY","initial","$maxHeight","$minWidth","$direction","transition","duration","ref","StyledComboBox","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n    calculateContentHeight,\n    calculateContentWidth,\n    getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\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 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    list: IComboBoxItem[];\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\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\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\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = getDevice();\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    /**\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 (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                const newSelectedItem = list.find(\n                    ({ value }) => String(value) === id.replace('combobox-item__', ''),\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, list]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = list.some(({ icons }) => icons);\n\n        const textArray = list.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        // 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            calculateContentWidth([...list, { text: placeholder, value: 'placeholder' }]) +\n                45 +\n                (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [list, maxHeight, placeholder]);\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            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = 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\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                $browser={browser?.name}\n                animate={animate}\n                $overflowY={overflowY}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n                tabIndex={0}\n                ref={contentRef}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        overflowY,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={styledComboBoxElementRef}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\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                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _index = require("../../../index");
 var _environment = require("../../../utils/environment");
 var _ComboBoxItem = require("./ComboBoxItem.styles");
 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); }
@@ -12,6 +13,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const ComboBoxItem = ({
   imageUrl,
   isSelected,
+  icons,
   onSelect,
   shouldShowRoundImage,
   suffixElement,
@@ -36,7 +38,9 @@ const ComboBoxItem = ({
   }, imageUrl && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemImage, {
     src: imageUrl,
     $shouldShowRoundImage: shouldShowRoundImage
-  }), text, suffixElement), [handleItemClick, id, imageUrl, isSelected, isTouch, shouldShowRoundImage, suffixElement, text]);
+  }), icons && /*#__PURE__*/_react.default.createElement(_index.Icon, {
+    icons: icons
+  }), text, suffixElement), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, shouldShowRoundImage, 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","_ComboBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBoxItem","imageUrl","isSelected","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 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    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    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                {text}\n                {suffixElement}\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,aAAA,GAAAF,OAAA;AAAoF,SAAAG,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,SAAAL,wBAAAK,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;AAapF,MAAMW,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,oBAAoB;EACpBC,aAAa;EACbC,IAAI;EACJC,EAAE;EACFC;AACJ,CAAC,KAAK;EACF,MAAMC,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtCP,QAAQ,CAAC;MAAEG,IAAI;MAAEE,KAAK;MAAEH,aAAa;MAAEJ;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEE,QAAQ,EAAEE,aAAa,EAAEC,IAAI,EAAEE,KAAK,CAAC,CAAC;EAEpD,MAAMG,OAAO,GAAG,IAAAC,uBAAU,EAAC,CAAC;EAE5B,OAAO,IAAAC,cAAO,EACV,mBACItC,MAAA,CAAAW,OAAA,CAAA4B,aAAA,CAACnC,aAAA,CAAAoC,kBAAkB;IACfR,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGS,MAAM,CAACT,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEU,OAAO,EAAER,eAAgB;IACzBS,QAAQ,EAAEP,OAAQ;IAClBQ,WAAW,EAAEjB;EAAW,GAEvBD,QAAQ,iBACL1B,MAAA,CAAAW,OAAA,CAAA4B,aAAA,CAACnC,aAAA,CAAAyC,uBAAuB;IACpBC,GAAG,EAAEpB,QAAS;IACdqB,qBAAqB,EAAElB;EAAqB,CAC/C,CACJ,EACAE,IAAI,EACJD,aACe,CACvB,EACD,CACII,eAAe,EACfF,EAAE,EACFN,QAAQ,EACRC,UAAU,EACVS,OAAO,EACPP,oBAAoB,EACpBC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDN,YAAY,CAACuB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAE3Bc,YAAY","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_index","_environment","_ComboBoxItem","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","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","Icon","displayName","_default","exports"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { Icon } from '../../../index';\nimport { getIsTouch } from '../../../utils/environment';\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":[]}

package/lib/cjs/components/slider/Slider.styles.js

@@ -125,6 +125,7 @@ const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.
                 left: 0;
                 position: absolute;
                 right: 0;
+                border-radius: 3px;
                 top: 0;
                 z-index: -1;
             }

package/lib/cjs/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","left","$isBigSlider","css","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth / 2}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number; $isBigSlider: boolean }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n    style: {\n        left: `${$position}px`,\n    },\n}))`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n\n    ${({ $isBigSlider }) =>\n        $isBigSlider &&\n        css`\n            top: -30px;\n\n            &::after {\n                background-color: inherit;\n                border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n                border-right: 1px solid rgba(0, 0, 0, 0.1);\n                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n                content: '';\n                height: 14px;\n                position: absolute;\n                width: 14px;\n                z-index: -2;\n\n                transform: rotate(225deg);\n                bottom: -7px;\n            }\n\n            &::before {\n                background-color: inherit;\n                bottom: 0;\n                content: '';\n                left: 0;\n                position: absolute;\n                right: 0;\n                top: 0;\n                z-index: -1;\n            }\n        `}\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","left","$isBigSlider","css","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth / 2}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number; $isBigSlider: boolean }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n    style: {\n        left: `${$position}px`,\n    },\n}))`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n\n    ${({ $isBigSlider }) =>\n        $isBigSlider &&\n        css`\n            top: -30px;\n\n            &::after {\n                background-color: inherit;\n                border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n                border-right: 1px solid rgba(0, 0, 0, 0.1);\n                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n                content: '';\n                height: 14px;\n                position: absolute;\n                width: 14px;\n                z-index: -2;\n\n                transform: rotate(225deg);\n                bottom: -7px;\n            }\n\n            &::before {\n                background-color: inherit;\n                bottom: 0;\n                content: '';\n                left: 0;\n                position: absolute;\n                right: 0;\n                border-radius: 3px;\n                top: 0;\n                z-index: -1;\n            }\n        `}\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -106,10 +106,16 @@ const ComboBox = _ref => {
       } = _ref3;
       return imageUrl;
     });
-    const textArray = list.map(_ref4 => {
+    const isAtLeastOneItemWithIconGiven = list.some(_ref4 => {
       let {
-        text
+        icons
       } = _ref4;
+      return icons;
+    });
+    const textArray = list.map(_ref5 => {
+      let {
+        text
+      } = _ref5;
       return text;
     });
     const contentHeight = calculateContentHeight(textArray);
@@ -119,10 +125,11 @@ const ComboBox = _ref => {
 
     // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left
     // 32px = image width + flex gap
+    // 40px = icon width + flex gap
     setMinWidth(calculateContentWidth([...list, {
       text: placeholder,
       value: 'placeholder'
-    }]) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));
+    }]) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0) + (isAtLeastOneItemWithIconGiven ? 40 : 0));
   }, [list, maxHeight, placeholder]);
 
   /**
@@ -141,6 +148,15 @@ const ComboBox = _ref => {
     }
     return undefined;
   }, [item, selectedItem]);
+  const placeholderIcon = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.icons;
+    }
+    if (item) {
+      return item.icons;
+    }
+    return undefined;
+  }, [item, selectedItem]);
 
   /**
    * This function resets the placeholder
@@ -164,15 +180,17 @@ const ComboBox = _ref => {
     }
   }, [isDisabled]);
   const comboBoxBody = useMemo(() => {
-    const items = list.map(_ref5 => {
+    const items = list.map(_ref6 => {
       let {
         imageUrl,
+        icons,
         suffixElement,
         text,
         value
-      } = _ref5;
+      } = _ref6;
       return /*#__PURE__*/React.createElement(ComboBoxItem, {
         imageUrl: imageUrl,
+        icons: icons,
         isSelected: selectedItem ? value === selectedItem.value : false,
         key: value,
         id: value,
@@ -224,9 +242,11 @@ const ComboBox = _ref => {
   }, /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, null, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
     src: placeholderImageUrl,
     shouldShowRoundImage: shouldShowRoundImage
+  }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
+    icons: placeholderIcon
   }), placeholderText, item && item.suffixElement && item.suffixElement), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-chevron-down']
-  }))), direction === ComboBoxDirection.BOTTOM && comboBoxBody), [comboBoxBody, direction, handleHeaderClick, isAnimating, isDisabled, isTouch, item, minWidth, placeholderImageUrl, placeholderText, shouldShowRoundImage]);
+  }))), direction === ComboBoxDirection.BOTTOM && comboBoxBody), [comboBoxBody, direction, handleHeaderClick, isAnimating, isDisabled, isTouch, item, minWidth, placeholderIcon, placeholderImageUrl, placeholderText, shouldShowRoundImage]);
 };
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","find","_ref2","value","String","replace","isAtLeastOneItemWithImageGiven","some","_ref3","imageUrl","textArray","map","_ref4","text","contentHeight","maxHeightInPixels","body","push","placeholderImageUrl","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref5","suffixElement","createElement","isSelected","animate","height","opacity","style","TOP","transform","$browser","name","$overflowY","initial","$maxHeight","$minWidth","$direction","transition","duration","ref","onClick","$isOpen","$isTouch","$isDisabled","src","icons","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n    calculateContentHeight,\n    calculateContentWidth,\n    getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    imageUrl?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\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    list: IComboBoxItem[];\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\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\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\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = getDevice();\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    /**\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 (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                const newSelectedItem = list.find(\n                    ({ value }) => String(value) === id.replace('combobox-item__', ''),\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, list]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n        const textArray = list.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        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        setMinWidth(\n            calculateContentWidth([...list, { text: placeholder, value: 'placeholder' }]) +\n                45 +\n                (isAtLeastOneItemWithImageGiven ? 32 : 0),\n        );\n    }, [list, maxHeight, placeholder]);\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    /**\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            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = list.map(({ imageUrl, suffixElement, text, value }) => (\n            <ComboBoxItem\n                imageUrl={imageUrl}\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\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                $browser={browser?.name}\n                animate={animate}\n                $overflowY={overflowY}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n                tabIndex={0}\n                ref={contentRef}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        overflowY,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={styledComboBoxElementRef}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\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                        {placeholderText}\n                        {item && item.suffixElement && item.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","find","_ref2","value","String","replace","isAtLeastOneItemWithImageGiven","some","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","textArray","map","_ref5","text","contentHeight","maxHeightInPixels","body","push","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref6","suffixElement","createElement","isSelected","animate","height","opacity","style","TOP","transform","$browser","name","$overflowY","initial","$maxHeight","$minWidth","$direction","transition","duration","ref","onClick","$isOpen","$isTouch","$isDisabled","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n    calculateContentHeight,\n    calculateContentWidth,\n    getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\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 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    list: IComboBoxItem[];\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\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\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\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = getDevice();\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    /**\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 (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                const newSelectedItem = list.find(\n                    ({ value }) => String(value) === id.replace('combobox-item__', ''),\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, list]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = list.some(({ icons }) => icons);\n\n        const textArray = list.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        // 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            calculateContentWidth([...list, { text: placeholder, value: 'placeholder' }]) +\n                45 +\n                (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [list, maxHeight, placeholder]);\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            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = 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\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                $browser={browser?.name}\n                animate={animate}\n                $overflowY={overflowY}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n                tabIndex={0}\n                ref={contentRef}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        overflowY,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={styledComboBoxElementRef}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\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                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,10 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
+import { Icon } from '../../../index';
 import { getIsTouch } from '../../../utils/environment';
 import { StyledComboBoxItem, StyledComboBoxItemImage } from './ComboBoxItem.styles';
 const ComboBoxItem = _ref => {
   let {
     imageUrl,
     isSelected,
+    icons,
     onSelect,
     shouldShowRoundImage,
     suffixElement,
@@ -29,7 +31,9 @@ const ComboBoxItem = _ref => {
   }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
     src: imageUrl,
     $shouldShowRoundImage: shouldShowRoundImage
-  }), text, suffixElement), [handleItemClick, id, imageUrl, isSelected, isTouch, shouldShowRoundImage, suffixElement, text]);
+  }), icons && /*#__PURE__*/React.createElement(Icon, {
+    icons: icons
+  }), text, suffixElement), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, shouldShowRoundImage, 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","StyledComboBoxItem","StyledComboBoxItemImage","ComboBoxItem","_ref","imageUrl","isSelected","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 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    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    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                {text}\n                {suffixElement}\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\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;AAEvD,SAASC,kBAAkB,EAAEC,uBAAuB,QAAQ,uBAAuB;AAanF,MAAMC,YAAmC,GAAGC,IAAA,IAStC;EAAA,IATuC;IACzCC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,oBAAoB;IACpBC,aAAa;IACbC,IAAI;IACJC,EAAE;IACFC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAMS,eAAe,GAAGf,WAAW,CAAC,MAAM;IACtCS,QAAQ,CAAC;MAAEG,IAAI;MAAEE,KAAK;MAAEH,aAAa;MAAEJ;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEE,QAAQ,EAAEE,aAAa,EAAEC,IAAI,EAAEE,KAAK,CAAC,CAAC;EAEpD,MAAME,OAAO,GAAGd,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAAkB,aAAA,CAACd,kBAAkB;IACfU,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,EAAEb;EAAW,GAEvBD,QAAQ,iBACLR,KAAA,CAAAkB,aAAA,CAACb,uBAAuB;IACpBkB,GAAG,EAAEf,QAAS;IACdgB,qBAAqB,EAAEb;EAAqB,CAC/C,CACJ,EACAE,IAAI,EACJD,aACe,CACvB,EACD,CACII,eAAe,EACfF,EAAE,EACFN,QAAQ,EACRC,UAAU,EACVQ,OAAO,EACPN,oBAAoB,EACpBC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDP,YAAY,CAACmB,WAAW,GAAG,cAAc;AAEzC,eAAenB,YAAY","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","Icon","getIsTouch","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 { Icon } from '../../../index';\nimport { getIsTouch } from '../../../utils/environment';\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,IAAI,QAAQ,gBAAgB;AACrC,SAASC,UAAU,QAAQ,4BAA4B;AAEvD,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,GAAGf,UAAU,CAAC,CAAC;EAE5B,OAAOF,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,CAACjB,IAAI;IAACQ,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":[]}

package/lib/esm/components/slider/Slider.styles.js

@@ -125,6 +125,7 @@ export const StyledSliderThumb = styled.div.attrs(_ref2 => {
                 left: 0;
                 position: absolute;
                 right: 0;
+                border-radius: 3px;
                 top: 0;
                 z-index: -1;
             }

package/lib/esm/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["motion","styled","css","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","left","_ref3","$isBigSlider","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth / 2}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number; $isBigSlider: boolean }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n    style: {\n        left: `${$position}px`,\n    },\n}))`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n\n    ${({ $isBigSlider }) =>\n        $isBigSlider &&\n        css`\n            top: -30px;\n\n            &::after {\n                background-color: inherit;\n                border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n                border-right: 1px solid rgba(0, 0, 0, 0.1);\n                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n                content: '';\n                height: 14px;\n                position: absolute;\n                width: 14px;\n                z-index: -2;\n\n                transform: rotate(225deg);\n                bottom: -7px;\n            }\n\n            &::before {\n                background-color: inherit;\n                bottom: 0;\n                content: '';\n                left: 0;\n                position: absolute;\n                right: 0;\n                top: 0;\n                z-index: -1;\n            }\n        `}\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,YAAY,GAAGF,MAAM,CAACG,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACD,MAAM,CAACM,KAAK,CAAC,CAACC,KAAK,CACvDC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,GAAG,CAAC,KAAK;MAC1CO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,iBAAiB,GAAGnB,MAAM,CAACG,GAAG,CAACG,KAAK,CAAyBc,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM;IAC1FN,KAAK,EAAE;MACHQ,IAAI,EAAE,GAAGD,SAAS;IACtB;EACJ,CAAC;AAAA,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZvB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMwB,sBAAsB,GAAGzB,MAAM,CAAC0B,IAAiC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["motion","styled","css","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","left","_ref3","$isBigSlider","StyledSliderThumbLabel","span"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth / 2}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number; $isBigSlider: boolean }>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(({ $position }) => ({\n    style: {\n        left: `${$position}px`,\n    },\n}))`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n\n    ${({ $isBigSlider }) =>\n        $isBigSlider &&\n        css`\n            top: -30px;\n\n            &::after {\n                background-color: inherit;\n                border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n                border-right: 1px solid rgba(0, 0, 0, 0.1);\n                box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n                content: '';\n                height: 14px;\n                position: absolute;\n                width: 14px;\n                z-index: -2;\n\n                transform: rotate(225deg);\n                bottom: -7px;\n            }\n\n            &::before {\n                background-color: inherit;\n                bottom: 0;\n                content: '';\n                left: 0;\n                position: absolute;\n                right: 0;\n                border-radius: 3px;\n                top: 0;\n                z-index: -1;\n            }\n        `}\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<unknown>;\n\nexport const StyledSliderThumbLabel = styled.span<StyledSliderThumbLabelProps>`\n    pointer-events: none;\n    color: #222;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,YAAY,GAAGF,MAAM,CAACG,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACD,MAAM,CAACM,KAAK,CAAC,CAACC,KAAK,CACvDC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,GAAG,CAAC,KAAK;MAC1CO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,iBAAiB,GAAGnB,MAAM,CAACG,GAAG,CAACG,KAAK,CAAyBc,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM;IAC1FN,KAAK,EAAE;MACHQ,IAAI,EAAE,GAAGD,SAAS;IACtB;EACJ,CAAC;AAAA,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZvB,GAAG;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMwB,sBAAsB,GAAGzB,MAAM,CAAC0B,IAAiC;AAC9E;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import { FC, type CSSProperties, type ReactNode } from 'react';
 import { ComboBoxDirection } from '../../types/comboBox';
 export interface IComboBoxItem {
+    icons?: string[];
     imageUrl?: string;
     suffixElement?: ReactNode;
     text: string;

package/lib/types/components/combobox/combobox-item/ComboBoxItem.d.ts

@@ -5,6 +5,7 @@ export type ComboBoxItemProps = {
     isSelected: boolean;
     onSelect: (itemToSelect: IComboBoxItem) => void;
     shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];
+    icons?: IComboBoxItem['icons'];
     suffixElement?: ReactNode;
     text: IComboBoxItem['text'];
     value: IComboBoxItem['value'];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.666",
+    "version": "5.0.0-beta.669",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d708d73f9a9ce2eab6579f9ce5e3a02cd5b5cc9f"
+    "gitHead": "4df6c64109152115a9ed04b2b957506557587c50"
 }