@chayns-components/core 5.0.0-beta.1241 → 5.0.0-beta.1243

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

@@ -36,6 +36,7 @@ const ComboBox = ({
   onInputChange,
   shouldUseCurrentItemWidth = false,
   onInputBlur,
+  shouldShowTransparentBackground = false,
   inputValue,
   shouldDropDownUseMaxItemWidth = false
 }) => {
@@ -308,6 +309,7 @@ const ComboBox = ({
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
     $isTouch: isTouch,
+    $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
     $shouldShowBigImage: shouldShowBigImage
@@ -351,7 +353,7 @@ const ComboBox = ({
     $browser: browser === null || browser === void 0 ? void 0 : browser.name,
     ref: contentRef,
     tabIndex: 0
-  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, handleClose, container, bodyMinWidth, maxHeight, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups]);
+  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, shouldShowTransparentBackground, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, handleClose, container, bodyMinWidth, maxHeight, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","inputValue","shouldDropDownUseMaxItemWidth","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","useRef","styledComboBoxElementRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","getIsTouch","browser","useDevice","areaProvider","useContext","AreaContext","useEffect","width","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","result","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","_styledComboBoxElemen","allItems","baseWidth","calculateContentWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","ref","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","$browser","name","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    FocusEventHandler,\n    Fragment,\n    ReactHTML,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateContentWidth } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\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 width of the body.\n     */\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?: DropdownDirection;\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?: number;\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    /**\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, a clear icon is displayed at the end of the combo box if an item is selected.\n     */\n    shouldShowClearIcon?: 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     * If true, the dropdown will use the maximum width of the items.\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    bodyWidth,\n    direction = DropdownDirection.RIGHT,\n    isDisabled = false,\n    lists,\n    maxHeight = 280,\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowClearIcon,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    inputValue,\n    shouldDropDownUseMaxItemWidth = false,\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\n    const isInputFocused = useRef(false);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const parentSize = useElementSize(styledComboBoxElementRef, { shouldUseParentElement: true });\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const isTouch = getIsTouch();\n\n    const { browser } = useDevice();\n\n    const areaProvider = useContext(AreaContext);\n\n    useEffect(() => {\n        if (shouldUseFullWidth && parentSize) {\n            setMinWidth(parentSize.width);\n        }\n    }, [parentSize, shouldUseFullWidth]);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const shouldDisableActions = useMemo(() => {\n        if (!selectedItem) {\n            return false;\n        }\n\n        const combinedLists = lists.flatMap((list) => list.list);\n\n        return (\n            combinedLists.length === 1 &&\n            combinedLists.some((item) => item.value === selectedItem.value)\n        );\n    }, [lists, selectedItem]);\n\n    const contentHeight = useMemo(() => {\n        const flatItems = lists.flatMap((list) => list.list);\n\n        let result = flatItems.length * 36;\n\n        if (lists.length > 1) {\n            result += lists.length * 36;\n        }\n\n        if (maxHeight < result) {\n            result = maxHeight;\n        }\n\n        return result;\n    }, [lists, maxHeight]);\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 handleOpen = useCallback(() => {\n        setIsAnimating(true);\n    }, []);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\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    const handleClear = useCallback(\n        (event: React.MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            handleSetSelectedItem(undefined);\n        },\n        [handleSetSelectedItem],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) return;\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n\n                const children = contentRef.current?.children;\n\n                if (!children || children.length === 0) return;\n\n                const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                let newIndex = focusedIndex ?? -1;\n\n                let attempts = 0;\n\n                do {\n                    newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n\n                    let shouldSkip = false;\n\n                    if (\n                        newElement.id.startsWith('combobox-group--') ||\n                        newElement.id.endsWith('--disabled-item')\n                    ) {\n                        shouldSkip = true;\n                    }\n\n                    if (!shouldSkip) break;\n\n                    attempts++;\n                } while (attempts < children.length);\n\n                if (focusedIndex !== null) {\n                    const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                    prevElement.tabIndex = -1;\n                }\n\n                setFocusedIndex(newIndex);\n\n                const focusedElement = children[newIndex] as HTMLDivElement;\n\n                focusedElement.tabIndex = 0;\n\n                focusedElement.focus();\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) return;\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\n                    return !!newSelectedItem;\n                });\n\n                if (newSelectedItem) {\n                    handleSetSelectedItem(newSelectedItem);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => document.removeEventListener('keydown', handleKeyDown);\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\n        let baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        if (shouldDropDownUseMaxItemWidth) {\n            baseWidth += 20 + 2; // 20px padding left and right and 2px border\n            setBodyMinWidth(baseWidth);\n            setMinWidth(baseWidth);\n            return;\n        }\n\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 = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 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        // 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        shouldDropDownUseMaxItemWidth,\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                <Fragment key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                            {list.groupName}\n                        </StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        <ComboBoxItem\n                            item={item}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            onSelect={handleSetSelectedItem}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                        />\n                    ))}\n                </Fragment>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\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                    {shouldShowClearIcon && internalSelectedItem && (\n                        <StyledComboBoxClearIconWrapper onClick={handleClear}>\n                            <Icon icons={['fa fa-times']} />\n                        </StyledComboBoxClearIconWrapper>\n                    )}\n                    {!shouldDisableActions && (\n                        <StyledComboBoxIconWrapper\n                            $shouldShowBorderLeft={\n                                shouldShowClearIcon === true && internalSelectedItem !== undefined\n                            }\n                        >\n                            <Icon icons={['fa fa-chevron-down']} />\n                        </StyledComboBoxIconWrapper>\n                    )}\n                </StyledComboBoxHeader>\n                {styledComboBoxElementRef.current && (\n                    <DropdownBodyWrapper\n                        anchorElement={styledComboBoxElementRef.current}\n                        bodyWidth={bodyWidth}\n                        contentHeight={contentHeight}\n                        onClose={handleClose}\n                        direction={direction}\n                        container={container}\n                        shouldShowDropdown={isAnimating}\n                        minBodyWidth={bodyWidth ?? bodyMinWidth}\n                        maxHeight={maxHeight}\n                    >\n                        <StyledComboBoxBody\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyWidth ?? bodyMinWidth}\n                            $browser={browser?.name as BrowserName}\n                            ref={contentRef}\n                            tabIndex={0}\n                        >\n                            {comboBoxGroups}\n                        </StyledComboBoxBody>\n                    </DropdownBodyWrapper>\n                )}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            shouldUseCurrentItemWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            inputValue,\n            onInputChange,\n            handleInputBlur,\n            handleInputFocus,\n            placeholderText,\n            shouldShowClearIcon,\n            handleClear,\n            shouldDisableActions,\n            bodyWidth,\n            contentHeight,\n            handleClose,\n            container,\n            bodyMinWidth,\n            maxHeight,\n            browser?.name,\n            comboBoxGroups,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_calculate","_environment","_AreaContextProvider","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_DropdownBodyWrapper","_dropdown","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBox","bodyWidth","direction","DropdownDirection","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","selectedItem","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","internalSelectedItem","setInternalSelectedItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","useRef","styledComboBoxElementRef","contentRef","parentSize","useElementSize","shouldUseParentElement","functions","useFunctions","values","useValues","isTouch","getIsTouch","browser","useDevice","areaProvider","useContext","AreaContext","useEffect","width","shouldChangeColor","useMemo","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","result","handleInputFocus","useCallback","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","key","_contentRef$current","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","_contentRef$current2","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","_styledComboBoxElemen","allItems","baseWidth","calculateContentWidth","text","hasImage","imageUrl","hasIcon","icons","parentWidth","parentElement","getBoundingClientRect","paddingWidth","imageWidth","iconWidth","prefixWidth","prefixTextWidth","Math","max","calculatedWidth","tmpMinWidth","tmpBodyMinWidth","itemWidth","placeholderImageUrl","placeholderIcon","placeholderText","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","comboBoxGroups","map","createElement","Fragment","groupName","StyledComboBoxTopic","isSelected","StyledComboBox","ref","$minWidth","$shouldUseFullWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$direction","onClick","$isOpen","$isTouch","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxPlaceholder","$shouldReduceOpacity","StyledComboBoxPlaceholderImage","src","$shouldShowRoundImage","StyledComboBoxInput","disabled","onChange","onBlur","onFocus","StyledComboBoxPlaceholderText","suffixElement","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","StyledComboBoxBody","$maxHeight","$browser","name","displayName","_default","exports"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice, useFunctions, useValues } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    FocusEventHandler,\n    Fragment,\n    ReactHTML,\n    type ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrowserName } from '../../types/chayns';\nimport { calculateContentWidth } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\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 width of the body.\n     */\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?: DropdownDirection;\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?: number;\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    /**\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, a clear icon is displayed at the end of the combo box if an item is selected.\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     */\n    shouldShowTransparentBackground?: 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     * If true, the dropdown will use the maximum width of the items.\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    bodyWidth,\n    direction = DropdownDirection.RIGHT,\n    isDisabled = false,\n    lists,\n    maxHeight = 280,\n    onSelect,\n    placeholder,\n    prefix,\n    container,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowClearIcon,\n    shouldShowRoundImage,\n    onInputFocus,\n    shouldUseFullWidth = false,\n    onInputChange,\n    shouldUseCurrentItemWidth = false,\n    onInputBlur,\n    shouldShowTransparentBackground = false,\n    inputValue,\n    shouldDropDownUseMaxItemWidth = false,\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\n    const isInputFocused = useRef(false);\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const parentSize = useElementSize(styledComboBoxElementRef, { shouldUseParentElement: true });\n\n    const functions = useFunctions();\n    const values = useValues();\n\n    const isTouch = getIsTouch();\n\n    const { browser } = useDevice();\n\n    const areaProvider = useContext(AreaContext);\n\n    useEffect(() => {\n        if (shouldUseFullWidth && parentSize) {\n            setMinWidth(parentSize.width);\n        }\n    }, [parentSize, shouldUseFullWidth]);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    const shouldDisableActions = useMemo(() => {\n        if (!selectedItem) {\n            return false;\n        }\n\n        const combinedLists = lists.flatMap((list) => list.list);\n\n        return (\n            combinedLists.length === 1 &&\n            combinedLists.some((item) => item.value === selectedItem.value)\n        );\n    }, [lists, selectedItem]);\n\n    const contentHeight = useMemo(() => {\n        const flatItems = lists.flatMap((list) => list.list);\n\n        let result = flatItems.length * 36;\n\n        if (lists.length > 1) {\n            result += lists.length * 36;\n        }\n\n        if (maxHeight < result) {\n            result = maxHeight;\n        }\n\n        return result;\n    }, [lists, maxHeight]);\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 handleOpen = useCallback(() => {\n        setIsAnimating(true);\n    }, []);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\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    const handleClear = useCallback(\n        (event: React.MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            handleSetSelectedItem(undefined);\n        },\n        [handleSetSelectedItem],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) return;\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n\n                const children = contentRef.current?.children;\n\n                if (!children || children.length === 0) return;\n\n                const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                let newIndex = focusedIndex ?? -1;\n\n                let attempts = 0;\n\n                do {\n                    newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n\n                    let shouldSkip = false;\n\n                    if (\n                        newElement.id.startsWith('combobox-group--') ||\n                        newElement.id.endsWith('--disabled-item')\n                    ) {\n                        shouldSkip = true;\n                    }\n\n                    if (!shouldSkip) break;\n\n                    attempts++;\n                } while (attempts < children.length);\n\n                if (focusedIndex !== null) {\n                    const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                    prevElement.tabIndex = -1;\n                }\n\n                setFocusedIndex(newIndex);\n\n                const focusedElement = children[newIndex] as HTMLDivElement;\n\n                focusedElement.tabIndex = 0;\n\n                focusedElement.focus();\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) return;\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\n                    return !!newSelectedItem;\n                });\n\n                if (newSelectedItem) {\n                    handleSetSelectedItem(newSelectedItem);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => document.removeEventListener('keydown', handleKeyDown);\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\n        let baseWidth = calculateContentWidth(\n            [\n                ...allItems,\n                { text: placeholder, value: 'placeholder' },\n                ...(selectedItem ? [selectedItem] : []),\n            ],\n            functions,\n            values,\n        );\n\n        if (shouldDropDownUseMaxItemWidth) {\n            baseWidth += 20 + 2; // 20px padding left and right and 2px border\n            setBodyMinWidth(baseWidth);\n            setMinWidth(baseWidth);\n            return;\n        }\n\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 = 20 + 2 + 40 + 40; // padding + border + arrow icon + optional clear 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 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        // 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        shouldDropDownUseMaxItemWidth,\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                <Fragment key={list.groupName ?? 'default-group'}>\n                    {list.groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                            {list.groupName}\n                        </StyledComboBoxTopic>\n                    )}\n                    {list.list.map((item) => (\n                        <ComboBoxItem\n                            item={item}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            onSelect={handleSetSelectedItem}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={list.shouldShowRoundImage ?? shouldShowRoundImage}\n                        />\n                    ))}\n                </Fragment>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\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                    $shouldShowTransparentBackground={shouldShowTransparentBackground}\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                    {shouldShowClearIcon && internalSelectedItem && (\n                        <StyledComboBoxClearIconWrapper onClick={handleClear}>\n                            <Icon icons={['fa fa-times']} />\n                        </StyledComboBoxClearIconWrapper>\n                    )}\n                    {!shouldDisableActions && (\n                        <StyledComboBoxIconWrapper\n                            $shouldShowBorderLeft={\n                                shouldShowClearIcon === true && internalSelectedItem !== undefined\n                            }\n                        >\n                            <Icon icons={['fa fa-chevron-down']} />\n                        </StyledComboBoxIconWrapper>\n                    )}\n                </StyledComboBoxHeader>\n                {styledComboBoxElementRef.current && (\n                    <DropdownBodyWrapper\n                        anchorElement={styledComboBoxElementRef.current}\n                        bodyWidth={bodyWidth}\n                        contentHeight={contentHeight}\n                        onClose={handleClose}\n                        direction={direction}\n                        container={container}\n                        shouldShowDropdown={isAnimating}\n                        minBodyWidth={bodyWidth ?? bodyMinWidth}\n                        maxHeight={maxHeight}\n                    >\n                        <StyledComboBoxBody\n                            $shouldUseCurrentItemWidth={shouldUseCurrentItemWidth}\n                            $maxHeight={maxHeight}\n                            $minWidth={bodyWidth ?? bodyMinWidth}\n                            $browser={browser?.name as BrowserName}\n                            ref={contentRef}\n                            tabIndex={0}\n                        >\n                            {comboBoxGroups}\n                        </StyledComboBoxBody>\n                    </DropdownBodyWrapper>\n                )}\n            </StyledComboBox>\n        ),\n        [\n            minWidth,\n            shouldUseFullWidth,\n            shouldUseCurrentItemWidth,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isTouch,\n            shouldShowTransparentBackground,\n            isDisabled,\n            shouldChangeColor,\n            shouldShowBigImage,\n            prefix,\n            selectedItem,\n            internalSelectedItem,\n            placeholderImageUrl,\n            shouldShowRoundPlaceholderImage,\n            placeholderIcon,\n            inputValue,\n            onInputChange,\n            handleInputBlur,\n            handleInputFocus,\n            placeholderText,\n            shouldShowClearIcon,\n            handleClear,\n            shouldDisableActions,\n            bodyWidth,\n            contentHeight,\n            handleClose,\n            container,\n            bodyMinWidth,\n            maxHeight,\n            browser?.name,\n            comboBoxGroups,\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

@@ -38,11 +38,7 @@ const StyledComboBox = exports.StyledComboBox = _styledComponents.default.div`
 `;
 const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.default.div`
     display: flex;
-    background-color: ${({
-  theme,
-  $shouldChangeColor
-}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
-    border: 1px solid rgba(160, 160, 160, 0.3);
+    border: 1px solid transparent;
     cursor: ${({
   $isDisabled
 }) => !$isDisabled ? 'pointer' : 'default'};
@@ -52,6 +48,35 @@ const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.de
 }) => $isDisabled ? 0.5 : 1};
     transition: background-color 0.2s ease-in-out;
 
+    ${({
+  theme,
+  $shouldShowTransparentBackground,
+  $shouldChangeColor
+}) => {
+  if ($shouldShowTransparentBackground) {
+    if (theme.colorMode === 'dark') {
+      return (0, _styledComponents.css)`
+                    border-color: rgba(0, 0, 0, 0.5);
+                    background-color: transparent;
+                `;
+    }
+    if (theme.colorMode === 'light') {
+      return (0, _styledComponents.css)`
+                    border-color: rgba(255, 255, 255, 0.5);
+                    background-color: transparent;
+                `;
+    }
+    return (0, _styledComponents.css)`
+                border-color: rgba(160, 160, 160, 0.5);
+                background-color: transparent;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            border-color: rgba(160, 160, 160, 0.3);
+            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+        `;
+}}
+
     ${({
   $shouldShowBigImage
 }) => $shouldShowBigImage && (0, _styledComponents.css)`

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","theme","$shouldChangeColor","colorMode","$isDisabled","$shouldShowBigImage","$isOpen","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\nimport { DropdownDirection } from '../../types/dropdown';\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: DropdownDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    background-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    justify-content: space-between;\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                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.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    padding: 4px 10px;\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 StyledComboBoxClearIconWrapper = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = { $shouldShowBorderLeft: boolean };\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowBorderLeft }) =>\n        $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $shouldUseCurrentItemWidth: boolean;\n    $browser: BrowserName;\n    $maxHeight: number;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    max-height: ${({ $maxHeight }) => $maxHeight}px;\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: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\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":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,SAAA,GAAAD,OAAA;AAAyD,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAQlD,MAAMkB,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA,MAAM,CAAC;EAAEC,mBAAmB;EAAEC,SAAS;EAAEC;AAA2B,CAAC,KAAK;EAClE,IAAI,OAAOD,SAAS,KAAK,QAAQ,EAAE;IAC/B,OAAO,IAAAE,qBAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIH,mBAAmB,EAAE;IACrB,OAAO,IAAAG,qBAAG;AACtB,6BAA6BF,SAAS;AACtC;AACA,aAAa;EACL;EAEA,IAAIC,0BAA0B,EAAE;IAC5B,OAAO,EAAE;EACb;EAEA,OAAO,IAAAC,qBAAG;AAClB,yBAAyBF,SAAS;AAClC,yBAAyBA,SAAS;AAClC,SAAS;AACL,CAAC;AACL,CAAC;AAWM,MAAMG,oBAAoB,GAAAP,OAAA,CAAAO,oBAAA,GAAGN,yBAAM,CAACC,GAA8B;AACzE;AACA,wBAAwB,CAAC;EAAEM,KAAK;EAAEC;AAA8C,CAAC,KACzED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA,cAAc,CAAC;EAAEG;AAAY,CAAC,KAAM,CAACA,WAAW,GAAG,SAAS,GAAG,SAAU;AACzE;AACA,eAAe,CAAC;EAAEA;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,MAAM,CAAC;EAAEC;AAAoB,CAAC,KACtBA,mBAAmB,IACnB,IAAAN,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEO,OAAO;EAAEC;AAAW,CAAC,KAAK;EAC3B,IAAID,OAAO,EAAE;IACT,OAAO,CACHE,2BAAiB,CAACC,MAAM,EACxBD,2BAAiB,CAACE,WAAW,EAC7BF,2BAAiB,CAACG,YAAY,CACjC,CAACC,QAAQ,CAACL,UAAU,CAAC,GAChB,IAAAR,qBAAG;AACrB;AACA;AACA,mBAAmB,GACD,IAAAA,qBAAG;AACrB;AACA;AACA,mBAAmB;EACX;EAEA,OAAO,IAAAA,qBAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EAAEc,QAAQ;EAAET,WAAW;EAAEH;AAAiC,CAAC,KAC1D,CAACY,QAAQ,IACT,CAACT,WAAW,IACZ,IAAAL,qBAAG;AACX;AACA,oCAAoCE,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;AAIM,MAAMa,yBAAyB,GAAArB,OAAA,CAAAqB,yBAAA,GAAGpB,yBAAM,CAACC,GAAmC;AACnF;AACA,aAAa,CAAC;EAAEM;AAAsC,CAAC,KAAKA,KAAK,CAACc,IAAI;AACtE;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,GAAG,GAAG,CAAE;AAC7E,CAAC;AAEM,MAAMC,6BAA6B,GAAAxB,OAAA,CAAAwB,6BAAA,GAAGvB,yBAAM,CAACC,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAEM,MAAMuB,yCAAyC,GAAAzB,OAAA,CAAAyB,yCAAA,GAAGxB,yBAAM,CAACC,GAAG;AACnE;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMwB,oBAAoB,GAAA1B,OAAA,CAAA0B,oBAAA,GAAGzB,yBAAM,CAACC,GAAG;AAC9C;AACA;AACA;AACA,CAAC;AAEM,MAAMyB,mBAAmB,GAAA3B,OAAA,CAAA2B,mBAAA,GAAG1B,yBAAM,CAAC2B,KAAK;AAC/C,aAAa,CAAC;EAAEpB;AAAwB,CAAC,KAAKA,KAAK,CAACc,IAAI;AACxD;AACA;AACA;AACA,CAAC;AAOM,MAAMO,8BAA8B,GAAA7B,OAAA,CAAA6B,8BAAA,GAAG5B,yBAAM,CAAC6B,GAAwC;AAC7F;AACA,eAAe,CAAC;EAAEtB;AAA2C,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACnF,cAAc,CAAC;EAAEI;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AAClF,aAAa,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACjF;AACA,MAAM,CAAC;EAAEmB;AAAsB,CAAC,KACxBA,qBAAqB,IACrB,IAAAzB,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAM0B,8BAA8B,GAAAhC,OAAA,CAAAgC,8BAAA,GAAG/B,yBAAM,CAACC,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAM+B,yBAAyB,GAAAjC,OAAA,CAAAiC,yBAAA,GAAGhC,yBAAM,CAACC,GAAmC;AACnF;AACA,mBAAmB,CAAC;EAAEgC;AAAsB,CAAC,KACrCA,qBAAqB,GAAG,oCAAoC,GAAG,MAAM;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASM,MAAMC,kBAAkB,GAAAnC,OAAA,CAAAmC,kBAAA,GAAGlC,yBAAM,CAACC,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEkC;AAAW,CAAC,KAAKA,UAAU;AAChD;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAE7B;AAA+B,CAAC,KAC3C6B,QAAQ,KAAK,SAAS,GAChB,IAAA/B,qBAAG;AACjB,0CAA0CE,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAF,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CE,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC;AAIM,MAAM8B,mBAAmB,GAAAtC,OAAA,CAAAsC,mBAAA,GAAGrC,yBAAM,CAACC,GAAG;AAC7C;AACA,kBAAkB,CAAC;EAAEM;AAAgC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEA;AAAgC,CAAC,KAAKA,KAAK,CAAC,eAAe,CAAC;AACvF,CAAC","ignoreList":[]}
+{"version":3,"file":"ComboBox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\nimport { DropdownDirection } from '../../types/dropdown';\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: DropdownDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    border: 1px solid transparent;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    justify-content: space-between;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(0, 0, 0, 0.5);\n                    background-color: transparent;\n                `;\n            }\n\n            if (theme.colorMode === 'light') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                    background-color: transparent;\n                `;\n            }\n\n            return css`\n                border-color: rgba(160, 160, 160, 0.5);\n                background-color: transparent;\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor\n                ? theme['000']\n                : theme['100']};\n        `;\n    }}\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.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    padding: 4px 10px;\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 StyledComboBoxClearIconWrapper = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = { $shouldShowBorderLeft: boolean };\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowBorderLeft }) =>\n        $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $shouldUseCurrentItemWidth: boolean;\n    $browser: BrowserName;\n    $maxHeight: number;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    max-height: ${({ $maxHeight }) => $maxHeight}px;\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: 10px;\n                      height: 10px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                      background-clip: padding-box;\n                      border: solid 3px transparent;\n                  }\n\n                  &::-webkit-scrollbar-corner {\n                      background-color: transparent;\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/input/Input.js

@@ -40,6 +40,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   isInvalid = false,
   shouldPreventPlaceholderAnimation = false,
   id,
+  shouldShowTransparentBackground = false,
   autoComplete
 }, ref) => {
   var _rightElement$props;
@@ -92,7 +93,9 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   }, [value]);
   let backgroundColor;
   let color;
