@chayns-components/core 5.5.30 → 5.5.34

package/lib/cjs/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_icon","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_Icon","_styledComponents","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","shouldEnableKeyboardHighlighting","theme","useTheme","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","isClickable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","handleClick","event","stopPropagation","handleDoubleClick","handleKeyDown","key","preventDefault","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","onKeyDown","$shouldShowKeyboardHighlighting","$size","role","map","iconStyle","themedIcon","replace","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, KeyboardEventHandler, MouseEventHandler } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable icons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const theme = useTheme() as Theme;\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isClickable = typeof onClick === 'function' && !isDisabled;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isClickable,\n    );\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {\n        if (!isClickable) {\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick(event as unknown as React.MouseEvent<HTMLSpanElement>);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            tabIndex={\n                shouldEnableKeyboardHighlightingEffective && isClickable\n                    ? (tabIndex ?? 0)\n                    : tabIndex\n            }\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={isClickable ? handleClick : undefined}\n            $isOnClick={isClickable}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            $size={size}\n            role={isClickable ? 'button' : undefined}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIconElement\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_interopRequireWildcard","_icon","_useFocusRingPortal","_useKeyboardFocusHighlighting","_ColorSchemeProvider","_Icon","_styledComponents","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","tabIndex","size","shouldStopPropagation","shouldEnableKeyboardHighlighting","iconWrapperRef","useRef","theme","useTheme","colorScheme","useColorScheme","shouldEnableKeyboardHighlightingEffective","isClickable","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","padding","handleClick","event","stopPropagation","handleDoubleClick","handleKeyDown","key","preventDefault","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","ref","$isDisabled","undefined","$isOnClick","onKeyDown","$size","role","map","iconStyle","themedIcon","replace","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, KeyboardEventHandler, MouseEventHandler, useRef } from 'react';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledIcon as StyledIconElement, StyledIconWrapper } from './Icon.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type IconProps = {\n    /**\n     * Additional class name for the icon wrapper element.\n     * @description\n     * This class name is applied to the wrapper element that contains the icon. It can be used to\n     * style the icon wrapper element.\n     * @example\n     * <Icon className=\"my-custom-class\" icons={['fa-user']} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * The color of the icon.\n     * @description\n     * This property can be used to set the color of the icon. The color is only used for icons that\n     * don't have a predefined color (e.g., 'fa-inverse' icons will always be white). If no color is\n     * specified, the icon color of the theme or the text color will be used.\n     * @example\n     * <Icon color=\"red\" icons={['fa-user']} />\n     * @optional\n     */\n    color?: string;\n    /**\n     * The icon(s) to be displayed.\n     * @description\n     * This property can be used to set the icon(s) to be displayed. The icon(s) must be specified as\n     * an array of strings. Each string must be a valid icon name.\n     * @example\n     * <Icon icons={['fa-user']} />\n     * <Icon icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']} />\n     */\n    icons: string[];\n    /**\n     * Whether the icon should be disabled.\n     * @description\n     * This property can be used to disable the icon. When the icon is disabled, it will not be\n     * clickable, and it will not emit any events.\n     * @example\n     * <Icon icons={['fa-user']} isDisabled />\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon is clicked.\n     * @description\n     * This function is executed when the icon is clicked. It can be used to handle the click event.\n     * @example\n     * <Icon icons={['fa-user']} onClick={() => console.log('Icon clicked')} />\n     * @optional\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is double-clicked.\n     * @description\n     * This function is executed when the icon is double-clicked. It can be used to handle the\n     * double-click event.\n     * @example\n     * <Icon icons={['fa-user']} onDoubleClick={() => console.log('Icon double-clicked')} />\n     * @optional\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon is pressed.\n     * @description\n     * This function is executed when the icon is pressed. It can be used to handle the mouse down event.\n     * @example\n     * <Icon icons={['fa-user']} onMouseDown={() => console.log('Icon pressed')} />\n     * @optional\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * The size of the icon.\n     * @description\n     * This property can be used to set the size of the icon. The size must be specified as a number\n     * in pixels.\n     * @default 15\n     * @example\n     * <Icon icons={['fa-user']} size={20} />\n     * @optional\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * This property can be used to prevent the icon from propagating the click event to its parent\n     * elements.\n     * @example\n     * <Icon icons={['fa-user']} shouldStopPropagation />\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional tab index for the icon.\n     */\n    tabIndex?: number;\n    /**\n     * Enables keyboard-only focus highlighting for clickable icons.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    tabIndex,\n    size = 15,\n    shouldStopPropagation,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const iconWrapperRef = useRef<HTMLSpanElement>(null);\n    const theme = useTheme() as Theme;\n    const colorScheme = useColorScheme();\n    const shouldEnableKeyboardHighlightingEffective =\n        shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n    const isClickable = typeof onClick === 'function' && !isDisabled;\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlightingEffective && isClickable,\n    );\n    useFocusRingPortal(iconWrapperRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        shape: 'circle',\n        padding: 4,\n    });\n\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLSpanElement> = (event) => {\n        if (!isClickable) {\n            return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            handleClick(event as unknown as React.MouseEvent<HTMLSpanElement>);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            ref={iconWrapperRef}\n            tabIndex={\n                shouldEnableKeyboardHighlightingEffective && isClickable\n                    ? (tabIndex ?? 0)\n                    : tabIndex\n            }\n            className={wrapperClasses}\n            $isDisabled={isDisabled}\n            onClick={isClickable ? handleClick : undefined}\n            $isOnClick={isClickable}\n            onDoubleClick={\n                typeof onDoubleClick === 'function' && !isDisabled ? handleDoubleClick : undefined\n            }\n            onMouseDown={typeof onMouseDown === 'function' && !isDisabled ? onMouseDown : undefined}\n            onKeyDown={shouldEnableKeyboardHighlightingEffective ? handleKeyDown : undefined}\n            $size={size}\n            role={isClickable ? 'button' : undefined}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconStyle = `${(theme?.iconStyle as string) ?? 'fa-regular'} `;\n                const themedIcon = icon?.replace(/^fa\\s/, iconStyle);\n\n                const iconClasses = clsx(themedIcon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIconElement\n                        className={iconClasses}\n                        $color={icon.includes('fa-inverse') ? 'white' : color}\n                        $fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        $isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        $size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/icon/Icon.styles.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledUnicodeIcon = exports.StyledIconWrapper = exports.StyledIcon = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.span`
     align-items: center;
     cursor: ${({
@@ -27,27 +26,10 @@ const StyledIconWrapper = exports.StyledIconWrapper = _styledComponents.default.
   $size
 }) => `${$size}px`};
 
