@chayns-components/core 5.0.0-beta.1036 → 5.0.0-beta.1038

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

@@ -19,6 +19,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ComboBox = ({
+  bodyWidth,
   direction = _comboBox.ComboBoxDirection.BOTTOM,
   isDisabled = false,
   lists,
@@ -43,6 +44,8 @@ const ComboBox = ({
   const [bodyMinWidth, setBodyMinWidth] = (0, _react2.useState)(0);
   const [focusedIndex, setFocusedIndex] = (0, _react2.useState)(null);
   const [overflowY, setOverflowY] = (0, _react2.useState)('hidden');
+  const [translateX, setTranslateX] = (0, _react2.useState)('0px');
+  const [translateY, setTranslateY] = (0, _react2.useState)('0px');
   const [portal, setPortal] = (0, _react2.useState)();
   const [internalCoordinates, setInternalCoordinates] = (0, _react2.useState)({
     x: 0,
@@ -100,7 +103,7 @@ const ComboBox = ({
       const y = comboBoxTop - containerTop + newContainer.scrollTop;
       setInternalCoordinates({
         x,
-        y: direction === _comboBox.ComboBoxDirection.TOP ? y : y + height
+        y: [_comboBox.ComboBoxDirection.TOP, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.TOP_RIGHT].includes(direction) ? y : y + height
       });
       setIsAnimating(true);
     }
@@ -254,6 +257,14 @@ const ComboBox = ({
     setIsAnimating(false);
     setInternalSelectedItem(selectedItem);
   }, [selectedItem]);
+  (0, _react2.useEffect)(() => {
+    if ([_comboBox.ComboBoxDirection.BOTTOM_LEFT, _comboBox.ComboBoxDirection.TOP_LEFT].includes(direction) && typeof bodyWidth === 'number' && typeof minWidth === 'number') {
+      const difference = minWidth - bodyWidth;
+      setTranslateX(`${difference}px`);
+    } else {
+      setTranslateX('0px');
+    }
+  }, [bodyWidth, direction, minWidth]);
   const placeholderImageUrl = (0, _react2.useMemo)(() => {
     if (selectedItem) {
       return selectedItem.imageUrl;
@@ -327,19 +338,17 @@ const ComboBox = ({
     value: item.value,
     textStyles: item.textStyles
   })))), [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage]);
-  const bodyStyles = (0, _react2.useMemo)(() => {
-    let styles = {
-      left: internalCoordinates.x,
-      top: internalCoordinates.y
-    };
-    if (direction === _comboBox.ComboBoxDirection.TOP) {
-      styles = {
-        ...styles,
-        transform: 'translateY(-100%)'
-      };
+  const bodyStyles = (0, _react2.useMemo)(() => ({
+    left: internalCoordinates.x,
+    top: internalCoordinates.y
+  }), [internalCoordinates.x, internalCoordinates.y]);
+  (0, _react2.useEffect)(() => {
+    if ([_comboBox.ComboBoxDirection.TOP, _comboBox.ComboBoxDirection.TOP_LEFT, _comboBox.ComboBoxDirection.TOP_RIGHT].includes(direction)) {
+      setTranslateY('-100%');
+    } else {
+      setTranslateY('0px');
     }
-    return styles;
-  }, [direction, internalCoordinates.x, internalCoordinates.y]);
+  }, [direction]);
   (0, _react2.useEffect)(() => {
     if (!newContainer) {
       return;
@@ -353,6 +362,8 @@ const ComboBox = ({
         opacity: 1
       },
       $overflowY: overflowY,
+      $translateX: translateX,
+      $translateY: translateY,
       initial: {
         height: 0,
         opacity: 0
@@ -362,7 +373,7 @@ const ComboBox = ({
         opacity: 0
       },
       $maxHeight: maxHeight,
-      $minWidth: bodyMinWidth,
+      $minWidth: bodyWidth ?? bodyMinWidth,
       style: bodyStyles,
       $direction: direction,
       $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
@@ -372,7 +383,7 @@ const ComboBox = ({
       tabIndex: 0,
       ref: contentRef
     }, comboBoxGroups)), newContainer));
-  }, [bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth]);
+  }, [bodyWidth, bodyMinWidth, bodyStyles, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups, newContainer, direction, isAnimating, maxHeight, minWidth, overflowY, shouldUseCurrentItemWidth, translateX, translateY]);
   return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_ComboBox.StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_react2","_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","isInputFocused","useRef","styledComboBoxElementRef","contentRef","functions","useFunctions","values","useValues","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleInputFocus","useCallback","event","handleInputBlur","handleClick","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","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","imageBackground","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","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\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 { BrowserName } from '../../types/chayns';\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    StyledComboBoxPlaceholderText,\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    imageBackground?: CSSProperties['background'];\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) => Promise<boolean> | 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 isInputFocused = useRef(false);\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 handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = true;\n            onInputFocus?.(event);\n        },\n        [onInputFocus],\n    );\n\n    const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = false;\n            onInputBlur?.(event);\n        },\n        [onInputBlur],\n    );\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 onSelectResult = onSelect(itemToSelect);\n\n                if (onSelectResult === false) {\n                    return;\n                }\n\n                if (onSelectResult instanceof Promise) {\n                    void onSelectResult.then((shouldPreventSelection) => {\n                        if (shouldPreventSelection) return;\n\n                        setInternalSelectedItem(itemToSelect);\n                        setIsAnimating(false);\n                    });\n\n                    return;\n                }\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        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\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 && !isInputFocused.current) {\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                            imageBackground={item.imageBackground}\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 as BrowserName}\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                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\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                        <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                            {typeof inputValue === 'string' ? (\n                                <StyledComboBoxInput\n                                    disabled={isDisabled}\n                                    value={inputValue}\n                                    onChange={onInputChange}\n                                    onBlur={handleInputBlur}\n                                    onFocus={handleInputFocus}\n                                    placeholder={placeholderText}\n                                />\n                            ) : (\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                            )}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\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            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n            handleInputFocus,\n            handleInputBlur,\n            shouldUseCurrentItemWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_react2","_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","bodyWidth","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","translateX","setTranslateX","translateY","setTranslateY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","isInputFocused","useRef","styledComboBoxElementRef","contentRef","functions","useFunctions","values","useValues","browser","useDevice","isTouch","getIsTouch","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","useEffect","current","el","element","closest","Element","handleInputFocus","useCallback","event","handleInputBlur","handleClick","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","TOP_LEFT","TOP_RIGHT","includes","handleClose","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","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","BOTTOM_LEFT","difference","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","groupName","StyledComboBoxTopic","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","createPortal","AnimatePresence","initial","StyledMotionComboBoxBody","$browser","name","animate","opacity","$overflowY","$translateX","$translateY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","StyledComboBox","$shouldUseFullWidth","StyledComboBoxHeader","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","StyledComboBoxIconWrapper","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    FocusEventHandler,\n    ReactHTML,\n    type ReactNode,\n    ReactPortal,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { BrowserName } from '../../types/chayns';\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    StyledComboBoxPlaceholderText,\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    imageBackground?: CSSProperties['background'];\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    bodyWidth?: number;\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) => Promise<boolean> | 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    bodyWidth,\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 [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\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 isInputFocused = useRef(false);\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 handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = true;\n            onInputFocus?.(event);\n        },\n        [onInputFocus],\n    );\n\n    const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n        (event) => {\n            isInputFocused.current = false;\n            onInputBlur?.(event);\n        },\n        [onInputBlur],\n    );\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: [\n                    ComboBoxDirection.TOP,\n                    ComboBoxDirection.TOP_LEFT,\n                    ComboBoxDirection.TOP_RIGHT,\n                ].includes(direction)\n                    ? y\n                    : 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 onSelectResult = onSelect(itemToSelect);\n\n                if (onSelectResult === false) {\n                    return;\n                }\n\n                if (onSelectResult instanceof Promise) {\n                    void onSelectResult.then((shouldPreventSelection) => {\n                        if (shouldPreventSelection) return;\n\n                        setInternalSelectedItem(itemToSelect);\n                        setIsAnimating(false);\n                    });\n\n                    return;\n                }\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        if (tmpMinWidth > parentWidth) {\n            tmpMinWidth = parentWidth;\n        }\n\n        if (tmpBodyMinWidth > parentWidth) {\n            tmpBodyMinWidth = parentWidth;\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    useEffect(() => {\n        if (\n            [ComboBoxDirection.BOTTOM_LEFT, ComboBoxDirection.TOP_LEFT].includes(direction) &&\n            typeof bodyWidth === 'number' &&\n            typeof minWidth === 'number'\n        ) {\n            const difference = minWidth - bodyWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [bodyWidth, direction, minWidth]);\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 && !isInputFocused.current) {\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                            imageBackground={item.imageBackground}\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        () => ({ left: internalCoordinates.x, top: internalCoordinates.y }),\n        [internalCoordinates.x, internalCoordinates.y],\n    );\n\n    useEffect(() => {\n        if (\n            [\n                ComboBoxDirection.TOP,\n                ComboBoxDirection.TOP_LEFT,\n                ComboBoxDirection.TOP_RIGHT,\n            ].includes(direction)\n        ) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction]);\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 as BrowserName}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            $translateX={translateX}\n                            $translateY={translateY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyWidth ?? 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        bodyWidth,\n        bodyMinWidth,\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        newContainer,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n        shouldUseCurrentItemWidth,\n        translateX,\n        translateY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $minWidth={minWidth}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\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                        <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                            {typeof inputValue === 'string' ? (\n                                <StyledComboBoxInput\n                                    disabled={isDisabled}\n                                    value={inputValue}\n                                    onChange={onInputChange}\n                                    onBlur={handleInputBlur}\n                                    onFocus={handleInputFocus}\n                                    placeholder={placeholderText}\n                                />\n                            ) : (\n                                <StyledComboBoxPlaceholderText>\n                                    {placeholderText}\n                                </StyledComboBoxPlaceholderText>\n                            )}\n                            {internalSelectedItem &&\n                                internalSelectedItem.suffixElement &&\n                                internalSelectedItem.suffixElement}\n                        </StyledComboBoxPlaceholder>\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            placeholderText,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            portal,\n            handleInputFocus,\n            handleInputBlur,\n            shouldUseCurrentItemWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -66,7 +66,7 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
   $direction
 }) => {
   if ($isOpen) {
-    return $direction === _comboBox.ComboBoxDirection.BOTTOM ? (0, _styledComponents.css)`
+    return [_comboBox.ComboBoxDirection.BOTTOM, _comboBox.ComboBoxDirection.BOTTOM_LEFT, _comboBox.ComboBoxDirection.BOTTOM_RIGHT].includes($direction) ? (0, _styledComponents.css)`
                       border-top-left-radius: 3px;
                       border-top-right-radius: 3px;
                   ` : (0, _styledComponents.css)`
@@ -166,10 +166,13 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
   $overflowY
 }) => $overflowY};
     overflow-x: hidden;
