@chayns-components/core 5.0.0-beta.953 → 5.0.0-beta.955

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

@@ -51,6 +51,8 @@ const ComboBox = ({
   const [newContainer, setNewContainer] = (0, _react.useState)(container ?? null);
   const styledComboBoxElementRef = (0, _react.useRef)(null);
   const contentRef = (0, _react.useRef)(null);
+  const functions = (0, _chaynsApi.useFunctions)();
+  const values = (0, _chaynsApi.useValues)();
   const {
     browser
   } = (0, _chaynsApi.useDevice)();
@@ -193,13 +195,13 @@ const ComboBox = ({
       const prefixTextWidth = (0, _calculate.calculateContentWidth)([{
         text: prefix,
         value: 'prefix'
-      }]) + 5;
+      }], functions, values) + 5;
       prefixWidth = Math.max(prefixTextWidth, 32);
     }
     const baseWidth = (0, _calculate.calculateContentWidth)([...allItems, {
       text: placeholder,
       value: 'placeholder'
-    }, ...(selectedItem ? [selectedItem] : [])]);
+    }, ...(selectedItem ? [selectedItem] : [])], functions, values);
     const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
     let tmpMinWidth = calculatedWidth;
     let tmpBodyMinWidth = calculatedWidth;
@@ -212,13 +214,13 @@ const ComboBox = ({
 
     // Current item width settings
     else if (shouldUseCurrentItemWidth && internalSelectedItem) {
-      const itemWidth = (0, _calculate.calculateContentWidth)([internalSelectedItem]) + paddingWidth + imageWidth + iconWidth + prefixWidth;
+      const itemWidth = (0, _calculate.calculateContentWidth)([internalSelectedItem], functions, values) + paddingWidth + imageWidth + iconWidth + prefixWidth;
       tmpMinWidth = itemWidth;
       tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
     }
     setMinWidth(tmpMinWidth);
     setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
-  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);
+  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem, functions, values]);
 
   /**
    * This function sets the external selected item

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","useRef","contentRef","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleClick","useCallback","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","body","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","calculateContentWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","StyledComboBoxTopic","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if(container instanceof Element){\n            setNewContainer(container)\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some(\n            item => item?.imageUrl\n        );\n        const hasIcon = [selectedItem, ...allItems].some(\n            item => item?.icons\n        );\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth = calculateContentWidth([{ text: prefix, value: 'prefix' }]) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(selectedItem ? [selectedItem] : [])\n        ]);\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        if (!newContainer) {\n            return;\n        }\n\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                {placeholderText}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_comboBox","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBox","direction","ComboBoxDirection","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","useRef","contentRef","functions","useFunctions","values","useValues","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleClick","useCallback","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","getMaxHeightInPixels","body","handleKeyDown","key","_contentRef$current","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","_contentRef$current2","id","newSelectedItem","some","list","find","value","String","replace","_styledComboBoxElemen","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","calculateContentWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","StyledComboBoxTopic","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        if (!newContainer) {\n            return;\n        }\n\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                {placeholderText}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.js

@@ -26,6 +26,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   onChange,
   onFocus,
   onKeyDown,
+  onPaste,
   placeholder,
   rightElement,
   shouldShowOnlyBottomBorder,
@@ -122,6 +123,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       event.preventDefault();
       event.stopPropagation();
     },
+    onPaste: onPaste,
     ref: inputRef,
     type: type,
     value: value,

package/lib/cjs/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","color","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            onClick={(event) => {\n                                event.preventDefault();\n                                event.stopPropagation();\n                            }}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={\n                                shouldPreventPlaceholderAnimation\n                                    ? {\n                                          opacity: hasValue ? 0 : 1,\n                                      }\n                                    : {\n                                          fontSize:\n                                              hasValue &&\n                                              !shouldShowOnlyBottomBorder &&\n                                              !shouldRemainPlaceholder\n                                                  ? '9px'\n                                                  : `${Number(theme.fontSize)}px`,\n                                      }\n                            }\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{\n                                type: 'tween',\n                                duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                            }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","opacity","fontSize","Number","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","icons","color","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            onClick={(event) => {\n                                event.preventDefault();\n                                event.stopPropagation();\n                            }}\n                            onPaste={onPaste}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={\n                                shouldPreventPlaceholderAnimation\n                                    ? {\n                                          opacity: hasValue ? 0 : 1,\n                                      }\n                                    : {\n                                          fontSize:\n                                              hasValue &&\n                                              !shouldShowOnlyBottomBorder &&\n                                              !shouldRemainPlaceholder\n                                                  ? '9px'\n                                                  : `${Number(theme.fontSize)}px`,\n                                      }\n                            }\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{\n                                type: 'tween',\n                                duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                            }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/utils/calculate.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _server = require("react-dom/server");
 var _ColorSchemeProvider = _interopRequireDefault(require("../components/color-scheme-provider/ColorSchemeProvider"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const calculateContentWidth = list => {
+const calculateContentWidth = (list, functions, values) => {
   const length = [];
   list.forEach(({
     suffixElement,
@@ -33,12 +33,9 @@ const calculateContentWidth = list => {
     if (suffixElement) {
       // ColorSchemeProvider is used to prevent missing scheme context error.
       // Due to the fact that the element is never rendered visible, the values are irrelevant.
-      div.innerHTML += (0, _server.renderToString)(
-      /*#__PURE__*/
-      // @ts-expect-error: It's a fake chayns provider because it's not necessary here to have the correct data
-      _react.default.createElement(_chaynsApi.ChaynsProvider, {
-        data: {},
-        functions: {},
+      div.innerHTML += (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_chaynsApi.ChaynsProvider, {
+        data: values,
+        functions: functions,
         isModule: true
       }, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
         color: "#005EB8",

package/lib/cjs/utils/calculate.js.map

@@ -1 +1 @@
-{"version":3,"file":"calculate.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_server","_ColorSchemeProvider","e","__esModule","default","calculateContentWidth","list","length","forEach","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","renderToString","ChaynsProvider","data","functions","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","exports","calculateBiggestWidth","elements","container","padding","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","span","height","getMaxHeightInPixels","maxHeight","rootElement","tempElement","getBoundingClientRect"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (list: IComboBoxItem[]) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                // @ts-expect-error: It's a fake chayns provider because it's not necessary here to have the correct data\n                <ChaynsProvider data={{}} functions={{}} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\nexport const getHeightOfSingleTextLine = () => {\n    const span = document.createElement('span');\n\n    span.innerText = 'A';\n\n    document.body.appendChild(span);\n\n    const height = span.offsetHeight;\n\n    document.body.removeChild(span);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: HTMLElement,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"calculate.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_server","_ColorSchemeProvider","e","__esModule","default","calculateContentWidth","list","functions","values","length","forEach","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","renderToString","ChaynsProvider","data","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","exports","calculateBiggestWidth","elements","container","padding","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","span","height","getMaxHeightInPixels","maxHeight","rootElement","tempElement","getBoundingClientRect"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider, ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (\n    list: IComboBoxItem[],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                <ChaynsProvider data={values} functions={functions} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\nexport const getHeightOfSingleTextLine = () => {\n    const span = document.createElement('span');\n\n    span.innerText = 'A';\n\n    document.body.appendChild(span);\n\n    const height = span.offsetHeight;\n\n    document.body.removeChild(span);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: HTMLElement,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import { useDevice } from 'chayns-api';
+import { useDevice, useFunctions, useValues } from 'chayns-api';
 import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -43,6 +43,8 @@ const ComboBox = _ref => {
   const [newContainer, setNewContainer] = useState(container ?? null);
   const styledComboBoxElementRef = useRef(null);
   const contentRef = useRef(null);
+  const functions = useFunctions();
+  const values = useValues();
   const {
     browser
   } = useDevice();
@@ -185,13 +187,13 @@ const ComboBox = _ref => {
       const prefixTextWidth = calculateContentWidth([{
         text: prefix,
         value: 'prefix'
-      }]) + 5;
+      }], functions, values) + 5;
       prefixWidth = Math.max(prefixTextWidth, 32);
     }
     const baseWidth = calculateContentWidth([...allItems, {
       text: placeholder,
       value: 'placeholder'
-    }, ...(selectedItem ? [selectedItem] : [])]);
+    }, ...(selectedItem ? [selectedItem] : [])], functions, values);
     const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;
     let tmpMinWidth = calculatedWidth;
     let tmpBodyMinWidth = calculatedWidth;