-    ${({
-  $shouldShowKeyboardHighlighting,
-  $size
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-visible {
-                outline: none;
-                color: inherit;
-            }
-
-            &:focus-visible::after {
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingCircleRingCss};
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: ${$size + 14}px;
-                height: ${$size + 14}px;
-                transform: translate(-50%, -50%);
-                pointer-events: none;
-            }
-        `}
+    &:focus-visible {
+        outline: none;
+        color: inherit;
+    }
 
     // To insure that stacked icons have the same size as normal icons.
     &&.fa-stack {
@@ -69,14 +51,6 @@ const StyledIcon = exports.StyledIcon = _styledComponents.default.i`
     font-size: ${({
   $fontSize
 }) => `${$fontSize}px`};
-
-    ${({
-  $fontSize,
-  $size
-}) => $fontSize !== $size && (0, _styledComponents.css)`
-            top: 50%;
-            transform: translateY(-50%);
-        `}
 `;
 const StyledUnicodeIcon = exports.StyledUnicodeIcon = _styledComponents.default.i`
     align-items: center;

package/lib/cjs/components/icon/Icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","$shouldShowKeyboardHighlighting","css","keyboardFocusHighlightingCircleRingCss","StyledIcon","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingCircleRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    ${({ $shouldShowKeyboardHighlighting, $size }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                outline: none;\n                color: inherit;\n            }\n\n            &:focus-visible::after {\n                ${keyboardFocusHighlightingCircleRingCss};\n                content: '';\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                width: ${$size + 14}px;\n                height: ${$size + 14}px;\n                transform: translate(-50%, -50%);\n                pointer-events: none;\n            }\n        `}\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n\n    ${({ $fontSize, $size }) =>\n        $fontSize !== $size &&\n        css`\n            top: 50%;\n            transform: translateY(-50%);\n        `}\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledIconWrapper","exports","styled","span","$isDisabled","$isOnClick","$size","StyledIcon","i","$color","theme","iconColor","text","$isStacked","undefined","$fontSize","StyledUnicodeIcon","headline","$icon","iconStyle"],"sources":["../../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n    $isDisabled?: boolean;\n    $isOnClick: boolean;\n    $size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n    align-items: center;\n    cursor: ${({ $isDisabled, $isOnClick }) =>\n        $isOnClick && !$isDisabled ? 'pointer' : 'inherit'};\n    display: inline-flex;\n    min-height: ${({ $size }) => `${$size}px`};\n    justify-content: center;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.3s ease;\n    min-width: ${({ $size }) => `${$size}px`};\n\n    &:focus-visible {\n        outline: none;\n        color: inherit;\n    }\n\n    // To insure that stacked icons have the same size as normal icons.\n    &&.fa-stack {\n        height: fit-content;\n        width: fit-content;\n        line-height: ${({ $size }) => $size}px;\n    }\n`;\n\ntype StyledIconProps = WithTheme<{\n    $fontSize: number;\n    $isStacked?: boolean;\n    $color?: string;\n    $size: number;\n}>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n    color: ${({ $color, theme }: StyledIconProps) => $color || theme.iconColor || theme.text};\n    display: ${({ $isStacked }) => ($isStacked ? undefined : 'inline-flex')};\n    font-size: ${({ $fontSize }) => `${$fontSize}px`};\n`;\n\ntype StyledUnicodeIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledUnicodeIcon = styled.i<StyledUnicodeIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledUnicodeIconProps) => theme.iconColor || theme.headline};\n\n    &:before {\n        content: ${({ $icon }) => `\"\\\\${$icon}\" !important`};\n    }\n    &:after {\n        content: ${({ theme, $icon }) => {\n            if (theme.iconStyle === 'fa-duotone') {\n                return `\"\\\\${$icon}\" !important`;\n            }\n            return '';\n        }};\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASzC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,cAAc,CAAC;EAAEC,WAAW;EAAEC;AAAW,CAAC,KAClCA,UAAU,IAAI,CAACD,WAAW,GAAG,SAAS,GAAG,SAAS;AAC1D;AACA,kBAAkB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC7C;AACA,eAAe,CAAC;EAAEF;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA,iBAAiB,CAAC;EAAEE;AAAM,CAAC,KAAK,GAAGA,KAAK,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AAC3C;AACA,CAAC;AASM,MAAMC,UAAU,GAAAN,OAAA,CAAAM,UAAA,GAAGL,yBAAM,CAACM,CAAkB;AACnD,aAAa,CAAC;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAKD,MAAM,IAAIC,KAAK,CAACC,SAAS,IAAID,KAAK,CAACE,IAAI;AAC5F,eAAe,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAGC,SAAS,GAAG,aAAc;AAC3E,iBAAiB,CAAC;EAAEC;AAAU,CAAC,KAAK,GAAGA,SAAS,IAAI;AACpD,CAAC;AAIM,MAAMC,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAGd,yBAAM,CAACM,CAAyB;AACjE;AACA;AACA;AACA,aAAa,CAAC;EAAEE;AAA8B,CAAC,KAAKA,KAAK,CAACC,SAAS,IAAID,KAAK,CAACO,QAAQ;AACrF;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,cAAc;AAC3D;AACA;AACA,mBAAmB,CAAC;EAAER,KAAK;EAAEQ;AAAM,CAAC,KAAK;EAC7B,IAAIR,KAAK,CAACS,SAAS,KAAK,YAAY,EAAE;IAClC,OAAO,MAAMD,KAAK,cAAc;EACpC;EACA,OAAO,EAAE;AACb,CAAC;AACT;AACA,CAAC","ignoreList":[]}

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

@@ -13,6 +13,7 @@ var _Input = require("./Input.styles");
 var _contentCard = require("../../types/contentCard");
 var _resize = require("../../hooks/resize");
 var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -55,6 +56,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
   const theme = (0, _styledComponents.useTheme)();
   const inputRef = (0, _react.useRef)(null);
+  const inputContentWrapperRef = (0, _react.useRef)(null);
+  const clearIconRef = (0, _react.useRef)(null);
   const placeholderRef = (0, _react.useRef)(null);
   (0, _resize.useCursorRepaint)(inputRef);
   const placeholderSize = (0, _element.useElementSize)(placeholderRef);
@@ -117,6 +120,13 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     backgroundColor = theme['000'];
   }
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
+  (0, _useFocusRingPortal.useFocusRingPortal)(inputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: inputContentWrapperRef
+  });
+  (0, _useFocusRingPortal.useFocusRingPortal)(clearIconRef, {
+    isEnabled: shouldShowKeyboardHighlighting && hasValue && !isDisabled
+  });
   const borderColor = color === null || color === void 0 ? void 0 : color.border;
   const placeholderColor = color === null || color === void 0 ? void 0 : color.placeholder;
   const labelPosition = (0, _react.useMemo)(() => {
@@ -138,6 +148,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     className: "beta-chayns-input",
     $isDisabled: isDisabled
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContentWrapper, {
+    ref: inputContentWrapperRef,
     $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $backgroundColor: backgroundColor,
     $isInvalid: isInvalid,
@@ -190,6 +201,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     $color: placeholderColor,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
+    ref: clearIconRef,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
     $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
@@ -199,8 +211,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     initial: false,
     onClick: handleClearIconClick,
     onKeyDown: handleClearIconKeyDown,
-    tabIndex: shouldShowKeyboardHighlighting && hasValue && !isDisabled ? 0 : -1,
-    role: shouldShowKeyboardHighlighting ? 'button' : undefined,
+    tabIndex: hasValue && !isDisabled ? 0 : -1,
+    role: hasValue ? 'button' : undefined,
     "aria-hidden": !hasValue,
     transition: {
       type: 'tween'

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

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

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionInputLabelWrapper = exports.StyledMotionInputElement = exports.StyledMotionInputClearIcon = exports.StyledInputRightElement = exports.StyledInputLabel = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContentWrapper = exports.StyledInputContent = exports.StyledInput = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledInput = exports.StyledInput = _styledComponents.default.div`
     opacity: ${({
@@ -104,7 +103,6 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
             /* Show highlighting when the input field is focused */
             &:has(input:focus-visible) {
                 transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
             }
         `}
 `;
@@ -185,7 +183,6 @@ const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _sty
 }) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
             &:focus-visible {
                 transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
             }
         `}
 `;

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

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

package/lib/cjs/components/list/List.utils.js

@@ -120,12 +120,6 @@ const handleHorizontalArrowNavigation = ({
       (_focusableLeftElement2 = focusableLeftElements[focusableLeftElements.length - 1]) === null || _focusableLeftElement2 === void 0 || _focusableLeftElement2.focus();
       return true;
     }
-    if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {
-      var _focusableRightElemen3;
-      event.preventDefault();
-      (_focusableRightElemen3 = focusableRightElements[0]) === null || _focusableRightElemen3 === void 0 || _focusableRightElemen3.focus();
-      return true;
-    }
   }
   return false;
 };
@@ -155,9 +149,9 @@ const handleListItemTabNavigation = ({
   }
   if (isCurrentListItemTarget) {
     if (focusableRightElements.length > 0) {
-      var _focusableRightElemen4;
+      var _focusableRightElemen3;
       event.preventDefault();
-      (_focusableRightElemen4 = focusableRightElements[0]) === null || _focusableRightElemen4 === void 0 || _focusableRightElemen4.focus();
+      (_focusableRightElemen3 = focusableRightElements[0]) === null || _focusableRightElemen3 === void 0 || _focusableRightElemen3.focus();
       return true;
     }
     return false;
@@ -199,8 +193,8 @@ const handleVerticalListGroupNavigation = ({
   if (currentIndex === -1) {
     return true;
   }
-  const isBackward = event.key === 'ArrowUp';
   event.preventDefault();
+  const isBackward = event.key === 'ArrowUp';
   const nextIndex = isBackward ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length : (currentIndex + 1) % listItemUuids.length;
   const nextListItemUuid = listItemUuids[nextIndex];
   if (nextListItemUuid && nextListItemUuid !== currentUuid && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function') {

package/lib/cjs/components/list/List.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.utils.js","names":["_react","require","_ListItem","isDirectListItemElement","node","isValidElement","type","displayName","exports","isMarkedListItemElement","$$listItem","LIST_ITEM_MARKER","shouldShowExpandIndicator","Children","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable","LEFT_ELEMENT_FOCUSABLE_SELECTOR","RIGHT_ELEMENT_FOCUSABLE_SELECTOR","getFocusableElements","root","selector","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","getFocusedElementIndex","elements","targetElement","length","findIndex","contains","getListItemElementByIndex","index","listItemUuids","listGroupUuid","listItemUuid","document","querySelector","focusListItemByIndex","updateActiveListItemUuid","listItemElement","focus","handleHorizontalArrowNavigation","event","currentListItemElement","isCurrentListItemTarget","key","focusableLeftElements","focusableRightElements","focusedLeftElementIndex","preventDefault","previousLeftElement","nextLeftElement","_focusableRightElemen","focusedRightElementIndex","_focusableRightElemen2","previousRightElement","_focusableLeftElement","_focusableLeftElement2","_focusableRightElemen3","handleListItemTabNavigation","isInKeyboardNavigationGroup","currentUuid","currentIndex","indexOf","shiftKey","_focusableRightElemen4","nextRightElement","handleVerticalListGroupNavigation","isBackward","nextIndex","nextListItemUuid","nextListItemElement","handleListItemToggleKey","isItemOpen","shouldEnableKeyboardHighlighting","toggleItem","shouldOpen","shouldClose","shouldToggle"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import {\n    Children,\n    isValidElement,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n    isExpandable?: boolean;\n    shouldHideIndicator?: boolean;\n    children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n    $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) &&\n    typeof node.type !== 'string' &&\n    (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n    Children.toArray(node).some((child) => {\n        if (isDirectListItemElement(child)) {\n            return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n        }\n\n        if (isMarkedListItemElement(child)) {\n            return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n        }\n\n        if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n            return shouldShowExpandIndicator(child.props.children);\n        }\n\n        return false;\n    });\n\nconst LEFT_ELEMENT_FOCUSABLE_SELECTOR =\n    '[data-left-element=\"true\"] a[href], [data-left-element=\"true\"] button, [data-left-element=\"true\"] input, [data-left-element=\"true\"] select, [data-left-element=\"true\"] textarea, [data-left-element=\"true\"] [tabindex], [data-left-element=\"true\"] [contenteditable=\"true\"]';\n\nconst RIGHT_ELEMENT_FOCUSABLE_SELECTOR =\n    '[data-right-element=\"true\"] a[href], [data-right-element=\"true\"] button, [data-right-element=\"true\"] input, [data-right-element=\"true\"] select, [data-right-element=\"true\"] textarea, [data-right-element=\"true\"] [tabindex], [data-right-element=\"true\"] [contenteditable=\"true\"]';\n\nconst getFocusableElements = (root: HTMLElement, selector: string) =>\n    Array.from(root.querySelectorAll<HTMLElement>(selector)).filter(\n        (element) => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1',\n    );\n\nconst getFocusedElementIndex = (elements: HTMLElement[], targetElement: HTMLElement | null) => {\n    if (!targetElement || elements.length === 0) {\n        return -1;\n    }\n\n    return elements.findIndex(\n        (element) => element === targetElement || element.contains(targetElement),\n    );\n};\n\ntype ListGroupNavigationParams = {\n    event: KeyboardEvent<HTMLDivElement>;\n    isCurrentListItemTarget: boolean;\n    isInKeyboardNavigationGroup: boolean;\n    listItemUuids?: string[];\n    currentUuid: string;\n    listGroupUuid?: string;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n};\n\ntype ListItemTabNavigationParams = ListGroupNavigationParams & {\n    currentListItemElement: HTMLDivElement;\n    targetElement: HTMLElement | null;\n};\n\ntype ListItemToggleKeyParams = {\n    event: KeyboardEvent<HTMLDivElement>;\n    isCurrentListItemTarget: boolean;\n    isExpandable: boolean;\n    isItemOpen: boolean;\n    shouldEnableKeyboardHighlighting: boolean;\n    toggleItem: VoidFunction;\n};\n\nconst getListItemElementByIndex = ({\n    index,\n    listItemUuids,\n    listGroupUuid,\n}: {\n    index: number;\n    listItemUuids: string[];\n    listGroupUuid?: string;\n}) => {\n    const listItemUuid = listItemUuids[index];\n\n    if (!listItemUuid || typeof listGroupUuid !== 'string') {\n        return undefined;\n    }\n\n    return document.querySelector<HTMLDivElement>(\n        `[data-uuid=\"${listGroupUuid}---${listItemUuid}\"]`,\n    );\n};\n\nconst focusListItemByIndex = ({\n    index,\n    listItemUuids,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: {\n    index: number;\n    listItemUuids: string[];\n    listGroupUuid?: string;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n}) => {\n    const listItemUuid = listItemUuids[index];\n    const listItemElement = getListItemElementByIndex({ index, listItemUuids, listGroupUuid });\n\n    if (!listItemUuid || !listItemElement || typeof updateActiveListItemUuid !== 'function') {\n        return false;\n    }\n\n    updateActiveListItemUuid(listItemUuid);\n    listItemElement.focus();\n    return true;\n};\n\nexport const handleHorizontalArrowNavigation = ({\n    event,\n    currentListItemElement,\n    targetElement,\n    isCurrentListItemTarget,\n}: {\n    event: KeyboardEvent<HTMLDivElement>;\n    currentListItemElement: HTMLDivElement;\n    targetElement: HTMLElement | null;\n    isCurrentListItemTarget: boolean;\n}) => {\n    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {\n        return false;\n    }\n\n    const focusableLeftElements = getFocusableElements(\n        currentListItemElement,\n        LEFT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n\n    const focusableRightElements = getFocusableElements(\n        currentListItemElement,\n        RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n\n    const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);\n\n    if (focusedLeftElementIndex !== -1) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowLeft') {\n            const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];\n\n            if (previousLeftElement) {\n                previousLeftElement.focus();\n            } else {\n                currentListItemElement.focus();\n            }\n\n            return true;\n        }\n\n        const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];\n\n        if (nextLeftElement) {\n            nextLeftElement.focus();\n        } else if (focusableRightElements.length > 0) {\n            focusableRightElements[0]?.focus();\n        }\n\n        return true;\n    }\n\n    const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n    if (focusedRightElementIndex !== -1) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowRight') {\n            focusableRightElements[focusedRightElementIndex + 1]?.focus();\n            return true;\n        }\n\n        const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];\n\n        if (previousRightElement) {\n            previousRightElement.focus();\n        } else if (focusableLeftElements.length > 0) {\n            focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n        } else {\n            currentListItemElement.focus();\n        }\n\n        return true;\n    }\n\n    if (isCurrentListItemTarget) {\n        if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {\n            event.preventDefault();\n            focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n            return true;\n        }\n\n        if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {\n            event.preventDefault();\n            focusableRightElements[0]?.focus();\n            return true;\n        }\n    }\n\n    return false;\n};\n\nexport const handleListItemTabNavigation = ({\n    event,\n    currentListItemElement,\n    targetElement,\n    isCurrentListItemTarget,\n    isInKeyboardNavigationGroup,\n    listItemUuids,\n    currentUuid,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: ListItemTabNavigationParams) => {\n    if (event.key !== 'Tab' || !isInKeyboardNavigationGroup || !listItemUuids?.length) {\n        return false;\n    }\n\n    const currentIndex = listItemUuids.indexOf(currentUuid);\n\n    if (currentIndex === -1) {\n        return false;\n    }\n\n    const focusableRightElements = getFocusableElements(\n        currentListItemElement,\n        RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n    const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n    if (event.shiftKey) {\n        return false;\n    }\n\n    if (isCurrentListItemTarget) {\n        if (focusableRightElements.length > 0) {\n            event.preventDefault();\n            focusableRightElements[0]?.focus();\n            return true;\n        }\n\n        return false;\n    }\n\n    if (focusedRightElementIndex === -1) {\n        return false;\n    }\n\n    const nextRightElement = focusableRightElements[focusedRightElementIndex + 1];\n\n    if (nextRightElement) {\n        event.preventDefault();\n        nextRightElement.focus();\n        return true;\n    }\n\n    if (currentIndex < listItemUuids.length - 1) {\n        event.preventDefault();\n        return focusListItemByIndex({\n            index: currentIndex + 1,\n            listItemUuids,\n            listGroupUuid,\n            updateActiveListItemUuid,\n        });\n    }\n\n    return false;\n};\n\nexport const handleVerticalListGroupNavigation = ({\n    event,\n    isCurrentListItemTarget,\n    isInKeyboardNavigationGroup,\n    listItemUuids,\n    currentUuid,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: ListGroupNavigationParams) => {\n    if (\n        !isCurrentListItemTarget ||\n        !isInKeyboardNavigationGroup ||\n        !listItemUuids?.length ||\n        (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')\n    ) {\n        return false;\n    }\n\n    const currentIndex = listItemUuids.indexOf(currentUuid);\n\n    if (currentIndex === -1) {\n        return true;\n    }\n\n    const isBackward = event.key === 'ArrowUp';\n\n    event.preventDefault();\n\n    const nextIndex = isBackward\n        ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length\n        : (currentIndex + 1) % listItemUuids.length;\n\n    const nextListItemUuid = listItemUuids[nextIndex];\n\n    if (\n        nextListItemUuid &&\n        nextListItemUuid !== currentUuid &&\n        typeof listGroupUuid === 'string' &&\n        typeof updateActiveListItemUuid === 'function'\n    ) {\n        const nextListItemElement = document.querySelector<HTMLDivElement>(\n            `[data-uuid=\"${listGroupUuid}---${nextListItemUuid}\"]`,\n        );\n\n        if (nextListItemElement) {\n            updateActiveListItemUuid(nextListItemUuid);\n            nextListItemElement.focus();\n        }\n    }\n\n    return true;\n};\n\nexport const handleListItemToggleKey = ({\n    event,\n    isCurrentListItemTarget,\n    isExpandable,\n    isItemOpen,\n    shouldEnableKeyboardHighlighting,\n    toggleItem,\n}: ListItemToggleKeyParams) => {\n    if (!isCurrentListItemTarget || !shouldEnableKeyboardHighlighting) {\n        return false;\n    }\n\n    const shouldOpen = isExpandable && event.key === 'ArrowRight' && !isItemOpen;\n    const shouldClose = isExpandable && event.key === 'ArrowLeft' && isItemOpen;\n    const shouldToggle = event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen && !shouldClose && !shouldToggle) {\n        return false;\n    }\n\n    event.preventDefault();\n    toggleItem();\n    return true;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"List.utils.js","names":["_react","require","_ListItem","isDirectListItemElement","node","isValidElement","type","displayName","exports","isMarkedListItemElement","$$listItem","LIST_ITEM_MARKER","shouldShowExpandIndicator","Children","toArray","some","child","props","shouldHideIndicator","children","undefined","isExpandable","LEFT_ELEMENT_FOCUSABLE_SELECTOR","RIGHT_ELEMENT_FOCUSABLE_SELECTOR","getFocusableElements","root","selector","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","getFocusedElementIndex","elements","targetElement","length","findIndex","contains","getListItemElementByIndex","index","listItemUuids","listGroupUuid","listItemUuid","document","querySelector","focusListItemByIndex","updateActiveListItemUuid","listItemElement","focus","handleHorizontalArrowNavigation","event","currentListItemElement","isCurrentListItemTarget","key","focusableLeftElements","focusableRightElements","focusedLeftElementIndex","preventDefault","previousLeftElement","nextLeftElement","_focusableRightElemen","focusedRightElementIndex","_focusableRightElemen2","previousRightElement","_focusableLeftElement","_focusableLeftElement2","handleListItemTabNavigation","isInKeyboardNavigationGroup","currentUuid","currentIndex","indexOf","shiftKey","_focusableRightElemen3","nextRightElement","handleVerticalListGroupNavigation","isBackward","nextIndex","nextListItemUuid","nextListItemElement","handleListItemToggleKey","isItemOpen","shouldEnableKeyboardHighlighting","toggleItem","shouldOpen","shouldClose","shouldToggle"],"sources":["../../../../src/components/list/List.utils.ts"],"sourcesContent":["import {\n    Children,\n    isValidElement,\n    type KeyboardEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\nimport { LIST_ITEM_MARKER } from './list-item/ListItem.utils';\n\nexport interface ListItemMetaProps {\n    isExpandable?: boolean;\n    shouldHideIndicator?: boolean;\n    children?: ReactNode;\n}\n\ntype ListItemMarkedType = {\n    $$listItem?: typeof LIST_ITEM_MARKER;\n};\n\nexport const isDirectListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) && (node.type as { displayName?: string }).displayName === 'ListItem';\n\nexport const isMarkedListItemElement = (node: ReactNode): node is ReactElement<ListItemMetaProps> =>\n    isValidElement(node) &&\n    typeof node.type !== 'string' &&\n    (node.type as ListItemMarkedType).$$listItem === LIST_ITEM_MARKER;\n\nexport const shouldShowExpandIndicator = (node: ReactNode): boolean =>\n    Children.toArray(node).some((child) => {\n        if (isDirectListItemElement(child)) {\n            return child.props.shouldHideIndicator !== true && child.props.children !== undefined;\n        }\n\n        if (isMarkedListItemElement(child)) {\n            return child.props.isExpandable === true && child.props.shouldHideIndicator !== true;\n        }\n\n        if (isValidElement<{ children?: ReactNode }>(child) && child.props.children !== undefined) {\n            return shouldShowExpandIndicator(child.props.children);\n        }\n\n        return false;\n    });\n\nconst LEFT_ELEMENT_FOCUSABLE_SELECTOR =\n    '[data-left-element=\"true\"] a[href], [data-left-element=\"true\"] button, [data-left-element=\"true\"] input, [data-left-element=\"true\"] select, [data-left-element=\"true\"] textarea, [data-left-element=\"true\"] [tabindex], [data-left-element=\"true\"] [contenteditable=\"true\"]';\n\nconst RIGHT_ELEMENT_FOCUSABLE_SELECTOR =\n    '[data-right-element=\"true\"] a[href], [data-right-element=\"true\"] button, [data-right-element=\"true\"] input, [data-right-element=\"true\"] select, [data-right-element=\"true\"] textarea, [data-right-element=\"true\"] [tabindex], [data-right-element=\"true\"] [contenteditable=\"true\"]';\n\nconst getFocusableElements = (root: HTMLElement, selector: string) =>\n    Array.from(root.querySelectorAll<HTMLElement>(selector)).filter(\n        (element) => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1',\n    );\n\nconst getFocusedElementIndex = (elements: HTMLElement[], targetElement: HTMLElement | null) => {\n    if (!targetElement || elements.length === 0) {\n        return -1;\n    }\n\n    return elements.findIndex(\n        (element) => element === targetElement || element.contains(targetElement),\n    );\n};\n\ntype ListGroupNavigationParams = {\n    event: KeyboardEvent<HTMLDivElement>;\n    isCurrentListItemTarget: boolean;\n    isInKeyboardNavigationGroup: boolean;\n    listItemUuids?: string[];\n    currentUuid: string;\n    listGroupUuid?: string;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n};\n\ntype ListItemTabNavigationParams = ListGroupNavigationParams & {\n    currentListItemElement: HTMLDivElement;\n    targetElement: HTMLElement | null;\n};\n\ntype ListItemToggleKeyParams = {\n    event: KeyboardEvent<HTMLDivElement>;\n    isCurrentListItemTarget: boolean;\n    isExpandable: boolean;\n    isItemOpen: boolean;\n    shouldEnableKeyboardHighlighting: boolean;\n    toggleItem: VoidFunction;\n};\n\nconst getListItemElementByIndex = ({\n    index,\n    listItemUuids,\n    listGroupUuid,\n}: {\n    index: number;\n    listItemUuids: string[];\n    listGroupUuid?: string;\n}) => {\n    const listItemUuid = listItemUuids[index];\n\n    if (!listItemUuid || typeof listGroupUuid !== 'string') {\n        return undefined;\n    }\n\n    return document.querySelector<HTMLDivElement>(\n        `[data-uuid=\"${listGroupUuid}---${listItemUuid}\"]`,\n    );\n};\n\nconst focusListItemByIndex = ({\n    index,\n    listItemUuids,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: {\n    index: number;\n    listItemUuids: string[];\n    listGroupUuid?: string;\n    updateActiveListItemUuid?: (uuid?: string) => void;\n}) => {\n    const listItemUuid = listItemUuids[index];\n    const listItemElement = getListItemElementByIndex({ index, listItemUuids, listGroupUuid });\n\n    if (!listItemUuid || !listItemElement || typeof updateActiveListItemUuid !== 'function') {\n        return false;\n    }\n\n    updateActiveListItemUuid(listItemUuid);\n    listItemElement.focus();\n    return true;\n};\n\nexport const handleHorizontalArrowNavigation = ({\n    event,\n    currentListItemElement,\n    targetElement,\n    isCurrentListItemTarget,\n}: {\n    event: KeyboardEvent<HTMLDivElement>;\n    currentListItemElement: HTMLDivElement;\n    targetElement: HTMLElement | null;\n    isCurrentListItemTarget: boolean;\n}) => {\n    if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {\n        return false;\n    }\n\n    const focusableLeftElements = getFocusableElements(\n        currentListItemElement,\n        LEFT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n\n    const focusableRightElements = getFocusableElements(\n        currentListItemElement,\n        RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n\n    const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);\n\n    if (focusedLeftElementIndex !== -1) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowLeft') {\n            const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];\n\n            if (previousLeftElement) {\n                previousLeftElement.focus();\n            } else {\n                currentListItemElement.focus();\n            }\n\n            return true;\n        }\n\n        const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];\n\n        if (nextLeftElement) {\n            nextLeftElement.focus();\n        } else if (focusableRightElements.length > 0) {\n            focusableRightElements[0]?.focus();\n        }\n\n        return true;\n    }\n\n    const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n    if (focusedRightElementIndex !== -1) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowRight') {\n            focusableRightElements[focusedRightElementIndex + 1]?.focus();\n            return true;\n        }\n\n        const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];\n\n        if (previousRightElement) {\n            previousRightElement.focus();\n        } else if (focusableLeftElements.length > 0) {\n            focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n        } else {\n            currentListItemElement.focus();\n        }\n\n        return true;\n    }\n\n    if (isCurrentListItemTarget) {\n        if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {\n            event.preventDefault();\n            focusableLeftElements[focusableLeftElements.length - 1]?.focus();\n            return true;\n        }\n    }\n\n    return false;\n};\n\nexport const handleListItemTabNavigation = ({\n    event,\n    currentListItemElement,\n    targetElement,\n    isCurrentListItemTarget,\n    isInKeyboardNavigationGroup,\n    listItemUuids,\n    currentUuid,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: ListItemTabNavigationParams) => {\n    if (event.key !== 'Tab' || !isInKeyboardNavigationGroup || !listItemUuids?.length) {\n        return false;\n    }\n\n    const currentIndex = listItemUuids.indexOf(currentUuid);\n\n    if (currentIndex === -1) {\n        return false;\n    }\n\n    const focusableRightElements = getFocusableElements(\n        currentListItemElement,\n        RIGHT_ELEMENT_FOCUSABLE_SELECTOR,\n    );\n    const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);\n\n    if (event.shiftKey) {\n        return false;\n    }\n\n    if (isCurrentListItemTarget) {\n        if (focusableRightElements.length > 0) {\n            event.preventDefault();\n            focusableRightElements[0]?.focus();\n            return true;\n        }\n\n        return false;\n    }\n\n    if (focusedRightElementIndex === -1) {\n        return false;\n    }\n\n    const nextRightElement = focusableRightElements[focusedRightElementIndex + 1];\n\n    if (nextRightElement) {\n        event.preventDefault();\n        nextRightElement.focus();\n        return true;\n    }\n\n    if (currentIndex < listItemUuids.length - 1) {\n        event.preventDefault();\n        return focusListItemByIndex({\n            index: currentIndex + 1,\n            listItemUuids,\n            listGroupUuid,\n            updateActiveListItemUuid,\n        });\n    }\n\n    return false;\n};\n\nexport const handleVerticalListGroupNavigation = ({\n    event,\n    isCurrentListItemTarget,\n    isInKeyboardNavigationGroup,\n    listItemUuids,\n    currentUuid,\n    listGroupUuid,\n    updateActiveListItemUuid,\n}: ListGroupNavigationParams) => {\n    if (\n        !isCurrentListItemTarget ||\n        !isInKeyboardNavigationGroup ||\n        !listItemUuids?.length ||\n        (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')\n    ) {\n        return false;\n    }\n\n    const currentIndex = listItemUuids.indexOf(currentUuid);\n\n    if (currentIndex === -1) {\n        return true;\n    }\n\n    event.preventDefault();\n\n    const isBackward = event.key === 'ArrowUp';\n\n    const nextIndex = isBackward\n        ? (currentIndex - 1 + listItemUuids.length) % listItemUuids.length\n        : (currentIndex + 1) % listItemUuids.length;\n\n    const nextListItemUuid = listItemUuids[nextIndex];\n\n    if (\n        nextListItemUuid &&\n        nextListItemUuid !== currentUuid &&\n        typeof listGroupUuid === 'string' &&\n        typeof updateActiveListItemUuid === 'function'\n    ) {\n        const nextListItemElement = document.querySelector<HTMLDivElement>(\n            `[data-uuid=\"${listGroupUuid}---${nextListItemUuid}\"]`,\n        );\n\n        if (nextListItemElement) {\n            updateActiveListItemUuid(nextListItemUuid);\n            nextListItemElement.focus();\n        }\n    }\n\n    return true;\n};\n\nexport const handleListItemToggleKey = ({\n    event,\n    isCurrentListItemTarget,\n    isExpandable,\n    isItemOpen,\n    shouldEnableKeyboardHighlighting,\n    toggleItem,\n}: ListItemToggleKeyParams) => {\n    if (!isCurrentListItemTarget || !shouldEnableKeyboardHighlighting) {\n        return false;\n    }\n\n    const shouldOpen = isExpandable && event.key === 'ArrowRight' && !isItemOpen;\n    const shouldClose = isExpandable && event.key === 'ArrowLeft' && isItemOpen;\n    const shouldToggle = event.key === 'Enter' || event.key === ' ';\n\n    if (!shouldOpen && !shouldClose && !shouldToggle) {\n        return false;\n    }\n\n    event.preventDefault();\n    toggleItem();\n    return true;\n};\n"],"mappings":"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","ignoreList":[]}