@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.1040

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","names":["useDevice","useFunctions","useValues","AnimatePresence","React","useCallback","useContext","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","bodyWidth","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","translateX","setTranslateX","translateY","setTranslateY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","isInputFocused","styledComboBoxElementRef","contentRef","functions","values","browser","isTouch","areaProvider","shouldChangeColor","current","el","element","closest","Element","handleInputFocus","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","body","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","hasImage","item","imageUrl","hasIcon","icons","parentWidth","parentElement","width","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","text","Math","max","baseWidth","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","BOTTOM_LEFT","difference","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","_ref3","handleHeaderClick","comboBoxGroups","map","createElement","groupName","imageBackground","isSelected","rightElement","subtext","suffixElement","textStyles","bodyStyles","initial","$browser","name","animate","opacity","$overflowY","$translateX","$translateY","exit","$maxHeight","$minWidth","style","$direction","$shouldUseCurrentItemWidth","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","displayName"],"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/esm/components/combobox/ComboBox.styles.js

@@ -0,0 +1,305 @@
+import { motion } from 'motion/react';
+import styled, { css } from 'styled-components';
+import { ComboBoxDirection } from '../../types/comboBox';
+export const StyledComboBox = styled.div`
+    user-select: none;
+    position: relative;
+
+    ${_ref => {
+  let {
+    $shouldUseFullWidth,
+    $minWidth,
+    $shouldUseCurrentItemWidth
+  } = _ref;
+  if (typeof $minWidth !== 'number') {
+    return css`
+                width: fit-content;
+            `;
+  }
+  if ($shouldUseFullWidth) {
+    return css`
+                min-width: ${$minWidth}px;
+                width: 100%;
+            `;
+  }
+  if ($shouldUseCurrentItemWidth) {
+    return '';
+  }
+  return css`
+            min-width: ${$minWidth}px;
+            max-width: ${$minWidth}px;
+        `;
+}}
+`;
+export const StyledComboBoxHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    padding: 4px 10px;
+    cursor: ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return !$isDisabled ? 'pointer' : 'default';
+}};
+    background-color: ${_ref3 => {
+  let {
+    theme,
+    $shouldChangeColor
+  } = _ref3;
+  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
+}};
+    opacity: ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? 0.5 : 1;
+}};
+    transition: background-color 0.2s ease-in-out;
+
+    ${_ref5 => {
+  let {
+    $shouldShowBigImage
+  } = _ref5;
+  return $shouldShowBigImage && css`
+            height: 42px;
+        `;
+}}
+
+    ${_ref6 => {
+  let {
+    $isOpen,
+    $direction
+  } = _ref6;
+  if ($isOpen) {
+    return [ComboBoxDirection.BOTTOM, ComboBoxDirection.BOTTOM_LEFT, ComboBoxDirection.BOTTOM_RIGHT].includes($direction) ? css`
+                      border-top-left-radius: 3px;
+                      border-top-right-radius: 3px;
+                  ` : css`
+                      border-bottom-left-radius: 3px;
+                      border-bottom-right-radius: 3px;
+                  `;
+  }
+  return css`
+            border-radius: 3px;
+        `;
+}}
+
+    ${_ref7 => {
+  let {
+    $isTouch,
+    $isDisabled,
+    theme
+  } = _ref7;
+  return !$isTouch && !$isDisabled && css`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+export const StyledComboBoxPlaceholder = styled.div`
+    align-items: center;
+    color: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.text;
+}};
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    min-width: 0;
+    opacity: ${_ref9 => {
+  let {
+    $shouldReduceOpacity
+  } = _ref9;
+  return $shouldReduceOpacity ? 0.5 : 1;
+}};
+`;
+export const StyledComboBoxPlaceholderText = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+export const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+`;
+export const StyledComboBoxPrefix = styled.div`
+    flex: 0 0 auto;
+    min-width: 32px;
+    padding-right: 5px;
+`;
+export const StyledComboBoxInput = styled.input`
+    color: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.text;
+}};
+    border: none;
+    background-color: transparent;
+    width: 100%;
+`;
+export const StyledComboBoxPlaceholderImage = styled.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: ${_ref12 => {
+  let {
+    $shouldShowBigImage
+  } = _ref12;
+  return $shouldShowBigImage ? '32px' : '22px';
+}};
+    width: ${_ref13 => {
+  let {
+    $shouldShowBigImage
+  } = _ref13;
+  return $shouldShowBigImage ? '32px' : '22px';
+}};
+
+    ${_ref14 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref14;
+  return $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+`;
+export const StyledComboBoxIconWrapper = styled.div`
+    align-items: center;
+    display: flex;
+    margin-left: 5px;
+`;
+export const StyledMotionComboBoxBody = styled(motion.div)`
+    background: ${_ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme['000'];
+}};
+    display: flex;
+    position: absolute;
+    z-index: 4;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    cursor: pointer;
+    max-height: ${_ref16 => {
+  let {
+    $maxHeight
+  } = _ref16;
+  return $maxHeight;
+}};
+    overflow-y: ${_ref17 => {
+  let {
+    $overflowY
+  } = _ref17;
+  return $overflowY;
+}};
+    overflow-x: hidden;
+    transform: ${_ref18 => {
+  let {
+    $translateX,
+    $translateY
+  } = _ref18;
+  return `translate(${$translateX}, ${$translateY})`;
+}};
+    min-width: ${_ref19 => {
+  let {
+    $minWidth
+  } = _ref19;
+  return $minWidth;
+}}px;
+
+    ${_ref20 => {
+  let {
+    $minWidth,
+    $overflowY,
+    $shouldUseCurrentItemWidth
+  } = _ref20;
+  return !$shouldUseCurrentItemWidth && css`
+            max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;
+        `;
+}}
+
+    ${_ref21 => {
+  let {
+    $direction
+  } = _ref21;
+  if ([ComboBoxDirection.BOTTOM, ComboBoxDirection.BOTTOM_LEFT, ComboBoxDirection.BOTTOM_RIGHT].includes($direction)) {
+    return css`
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
+            `;
+  }
+  return css`
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
+        `;
+}}
+
+    // Styles for custom scrollbar
+    ${_ref22 => {
+  let {
+    $browser,
+    theme
+  } = _ref22;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+export const StyledComboBoxTopic = styled.div`
+    align-items: center;
+    color: rgba(${_ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme['text-rgb'];
+}}, 0.65);
+    position: sticky;
+    top: 0;
+    border: black 5px;
+    cursor: default;
+    font-weight: bold;
+    display: flex;
+    gap: 10px;
+    z-index: 10;
+    padding: 4px 10px;
+    background-color: ${_ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme['secondary-101'];
+}};
+`;
+//# sourceMappingURL=ComboBox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","_ref10","StyledComboBoxPlaceholderImage","img","_ref11","_ref12","_ref13","_ref14","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref15","_ref16","$maxHeight","_ref17","$overflowY","_ref18","$translateX","$translateY","_ref19","_ref20","_ref21","_ref22","$browser","StyledComboBoxTopic","_ref23","_ref24"],"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/esm/components/combobox/combobox-item/ComboBoxItem.js

@@ -0,0 +1,58 @@
+import React, { useCallback, useMemo } from 'react';
+import { getIsTouch } from '../../../utils/environment';
+import Icon from '../../icon/Icon';
+import { StyledComboBoxItem, StyledComboBoxItemContent, StyledComboBoxItemContentHeader, StyledComboBoxItemContentHeaderRightElement, StyledComboBoxItemContentHeaderWrapper, StyledComboBoxItemContentHeaderWrapperText, StyledComboBoxItemContentSubtext, StyledComboBoxItemImage } from './ComboBoxItem.styles';
+const ComboBoxItem = _ref => {
+  let {
+    icons,
+    id,
+    imageBackground,
+    imageUrl,
+    isDisabled,
+    isSelected,
+    onSelect,
+    rightElement,
+    shouldShowBigImage,
+    shouldShowRoundImage,
+    subtext,
+    suffixElement,
+    textStyles,
+    text,
+    value
+  } = _ref;
+  const handleItemClick = useCallback(() => {
+    if (!isDisabled) {
+      onSelect({
+        text,
+        value,
+        suffixElement,
+        imageUrl,
+        icons
+      });
+    }
+  }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);
+  const isTouch = getIsTouch();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
+    id: `combobox-item__${typeof id === 'number' ? String(id) : id}`,
+    onClick: handleItemClick,
+    $isDisabled: isDisabled,
+    $isSelected: isSelected,
+    $isTouch: isTouch
+  }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
+    src: imageUrl,
+    $background: imageBackground,
+    $shouldShowBigImage: shouldShowBigImage || typeof subtext === 'string' && subtext.trim() !== '',
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), icons && /*#__PURE__*/React.createElement(Icon, {
+    icons: icons
+  }), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, {
+    $text: text,
+    $subtext: subtext
+  }, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderWrapper, {
+    as: textStyles?.tagName,
+    style: textStyles?.styles
+  }, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderWrapperText, null, text), suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageBackground, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text, textStyles?.styles, textStyles?.tagName]);
+};
+ComboBoxItem.displayName = 'ComboBoxItem';
+export default ComboBoxItem;
+//# sourceMappingURL=ComboBoxItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageBackground","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$background","$shouldShowBigImage","trim","$shouldShowRoundImage","$text","$subtext","as","tagName","style","styles","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderWrapper,\n    StyledComboBoxItemContentHeaderWrapperText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    icons?: IComboBoxItem['icons'];\n    id: IComboBoxItem['value'];\n    imageBackground?: IComboBoxItem['imageBackground'];\n    imageUrl: IComboBoxItem['imageUrl'];\n    isDisabled?: IComboBoxItem['isDisabled'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    rightElement: IComboBoxItem['rightElement'];\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    subtext: IComboBoxItem['subtext'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    textStyles?: IComboBoxItem['textStyles'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    icons,\n    id,\n    imageBackground,\n    imageUrl,\n    isDisabled,\n    isSelected,\n    onSelect,\n    rightElement,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    subtext,\n    suffixElement,\n    textStyles,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl, icons });\n        }\n    }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $background={imageBackground}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader $text={text} $subtext={subtext}>\n                        <StyledComboBoxItemContentHeaderWrapper\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                        >\n                            <StyledComboBoxItemContentHeaderWrapperText>\n                                {text}\n                            </StyledComboBoxItemContentHeaderWrapperText>\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderWrapper>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageBackground,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n            textStyles?.styles,\n            textStyles?.tagName,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,126 @@
+import styled, { css } from 'styled-components';
+export const StyledComboBoxItem = styled.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme,
+    $isSelected
+  } = _ref;
+  return $isSelected && theme['secondary-102'];
+}};
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    display: flex;
+    gap: 10px;
+    padding: 8px 10px;
+    transition: background-color 0.2s ease-in-out;
+
+    ${_ref3 => {
+  let {
+    $isDisabled
+  } = _ref3;
+  return $isDisabled && css`
+            opacity: 0.5;
+            pointer-events: none;
+        `;
+}}
+
+    ${_ref4 => {
+  let {
+    $isDisabled,
+    $isTouch,
+    theme
+  } = _ref4;
+  return !$isDisabled && !$isTouch && css`
+            &:hover {
+                background-color: ${theme['secondary-101']};
+            }
+
+            &:focus {
+                background-color: ${theme['secondary-101']};
+            }
+        `;
+}}
+`;
+export const StyledComboBoxItemImage = styled.img`
+    ${_ref5 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref5;
+  return $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+
+    background: ${_ref6 => {
+  let {
+    $background,
+    theme
+  } = _ref6;
+  return $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`;
+}};
+    box-shadow: 0 0 0 1px
+        rgba(${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme['009-rgb'];
+}}, 0.15);
+    flex: 0 0 auto;
+    height: ${_ref8 => {
+  let {
+    $shouldShowBigImage
+  } = _ref8;
+  return $shouldShowBigImage ? '40px' : '22px';
+}};
+    width: ${_ref9 => {
+  let {
+    $shouldShowBigImage
+  } = _ref9;
+  return $shouldShowBigImage ? '40px' : '22px';
+}};
+`;
+export const StyledComboBoxItemContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    line-height: normal;
+    min-width: 0;
+    width: 100%;
+`;
+export const StyledComboBoxItemContentHeader = styled.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    font-weight: ${_ref10 => {
+  let {
+    $text,
+    $subtext
+  } = _ref10;
+  return $text && $subtext ? 'bold' : 'normal';
+}};
+`;
+export const StyledComboBoxItemContentHeaderWrapper = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    gap: 4px;
+    min-width: 0;
+`;
+export const StyledComboBoxItemContentHeaderWrapperText = styled.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+export const StyledComboBoxItemContentHeaderRightElement = styled.div`
+    align-items: center;
+    display: flex;
+`;
+export const StyledComboBoxItemContentSubtext = styled.div`
+    font-size: 85%;
+    margin-top: 2px;
+`;
+//# sourceMappingURL=ComboBoxItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isDisabled","_ref4","$isTouch","StyledComboBoxItemImage","img","_ref5","$shouldShowRoundImage","_ref6","$background","_ref7","_ref8","$shouldShowBigImage","_ref9","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","_ref10","$text","$subtext","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isDisabled?: boolean;\n    $isSelected: boolean;\n    $isTouch: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-102']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 8px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n\n    ${({ $isDisabled, $isTouch, theme }: StyledComboBoxItemProps) =>\n        !$isDisabled &&\n        !$isTouch &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-101']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-101']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n    $background?: CSSProperties['background'];\n    $shouldShowBigImage?: boolean;\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n\n    background: ${({ $background, theme }: StyledComboBoxItemImageProps) =>\n        $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    flex: 0 0 auto;\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    line-height: normal;\n    min-width: 0;\n    width: 100%;\n`;\n\ntype StyledComboBoxItemContentHeaderProps = {\n    $text?: string;\n    $subtext?: string;\n};\n\nexport const StyledComboBoxItemContentHeader = styled.div<StyledComboBoxItemContentHeaderProps>`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    font-weight: ${({ $text, $subtext }) => ($text && $subtext ? 'bold' : 'normal')};\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapper = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    gap: 4px;\n    min-width: 0;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapperText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXT,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAED,WAAW;IAAEE,QAAQ;IAAEP;EAA+B,CAAC,GAAAM,KAAA;EAAA,OACxD,CAACD,WAAW,IACZ,CAACE,QAAQ,IACTX,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAQD,OAAO,MAAMQ,uBAAuB,GAAGb,MAAM,CAACc,GAAiC;AAC/E,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBf,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,kBAAkBgB,KAAA;EAAA,IAAC;IAAEC,WAAW;IAAEb;EAAoC,CAAC,GAAAY,KAAA;EAAA,OAC/DC,WAAW,IAAI,QAAQb,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AAAA;AACnE;AACA,eAAec,KAAA;EAAA,IAAC;IAAEd;EAAoC,CAAC,GAAAc,KAAA;EAAA,OAAKd,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA,cAAce,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAoB,CAAC,GAAAC,KAAA;EAAA,OAAMD,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGvB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMqB,+BAA+B,GAAGxB,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA,mBAAmBsB,MAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAAF,MAAA;EAAA,OAAMC,KAAK,IAAIC,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC;AACnF,CAAC;AAED,OAAO,MAAMC,sCAAsC,GAAG5B,MAAM,CAACG,GAAG;AAChE;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM0B,0CAA0C,GAAG7B,MAAM,CAACG,GAAG;AACpE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,2CAA2C,GAAG9B,MAAM,CAACG,GAAG;AACrE;AACA;AACA,CAAC;AAED,OAAO,MAAM4B,gCAAgC,GAAG/B,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}