@chayns-components/core 5.5.29 → 5.5.31-alpha.0

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

@@ -7,6 +7,7 @@ import { StyledInput, StyledInputContent, StyledInputContentWrapper, StyledInput
 import { ContentCardType } from '../../types/contentCard';
 import { useCursorRepaint } from '../../hooks/resize';
 import Tooltip from '../tooltip/Tooltip';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 export let InputSize = /*#__PURE__*/function (InputSize) {
   InputSize["Small"] = "small";
@@ -46,6 +47,8 @@ const Input = /*#__PURE__*/forwardRef(({
   const areaProvider = useContext(AreaContext);
   const theme = useTheme();
   const inputRef = useRef(null);
+  const inputContentWrapperRef = useRef(null);
+  const clearIconRef = useRef(null);
   const placeholderRef = useRef(null);
   useCursorRepaint(inputRef);
   const placeholderSize = useElementSize(placeholderRef);
@@ -101,6 +104,13 @@ const Input = /*#__PURE__*/forwardRef(({
     backgroundColor = theme['000'];
   }
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
+  useFocusRingPortal(inputRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: inputContentWrapperRef
+  });
+  useFocusRingPortal(clearIconRef, {
+    isEnabled: shouldShowKeyboardHighlighting && hasValue && !isDisabled
+  });
   const borderColor = color?.border;
   const placeholderColor = color?.placeholder;
   const labelPosition = useMemo(() => {
@@ -122,6 +132,7 @@ const Input = /*#__PURE__*/forwardRef(({
     className: "beta-chayns-input",
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(StyledInputContentWrapper, {
+    ref: inputContentWrapperRef,
     $shouldShowTransparentBackground: shouldShowTransparentBackground,
     $backgroundColor: backgroundColor,
     $isInvalid: isInvalid,
@@ -174,6 +185,7 @@ const Input = /*#__PURE__*/forwardRef(({
     $color: placeholderColor,
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/React.createElement(StyledMotionInputClearIcon, {
+    ref: clearIconRef,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     $size: size,
     $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
@@ -183,8 +195,8 @@ const Input = /*#__PURE__*/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/esm/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","useKeyboardFocusHighlighting","InputSize","Input","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","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","handleClearIconKeyDown","event","key","preventDefault","focus","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","blur","internalColor","contentCardType","Error","Success","Warning","includes","shouldChangeColor","shouldShowKeyboardHighlighting","borderColor","border","placeholderColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","$shouldShowKeyboardHighlighting","$color","$placeholderWidth","disabled","onClick","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","tabIndex","role","icons","wrong","$isInline","item","text","shouldUseFullWidth","displayName"],"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","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useElementSize","AreaContext","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","ContentCardType","useCursorRepaint","Tooltip","useFocusRingPortal","useKeyboardFocusHighlighting","InputSize","Input","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","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","inputContentWrapperRef","clearIconRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","handleClearIconKeyDown","event","key","preventDefault","focus","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","blur","internalColor","contentCardType","Error","Success","Warning","includes","shouldChangeColor","shouldShowKeyboardHighlighting","isEnabled","overlayRef","borderColor","border","placeholderColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","$shouldShowKeyboardHighlighting","$color","$placeholderWidth","disabled","onClick","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","tabIndex","role","icons","wrong","$isInline","item","text","shouldUseFullWidth","displayName"],"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/esm/components/input/Input.styles.js

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledInput = styled.div`
     opacity: ${({
   $isDisabled
@@ -97,7 +96,6 @@ export const StyledInputContentWrapper = styled.div`
             /* Show highlighting when the input field is focused */
             &:has(input:focus-visible) {
                 transition: none;
-                ${keyboardFocusHighlightingRingCss}
             }
         `}
 `;
@@ -178,7 +176,6 @@ export const StyledMotionInputClearIcon = styled(motion.div)`
 }) => $shouldShowKeyboardHighlighting && css`
             &:focus-visible {
                 transition: none;
-                ${keyboardFocusHighlightingRingCss}
             }
         `}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","$shouldShowKeyboardHighlighting","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","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":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","$shouldShowKeyboardHighlighting","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","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/esm/components/list/List.utils.js

@@ -107,11 +107,6 @@ export const handleHorizontalArrowNavigation = ({
       focusableLeftElements[focusableLeftElements.length - 1]?.focus();
       return true;
     }
-    if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {
-      event.preventDefault();
-      focusableRightElements[0]?.focus();
-      return true;
-    }
   }
   return false;
 };
@@ -182,8 +177,8 @@ export 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/esm/components/list/List.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.utils.js","names":["Children","isValidElement","LIST_ITEM_MARKER","isDirectListItemElement","node","type","displayName","isMarkedListItemElement","$$listItem","shouldShowExpandIndicator","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","focusedRightElementIndex","previousRightElement","handleListItemTabNavigation","isInKeyboardNavigationGroup","currentUuid","currentIndex","indexOf","shiftKey","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":["Children","isValidElement","LIST_ITEM_MARKER","isDirectListItemElement","node","type","displayName","isMarkedListItemElement","$$listItem","shouldShowExpandIndicator","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","focusedRightElementIndex","previousRightElement","handleListItemTabNavigation","isInKeyboardNavigationGroup","currentUuid","currentIndex","indexOf","shiftKey","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":[]}

package/lib/esm/components/list/list-item/ListItem.js

@@ -1,8 +1,10 @@
 import { AnimatePresence, motion } from 'motion/react';
 import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
 import { useUuid } from '../../../hooks/uuid';
 import { AccordionContext } from '../../accordion/Accordion';
 import AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';
+import { useColorScheme } from '../../color-scheme-provider/ColorSchemeProvider';
 import { ListContext } from '../List';
 import { handleHorizontalArrowNavigation, handleListItemTabNavigation, handleListItemToggleKey, handleVerticalListGroupNavigation } from '../List.utils';
 import ListItemBody from './list-item-body/ListItemBody';
@@ -10,6 +12,7 @@ import ListItemHead from './list-item-head/ListItemHead';
 import { StyledListItem, StyledListItemTooltip } from './ListItem.styles';
 import Tooltip from '../../tooltip/Tooltip';
 import { useIsInsideDialog } from '../../../hooks/element';
+import { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';
 import { useListItemFocus } from './useListItemFocus';
 const ListItem = /*#__PURE__*/forwardRef(({
@@ -67,7 +70,10 @@ const ListItem = /*#__PURE__*/forwardRef(({
     activeListItemUuid,
     updateActiveListItemUuid
   } = useContext(ListContext);
-  const shouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlightingProp ?? shouldEnableKeyboardHighlightingContext;
+  const colorScheme = useColorScheme();
+  const theme = useTheme();
+  const isInsideListContext = typeof listGroupUuid === 'string';
+  const shouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlightingProp ?? (isInsideListContext ? shouldEnableKeyboardHighlightingContext : colorScheme?.shouldEnableKeyboardHighlighting ?? false);
   const {
     isWrapped: isParentAccordionWrapped
   } = useContext(AccordionContext);
@@ -131,6 +137,10 @@ const ListItem = /*#__PURE__*/forwardRef(({
     setTitleMaxWidth(maxWidth);
   }, []);
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(listItemRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    borderRadius: `${theme.cardBorderRadius}px`
+  });
   const isInKeyboardNavigationGroup = shouldEnableKeyboardHighlighting && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function';
   useEffect(() => {
     if (shouldEnableKeyboardHighlighting && typeof registerListItemUuid === 'function' && typeof unregisterListItemUuid === 'function') {
@@ -188,6 +198,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
     isInKeyboardNavigationGroup,
     updateActiveListItemUuid
   });
+  const shouldForceHoverItem = shouldForceHover || isFocusWithinListItem;
   useEffect(() => {
     if (isInKeyboardNavigationGroup && activeListItemUuid == null && typeof updateActiveListItemUuid === 'function' && listItemUuids?.[0] === uuid) {
       updateActiveListItemUuid(uuid);
@@ -254,7 +265,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
     leftElements: leftElements,
     onClick: isClickable ? handleHeadClick : undefined,
     onLongPress: onLongPress,
-    shouldForceHover: shouldForceHover,
+    shouldForceHover: shouldForceHoverItem,
     rightElements: rightElements,
     shouldHideImageOrIconBackground: shouldHideImageOrIconBackground,
     shouldHideIndicator: shouldHideIndicator,