npm - @chayns-components/core - Versions diffs - 5.5.30 → 5.5.34 - Mend

@chayns-components/core 5.5.30 → 5.5.34

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 (249) 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","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":[]}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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","$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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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\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":"AAAA,SACIA,QAAQ,EACRC,cAAc,QAIX,OAAO;AACd,SAASC,gBAAgB,QAAQ,4BAA4B;AAY7D,OAAO,MAAMC,uBAAuB,GAAIC,IAAe,IACnD,aAAAH,cAAc,CAACG,IAAI,CAAC,IAAKA,IAAI,CAACC,IAAI,CAA8BC,WAAW,KAAK,UAAU;AAE9F,OAAO,MAAMC,uBAAuB,GAAIH,IAAe,IACnD,aAAAH,cAAc,CAACG,IAAI,CAAC,IACpB,OAAOA,IAAI,CAACC,IAAI,KAAK,QAAQ,IAC5BD,IAAI,CAACC,IAAI,CAAwBG,UAAU,KAAKN,gBAAgB;AAErE,OAAO,MAAMO,yBAAyB,GAAIL,IAAe,IACrDJ,QAAQ,CAACU,OAAO,CAACN,IAAI,CAAC,CAACO,IAAI,CAAEC,KAAK,IAAK;EACnC,IAAIT,uBAAuB,CAACS,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI,IAAIF,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS;EACzF;EAEA,IAAIT,uBAAuB,CAACK,KAAK,CAAC,EAAE;IAChC,OAAOA,KAAK,CAACC,KAAK,CAACI,YAAY,KAAK,IAAI,IAAIL,KAAK,CAACC,KAAK,CAACC,mBAAmB,KAAK,IAAI;EACxF;EAEA,IAAI,aAAAb,cAAc,CAA2BW,KAAK,CAAC,IAAIA,KAAK,CAACC,KAAK,CAACE,QAAQ,KAAKC,SAAS,EAAE;IACvF,OAAOP,yBAAyB,CAACG,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC;EAC1D;EAEA,OAAO,KAAK;AAChB,CAAC,CAAC;AAEN,MAAMG,+BAA+B,GACjC,6QAA6Q;AAEjR,MAAMC,gCAAgC,GAClC,oRAAoR;AAExR,MAAMC,oBAAoB,GAAGA,CAACC,IAAiB,EAAEC,QAAgB,KAC7DC,KAAK,CAACC,IAAI,CAACH,IAAI,CAACI,gBAAgB,CAAcH,QAAQ,CAAC,CAAC,CAACI,MAAM,CAC1DC,OAAO,IAAK,CAACA,OAAO,CAACC,YAAY,CAAC,UAAU,CAAC,IAAID,OAAO,CAACE,YAAY,CAAC,UAAU,CAAC,KAAK,IAC3F,CAAC;AAEL,MAAMC,sBAAsB,GAAGA,CAACC,QAAuB,EAAEC,aAAiC,KAAK;EAC3F,IAAI,CAACA,aAAa,IAAID,QAAQ,CAACE,MAAM,KAAK,CAAC,EAAE;IACzC,OAAO,CAAC,CAAC;EACb;EAEA,OAAOF,QAAQ,CAACG,SAAS,CACpBP,OAAO,IAAKA,OAAO,KAAKK,aAAa,IAAIL,OAAO,CAACQ,QAAQ,CAACH,aAAa,CAC5E,CAAC;AACL,CAAC;AA0BD,MAAMI,yBAAyB,GAAGA,CAAC;EAC/BC,KAAK;EACLC,aAAa;EACbC;AAKJ,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGF,aAAa,CAACD,KAAK,CAAC;EAEzC,IAAI,CAACG,YAAY,IAAI,OAAOD,aAAa,KAAK,QAAQ,EAAE;IACpD,OAAOvB,SAAS;EACpB;EAEA,OAAOyB,QAAQ,CAACC,aAAa,CACzB,eAAeH,aAAa,MAAMC,YAAY,IAClD,CAAC;AACL,CAAC;AAED,MAAMG,oBAAoB,GAAGA,CAAC;EAC1BN,KAAK;EACLC,aAAa;EACbC,aAAa;EACbK;AAMJ,CAAC,KAAK;EACF,MAAMJ,YAAY,GAAGF,aAAa,CAACD,KAAK,CAAC;EACzC,MAAMQ,eAAe,GAAGT,yBAAyB,CAAC;IAAEC,KAAK;IAAEC,aAAa;IAAEC;EAAc,CAAC,CAAC;EAE1F,IAAI,CAACC,YAAY,IAAI,CAACK,eAAe,IAAI,OAAOD,wBAAwB,KAAK,UAAU,EAAE;IACrF,OAAO,KAAK;EAChB;EAEAA,wBAAwB,CAACJ,YAAY,CAAC;EACtCK,eAAe,CAACC,KAAK,CAAC,CAAC;EACvB,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGA,CAAC;EAC5CC,KAAK;EACLC,sBAAsB;EACtBjB,aAAa;EACbkB;AAMJ,CAAC,KAAK;EACF,IAAIF,KAAK,CAACG,GAAG,KAAK,YAAY,IAAIH,KAAK,CAACG,GAAG,KAAK,WAAW,EAAE;IACzD,OAAO,KAAK;EAChB;EAEA,MAAMC,qBAAqB,GAAGhC,oBAAoB,CAC9C6B,sBAAsB,EACtB/B,+BACJ,CAAC;EAED,MAAMmC,sBAAsB,GAAGjC,oBAAoB,CAC/C6B,sBAAsB,EACtB9B,gCACJ,CAAC;EAED,MAAMmC,uBAAuB,GAAGxB,sBAAsB,CAACsB,qBAAqB,EAAEpB,aAAa,CAAC;EAE5F,IAAIsB,uBAAuB,KAAK,CAAC,CAAC,EAAE;IAChCN,KAAK,CAACO,cAAc,CAAC,CAAC;IAEtB,IAAIP,KAAK,CAACG,GAAG,KAAK,WAAW,EAAE;MAC3B,MAAMK,mBAAmB,GAAGJ,qBAAqB,CAACE,uBAAuB,GAAG,CAAC,CAAC;MAE9E,IAAIE,mBAAmB,EAAE;QACrBA,mBAAmB,CAACV,KAAK,CAAC,CAAC;MAC/B,CAAC,MAAM;QACHG,sBAAsB,CAACH,KAAK,CAAC,CAAC;MAClC;MAEA,OAAO,IAAI;IACf;IAEA,MAAMW,eAAe,GAAGL,qBAAqB,CAACE,uBAAuB,GAAG,CAAC,CAAC;IAE1E,IAAIG,eAAe,EAAE;MACjBA,eAAe,CAACX,KAAK,CAAC,CAAC;IAC3B,CAAC,MAAM,IAAIO,sBAAsB,CAACpB,MAAM,GAAG,CAAC,EAAE;MAC1CoB,sBAAsB,CAAC,CAAC,CAAC,EAAEP,KAAK,CAAC,CAAC;IACtC;IAEA,OAAO,IAAI;EACf;EAEA,MAAMY,wBAAwB,GAAG5B,sBAAsB,CAACuB,sBAAsB,EAAErB,aAAa,CAAC;EAE9F,IAAI0B,wBAAwB,KAAK,CAAC,CAAC,EAAE;IACjCV,KAAK,CAACO,cAAc,CAAC,CAAC;IAEtB,IAAIP,KAAK,CAACG,GAAG,KAAK,YAAY,EAAE;MAC5BE,sBAAsB,CAACK,wBAAwB,GAAG,CAAC,CAAC,EAAEZ,KAAK,CAAC,CAAC;MAC7D,OAAO,IAAI;IACf;IAEA,MAAMa,oBAAoB,GAAGN,sBAAsB,CAACK,wBAAwB,GAAG,CAAC,CAAC;IAEjF,IAAIC,oBAAoB,EAAE;MACtBA,oBAAoB,CAACb,KAAK,CAAC,CAAC;IAChC,CAAC,MAAM,IAAIM,qBAAqB,CAACnB,MAAM,GAAG,CAAC,EAAE;MACzCmB,qBAAqB,CAACA,qBAAqB,CAACnB,MAAM,GAAG,CAAC,CAAC,EAAEa,KAAK,CAAC,CAAC;IACpE,CAAC,MAAM;MACHG,sBAAsB,CAACH,KAAK,CAAC,CAAC;IAClC;IAEA,OAAO,IAAI;EACf;EAEA,IAAII,uBAAuB,EAAE;IACzB,IAAIF,KAAK,CAACG,GAAG,KAAK,WAAW,IAAIC,qBAAqB,CAACnB,MAAM,GAAG,CAAC,EAAE;MAC/De,KAAK,CAACO,cAAc,CAAC,CAAC;MACtBH,qBAAqB,CAACA,qBAAqB,CAACnB,MAAM,GAAG,CAAC,CAAC,EAAEa,KAAK,CAAC,CAAC;MAChE,OAAO,IAAI;IACf;EACJ;EAEA,OAAO,KAAK;AAChB,CAAC;AAED,OAAO,MAAMc,2BAA2B,GAAGA,CAAC;EACxCZ,KAAK;EACLC,sBAAsB;EACtBjB,aAAa;EACbkB,uBAAuB;EACvBW,2BAA2B;EAC3BvB,aAAa;EACbwB,WAAW;EACXvB,aAAa;EACbK;AACyB,CAAC,KAAK;EAC/B,IAAII,KAAK,CAACG,GAAG,KAAK,KAAK,IAAI,CAACU,2BAA2B,IAAI,CAACvB,aAAa,EAAEL,MAAM,EAAE;IAC/E,OAAO,KAAK;EAChB;EAEA,MAAM8B,YAAY,GAAGzB,aAAa,CAAC0B,OAAO,CAACF,WAAW,CAAC;EAEvD,IAAIC,YAAY,KAAK,CAAC,CAAC,EAAE;IACrB,OAAO,KAAK;EAChB;EAEA,MAAMV,sBAAsB,GAAGjC,oBAAoB,CAC/C6B,sBAAsB,EACtB9B,gCACJ,CAAC;EACD,MAAMuC,wBAAwB,GAAG5B,sBAAsB,CAACuB,sBAAsB,EAAErB,aAAa,CAAC;EAE9F,IAAIgB,KAAK,CAACiB,QAAQ,EAAE;IAChB,OAAO,KAAK;EAChB;EAEA,IAAIf,uBAAuB,EAAE;IACzB,IAAIG,sBAAsB,CAACpB,MAAM,GAAG,CAAC,EAAE;MACnCe,KAAK,CAACO,cAAc,CAAC,CAAC;MACtBF,sBAAsB,CAAC,CAAC,CAAC,EAAEP,KAAK,CAAC,CAAC;MAClC,OAAO,IAAI;IACf;IAEA,OAAO,KAAK;EAChB;EAEA,IAAIY,wBAAwB,KAAK,CAAC,CAAC,EAAE;IACjC,OAAO,KAAK;EAChB;EAEA,MAAMQ,gBAAgB,GAAGb,sBAAsB,CAACK,wBAAwB,GAAG,CAAC,CAAC;EAE7E,IAAIQ,gBAAgB,EAAE;IAClBlB,KAAK,CAACO,cAAc,CAAC,CAAC;IACtBW,gBAAgB,CAACpB,KAAK,CAAC,CAAC;IACxB,OAAO,IAAI;EACf;EAEA,IAAIiB,YAAY,GAAGzB,aAAa,CAACL,MAAM,GAAG,CAAC,EAAE;IACzCe,KAAK,CAACO,cAAc,CAAC,CAAC;IACtB,OAAOZ,oBAAoB,CAAC;MACxBN,KAAK,EAAE0B,YAAY,GAAG,CAAC;MACvBzB,aAAa;MACbC,aAAa;MACbK;IACJ,CAAC,CAAC;EACN;EAEA,OAAO,KAAK;AAChB,CAAC;AAED,OAAO,MAAMuB,iCAAiC,GAAGA,CAAC;EAC9CnB,KAAK;EACLE,uBAAuB;EACvBW,2BAA2B;EAC3BvB,aAAa;EACbwB,WAAW;EACXvB,aAAa;EACbK;AACuB,CAAC,KAAK;EAC7B,IACI,CAACM,uBAAuB,IACxB,CAACW,2BAA2B,IAC5B,CAACvB,aAAa,EAAEL,MAAM,IACrBe,KAAK,CAACG,GAAG,KAAK,WAAW,IAAIH,KAAK,CAACG,GAAG,KAAK,SAAU,EACxD;IACE,OAAO,KAAK;EAChB;EAEA,MAAMY,YAAY,GAAGzB,aAAa,CAAC0B,OAAO,CAACF,WAAW,CAAC;EAEvD,IAAIC,YAAY,KAAK,CAAC,CAAC,EAAE;IACrB,OAAO,IAAI;EACf;EAEAf,KAAK,CAACO,cAAc,CAAC,CAAC;EAEtB,MAAMa,UAAU,GAAGpB,KAAK,CAACG,GAAG,KAAK,SAAS;EAE1C,MAAMkB,SAAS,GAAGD,UAAU,GACtB,CAACL,YAAY,GAAG,CAAC,GAAGzB,aAAa,CAACL,MAAM,IAAIK,aAAa,CAACL,MAAM,GAChE,CAAC8B,YAAY,GAAG,CAAC,IAAIzB,aAAa,CAACL,MAAM;EAE/C,MAAMqC,gBAAgB,GAAGhC,aAAa,CAAC+B,SAAS,CAAC;EAEjD,IACIC,gBAAgB,IAChBA,gBAAgB,KAAKR,WAAW,IAChC,OAAOvB,aAAa,KAAK,QAAQ,IACjC,OAAOK,wBAAwB,KAAK,UAAU,EAChD;IACE,MAAM2B,mBAAmB,GAAG9B,QAAQ,CAACC,aAAa,CAC9C,eAAeH,aAAa,MAAM+B,gBAAgB,IACtD,CAAC;IAED,IAAIC,mBAAmB,EAAE;MACrB3B,wBAAwB,CAAC0B,gBAAgB,CAAC;MAC1CC,mBAAmB,CAACzB,KAAK,CAAC,CAAC;IAC/B;EACJ;EAEA,OAAO,IAAI;AACf,CAAC;AAED,OAAO,MAAM0B,uBAAuB,GAAGA,CAAC;EACpCxB,KAAK;EACLE,uBAAuB;EACvBjC,YAAY;EACZwD,UAAU;EACVC,gCAAgC;EAChCC;AACqB,CAAC,KAAK;EAC3B,IAAI,CAACzB,uBAAuB,IAAI,CAACwB,gCAAgC,EAAE;IAC/D,OAAO,KAAK;EAChB;EAEA,MAAME,UAAU,GAAG3D,YAAY,IAAI+B,KAAK,CAACG,GAAG,KAAK,YAAY,IAAI,CAACsB,UAAU;EAC5E,MAAMI,WAAW,GAAG5D,YAAY,IAAI+B,KAAK,CAACG,GAAG,KAAK,WAAW,IAAIsB,UAAU;EAC3E,MAAMK,YAAY,GAAG9B,KAAK,CAACG,GAAG,KAAK,OAAO,IAAIH,KAAK,CAACG,GAAG,KAAK,GAAG;EAE/D,IAAI,CAACyB,UAAU,IAAI,CAACC,WAAW,IAAI,CAACC,YAAY,EAAE;IAC9C,OAAO,KAAK;EAChB;EAEA9B,KAAK,CAACO,cAAc,CAAC,CAAC;EACtBoB,UAAU,CAAC,CAAC;EACZ,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

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

