npm - @chayns-components/core - Versions diffs - 5.3.10 → 5.3.11-alpha.0 - Mend

@chayns-components/core 5.3.10 → 5.3.11-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (451) hide show

package/lib/esm/components/input/Input.js.map CHANGED Viewed

	@@ -1 +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","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","ref","hasValue","setHasValue","placeholderWidth","setPlaceholderWidth","areaProvider","theme","inputRef","placeholderRef","placeholderSize","width","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","blur","internalColor","contentCardType","Error","Success","Warning","includes","shouldChangeColor","labelPosition","right","top","bottom","Small","left","inputElement","createElement","className","$isDisabled","$shouldShowTransparentBackground","$backgroundColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","$borderColor","border","$color","$placeholderWidth","disabled","onClick","preventDefault","stopPropagation","autoFocus","$shouldShowCenteredContent","animate","opacity","fontSize","Number","initial","layout","transition","duration","icons","wrong","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';\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\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 },\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 // 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 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={color?.border}\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\n $color={color?.placeholder}\n $isInvalid={isInvalid}\n >\n {placeholder}\n </StyledInputLabel>\n </StyledMotionInputLabelWrapper>\n </StyledInputContent>\n {shouldShowClearIcon && (\n <StyledMotionInputClearIcon\n $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n $size={size}\n animate={{ opacity: hasValue ? 1 : 0 }}\n initial={false}\n onClick={handleClearIconClick}\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 && rightElement}\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 color?.placeholder,\n placeholder,\n shouldShowClearIcon,\n handleClearIconClick,\n rightElement,\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":[]}
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 shouldEnableKeyboardHighlighting && hasValue && !isDisabled\n ? 0\n : -1\n }\n role={shouldEnableKeyboardHighlighting ? '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 CHANGED Viewed

@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledInput = styled.div`
     opacity: ${({
   $isDisabled
@@ -89,6 +90,15 @@ export const StyledInputContentWrapper = styled.div`
             border-right: none;
         `;
 }}
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-within {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledInputContent = styled.div`
     display: flex;
@@ -161,6 +171,15 @@ export const StyledMotionInputClearIcon = styled(motion.div)`
     width: ${({
   $size
 }) => $size === 'medium' ? '40px' : '30px'};
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledInputIconWrapper = styled.div`
     align-items: baseline;
@@ -170,9 +189,20 @@ export const StyledInputIconWrapper = styled.div`
     margin-left: 10px;
 `;
 export const StyledInputRightElement = styled.div`
-    border-bottom-right-radius: 3px;
-    border-top-right-radius: 3px;
-    overflow: hidden;
     flex: 0 0 auto;
+    overflow: hidden;
+    min-width: 28px;
+    text-align: center;
+    ${({
+  $isInline
+}) => !$isInline && css`
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        `}
+    .beta-chayns-icon:focus-visible::after {
+        transform: translate(-50%, -50%) scale(0.78);
+    }
 `;
 //# sourceMappingURL=Input.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","$isDisabled","StyledInputContentWrapper","theme","$backgroundColor","$isInvalid","$shouldShowTransparentBackground","$borderColor","wrong","colorMode","$size","$shouldShowOnlyBottomBorder","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","$color","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"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}>;\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\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}>;\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\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\nexport const StyledInputRightElement = styled.div`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n overflow: hidden;\n flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
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 &:focus-within {\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 .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.js CHANGED Viewed

@@ -1,24 +1,39 @@
 import { c as _c } from "react-compiler-runtime";
 import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, { useCallback, useMemo, useState } from 'react';
+import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
+import { useUuid } from '../../hooks/uuid';
 import { shouldShowExpandIndicator } from './List.utils';
 export const ListContext = /*#__PURE__*/React.createContext({
   isAnyItemExpandable: false,
   isWrapped: false,
   openItemUuid: undefined,
-  updateOpenItemUuid: () => {}
+  updateOpenItemUuid: () => {},
+  shouldEnableKeyboardHighlighting: false,
+  listGroupUuid: undefined,
+  listItemUuids: undefined,
+  registerListItemUuid: undefined,
+  unregisterListItemUuid: undefined,
+  activeListItemUuid: undefined,
+  updateActiveListItemUuid: undefined
 });
 ListContext.displayName = 'ListContext';
 const List = t0 => {
   "use memo";
-  const $ = _c(13);
+  const $ = _c(24);
   const {
     children,
-    isWrapped: t1
+    isWrapped: t1,
+    shouldEnableKeyboardHighlighting
   } = t0;
   const isWrapped = t1 === undefined ? false : t1;
+  const colorScheme = useColorScheme();
+  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
   const [openItemUuid, setOpenItemUuid] = useState(undefined);
+  const [listItemUuids, setListItemUuids] = useState();
+  const [activeListItemUuid, setActiveListItemUuid] = useState(undefined);
+  const listGroupUuid = useUuid();
   let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = (uuid, t3) => {
@@ -38,63 +53,134 @@ const List = t0 => {
   }
   const updateOpenItemUuid = t2;
   let t3;
-  if ($[1] !== children) {
-    t3 = shouldShowExpandIndicator(children);
-    $[1] = children;
+  if ($[1] !== listGroupUuid) {
+    t3 = uuids => {
+      if (typeof document === "undefined") {
+        return uuids;
+      }
+      const domOrderedUuids = Array.from(document.querySelectorAll(`[data-uuid^="${listGroupUuid}---"]`)).map(_temp).filter(_temp2);
+      return domOrderedUuids.filter(uuid_1 => uuids.includes(uuid_1));
+    };
+    $[1] = listGroupUuid;
     $[2] = t3;
   } else {
     t3 = $[2];
   }
+  const sortListItemUuidsByDom = t3;
   let t4;
-  if ($[3] !== isWrapped || $[4] !== openItemUuid || $[5] !== t3) {
-    t4 = {
-      isAnyItemExpandable: t3,
+  if ($[3] !== sortListItemUuidsByDom) {
+    t4 = uuid_2 => {
+      setListItemUuids(t5 => {
+        const currentListItemUuids = t5 === undefined ? [] : t5;
+        const nextListItemUuids = currentListItemUuids.includes(uuid_2) ? currentListItemUuids : [...currentListItemUuids, uuid_2];
+        return sortListItemUuidsByDom(nextListItemUuids);
+      });
+    };
+    $[3] = sortListItemUuidsByDom;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const registerListItemUuid = t4;
+  let t5;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = uuid_3 => {
+      setListItemUuids(t6 => {
+        const currentListItemUuids_0 = t6 === undefined ? [] : t6;
+        return currentListItemUuids_0.filter(currentUuid => currentUuid !== uuid_3);
+      });
+    };
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const unregisterListItemUuid = t5;
+  let t6;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = uuid_4 => {
+      setActiveListItemUuid(uuid_4);
+    };
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const updateActiveListItemUuid = t6;
+  let t7;
+  if ($[7] !== children) {
+    t7 = shouldShowExpandIndicator(children);
+    $[7] = children;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== activeListItemUuid || $[10] !== isWrapped || $[11] !== listGroupUuid || $[12] !== listItemUuids || $[13] !== openItemUuid || $[14] !== registerListItemUuid || $[15] !== shouldEnableKeyboardHighlightingEffective || $[16] !== t7) {
+    t8 = {
+      isAnyItemExpandable: t7,
       isWrapped,
       openItemUuid,
-      updateOpenItemUuid
+      updateOpenItemUuid,
+      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
+      listGroupUuid,
+      listItemUuids,
+      registerListItemUuid,
+      unregisterListItemUuid,
+      activeListItemUuid,
+      updateActiveListItemUuid
     };
-    $[3] = isWrapped;
-    $[4] = openItemUuid;
-    $[5] = t3;
-    $[6] = t4;
+    $[9] = activeListItemUuid;
+    $[10] = isWrapped;
+    $[11] = listGroupUuid;
+    $[12] = listItemUuids;
+    $[13] = openItemUuid;
+    $[14] = registerListItemUuid;
+    $[15] = shouldEnableKeyboardHighlightingEffective;
+    $[16] = t7;
+    $[17] = t8;
   } else {
-    t4 = $[6];
+    t8 = $[17];
   }
-  const providerValue = t4;
-  let t5;
-  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = {
+  const providerValue = t8;
+  let t9;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
       type: "tween"
     };
-    $[7] = t5;
+    $[18] = t9;
   } else {
-    t5 = $[7];
+    t9 = $[18];
   }
-  let t6;
-  if ($[8] !== children) {
-    t6 = /*#__PURE__*/React.createElement(MotionConfig, {
-      transition: t5
+  let t10;
+  if ($[19] !== children) {
+    t10 = /*#__PURE__*/React.createElement(MotionConfig, {
+      transition: t9
     }, /*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
     }, children));
-    $[8] = children;
-    $[9] = t6;
+    $[19] = children;
+    $[20] = t10;
   } else {
-    t6 = $[9];
+    t10 = $[20];
   }
-  let t7;
-  if ($[10] !== providerValue || $[11] !== t6) {
-    t7 = /*#__PURE__*/React.createElement(ListContext.Provider, {
+  let t11;
+  if ($[21] !== providerValue || $[22] !== t10) {
+    t11 = /*#__PURE__*/React.createElement(ListContext.Provider, {
       value: providerValue
-    }, t6);
-    $[10] = providerValue;
-    $[11] = t6;
-    $[12] = t7;
+    }, t10);
+    $[21] = providerValue;
+    $[22] = t10;
+    $[23] = t11;
   } else {
-    t7 = $[12];
+    t11 = $[23];
   }
-  return t7;
+  return t11;
 };
 List.displayName = 'List';
 export default List;
+function _temp(element) {
+  return element.getAttribute("data-uuid")?.split("---")[1];
+}
+function _temp2(uuid_0) {
+  return Boolean(uuid_0);
+}
 //# sourceMappingURL=List.js.map

package/lib/esm/components/list/List.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","shouldShowExpandIndicator","ListContext","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","t0","$","_c","children","t1","setOpenItemUuid","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","t4","providerValue","t5","type","t6","createElement","transition","initial","t7","Provider"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\nimport { shouldShowExpandIndicator } from './List.utils';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string \| undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /*\n The items of the list\n /\n children: ReactNode;\n /\n This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n */\n isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n 'use memo';\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: shouldShowExpandIndicator(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n }),\n [children, isWrapped, openItemUuid, updateOpenItemUuid],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","useColorScheme","useUuid","shouldShowExpandIndicator","ListContext","createContext","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","shouldEnableKeyboardHighlighting","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","displayName","List","t0","$","_c","children","t1","colorScheme","shouldEnableKeyboardHighlightingEffective","setOpenItemUuid","setListItemUuids","setActiveListItemUuid","t2","Symbol","for","uuid","t3","shouldOnlyOpen","currentOpenItemUuid","uuids","document","domOrderedUuids","Array","from","querySelectorAll","map","_temp","filter","_temp2","uuid_1","includes","sortListItemUuidsByDom","t4","uuid_2","t5","currentListItemUuids","nextListItemUuids","uuid_3","t6","currentListItemUuids_0","currentUuid","uuid_4","t7","t8","providerValue","t9","type","t10","createElement","transition","initial","t11","Provider","element","getAttribute","split","uuid_0","Boolean"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useUuid } from '../../hooks/uuid';\nimport { shouldShowExpandIndicator } from './List.utils';\n\ninterface IListContext {\n isAnyItemExpandable: boolean;\n isWrapped: boolean;\n openItemUuid: string \| undefined;\n updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n shouldEnableKeyboardHighlighting: boolean;\n listGroupUuid?: string;\n listItemUuids?: string[];\n registerListItemUuid?: (uuid: string) => void;\n unregisterListItemUuid?: (uuid: string) => void;\n activeListItemUuid?: string;\n updateActiveListItemUuid?: (uuid?: string) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n isAnyItemExpandable: false,\n isWrapped: false,\n openItemUuid: undefined,\n updateOpenItemUuid: () => {},\n shouldEnableKeyboardHighlighting: false,\n listGroupUuid: undefined,\n listItemUuids: undefined,\n registerListItemUuid: undefined,\n unregisterListItemUuid: undefined,\n activeListItemUuid: undefined,\n updateActiveListItemUuid: undefined,\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n /*\n The items of the list\n /\n children: ReactNode;\n /\n This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n /\n isWrapped?: boolean;\n /\n Enables keyboard-only focus highlighting and arrow-key navigation within the list.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false, shouldEnableKeyboardHighlighting }) => {\n 'use memo';\n\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n const [listItemUuids, setListItemUuids] = useState<string[]>();\n const [activeListItemUuid, setActiveListItemUuid] =\n useState<IListContext['activeListItemUuid']>(undefined);\n\n const listGroupUuid = useUuid();\n\n const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenItemUuid((currentOpenItemUuid) => {\n if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenItemUuid],\n );\n\n const sortListItemUuidsByDom = useCallback(\n (uuids: string[]) => {\n if (typeof document === 'undefined') {\n return uuids;\n }\n\n const domOrderedUuids = Array.from(\n document.querySelectorAll<HTMLElement>(`[data-uuid^=\"${listGroupUuid}---\"]`),\n )\n .map((element) => element.getAttribute('data-uuid')?.split('---')[1])\n .filter((uuid): uuid is string => Boolean(uuid));\n\n return domOrderedUuids.filter((uuid) => uuids.includes(uuid));\n },\n [listGroupUuid],\n );\n\n const registerListItemUuid = useCallback(\n (uuid: string) => {\n setListItemUuids((currentListItemUuids = []) => {\n const nextListItemUuids = currentListItemUuids.includes(uuid)\n ? currentListItemUuids\n : [...currentListItemUuids, uuid];\n\n return sortListItemUuidsByDom(nextListItemUuids);\n });\n },\n [sortListItemUuidsByDom],\n );\n\n const unregisterListItemUuid = useCallback((uuid: string) => {\n setListItemUuids((currentListItemUuids = []) =>\n currentListItemUuids.filter((currentUuid) => currentUuid !== uuid),\n );\n }, []);\n\n const updateActiveListItemUuid = useCallback((uuid?: string) => {\n setActiveListItemUuid(uuid);\n }, []);\n\n const providerValue = useMemo<IListContext>(\n () => ({\n isAnyItemExpandable: shouldShowExpandIndicator(children),\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,\n listGroupUuid,\n listItemUuids,\n registerListItemUuid,\n unregisterListItemUuid,\n activeListItemUuid,\n updateActiveListItemUuid,\n }),\n [\n children,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n shouldEnableKeyboardHighlightingEffective,\n listGroupUuid,\n listItemUuids,\n registerListItemUuid,\n unregisterListItemUuid,\n activeListItemUuid,\n updateActiveListItemUuid,\n ],\n );\n\n return (\n <ListContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </ListContext.Provider>\n );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/List.utils.js CHANGED Viewed

@@ -14,4 +14,103 @@ export const shouldShowExpandIndicator = node => Children.toArray(node).some(chi
   }
   return false;
 });
+const LEFT_ELEMENT_FOCUSABLE_SELECTOR = '[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"]';
+const RIGHT_ELEMENT_FOCUSABLE_SELECTOR = '[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"]';
+const getFocusableElements = (root, selector) => Array.from(root.querySelectorAll(selector)).filter(element => !element.hasAttribute('disabled') && element.getAttribute('tabindex') !== '-1');
+const getFocusedElementIndex = (elements, targetElement) => {
+  if (!targetElement || elements.length === 0) {
+    return -1;
+  }
+  return elements.findIndex(element => element === targetElement || element.contains(targetElement));
+};
+export const handleHorizontalArrowNavigation = ({
+  event,
+  currentListItemElement,
+  targetElement,
+  isCurrentListItemTarget
+}) => {
+  if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+    return false;
+  }
+  const focusableLeftElements = getFocusableElements(currentListItemElement, LEFT_ELEMENT_FOCUSABLE_SELECTOR);
+  const focusableRightElements = getFocusableElements(currentListItemElement, RIGHT_ELEMENT_FOCUSABLE_SELECTOR);
+  const focusedLeftElementIndex = getFocusedElementIndex(focusableLeftElements, targetElement);
+  if (focusedLeftElementIndex !== -1) {
+    event.preventDefault();
+    if (event.key === 'ArrowLeft') {
+      const previousLeftElement = focusableLeftElements[focusedLeftElementIndex - 1];
+      if (previousLeftElement) {
+        previousLeftElement.focus();
+      } else {
+        currentListItemElement.focus();
+      }
+      return true;
+    }
+    const nextLeftElement = focusableLeftElements[focusedLeftElementIndex + 1];
+    if (nextLeftElement) {
+      nextLeftElement.focus();
+    } else if (focusableRightElements.length > 0) {
+      focusableRightElements[0]?.focus();
+    }
+    return true;
+  }
+  const focusedRightElementIndex = getFocusedElementIndex(focusableRightElements, targetElement);
+  if (focusedRightElementIndex !== -1) {
+    event.preventDefault();
+    if (event.key === 'ArrowRight') {
+      focusableRightElements[focusedRightElementIndex + 1]?.focus();
+      return true;
+    }
+    const previousRightElement = focusableRightElements[focusedRightElementIndex - 1];
+    if (previousRightElement) {
+      previousRightElement.focus();
+    } else if (focusableLeftElements.length > 0) {
+      focusableLeftElements[focusableLeftElements.length - 1]?.focus();
+    } else {
+      currentListItemElement.focus();
+    }
+    return true;
+  }
+  if (isCurrentListItemTarget) {
+    if (event.key === 'ArrowLeft' && focusableLeftElements.length > 0) {
+      event.preventDefault();
+      focusableLeftElements[focusableLeftElements.length - 1]?.focus();
+      return true;
+    }
+    if (event.key === 'ArrowRight' && focusableRightElements.length > 0) {
+      event.preventDefault();
+      focusableRightElements[0]?.focus();
+      return true;
+    }
+  }
+  return false;
+};
+export const handleVerticalListGroupNavigation = ({
+  event,
+  isCurrentListItemTarget,
+  isInKeyboardNavigationGroup,
+  listItemUuids,
+  currentUuid,
+  listGroupUuid,
+  updateActiveListItemUuid
+}) => {
+  if (!isCurrentListItemTarget || !isInKeyboardNavigationGroup || !listItemUuids?.length || event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return false;
+  }
+  event.preventDefault();
+  const currentIndex = listItemUuids.indexOf(currentUuid);
+  if (currentIndex === -1) {
+    return true;
+  }
+  const nextIndex = event.key === 'ArrowDown' ? (currentIndex + 1) % listItemUuids.length : (currentIndex - 1 + listItemUuids.length) % listItemUuids.length;
+  const nextListItemUuid = listItemUuids[nextIndex];
+  if (nextListItemUuid && nextListItemUuid !== currentUuid && typeof listGroupUuid === 'string' && typeof updateActiveListItemUuid === 'function') {
+    const nextListItemElement = document.querySelector(`[data-uuid="${listGroupUuid}---${nextListItemUuid}"]`);
+    if (nextListItemElement) {
+      updateActiveListItemUuid(nextListItemUuid);
+      nextListItemElement.focus();
+    }
+  }
+  return true;
+};
 //# sourceMappingURL=List.utils.js.map