+    transform: ${({
+  $translateX,
+  $translateY
+}) => `translate(${$translateX}, ${$translateY})`};
     min-width: ${({
-  $minWidth,
-  $overflowY
-}) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;
+  $minWidth
+}) => $minWidth}px;
 
     ${({
   $minWidth,
@@ -182,7 +185,7 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
     ${({
   $direction
 }) => {
-  if ($direction === _comboBox.ComboBoxDirection.BOTTOM) {
+  if ([_comboBox.ComboBoxDirection.BOTTOM, _comboBox.ComboBoxDirection.BOTTOM_LEFT, _comboBox.ComboBoxDirection.BOTTOM_RIGHT].includes($direction)) {
     return (0, _styledComponents.css)`
                 border-bottom-left-radius: 3px;
                 border-bottom-right-radius: 3px;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n    $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n        if (typeof $minWidth !== 'number') {\n            return css`\n                width: fit-content;\n            `;\n        }\n\n        if ($shouldUseFullWidth) {\n            return css`\n                min-width: ${$minWidth}px;\n                width: 100%;\n            `;\n        }\n\n        if ($shouldUseCurrentItemWidth) {\n            return '';\n        }\n\n        return css`\n            min-width: ${$minWidth}px;\n            max-width: ${$minWidth}px;\n        `;\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    min-width: 0;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n    flex: 0 0 auto;\n    min-width: 32px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    color: ${({ theme }: { theme: Theme }) => theme.text};\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: BrowserName;\n    $minWidth: number;\n    $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['000']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n    overflow-x: hidden;\n    min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n    ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n        !$shouldUseCurrentItemWidth &&\n        css`\n            max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n        `}\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","ComboBoxDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$translateX","$translateY","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n    $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n        if (typeof $minWidth !== 'number') {\n            return css`\n                width: fit-content;\n            `;\n        }\n\n        if ($shouldUseFullWidth) {\n            return css`\n                min-width: ${$minWidth}px;\n                width: 100%;\n            `;\n        }\n\n        if ($shouldUseCurrentItemWidth) {\n            return '';\n        }\n\n        return css`\n            min-width: ${$minWidth}px;\n            max-width: ${$minWidth}px;\n        `;\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return [\n                ComboBoxDirection.BOTTOM,\n                ComboBoxDirection.BOTTOM_LEFT,\n                ComboBoxDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    min-width: 0;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n    flex: 0 0 auto;\n    min-width: 32px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    color: ${({ theme }: { theme: Theme }) => theme.text};\n    border: none;\n    background-color: transparent;\n    width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $translateX: string;\n    $translateY: string;\n    $direction: ComboBoxDirection;\n    $browser: BrowserName;\n    $minWidth: number;\n    $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['000']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n    overflow-x: hidden;\n    transform: ${({ $translateX, $translateY }) => `translate(${$translateX}, ${$translateY})`};\n    min-width: ${({ $minWidth }) => $minWidth}px;\n\n    ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n        !$shouldUseCurrentItemWidth &&\n        css`\n            max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n        `}\n\n    ${({ $direction }) => {\n        if (\n            [\n                ComboBoxDirection.BOTTOM,\n                ComboBoxDirection.BOTTOM_LEFT,\n                ComboBoxDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n        ) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    position: sticky;\n    top: 0;\n    border: black 5px;\n    cursor: default;\n    font-weight: bold;\n    display: flex;\n    gap: 10px;\n    z-index: 10;\n    padding: 4px 10px;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.js

@@ -95,6 +95,7 @@ const SearchInput = ({
     transition: {
       duration: 0.3
     },
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
     id: isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'
   }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     color: iconColor,

package/lib/cjs/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_useElementSize","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","onClick","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/useElementSize';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\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 a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n    width: widthValue,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width ?? widthValue, [parentWidth?.width, widthValue]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                                size={18}\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                        size={18}\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_useElementSize","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","onClick","id","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/useElementSize';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\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 a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n    width: widthValue,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width ?? widthValue, [parentWidth?.width, widthValue]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            onClick={\n                                isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n                            }\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                                size={18}\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                        size={18}\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.styles.js

@@ -54,6 +54,7 @@ const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputCon
 `;
 const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_react.motion.div)`
     display: flex;
+    cursor: pointer;
 `;
 const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
     width: 18px;

package/lib/cjs/components/search-input/SearchInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSearchInput","exports","styled","div","$size","$shouldUseAbsolutePositioning","theme","css","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n\n                  @media (pointer: fine) {\n                      &:hover {\n                          background-color: ${theme[201]};\n                      }\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMW,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,GACvB,IAAAE,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CD,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACD,IAAAC,qBAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAGN,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAMM,MAAMM,qCAAqC,GAAAR,OAAA,CAAAQ,qCAAA,GAAG,IAAAP,yBAAM,EACvDQ,aAAM,CAACP,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7B,IAAAE,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AAEM,MAAMI,yCAAyC,GAAAV,OAAA,CAAAU,yCAAA,GAAG,IAAAT,yBAAM,EAACQ,aAAM,CAACP,GAAG,CAAqB;AAC/F;AACA,CAAC;AAEM,MAAMS,kCAAkC,GAAAX,OAAA,CAAAW,kCAAA,GAAGV,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"SearchInput.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledSearchInput","exports","styled","div","$size","$shouldUseAbsolutePositioning","theme","css","StyledSearchInputPseudoElement","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent","StyledMotionSearchInputIconWrapper"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n    $size: InputSize;\n    $shouldUseAbsolutePositioning: boolean;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n    display: flex;\n    align-items: center;\n\n    height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n    ${({ $shouldUseAbsolutePositioning, theme }: StyledSearchInputProps) =>\n        $shouldUseAbsolutePositioning\n            ? css`\n                  justify-content: center;\n                  aspect-ratio: 1;\n                  border-radius: 3px;\n                  position: relative;\n\n                  @media (pointer: fine) {\n                      &:hover {\n                          background-color: ${theme[201]};\n                      }\n                  }\n              `\n            : css`\n                  gap: 8px;\n                  justify-content: flex-end;\n                  width: 100%;\n              `}\n`;\n\nexport const StyledSearchInputPseudoElement = styled.div`\n    position: absolute;\n    right: 0;\n    left: 0;\n`;\n\ntype StyledMotionSearchInputContentWrapperProps = {\n    $shouldUseAbsolutePositioning: boolean;\n};\n\nexport const StyledMotionSearchInputContentWrapper = styled(\n    motion.div,\n)<StyledMotionSearchInputContentWrapperProps>`\n    ${({ $shouldUseAbsolutePositioning }) =>\n        $shouldUseAbsolutePositioning &&\n        css`\n            position: absolute;\n            top: 0;\n            right: 0;\n        `}\n\n    overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n    display: flex;\n    cursor: pointer;\n`;\n\nexport const StyledMotionSearchInputIconWrapper = styled.div`\n    width: 18px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMW,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA8B,CAAC,KAC/DD,6BAA6B,GACvB,IAAAE,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,8CAA8CD,KAAK,CAAC,GAAG,CAAC;AACxD;AACA;AACA,eAAe,GACD,IAAAC,qBAAG;AACjB;AACA;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMC,8BAA8B,GAAAP,OAAA,CAAAO,8BAAA,GAAGN,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA,CAAC;AAMM,MAAMM,qCAAqC,GAAAR,OAAA,CAAAQ,qCAAA,GAAG,IAAAP,yBAAM,EACvDQ,aAAM,CAACP,GACX,CAA6C;AAC7C,MAAM,CAAC;EAAEE;AAA8B,CAAC,KAChCA,6BAA6B,IAC7B,IAAAE,qBAAG;AACX;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,CAAC;AAEM,MAAMI,yCAAyC,GAAAV,OAAA,CAAAU,yCAAA,GAAG,IAAAT,yBAAM,EAACQ,aAAM,CAACP,GAAG,CAAqB;AAC/F;AACA;AACA,CAAC;AAEM,MAAMS,kCAAkC,GAAAX,OAAA,CAAAW,kCAAA,GAAGV,yBAAM,CAACC,GAAG;AAC5D;AACA,CAAC","ignoreList":[]}

package/lib/cjs/types/comboBox.js

@@ -7,6 +7,10 @@ exports.ComboBoxDirection = void 0;
 let ComboBoxDirection = exports.ComboBoxDirection = /*#__PURE__*/function (ComboBoxDirection) {
   ComboBoxDirection[ComboBoxDirection["BOTTOM"] = 0] = "BOTTOM";
   ComboBoxDirection[ComboBoxDirection["TOP"] = 1] = "TOP";
+  ComboBoxDirection[ComboBoxDirection["BOTTOM_LEFT"] = 2] = "BOTTOM_LEFT";
+  ComboBoxDirection[ComboBoxDirection["BOTTOM_RIGHT"] = 3] = "BOTTOM_RIGHT";
+  ComboBoxDirection[ComboBoxDirection["TOP_LEFT"] = 4] = "TOP_LEFT";
+  ComboBoxDirection[ComboBoxDirection["TOP_RIGHT"] = 5] = "TOP_RIGHT";
   return ComboBoxDirection;
 }({});
 //# sourceMappingURL=comboBox.js.map

package/lib/cjs/types/comboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"comboBox.js","names":["ComboBoxDirection","exports"],"sources":["../../../src/types/comboBox.ts"],"sourcesContent":["export enum ComboBoxDirection {\n    BOTTOM,\n    TOP,\n}\n"],"mappings":";;;;;;IAAYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA","ignoreList":[]}
+{"version":3,"file":"comboBox.js","names":["ComboBoxDirection","exports"],"sources":["../../../src/types/comboBox.ts"],"sourcesContent":["export enum ComboBoxDirection {\n    BOTTOM,\n    TOP,\n    BOTTOM_LEFT,\n    BOTTOM_RIGHT,\n    TOP_LEFT,\n    TOP_RIGHT,\n}\n"],"mappings":";;;;;;IAAYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA","ignoreList":[]}