@chayns-components/core 5.4.0 → 5.4.5-alpha.0

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","css","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","theme","textRgb","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, css, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n\n    .chayns-scrollbar {\n        ${({ theme }: WithTheme<unknown>) => {\n            const textRgb = theme['text-rgb'] ?? '';\n\n            return css`\n                @supports selector(::-webkit-scrollbar-button) {\n                    &::-webkit-scrollbar {\n                        width: 10px;\n                        height: 10px;\n                    }\n\n                    &::-webkit-scrollbar-thumb {\n                        background-color: rgba(${textRgb}, 0.15);\n                        border-radius: 20px;\n                        background-clip: padding-box;\n                        border: solid 3px transparent;\n                    }\n\n                    &::-webkit-scrollbar-track {\n                        background-color: transparent;\n                    }\n\n                    &::-webkit-scrollbar-corner {\n                        background-color: transparent;\n                    }\n\n                    &::-webkit-scrollbar-button {\n                        background-color: transparent;\n                        height: 5px;\n                        width: 5px;\n                    }\n                }\n\n                @supports not selector(::-webkit-scrollbar-button) {\n                    scrollbar-color: rgba(${textRgb}, 0.15) transparent;\n                    scrollbar-width: thin;\n                }\n            `;\n        }}\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,GAAG,EAAEC,aAAa,QAAQ,mBAAmB;AACzE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGL,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEM;AAA0B,CAAC,KAAK;EACjC,MAAMC,OAAO,GAAGD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE;EAEvC,OAAOL,GAAG;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iDAAiDM,OAAO;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4CAA4CA,OAAO;AACnD;AACA;AACA,aAAa;AACL,CAAC;AACT;AACA,CAAC;AAQD,OAAO,MAAMC,kBAAkB,gBAAGX,aAAa,CAAsCY,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMZ,UAAU,CAACU,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGxB,UAAU,CAACU,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG7B,OAAO,CAAC,CAAC;EAExE,MAAMkB,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEG,cAAc,EAAEZ,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEG,cAAc,EAAEV,SAAS,IAAIS,iBAAiB;EAE1F,MAAME,uBAAuB,GACxBb,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMG,eAAe,GAAG5B,OAAO,CAC3B,MAAO2B,uBAAuB,GAAG,EAAE,GAAGjB,SAAU,EAChD,CAACiB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGxB,cAAc,CAAC;IAChCS,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAM;EACJ,CAAC,CAAC;EAEF,oBACI/B,KAAA,CAAAiC,aAAA,CAAC3B,aAAa;IAACI,KAAK,EAAEsB,YAAY,CAACtB;EAAM,gBACrCV,KAAA,CAAAiC,aAAA,CAACrB,kBAAkB,CAACsB,QAAQ;IAACC,KAAK,EAAEH;EAAa,gBAC7ChC,KAAA,CAAAiC,aAAA,CAAC1B,yBAAyB;IAAC6B,SAAS,EAAC,uBAAuB;IAACb,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5BhB,KAAA,CAAAiC,aAAA,CAACxB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDM,mBAAmB,CAACsB,WAAW,GAAG,qBAAqB;AAEvD,eAAetB,mBAAmB","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","css","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","theme","textRgb","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","shouldEnableKeyboardHighlighting","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","resolvedShouldEnableKeyboardHighlighting","contextValue","createElement","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, css, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n    /**\n     * Enables keyboard-only focus highlighting globally for child components.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n\n    .chayns-scrollbar {\n        ${({ theme }: WithTheme<unknown>) => {\n            const textRgb = theme['text-rgb'] ?? '';\n\n            return css`\n                @supports selector(::-webkit-scrollbar-button) {\n                    &::-webkit-scrollbar {\n                        width: 10px;\n                        height: 10px;\n                    }\n\n                    &::-webkit-scrollbar-thumb {\n                        background-color: rgba(${textRgb}, 0.15);\n                        border-radius: 20px;\n                        background-clip: padding-box;\n                        border: solid 3px transparent;\n                    }\n\n                    &::-webkit-scrollbar-track {\n                        background-color: transparent;\n                    }\n\n                    &::-webkit-scrollbar-corner {\n                        background-color: transparent;\n                    }\n\n                    &::-webkit-scrollbar-button {\n                        background-color: transparent;\n                        height: 5px;\n                        width: 5px;\n                    }\n                }\n\n                @supports not selector(::-webkit-scrollbar-button) {\n                    scrollbar-color: rgba(${textRgb}, 0.15) transparent;\n                    scrollbar-width: thin;\n                }\n            `;\n        }}\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n    shouldEnableKeyboardHighlighting: boolean;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = (): ColorSchemeContextProps | undefined =>\n    useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const resolvedShouldEnableKeyboardHighlighting =\n        shouldEnableKeyboardHighlighting ?? context?.shouldEnableKeyboardHighlighting ?? false;\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider\n                value={{\n                    ...contextValue,\n                    shouldEnableKeyboardHighlighting: resolvedShouldEnableKeyboardHighlighting,\n                }}\n            >\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js

@@ -4,17 +4,23 @@ import { styled } from 'styled-components';
 export const StyledColorSchemeProvider = styled.div`
     color: var(--chayns-color--text);
 
+    --focus-color: color-mix(in srgb, currentColor 70%, transparent);
+    --focus-outline: var(--focus-color) solid 2px;
+    --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);
+    --focus-border-radius-circle: 50%;
+    --focus-border-radius: 3px;
+
     ${({
   theme
 }) => getAvailableColorList().map(colorName => {
   const colorNameRgb = `${colorName}-rgb`;
-  return [`--chayns-color--${colorName}: ${theme[colorName]};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`];
+  return [`--chayns-color--${colorName}: ${theme[colorName] ?? ''};`, `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb] ?? ''};`];
 })}
 
     ${({
   theme
 }) => `
-        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};
+        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary ?? ''};
     `}
 
     // ToDo: Remove .h1...

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb","primary"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        `\n        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};\n    `}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C;AACA,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCJ,qBAAqB,CAAC,CAAC,CAACK,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEH;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACI,OAAO;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["getAvailableColorList","styled","StyledColorSchemeProvider","div","theme","map","colorName","colorNameRgb","primary"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    --focus-color: color-mix(in srgb, currentColor 70%, transparent);\n    --focus-outline: var(--focus-color) solid 2px;\n    --focus-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3);\n    --focus-border-radius-circle: 50%;\n    --focus-border-radius: 3px;\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName] ?? ''};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb] ?? ''};`,\n            ];\n        })}\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        `\n        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary ?? ''};\n    `}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n`;\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,MAAM,QAAQ,mBAAmB;AAK1C;AACA,OAAO,MAAMC,yBAAyB,GAAGD,MAAM,CAACE,GAA6B;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCJ,qBAAqB,CAAC,CAAC,CAACK,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKF,KAAK,CAACE,SAAS,CAAC,IAAI,EAAE,GAAG,EAC1D,uBAAuBA,SAAS,KAAKF,KAAK,CAACG,YAAY,CAAC,IAAI,EAAE,GAAG,CACpE;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEH;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACI,OAAO,IAAI,EAAE;AAChF,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -10,6 +10,7 @@ import { DropdownDirection } from '../../types/dropdown';
 import { useElementSize } from '../../hooks/element';
 import { ComboBoxSize } from './ComboBox.types';
 import { getComboBoxWidthResult } from './ComboBox.utils';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const ComboBox = /*#__PURE__*/forwardRef(({
   bodyWidth,
   direction = DropdownDirection.RIGHT,
@@ -36,7 +37,8 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   onInputBlur,
   shouldShowTransparentBackground = false,
   inputValue,
-  shouldDropDownUseMaxItemWidth = false
+  shouldDropDownUseMaxItemWidth = false,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [internalSelectedItem, setInternalSelectedItem] = useState();
   const [isAnimating, setIsAnimating] = useState(false);
@@ -45,6 +47,8 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   const [focusedIndex, setFocusedIndex] = useState(null);
   const isInputFocused = useRef(false);
   const styledComboBoxElementRef = useRef(null);
+  const comboBoxHeaderRef = useRef(null);
+  const comboBoxInputRef = useRef(null);
   const contentRef = useRef(null);
   const parentSize = useElementSize(styledComboBoxElementRef, {
     shouldUseParentElement: true
@@ -80,6 +84,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     setBodyMinWidth(calculatedBodyMinWidth);
   }, [functions, internalSelectedItem, lists, parentSize, placeholder, prefix, prefixMinWidth, selectedItem, shouldDropDownUseMaxItemWidth, shouldShowBigImage, shouldShowClearIcon, shouldUseCurrentItemWidth, shouldUseFullWidth, values]);
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const shouldDisableActions = useMemo(() => {
     if (!selectedItem) {
       return false;
@@ -121,6 +126,23 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     }
     setIsAnimating(false);
   }, [onHide]);
+  const handleContainerBlur = useCallback(event => {
+    const nextFocusedElement = event.relatedTarget;
+    const currentContainer = event.currentTarget;
+    if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !contentRef.current?.contains(nextFocusedElement)) {
+      handleClose();
+    }
+  }, [handleClose]);
+  const restoreTriggerFocus = useCallback(() => {
+    // Delay is needed so focus happens after dropdown close/render cycle.
+    requestAnimationFrame(() => {
+      if (typeof inputValue === 'string') {
+        comboBoxInputRef.current?.focus();
+        return;
+      }
+      comboBoxHeaderRef.current?.focus();
+    });
+  }, [inputValue]);
 
   /**
    * This function sets the selected item
@@ -136,13 +158,15 @@ const ComboBox = /*#__PURE__*/forwardRef(({
           if (shouldPreventSelection) return;
           setInternalSelectedItem(itemToSelect);
           handleClose();
+          restoreTriggerFocus();
         });
         return;
       }
     }
     setInternalSelectedItem(itemToSelect);
     handleClose();
-  }, [handleClose, onSelect]);
+    restoreTriggerFocus();
+  }, [handleClose, onSelect, restoreTriggerFocus]);
   const handleClear = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -151,6 +175,12 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     const handleKeyDown = e => {
       if (!isAnimating) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        handleClose();
+        restoreTriggerFocus();
+        return;
+      }
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
         const children = contentRef.current?.children;