@@ -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,

package/lib/esm/components/list/list-item/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useUuid","AccordionContext","AreaContextProvider","AreaContext","ListContext","handleHorizontalArrowNavigation","handleListItemTabNavigation","handleListItemToggleKey","handleVerticalListGroupNavigation","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","useKeyboardFocusHighlighting","useListItemFocus","ListItem","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","shouldEnableKeyboardHighlighting","shouldEnableKeyboardHighlightingProp","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlightingContext","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","isInDialog","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","current","handleHeadClick","event","shouldOnlyOpen","isClickable","handleTitleWidthChange","width","maxWidth","shouldShowKeyboardHighlighting","isInKeyboardNavigationGroup","tabIndex","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","currentUuid","toggleItem","some","handleKey","isFocusWithinListItem","handleFocus","handleBlur","createElement","as","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","onKeyDown","onFocus","onBlur","shouldUseFullWidth","isDisabled","item","style","cursor","onTitleWidthChange","id","shouldHideBody","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n KeyboardEvent,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport type { InputProps } from '../../input/Input';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport {\n handleHorizontalArrowNavigation,\n handleListItemTabNavigation,\n handleListItemToggleKey,\n handleVerticalListGroupNavigation,\n} from '../List.utils';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem, StyledListItemTooltip } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useIsInsideDialog } from '../../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\n\nexport type ListItemProps = {\n /*\n The background color of the `ListItem`.\n /\n backgroundColor?: CSSProperties['backgroundColor'];\n /\n DEPRECATED: Use `cornerImage` instead.\n /\n careOfLocationId?: number;\n /\n The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n /\n children?: ReactNode;\n /\n The image that is displayed in the bottom right corner of the grouped image of list item.\n /\n cornerImage?: string;\n /\n Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n /\n hoverItem?: ReactNode;\n /\n The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n /\n icons?: string[];\n /\n The background of the image. This is only used if images are passed.\n /\n imageBackground?: CSSProperties['background'];\n /\n A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n /\n images?: string[];\n /\n This can be used to automatically expand the `ListItem` during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This overrides the internal opening state of the item and makes it controlled.\n /\n isOpen?: boolean;\n /\n Whether the ListItem locks disabled but has full functionality.\n /\n isTitleGreyed?: boolean;\n /\n Whether the item is selected.\n /\n isSelected?: boolean;\n /\n Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n /\n leftElements?: ListItemElements;\n /\n Function to be executed when the header of the `ListItem` was clicked\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the ListItem is closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n /\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /\n Function to be executed when the ListItem is opened.\n /\n onOpen?: VoidFunction;\n /\n Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n /\n rightElements?: IListItemRightElements;\n /\n This will force the background color of the ListItem to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n Whether the line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n /\n shouldForceBottomLine?: boolean;\n /\n Whether the hover item should be forced.\n /\n shouldForceHover?: boolean;\n /\n Whether the bottom line should be hidden.\n /\n shouldHideBottomLine?: boolean;\n /\n Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n /\n shouldHideImageOrIconBackground?: boolean;\n /\n If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n /\n shouldHideIndicator?: boolean;\n /\n Whether the image should be opened on click.\n /\n shouldOpenImageOnClick?: boolean;\n /\n Whether the layout animation should be prevented. This is useful when the\n * `ListItem` is used in a list with a lot of items and the layout animation\n * is not desired.\n /\n shouldPreventLayoutAnimation?: boolean;\n /\n This will render the ListItem closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the image or icon should be displayed in a round shape. This should always be used for images of persons.\n /\n shouldShowRoundImageOrIcon?: boolean;\n /\n Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n /\n shouldShowSeparatorBelow?: boolean;\n /\n Whether a Tooltip should be displayed on hover if the title is cut.\n /\n shouldShowTooltipOnTitleOverflow?: boolean;\n /\n Subtitle of the `ListItem` displayed in the head below the title\n /\n subtitle?: ReactNode;\n /\n Title of the `ListItem` displayed in the head\n /\n title: ReactNode;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n Whether the ListItem Animation should be disabled.\n /\n shouldDisableAnimation?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Function to be executed if the size are changed.\n /\n onSizeChange?: (sizes: ListItemSize) => void;\n /\n Enables keyboard-only focus highlighting. Overrides the value from the List context.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Function that is executed when the text of the title input changes.\n * When this function is given, the title is displayed as an input.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n The props of the title input.\n */\n titleInputProps?: InputProps;\n};\n\nexport type ListItemRef = ListItemSize;\n\nconst ListItem = forwardRef<ListItemRef, ListItemProps>(\n (\n {\n backgroundColor,\n careOfLocationId,\n children,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isDefaultOpen,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onClose,\n onLongPress,\n onOpen,\n rightElements,\n shouldShowTooltipOnTitleOverflow = false,\n shouldForceBackground = false,\n shouldForceBottomLine = false,\n shouldForceHover = false,\n shouldHideBottomLine = false,\n shouldOpenImageOnClick = false,\n shouldHideImageOrIconBackground,\n shouldHideIndicator = false,\n shouldPreventLayoutAnimation = false,\n shouldRenderClosed = false,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n subtitle,\n title,\n onImageError,\n onSizeChange,\n onTitleInputChange,\n titleElement,\n titleInputProps,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp,\n },\n ref,\n ) => {\n const {\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,\n listGroupUuid,\n listItemUuids,\n registerListItemUuid,\n unregisterListItemUuid,\n activeListItemUuid,\n updateActiveListItemUuid,\n } = useContext(ListContext);\n\n const shouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlightingProp ?? shouldEnableKeyboardHighlightingContext;\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n const areaProvider = useContext(AreaContext);\n\n const isInitialRenderRef = useRef(true);\n\n const listItemRef = useRef<HTMLDivElement>(null);\n\n const isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n const [titleWidth, setTitleWidth] = useState(0);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isItemOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isItemOpen]);\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' \|\| isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const isInKeyboardNavigationGroup =\n shouldEnableKeyboardHighlighting &&\n typeof listGroupUuid === 'string' &&\n typeof updateActiveListItemUuid === 'function';\n\n useEffect(() => {\n if (\n shouldEnableKeyboardHighlighting &&\n typeof registerListItemUuid === 'function' &&\n typeof unregisterListItemUuid === 'function'\n ) {\n registerListItemUuid(uuid);\n\n return () => {\n unregisterListItemUuid(uuid);\n };\n }\n\n return undefined;\n }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n const tabIndex = useMemo(\n () => (shouldEnableKeyboardHighlighting ? 0 : -1),\n [shouldEnableKeyboardHighlighting],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const isCurrentListItemTarget = event.currentTarget === event.target;\n const currentListItemElement = event.currentTarget as HTMLDivElement;\n const targetElement = event.target as HTMLElement \| null;\n\n [\n () =>\n shouldEnableKeyboardHighlighting &&\n handleHorizontalArrowNavigation({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n }),\n () =>\n handleListItemTabNavigation({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid: uuid,\n listGroupUuid,\n updateActiveListItemUuid,\n }),\n () =>\n handleVerticalListGroupNavigation({\n event,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid: uuid,\n listGroupUuid,\n updateActiveListItemUuid,\n }),\n () =>\n handleListItemToggleKey({\n event,\n isCurrentListItemTarget,\n isExpandable,\n isItemOpen,\n shouldEnableKeyboardHighlighting,\n toggleItem: () =>\n handleHeadClick(\n event as unknown as React.MouseEvent<HTMLDivElement>,\n ),\n }),\n ].some((handleKey) => handleKey());\n },\n [\n handleHeadClick,\n isExpandable,\n isInKeyboardNavigationGroup,\n isItemOpen,\n listGroupUuid,\n listItemUuids,\n shouldEnableKeyboardHighlighting,\n updateActiveListItemUuid,\n uuid,\n ],\n );\n\n const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n uuid,\n listGroupUuid,\n isInKeyboardNavigationGroup,\n updateActiveListItemUuid,\n });\n\n useEffect(() => {\n if (\n isInKeyboardNavigationGroup &&\n activeListItemUuid == null &&\n typeof updateActiveListItemUuid === 'function' &&\n listItemUuids?.[0] === uuid\n ) {\n updateActiveListItemUuid(uuid);\n }\n }, [\n activeListItemUuid,\n isInKeyboardNavigationGroup,\n listItemUuids,\n updateActiveListItemUuid,\n uuid,\n ]);\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n initial={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n ref={listItemRef}\n data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\n layout={\n shouldPreventLayoutAnimation \|\| shouldDisableAnimation ? undefined : 'position'\n }\n $backgroundColor={backgroundColor}\n $isClickable={isClickable}\n $isInAccordion={\n typeof isParentAccordionWrapped === 'boolean' &&\n !areaProvider.shouldDisableListItemPadding\n }\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $isInDialog={isInDialog}\n $isSelected={isSelected}\n $shouldChangeColor={areaProvider.shouldChangeColor}\n $shouldForceBackground={shouldForceBackground}\n $shouldForceBottomLine={shouldForceBottomLine}\n $shouldHideBottomLine={shouldHideBottomLine}\n $shouldHideIndicator={shouldHideIndicator}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n data-should-show-keyboard-highlighting={\n shouldShowKeyboardHighlighting ? 'true' : undefined\n }\n tabIndex={tabIndex}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <Tooltip\n shouldUseFullWidth\n isDisabled={!shouldShowTooltipOnTitleOverflow \|\| !shouldEnableTooltip}\n item={\n <StyledListItemTooltip\n style={{ cursor: 'default' }}\n key={`list-item-tooltip-${uuid}`}\n >\n {title}\n </StyledListItemTooltip>\n }\n >\n <ListItemHead\n hoverItem={hoverItem}\n careOfLocationId={careOfLocationId}\n cornerElement={cornerElement}\n cornerImage={cornerImage}\n icons={icons}\n imageBackground={imageBackground}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n isTitleGreyed={isTitleGreyed}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n shouldForceHover={shouldForceHover}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n subtitle={subtitle}\n title={title}\n onTitleInputChange={onTitleInputChange}\n onTitleWidthChange={handleTitleWidthChange}\n titleInputProps={titleInputProps}\n titleElement={titleElement}\n setShouldEnableTooltip={setShouldEnableTooltip}\n shouldDisableAnimation={shouldDisableAnimation}\n onImageError={onImageError}\n />\n </Tooltip>\n <AnimatePresence initial={false}>\n {isExpandable && (isItemOpen \|\| shouldRenderClosed) && (\n <ListItemBody\n id={uuid}\n key={`listItemBody-${uuid}`}\n shouldHideBody={shouldRenderClosed && !isItemOpen}\n >\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledListItem>\n );\n },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ListItem.js","names":["AnimatePresence","motion","React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","useUuid","AccordionContext","AreaContextProvider","AreaContext","useColorScheme","ListContext","handleHorizontalArrowNavigation","handleListItemTabNavigation","handleListItemToggleKey","handleVerticalListGroupNavigation","ListItemBody","ListItemHead","StyledListItem","StyledListItemTooltip","Tooltip","useIsInsideDialog","useFocusRingPortal","useKeyboardFocusHighlighting","useListItemFocus","ListItem","backgroundColor","careOfLocationId","children","cornerImage","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldShowTooltipOnTitleOverflow","shouldForceBackground","shouldForceBottomLine","shouldForceHover","shouldHideBottomLine","shouldOpenImageOnClick","shouldHideImageOrIconBackground","shouldHideIndicator","shouldPreventLayoutAnimation","shouldRenderClosed","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","onImageError","onSizeChange","onTitleInputChange","titleElement","titleInputProps","shouldDisableAnimation","cornerElement","isSelected","shouldEnableKeyboardHighlighting","shouldEnableKeyboardHighlightingProp","ref","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","shouldEnableKeyboardHighlightingContext","listGroupUuid","listItemUuids","registerListItemUuid","unregisterListItemUuid","activeListItemUuid","updateActiveListItemUuid","colorScheme","theme","isInsideListContext","isParentAccordionWrapped","areaProvider","isInitialRenderRef","listItemRef","isInDialog","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","shouldEnableTooltip","setShouldEnableTooltip","titleWidth","setTitleWidth","titleMaxWidth","setTitleMaxWidth","current","handleHeadClick","event","shouldOnlyOpen","isClickable","handleTitleWidthChange","width","maxWidth","shouldShowKeyboardHighlighting","isEnabled","borderRadius","cardBorderRadius","isInKeyboardNavigationGroup","tabIndex","handleKeyDown","isCurrentListItemTarget","currentTarget","target","currentListItemElement","targetElement","currentUuid","toggleItem","some","handleKey","isFocusWithinListItem","handleFocus","handleBlur","shouldForceHoverItem","createElement","as","div","animate","height","opacity","className","exit","initial","key","layout","$backgroundColor","$isClickable","$isInAccordion","shouldDisableListItemPadding","$isOpen","$isWrapped","$isInDialog","$isSelected","$shouldChangeColor","shouldChangeColor","$shouldForceBackground","$shouldForceBottomLine","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","onKeyDown","onFocus","onBlur","shouldUseFullWidth","isDisabled","item","style","cursor","onTitleWidthChange","id","shouldHideBody","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence, motion } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n forwardRef,\n KeyboardEvent,\n MouseEventHandler,\n ReactNode,\n SyntheticEvent,\n TouchEventHandler,\n useCallback,\n useContext,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport type { InputProps } from '../../input/Input';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider, { AreaContext } from '../../area-provider/AreaContextProvider';\nimport { type Theme, useColorScheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ListContext } from '../List';\nimport {\n handleHorizontalArrowNavigation,\n handleListItemTabNavigation,\n handleListItemToggleKey,\n handleVerticalListGroupNavigation,\n} from '../List.utils';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledListItem, StyledListItemTooltip } from './ListItem.styles';\nimport Tooltip from '../../tooltip/Tooltip';\nimport { useIsInsideDialog } from '../../../hooks/element';\nimport { useFocusRingPortal } from '../../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../../hooks/useKeyboardFocusHighlighting';\nimport { useListItemFocus } from './useListItemFocus';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport interface ListItemSize {\n titleWidth: number;\n titleMaxWidth: number;\n}\n\nexport type ListItemProps = {\n /*\n The background color of the `ListItem`.\n /\n backgroundColor?: CSSProperties['backgroundColor'];\n /\n DEPRECATED: Use `cornerImage` instead.\n /\n careOfLocationId?: number;\n /\n The content of the `ListItem` body. When the `ListItem` has children,\n * it can be opened and also gets an icon as an indicator automatically.\n /\n children?: ReactNode;\n /\n The image that is displayed in the bottom right corner of the grouped image of list item.\n /\n cornerImage?: string;\n /\n Element that is displayed when hovering over the `ListItem` on the right\n * side. On mobile devices, this element is not displayed.\n /\n hoverItem?: ReactNode;\n /\n The FontAwesome or tobit icons to render like an image on the left side\n * of the header. Multiple icons are stacked. See the `Icon` component\n * documentation for more information.\n /\n icons?: string[];\n /\n The background of the image. This is only used if images are passed.\n /\n imageBackground?: CSSProperties['background'];\n /\n A list of image URLs that are displayed on the left side of the header.\n * If multiple URLs are passed, the image is assembled from the first three\n * image URLs as a puzzle.\n /\n images?: string[];\n /\n This can be used to automatically expand the `ListItem` during the first render.\n /\n isDefaultOpen?: boolean;\n /\n This overrides the internal opening state of the item and makes it controlled.\n /\n isOpen?: boolean;\n /\n Whether the ListItem locks disabled but has full functionality.\n /\n isTitleGreyed?: boolean;\n /\n Whether the item is selected.\n /\n isSelected?: boolean;\n /\n Elements that are displayed on the left side of the header. If multiple\n * elements are specified, they are displayed one aside the other.\n /\n leftElements?: ListItemElements;\n /\n Function to be executed when the header of the `ListItem` was clicked\n /\n onClick?: MouseEventHandler<HTMLDivElement>;\n /\n Function to be executed when the ListItem is closed.\n /\n onClose?: VoidFunction;\n /\n Function to be executed when the header of the `ListItem` is pressed for\n * 400 milliseconds.\n /\n onLongPress?: TouchEventHandler<HTMLDivElement>;\n /\n Function to be executed when the ListItem is opened.\n /\n onOpen?: VoidFunction;\n /\n Elements that are displayed on the right side of the header. If multiple\n * elements are specified, they are displayed one below the other.\n /\n rightElements?: IListItemRightElements;\n /\n This will force the background color of the ListItem to be used even if it is closed and not hovered.\n /\n shouldForceBackground?: boolean;\n /\n Whether the line should be forced, e.g., so that it is also displayed if the item is the last element in the list.\n /\n shouldForceBottomLine?: boolean;\n /\n Whether the hover item should be forced.\n /\n shouldForceHover?: boolean;\n /\n Whether the bottom line should be hidden.\n /\n shouldHideBottomLine?: boolean;\n /\n Whether the background and border of the shape on which the image or icon of the element is displayed should be\n * hidden.\n /\n shouldHideImageOrIconBackground?: boolean;\n /\n If the `ListItem` is expandable, the indicator is displayed on the left\n * side of the header. If this property is set to true, the indicator is\n * hidden.\n /\n shouldHideIndicator?: boolean;\n /\n Whether the image should be opened on click.\n /\n shouldOpenImageOnClick?: boolean;\n /\n Whether the layout animation should be prevented. This is useful when the\n * `ListItem` is used in a list with a lot of items and the layout animation\n * is not desired.\n /\n shouldPreventLayoutAnimation?: boolean;\n /\n This will render the ListItem closed on the first render.\n /\n shouldRenderClosed?: boolean;\n /\n Whether the image or icon should be displayed in a round shape. This should always be used for images of persons.\n /\n shouldShowRoundImageOrIcon?: boolean;\n /\n Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n /\n shouldShowSeparatorBelow?: boolean;\n /\n Whether a Tooltip should be displayed on hover if the title is cut.\n /\n shouldShowTooltipOnTitleOverflow?: boolean;\n /\n Subtitle of the `ListItem` displayed in the head below the title\n /\n subtitle?: ReactNode;\n /\n Title of the `ListItem` displayed in the head\n /\n title: ReactNode;\n /\n Additional elements to be displayed in the header next to the title.\n /\n titleElement?: ReactNode;\n /\n Whether the ListItem Animation should be disabled.\n /\n shouldDisableAnimation?: boolean;\n /\n Optional Element to display in the right corner of the image\n /\n cornerElement?: ReactNode;\n /\n Optional handler for image load errors.\n /\n onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;\n /\n Function to be executed if the size are changed.\n /\n onSizeChange?: (sizes: ListItemSize) => void;\n /\n Enables keyboard-only focus highlighting. Overrides the value from the List context.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Function that is executed when the text of the title input changes.\n * When this function is given, the title is displayed as an input.\n /\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /\n The props of the title input.\n */\n titleInputProps?: InputProps;\n};\n\nexport type ListItemRef = ListItemSize;\n\nconst ListItem = forwardRef<ListItemRef, ListItemProps>(\n (\n {\n backgroundColor,\n careOfLocationId,\n children,\n cornerImage,\n hoverItem,\n icons,\n imageBackground,\n images,\n isDefaultOpen,\n isOpen,\n isTitleGreyed,\n leftElements,\n onClick,\n onClose,\n onLongPress,\n onOpen,\n rightElements,\n shouldShowTooltipOnTitleOverflow = false,\n shouldForceBackground = false,\n shouldForceBottomLine = false,\n shouldForceHover = false,\n shouldHideBottomLine = false,\n shouldOpenImageOnClick = false,\n shouldHideImageOrIconBackground,\n shouldHideIndicator = false,\n shouldPreventLayoutAnimation = false,\n shouldRenderClosed = false,\n shouldShowRoundImageOrIcon,\n shouldShowSeparatorBelow = false,\n subtitle,\n title,\n onImageError,\n onSizeChange,\n onTitleInputChange,\n titleElement,\n titleInputProps,\n shouldDisableAnimation = false,\n cornerElement,\n isSelected = false,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingProp,\n },\n ref,\n ) => {\n const {\n isAnyItemExpandable,\n isWrapped,\n openItemUuid,\n updateOpenItemUuid,\n shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingContext,\n listGroupUuid,\n listItemUuids,\n registerListItemUuid,\n unregisterListItemUuid,\n activeListItemUuid,\n updateActiveListItemUuid,\n } = useContext(ListContext);\n const colorScheme = useColorScheme();\n const theme = useTheme() as Theme;\n const isInsideListContext = typeof listGroupUuid === 'string';\n\n const shouldEnableKeyboardHighlighting =\n shouldEnableKeyboardHighlightingProp ??\n (isInsideListContext\n ? shouldEnableKeyboardHighlightingContext\n : (colorScheme?.shouldEnableKeyboardHighlighting ?? false));\n\n const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n const areaProvider = useContext(AreaContext);\n\n const isInitialRenderRef = useRef(true);\n\n const listItemRef = useRef<HTMLDivElement>(null);\n\n const isInDialog = useIsInsideDialog<HTMLDivElement>(listItemRef);\n\n const uuid = useUuid();\n\n const isExpandable = children !== undefined;\n const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const [shouldEnableTooltip, setShouldEnableTooltip] = useState(false);\n const [titleWidth, setTitleWidth] = useState(0);\n const [titleMaxWidth, setTitleMaxWidth] = useState(0);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isItemOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isItemOpen]);\n\n const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (isExpandable) {\n updateOpenItemUuid(uuid);\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n },\n [isExpandable, onClick, updateOpenItemUuid, uuid],\n );\n\n useEffect(() => {\n if (isDefaultOpen) {\n updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n }\n }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n const isClickable = typeof onClick === 'function' \|\| isExpandable;\n\n useEffect(() => {\n if (typeof onSizeChange === 'function') {\n onSizeChange({\n titleWidth,\n titleMaxWidth,\n });\n }\n }, [onSizeChange, titleMaxWidth, titleWidth]);\n\n useImperativeHandle(\n ref,\n () => ({\n titleWidth,\n titleMaxWidth,\n }),\n [titleMaxWidth, titleWidth],\n );\n\n const handleTitleWidthChange = useCallback((width: number, maxWidth: number) => {\n setTitleWidth(width);\n setTitleMaxWidth(maxWidth);\n }, []);\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n useFocusRingPortal(listItemRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n borderRadius: `${theme.cardBorderRadius}px`,\n });\n\n const isInKeyboardNavigationGroup =\n shouldEnableKeyboardHighlighting &&\n typeof listGroupUuid === 'string' &&\n typeof updateActiveListItemUuid === 'function';\n\n useEffect(() => {\n if (\n shouldEnableKeyboardHighlighting &&\n typeof registerListItemUuid === 'function' &&\n typeof unregisterListItemUuid === 'function'\n ) {\n registerListItemUuid(uuid);\n\n return () => {\n unregisterListItemUuid(uuid);\n };\n }\n\n return undefined;\n }, [shouldEnableKeyboardHighlighting, registerListItemUuid, unregisterListItemUuid, uuid]);\n\n const tabIndex = useMemo(\n () => (shouldEnableKeyboardHighlighting ? 0 : -1),\n [shouldEnableKeyboardHighlighting],\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLDivElement>) => {\n const isCurrentListItemTarget = event.currentTarget === event.target;\n const currentListItemElement = event.currentTarget as HTMLDivElement;\n const targetElement = event.target as HTMLElement \| null;\n\n [\n () =>\n shouldEnableKeyboardHighlighting &&\n handleHorizontalArrowNavigation({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n }),\n () =>\n handleListItemTabNavigation({\n event,\n currentListItemElement,\n targetElement,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid: uuid,\n listGroupUuid,\n updateActiveListItemUuid,\n }),\n () =>\n handleVerticalListGroupNavigation({\n event,\n isCurrentListItemTarget,\n isInKeyboardNavigationGroup,\n listItemUuids,\n currentUuid: uuid,\n listGroupUuid,\n updateActiveListItemUuid,\n }),\n () =>\n handleListItemToggleKey({\n event,\n isCurrentListItemTarget,\n isExpandable,\n isItemOpen,\n shouldEnableKeyboardHighlighting,\n toggleItem: () =>\n handleHeadClick(\n event as unknown as React.MouseEvent<HTMLDivElement>,\n ),\n }),\n ].some((handleKey) => handleKey());\n },\n [\n handleHeadClick,\n isExpandable,\n isInKeyboardNavigationGroup,\n isItemOpen,\n listGroupUuid,\n listItemUuids,\n shouldEnableKeyboardHighlighting,\n updateActiveListItemUuid,\n uuid,\n ],\n );\n\n const { isFocusWithinListItem, handleFocus, handleBlur } = useListItemFocus({\n uuid,\n listGroupUuid,\n isInKeyboardNavigationGroup,\n updateActiveListItemUuid,\n });\n const shouldForceHoverItem = shouldForceHover \|\| isFocusWithinListItem;\n\n useEffect(() => {\n if (\n isInKeyboardNavigationGroup &&\n activeListItemUuid == null &&\n typeof updateActiveListItemUuid === 'function' &&\n listItemUuids?.[0] === uuid\n ) {\n updateActiveListItemUuid(uuid);\n }\n }, [\n activeListItemUuid,\n isInKeyboardNavigationGroup,\n listItemUuids,\n updateActiveListItemUuid,\n uuid,\n ]);\n\n return (\n <StyledListItem\n as={shouldDisableAnimation ? undefined : motion.div}\n animate={shouldDisableAnimation ? undefined : { height: 'auto', opacity: 1 }}\n className=\"beta-chayns-list-item\"\n exit={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n initial={shouldDisableAnimation ? undefined : { height: 0, opacity: 0 }}\n key={`list-item-${uuid}`}\n ref={listItemRef}\n data-uuid={`${listGroupUuid ?? ''}---${uuid}`}\n layout={\n shouldPreventLayoutAnimation \|\| shouldDisableAnimation ? undefined : 'position'\n }\n $backgroundColor={backgroundColor}\n $isClickable={isClickable}\n $isInAccordion={\n typeof isParentAccordionWrapped === 'boolean' &&\n !areaProvider.shouldDisableListItemPadding\n }\n $isOpen={isItemOpen}\n $isWrapped={isWrapped}\n $isInDialog={isInDialog}\n $isSelected={isSelected}\n $shouldChangeColor={areaProvider.shouldChangeColor}\n $shouldForceBackground={shouldForceBackground}\n $shouldForceBottomLine={shouldForceBottomLine}\n $shouldHideBottomLine={shouldHideBottomLine}\n $shouldHideIndicator={shouldHideIndicator}\n $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n data-should-show-keyboard-highlighting={\n shouldShowKeyboardHighlighting ? 'true' : undefined\n }\n tabIndex={tabIndex}\n onKeyDown={handleKeyDown}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <Tooltip\n shouldUseFullWidth\n isDisabled={!shouldShowTooltipOnTitleOverflow \|\| !shouldEnableTooltip}\n item={\n <StyledListItemTooltip\n style={{ cursor: 'default' }}\n key={`list-item-tooltip-${uuid}`}\n >\n {title}\n </StyledListItemTooltip>\n }\n >\n <ListItemHead\n hoverItem={hoverItem}\n careOfLocationId={careOfLocationId}\n cornerElement={cornerElement}\n cornerImage={cornerImage}\n icons={icons}\n imageBackground={imageBackground}\n images={images}\n isAnyItemExpandable={isAnyItemExpandable}\n isExpandable={isExpandable}\n isOpen={isItemOpen}\n isTitleGreyed={isTitleGreyed}\n leftElements={leftElements}\n onClick={isClickable ? handleHeadClick : undefined}\n onLongPress={onLongPress}\n shouldForceHover={shouldForceHoverItem}\n rightElements={rightElements}\n shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n shouldHideIndicator={shouldHideIndicator}\n shouldOpenImageOnClick={shouldOpenImageOnClick}\n shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n subtitle={subtitle}\n title={title}\n onTitleInputChange={onTitleInputChange}\n onTitleWidthChange={handleTitleWidthChange}\n titleInputProps={titleInputProps}\n titleElement={titleElement}\n setShouldEnableTooltip={setShouldEnableTooltip}\n shouldDisableAnimation={shouldDisableAnimation}\n onImageError={onImageError}\n />\n </Tooltip>\n <AnimatePresence initial={false}>\n {isExpandable && (isItemOpen \|\| shouldRenderClosed) && (\n <ListItemBody\n id={uuid}\n key={`listItemBody-${uuid}`}\n shouldHideBody={shouldRenderClosed && !isItemOpen}\n >\n <AreaContextProvider>{children}</AreaContextProvider>\n </ListItemBody>\n )}\n </AnimatePresence>\n </StyledListItem>\n );\n },\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.styles.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../../utils/keyboardFocusHighlighting.styles';
 export const StyledListItem = styled.div`
     overflow: hidden;
     transition: background-color 0.3s ease;
@@ -84,8 +83,16 @@ export const StyledListItem = styled.div`
         &[data-should-show-keyboard-highlighting='true']:focus-visible {
         transition: none;
-        ${keyboardFocusHighlightingRingCss};
+        outline: none;
         overflow: visible;
+        position: relative;
+        z-index: 5;
+    }
+    &[data-should-show-keyboard-highlighting='true']:focus-within {
+        overflow: visible;
+        position: relative;
+        z-index: 5;
     }
 `;
 export const StyledListItemTooltip = styled.div`