-  if (areaProvider.contentCardType && [_contentCard.ContentCardType.Error, _contentCard.ContentCardType.Success, _contentCard.ContentCardType.Warning].includes(areaProvider.contentCardType)) {
+  if (shouldShowTransparentBackground) {
+    backgroundColor = 'transparent';
+  } else if (areaProvider.contentCardType && [_contentCard.ContentCardType.Error, _contentCard.ContentCardType.Success, _contentCard.ContentCardType.Warning].includes(areaProvider.contentCardType)) {
     backgroundColor = 'white';
     color = '#555';
   } else if (areaProvider.shouldChangeColor) {
@@ -116,6 +119,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     className: "beta-chayns-input",
     $isDisabled: isDisabled
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContentWrapper, {
+    $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $backgroundColor: backgroundColor,
     $isInvalid: isInvalid,
     $shouldRoundRightCorners: shouldShowBorder,

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

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

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

@@ -20,11 +20,7 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
   theme,
   $backgroundColor
 }) => $backgroundColor ?? theme['100']};
-    border: 1px solid
-        ${({
-  theme,
-  $isInvalid
-}) => $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};
+    border: 1px solid transparent;
     color: ${({
   theme
 }) => theme['006']};
@@ -33,6 +29,36 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
     width: 100%;
     transition: opacity 0.3s ease;
 