@@ -196,7 +226,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     };
     document.addEventListener('keydown', handleKeyDown);
     return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);
+  }, [focusedIndex, handleClose, handleSetSelectedItem, isAnimating, lists, restoreTriggerFocus]);
 
   /**
    * This function sets the external selected item
@@ -255,6 +285,21 @@ const ComboBox = /*#__PURE__*/forwardRef(({
       }
     }
   }, [handleClose, handleOpen, isAnimating, isDisabled]);
+  const handleHeaderKeyDown = useCallback(event => {
+    if (isDisabled || typeof inputValue === 'string') {
+      return;
+    }
+    if (event.key === 'Escape' && isAnimating) {
+      event.preventDefault();
+      handleClose();
+      restoreTriggerFocus();
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleHeaderClick();
+    }
+  }, [handleClose, handleHeaderClick, inputValue, isAnimating, isDisabled, restoreTriggerFocus]);
   useImperativeHandle(ref, () => ({
     hide: handleClose,
     show: handleOpen
@@ -274,8 +319,10 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
     ref: styledComboBoxElementRef,
     $minWidth: minWidth,
-    $shouldUseFullWidth: shouldUseFullWidth
+    $shouldUseFullWidth: shouldUseFullWidth,
+    onBlur: handleContainerBlur
   }, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
+    ref: comboBoxHeaderRef,
     $direction: direction,
     onClick: handleHeaderClick,
     $isOpen: isAnimating,
@@ -284,7 +331,12 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor,
-    $shouldShowBigImage: shouldShowBigImage
+    $shouldShowBigImage: shouldShowBigImage,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    onKeyDown: handleHeaderKeyDown,
+    tabIndex: !isDisabled && typeof inputValue !== 'string' ? 0 : undefined,
+    role: !isDisabled && typeof inputValue !== 'string' ? 'button' : undefined,
+    "aria-expanded": !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined
   }, /*#__PURE__*/React.createElement(StyledComboBoxPrefixAndPlaceholderWrapper, null, prefix && /*#__PURE__*/React.createElement(StyledComboBoxPrefix, {
     $prefixMinWidth: prefixMinWidth
   }, prefix), /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, {
@@ -296,6 +348,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   }), placeholderIcon && /*#__PURE__*/React.createElement(Icon, {
     icons: placeholderIcon
   }), typeof inputValue === 'string' ? /*#__PURE__*/React.createElement(StyledComboBoxInput, {
+    ref: comboBoxInputRef,
     disabled: isDisabled,
     value: inputValue,
     onChange: onInputChange,
@@ -330,7 +383,7 @@ const ComboBox = /*#__PURE__*/forwardRef(({
     className: "chayns-scrollbar",
     ref: contentRef,
     tabIndex: 0
-  }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, maxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
+  }, comboBoxGroups))), [bodyMinWidth, bodyWidth, comboBoxGroups, container, contentHeight, direction, handleClear, handleClose, handleHeaderClick, handleHeaderKeyDown, handleInputBlur, handleInputFocus, inputValue, internalSelectedItem, isAnimating, isDisabled, isTouch, maxHeight, minWidth, onInputChange, placeholderIcon, placeholderImageUrl, placeholderText, prefix, prefixMinWidth, selectedItem, shouldChangeColor, shouldDisableActions, shouldCaptureEvents, shouldShowKeyboardHighlighting, shouldShowBigImage, shouldShowClearIcon, shouldShowRoundPlaceholderImage, shouldShowTransparentBackground, shouldUseFullWidth, size]);
 });
 ComboBox.displayName = 'ComboBox';
 export default ComboBox;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","focus","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onBlur","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n    FocusEventHandler,\n    forwardRef,\n    Fragment,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n    (\n        {\n            bodyWidth,\n            direction = DropdownDirection.RIGHT,\n            isDisabled = false,\n            lists,\n            maxHeight = 280,\n            onSelect,\n            placeholder,\n            prefix,\n            container,\n            shouldCaptureEvents,\n            selectedItem,\n            onHide,\n            onShow,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldShowRoundImage,\n            onInputFocus,\n            prefixMinWidth,\n            size = ComboBoxSize.NORMAL,\n            shouldUseFullWidth = false,\n            onInputChange,\n            shouldUseCurrentItemWidth = false,\n            onInputBlur,\n            shouldShowTransparentBackground = false,\n            inputValue,\n            shouldDropDownUseMaxItemWidth = false,\n        },\n        ref,\n    ) => {\n        const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n        const [bodyMinWidth, setBodyMinWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n        const isInputFocused = useRef(false);\n        const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n\n        const parentSize = useElementSize(styledComboBoxElementRef, {\n            shouldUseParentElement: true,\n        });\n\n        const functions = useFunctions();\n        const values = useValues();\n        const isTouch = useIsTouch();\n        const areaProvider = useContext(AreaContext);\n\n        useEffect(() => {\n            if (!parentSize) {\n                return;\n            }\n\n            const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n                getComboBoxWidthResult({\n                    functions,\n                    internalSelectedItem,\n                    lists,\n                    parentWidth: parentSize.width,\n                    placeholder,\n                    prefix,\n                    prefixMinWidth,\n                    selectedItem,\n                    shouldDropDownUseMaxItemWidth,\n                    shouldShowBigImage,\n                    shouldShowClearIcon,\n                    shouldUseCurrentItemWidth,\n                    shouldUseFullWidth,\n                    values,\n                });\n\n            setMinWidth(calculatedMinWidth);\n            setBodyMinWidth(calculatedBodyMinWidth);\n        }, [\n            functions,\n            internalSelectedItem,\n            lists,\n            parentSize,\n            placeholder,\n            prefix,\n            prefixMinWidth,\n            selectedItem,\n            shouldDropDownUseMaxItemWidth,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldUseCurrentItemWidth,\n            shouldUseFullWidth,\n            values,\n        ]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldDisableActions = useMemo(() => {\n            if (!selectedItem) {\n                return false;\n            }\n\n            const combinedLists = lists.flatMap((list) => list.list);\n\n            return (\n                combinedLists.length === 1 &&\n                combinedLists.some((item) => item.value === selectedItem.value)\n            );\n        }, [lists, selectedItem]);\n\n        const contentHeight = useMemo(() => {\n            const flatItems = lists.flatMap((list) => list.list);\n\n            let height = flatItems.reduce((value, item) => {\n                const isBigItem =\n                    shouldShowBigImage ||\n                    (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n                return value + (isBigItem ? 56 : 38);\n            }, 0);\n\n            if (lists.length > 1) {\n                height += lists.length * 38;\n            }\n\n            if (maxHeight < height) {\n                height = maxHeight;\n            }\n\n            return height;\n        }, [lists, maxHeight, shouldShowBigImage]);\n\n        const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = true;\n                onInputFocus?.(event);\n            },\n            [onInputFocus],\n        );\n\n        const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = false;\n                onInputBlur?.(event);\n            },\n            [onInputBlur],\n        );\n\n        const handleOpen = useCallback(() => {\n            if (typeof onShow === 'function') {\n                onShow();\n            }\n\n            setIsAnimating(true);\n        }, [onShow]);\n\n        const handleClose = useCallback(() => {\n            if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            setIsAnimating(false);\n        }, [onHide]);\n\n        /**\n         * This function sets the selected item\n         */\n        const handleSetSelectedItem = useCallback(\n            (itemToSelect?: IComboBoxItem) => {\n                if (typeof onSelect === 'function') {\n                    const onSelectResult = onSelect(itemToSelect);\n\n                    if (onSelectResult === false) {\n                        return;\n                    }\n\n                    if (onSelectResult instanceof Promise) {\n                        void onSelectResult.then((shouldPreventSelection) => {\n                            if (shouldPreventSelection) return;\n\n                            setInternalSelectedItem(itemToSelect);\n                            handleClose();\n                        });\n\n                        return;\n                    }\n                }\n\n                setInternalSelectedItem(itemToSelect);\n                handleClose();\n            },\n            [handleClose, onSelect],\n        );\n\n        const handleClear = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleSetSelectedItem(undefined);\n            },\n            [handleSetSelectedItem],\n        );\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) return;\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n\n                    const children = contentRef.current?.children;\n\n                    if (!children || children.length === 0) return;\n\n                    const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                    let newIndex = focusedIndex ?? -1;\n\n                    let attempts = 0;\n\n                    do {\n                        newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n\n                        let shouldSkip = false;\n\n                        if (\n                            newElement.id.startsWith('combobox-group--') ||\n                            newElement.id.endsWith('--disabled-item')\n                        ) {\n                            shouldSkip = true;\n                        }\n\n                        if (!shouldSkip) break;\n\n                        attempts++;\n                    } while (attempts < children.length);\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const focusedElement = children[newIndex] as HTMLDivElement;\n\n                    focusedElement.tabIndex = 0;\n                    focusedElement.focus();\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) return;\n\n                    const { id } = element;\n\n                    let newSelectedItem: IComboBoxItem | undefined;\n\n                    lists.some((list) => {\n                        newSelectedItem = list.list.find(\n                            ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                        );\n\n                        return !!newSelectedItem;\n                    });\n\n                    if (newSelectedItem) {\n                        handleSetSelectedItem(newSelectedItem);\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => document.removeEventListener('keydown', handleKeyDown);\n        }, [focusedIndex, handleSetSelectedItem, isAnimating, lists]);\n\n        /**\n         * This function sets the external selected item\n         */\n        useEffect(() => {\n            setIsAnimating(false);\n            setInternalSelectedItem(selectedItem);\n        }, [selectedItem]);\n\n        const placeholderImageUrl = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.imageUrl;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.imageUrl;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        const placeholderIcon = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.icons;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.icons;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        /**\n         * This function resets the placeholder\n         */\n        const placeholderText = useMemo(() => {\n            let text = placeholder;\n\n            if (selectedItem) {\n                text = selectedItem.text;\n            } else if (internalSelectedItem) {\n                text = internalSelectedItem.text;\n            }\n\n            return text;\n        }, [internalSelectedItem, placeholder, selectedItem]);\n\n        const shouldShowRoundPlaceholderImage = useMemo(() => {\n            const selectedItemList = lists.find((list) =>\n                list.list.some(\n                    ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n                ),\n            );\n\n            return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n        }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n        /**\n         * This function opens the content of the combobox\n         */\n        const handleHeaderClick = useCallback(() => {\n            if (!isDisabled && !isInputFocused.current) {\n                if (isAnimating) {\n                    handleClose();\n                } else {\n                    handleOpen();\n                }\n            }\n        }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleClose,\n                show: handleOpen,\n            }),\n            [handleClose, handleOpen],\n        );\n\n        const comboBoxGroups = useMemo(\n            () =>\n                lists.map((list) => (\n                    <Fragment key={list.groupName ?? 'default-group'}>\n                        {list.groupName && lists.length > 1 && (\n                            <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                                {list.groupName}\n                            </StyledComboBoxTopic>\n                        )}\n                        {list.list.map((item) => (\n                            <ComboBoxItem\n                                key={`item-${item.text}`}\n                                item={item}\n                                isSelected={\n                                    selectedItem ? item.value === selectedItem.value : false\n                                }\n                                onSelect={handleSetSelectedItem}\n                                shouldShowBigImage={shouldShowBigImage}\n                                shouldShowRoundImage={\n                                    list.shouldShowRoundImage ?? shouldShowRoundImage\n                                }\n                            />\n                        ))}\n                    </Fragment>\n                )),\n            [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n        );\n\n        return useMemo(\n            () => (\n                <StyledComboBox\n                    ref={styledComboBoxElementRef}\n                    $minWidth={minWidth}\n                    $shouldUseFullWidth={shouldUseFullWidth}\n                >\n                    <StyledComboBoxHeader\n                        $direction={direction}\n                        onClick={handleHeaderClick}\n                        $isOpen={isAnimating}\n                        $isTouch={isTouch}\n                        $size={size}\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $isDisabled={isDisabled}\n                        $shouldChangeColor={shouldChangeColor}\n                        $shouldShowBigImage={shouldShowBigImage}\n                    >\n                        <StyledComboBoxPrefixAndPlaceholderWrapper>\n                            {prefix && (\n                                <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n                                    {prefix}\n                                </StyledComboBoxPrefix>\n                            )}\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                {typeof inputValue === 'string' ? (\n                                    <StyledComboBoxInput\n                                        disabled={isDisabled}\n                                        value={inputValue}\n                                        onChange={onInputChange}\n                                        onBlur={handleInputBlur}\n                                        onFocus={handleInputFocus}\n                                        placeholder={placeholderText}\n                                    />\n                                ) : (\n                                    <StyledComboBoxPlaceholderText>\n                                        {placeholderText}\n                                    </StyledComboBoxPlaceholderText>\n                                )}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        </StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {shouldShowClearIcon && internalSelectedItem && (\n                            <StyledComboBoxClearIconWrapper\n                                $isDisabled={isDisabled}\n                                onClick={handleClear}\n                            >\n                                <Icon icons={['fa fa-times']} />\n                            </StyledComboBoxClearIconWrapper>\n                        )}\n                        {!shouldDisableActions && (\n                            <StyledComboBoxIconWrapper\n                                $isDisabled={isDisabled}\n                                $size={size}\n                                $shouldShowBorderLeft={\n                                    shouldShowClearIcon === true &&\n                                    internalSelectedItem !== undefined\n                                }\n                            >\n                                <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n                            </StyledComboBoxIconWrapper>\n                        )}\n                    </StyledComboBoxHeader>\n                    {styledComboBoxElementRef.current && (\n                        <DropdownBodyWrapper\n                            anchorElement={styledComboBoxElementRef.current}\n                            bodyWidth={bodyWidth}\n                            contentHeight={contentHeight}\n                            shouldCaptureEvents={shouldCaptureEvents}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                        >\n                            <StyledComboBoxBody\n                                $maxHeight={maxHeight}\n                                $minWidth={bodyWidth ?? bodyMinWidth}\n                                className=\"chayns-scrollbar\"\n                                ref={contentRef}\n                                tabIndex={0}\n                            >\n                                {comboBoxGroups}\n                            </StyledComboBoxBody>\n                        </DropdownBodyWrapper>\n                    )}\n                </StyledComboBox>\n            ),\n            [\n                bodyMinWidth,\n                bodyWidth,\n                comboBoxGroups,\n                container,\n                contentHeight,\n                direction,\n                handleClear,\n                handleClose,\n                handleHeaderClick,\n                handleInputBlur,\n                handleInputFocus,\n                inputValue,\n                internalSelectedItem,\n                isAnimating,\n                isDisabled,\n                isTouch,\n                maxHeight,\n                minWidth,\n                onInputChange,\n                placeholderIcon,\n                placeholderImageUrl,\n                placeholderText,\n                prefix,\n                prefixMinWidth,\n                selectedItem,\n                shouldChangeColor,\n                shouldDisableActions,\n                shouldCaptureEvents,\n                shouldShowBigImage,\n                shouldShowClearIcon,\n                shouldShowRoundPlaceholderImage,\n                shouldShowTransparentBackground,\n                shouldUseFullWidth,\n                size,\n            ],\n        );\n    },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.js","names":["useFunctions","useValues","React","forwardRef","Fragment","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useIsTouch","AreaContext","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxBody","StyledComboBoxClearIconWrapper","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxInput","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledComboBoxPlaceholderText","StyledComboBoxPrefix","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxTopic","DropdownBodyWrapper","DropdownDirection","useElementSize","ComboBoxSize","getComboBoxWidthResult","useKeyboardFocusHighlighting","ComboBox","bodyWidth","direction","RIGHT","isDisabled","lists","maxHeight","onSelect","placeholder","prefix","container","shouldCaptureEvents","selectedItem","onHide","onShow","shouldShowBigImage","shouldShowClearIcon","shouldShowRoundImage","onInputFocus","prefixMinWidth","size","NORMAL","shouldUseFullWidth","onInputChange","shouldUseCurrentItemWidth","onInputBlur","shouldShowTransparentBackground","inputValue","shouldDropDownUseMaxItemWidth","shouldEnableKeyboardHighlighting","ref","internalSelectedItem","setInternalSelectedItem","isAnimating","setIsAnimating","minWidth","setMinWidth","undefined","bodyMinWidth","setBodyMinWidth","focusedIndex","setFocusedIndex","isInputFocused","styledComboBoxElementRef","comboBoxHeaderRef","comboBoxInputRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldShowKeyboardHighlighting","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","contentHeight","flatItems","height","reduce","isBigItem","subtext","trim","handleInputFocus","event","current","handleInputBlur","handleOpen","handleClose","handleContainerBlur","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","restoreTriggerFocus","requestAnimationFrame","focus","handleSetSelectedItem","itemToSelect","onSelectResult","Promise","then","shouldPreventSelection","handleClear","preventDefault","stopPropagation","handleKeyDown","e","key","children","stepDirection","newIndex","attempts","newElement","shouldSkip","id","startsWith","endsWith","prevElement","tabIndex","focusedElement","element","newSelectedItem","find","String","replace","document","addEventListener","removeEventListener","placeholderImageUrl","imageUrl","placeholderIcon","icons","placeholderText","text","shouldShowRoundPlaceholderImage","selectedItemList","handleHeaderClick","handleHeaderKeyDown","hide","show","comboBoxGroups","map","createElement","groupName","isSelected","$minWidth","$shouldUseFullWidth","onBlur","$direction","onClick","$isOpen","$isTouch","$size","$shouldShowTransparentBackground","$isDisabled","$shouldChangeColor","$shouldShowBigImage","$shouldShowKeyboardHighlighting","onKeyDown","role","$prefixMinWidth","$shouldReduceOpacity","src","$shouldShowRoundImage","disabled","onChange","onFocus","suffixElement","$shouldShowBorderLeft","anchorElement","onClose","shouldShowDropdown","minBodyWidth","$maxHeight","className","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { useFunctions, useValues } from 'chayns-api';\nimport React, {\n    FocusEventHandler,\n    KeyboardEventHandler,\n    forwardRef,\n    Fragment,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useIsTouch } from '../../utils/environment';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxBody,\n    StyledComboBoxClearIconWrapper,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxInput,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledComboBoxPlaceholderText,\n    StyledComboBoxPrefix,\n    StyledComboBoxPrefixAndPlaceholderWrapper,\n    StyledComboBoxTopic,\n} from './ComboBox.styles';\nimport DropdownBodyWrapper from '../dropdown-body-wrapper/DropdownBodyWrapper';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { useElementSize } from '../../hooks/element';\nimport { ComboBoxProps, ComboBoxRef, ComboBoxSize, IComboBoxItem } from './ComboBox.types';\nimport { getComboBoxWidthResult } from './ComboBox.utils';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst ComboBox = forwardRef<ComboBoxRef, ComboBoxProps>(\n    (\n        {\n            bodyWidth,\n            direction = DropdownDirection.RIGHT,\n            isDisabled = false,\n            lists,\n            maxHeight = 280,\n            onSelect,\n            placeholder,\n            prefix,\n            container,\n            shouldCaptureEvents,\n            selectedItem,\n            onHide,\n            onShow,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldShowRoundImage,\n            onInputFocus,\n            prefixMinWidth,\n            size = ComboBoxSize.NORMAL,\n            shouldUseFullWidth = false,\n            onInputChange,\n            shouldUseCurrentItemWidth = false,\n            onInputBlur,\n            shouldShowTransparentBackground = false,\n            inputValue,\n            shouldDropDownUseMaxItemWidth = false,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        const [internalSelectedItem, setInternalSelectedItem] = useState<IComboBoxItem>();\n        const [isAnimating, setIsAnimating] = useState(false);\n        const [minWidth, setMinWidth] = useState<number | undefined>(undefined);\n        const [bodyMinWidth, setBodyMinWidth] = useState(0);\n        const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n        const isInputFocused = useRef(false);\n        const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n        const comboBoxHeaderRef = useRef<HTMLDivElement>(null);\n        const comboBoxInputRef = useRef<HTMLInputElement>(null);\n        const contentRef = useRef<HTMLDivElement | null>(null);\n\n        const parentSize = useElementSize(styledComboBoxElementRef, {\n            shouldUseParentElement: true,\n        });\n\n        const functions = useFunctions();\n        const values = useValues();\n        const isTouch = useIsTouch();\n        const areaProvider = useContext(AreaContext);\n\n        useEffect(() => {\n            if (!parentSize) {\n                return;\n            }\n\n            const { minWidth: calculatedMinWidth, bodyMinWidth: calculatedBodyMinWidth } =\n                getComboBoxWidthResult({\n                    functions,\n                    internalSelectedItem,\n                    lists,\n                    parentWidth: parentSize.width,\n                    placeholder,\n                    prefix,\n                    prefixMinWidth,\n                    selectedItem,\n                    shouldDropDownUseMaxItemWidth,\n                    shouldShowBigImage,\n                    shouldShowClearIcon,\n                    shouldUseCurrentItemWidth,\n                    shouldUseFullWidth,\n                    values,\n                });\n\n            setMinWidth(calculatedMinWidth);\n            setBodyMinWidth(calculatedBodyMinWidth);\n        }, [\n            functions,\n            internalSelectedItem,\n            lists,\n            parentSize,\n            placeholder,\n            prefix,\n            prefixMinWidth,\n            selectedItem,\n            shouldDropDownUseMaxItemWidth,\n            shouldShowBigImage,\n            shouldShowClearIcon,\n            shouldUseCurrentItemWidth,\n            shouldUseFullWidth,\n            values,\n        ]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting && !isDisabled,\n        );\n\n        const shouldDisableActions = useMemo(() => {\n            if (!selectedItem) {\n                return false;\n            }\n\n            const combinedLists = lists.flatMap((list) => list.list);\n\n            return (\n                combinedLists.length === 1 &&\n                combinedLists.some((item) => item.value === selectedItem.value)\n            );\n        }, [lists, selectedItem]);\n\n        const contentHeight = useMemo(() => {\n            const flatItems = lists.flatMap((list) => list.list);\n\n            let height = flatItems.reduce((value, item) => {\n                const isBigItem =\n                    shouldShowBigImage ||\n                    (typeof item.subtext === 'string' && item.subtext.trim() !== '');\n\n                return value + (isBigItem ? 56 : 38);\n            }, 0);\n\n            if (lists.length > 1) {\n                height += lists.length * 38;\n            }\n\n            if (maxHeight < height) {\n                height = maxHeight;\n            }\n\n            return height;\n        }, [lists, maxHeight, shouldShowBigImage]);\n\n        const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = true;\n                onInputFocus?.(event);\n            },\n            [onInputFocus],\n        );\n\n        const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(\n            (event) => {\n                isInputFocused.current = false;\n                onInputBlur?.(event);\n            },\n            [onInputBlur],\n        );\n\n        const handleOpen = useCallback(() => {\n            if (typeof onShow === 'function') {\n                onShow();\n            }\n\n            setIsAnimating(true);\n        }, [onShow]);\n\n        const handleClose = useCallback(() => {\n            if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            setIsAnimating(false);\n        }, [onHide]);\n\n        const handleContainerBlur = useCallback(\n            (event: React.FocusEvent<HTMLDivElement>) => {\n                const nextFocusedElement = event.relatedTarget as Node | null;\n                const currentContainer = event.currentTarget as HTMLElement;\n\n                if (\n                    !nextFocusedElement ||\n                    (!currentContainer.contains(nextFocusedElement) &&\n                        !contentRef.current?.contains(nextFocusedElement))\n                ) {\n                    handleClose();\n                }\n            },\n            [handleClose],\n        );\n\n        const restoreTriggerFocus = useCallback(() => {\n            // Delay is needed so focus happens after dropdown close/render cycle.\n            requestAnimationFrame(() => {\n                if (typeof inputValue === 'string') {\n                    comboBoxInputRef.current?.focus();\n                    return;\n                }\n\n                comboBoxHeaderRef.current?.focus();\n            });\n        }, [inputValue]);\n\n        /**\n         * This function sets the selected item\n         */\n        const handleSetSelectedItem = useCallback(\n            (itemToSelect?: IComboBoxItem) => {\n                if (typeof onSelect === 'function') {\n                    const onSelectResult = onSelect(itemToSelect);\n\n                    if (onSelectResult === false) {\n                        return;\n                    }\n\n                    if (onSelectResult instanceof Promise) {\n                        void onSelectResult.then((shouldPreventSelection) => {\n                            if (shouldPreventSelection) return;\n\n                            setInternalSelectedItem(itemToSelect);\n                            handleClose();\n                            restoreTriggerFocus();\n                        });\n\n                        return;\n                    }\n                }\n\n                setInternalSelectedItem(itemToSelect);\n                handleClose();\n                restoreTriggerFocus();\n            },\n            [handleClose, onSelect, restoreTriggerFocus],\n        );\n\n        const handleClear = useCallback(\n            (event: React.MouseEvent<HTMLDivElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleSetSelectedItem(undefined);\n            },\n            [handleSetSelectedItem],\n        );\n\n        useEffect(() => {\n            const handleKeyDown = (e: KeyboardEvent) => {\n                if (!isAnimating) return;\n\n                if (e.key === 'Escape') {\n                    e.preventDefault();\n                    handleClose();\n                    restoreTriggerFocus();\n                    return;\n                }\n\n                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                    e.preventDefault();\n\n                    const children = contentRef.current?.children;\n\n                    if (!children || children.length === 0) return;\n\n                    const stepDirection = e.key === 'ArrowUp' ? -1 : 1;\n\n                    let newIndex = focusedIndex ?? -1;\n\n                    let attempts = 0;\n\n                    do {\n                        newIndex = (newIndex + stepDirection + children.length) % children.length;\n\n                        const newElement = children[newIndex] as HTMLDivElement;\n\n                        let shouldSkip = false;\n\n                        if (\n                            newElement.id.startsWith('combobox-group--') ||\n                            newElement.id.endsWith('--disabled-item')\n                        ) {\n                            shouldSkip = true;\n                        }\n\n                        if (!shouldSkip) break;\n\n                        attempts++;\n                    } while (attempts < children.length);\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const focusedElement = children[newIndex] as HTMLDivElement;\n\n                    focusedElement.tabIndex = 0;\n                    focusedElement.focus();\n                } else if (e.key === 'Enter' && focusedIndex !== null) {\n                    const element = contentRef.current?.children[focusedIndex];\n\n                    if (!element) return;\n\n                    const { id } = element;\n\n                    let newSelectedItem: IComboBoxItem | undefined;\n\n                    lists.some((list) => {\n                        newSelectedItem = list.list.find(\n                            ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                        );\n\n                        return !!newSelectedItem;\n                    });\n\n                    if (newSelectedItem) {\n                        handleSetSelectedItem(newSelectedItem);\n                    }\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => document.removeEventListener('keydown', handleKeyDown);\n        }, [\n            focusedIndex,\n            handleClose,\n            handleSetSelectedItem,\n            isAnimating,\n            lists,\n            restoreTriggerFocus,\n        ]);\n\n        /**\n         * This function sets the external selected item\n         */\n        useEffect(() => {\n            setIsAnimating(false);\n            setInternalSelectedItem(selectedItem);\n        }, [selectedItem]);\n\n        const placeholderImageUrl = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.imageUrl;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.imageUrl;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        const placeholderIcon = useMemo(() => {\n            if (selectedItem) {\n                return selectedItem.icons;\n            }\n\n            if (internalSelectedItem) {\n                return internalSelectedItem.icons;\n            }\n\n            return undefined;\n        }, [internalSelectedItem, selectedItem]);\n\n        /**\n         * This function resets the placeholder\n         */\n        const placeholderText = useMemo(() => {\n            let text = placeholder;\n\n            if (selectedItem) {\n                text = selectedItem.text;\n            } else if (internalSelectedItem) {\n                text = internalSelectedItem.text;\n            }\n\n            return text;\n        }, [internalSelectedItem, placeholder, selectedItem]);\n\n        const shouldShowRoundPlaceholderImage = useMemo(() => {\n            const selectedItemList = lists.find((list) =>\n                list.list.some(\n                    ({ value }) => value === (selectedItem?.value ?? internalSelectedItem?.value),\n                ),\n            );\n\n            return selectedItemList?.shouldShowRoundImage ?? shouldShowRoundImage;\n        }, [internalSelectedItem?.value, lists, selectedItem?.value, shouldShowRoundImage]);\n\n        /**\n         * This function opens the content of the combobox\n         */\n        const handleHeaderClick = useCallback(() => {\n            if (!isDisabled && !isInputFocused.current) {\n                if (isAnimating) {\n                    handleClose();\n                } else {\n                    handleOpen();\n                }\n            }\n        }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n        const handleHeaderKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n            (event) => {\n                if (isDisabled || typeof inputValue === 'string') {\n                    return;\n                }\n\n                if (event.key === 'Escape' && isAnimating) {\n                    event.preventDefault();\n                    handleClose();\n                    restoreTriggerFocus();\n                    return;\n                }\n\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    handleHeaderClick();\n                }\n            },\n            [\n                handleClose,\n                handleHeaderClick,\n                inputValue,\n                isAnimating,\n                isDisabled,\n                restoreTriggerFocus,\n            ],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleClose,\n                show: handleOpen,\n            }),\n            [handleClose, handleOpen],\n        );\n\n        const comboBoxGroups = useMemo(\n            () =>\n                lists.map((list) => (\n                    <Fragment key={list.groupName ?? 'default-group'}>\n                        {list.groupName && lists.length > 1 && (\n                            <StyledComboBoxTopic id={`combobox-group--${list.groupName}`}>\n                                {list.groupName}\n                            </StyledComboBoxTopic>\n                        )}\n                        {list.list.map((item) => (\n                            <ComboBoxItem\n                                key={`item-${item.text}`}\n                                item={item}\n                                isSelected={\n                                    selectedItem ? item.value === selectedItem.value : false\n                                }\n                                onSelect={handleSetSelectedItem}\n                                shouldShowBigImage={shouldShowBigImage}\n                                shouldShowRoundImage={\n                                    list.shouldShowRoundImage ?? shouldShowRoundImage\n                                }\n                            />\n                        ))}\n                    </Fragment>\n                )),\n            [handleSetSelectedItem, lists, selectedItem, shouldShowBigImage, shouldShowRoundImage],\n        );\n\n        return useMemo(\n            () => (\n                <StyledComboBox\n                    ref={styledComboBoxElementRef}\n                    $minWidth={minWidth}\n                    $shouldUseFullWidth={shouldUseFullWidth}\n                    onBlur={handleContainerBlur}\n                >\n                    <StyledComboBoxHeader\n                        ref={comboBoxHeaderRef}\n                        $direction={direction}\n                        onClick={handleHeaderClick}\n                        $isOpen={isAnimating}\n                        $isTouch={isTouch}\n                        $size={size}\n                        $shouldShowTransparentBackground={shouldShowTransparentBackground}\n                        $isDisabled={isDisabled}\n                        $shouldChangeColor={shouldChangeColor}\n                        $shouldShowBigImage={shouldShowBigImage}\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        onKeyDown={handleHeaderKeyDown}\n                        tabIndex={!isDisabled && typeof inputValue !== 'string' ? 0 : undefined}\n                        role={!isDisabled && typeof inputValue !== 'string' ? 'button' : undefined}\n                        aria-expanded={\n                            !isDisabled && typeof inputValue !== 'string' ? isAnimating : undefined\n                        }\n                    >\n                        <StyledComboBoxPrefixAndPlaceholderWrapper>\n                            {prefix && (\n                                <StyledComboBoxPrefix $prefixMinWidth={prefixMinWidth}>\n                                    {prefix}\n                                </StyledComboBoxPrefix>\n                            )}\n                            <StyledComboBoxPlaceholder\n                                $shouldReduceOpacity={!selectedItem && !internalSelectedItem}\n                            >\n                                {placeholderImageUrl && (\n                                    <StyledComboBoxPlaceholderImage\n                                        src={placeholderImageUrl}\n                                        $shouldShowBigImage={shouldShowBigImage}\n                                        $shouldShowRoundImage={shouldShowRoundPlaceholderImage}\n                                    />\n                                )}\n                                {placeholderIcon && <Icon icons={placeholderIcon} />}\n                                {typeof inputValue === 'string' ? (\n                                    <StyledComboBoxInput\n                                        ref={comboBoxInputRef}\n                                        disabled={isDisabled}\n                                        value={inputValue}\n                                        onChange={onInputChange}\n                                        onBlur={handleInputBlur}\n                                        onFocus={handleInputFocus}\n                                        placeholder={placeholderText}\n                                    />\n                                ) : (\n                                    <StyledComboBoxPlaceholderText>\n                                        {placeholderText}\n                                    </StyledComboBoxPlaceholderText>\n                                )}\n                                {internalSelectedItem &&\n                                    internalSelectedItem.suffixElement &&\n                                    internalSelectedItem.suffixElement}\n                            </StyledComboBoxPlaceholder>\n                        </StyledComboBoxPrefixAndPlaceholderWrapper>\n                        {shouldShowClearIcon && internalSelectedItem && (\n                            <StyledComboBoxClearIconWrapper\n                                $isDisabled={isDisabled}\n                                onClick={handleClear}\n                            >\n                                <Icon icons={['fa fa-times']} />\n                            </StyledComboBoxClearIconWrapper>\n                        )}\n                        {!shouldDisableActions && (\n                            <StyledComboBoxIconWrapper\n                                $isDisabled={isDisabled}\n                                $size={size}\n                                $shouldShowBorderLeft={\n                                    shouldShowClearIcon === true &&\n                                    internalSelectedItem !== undefined\n                                }\n                            >\n                                <Icon icons={['fa fa-chevron-down']} isDisabled={isDisabled} />\n                            </StyledComboBoxIconWrapper>\n                        )}\n                    </StyledComboBoxHeader>\n                    {styledComboBoxElementRef.current && (\n                        <DropdownBodyWrapper\n                            anchorElement={styledComboBoxElementRef.current}\n                            bodyWidth={bodyWidth}\n                            contentHeight={contentHeight}\n                            shouldCaptureEvents={shouldCaptureEvents}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                        >\n                            <StyledComboBoxBody\n                                $maxHeight={maxHeight}\n                                $minWidth={bodyWidth ?? bodyMinWidth}\n                                className=\"chayns-scrollbar\"\n                                ref={contentRef}\n                                tabIndex={0}\n                            >\n                                {comboBoxGroups}\n                            </StyledComboBoxBody>\n                        </DropdownBodyWrapper>\n                    )}\n                </StyledComboBox>\n            ),\n            [\n                bodyMinWidth,\n                bodyWidth,\n                comboBoxGroups,\n                container,\n                contentHeight,\n                direction,\n                handleClear,\n                handleClose,\n                handleHeaderClick,\n                handleHeaderKeyDown,\n                handleInputBlur,\n                handleInputFocus,\n                inputValue,\n                internalSelectedItem,\n                isAnimating,\n                isDisabled,\n                isTouch,\n                maxHeight,\n                minWidth,\n                onInputChange,\n                placeholderIcon,\n                placeholderImageUrl,\n                placeholderText,\n                prefix,\n                prefixMinWidth,\n                selectedItem,\n                shouldChangeColor,\n                shouldDisableActions,\n                shouldCaptureEvents,\n                shouldShowKeyboardHighlighting,\n                shouldShowBigImage,\n                shouldShowClearIcon,\n                shouldShowRoundPlaceholderImage,\n                shouldShowTransparentBackground,\n                shouldUseFullWidth,\n                size,\n            ],\n        );\n    },\n);\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import { DropdownDirection } from '../../types/dropdown';
 import { ComboBoxSize } from './ComboBox.types';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledComboBox = styled.div`
     min-width: 0;
     user-select: none;
@@ -115,6 +116,16 @@ export const StyledComboBoxHeader = styled.div`
                 background-color: ${theme['secondary-102']};
             }
         `}
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible,
+            &:focus-within {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledComboBoxPlaceholder = styled.div`
     align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","ComboBoxSize","StyledComboBox","div","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","$isDisabled","$size","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    min-width: 0;\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) => {\n        if ($shouldUseFullWidth) {\n            return css`\n                width: 100%;\n                max-width: 100%;\n                min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n            `;\n        }\n\n        if (typeof $minWidth === 'number') {\n            return css`\n                width: fit-content;\n                max-width: 100%;\n                min-width: ${$minWidth}px;\n            `;\n        }\n\n        return css`\n            width: fit-content;\n            max-width: 100%;\n        `;\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: DropdownDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowTransparentBackground: boolean;\n    $size: ComboBoxSize;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    min-width: 0;\n    border: 1px solid transparent;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    justify-content: space-between;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $size }) => {\n        switch ($size) {\n            case ComboBoxSize.SMALL:\n                return css`\n                    height: 34px;\n                `;\n            case ComboBoxSize.NORMAL:\n            default:\n                return css`\n                    min-height: 42px;\n                `;\n        }\n    }}\n\n    ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                    background-color: transparent;\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n                background-color: transparent;\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor\n                ? theme['000']\n                : theme['100']};\n        `;\n    }}\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    min-width: 0;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: 4px 10px;\n`;\n\ntype StyledComboBoxPrefixProps = {\n    $prefixMinWidth?: number;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n    flex: 0 0 auto;\n    min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    color: ${({ theme }: { theme: Theme }) => theme.text};\n    border: none;\n    background-color: transparent;\n    width: 100%;\n    min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = { $isDisabled: boolean };\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n    $shouldShowBorderLeft: boolean;\n    $isDisabled: boolean;\n    $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowBorderLeft }) =>\n        $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    width: 40px;\n\n    ${({ $size }) => {\n        switch ($size) {\n            case ComboBoxSize.SMALL:\n                return css`\n                    height: 30px;\n                `;\n            case ComboBoxSize.NORMAL:\n            default:\n                return css`\n                    height: 40px;\n                `;\n        }\n    }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $maxHeight: number;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    min-width: ${({ $minWidth }) => $minWidth}px;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    cursor: default;\n    display: flex;\n    flex: 0 0 auto;\n    font-weight: bold;\n    min-height: 38px;\n    line-height: normal;\n    padding: 8px 10px;\n    position: sticky;\n    top: 0;\n    z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","ComboBoxSize","keyboardFocusHighlightingRingCss","StyledComboBox","div","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","$isDisabled","$size","SMALL","NORMAL","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","$shouldShowKeyboardHighlighting","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { DropdownDirection } from '../../types/dropdown';\nimport { ComboBoxProps, ComboBoxSize } from './ComboBox.types';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledComboBoxProps = WithTheme<{\n    $minWidth?: number;\n    $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    min-width: 0;\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) => {\n        if ($shouldUseFullWidth) {\n            return css`\n                width: 100%;\n                max-width: 100%;\n                min-width: ${typeof $minWidth === 'number' ? `${$minWidth}px` : '0'};\n            `;\n        }\n\n        if (typeof $minWidth === 'number') {\n            return css`\n                width: fit-content;\n                max-width: 100%;\n                min-width: ${$minWidth}px;\n            `;\n        }\n\n        return css`\n            width: fit-content;\n            max-width: 100%;\n        `;\n    }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: DropdownDirection;\n    $isDisabled?: boolean;\n    $shouldChangeColor: boolean;\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowTransparentBackground: boolean;\n    $size: ComboBoxSize;\n    $shouldShowKeyboardHighlighting: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    min-width: 0;\n    border: 1px solid transparent;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    justify-content: space-between;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $size }) => {\n        switch ($size) {\n            case ComboBoxSize.SMALL:\n                return css`\n                    height: 34px;\n                `;\n            case ComboBoxSize.NORMAL:\n            default:\n                return css`\n                    min-height: 42px;\n                `;\n        }\n    }}\n\n    ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n        if ($shouldShowTransparentBackground) {\n            if (theme.colorMode === 'dark') {\n                return css`\n                    border-color: rgba(255, 255, 255, 0.5);\n                    background-color: transparent;\n                `;\n            }\n\n            return css`\n                border-color: rgba(0, 0, 0, 0.5);\n                background-color: transparent;\n            `;\n        }\n\n        return css`\n            border-color: rgba(160, 160, 160, 0.3);\n            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor\n                ? theme['000']\n                : theme['100']};\n        `;\n    }}\n\n    ${({ $shouldShowBigImage }) =>\n        $shouldShowBigImage &&\n        css`\n            height: 42px;\n        `}\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes($direction)\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible,\n            &:focus-within {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    min-width: 0;\n    opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    padding: 4px 10px;\n`;\n\ntype StyledComboBoxPrefixProps = {\n    $prefixMinWidth?: number;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n    flex: 0 0 auto;\n    min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n    padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n    color: ${({ theme }: { theme: Theme }) => theme.text};\n    border: none;\n    background-color: transparent;\n    width: 100%;\n    min-width: 0;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n    $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    $shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n}>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n    width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = { $isDisabled: boolean };\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = {\n    $shouldShowBorderLeft: boolean;\n    $isDisabled: boolean;\n    $size: ComboBoxSize;\n};\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowBorderLeft }) =>\n        $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    width: 40px;\n\n    ${({ $size }) => {\n        switch ($size) {\n            case ComboBoxSize.SMALL:\n                return css`\n                    height: 30px;\n                `;\n            case ComboBoxSize.NORMAL:\n            default:\n                return css`\n                    height: 40px;\n                `;\n        }\n    }}\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $maxHeight: number;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    min-width: ${({ $minWidth }) => $minWidth}px;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    max-height: ${({ $maxHeight }) => $maxHeight}px;\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n    align-items: center;\n    background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n    color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n    cursor: default;\n    display: flex;\n    flex: 0 0 auto;\n    font-weight: bold;\n    min-height: 38px;\n    line-height: normal;\n    padding: 8px 10px;\n    position: sticky;\n    top: 0;\n    z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactHTML, ReactNode } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { DropdownDirection } from '../../types/dropdown';\n\n/**\n * Ref interface for the `ComboBox` component.\n */\nexport interface ComboBoxRef {\n    /**\n     * Hides the dropdown content.\n     */\n    hide: VoidFunction;\n    /**\n     * Shows the dropdown content.\n     */\n    show: VoidFunction;\n}\n\n/**\n * A grouped list definition used by the `ComboBox` component.\n */\nexport interface IComboBoxItems {\n    /**\n     * Optional group label shown above the list.\n     */\n    groupName?: string;\n    /**\n     * The items that should be rendered inside the group.\n     */\n    list: Array<IComboBoxItem>;\n    /**\n     * Whether the items in this group should use round images.\n     */\n    shouldShowRoundImage?: boolean;\n}\n\n/**\n * Optional text styling configuration for a combobox item.\n */\nexport interface ComboBoxTextStyles {\n    /**\n     * The HTML tag that should be used for the text wrapper.\n     */\n    tagName?: keyof ReactHTML;\n    /**\n     * Additional inline styles applied to the text wrapper.\n     */\n    styles?: CSSPropertiesWithVars;\n    /**\n     * Additional class name applied to the text wrapper.\n     */\n    className?: string;\n}\n\n/**\n * Single selectable item configuration for the `ComboBox` component.\n */\nexport interface IComboBoxItem {\n    /**\n     * Optional icon classes rendered before the text.\n     */\n    icons?: string[];\n    /**\n     * Optional background style used for the image placeholder.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * Optional image URL rendered for the item.\n     */\n    imageUrl?: string;\n    /**\n     * Whether the item should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Optional element rendered on the right side of the item.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Optional secondary text rendered below the main text.\n     */\n    subtext?: string;\n    /**\n     * Optional suffix element rendered after the text.\n     */\n    suffixElement?: ReactNode;\n    /**\n     * Main label of the item.\n     */\n    text: string;\n    /**\n     * Stable item value used for selection and matching.\n     */\n    value: string | number;\n    /**\n     * Optional text styling overrides for the item label.\n     */\n    textStyles?: ComboBoxTextStyles;\n}\n\n/**\n * Available size variants for the `ComboBox` header.\n */\nexport enum ComboBoxSize {\n    /**\n     * Standard height and spacing.\n     */\n    NORMAL = 'normal',\n    /**\n     * Compact height and spacing.\n     */\n    SMALL = 'small',\n}\n\n/**\n * Props for the `ComboBox` component.\n */\nexport type ComboBoxProps = {\n    /**\n     * The width of the body.\n     * @default undefined\n     */\n    bodyWidth?: number;\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     * @default undefined\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     * @default DropdownDirection.RIGHT\n     */\n    direction?: DropdownDirection;\n    /**\n     * The value of the optional input.\n     * @default undefined\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     * @default false\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     * @default 280\n     */\n    maxHeight?: number;\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     * @default undefined\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     * @default undefined\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input gets its focus.\n     * @default undefined\n     */\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     * @default undefined\n     */\n    onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is shown.\n     * @default undefined\n     */\n    onShow?: () => void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is hidden.\n     * @default undefined\n     */\n    onHide?: () => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     * @default undefined\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     * @default undefined\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     * @default false\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the combo box if an item is selected.\n     * @default false\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     * @default false\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     * @default false\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     * @default false\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     * @default false\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * If true, the dropdown will use the maximum width of the items.\n     * @default false\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n    /**\n     * Whether the outside events should be captured.\n     * @default undefined\n     */\n    shouldCaptureEvents?: boolean;\n    /**\n     * The size of the ComboBox.\n     * @default ComboBoxSize.NORMAL\n     */\n    size?: ComboBoxSize;\n    /**\n     * Optional min width for the prefix element.\n     * @default undefined\n     */\n    prefixMinWidth?: number;\n};\n"],"mappings":"AAIA;AACA;AACA;;AAYA;AACA;AACA;;AAgBA;AACA;AACA;;AAgBA;AACA;AACA;;AA4CA;AACA;AACA;AACA,WAAYA,YAAY,0BAAZA,YAAY;EACpB;AACJ;AACA;EAHYA,YAAY;EAKpB;AACJ;AACA;EAPYA,YAAY;EAAA,OAAZA,YAAY;AAAA;;AAWxB;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"ComboBox.types.js","names":["ComboBoxSize"],"sources":["../../../../src/components/combobox/ComboBox.types.ts"],"sourcesContent":["import { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactHTML, ReactNode } from 'react';\nimport { CSSPropertiesWithVars } from 'styled-components/dist/types';\nimport { DropdownDirection } from '../../types/dropdown';\n\n/**\n * Ref interface for the `ComboBox` component.\n */\nexport interface ComboBoxRef {\n    /**\n     * Hides the dropdown content.\n     */\n    hide: VoidFunction;\n    /**\n     * Shows the dropdown content.\n     */\n    show: VoidFunction;\n}\n\n/**\n * A grouped list definition used by the `ComboBox` component.\n */\nexport interface IComboBoxItems {\n    /**\n     * Optional group label shown above the list.\n     */\n    groupName?: string;\n    /**\n     * The items that should be rendered inside the group.\n     */\n    list: Array<IComboBoxItem>;\n    /**\n     * Whether the items in this group should use round images.\n     */\n    shouldShowRoundImage?: boolean;\n}\n\n/**\n * Optional text styling configuration for a combobox item.\n */\nexport interface ComboBoxTextStyles {\n    /**\n     * The HTML tag that should be used for the text wrapper.\n     */\n    tagName?: keyof ReactHTML;\n    /**\n     * Additional inline styles applied to the text wrapper.\n     */\n    styles?: CSSPropertiesWithVars;\n    /**\n     * Additional class name applied to the text wrapper.\n     */\n    className?: string;\n}\n\n/**\n * Single selectable item configuration for the `ComboBox` component.\n */\nexport interface IComboBoxItem {\n    /**\n     * Optional icon classes rendered before the text.\n     */\n    icons?: string[];\n    /**\n     * Optional background style used for the image placeholder.\n     */\n    imageBackground?: CSSProperties['background'];\n    /**\n     * Optional image URL rendered for the item.\n     */\n    imageUrl?: string;\n    /**\n     * Whether the item should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Optional element rendered on the right side of the item.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Optional secondary text rendered below the main text.\n     */\n    subtext?: string;\n    /**\n     * Optional suffix element rendered after the text.\n     */\n    suffixElement?: ReactNode;\n    /**\n     * Main label of the item.\n     */\n    text: string;\n    /**\n     * Stable item value used for selection and matching.\n     */\n    value: string | number;\n    /**\n     * Optional text styling overrides for the item label.\n     */\n    textStyles?: ComboBoxTextStyles;\n}\n\n/**\n * Available size variants for the `ComboBox` header.\n */\nexport enum ComboBoxSize {\n    /**\n     * Standard height and spacing.\n     */\n    NORMAL = 'normal',\n    /**\n     * Compact height and spacing.\n     */\n    SMALL = 'small',\n}\n\n/**\n * Props for the `ComboBox` component.\n */\nexport type ComboBoxProps = {\n    /**\n     * The width of the body.\n     * @default undefined\n     */\n    bodyWidth?: number;\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     * @default undefined\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     * @default DropdownDirection.RIGHT\n     */\n    direction?: DropdownDirection;\n    /**\n     * The value of the optional input.\n     * @default undefined\n     */\n    inputValue?: string;\n    /**\n     * Whether the combobox should be disabled.\n     * @default false\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     * @default 280\n     */\n    maxHeight?: number;\n    /**\n     * Function to be executed when the value of the optional input is changed.\n     * @default undefined\n     */\n    onInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input lost its focus.\n     * @default undefined\n     */\n    onInputBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the optional input gets its focus.\n     * @default undefined\n     */\n    onInputFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that should be executed when an item is selected. If the function returns false, the item will not be selected.\n     * @default undefined\n     */\n    onSelect?: (comboboxItem?: IComboBoxItem) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is shown.\n     * @default undefined\n     */\n    onShow?: () => void;\n    /**\n     * Function to be executed when the content of the `ComboBox` is hidden.\n     * @default undefined\n     */\n    onHide?: () => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * A prefix that should be displayed before the placeholder.\n     * @default undefined\n     */\n    prefix?: string;\n    /**\n     * An item that should be preselected.\n     * @default undefined\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     * @default false\n     */\n    shouldShowBigImage?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the combo box if an item is selected.\n     * @default false\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether the background should be transparent.\n     * @default false\n     */\n    shouldShowTransparentBackground?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     * @default false\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the ComboBox should be the width of the current item.\n     * @default false\n     */\n    shouldUseCurrentItemWidth?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     * @default false\n     */\n    shouldUseFullWidth?: boolean;\n    /**\n     * If true, the dropdown will use the maximum width of the items.\n     * @default false\n     */\n    shouldDropDownUseMaxItemWidth?: boolean;\n    /**\n     * Whether the outside events should be captured.\n     * @default undefined\n     */\n    shouldCaptureEvents?: boolean;\n    /**\n     * The size of the ComboBox.\n     * @default ComboBoxSize.NORMAL\n     */\n    size?: ComboBoxSize;\n    /**\n     * Enables the shared keyboard-only focus ring for the combobox header.\n     * @default false\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Optional min width for the prefix element.\n     * @default undefined\n     */\n    prefixMinWidth?: number;\n};\n"],"mappings":"AAIA;AACA;AACA;;AAYA;AACA;AACA;;AAgBA;AACA;AACA;;AAgBA;AACA;AACA;;AA4CA;AACA;AACA;AACA,WAAYA,YAAY,0BAAZA,YAAY;EACpB;AACJ;AACA;EAHYA,YAAY;EAKpB;AACJ;AACA;EAPYA,YAAY;EAAA,OAAZA,YAAY;AAAA;;AAWxB;AACA;AACA","ignoreList":[]}