@chayns-components/core 5.4.12 → 5.4.13-alpha.0

package/lib/esm/components/checkbox/Checkbox.styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledCheckbox = styled.div`
     align-items: center;
     display: flex;
@@ -7,7 +8,28 @@ export const StyledCheckbox = styled.div`
     min-height: 20px;
 `;
 export const StyledCheckboxInput = styled.input`
-    display: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+    width: 1px;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible + div > label {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledCheckboxBoxWrapper = styled.div`
     display: flex;
@@ -32,6 +54,10 @@ export const StyledCheckboxBox = styled.label`
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
     position: relative;
+    display: inline-block;
+    width: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '44px' : '16px'};
     transition: opacity 0.2s ease;
     user-select: none;
     height: 16px;
@@ -90,7 +116,8 @@ export const StyledCheckboxBox = styled.label`
   if ($shouldShowAsSwitch) {
     return 'none';
   }
-  return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;
+  const fallbackBorderColor = theme['409-rgb'] ? `rgba(${theme['409-rgb']}, 0.5)` : theme.text;
+  return `1px solid ${$borderColor ?? fallbackBorderColor}`;
 }};
 
         border-radius: ${({

package/lib/esm/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledCheckbox","div","StyledCheckboxInput","input","$shouldShowKeyboardHighlighting","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","fallbackBorderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\ntype StyledCheckboxInputProps = {\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledCheckboxInput = styled.input<StyledCheckboxInputProps>`\n    border: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    white-space: nowrap;\n    width: 1px;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible + div > label {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    display: inline-block;\n    width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '44px' : '16px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            const fallbackBorderColor = theme['409-rgb']\n                ? `rgba(${theme['409-rgb']}, 0.5)`\n                : theme.text;\n\n            return `1px solid ${$borderColor ?? fallbackBorderColor}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -73,7 +73,8 @@ const ColorSchemeProvider = ({
   siteId,
   style = {},
   iconColor,
-  customVariables
+  customVariables,
+  shouldEnableKeyboardHighlighting
 }) => {
   const context = useContext(ColorSchemeContext);
   const {
@@ -84,6 +85,7 @@ const ColorSchemeProvider = ({
   const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
   const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
   const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
+  const resolvedShouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlighting ?? context?.shouldEnableKeyboardHighlighting ?? false;
   const contextValue = useChaynsTheme({
     color,
     iconColor,
@@ -97,7 +99,10 @@ const ColorSchemeProvider = ({
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: contextValue.theme
   }, /*#__PURE__*/React.createElement(ColorSchemeContext.Provider, {
-    value: contextValue
+    value: {
+      ...contextValue,
+      shouldEnableKeyboardHighlighting: resolvedShouldEnableKeyboardHighlighting
+    }
   }, /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
     className: "color-scheme-provider",
     style: style

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);
@@ -46,6 +48,8 @@ const ComboBox = /*#__PURE__*/forwardRef(({
   const [availableMaxHeight, setAvailableMaxHeight] = useState(undefined);
   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
@@ -81,6 +85,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;
@@ -132,6 +137,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
@@ -147,13 +169,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();
@@ -162,6 +186,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;
@@ -187,7 +217,8 @@ const ComboBox = /*#__PURE__*/forwardRef(({
         const focusedElement = children[newIndex];
         focusedElement.tabIndex = 0;
         focusedElement.focus();
-      } else if (e.key === 'Enter' && focusedIndex !== null) {
+      } else if ((e.key === 'Enter' || e.key === ' ') && focusedIndex !== null) {
+        e.preventDefault();
         const element = contentRef.current?.children[focusedIndex];
         if (!element) return;
         const {
@@ -207,7 +238,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
@@ -266,6 +297,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
@@ -285,8 +331,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,
@@ -295,7 +343,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, {
@@ -307,6 +360,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,
@@ -342,7 +396,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, effectiveMaxHeight, 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, effectiveMaxHeight, 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","availableMaxHeight","setAvailableMaxHeight","isInputFocused","styledComboBoxElementRef","contentRef","parentSize","shouldUseParentElement","functions","values","isTouch","areaProvider","calculatedMinWidth","calculatedBodyMinWidth","parentWidth","width","shouldChangeColor","shouldDisableActions","combinedLists","flatMap","list","length","some","item","value","effectiveMaxHeight","Math","min","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","onAvailableMaxHeightChange","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        const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\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        // Limits the configured maxHeight by the height that is actually available inside the\n        // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut\n        // off when it is opened to the top or bottom and there is not enough space.\n        const effectiveMaxHeight = useMemo(() => {\n            if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {\n                return Math.min(maxHeight, availableMaxHeight);\n            }\n\n            return maxHeight;\n        }, [availableMaxHeight, maxHeight]);\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 (effectiveMaxHeight < height) {\n                height = effectiveMaxHeight;\n            }\n\n            return height;\n        }, [effectiveMaxHeight, lists, 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                            onAvailableMaxHeightChange={setAvailableMaxHeight}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                        >\n                            <StyledComboBoxBody\n                                $maxHeight={effectiveMaxHeight}\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                effectiveMaxHeight,\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","availableMaxHeight","setAvailableMaxHeight","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","effectiveMaxHeight","Math","min","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","onAvailableMaxHeightChange","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        const [availableMaxHeight, setAvailableMaxHeight] = useState<number | undefined>(undefined);\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        // Limits the configured maxHeight by the height that is actually available inside the\n        // container (reported by the DropdownBodyWrapper). This prevents the dropdown from being cut\n        // off when it is opened to the top or bottom and there is not enough space.\n        const effectiveMaxHeight = useMemo(() => {\n            if (typeof availableMaxHeight === 'number' && availableMaxHeight > 0) {\n                return Math.min(maxHeight, availableMaxHeight);\n            }\n\n            return maxHeight;\n        }, [availableMaxHeight, maxHeight]);\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 (effectiveMaxHeight < height) {\n                height = effectiveMaxHeight;\n            }\n\n            return height;\n        }, [effectiveMaxHeight, lists, 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' || e.key === ' ') && focusedIndex !== null) {\n                    e.preventDefault();\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                            onAvailableMaxHeightChange={setAvailableMaxHeight}\n                            onClose={handleClose}\n                            direction={direction}\n                            container={container}\n                            shouldShowDropdown={isAnimating}\n                            minBodyWidth={bodyWidth ?? bodyMinWidth}\n                        >\n                            <StyledComboBoxBody\n                                $maxHeight={effectiveMaxHeight}\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                effectiveMaxHeight,\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;