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

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

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

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

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

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

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

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

@@ -8,7 +8,8 @@ import Icon from '../icon/Icon';
 import ContextMenuContent from './context-menu-content/ContextMenuContent';
 import { StyledContextMenu } from './ContextMenu.styles';
 import { ContextMenuAlignment } from './ContextMenu.types';
-import { getDefaultFocusedIndex } from './ContextMenu.utils';
+import { getActiveItemIndex, getDefaultFocusedIndex, selectItem } from './ContextMenu.utils';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const ContextMenu = /*#__PURE__*/forwardRef(({
   alignment,
   className,
@@ -26,6 +27,7 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
   shouldDisableClick = false,
   shouldHidePopupArrow = false,
   shouldShowHoverEffect = false,
+  shouldEnableKeyboardHighlighting,
   shouldUseDefaultTriggerStyles = true,
   style,
   yOffset = 0,
@@ -41,10 +43,16 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
   const [isContentShown, setIsContentShown] = useState(false);
   const [portal, setPortal] = useState();
   const [isHovered, setIsHovered] = useState(false);
+  const [shouldUseFocusableWrapper, setShouldUseFocusableWrapper] = useState(false);
   const uuid = useUuid();
   const contextMenuContentRef = useRef(null);
   const contextMenuRef = useRef(null);
+  const shouldSkipNextContextMenuOpenRef = useRef(false);
+  const shouldPreventNextNativeContextMenuRef = useRef(false);
   const isTouch = useIsTouch();
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !shouldDisableClick);
+  const shouldShowWrapperKeyboardHighlighting = shouldShowKeyboardHighlighting && shouldUseFocusableWrapper;
+  const shouldUseKeyboardFocusableWrapper = shouldUseFocusableWrapper && !shouldDisableClick;
   useEffect(() => {
     if (isContentShown) {
       setFocusedIndex(getDefaultFocusedIndex(items));
@@ -65,35 +73,13 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
   const handleHide = useCallback(() => {
     setIsContentShown(false);
   }, []);
-  useEffect(() => {
-    if (!isContentShown) return () => {};
-    const handleKey = e => {
-      if (items.length === 0 || isHovered) return;
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setFocusedIndex(prev => prev >= items.length - 1 ? 0 : prev + 1);
-      }
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setFocusedIndex(prev => prev <= 0 ? items.length - 1 : prev - 1);
-      }
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        const item = items[focusedIndex];
-        if (item) {
-          void item.onClick();
-          if (shouldCloseOnPopupClick) {
-            handleHide();
-          }
-        }
-      }
-      if (e.key === 'Escape') {
-        handleHide();
-      }
-    };
-    document.addEventListener('keydown', handleKey);
-    return () => document.removeEventListener('keydown', handleKey);
-  }, [isContentShown, items, focusedIndex, handleHide, shouldCloseOnPopupClick, isHovered]);
+  const handleContainerBlur = useCallback(event => {
+    const nextFocusedElement = event.relatedTarget;
+    const currentContainer = event.currentTarget;
+    if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !contextMenuContentRef.current?.contains(nextFocusedElement)) {
+      handleHide();
+    }
+  }, [handleHide]);
   const handleShow = useCallback(async () => {
     if (isTouch) {
       const {
@@ -161,17 +147,123 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
     event.stopPropagation();
     void handleShow();
   }, [handleShow, shouldDisableClick]);
-  const handleDocumentClick = useCallback(event => {
-    if (!shouldCloseOnPopupClick && contextMenuContentRef.current?.contains(event.target)) {
+  const handleKeyDown = useCallback(event => {
+    if (shouldDisableClick) {
+      return;
+    }
+    const isActivationKey = event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';
+    if (isContentShown && event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      handleHide();
+      return;
+    }
+    if (isContentShown && !isHovered && event.key === 'ArrowDown') {
+      event.preventDefault();
+      event.stopPropagation();
+      setFocusedIndex(prev => prev >= items.length - 1 ? 0 : prev + 1);
+      return;
+    }
+    if (isContentShown && !isHovered && event.key === 'ArrowUp') {
+      event.preventDefault();
+      event.stopPropagation();
+      setFocusedIndex(prev => prev <= 0 ? items.length - 1 : prev - 1);
       return;
     }
-    handleHide();
-  }, [handleHide, shouldCloseOnPopupClick]);
+    if (isContentShown && isActivationKey) {
+      if (selectItem({
+        index: getActiveItemIndex({
+          contextMenuContentElement: contextMenuContentRef.current,
+          focusedIndex
+        }),
+        items,
+        onClose: handleHide,
+        shouldCloseOnPopupClick
+      })) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      return;
+    }
+    if (event.currentTarget !== event.target) {
+      return;
+    }
+    const isContextMenuShortcut = event.key === 'ContextMenu' || event.key === 'F10' && event.shiftKey;
+    if (isContextMenuShortcut) {
+      event.preventDefault();
+      event.stopPropagation();
+      shouldSkipNextContextMenuOpenRef.current = true;
+      void handleShow();
+      return;
+    }
+    if (shouldUseFocusableWrapper && isActivationKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      void handleShow();
+    }
+  }, [focusedIndex, handleHide, handleShow, isHovered, isContentShown, items, items.length, shouldCloseOnPopupClick, shouldDisableClick, shouldUseFocusableWrapper]);
+  const handleContextMenu = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (shouldDisableClick) {
+      return;
+    }
+    if (shouldSkipNextContextMenuOpenRef.current) {
+      shouldSkipNextContextMenuOpenRef.current = false;
+      return;
+    }
+    void handleShow();
+  }, [handleShow, shouldDisableClick]);
+  useEffect(() => {
+    const handleGlobalKeyDown = event => {
+      if (shouldDisableClick || !contextMenuRef.current) {
+        return;
+      }
+      const isContextMenuShortcut = event.key === 'ContextMenu' || event.key === 'F10' && event.shiftKey;
+      if (!isContextMenuShortcut) {
+        return;
+      }
+      const {
+        activeElement
+      } = document;
+      if (!(activeElement instanceof HTMLElement) || activeElement === document.body || activeElement === document.documentElement) {
+        return;
+      }
+      const shouldOpenFromFocusedParent = activeElement.contains(contextMenuRef.current) && !contextMenuRef.current.contains(activeElement);
+      if (!shouldOpenFromFocusedParent) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      shouldPreventNextNativeContextMenuRef.current = true;
+      void handleShow();
+    };
+    const handleNativeContextMenuCapture = event => {
+      if (!shouldPreventNextNativeContextMenuRef.current) {
+        return;
+      }
+      shouldPreventNextNativeContextMenuRef.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener('keydown', handleGlobalKeyDown, true);
+    document.addEventListener('contextmenu', handleNativeContextMenuCapture, true);
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyDown, true);
+      document.removeEventListener('contextmenu', handleNativeContextMenuCapture, true);
+    };
+  }, [handleShow, shouldDisableClick]);
   useImperativeHandle(ref, () => ({
     hide: handleHide,
     show: handleShow
   }), [handleHide, handleShow]);
   useEffect(() => {
+    const handleDocumentClick = event => {
+      if (!shouldCloseOnPopupClick && contextMenuContentRef.current?.contains(event.target)) {
+        return;
+      }
+      handleHide();
+    };
     if (isContentShown) {
       document.addEventListener('click', handleDocumentClick, true);
       window.addEventListener('blur', handleHide);
@@ -185,7 +277,7 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
       document.removeEventListener('click', handleDocumentClick, true);
       window.removeEventListener('blur', handleHide);
     };
-  }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
+  }, [handleHide, isContentShown, onHide, onShow, shouldCloseOnPopupClick]);
   useEffect(() => {
     if (!newContainer) {
       return;
@@ -202,13 +294,7 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
       alignment: alignment ?? internalAlignment,
       ref: contextMenuContentRef,
       focusedIndex: focusedIndex,
-      onKeySelect: index => {
-        const item = items[index];
-        if (item) {
-          void item.onClick();
-          handleHide();
-        }
-      },
+      onItemFocus: setFocusedIndex,
       onMouseEnter: () => {
         setIsHovered(true);
         setFocusedIndex(-1);
@@ -218,13 +304,30 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
       }
     })), newContainer));
   }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid, zIndex, shouldHidePopupArrow, headline, focusedIndex, handleHide]);
