@chayns-components/core 5.0.0-beta.487 → 5.0.0-beta.488

package/lib/components/combobox/ComboBox.js

@@ -82,10 +82,8 @@ const ComboBox = _ref => {
    * This function sets the external selected item
    */
   useEffect(() => {
-    if (selectedItem) {
-      setItem(selectedItem);
-      setIsAnimating(false);
-    }
+    setIsAnimating(false);
+    setItem(selectedItem);
   }, [selectedItem]);
   const placeholderImageUrl = useMemo(() => {
     if (selectedItem) {

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","ComboBoxDirection","calculateContentHeight","calculateContentWidth","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","height","setHeight","ref","browser","isMobile","chayns","env","handleClick","event","current","contains","target","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","push","placeholderImageUrl","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","suffixElement","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","$browser","name","$height","initial","$maxHeight","$minWidth","$direction","transition","duration","onClick","$isOpen","$isMobile","$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 { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\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 = '300px',\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 [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\n\n    const { isMobile } = chayns.env;\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref],\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, ref]);\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    /**\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        setHeight(calculateContentHeight(textArray));\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(calculateContentWidth(list) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            setItem(selectedItem);\n            setIsAnimating(false);\n        }\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                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                $height={height}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        height,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isMobile={isMobile}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderText}\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            isMobile,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAERC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,sBAAsB,EAAEC,qBAAqB,QAAQ,uBAAuB;AACrF,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SACIC,cAAc,EACdC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wBAAwB,QACrB,mBAAmB;AA4C1B,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,SAAS,GAAGb,iBAAiB,CAACc,MAAM;IACpCC,UAAU,GAAG,KAAK;IAClBC,IAAI;IACJC,SAAS,GAAG,OAAO;IACnBC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,IAAI,EAAEC,OAAO,CAAC,GAAGxB,QAAQ,CAAgB,CAAC;EACjD,MAAM,CAACyB,WAAW,EAAEC,cAAc,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAAC2B,QAAQ,EAAEC,WAAW,CAAC,GAAG5B,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAM,CAAC6B,MAAM,EAAEC,SAAS,CAAC,GAAG9B,QAAQ,CAAC,CAAC,CAAC;EAEvC,MAAM+B,GAAG,GAAGhC,MAAM,CAAiB,IAAI,CAAC;EAExC,MAAM;IAAEiC;EAAQ,CAAC,GAAGtC,SAAS,CAAC,CAAC;EAE/B,MAAM;IAAEuC;EAAS,CAAC,GAAGC,MAAM,CAACC,GAAG;EAE/B,MAAMC,WAAW,GAAGxC,WAAW,CAC1ByC,KAAiB,IAAK;IACnB,IAAIN,GAAG,CAACO,OAAO,IAAI,CAACP,GAAG,CAACO,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EAAE;MAC5Dd,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACK,GAAG,CACR,CAAC;;EAED;AACJ;AACA;EACIlC,SAAS,CAAC,MAAM;IACZ4C,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEN,WAAW,CAAC;IAE/C,OAAO,MAAM;MACTK,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEP,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAEL,GAAG,CAAC,CAAC;;EAEtB;AACJ;AACA;EACI,MAAMa,qBAAqB,GAAGhD,WAAW,CACpCiD,YAA2B,IAAK;IAC7BrB,OAAO,CAACqB,YAAY,CAAC;IACrBnB,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIP,QAAQ,EAAE;MACVA,QAAQ,CAAC0B,YAAY,CAAC;IAC1B;EACJ,CAAC,EACD,CAAC1B,QAAQ,CACb,CAAC;;EAED;AACJ;AACA;EACItB,SAAS,CAAC,MAAM;IACZ,MAAMiD,8BAA8B,GAAG7B,IAAI,CAAC8B,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAS,CAAC,GAAAD,KAAA;MAAA,OAAKC,QAAQ;IAAA,EAAC;IAE5E,MAAMC,SAAS,GAAGjC,IAAI,CAACkC,GAAG,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI;IAAA,EAAC;IAE9CvB,SAAS,CAAC5B,sBAAsB,CAACgD,SAAS,CAAC,CAAC;IAE5CA,SAAS,CAACI,IAAI,CAAClC,WAAW,CAAC;;IAE3B;IACA;IACAQ,WAAW,CAACzB,qBAAqB,CAACc,IAAI,CAAC,GAAG,EAAE,IAAI6B,8BAA8B,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;EAC7F,CAAC,EAAE,CAAC7B,IAAI,EAAEG,WAAW,CAAC,CAAC;;EAEvB;AACJ;AACA;EACIvB,SAAS,CAAC,MAAM;IACZ,IAAIwB,YAAY,EAAE;MACdG,OAAO,CAACH,YAAY,CAAC;MACrBK,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EAAE,CAACL,YAAY,CAAC,CAAC;EAElB,MAAMkC,mBAAmB,GAAGzD,OAAO,CAAC,MAAM;IACtC,IAAIuB,YAAY,EAAE;MACd,OAAOA,YAAY,CAAC4B,QAAQ;IAChC;IAEA,IAAI1B,IAAI,EAAE;MACN,OAAOA,IAAI,CAAC0B,QAAQ;IACxB;IAEA,OAAOO,SAAS;EACpB,CAAC,EAAE,CAACjC,IAAI,EAAEF,YAAY,CAAC,CAAC;;EAExB;AACJ;AACA;EACI,MAAMoC,eAAe,GAAG3D,OAAO,CAAC,MAAM;IAClC,IAAIuD,IAAI,GAAGjC,WAAW;IAEtB,IAAIC,YAAY,EAAE;MACdgC,IAAI,GAAGhC,YAAY,CAACgC,IAAI;IAC5B,CAAC,MAAM,IAAI9B,IAAI,EAAE;MACb8B,IAAI,GAAG9B,IAAI,CAAC8B,IAAI;IACpB;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAC9B,IAAI,EAAEH,WAAW,EAAEC,YAAY,CAAC,CAAC;;EAErC;AACJ;AACA;EACI,MAAMqC,iBAAiB,GAAG9D,WAAW,CAAC,MAAM;IACxC,IAAI,CAACoB,UAAU,EAAE;MACbU,cAAc,CAAEiC,SAAS,IAAK,CAACA,SAAS,CAAC;IAC7C;EACJ,CAAC,EAAE,CAAC3C,UAAU,CAAC,CAAC;EAEhB,MAAM4C,YAAY,GAAG9D,OAAO,CAAC,MAAM;IAC/B,MAAM+D,KAAK,GAAG5C,IAAI,CAACkC,GAAG,CAACW,KAAA;MAAA,IAAC;QAAEb,QAAQ;QAAEc,aAAa;QAAEV,IAAI;QAAEW;MAAM,CAAC,GAAAF,KAAA;MAAA,oBAC5DnE,KAAA,CAAAsE,aAAA,CAAC5D,YAAY;QACT4C,QAAQ,EAAEA,QAAS;QACnBiB,UAAU,EAAE7C,YAAY,GAAG2C,KAAK,KAAK3C,YAAY,CAAC2C,KAAK,GAAG,KAAM;QAChEG,GAAG,EAAEH,KAAM;QACX7C,QAAQ,EAAEyB,qBAAsB;QAChCtB,oBAAoB,EAAEA,oBAAqB;QAC3CyC,aAAa,EAAEA,aAAc;QAC7BV,IAAI,EAAEA,IAAK;QACXW,KAAK,EAAEA;MAAM,CAChB,CAAC;IAAA,CACL,CAAC;IAEF,MAAMI,OAAO,GAAG3C,WAAW,GACrB;MAAEI,MAAM,EAAE,aAAa;MAAEwC,OAAO,EAAE;IAAE,CAAC,GACrC;MAAExC,MAAM,EAAE,CAAC;MAAEwC,OAAO,EAAE;IAAE,CAAC;IAE/B,MAAMC,KAAK,GACPxD,SAAS,KAAKb,iBAAiB,CAACsE,GAAG,GAAG;MAAEC,SAAS,EAAE;IAAoB,CAAC,GAAGhB,SAAS;IAExF,oBACI7D,KAAA,CAAAsE,aAAA,CAACtD,wBAAwB;MACrB8D,QAAQ,EAAEzC,OAAO,EAAE0C,IAAK;MACxBN,OAAO,EAAEA,OAAQ;MACjBO,OAAO,EAAE9C,MAAO;MAChB+C,OAAO,EAAE;QAAE/C,MAAM,EAAE,CAAC;QAAEwC,OAAO,EAAE;MAAE,CAAE;MACnCQ,UAAU,EAAE3D,SAAU;MACtB4D,SAAS,EAAEnD,QAAS;MACpB2C,KAAK,EAAEA,KAAM;MACbS,UAAU,EAAEjE,SAAU;MACtBkE,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI;IAAE,GAE7BpB,KACqB,CAAC;EAEnC,CAAC,EAAE,CACC7B,OAAO,EAAE0C,IAAI,EACb5D,SAAS,EACT8B,qBAAqB,EACrBf,MAAM,EACNJ,WAAW,EACXR,IAAI,EACJC,SAAS,EACTS,QAAQ,EACRN,YAAY,EACZC,oBAAoB,CACvB,CAAC;EAEF,OAAOxB,OAAO,CACV,mBACIH,KAAA,CAAAsE,aAAA,CAAC3D,cAAc;IAACyB,GAAG,EAAEA;EAAI,GACpBjB,SAAS,KAAKb,iBAAiB,CAACsE,GAAG,IAAIX,YAAY,eACpDjE,KAAA,CAAAsE,aAAA,CAAC1D,oBAAoB;IACjBwE,UAAU,EAAEjE,SAAU;IACtBgE,SAAS,EAAEnD,QAAS;IACpBuD,OAAO,EAAExB,iBAAkB;IAC3ByB,OAAO,EAAE1D,WAAY;IACrB2D,SAAS,EAAEnD,QAAS;IACpBoD,WAAW,EAAErE;EAAW,gBAExBrB,KAAA,CAAAsE,aAAA,CAACxD,yBAAyB,QACrB8C,mBAAmB,iBAChB5D,KAAA,CAAAsE,aAAA,CAACvD,8BAA8B;IAC3B4E,GAAG,EAAE/B,mBAAoB;IACzBjC,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EACAmC,eACsB,CAAC,eAC5B9D,KAAA,CAAAsE,aAAA,CAACzD,yBAAyB,qBACtBb,KAAA,CAAAsE,aAAA,CAAC7D,IAAI;IAACmF,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,EACtBzE,SAAS,KAAKb,iBAAiB,CAACc,MAAM,IAAI6C,YAC/B,CACnB,EACD,CACIA,YAAY,EACZ9C,SAAS,EACT4C,iBAAiB,EACjBjC,WAAW,EACXT,UAAU,EACViB,QAAQ,EACRN,QAAQ,EACR4B,mBAAmB,EACnBE,eAAe,EACfnC,oBAAoB,CAE5B,CAAC;AACL,CAAC;AAEDV,QAAQ,CAAC4E,WAAW,GAAG,UAAU;AAEjC,eAAe5E,QAAQ"}
+{"version":3,"file":"ComboBox.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","ComboBoxDirection","calculateContentHeight","calculateContentWidth","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","height","setHeight","ref","browser","isMobile","chayns","env","handleClick","event","current","contains","target","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","push","placeholderImageUrl","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","suffixElement","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","$browser","name","$height","initial","$maxHeight","$minWidth","$direction","transition","duration","onClick","$isOpen","$isMobile","$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 { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\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 = '300px',\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 [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\n\n    const { isMobile } = chayns.env;\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref],\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, ref]);\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    /**\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        setHeight(calculateContentHeight(textArray));\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(calculateContentWidth(list) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));\n    }, [list, 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                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                $height={height}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        height,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isMobile={isMobile}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderText}\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            isMobile,\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.487",
+    "version": "5.0.0-beta.488",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -45,7 +45,7 @@
         "@babel/preset-env": "^7.23.9",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.57",
+        "@types/react": "^18.2.60",
         "@types/react-dom": "^18.2.19",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.8",
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "23f9beee740014f841f790c74273d36a907c701b"
+    "gitHead": "6840671c95ab92f3f23b682ef0ec54fd9067a139"
 }