@chayns-components/core 5.0.0-beta.840 → 5.0.0-beta.844

package/lib/cjs/components/tag-input/TagInput.js

@@ -99,7 +99,7 @@ const TagInput = ({
       text,
       id
     }) => {
-      items.push( /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      items.push(/*#__PURE__*/_react.default.createElement(_Badge.default, {
         key: `tag-input-${id}`,
         backgroundColor: id === selectedId ? theme['206'] ?? undefined : undefined
       }, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagWrapper, null, /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagWrapperText, null, text), /*#__PURE__*/_react.default.createElement(_Icon.default, {

package/lib/cjs/components/tag-input/TagInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n    const [internalTags, setInternalTags] = useState<Tag[]>();\n    const [currentValue, setCurrentValue] = useState('');\n    const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (tags) {\n            setInternalTags(tags);\n        }\n    }, [tags]);\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                setCurrentValue((prevValue) => {\n                    if (!prevValue) {\n                        return '';\n                    }\n\n                    setInternalTags((prevTags) => {\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            onAdd(newTag);\n                        }\n\n                        return prevTags ? [...prevTags, newTag] : [newTag];\n                    });\n\n                    return '';\n                });\n            }\n\n            if (event.key === 'Backspace' && currentValue === '') {\n                if (!selectedId) {\n                    if (!internalTags) {\n                        return;\n                    }\n\n                    const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                    setSelectedId(newSelectedId);\n\n                    return;\n                }\n\n                setInternalTags((prevState) => {\n                    if (!prevState) {\n                        return prevState;\n                    }\n\n                    const removedId = prevState[prevState.length - 1]?.id;\n\n                    if (!removedId) {\n                        return prevState;\n                    }\n\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(removedId);\n                    }\n\n                    setSelectedId(undefined);\n\n                    return updatedTags;\n                });\n            }\n        },\n        [currentValue, internalTags, onAdd, onRemove, selectedId],\n    );\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setCurrentValue(event.target.value);\n\n        if (event.target.value !== '') {\n            setSelectedId(undefined);\n        }\n    };\n\n    const handleIconClick = useCallback(\n        (id: string) => {\n            setInternalTags((prevState) => {\n                const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                return updatedTags;\n            });\n        },\n        [onRemove],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!internalTags) {\n            return items;\n        }\n\n        internalTags.forEach(({ text, id }) => {\n            items.push(\n                <Badge\n                    key={`tag-input-${id}`}\n                    backgroundColor={\n                        id === selectedId ? (theme['206'] as string) ?? undefined : undefined\n                    }\n                >\n                    <StyledTagInputTagWrapper>\n                        <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                        <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                    </StyledTagInputTagWrapper>\n                </Badge>,\n            );\n        });\n\n        return items;\n    }, [handleIconClick, internalTags, selectedId, theme]);\n\n    return useMemo(\n        () => (\n            <StyledTagInput>\n                {content}\n                <StyledTagInputTagInput\n                    placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                    onKeyDown={handleKeyDown}\n                    onChange={handleChange}\n                    value={currentValue}\n                />\n            </StyledTagInput>\n        ),\n        [content, currentValue, handleKeyDown, placeholder, tags],\n    );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n    const [internalTags, setInternalTags] = useState<Tag[]>();\n    const [currentValue, setCurrentValue] = useState('');\n    const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (tags) {\n            setInternalTags(tags);\n        }\n    }, [tags]);\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'Enter') {\n                setCurrentValue((prevValue) => {\n                    if (!prevValue) {\n                        return '';\n                    }\n\n                    setInternalTags((prevTags) => {\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            onAdd(newTag);\n                        }\n\n                        return prevTags ? [...prevTags, newTag] : [newTag];\n                    });\n\n                    return '';\n                });\n            }\n\n            if (event.key === 'Backspace' && currentValue === '') {\n                if (!selectedId) {\n                    if (!internalTags) {\n                        return;\n                    }\n\n                    const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                    setSelectedId(newSelectedId);\n\n                    return;\n                }\n\n                setInternalTags((prevState) => {\n                    if (!prevState) {\n                        return prevState;\n                    }\n\n                    const removedId = prevState[prevState.length - 1]?.id;\n\n                    if (!removedId) {\n                        return prevState;\n                    }\n\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(removedId);\n                    }\n\n                    setSelectedId(undefined);\n\n                    return updatedTags;\n                });\n            }\n        },\n        [currentValue, internalTags, onAdd, onRemove, selectedId],\n    );\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setCurrentValue(event.target.value);\n\n        if (event.target.value !== '') {\n            setSelectedId(undefined);\n        }\n    };\n\n    const handleIconClick = useCallback(\n        (id: string) => {\n            setInternalTags((prevState) => {\n                const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                return updatedTags;\n            });\n        },\n        [onRemove],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!internalTags) {\n            return items;\n        }\n\n        internalTags.forEach(({ text, id }) => {\n            items.push(\n                <Badge\n                    key={`tag-input-${id}`}\n                    backgroundColor={\n                        id === selectedId ? (theme['206'] as string) ?? undefined : undefined\n                    }\n                >\n                    <StyledTagInputTagWrapper>\n                        <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                        <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n                    </StyledTagInputTagWrapper>\n                </Badge>,\n            );\n        });\n\n        return items;\n    }, [handleIconClick, internalTags, selectedId, theme]);\n\n    return useMemo(\n        () => (\n            <StyledTagInput>\n                {content}\n                <StyledTagInputTagInput\n                    placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                    onKeyDown={handleKeyDown}\n                    onChange={handleChange}\n                    value={currentValue}\n                />\n            </StyledTagInput>\n        ),\n        [content, currentValue, handleKeyDown, placeholder, tags],\n    );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tooltip/Tooltip.js