+  useEffect(() => {
+    if (!contextMenuRef.current) {
+      return;
+    }
+    const focusableChildSelector = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+    const hasFocusableChild = Boolean(contextMenuRef.current.querySelector(focusableChildSelector));
+    setShouldUseFocusableWrapper(!hasFocusableChild);
+  }, [children]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContextMenu, {
     className: className ? `beta-chayns-context-menu ${className}` : 'beta-chayns-context-menu',
     $isActive: isContentShown && shouldShowHoverEffect,
     $shouldAddHoverEffect: !isTouch && shouldShowHoverEffect,
+    $shouldShowWrapperKeyboardHighlighting: shouldShowWrapperKeyboardHighlighting,
     $shouldUseDefaultTriggerStyles: shouldUseDefaultTriggerStyles,
     onClick: handleClick,
+    onContextMenuCapture: handleContextMenu,
+    onContextMenu: handleContextMenu,
+    onKeyDown: handleKeyDown,
+    onBlur: handleContainerBlur,
     ref: contextMenuRef,
+    tabIndex: shouldUseKeyboardFocusableWrapper ? 0 : undefined,
+    role: shouldUseKeyboardFocusableWrapper ? 'button' : undefined,
+    "aria-haspopup": shouldUseKeyboardFocusableWrapper ? 'menu' : undefined,
+    "aria-expanded": shouldUseKeyboardFocusableWrapper ? isContentShown : undefined,
     style: style
   }, children), portal);
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","useIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenuAlignment","getDefaultFocusedIndex","ContextMenu","alignment","className","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","shouldUseDefaultTriggerStyles","style","yOffset","zIndex","ref","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","newContainer","setNewContainer","focusedIndex","setFocusedIndex","isContentShown","setIsContentShown","portal","setPortal","isHovered","setIsHovered","uuid","contextMenuContentRef","contextMenuRef","isTouch","current","el","element","closest","Element","handleHide","handleKey","e","length","key","preventDefault","prev","item","onClick","document","addEventListener","removeEventListener","handleShow","result","type","SELECT","buttons","list","map","text","isSelected","index","name","id","icon","undefined","open","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","stopPropagation","handleDocumentClick","contains","target","hide","show","window","initial","onKeySelect","onMouseEnter","onMouseLeave","Fragment","$isActive","$shouldAddHoverEffect","$shouldUseDefaultTriggerStyles","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    isValidElement,\n    MouseEventHandler,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { useIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuProps,\n    type ContextMenuRef,\n} from './ContextMenu.types';\nimport { SelectDialogResult } from '../../types/general';\nimport { getDefaultFocusedIndex } from './ContextMenu.utils';\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            className,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container,\n            coordinates,\n            headline,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n            shouldDisableClick = false,\n            shouldHidePopupArrow = false,\n            shouldShowHoverEffect = false,\n            shouldUseDefaultTriggerStyles = true,\n            style,\n            yOffset = 0,\n            zIndex = 20,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [newContainer, setNewContainer] = useState(container ?? null);\n        const [focusedIndex, setFocusedIndex] = useState(getDefaultFocusedIndex(items));\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [isHovered, setIsHovered] = useState(false);\n\n        const uuid = useUuid();\n\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const isTouch = useIsTouch();\n\n        useEffect(() => {\n            if (isContentShown) {\n                setFocusedIndex(getDefaultFocusedIndex(items));\n            }\n        }, [isContentShown, items]);\n\n        useEffect(() => {\n            if (contextMenuRef.current && !container) {\n                const el = contextMenuRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        useEffect(() => {\n            if (!isContentShown) return () => {};\n\n            const handleKey = (e: KeyboardEvent) => {\n                if (items.length === 0 || isHovered) return;\n\n                if (e.key === 'ArrowDown') {\n                    e.preventDefault();\n                    setFocusedIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));\n                }\n\n                if (e.key === 'ArrowUp') {\n                    e.preventDefault();\n                    setFocusedIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));\n                }\n\n                if (e.key === 'Enter') {\n                    e.preventDefault();\n                    const item = items[focusedIndex];\n                    if (item) {\n                        void item.onClick();\n\n                        if (shouldCloseOnPopupClick) {\n                            handleHide();\n                        }\n                    }\n                }\n\n                if (e.key === 'Escape') {\n                    handleHide();\n                }\n            };\n\n            document.addEventListener('keydown', handleKey);\n\n            return () => document.removeEventListener('keydown', handleKey);\n        }, [isContentShown, items, focusedIndex, handleHide, shouldCloseOnPopupClick, isHovered]);\n\n        const handleShow = useCallback(async () => {\n            if (isTouch) {\n                const { result } = (await createDialog({\n                    type: DialogType.SELECT,\n                    buttons: [],\n                    list: items.map(({ icons, text, isSelected }, index) => ({\n                        name: text,\n                        id: index,\n                        isSelected,\n                        icon: isValidElement(icons)\n                            ? undefined\n                            : (icons as string[] | undefined)?.[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n                const x =\n                    (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                const y =\n                    (childrenTop + childrenHeight / 2 - top) / zoomY +\n                    newContainer.scrollTop -\n                    yOffset;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [isTouch, items, newContainer, yOffset]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(\n            (event) => {\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow, shouldDisableClick],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                zIndex={zIndex}\n                                headline={headline}\n                                shouldHidePopupArrow={shouldHidePopupArrow}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                                focusedIndex={focusedIndex}\n                                onKeySelect={(index) => {\n                                    const item = items[index];\n                                    if (item) {\n                                        void item.onClick();\n                                        handleHide();\n                                    }\n                                }}\n                                onMouseEnter={() => {\n                                    setIsHovered(true);\n                                    setFocusedIndex(-1);\n                                }}\n                                onMouseLeave={() => {\n                                    setIsHovered(false);\n                                }}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            focusedIndex,\n            handleHide,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className={\n                        className\n                            ? `beta-chayns-context-menu ${className}`\n                            : 'beta-chayns-context-menu'\n                    }\n                    $isActive={isContentShown && shouldShowHoverEffect}\n                    $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n                    $shouldUseDefaultTriggerStyles={shouldUseDefaultTriggerStyles}\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                    style={style}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","useIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenuAlignment","getActiveItemIndex","getDefaultFocusedIndex","selectItem","useKeyboardFocusHighlighting","ContextMenu","alignment","className","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","shouldEnableKeyboardHighlighting","shouldUseDefaultTriggerStyles","style","yOffset","zIndex","ref","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","newContainer","setNewContainer","focusedIndex","setFocusedIndex","isContentShown","setIsContentShown","portal","setPortal","isHovered","setIsHovered","shouldUseFocusableWrapper","setShouldUseFocusableWrapper","uuid","contextMenuContentRef","contextMenuRef","shouldSkipNextContextMenuOpenRef","shouldPreventNextNativeContextMenuRef","isTouch","shouldShowKeyboardHighlighting","shouldShowWrapperKeyboardHighlighting","shouldUseKeyboardFocusableWrapper","current","el","element","closest","Element","handleHide","handleContainerBlur","event","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","handleShow","result","type","SELECT","buttons","list","map","text","isSelected","index","name","id","icon","undefined","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","preventDefault","stopPropagation","handleKeyDown","isActivationKey","key","prev","length","contextMenuContentElement","onClose","target","isContextMenuShortcut","shiftKey","handleContextMenu","handleGlobalKeyDown","activeElement","document","HTMLElement","body","documentElement","shouldOpenFromFocusedParent","handleNativeContextMenuCapture","addEventListener","removeEventListener","hide","show","handleDocumentClick","window","initial","onItemFocus","onMouseEnter","onMouseLeave","focusableChildSelector","hasFocusableChild","Boolean","querySelector","Fragment","$isActive","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting","$shouldUseDefaultTriggerStyles","onContextMenuCapture","onContextMenu","onKeyDown","onBlur","tabIndex","role","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    isValidElement,\n    KeyboardEventHandler,\n    MouseEvent,\n    MouseEventHandler,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { useIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\nimport {\n    ContextMenuAlignment,\n    type ContextMenuCoordinates,\n    type ContextMenuProps,\n    type ContextMenuRef,\n} from './ContextMenu.types';\nimport { SelectDialogResult } from '../../types/general';\nimport { getActiveItemIndex, getDefaultFocusedIndex, selectItem } from './ContextMenu.utils';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            className,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container,\n            coordinates,\n            headline,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n            shouldDisableClick = false,\n            shouldHidePopupArrow = false,\n            shouldShowHoverEffect = false,\n            shouldEnableKeyboardHighlighting,\n            shouldUseDefaultTriggerStyles = true,\n            style,\n            yOffset = 0,\n            zIndex = 20,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [newContainer, setNewContainer] = useState(container ?? null);\n        const [focusedIndex, setFocusedIndex] = useState(getDefaultFocusedIndex(items));\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [isHovered, setIsHovered] = useState(false);\n        const [shouldUseFocusableWrapper, setShouldUseFocusableWrapper] = useState(false);\n\n        const uuid = useUuid();\n\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n        const shouldSkipNextContextMenuOpenRef = useRef(false);\n        const shouldPreventNextNativeContextMenuRef = useRef(false);\n\n        const isTouch = useIsTouch();\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting && !shouldDisableClick,\n        );\n        const shouldShowWrapperKeyboardHighlighting =\n            shouldShowKeyboardHighlighting && shouldUseFocusableWrapper;\n        const shouldUseKeyboardFocusableWrapper = shouldUseFocusableWrapper && !shouldDisableClick;\n\n        useEffect(() => {\n            if (isContentShown) {\n                setFocusedIndex(getDefaultFocusedIndex(items));\n            }\n        }, [isContentShown, items]);\n\n        useEffect(() => {\n            if (contextMenuRef.current && !container) {\n                const el = contextMenuRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleContainerBlur = useCallback(\n            (event: React.FocusEvent<HTMLSpanElement>) => {\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                        !contextMenuContentRef.current?.contains(nextFocusedElement))\n                ) {\n                    handleHide();\n                }\n            },\n            [handleHide],\n        );\n\n        const handleShow = useCallback(async () => {\n            if (isTouch) {\n                const { result } = (await createDialog({\n                    type: DialogType.SELECT,\n                    buttons: [],\n                    list: items.map(({ icons, text, isSelected }, index) => ({\n                        name: text,\n                        id: index,\n                        isSelected,\n                        icon: isValidElement(icons)\n                            ? undefined\n                            : (icons as string[] | undefined)?.[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n                const x =\n                    (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                const y =\n                    (childrenTop + childrenHeight / 2 - top) / zoomY +\n                    newContainer.scrollTop -\n                    yOffset;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [isTouch, items, newContainer, yOffset]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(\n            (event) => {\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow, shouldDisableClick],\n        );\n\n        const handleKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n            (event) => {\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                const isActivationKey =\n                    event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';\n\n                if (isContentShown && event.key === 'Escape') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    handleHide();\n                    return;\n                }\n\n                if (isContentShown && !isHovered && event.key === 'ArrowDown') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setFocusedIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));\n                    return;\n                }\n\n                if (isContentShown && !isHovered && event.key === 'ArrowUp') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    setFocusedIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));\n                    return;\n                }\n\n                if (isContentShown && isActivationKey) {\n                    if (\n                        selectItem({\n                            index: getActiveItemIndex({\n                                contextMenuContentElement: contextMenuContentRef.current,\n                                focusedIndex,\n                            }),\n                            items,\n                            onClose: handleHide,\n                            shouldCloseOnPopupClick,\n                        })\n                    ) {\n                        event.preventDefault();\n                        event.stopPropagation();\n                    }\n\n                    return;\n                }\n\n                if (event.currentTarget !== event.target) {\n                    return;\n                }\n\n                const isContextMenuShortcut =\n                    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey);\n\n                if (isContextMenuShortcut) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    shouldSkipNextContextMenuOpenRef.current = true;\n                    void handleShow();\n                    return;\n                }\n\n                if (shouldUseFocusableWrapper && isActivationKey) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    void handleShow();\n                }\n            },\n            [\n                focusedIndex,\n                handleHide,\n                handleShow,\n                isHovered,\n                isContentShown,\n                items,\n                items.length,\n                shouldCloseOnPopupClick,\n                shouldDisableClick,\n                shouldUseFocusableWrapper,\n            ],\n        );\n\n        const handleContextMenu = useCallback(\n            (event: MouseEvent<HTMLSpanElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (shouldDisableClick) {\n                    return;\n                }\n\n                if (shouldSkipNextContextMenuOpenRef.current) {\n                    shouldSkipNextContextMenuOpenRef.current = false;\n                    return;\n                }\n\n                void handleShow();\n            },\n            [handleShow, shouldDisableClick],\n        );\n\n        useEffect(() => {\n            const handleGlobalKeyDown = (event: KeyboardEvent) => {\n                if (shouldDisableClick || !contextMenuRef.current) {\n                    return;\n                }\n\n                const isContextMenuShortcut =\n                    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey);\n\n                if (!isContextMenuShortcut) {\n                    return;\n                }\n\n                const { activeElement } = document;\n\n                if (\n                    !(activeElement instanceof HTMLElement) ||\n                    activeElement === document.body ||\n                    activeElement === document.documentElement\n                ) {\n                    return;\n                }\n\n                const shouldOpenFromFocusedParent =\n                    activeElement.contains(contextMenuRef.current) &&\n                    !contextMenuRef.current.contains(activeElement);\n\n                if (!shouldOpenFromFocusedParent) {\n                    return;\n                }\n\n                event.preventDefault();\n                event.stopPropagation();\n                shouldPreventNextNativeContextMenuRef.current = true;\n                void handleShow();\n            };\n\n            const handleNativeContextMenuCapture = (event: Event) => {\n                if (!shouldPreventNextNativeContextMenuRef.current) {\n                    return;\n                }\n\n                shouldPreventNextNativeContextMenuRef.current = false;\n                event.preventDefault();\n                event.stopPropagation();\n            };\n\n            document.addEventListener('keydown', handleGlobalKeyDown, true);\n            document.addEventListener('contextmenu', handleNativeContextMenuCapture, true);\n\n            return () => {\n                document.removeEventListener('keydown', handleGlobalKeyDown, true);\n                document.removeEventListener('contextmenu', handleNativeContextMenuCapture, true);\n            };\n        }, [handleShow, shouldDisableClick]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            const handleDocumentClick = (event: PointerEvent) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            };\n\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleHide, isContentShown, onHide, onShow, shouldCloseOnPopupClick]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                zIndex={zIndex}\n                                headline={headline}\n                                shouldHidePopupArrow={shouldHidePopupArrow}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                                focusedIndex={focusedIndex}\n                                onItemFocus={setFocusedIndex}\n                                onMouseEnter={() => {\n                                    setIsHovered(true);\n                                    setFocusedIndex(-1);\n                                }}\n                                onMouseLeave={() => {\n                                    setIsHovered(false);\n                                }}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            focusedIndex,\n            handleHide,\n        ]);\n\n        useEffect(() => {\n            if (!contextMenuRef.current) {\n                return;\n            }\n\n            const focusableChildSelector =\n                'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]';\n\n            const hasFocusableChild = Boolean(\n                contextMenuRef.current.querySelector(focusableChildSelector),\n            );\n\n            setShouldUseFocusableWrapper(!hasFocusableChild);\n        }, [children]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className={\n                        className\n                            ? `beta-chayns-context-menu ${className}`\n                            : 'beta-chayns-context-menu'\n                    }\n                    $isActive={isContentShown && shouldShowHoverEffect}\n                    $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n                    $shouldShowWrapperKeyboardHighlighting={shouldShowWrapperKeyboardHighlighting}\n                    $shouldUseDefaultTriggerStyles={shouldUseDefaultTriggerStyles}\n                    onClick={handleClick}\n                    onContextMenuCapture={handleContextMenu}\n                    onContextMenu={handleContextMenu}\n                    onKeyDown={handleKeyDown}\n                    onBlur={handleContainerBlur}\n                    ref={contextMenuRef}\n                    tabIndex={shouldUseKeyboardFocusableWrapper ? 0 : undefined}\n                    role={shouldUseKeyboardFocusableWrapper ? 'button' : undefined}\n                    aria-haspopup={shouldUseKeyboardFocusableWrapper ? 'menu' : undefined}\n                    aria-expanded={shouldUseKeyboardFocusableWrapper ? isContentShown : undefined}\n                    style={style}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,8 +1,10 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingCircleRingCss, keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledContextMenu = styled.span`
     align-items: center;
     cursor: pointer;
     display: flex;
+    position: relative;
 
     ${({
   $isActive,
@@ -31,5 +33,41 @@ export const StyledContextMenu = styled.span`
                 background-color: ${theme['201']};
             }
         `}
+
+    ${({
+  $shouldShowWrapperKeyboardHighlighting,
+  $shouldUseDefaultTriggerStyles
+}) => $shouldShowWrapperKeyboardHighlighting && ($shouldUseDefaultTriggerStyles ? css`
+                  &:focus-visible {
+                      outline: none;
+                      box-shadow: none;
+                  }
+
+                  &:focus-visible > .beta-chayns-icon {
+                      position: relative;
+                      color: inherit;
+                  }
+
+                  &:focus-visible > .beta-chayns-icon::after {
+                      ${keyboardFocusHighlightingCircleRingCss};
+                      content: '';
+                      position: absolute;
+                      top: 50%;
+                      left: 50%;
+                      width: calc(100% + 8px);
+                      height: calc(100% + 8px);
+                      transform: translate(-50%, -50%);
+                      pointer-events: none;
+                  }
+              ` : css`
+                  &:focus-visible {
+                      outline: none;
+                      box-shadow: none;
+                  }
+
+                  &:focus-visible > * {
+                      ${keyboardFocusHighlightingRingCss}
+                  }
+              `)}
 `;
 //# sourceMappingURL=ContextMenu.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.styles.js","names":["styled","css","StyledContextMenu","span","$isActive","$shouldUseDefaultTriggerStyles","theme","$shouldAddHoverEffect"],"sources":["../../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContextMenuProps = WithTheme<{\n    $isActive: boolean;\n    $shouldAddHoverEffect: boolean;\n    $shouldUseDefaultTriggerStyles: boolean;\n}>;\n\nexport const StyledContextMenu = styled.span<StyledContextMenuProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n\n    ${({ $isActive, $shouldUseDefaultTriggerStyles, theme }: StyledContextMenuProps) =>\n        $shouldUseDefaultTriggerStyles\n            ? css`\n                  background-color: ${$isActive ? theme['201'] : 'transparent'};\n                  border-radius: 3px;\n                  padding: 6px;\n                  transition: background-color 0.3s ease;\n              `\n            : css`\n                  background-color: transparent;\n                  border-radius: inherit;\n                  padding: 0;\n\n                  > * {\n                      width: 100%;\n                  }\n              `}\n\n    ${({ $shouldAddHoverEffect, theme }: StyledContextMenuProps) =>\n        $shouldAddHoverEffect &&\n        css`\n            &:hover {\n                background-color: ${theme['201']};\n            }\n        `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA4B;AACpE;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAEC,8BAA8B;EAAEC;AAA8B,CAAC,KAC3ED,8BAA8B,GACxBJ,GAAG;AACjB,sCAAsCG,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAG,aAAa;AAC9E;AACA;AACA;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEM,qBAAqB;EAAED;AAA8B,CAAC,KACvDC,qBAAqB,IACrBN,GAAG;AACX;AACA,oCAAoCK,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"ContextMenu.styles.js","names":["styled","css","keyboardFocusHighlightingCircleRingCss","keyboardFocusHighlightingRingCss","StyledContextMenu","span","$isActive","$shouldUseDefaultTriggerStyles","theme","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting"],"sources":["../../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    keyboardFocusHighlightingCircleRingCss,\n    keyboardFocusHighlightingRingCss,\n} from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledContextMenuProps = WithTheme<{\n    $isActive: boolean;\n    $shouldAddHoverEffect: boolean;\n    $shouldShowWrapperKeyboardHighlighting: boolean;\n    $shouldUseDefaultTriggerStyles: boolean;\n}>;\n\nexport const StyledContextMenu = styled.span<StyledContextMenuProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    position: relative;\n\n    ${({ $isActive, $shouldUseDefaultTriggerStyles, theme }: StyledContextMenuProps) =>\n        $shouldUseDefaultTriggerStyles\n            ? css`\n                  background-color: ${$isActive ? theme['201'] : 'transparent'};\n                  border-radius: 3px;\n                  padding: 6px;\n                  transition: background-color 0.3s ease;\n              `\n            : css`\n                  background-color: transparent;\n                  border-radius: inherit;\n                  padding: 0;\n\n                  > * {\n                      width: 100%;\n                  }\n              `}\n\n    ${({ $shouldAddHoverEffect, theme }: StyledContextMenuProps) =>\n        $shouldAddHoverEffect &&\n        css`\n            &:hover {\n                background-color: ${theme['201']};\n            }\n        `}\n\n    ${({\n        $shouldShowWrapperKeyboardHighlighting,\n        $shouldUseDefaultTriggerStyles,\n    }: StyledContextMenuProps) =>\n        $shouldShowWrapperKeyboardHighlighting &&\n        ($shouldUseDefaultTriggerStyles\n            ? css`\n                  &:focus-visible {\n                      outline: none;\n                      box-shadow: none;\n                  }\n\n                  &:focus-visible > .beta-chayns-icon {\n                      position: relative;\n                      color: inherit;\n                  }\n\n                  &:focus-visible > .beta-chayns-icon::after {\n                      ${keyboardFocusHighlightingCircleRingCss};\n                      content: '';\n                      position: absolute;\n                      top: 50%;\n                      left: 50%;\n                      width: calc(100% + 8px);\n                      height: calc(100% + 8px);\n                      transform: translate(-50%, -50%);\n                      pointer-events: none;\n                  }\n              `\n            : css`\n                  &:focus-visible {\n                      outline: none;\n                      box-shadow: none;\n                  }\n\n                  &:focus-visible > * {\n                      ${keyboardFocusHighlightingRingCss}\n                  }\n              `)}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SACIC,sCAAsC,EACtCC,gCAAgC,QAC7B,8CAA8C;AASrD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAEC,8BAA8B;EAAEC;AAA8B,CAAC,KAC3ED,8BAA8B,GACxBN,GAAG;AACjB,sCAAsCK,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAG,aAAa;AAC9E;AACA;AACA;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEQ,qBAAqB;EAAED;AAA8B,CAAC,KACvDC,qBAAqB,IACrBR,GAAG;AACX;AACA,oCAAoCO,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCE,sCAAsC;EACtCH;AACoB,CAAC,KACrBG,sCAAsC,KACrCH,8BAA8B,GACzBN,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,sCAAsC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,GACDD,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBE,gCAAgC;AACxD;AACA,eAAe,CAAC;AAChB,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.types.js","names":["ContextMenuAlignment"],"sources":["../../../../src/components/context-menu/ContextMenu.types.ts"],"sourcesContent":["import type { CSSProperties, MouseEvent, ReactNode } from 'react';\n\n/**\n * Enum representing the possible alignments for the context menu.\n */\nexport enum ContextMenuAlignment {\n    TopLeft,\n    BottomLeft,\n    TopRight,\n    BottomRight,\n    TopCenter,\n    BottomCenter,\n}\n\n/**\n * Type representing the coordinates for positioning the context menu.\n */\nexport type ContextMenuCoordinates = {\n    /** The x-coordinate. */\n    x: number;\n    /** The y-coordinate. */\n    y: number;\n};\n\n/**\n * Type representing an item in the context menu.\n */\nexport type ContextMenuItem = {\n    /** Optional icons for the item. Can be strings or React nodes. */\n    icons?: string[] | ReactNode;\n    /** Whether the item is selected. */\n    isSelected?: boolean;\n    /** Unique key for the item. */\n    key: string;\n    /** Function called when the item is clicked. */\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    /** Whether to show a spacer after the item. */\n    shouldShowSpacer?: boolean;\n    /** The text displayed for the item. */\n    text: string;\n};\n\n/**\n * Props for the ContextMenu component.\n */\nexport type ContextMenuProps = {\n    /**\n     * Context menu alignment\n     * @description Optional custom alignment used instead of calculating it using the alignment\n     * within the page. The available alignments can be taken from the ContextMenuAlignment enum.\n     * @example alignment={ContextMenuAlignment.TopLeft}\n     * @optional\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * Additional class name applied to the trigger wrapper.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Children element\n     * @description The element over which the content of the ContextMenu should be displayed.\n     * @example children={<Icon icons={['fa fa-paper-clip']} />\n     * @default <Icon icons={['ts-ellipsis_v']} size={18} />\n     * @optional\n     */\n    children?: ReactNode;\n    /**\n     * Container element\n     * @description The element where the content of the ContextMenu should be rendered via React Portal.\n     * @example container={document.body}\n     * @optional\n     */\n    container?: Element;\n    /**\n     * Custom coordinates\n     * @description Optional own coordinates to be used instead of calculating the alignment based\n     * on the alignment of the children.\n     * @example coordinates={{ x: 100, y: 200 }}\n     * @optional\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * Context menu headline\n     * @description The headline of the context menu. If not provided, no headline will be displayed.\n     * @example headline=\"Options\"\n     * @optional\n     */\n    headline?: string;\n    /**\n     * Menu items\n     * @description The items that will be displayed in the content of the ContextMenu. Custom icon\n     * elements only will be displayed on desktop devices.\n     * @example items={[{ key: '1', text: 'Option 1', onClick: () => {} }]}\n     */\n    items: ContextMenuItem[];\n    /**\n     * Hide callback function\n     * @description Function to be executed when the content of the Context menu has been hidden.\n     * @example onHide={() => console.log('Menu hidden')}\n     * @optional\n     */\n    onHide?: VoidFunction;\n    /**\n     * Show callback function\n     * @description Function to be executed when the content of the Context menu has been shown.\n     * @example onShow={() => console.log('Menu shown')}\n     * @optional\n     */\n    onShow?: VoidFunction;\n    /**\n     * Close on popup click flag\n     * @description Whether the popup should be closed if it is clicked.\n     * @default true\n     * @optional\n     */\n    shouldCloseOnPopupClick?: boolean;\n    /**\n     * Disable click flag\n     * @description Whether the click should be disabled.\n     * @default false\n     * @optional\n     */\n    shouldDisableClick?: boolean;\n    /**\n     * Hide popup arrow flag\n     * @description Whether the arrow of the popup should be hidden.\n     * @default false\n     * @optional\n     */\n    shouldHidePopupArrow?: boolean;\n    /**\n     * Whether the default trigger padding/background styles should be applied.\n     * @description Disable this when the trigger child already provides its own full visual styling.\n     * @default true\n     * @optional\n     */\n    shouldUseDefaultTriggerStyles?: boolean;\n    /**\n     * Show hover effect flag\n     * @description Whether the hover effect should be shown.\n     * @default false\n     * @optional\n     */\n    shouldShowHoverEffect?: boolean;\n    /**\n     * Inline styles applied to the trigger wrapper.\n     * @optional\n     */\n    style?: CSSProperties;\n    /**\n     * Vertical offset between the trigger element and the context menu.\n     * @description Use this prop to fine-tune the context menu position on the Y axis. Positive and\n     * negative values can be used depending on the desired spacing.\n     * @default 0\n     * @example yOffset={8}\n     * @optional\n     */\n    yOffset?: number;\n    /**\n     * Z-index value\n     * @description The z-index of the popup.\n     * @example zIndex={100}\n     * @default 20\n     * @optional\n     */\n    zIndex?: number;\n};\n\n/**\n * Ref interface for the ContextMenu component.\n */\nexport interface ContextMenuRef {\n    /** Hides the context menu. */\n    hide: VoidFunction;\n    /** Shows the context menu. */\n    show: VoidFunction;\n}\n"],"mappings":"AAEA;AACA;AACA;AACA,WAAYA,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;;AAShC;AACA;AACA;;AAQA;AACA;AACA;;AAgBA;AACA;AACA;;AA6HA;AACA;AACA","ignoreList":[]}
+{"version":3,"file":"ContextMenu.types.js","names":["ContextMenuAlignment"],"sources":["../../../../src/components/context-menu/ContextMenu.types.ts"],"sourcesContent":["import type { CSSProperties, MouseEvent, ReactNode } from 'react';\n\n/**\n * Enum representing the possible alignments for the context menu.\n */\nexport enum ContextMenuAlignment {\n    TopLeft,\n    BottomLeft,\n    TopRight,\n    BottomRight,\n    TopCenter,\n    BottomCenter,\n}\n\n/**\n * Type representing the coordinates for positioning the context menu.\n */\nexport type ContextMenuCoordinates = {\n    /** The x-coordinate. */\n    x: number;\n    /** The y-coordinate. */\n    y: number;\n};\n\n/**\n * Type representing an item in the context menu.\n */\nexport type ContextMenuItem = {\n    /** Optional icons for the item. Can be strings or React nodes. */\n    icons?: string[] | ReactNode;\n    /** Whether the item is selected. */\n    isSelected?: boolean;\n    /** Unique key for the item. */\n    key: string;\n    /** Function called when the item is clicked. */\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    /** Whether to show a spacer after the item. */\n    shouldShowSpacer?: boolean;\n    /** The text displayed for the item. */\n    text: string;\n};\n\n/**\n * Props for the ContextMenu component.\n */\nexport type ContextMenuProps = {\n    /**\n     * Context menu alignment\n     * @description Optional custom alignment used instead of calculating it using the alignment\n     * within the page. The available alignments can be taken from the ContextMenuAlignment enum.\n     * @example alignment={ContextMenuAlignment.TopLeft}\n     * @optional\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * Additional class name applied to the trigger wrapper.\n     * @optional\n     */\n    className?: string;\n    /**\n     * Children element\n     * @description The element over which the content of the ContextMenu should be displayed.\n     * @example children={<Icon icons={['fa fa-paper-clip']} />\n     * @default <Icon icons={['ts-ellipsis_v']} size={18} />\n     * @optional\n     */\n    children?: ReactNode;\n    /**\n     * Container element\n     * @description The element where the content of the ContextMenu should be rendered via React Portal.\n     * @example container={document.body}\n     * @optional\n     */\n    container?: Element;\n    /**\n     * Custom coordinates\n     * @description Optional own coordinates to be used instead of calculating the alignment based\n     * on the alignment of the children.\n     * @example coordinates={{ x: 100, y: 200 }}\n     * @optional\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * Context menu headline\n     * @description The headline of the context menu. If not provided, no headline will be displayed.\n     * @example headline=\"Options\"\n     * @optional\n     */\n    headline?: string;\n    /**\n     * Menu items\n     * @description The items that will be displayed in the content of the ContextMenu. Custom icon\n     * elements only will be displayed on desktop devices.\n     * @example items={[{ key: '1', text: 'Option 1', onClick: () => {} }]}\n     */\n    items: ContextMenuItem[];\n    /**\n     * Hide callback function\n     * @description Function to be executed when the content of the Context menu has been hidden.\n     * @example onHide={() => console.log('Menu hidden')}\n     * @optional\n     */\n    onHide?: VoidFunction;\n    /**\n     * Show callback function\n     * @description Function to be executed when the content of the Context menu has been shown.\n     * @example onShow={() => console.log('Menu shown')}\n     * @optional\n     */\n    onShow?: VoidFunction;\n    /**\n     * Close on popup click flag\n     * @description Whether the popup should be closed if it is clicked.\n     * @default true\n     * @optional\n     */\n    shouldCloseOnPopupClick?: boolean;\n    /**\n     * Disable click flag\n     * @description Whether the click should be disabled.\n     * @default false\n     * @optional\n     */\n    shouldDisableClick?: boolean;\n    /**\n     * Hide popup arrow flag\n     * @description Whether the arrow of the popup should be hidden.\n     * @default false\n     * @optional\n     */\n    shouldHidePopupArrow?: boolean;\n    /**\n     * Whether the default trigger padding/background styles should be applied.\n     * @description Disable this when the trigger child already provides its own full visual styling.\n     * @default true\n     * @optional\n     */\n    shouldUseDefaultTriggerStyles?: boolean;\n    /**\n     * Show hover effect flag\n     * @description Whether the hover effect should be shown.\n     * @default false\n     * @optional\n     */\n    shouldShowHoverEffect?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting for the trigger.\n     * @default false\n     * @optional\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Inline styles applied to the trigger wrapper.\n     * @optional\n     */\n    style?: CSSProperties;\n    /**\n     * Vertical offset between the trigger element and the context menu.\n     * @description Use this prop to fine-tune the context menu position on the Y axis. Positive and\n     * negative values can be used depending on the desired spacing.\n     * @default 0\n     * @example yOffset={8}\n     * @optional\n     */\n    yOffset?: number;\n    /**\n     * Z-index value\n     * @description The z-index of the popup.\n     * @example zIndex={100}\n     * @default 20\n     * @optional\n     */\n    zIndex?: number;\n};\n\n/**\n * Ref interface for the ContextMenu component.\n */\nexport interface ContextMenuRef {\n    /** Hides the context menu. */\n    hide: VoidFunction;\n    /** Shows the context menu. */\n    show: VoidFunction;\n}\n"],"mappings":"AAEA;AACA;AACA;AACA,WAAYA,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;;AAShC;AACA;AACA;;AAQA;AACA;AACA;;AAgBA;AACA;AACA;;AAmIA;AACA;AACA","ignoreList":[]}