@@ -204,13 +206,13 @@ const ComboBox = _ref => {
 
     // Current item width settings
     else if (shouldUseCurrentItemWidth && internalSelectedItem) {
-      const itemWidth = calculateContentWidth([internalSelectedItem]) + paddingWidth + imageWidth + iconWidth + prefixWidth;
+      const itemWidth = calculateContentWidth([internalSelectedItem], functions, values) + paddingWidth + imageWidth + iconWidth + prefixWidth;
       tmpMinWidth = itemWidth;
       tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;
     }
     setMinWidth(tmpMinWidth);
     setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);
-  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);
+  }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem, functions, values]);
 
   /**
    * This function sets the external selected item

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","contentRef","browser","isTouch","areaProvider","shouldChangeColor","current","el","element","closest","Element","handleClick","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","_ref3","handleHeaderClick","comboBoxGroups","map","createElement","groupName","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","disabled","onChange","onBlur","onFocus","$shouldReduceOpacity","src","$shouldShowRoundImage","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if(container instanceof Element){\n            setNewContainer(container)\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some(\n            item => item?.imageUrl\n        );\n        const hasIcon = [selectedItem, ...allItems].some(\n            item => item?.icons\n        );\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth = calculateContentWidth([{ text: prefix, value: 'prefix' }]) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth([\n            ...allItems,\n            { text: placeholder, value: 'placeholder' },\n            ...(selectedItem ? [selectedItem] : [])\n        ]);\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem]) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [lists, placeholder, shouldUseFullWidth, shouldUseCurrentItemWidth, internalSelectedItem, prefix, selectedItem]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        if (!newContainer) {\n            return;\n        }\n\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [bodyMinWidth, bodyStyles, browser?.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                {placeholderText}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","styledComboBoxElementRef","contentRef","functions","values","browser","isTouch","areaProvider","shouldChangeColor","current","el","element","closest","Element","handleClick","event","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","shouldPreventSelection","currentContent","scrollHeight","maxHeightInPixels","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","_ref3","handleHeaderClick","comboBoxGroups","map","createElement","groupName","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","disabled","onChange","onBlur","onFocus","$shouldReduceOpacity","src","$shouldShowRoundImage","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    ReactPortal,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n    shouldShowRoundImage?: boolean;\n}\n\nexport interface ComboBoxTextStyles {\n    tagName?: keyof ReactHTML;\n    styles?: CSSProperties;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n    textStyles?: ComboBoxTextStyles;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * The value of the optional input.\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement> /**\n     * Function to be executed when the optional input gets its focus.\n     */;\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => boolean | void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n    const [bodyMinWidth, setBodyMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n    const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    useEffect(() => {\n        if (styledComboBoxElementRef.current && !container) {\n            const el = styledComboBoxElementRef.current as HTMLElement;\n\n            const element = el.closest('.dialog-inner') || el.closest('body');\n\n            setNewContainer(element);\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container instanceof Element) {\n            setNewContainer(container);\n        }\n    }, [container]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current && newContainer) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = newContainer.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + newContainer.scrollLeft;\n            const y = comboBoxTop - containerTop + newContainer.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [newContainer, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            if (typeof onSelect === 'function') {\n                const shouldPreventSelection = onSelect(itemToSelect) === false;\n\n                if (shouldPreventSelection) return;\n            }\n\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n        const hasImage = [selectedItem, ...allItems].some((item) => item?.imageUrl);\n        const hasIcon = [selectedItem, ...allItems].some((item) => item?.icons);\n\n        const parentWidth =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        const paddingWidth = 45; // padding + border + arrow icon\n        const imageWidth = hasImage ? 32 : 0; // image width + gap if images present\n        const iconWidth = hasIcon ? 40 : 0; // icon width + gap if icons present\n\n        let prefixWidth = 0;\n\n        if (prefix) {\n            const prefixTextWidth =\n                calculateContentWidth([{ text: prefix, value: 'prefix' }], functions, values) + 5;\n\n            prefixWidth = Math.max(prefixTextWidth, 32);\n        }\n\n        const baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        const calculatedWidth = baseWidth + paddingWidth + imageWidth + iconWidth + prefixWidth;\n\n        let tmpMinWidth = calculatedWidth;\n        let tmpBodyMinWidth = calculatedWidth;\n\n        // Full width settings\n        if (shouldUseFullWidth) {\n            tmpMinWidth = parentWidth;\n\n            tmpBodyMinWidth =\n                parentWidth < calculatedWidth - 20 ? calculatedWidth - 20 : parentWidth;\n        }\n\n        // Current item width settings\n        else if (shouldUseCurrentItemWidth && internalSelectedItem) {\n            const itemWidth =\n                calculateContentWidth([internalSelectedItem], functions, values) +\n                paddingWidth +\n                imageWidth +\n                iconWidth +\n                prefixWidth;\n\n            tmpMinWidth = itemWidth;\n\n            tmpBodyMinWidth = itemWidth < calculatedWidth - 20 ? calculatedWidth - 20 : itemWidth;\n        }\n\n        setMinWidth(tmpMinWidth);\n        setBodyMinWidth(shouldUseCurrentItemWidth ? tmpMinWidth : tmpBodyMinWidth);\n    }, [\n        lists,\n        placeholder,\n        shouldUseFullWidth,\n        shouldUseCurrentItemWidth,\n        internalSelectedItem,\n        prefix,\n        selectedItem,\n        functions,\n        values,\n    ]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setInternalSelectedItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.imageUrl;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (internalSelectedItem) {\n            return internalSelectedItem.icons;\n        }\n\n        return undefined;\n    }, [internalSelectedItem, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (internalSelectedItem) {\n            text = internalSelectedItem.text;\n        }\n\n        return text;\n    }, [internalSelectedItem, placeholder, selectedItem]);\n\n    const shouldShowRoundPlaceholderImage = useMemo(() => {\n        const selectedItemList = lists.find((list) =>\n            list.list.some(\n                ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n            ),\n        );\n\n        return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n    }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map((list) => (\n                <div key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{list.groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                            textStyles={item.textStyles}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        if (!newContainer) {\n            return;\n        }\n\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyMinWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                newContainer,\n            ),\n        );\n    }, [\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowBigImage={shouldShowBigImage}\n                >\n                    <StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {prefix && <StyledComboBoxPrefix>{prefix}</StyledComboBoxPrefix>}\n                        {typeof inputValue === 'string' ? (\n                            <StyledComboBoxInput\n                                disabled={isDisabled}\n                                value={inputValue}\n                                onChange={onInputChange}\n                                onBlur={onInputBlur}\n                                onFocus={onInputFocus}\n                                placeholder={placeholderText}\n                            />\n                        ) : (\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                {placeholderText}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        )}\n                    </StyledComboBoxPrefixAndPlaceholderWrapper>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            inputValue,\n            onInputChange,\n            onInputBlur,\n            onInputFocus,\n            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/input/Input.js

@@ -18,6 +18,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     onChange,
     onFocus,
     onKeyDown,
+    onPaste,
     placeholder,
     rightElement,
     shouldShowOnlyBottomBorder,
@@ -110,6 +111,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       event.preventDefault();
       event.stopPropagation();
     },
+    onPaste: onPaste,
     ref: inputRef,
     type: type,
     value: value,

package/lib/esm/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            onClick={(event) => {\n                                event.preventDefault();\n                                event.stopPropagation();\n                            }}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={\n                                shouldPreventPlaceholderAnimation\n                                    ? {\n                                          opacity: hasValue ? 0 : 1,\n                                      }\n                                    : {\n                                          fontSize:\n                                              hasValue &&\n                                              !shouldShowOnlyBottomBorder &&\n                                              !shouldRemainPlaceholder\n                                                  ? '9px'\n                                                  : `${Number(theme.fontSize)}px`,\n                                      }\n                            }\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{\n                                type: 'tween',\n                                duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                            }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","InputSize","Input","_ref","ref","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","onPaste","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","shouldPreventPlaceholderAnimation","id","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","shouldChangeColor","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","right","top","bottom","Small","left","createElement","className","$isDisabled","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","color","wrong","displayName"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when content is pasted into the input field\n     */\n    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder animation should be prevented.\n     */\n    shouldPreventPlaceholderAnimation?: boolean;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            onPaste,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            shouldPreventPlaceholderAnimation = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder && !shouldPreventPlaceholderAnimation) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [\n            hasValue,\n            shouldPreventPlaceholderAnimation,\n            shouldRemainPlaceholder,\n            shouldShowOnlyBottomBorder,\n            size,\n        ]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            onClick={(event) => {\n                                event.preventDefault();\n                                event.stopPropagation();\n                            }}\n                            onPaste={onPaste}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={\n                                shouldPreventPlaceholderAnimation\n                                    ? {\n                                          opacity: hasValue ? 0 : 1,\n                                      }\n                                    : {\n                                          fontSize:\n                                              hasValue &&\n                                              !shouldShowOnlyBottomBorder &&\n                                              !shouldRemainPlaceholder\n                                                  ? '9px'\n                                                  : `${Number(theme.fontSize)}px`,\n                                      }\n                            }\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{\n                                type: 'tween',\n                                duration: shouldPreventPlaceholderAnimation ? 0 : 0.1,\n                            }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/utils/calculate.js

@@ -2,7 +2,7 @@ import { ChaynsProvider } from 'chayns-api';
 import React from 'react';
 import { renderToString } from 'react-dom/server';
 import ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';
-export const calculateContentWidth = list => {
+export const calculateContentWidth = (list, functions, values) => {
   const length = [];
   list.forEach(_ref => {
     let {
@@ -27,12 +27,9 @@ export const calculateContentWidth = list => {
     if (suffixElement) {
       // ColorSchemeProvider is used to prevent missing scheme context error.
       // Due to the fact that the element is never rendered visible, the values are irrelevant.
-      div.innerHTML += renderToString(
-      /*#__PURE__*/
-      // @ts-expect-error: It's a fake chayns provider because it's not necessary here to have the correct data
-      React.createElement(ChaynsProvider, {
-        data: {},
-        functions: {},
+      div.innerHTML += renderToString(/*#__PURE__*/React.createElement(ChaynsProvider, {
+        data: values,
+        functions: functions,
         isModule: true
       }, /*#__PURE__*/React.createElement(ColorSchemeProvider, {
         color: "#005EB8",

package/lib/esm/utils/calculate.js.map

@@ -1 +1 @@
-{"version":3,"file":"calculate.js","names":["ChaynsProvider","React","renderToString","ColorSchemeProvider","calculateContentWidth","list","length","forEach","_ref","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","data","functions","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","calculateBiggestWidth","elements","container","padding","_ref2","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","span","height","getMaxHeightInPixels","maxHeight","rootElement","tempElement","getBoundingClientRect"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (list: IComboBoxItem[]) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                // @ts-expect-error: It's a fake chayns provider because it's not necessary here to have the correct data\n                <ChaynsProvider data={{}} functions={{}} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\nexport const getHeightOfSingleTextLine = () => {\n    const span = document.createElement('span');\n\n    span.innerText = 'A';\n\n    document.body.appendChild(span);\n\n    const height = span.offsetHeight;\n\n    document.body.removeChild(span);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: HTMLElement,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"calculate.js","names":["ChaynsProvider","React","renderToString","ColorSchemeProvider","calculateContentWidth","list","functions","values","length","forEach","_ref","suffixElement","text","textStyles","tagName","styles","div","document","createElement","Object","assign","style","display","gap","position","visibility","whiteSpace","width","body","appendChild","innerText","innerHTML","data","isModule","color","colorMode","push","offsetWidth","removeChild","Math","max","apply","calculateBiggestWidth","elements","container","padding","_ref2","id","element","accessKey","calculateContentHeight","heights","offsetHeight","reduce","partialSum","a","getHeightOfSingleTextLine","span","height","getMaxHeightInPixels","maxHeight","rootElement","tempElement","getBoundingClientRect"],"sources":["../../../src/utils/calculate.tsx"],"sourcesContent":["import { ChaynsProvider, ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';\nimport React, { type CSSProperties } from 'react';\nimport { renderToString } from 'react-dom/server';\nimport ColorSchemeProvider from '../components/color-scheme-provider/ColorSchemeProvider';\nimport type { IComboBoxItem } from '../components/combobox/ComboBox';\nimport type { SliderButtonItem } from '../types/slider-button';\n\nexport const calculateContentWidth = (\n    list: IComboBoxItem[],\n    functions: ChaynsReactFunctions,\n    values: ChaynsReactValues,\n) => {\n    const length: number[] = [];\n\n    list.forEach(({ suffixElement, text, textStyles }) => {\n        const tagName = textStyles?.tagName ?? 'div';\n        const styles = textStyles?.styles;\n\n        const div = document.createElement(tagName);\n\n        if (styles) {\n            Object.assign(div.style, styles);\n        }\n\n        div.style.display = 'flex';\n        div.style.gap = '10px';\n        div.style.position = 'absolute';\n        div.style.visibility = 'hidden';\n        div.style.whiteSpace = 'nowrap';\n        div.style.width = 'auto';\n\n        document.body.appendChild(div);\n\n        div.innerText = text;\n\n        if (suffixElement) {\n            // ColorSchemeProvider is used to prevent missing scheme context error.\n            // Due to the fact that the element is never rendered visible, the values are irrelevant.\n            div.innerHTML += renderToString(\n                <ChaynsProvider data={values} functions={functions} isModule>\n                    <ColorSchemeProvider color=\"#005EB8\" colorMode={0}>\n                        {suffixElement}\n                    </ColorSchemeProvider>\n                </ChaynsProvider>,\n            );\n        }\n\n        length.push(div.offsetWidth);\n\n        document.body.removeChild(div);\n    });\n\n    return Math.max.apply(null, length);\n};\n\nexport const calculateBiggestWidth = (elements: SliderButtonItem[]) => {\n    const container = document.createElement('div');\n\n    container.style.visibility = 'hidden';\n    container.style.position = 'absolute';\n    container.style.width = 'auto';\n    container.style.whiteSpace = 'nowrap';\n    container.style.padding = '7px 12px';\n    container.style.display = 'block';\n\n    elements.forEach(({ text, id }) => {\n        const element = document.createElement('div');\n\n        element.accessKey = `slider-button-pseudo--${id}`;\n        element.innerText = text;\n\n        container.appendChild(element);\n    });\n\n    document.body.appendChild(container);\n\n    const width = container.offsetWidth;\n\n    document.body.removeChild(container);\n\n    return width;\n};\n\nexport const calculateContentHeight = (elements: string[]) => {\n    const heights: number[] = [];\n\n    elements.forEach((element: string) => {\n        const div = document.createElement('div');\n\n        div.style.visibility = 'hidden';\n        div.style.position = 'absolute';\n        div.style.width = 'auto';\n        div.style.padding = '4px 10px';\n        div.style.whiteSpace = 'nowrap';\n\n        document.body.appendChild(div);\n\n        div.innerText = element;\n\n        heights.push(div.offsetHeight);\n\n        document.body.removeChild(div);\n    });\n\n    return heights.reduce((partialSum, a) => partialSum + a, 0);\n};\n\nexport const getHeightOfSingleTextLine = () => {\n    const span = document.createElement('span');\n\n    span.innerText = 'A';\n\n    document.body.appendChild(span);\n\n    const height = span.offsetHeight;\n\n    document.body.removeChild(span);\n\n    return height;\n};\n\nexport const getMaxHeightInPixels = (\n    maxHeight: CSSProperties['maxHeight'],\n    rootElement: HTMLElement,\n): number => {\n    const tempElement = document.createElement('div');\n\n    tempElement.style.position = 'absolute';\n    tempElement.style.visibility = 'hidden';\n    tempElement.style.height = '100vh';\n    tempElement.style.maxHeight = maxHeight as string;\n\n    rootElement.appendChild(tempElement);\n\n    const { height } = tempElement.getBoundingClientRect();\n\n    rootElement.removeChild(tempElement);\n\n    return height;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/input/Input.d.ts

@@ -40,6 +40,10 @@ export type InputProps = {
      * Function that is executed when the input field is focused
      */
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Function that is executed when content is pasted into the input field
+     */
+    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
     /**
      * Function that is executed when a letter is pressed
      */

package/lib/types/utils/calculate.d.ts

@@ -1,7 +1,8 @@
+import { ChaynsReactFunctions, ChaynsReactValues } from 'chayns-api';
 import { type CSSProperties } from 'react';
 import type { IComboBoxItem } from '../components/combobox/ComboBox';
 import type { SliderButtonItem } from '../types/slider-button';
-export declare const calculateContentWidth: (list: IComboBoxItem[]) => number;
+export declare const calculateContentWidth: (list: IComboBoxItem[], functions: ChaynsReactFunctions, values: ChaynsReactValues) => number;
 export declare const calculateBiggestWidth: (elements: SliderButtonItem[]) => number;
 export declare const calculateContentHeight: (elements: string[]) => number;
 export declare const getHeightOfSingleTextLine: () => number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.953",
+    "version": "5.0.0-beta.955",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3bfce8ead50d1103c1226648980618fdf3d3724d"
+    "gitHead": "00981f69e59d945c814c16588bf3da8ed0fbf622"
 }