@@ -22,7 +22,7 @@ const Tooltip = ({
 }) => {
   const tooltipRef = (0, _react.useRef)(null);
   const content = (0, _react.useMemo)(() => {
-    if ( /*#__PURE__*/(0, _react.isValidElement)(item)) {
+    if (/*#__PURE__*/(0, _react.isValidElement)(item)) {
       return item;
     }
     return /*#__PURE__*/_react.default.createElement(_TooltipItem.default, {

package/lib/cjs/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\n    itemWidth,\n    shouldUseChildrenWidth = true,\n}) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren\n                        $isOnlyText={isTextOnlyElement(children)}\n                        $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        shouldUseChildrenWidth={false}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, shouldUseChildrenWidth, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\n    itemWidth,\n    shouldUseChildrenWidth = true,\n}) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren\n                        $isOnlyText={isTextOnlyElement(children)}\n                        $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        shouldUseChildrenWidth={false}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, shouldUseChildrenWidth, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/utils/calculate.js

@@ -26,7 +26,7 @@ const calculateContentWidth = list => {
     if (suffixElement) {
       // ColorSchemeProvider is used to prevent missing scheme context error.
       // Due to the fact that the element is never rendered visible, the values are irrelevant.
-      div.innerHTML += (0, _server.renderToString)( /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
+      div.innerHTML += (0, _server.renderToString)(/*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
         color: "#005EB8",
         colorMode: 0
       }, suffixElement));

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

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

package/lib/esm/components/amount-control/AmountControl.js

@@ -13,11 +13,13 @@ const AmountControl = _ref => {
     maxAmount,
     minAmount = 0,
     onChange,
-    shouldShowWideInput = false
+    shouldShowWideInput = false,
+    step: stepProp = 1
   } = _ref;
   const [amountValue, setAmountValue] = useState(minAmount);
   const [inputValue, setInputValue] = useState(minAmount.toString());
   const [displayState, setDisplayState] = useState('default');
+  const step = useMemo(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = useRef(null);
 
   /**
@@ -60,37 +62,53 @@ const AmountControl = _ref => {
   }, [amount, maxAmount, minAmount]);
   const handleAmountAdd = useCallback(() => {
     setAmountValue(prevState => {
-      const newAmount = prevState + 1;
+      const newAmount = checkForValidAmount({
+        amount: prevState + step,
+        minAmount,
+        maxAmount
+      });
       if (typeof onChange === 'function') {
         onChange(newAmount);
       }
-      return newAmount;
+      return typeof amount === 'number' ? prevState : newAmount;
     });
-    setInputValue(prevState => (Number(prevState) + 1).toString());
-  }, [onChange]);
+    setInputValue(prevState => checkForValidAmount({
+      amount: Number(prevState) + step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount, onChange, step]);
   const handleAmountRemove = useCallback(() => {
     if (displayState === 'default') {
       return;
     }
     setAmountValue(prevState => {
-      const newAmount = prevState - 1;
+      const newAmount = checkForValidAmount({
+        amount: prevState - step,
+        minAmount,
+        maxAmount
+      });
       if (typeof onChange === 'function') {
         onChange(newAmount);
       }
       return newAmount;
     });
-    setInputValue(prevState => (Number(prevState) - 1).toString());
-  }, [displayState, onChange]);
+    setInputValue(prevState => checkForValidAmount({
+      amount: Number(prevState) - step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [displayState, maxAmount, minAmount, onChange, step]);
   const handleFirstAmount = useCallback(() => {
     if (amountValue !== minAmount) {
       return;
     }
     if (typeof onChange === 'function') {
-      onChange(minAmount + 1);
+      onChange(minAmount + step);
     }
-    setAmountValue(minAmount + 1);
-    setInputValue((minAmount + 1).toString());
-  }, [amountValue, minAmount, onChange]);
+    setAmountValue(minAmount + step);
+    setInputValue((minAmount + step).toString());
+  }, [amountValue, minAmount, onChange, step]);
   const handleDeleteIconClick = useCallback(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -101,30 +119,31 @@ const AmountControl = _ref => {
     }
   }, [handleAmountRemove, inputValue]);
   const handleInputBlur = useCallback(() => {
-    setAmountValue(inputValue === '' ? minAmount : Number(inputValue));
+    const checkedValue = checkForValidAmount({
+      minAmount,
+      maxAmount,
+      amount: Math.round(Number(inputValue) / step) * step
+    });
+    setAmountValue(checkedValue);
+    setInputValue(checkedValue.toString());
     if (typeof onChange === 'function') {
-      onChange(inputValue === '' ? minAmount : Number(inputValue));
+      onChange(checkedValue);
     }
     if (inputValue === '') {
       setInputValue(minAmount.toString());
     }
-  }, [inputValue, minAmount, onChange]);
+  }, [inputValue, maxAmount, minAmount, onChange, step]);
   const handleInputChange = useCallback(event => {
     const {
       value
     } = event.target;
-    const valueBeforeCheck = Number(value.replace(/\D/g, ''));
-    const checkedValue = checkForValidAmount({
-      minAmount,
-      maxAmount,
-      amount: valueBeforeCheck
-    });
-    if (valueBeforeCheck < minAmount && minAmount === 0) {
+    const valueBefore = Number(value.replace(/\D/g, ''));
+    if (valueBefore < minAmount && minAmount === 0) {
       setInputValue('0');
       return;
     }
-    setInputValue(checkedValue === 0 ? '' : checkedValue.toString());
-  }, [maxAmount, minAmount]);
+    setInputValue(valueBefore === 0 ? '' : valueBefore.toString());
+  }, [minAmount]);
   const leftIcon = useMemo(() => {
     let item = null;
     switch (displayState) {
@@ -240,7 +259,7 @@ const AmountControl = _ref => {
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, minAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;

package/lib/esm/components/amount-control/AmountControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowWideInput = false,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > minAmount:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = prevState + 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    }, [onChange]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = prevState - 1;\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    }, [displayState, onChange]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + 1);\n        }\n\n        setAmountValue(minAmount + 1);\n        setInputValue((minAmount + 1).toString());\n    }, [amountValue, minAmount, onChange]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? minAmount : Number(inputValue));\n\n        if (typeof onChange === 'function') {\n            onChange(inputValue === '' ? minAmount : Number(inputValue));\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, minAmount, onChange]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: valueBeforeCheck,\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon, iconColor]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n    /**\n     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > minAmount:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon, iconColor]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                {displayState === 'delete' || inputValue === '0' ? (\n                    <StyledAmountControlPseudoInput\n                        onClick={handleDeleteIconClick}\n                        $shouldShowWideInput={shouldShowWideInput}\n                    >\n                        {displayState === 'default' && label ? label : inputValue}\n                    </StyledAmountControlPseudoInput>\n                ) : (\n                    <StyledAmountControlInput\n                        ref={inputRef}\n                        $displayState={displayState}\n                        $shouldShowIcon={shouldShowIcon}\n                        $shouldShowWideInput={shouldShowWideInput}\n                        $hasFocus={hasFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        value={displayState === 'default' && label ? label : inputValue}\n                    />\n                )}\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            minAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -264,7 +264,7 @@ const ComboBox = _ref => {
     return styles;
   }, [direction, internalCoordinates.x, internalCoordinates.y]);
   useEffect(() => {
-    setPortal(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
+    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
     }, isAnimating && /*#__PURE__*/React.createElement(StyledMotionComboBoxBody, {
       $browser: browser?.name,

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","shouldUseFullWidth","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    shouldUseFullWidth = false,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n\n        const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n        const width =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        // 40px = icon width + flex gap\n        setMinWidth(\n            shouldUseFullWidth\n                ? width\n                : calculateContentWidth([\n                      ...allItems,\n                      { text: placeholder, value: 'placeholder' },\n                  ]) +\n                      45 +\n                      (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                      (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\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    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={minWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder\n                        $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                    >\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderIcon && <Icon icons={placeholderIcon} />}\n                        {placeholderText}\n                        {internalSelectedItem &&\n                            internalSelectedItem.suffixElement &&\n                            internalSelectedItem.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            internalSelectedItem,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            portal,\n            selectedItem,\n            shouldShowRoundImage,\n            shouldUseFullWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAGRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,qBAAqB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACnF,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SACIC,cAAc,EACdC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,mBAAmB,EACnBC,wBAAwB,QACrB,mBAAmB;AAiE1B,MAAMC,QAA2B,GAAGC,IAAA,IAY9B;EAAA,IAZ+B;IACjCC,SAAS,GAAGf,iBAAiB,CAACgB,MAAM;IACpCC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,QAAQ;IACRC,WAAW;IACXC,SAAS,GAAGC,QAAQ,CAACC,IAAI;IACzBC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,kBAAkB,GAAG;EACzB,CAAC,GAAAd,IAAA;EACG,MAAM,CAACe,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGhC,QAAQ,CAAgB,CAAC;EACjF,MAAM,CAACiC,WAAW,EAAEC,cAAc,CAAC,GAAGlC,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACmC,QAAQ,EAAEC,WAAW,CAAC,GAAGpC,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAM,CAACqC,YAAY,EAAEC,eAAe,CAAC,GAAGtC,QAAQ,CAAgB,IAAI,CAAC;EACrE,MAAM,CAACuC,SAAS,EAAEC,YAAY,CAAC,GAAGxC,QAAQ,CAA6B,QAAQ,CAAC;EAChF,MAAM,CAACyC,MAAM,EAAEC,SAAS,CAAC,GAAG1C,QAAQ,CAAc,CAAC;EACnD,MAAM,CAAC2C,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG5C,QAAQ,CAAyB;IACnF6C,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EAEF,MAAMC,wBAAwB,GAAGhD,MAAM,CAAiB,IAAI,CAAC;EAC7D,MAAMiD,UAAU,GAAGjD,MAAM,CAAwB,IAAI,CAAC;EAEtD,MAAM;IAAEkD;EAAQ,CAAC,GAAGxD,SAAS,CAAC,CAAC;EAE/B,MAAMyD,OAAO,GAAG7C,UAAU,CAAC,CAAC;EAE5B,MAAM8C,WAAW,GAAGvD,WAAW,CAC1BwD,KAAiB,IAAK;IACnB,IACIL,wBAAwB,CAACM,OAAO,IAChC,CAACN,wBAAwB,CAACM,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,IAChEP,UAAU,CAACK,OAAO,IAClB,CAACL,UAAU,CAACK,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EACpD;MACErB,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACa,wBAAwB,CAC7B,CAAC;EAED,MAAMS,UAAU,GAAG5D,WAAW,CAAC,MAAM;IACjC,IAAImD,wBAAwB,CAACM,OAAO,EAAE;MAClC,MAAM;QACFI,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBC;MACJ,CAAC,GAAGd,wBAAwB,CAACM,OAAO,CAACS,qBAAqB,CAAC,CAAC;MAC5D,MAAM;QAAEL,IAAI,EAAEM,aAAa;QAAEJ,GAAG,EAAEK;MAAa,CAAC,GAAGxC,SAAS,CAACsC,qBAAqB,CAAC,CAAC;MAEpF,MAAMjB,CAAC,GAAGa,YAAY,GAAGK,aAAa,GAAGvC,SAAS,CAACyC,UAAU;MAC7D,MAAMnB,CAAC,GAAGc,WAAW,GAAGI,YAAY,GAAGxC,SAAS,CAAC0C,SAAS;MAE1DtB,sBAAsB,CAAC;QACnBC,CAAC;QACDC,CAAC,EAAE7B,SAAS,KAAKf,iBAAiB,CAACiE,GAAG,GAAGrB,CAAC,GAAGA,CAAC,GAAGe;MACrD,CAAC,CAAC;MAEF3B,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACV,SAAS,EAAEP,SAAS,CAAC,CAAC;EAE1B,MAAMmD,WAAW,GAAGxE,WAAW,CAAC,MAAM;IAClCsC,cAAc,CAAC,KAAK,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACIrC,SAAS,CAAC,MAAM;IACZ4B,QAAQ,CAAC4C,gBAAgB,CAAC,OAAO,EAAElB,WAAW,CAAC;IAE/C,OAAO,MAAM;MACT1B,QAAQ,CAAC6C,mBAAmB,CAAC,OAAO,EAAEnB,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAEJ,wBAAwB,CAAC,CAAC;;EAE3C;AACJ;AACA;EACI,MAAMwB,qBAAqB,GAAG3E,WAAW,CACpC4E,YAA2B,IAAK;IAC7BxC,uBAAuB,CAACwC,YAAY,CAAC;IACrCtC,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIZ,QAAQ,EAAE;MACVA,QAAQ,CAACkD,YAAY,CAAC;IAC1B;EACJ,CAAC,EACD,CAAClD,QAAQ,CACb,CAAC;EAEDzB,SAAS,CAAC,MAAM;IACZ,MAAM4E,cAAc,GAAGzB,UAAU,CAACK,OAAO;IAEzC,IAAIZ,MAAM,IAAIR,WAAW,IAAIwC,cAAc,EAAE;MACzC,MAAMC,YAAY,GAAGD,cAAc,CAACC,YAAY,IAAI,CAAC;MAErD,MAAMC,iBAAiB,GAAGvE,oBAAoB,CAC1CiB,SAAS,EACT0B,wBAAwB,CAACM,OAAO,IAAI5B,QAAQ,CAACC,IACjD,CAAC;MAEDc,YAAY,CAACkC,YAAY,GAAGC,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxE;EACJ,CAAC,EAAE,CAAC1C,WAAW,EAAEZ,SAAS,EAAEoB,MAAM,CAAC,CAAC;EAEpC5C,SAAS,CAAC,MAAM;IACZ,MAAM+E,aAAa,GAAIC,CAAgB,IAAK;MACxC,IAAI,CAAC5C,WAAW,EAAE;QACd;MACJ;MAEA,IAAI4C,CAAC,CAACC,GAAG,KAAK,SAAS,IAAID,CAAC,CAACC,GAAG,KAAK,WAAW,EAAE;QAC9CD,CAAC,CAACE,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,GAAGhC,UAAU,CAACK,OAAO,EAAE2B,QAAQ;QAC7C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMC,QAAQ,GACV7C,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IAAIwC,CAAC,CAACC,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAGE,QAAQ,CAACC,MAAM,IAChED,QAAQ,CAACC,MAAM,GACf,CAAC;UAEX,IAAI5C,YAAY,KAAK,IAAI,EAAE;YACvB,MAAM8C,WAAW,GAAGH,QAAQ,CAAC3C,YAAY,CAAmB;YAC5D8C,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA9C,eAAe,CAAC4C,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGL,QAAQ,CAACE,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAIT,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIzC,YAAY,KAAK,IAAI,EAAE;QACnD,MAAMkD,OAAO,GAAGvC,UAAU,CAACK,OAAO,EAAE2B,QAAQ,CAAC3C,YAAY,CAAC;QAE1D,IAAI,CAACkD,OAAO,EAAE;UACV;QACJ;QAEA,MAAM;UAAEC;QAAG,CAAC,GAAGD,OAAO;QAEtB,IAAIE,eAA0C;QAE9CrE,KAAK,CAACsE,IAAI,CAAEC,IAAI,IAAK;UACjBF,eAAe,GAAGE,IAAI,CAACA,IAAI,CAACC,IAAI,CAC5BC,KAAA;YAAA,IAAC;cAAEC;YAAM,CAAC,GAAAD,KAAA;YAAA,OAAKE,MAAM,CAACD,KAAK,CAAC,KAAKN,EAAE,CAACQ,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;UAAA,CACtE,CAAC;UACD,OAAO,CAAC,CAACP,eAAe;QAC5B,CAAC,CAAC;QAEF,IAAI,CAACA,eAAe,EAAE;UAClB;QACJ;QAEAlB,qBAAqB,CAACkB,eAAe,CAAC;MAC1C;IACJ,CAAC;IAEDhE,QAAQ,CAAC4C,gBAAgB,CAAC,SAAS,EAAEO,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTnD,QAAQ,CAAC6C,mBAAmB,CAAC,SAAS,EAAEM,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACvC,YAAY,EAAEkC,qBAAqB,EAAEtC,WAAW,EAAEb,KAAK,CAAC,CAAC;;EAE7D;AACJ;AACA;EACIvB,SAAS,CAAC,MAAM;IACZ,MAAMoG,QAAQ,GAAG7E,KAAK,CAAC8E,OAAO,CAAEP,IAAI,IAAKA,IAAI,CAACA,IAAI,CAAC;IAEnD,MAAMQ,8BAA8B,GAAGF,QAAQ,CAACP,IAAI,CAACU,KAAA;MAAA,IAAC;QAAEC;MAAS,CAAC,GAAAD,KAAA;MAAA,OAAKC,QAAQ;IAAA,EAAC;IAChF,MAAMC,6BAA6B,GAAGL,QAAQ,CAACP,IAAI,CAACa,KAAA;MAAA,IAAC;QAAEC;MAAM,CAAC,GAAAD,KAAA;MAAA,OAAKC,KAAK;IAAA,EAAC;IAEzE,MAAMC,KAAK,GACP1D,wBAAwB,CAACM,OAAO,EAAEqD,aAAa,EAAE5C,qBAAqB,CAAC,CAAC,CAAC2C,KAAK,IAAI,CAAC;;IAEvF;IACA;IACA;IACArE,WAAW,CACPN,kBAAkB,GACZ2E,KAAK,GACLtG,qBAAqB,CAAC,CAClB,GAAG8F,QAAQ,EACX;MAAEU,IAAI,EAAEpF,WAAW;MAAEuE,KAAK,EAAE;IAAc,CAAC,CAC9C,CAAC,GACE,EAAE,IACDK,8BAA8B,GAAG,EAAE,GAAG,CAAC,CAAC,IACxCG,6BAA6B,GAAG,EAAE,GAAG,CAAC,CACrD,CAAC;EACL,CAAC,EAAE,CAAClF,KAAK,EAAEC,SAAS,EAAEE,WAAW,EAAEO,kBAAkB,CAAC,CAAC;;EAEvD;AACJ;AACA;EACIjC,SAAS,CAAC,MAAM;IACZqC,cAAc,CAAC,KAAK,CAAC;IACrBF,uBAAuB,CAACL,YAAY,CAAC;EACzC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMiF,mBAAmB,GAAG9G,OAAO,CAAC,MAAM;IACtC,IAAI6B,YAAY,EAAE;MACd,OAAOA,YAAY,CAAC0E,QAAQ;IAChC;IAEA,IAAItE,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACsE,QAAQ;IACxC;IAEA,OAAOQ,SAAS;EACpB,CAAC,EAAE,CAAC9E,oBAAoB,EAAEJ,YAAY,CAAC,CAAC;EAExC,MAAMmF,eAAe,GAAGhH,OAAO,CAAC,MAAM;IAClC,IAAI6B,YAAY,EAAE;MACd,OAAOA,YAAY,CAAC6E,KAAK;IAC7B;IAEA,IAAIzE,oBAAoB,EAAE;MACtB,OAAOA,oBAAoB,CAACyE,KAAK;IACrC;IAEA,OAAOK,SAAS;EACpB,CAAC,EAAE,CAAC9E,oBAAoB,EAAEJ,YAAY,CAAC,CAAC;;EAExC;AACJ;AACA;EACI,MAAMoF,eAAe,GAAGjH,OAAO,CAAC,MAAM;IAClC,IAAI6G,IAAI,GAAGpF,WAAW;IAEtB,IAAII,YAAY,EAAE;MACdgF,IAAI,GAAGhF,YAAY,CAACgF,IAAI;IAC5B,CAAC,MAAM,IAAI5E,oBAAoB,EAAE;MAC7B4E,IAAI,GAAG5E,oBAAoB,CAAC4E,IAAI;IACpC;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAC5E,oBAAoB,EAAER,WAAW,EAAEI,YAAY,CAAC,CAAC;;EAErD;AACJ;AACA;EACI,MAAMqF,iBAAiB,GAAGpH,WAAW,CAAC,MAAM;IACxC,IAAI,CAACuB,UAAU,EAAE;MACb,IAAIc,WAAW,EAAE;QACbmC,WAAW,CAAC,CAAC;MACjB,CAAC,MAAM;QACHZ,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EAAE,CAACY,WAAW,EAAEZ,UAAU,EAAEvB,WAAW,EAAEd,UAAU,CAAC,CAAC;EAEtD,MAAM8F,cAAc,GAAGnH,OAAO,CAC1B,MACIsB,KAAK,CAAC8F,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,SAAS;MAAEzB;IAAK,CAAC,GAAAwB,KAAA;IAAA,oBAC1BxH,KAAA,CAAA0H,aAAA;MAAKvC,GAAG,EAAEsC,SAAS,IAAI;IAAgB,GAClCA,SAAS,IAAIhG,KAAK,CAAC6D,MAAM,GAAG,CAAC,iBAC1BtF,KAAA,CAAA0H,aAAA,CAACxG,mBAAmB,QAAEuG,SAA+B,CACxD,EACAzB,IAAI,CAACuB,GAAG,CAAEI,IAAI;IAAA;IACX;IACA3H,KAAA,CAAA0H,aAAA,CAAC9G,YAAY;MACTiG,KAAK,EAAEc,IAAI,CAACd,KAAM;MAClBhB,EAAE,EAAE8B,IAAI,CAACxB,KAAM;MACfO,QAAQ,EAAEiB,IAAI,CAACjB,QAAS;MACxBlF,UAAU,EAAEmG,IAAI,CAACnG,UAAW;MAC5BoG,UAAU,EAAE5F,YAAY,GAAG2F,IAAI,CAACxB,KAAK,KAAKnE,YAAY,CAACmE,KAAK,GAAG,KAAM;MACrEhB,GAAG,EAAEwC,IAAI,CAACxB,KAAM;MAChBxE,QAAQ,EAAEiD,qBAAsB;MAChCiD,YAAY,EAAEF,IAAI,CAACE,YAAa;MAChC5F,kBAAkB,EAAEA,kBAAmB;MACvCC,oBAAoB,EAAEA,oBAAqB;MAC3C4F,OAAO,EAAEH,IAAI,CAACG,OAAQ;MACtBC,aAAa,EAAEJ,IAAI,CAACI,aAAc;MAClCf,IAAI,EAAEW,IAAI,CAACX,IAAK;MAChBb,KAAK,EAAEwB,IAAI,CAACxB;IAAM,CACrB,CACJ,CACA,CAAC;EAAA,CACT,CAAC,EACN,CAACvB,qBAAqB,EAAEnD,KAAK,EAAEO,YAAY,EAAEC,kBAAkB,EAAEC,oBAAoB,CACzF,CAAC;EAED,MAAM8F,UAAU,GAAG7H,OAAO,CAAC,MAAM;IAC7B,IAAI8H,MAAqB,GAAG;MAAEnE,IAAI,EAAEd,mBAAmB,CAACE,CAAC;MAAEc,GAAG,EAAEhB,mBAAmB,CAACG;IAAE,CAAC;IAEvF,IAAI7B,SAAS,KAAKf,iBAAiB,CAACiE,GAAG,EAAE;MACrCyD,MAAM,GAAG;QAAE,GAAGA,MAAM;QAAEC,SAAS,EAAE;MAAoB,CAAC;IAC1D;IAEA,OAAOD,MAAM;EACjB,CAAC,EAAE,CAAC3G,SAAS,EAAE0B,mBAAmB,CAACE,CAAC,EAAEF,mBAAmB,CAACG,CAAC,CAAC,CAAC;EAE7DjD,SAAS,CAAC,MAAM;IACZ6C,SAAS,CAAC,mBACNzC,YAAY,eACRN,KAAA,CAAA0H,aAAA,CAAC3H,eAAe;MAACoI,OAAO,EAAE;IAAM,GAC3B7F,WAAW,iBACRtC,KAAA,CAAA0H,aAAA,CAACvG,wBAAwB;MACrBiH,QAAQ,EAAE9E,OAAO,EAAE+E,IAAK;MACxBC,OAAO,EAAE;QAAEpE,MAAM,EAAE,aAAa;QAAEqE,OAAO,EAAE;MAAE,CAAE;MAC/CC,UAAU,EAAE5F,SAAU;MACtBuF,OAAO,EAAE;QAAEjE,MAAM,EAAE,CAAC;QAAEqE,OAAO,EAAE;MAAE,CAAE;MACnCE,IAAI,EAAE;QAAEvE,MAAM,EAAE,CAAC;QAAEqE,OAAO,EAAE;MAAE,CAAE;MAChCG,UAAU,EAAEhH,SAAU;MACtBiH,SAAS,EAAEnG,QAAS;MACpBoG,KAAK,EAAEZ,UAAW;MAClBa,UAAU,EAAEvH,SAAU;MACtBwH,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI,CAAE;MAC9BtD,QAAQ,EAAE,CAAE;MACZuD,GAAG,EAAE3F;IAAW,GAEfiE,cACqB,CAEjB,CAAC,EAClBzF,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCmG,UAAU,EACV1E,OAAO,EAAE+E,IAAI,EACbf,cAAc,EACdzF,SAAS,EACTP,SAAS,EACTgB,WAAW,EACXZ,SAAS,EACTc,QAAQ,EACRI,SAAS,CACZ,CAAC;EAEF,OAAOzC,OAAO,CACV,mBACIH,KAAA,CAAA0H,aAAA,CAAC7G,cAAc;IACXmI,GAAG,EAAE5F,wBAAyB;IAC9B6F,mBAAmB,EAAE9G,kBAAmB;IACxCwG,SAAS,EAAEnG;EAAS,gBAEpBxC,KAAA,CAAA0H,aAAA,CAAC5G,oBAAoB;IACjB+H,UAAU,EAAEvH,SAAU;IACtB4H,OAAO,EAAE7B,iBAAkB;IAC3B8B,OAAO,EAAE7G,WAAY;IACrB8G,QAAQ,EAAE7F,OAAQ;IAClB8F,WAAW,EAAE7H;EAAW,gBAExBxB,KAAA,CAAA0H,aAAA,CAAC1G,yBAAyB;IACtBsI,oBAAoB,EAAE,CAACtH,YAAY,IAAI,CAACI;EAAqB,GAE5D6E,mBAAmB,iBAChBjH,KAAA,CAAA0H,aAAA,CAACzG,8BAA8B;IAC3BsI,GAAG,EAAEtC,mBAAoB;IACzB/E,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EACAiF,eAAe,iBAAInH,KAAA,CAAA0H,aAAA,CAAC/G,IAAI;IAACkG,KAAK,EAAEM;EAAgB,CAAE,CAAC,EACnDC,eAAe,EACfhF,oBAAoB,IACjBA,oBAAoB,CAAC2F,aAAa,IAClC3F,oBAAoB,CAAC2F,aACF,CAAC,eAC5B/H,KAAA,CAAA0H,aAAA,CAAC3G,yBAAyB,qBACtBf,KAAA,CAAA0H,aAAA,CAAC/G,IAAI;IAACkG,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,EACtB/D,MACW,CACnB,EACD,CACIxB,SAAS,EACT+F,iBAAiB,EACjB/E,WAAW,EACXd,UAAU,EACV+B,OAAO,EACPnB,oBAAoB,EACpBI,QAAQ,EACR2E,eAAe,EACfF,mBAAmB,EACnBG,eAAe,EACftE,MAAM,EACNd,YAAY,EACZE,oBAAoB,EACpBC,kBAAkB,CAE1B,CAAC;AACL,CAAC;AAEDf,QAAQ,CAACoI,WAAW,GAAG,UAAU;AAEjC,eAAepI,QAAQ","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["useDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxTopic","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","lists","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowBigImage","shouldShowRoundImage","shouldUseFullWidth","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","left","comboBoxLeft","top","comboBoxTop","height","getBoundingClientRect","containerLeft","containerTop","scrollLeft","scrollTop","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","currentContent","scrollHeight","maxHeightInPixels","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","some","list","find","_ref2","value","String","replace","allItems","flatMap","isAtLeastOneItemWithImageGiven","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","width","parentElement","text","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxGroups","map","_ref5","groupName","createElement","item","isSelected","rightElement","subtext","suffixElement","bodyStyles","styles","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","$shouldReduceOpacity","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentWidth, getMaxHeightInPixels } from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxTopic,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItems {\n    groupName?: string;\n    list: Array<IComboBoxItem>;\n}\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    isDisabled?: boolean;\n    rightElement?: ReactNode;\n    subtext?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    lists: IComboBoxItems[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a bigger shape. This prop will automatically be set to true if the subtext of an item is given.\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    lists,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    shouldUseFullWidth = false,\n}) => {\n    const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = useDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node) &&\n                contentRef.current &&\n                !contentRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const {\n                left: comboBoxLeft,\n                top: comboBoxTop,\n                height,\n            } = styledComboBoxElementRef.current.getBoundingClientRect();\n            const { left: containerLeft, top: containerTop } = container.getBoundingClientRect();\n\n            const x = comboBoxLeft - containerLeft + container.scrollLeft;\n            const y = comboBoxTop - containerTop + container.scrollTop;\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [container, direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setInternalSelectedItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const currentContent = contentRef.current;\n\n        if (portal && isAnimating && currentContent) {\n            const scrollHeight = currentContent.scrollHeight ?? 0;\n\n            const maxHeightInPixels = getMaxHeightInPixels(\n                maxHeight,\n                styledComboBoxElementRef.current ?? document.body,\n            );\n\n            setOverflowY(scrollHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n        }\n    }, [isAnimating, maxHeight, portal]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                let newSelectedItem: IComboBoxItem | undefined;\n\n                lists.some((list) => {\n                    newSelectedItem = list.list.find(\n                        ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                    );\n                    return !!newSelectedItem;\n                });\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const allItems = lists.flatMap((list) => list.list);\n\n        const isAtLeastOneItemWithImageGiven = allItems.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = allItems.some(({ icons }) => icons);\n\n        const width =\n            styledComboBoxElementRef.current?.parentElement?.getBoundingClientRect().width ?? 0;\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        // 40px = icon width + flex gap\n        setMinWidth(\n            shouldUseFullWidth\n                ? width\n                : calculateContentWidth([\n                      ...allItems,\n                      { text: placeholder, value: 'placeholder' },\n                  ]) +\n                      45 +\n                      (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                      (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [lists, maxHeight, placeholder, shouldUseFullWidth]);\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    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxGroups = useMemo(\n        () =>\n            lists.map(({ groupName, list }) => (\n                <div key={groupName ?? 'default-group'}>\n                    {groupName && lists.length > 1 && (\n                        <StyledComboBoxTopic>{groupName}</StyledComboBoxTopic>\n                    )}\n                    {list.map((item) => (\n                        // ToDo: Cleanup this - item should be given as a prop to avoid full spreading\n                        <ComboBoxItem\n                            icons={item.icons}\n                            id={item.value}\n                            imageUrl={item.imageUrl}\n                            isDisabled={item.isDisabled}\n                            isSelected={selectedItem ? item.value === selectedItem.value : false}\n                            key={item.value}\n                            onSelect={handleSetSelectedItem}\n                            rightElement={item.rightElement}\n                            shouldShowBigImage={shouldShowBigImage}\n                            shouldShowRoundImage={shouldShowRoundImage}\n                            subtext={item.subtext}\n                            suffixElement={item.suffixElement}\n                            text={item.text}\n                            value={item.value}\n                        />\n                    ))}\n                </div>\n            )),\n        [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={minWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxGroups}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyStyles,\n        browser?.name,\n        comboBoxGroups,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder\n                        $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                    >\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderIcon && <Icon icons={placeholderIcon} />}\n                        {placeholderText}\n                        {internalSelectedItem &&\n                            internalSelectedItem.suffixElement &&\n                            internalSelectedItem.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            internalSelectedItem,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            portal,\n            selectedItem,\n            shouldShowRoundImage,\n            shouldUseFullWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/context-menu/ContextMenu.js

@@ -125,7 +125,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     };
   }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
   useEffect(() => {
-    setPortal(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
+    setPortal(() => /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
     }, isContentShown && /*#__PURE__*/React.createElement(ContextMenuContent, {
       coordinates: coordinates ?? internalCoordinates,