+    ${({
+  theme,
+  $isInvalid,
+  $shouldShowTransparentBackground
+}) => {
+  if ($isInvalid) {
+    return (0, _styledComponents.css)`
+                border-color: ${theme.wrong};
+            `;
+  }
+  if ($shouldShowTransparentBackground) {
+    if (theme.colorMode === 'dark') {
+      return (0, _styledComponents.css)`
+                    border-color: rgba(0, 0, 0, 0.5);
+                `;
+    }
+    if (theme.colorMode === 'light') {
+      return (0, _styledComponents.css)`
+                    border-color: rgba(255, 255, 255, 0.5);
+                `;
+    }
+    return (0, _styledComponents.css)`
+                border-color: rgba(160, 160, 160, 0.5);
+            `;
+  }
+  return (0, _styledComponents.css)`
+            border-color: rgba(160, 160, 160, 0.3);
+        `;
+}}
+
     ${({
   $size
 }) => $size === 'small' && (0, _styledComponents.css)`

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","wrong","$size","css","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n        $backgroundColor ?? theme['100']};\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n    $placeholderWidth: number;\n    $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n        $color ?? ($isInvalid ? theme.wrong : theme.text)};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","css","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\nimport { CSSProperties } from 'react';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $size: InputSize;\n    $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $backgroundColor }: StyledInputContentWrapperProps) =>\n        $backgroundColor ?? theme['100']};\n    border: 1px solid transparent;\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ theme, $isInvalid, $shouldShowTransparentBackground }) => {\n        if ($isInvalid) {\n            return css`\n                border-color: ${theme.wrong};\n            `;\n        }\n\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(0, 0, 0, 0.5);\n                `;\n            }\n\n            if (theme.colorMode === 'light') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                `;\n            }\n\n            return css`\n                border-color: rgba(160, 160, 160, 0.5);\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n        `;\n    }}\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $color?: CSSProperties['color'];\n    $isInvalid?: boolean;\n    $placeholderWidth: number;\n    $shouldShowCenteredContent: boolean;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $color, $isInvalid }: StyledInputFieldProps) =>\n        $color ?? ($isInvalid ? theme.wrong : theme.text)};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}