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

package/lib/esm/components/tag-input/TagInput.js

@@ -3,9 +3,10 @@ import { useTheme } from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import Badge from '../badge/Badge';
 import Icon from '../icon/Icon';
-import { StyledTagInput, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
+import { StyledTagInput, StyledTagInputTagFocusWrapper, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { useCursorRepaint } from '../../hooks/resize';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const TagInput = /*#__PURE__*/forwardRef(({
   leftElement,
   onAdd,
@@ -15,6 +16,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
   onRemove,
   placeholder,
   shouldAllowMultiple = true,
+  shouldEnableKeyboardHighlighting,
   shouldPreventEnter,
   tags
 }, ref) => {
@@ -28,13 +30,78 @@ const TagInput = /*#__PURE__*/forwardRef(({
     setCurrentValue('');
   };
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  const shouldShowTagHighlighting = shouldShowKeyboardHighlighting && typeof selectedId === 'string';
   useImperativeHandle(ref, () => ({
     blur: () => inputRef.current?.blur(),
     getUnsavedTagText: currentValue !== '' ? currentValue : undefined,
     resetValue: handleResetValue
   }), [currentValue]);
+  const handleRemoveTag = useCallback((id, currentTags) => {
+    const removedTagIndex = currentTags.findIndex(tag => tag.id === id);
+    if (typeof onRemove === 'function') {
+      onRemove(id);
+    }
+    if (removedTagIndex < 0) {
+      setSelectedId(undefined);
+      return;
+    }
+    setSelectedId(currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id);
+  }, [onRemove]);
   const handleKeyDown = useCallback(event => {
-    if (event.key === 'Enter' && !shouldPreventEnter) {
+    const visibleTags = shouldAllowMultiple ? tags ?? [] : (tags ?? []).slice(0, 1);
+    const selectedTagIndex = visibleTags.findIndex(tag => tag.id === selectedId);
+    const selectedTag = selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;
+    const isSpaceKey = event.key === ' ';
+    const isEnterKey = event.key === 'Enter';
+    const isDeleteKey = event.key === 'Delete';
+    if (currentValue === '' && visibleTags.length > 0) {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        if (!selectedId) {
+          setSelectedId(visibleTags[visibleTags.length - 1]?.id);
+          return;
+        }
+        if (selectedTagIndex <= 0) {
+          setSelectedId(undefined);
+          return;
+        }
+        setSelectedId(visibleTags[selectedTagIndex - 1]?.id);
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        if (!selectedId || selectedTagIndex < 0) {
+          return;
+        }
+        if (selectedTagIndex >= visibleTags.length - 1) {
+          setSelectedId(undefined);
+          return;
+        }
+        setSelectedId(visibleTags[selectedTagIndex + 1]?.id);
+        return;
+      }
+      if (event.key === 'Home') {
+        event.preventDefault();
+        setSelectedId(visibleTags[0]?.id);
+        return;
+      }
+      if (event.key === 'End') {
+        event.preventDefault();
+        setSelectedId(visibleTags[visibleTags.length - 1]?.id);
+        return;
+      }
+      if (isEnterKey || isSpaceKey || event.key === 'Backspace' || isDeleteKey) {
+        event.preventDefault();
+        if (!selectedTag) {
+          setSelectedId(visibleTags[visibleTags.length - 1]?.id);
+          return;
+        }
+        handleRemoveTag(selectedTag.id, visibleTags);
+        return;
+      }
+    }
+    if (isEnterKey && !shouldPreventEnter) {
       setCurrentValue(prevValue => {
         if (!prevValue) {
           return '';
@@ -61,28 +128,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
         return '';
       });
     }
-    if (event.key === 'Backspace' && currentValue === '') {
-      if (!selectedId) {
-        if (!tags) {
-          return;
-        }
-        const newSelectedId = tags[tags.length - 1]?.id;
-        setSelectedId(newSelectedId);
-        return;
-      }
-      if (!tags) {
-        return;
-      }
-      const removedId = tags[tags.length - 1]?.id;
-      if (!removedId) {
-        return;
-      }
-      if (typeof onRemove === 'function') {
-        onRemove(removedId);
-      }
-      setSelectedId(undefined);
-    }
-  }, [currentValue, onAdd, onRemove, selectedId, shouldAllowMultiple, shouldPreventEnter, tags]);
+  }, [currentValue, onAdd, handleRemoveTag, selectedId, shouldAllowMultiple, shouldPreventEnter, tags]);
   const handleChange = useCallback(event => {
     setCurrentValue(event.target.value);
     if (typeof onChange === 'function') {
@@ -93,10 +139,8 @@ const TagInput = /*#__PURE__*/forwardRef(({
     }
   }, [onChange]);
   const handleIconClick = useCallback(id => {
-    if (typeof onRemove === 'function') {
-      onRemove(id);
-    }
-  }, [onRemove]);
+    handleRemoveTag(id, shouldAllowMultiple ? tags ?? [] : (tags ?? []).slice(0, 1));
+  }, [handleRemoveTag, shouldAllowMultiple, tags]);
   const content = useMemo(() => {
     const items = [];
     if (!tags) {
@@ -107,9 +151,13 @@ const TagInput = /*#__PURE__*/forwardRef(({
       id,
       rightElement
     }) => {
-      items.push(/*#__PURE__*/React.createElement(Badge, {
-        key: `tag-input-${id}`,
-        backgroundColor: id === selectedId ? theme['206'] ?? undefined : undefined
+      const isSelected = id === selectedId;
+      items.push(/*#__PURE__*/React.createElement(StyledTagInputTagFocusWrapper, {
+        $isSelected: isSelected,
+        $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+        key: `tag-input-${id}`
+      }, /*#__PURE__*/React.createElement(Badge, {
+        backgroundColor: isSelected ? theme['206'] ?? undefined : undefined
       }, /*#__PURE__*/React.createElement(StyledTagInputTagWrapper, null, /*#__PURE__*/React.createElement(StyledTagInputTagWrapperText, null, text), rightElement, /*#__PURE__*/React.createElement(Icon, {
         icons: ['ts-wrong'],
         onClick: event => {
@@ -117,13 +165,15 @@ const TagInput = /*#__PURE__*/forwardRef(({
           event.stopPropagation();
           handleIconClick(id);
         }
-      }))));
+      })))));
     });
     return items;
-  }, [tags, shouldAllowMultiple, selectedId, theme, handleIconClick]);
+  }, [tags, shouldAllowMultiple, selectedId, shouldShowKeyboardHighlighting, theme, handleIconClick]);
   const shouldShowInput = useMemo(() => shouldAllowMultiple || (tags?.length ?? 0) < 1, [tags?.length, shouldAllowMultiple]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, {
-    $shouldChangeColor: shouldChangeColor
+    $shouldChangeColor: shouldChangeColor,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    $shouldShowTagHighlighting: shouldShowTagHighlighting
   }, leftElement && /*#__PURE__*/React.createElement(StyledTagInputIconWrapper, null, leftElement), content, shouldShowInput && /*#__PURE__*/React.createElement(StyledTagInputTagInput, {
     onBlur: onBlur,
     onChange: handleChange,
@@ -132,7 +182,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
     placeholder: tags && tags.length > 0 ? undefined : placeholder,
     ref: inputRef,
     value: currentValue
-  })), [content, currentValue, handleChange, handleKeyDown, leftElement, onBlur, onFocus, placeholder, shouldChangeColor, shouldShowInput, tags]);
+  })), [content, currentValue, handleChange, handleKeyDown, leftElement, onBlur, onFocus, placeholder, shouldChangeColor, shouldShowInput, shouldShowKeyboardHighlighting, shouldShowTagHighlighting, tags]);
 });
 export default TagInput;
 //# sourceMappingURL=TagInput.js.map

package/lib/esm/components/tag-input/TagInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldPreventEnter","tags","ref","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","theme","handleResetValue","shouldChangeColor","blur","current","getUnsavedTagText","undefined","resetValue","handleKeyDown","event","key","prevValue","length","newTag","id","text","onAddResult","Promise","then","shouldAddTag","newSelectedId","removedId","handleChange","target","value","handleIconClick","content","items","slice","forEach","rightElement","push","createElement","backgroundColor","icons","onClick","preventDefault","stopPropagation","shouldShowInput","$shouldChangeColor","onKeyDown"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport interface TagInputRef {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldPreventEnter,\n            tags,\n        },\n        ref,\n    ) => {\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        useCursorRepaint(inputRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent) => {\n                if (event.key === 'Enter' && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            const onAddResult = onAdd(newTag);\n\n                            if (typeof onAddResult === 'boolean' && !onAddResult) {\n                                return prevValue;\n                            }\n\n                            if (onAddResult instanceof Promise) {\n                                void onAddResult.then((shouldAddTag) => {\n                                    if (!shouldAddTag) {\n                                        return prevValue;\n                                    }\n\n                                    return '';\n                                });\n                            }\n                        }\n\n                        return '';\n                    });\n                }\n\n                if (event.key === 'Backspace' && currentValue === '') {\n                    if (!selectedId) {\n                        if (!tags) {\n                            return;\n                        }\n\n                        const newSelectedId = tags[tags.length - 1]?.id;\n\n                        setSelectedId(newSelectedId);\n\n                        return;\n                    }\n\n                    if (!tags) {\n                        return;\n                    }\n\n                    const removedId = tags[tags.length - 1]?.id;\n\n                    if (!removedId) {\n                        return;\n                    }\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(removedId);\n                    }\n\n                    setSelectedId(undefined);\n                }\n            },\n            [\n                currentValue,\n                onAdd,\n                onRemove,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n                tags,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n            },\n            [onRemove],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!tags) {\n                return items;\n            }\n\n            (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n                ({ text, id, rightElement }) => {\n                    items.push(\n                        <Badge\n                            key={`tag-input-${id}`}\n                            backgroundColor={\n                                id === selectedId\n                                    ? ((theme['206'] as string) ?? undefined)\n                                    : undefined\n                            }\n                        >\n                            <StyledTagInputTagWrapper>\n                                <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                                {rightElement}\n                                <Icon\n                                    icons={['ts-wrong']}\n                                    onClick={(event) => {\n                                        event.preventDefault();\n                                        event.stopPropagation();\n\n                                        handleIconClick(id);\n                                    }}\n                                />\n                            </StyledTagInputTagWrapper>\n                        </Badge>,\n                    );\n                },\n            );\n\n            return items;\n        }, [tags, shouldAllowMultiple, selectedId, theme, handleIconClick]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (tags?.length ?? 0) < 1,\n            [tags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput $shouldChangeColor={shouldChangeColor}>\n                    {leftElement && (\n                        <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputTagFocusWrapper","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","useKeyboardFocusHighlighting","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","tags","ref","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","theme","handleResetValue","shouldChangeColor","shouldShowKeyboardHighlighting","shouldShowTagHighlighting","blur","current","getUnsavedTagText","undefined","resetValue","handleRemoveTag","id","currentTags","removedTagIndex","findIndex","tag","handleKeyDown","event","visibleTags","slice","selectedTagIndex","selectedTag","isSpaceKey","key","isEnterKey","isDeleteKey","length","preventDefault","prevValue","newTag","text","onAddResult","Promise","then","shouldAddTag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","isSelected","push","createElement","$isSelected","$shouldShowKeyboardHighlighting","backgroundColor","icons","onClick","stopPropagation","shouldShowInput","$shouldChangeColor","$shouldShowTagHighlighting","onKeyDown"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputTagFocusWrapper,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => Promise<boolean> | boolean | void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport interface TagInputRef {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n}\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldEnableKeyboardHighlighting,\n            shouldPreventEnter,\n            tags,\n        },\n        ref,\n    ) => {\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        useCursorRepaint(inputRef);\n\n        const theme = useTheme() as Theme;\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting,\n        );\n\n        const shouldShowTagHighlighting =\n            shouldShowKeyboardHighlighting && typeof selectedId === 'string';\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleRemoveTag = useCallback(\n            (id: string, currentTags: Tag[]) => {\n                const removedTagIndex = currentTags.findIndex((tag) => tag.id === id);\n\n                if (typeof onRemove === 'function') {\n                    onRemove(id);\n                }\n\n                if (removedTagIndex < 0) {\n                    setSelectedId(undefined);\n                    return;\n                }\n\n                setSelectedId(\n                    currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id,\n                );\n            },\n            [onRemove],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLInputElement>) => {\n                const visibleTags = shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1);\n                const selectedTagIndex = visibleTags.findIndex((tag) => tag.id === selectedId);\n                const selectedTag =\n                    selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;\n                const isSpaceKey = event.key === ' ';\n                const isEnterKey = event.key === 'Enter';\n                const isDeleteKey = event.key === 'Delete';\n\n                if (currentValue === '' && visibleTags.length > 0) {\n                    if (event.key === 'ArrowLeft') {\n                        event.preventDefault();\n\n                        if (!selectedId) {\n                            setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                            return;\n                        }\n\n                        if (selectedTagIndex <= 0) {\n                            setSelectedId(undefined);\n                            return;\n                        }\n\n                        setSelectedId(visibleTags[selectedTagIndex - 1]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'ArrowRight') {\n                        event.preventDefault();\n\n                        if (!selectedId || selectedTagIndex < 0) {\n                            return;\n                        }\n\n                        if (selectedTagIndex >= visibleTags.length - 1) {\n                            setSelectedId(undefined);\n                            return;\n                        }\n\n                        setSelectedId(visibleTags[selectedTagIndex + 1]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'Home') {\n                        event.preventDefault();\n                        setSelectedId(visibleTags[0]?.id);\n                        return;\n                    }\n\n                    if (event.key === 'End') {\n                        event.preventDefault();\n                        setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                        return;\n                    }\n\n                    if (isEnterKey || isSpaceKey || event.key === 'Backspace' || isDeleteKey) {\n                        event.preventDefault();\n\n                        if (!selectedTag) {\n                            setSelectedId(visibleTags[visibleTags.length - 1]?.id);\n                            return;\n                        }\n\n                        handleRemoveTag(selectedTag.id, visibleTags);\n                        return;\n                    }\n                }\n\n                if (isEnterKey && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        if (!shouldAllowMultiple && (tags?.length ?? 0) > 0) return '';\n\n                        const newTag = { id: uuidv4(), text: prevValue };\n\n                        if (typeof onAdd === 'function') {\n                            const onAddResult = onAdd(newTag);\n\n                            if (typeof onAddResult === 'boolean' && !onAddResult) {\n                                return prevValue;\n                            }\n\n                            if (onAddResult instanceof Promise) {\n                                void onAddResult.then((shouldAddTag) => {\n                                    if (!shouldAddTag) {\n                                        return prevValue;\n                                    }\n\n                                    return '';\n                                });\n                            }\n                        }\n\n                        return '';\n                    });\n                }\n            },\n            [\n                currentValue,\n                onAdd,\n                handleRemoveTag,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n                tags,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                handleRemoveTag(id, shouldAllowMultiple ? (tags ?? []) : (tags ?? []).slice(0, 1));\n            },\n            [handleRemoveTag, shouldAllowMultiple, tags],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!tags) {\n                return items;\n            }\n\n            (shouldAllowMultiple ? tags : tags.slice(0, 1)).forEach(\n                ({ text, id, rightElement }) => {\n                    const isSelected = id === selectedId;\n\n                    items.push(\n                        <StyledTagInputTagFocusWrapper\n                            $isSelected={isSelected}\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            key={`tag-input-${id}`}\n                        >\n                            <Badge\n                                backgroundColor={\n                                    isSelected ? ((theme['206'] as string) ?? undefined) : undefined\n                                }\n                            >\n                                <StyledTagInputTagWrapper>\n                                    <StyledTagInputTagWrapperText>\n                                        {text}\n                                    </StyledTagInputTagWrapperText>\n                                    {rightElement}\n                                    <Icon\n                                        icons={['ts-wrong']}\n                                        onClick={(event) => {\n                                            event.preventDefault();\n                                            event.stopPropagation();\n\n                                            handleIconClick(id);\n                                        }}\n                                    />\n                                </StyledTagInputTagWrapper>\n                            </Badge>\n                        </StyledTagInputTagFocusWrapper>,\n                    );\n                },\n            );\n\n            return items;\n        }, [\n            tags,\n            shouldAllowMultiple,\n            selectedId,\n            shouldShowKeyboardHighlighting,\n            theme,\n            handleIconClick,\n        ]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (tags?.length ?? 0) < 1,\n            [tags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput\n                    $shouldChangeColor={shouldChangeColor}\n                    $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                    $shouldShowTagHighlighting={shouldShowTagHighlighting}\n                >\n                    {leftElement && (\n                        <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                shouldShowKeyboardHighlighting,\n                shouldShowTagHighlighting,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.styles.js

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledTagInput = styled.div`
     display: flex;
     flex-wrap: wrap;
@@ -11,12 +12,39 @@ export const StyledTagInput = styled.div`
   $shouldChangeColor
 }) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
     border: 1px solid rgba(160, 160, 160, 0.3);
+
+    ${({
+  $shouldShowKeyboardHighlighting,
+  $shouldShowTagHighlighting
+}) => $shouldShowKeyboardHighlighting && !$shouldShowTagHighlighting && css`
+            &:focus-within {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledTagInputTagWrapper = styled.div`
     display: flex;
     align-items: center;
     gap: 4px;
 `;
+export const StyledTagInputTagFocusWrapper = styled.div`
+    display: inline-flex;
+
+    ${({
+  $isSelected,
+  $shouldShowKeyboardHighlighting
+}) => $isSelected && $shouldShowKeyboardHighlighting && css`
+            ${StyledTagInput}:focus-within & > .beta-chayns-badge {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+                border-radius: 999px;
+                outline-offset: 0;
+                color: inherit;
+                outline: solid 2px color-mix(in srgb, white 70%, transparent);
+            }
+        `}
+`;
 export const StyledTagInputTagWrapperText = styled.p`
     margin: 0;
     flex-grow: 1;

package/lib/esm/components/tag-input/TagInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.styles.js","names":["styled","StyledTagInput","div","theme","$shouldChangeColor","colorMode","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledTagInputProps = WithTheme<{ $shouldChangeColor: boolean }>;\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n    display: flex;\n    flex-wrap: wrap;\n    min-height: 42px;\n    padding: 5px;\n    align-items: center;\n    gap: 6px;\n    background-color: ${({ theme, $shouldChangeColor }: StyledTagInputProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 4px;\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n    margin: 0;\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n    border: none;\n    height: 24px;\n    flex-grow: 1;\n    background-color: transparent;\n    color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n\nexport const StyledTagInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 5px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,cAAc,GAAGD,MAAM,CAACE,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KACnED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGN,MAAM,CAACE,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,4BAA4B,GAAGP,MAAM,CAACQ,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGT,MAAM,CAACU,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEP;AAAmC,CAAC,KAAKA,KAAK,CAACQ,IAAI;AACnE,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGZ,MAAM,CAACE,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TagInput.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledTagInput","div","theme","$shouldChangeColor","colorMode","$shouldShowKeyboardHighlighting","$shouldShowTagHighlighting","StyledTagInputTagWrapper","StyledTagInputTagFocusWrapper","$isSelected","StyledTagInputTagWrapperText","p","StyledTagInputTagInput","input","text","StyledTagInputIconWrapper"],"sources":["../../../../src/components/tag-input/TagInput.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledTagInputProps = WithTheme<{\n    $shouldChangeColor: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n    $shouldShowTagHighlighting: boolean;\n}>;\n\ntype StyledTagInputTagFocusWrapperProps = {\n    $isSelected: boolean;\n    $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTagInput = styled.div<StyledTagInputProps>`\n    display: flex;\n    flex-wrap: wrap;\n    min-height: 42px;\n    padding: 5px;\n    align-items: center;\n    gap: 6px;\n    background-color: ${({ theme, $shouldChangeColor }: StyledTagInputProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n\n    ${({ $shouldShowKeyboardHighlighting, $shouldShowTagHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        !$shouldShowTagHighlighting &&\n        css`\n            &:focus-within {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\nexport const StyledTagInputTagWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 4px;\n`;\n\nexport const StyledTagInputTagFocusWrapper = styled.div<StyledTagInputTagFocusWrapperProps>`\n    display: inline-flex;\n\n    ${({ $isSelected, $shouldShowKeyboardHighlighting }) =>\n        $isSelected &&\n        $shouldShowKeyboardHighlighting &&\n        css`\n            ${StyledTagInput}:focus-within & > .beta-chayns-badge {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n                border-radius: 999px;\n                outline-offset: 0;\n                color: inherit;\n                outline: solid 2px color-mix(in srgb, white 70%, transparent);\n            }\n        `}\n`;\n\nexport const StyledTagInputTagWrapperText = styled.p`\n    margin: 0;\n    flex-grow: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: 15px;\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<unknown>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n    border: none;\n    height: 24px;\n    flex-grow: 1;\n    background-color: transparent;\n    color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n`;\n\nexport const StyledTagInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 5px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAa/F,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAwC,CAAC,KACnED,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AACzF;AACA;AACA,MAAM,CAAC;EAAEG,+BAA+B;EAAEC;AAA2B,CAAC,KAC9DD,+BAA+B,IAC/B,CAACC,0BAA0B,IAC3BR,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMQ,wBAAwB,GAAGV,MAAM,CAACI,GAAG;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGX,MAAM,CAACI,GAAuC;AAC3F;AACA;AACA,MAAM,CAAC;EAAEQ,WAAW;EAAEJ;AAAgC,CAAC,KAC/CI,WAAW,IACXJ,+BAA+B,IAC/BP,GAAG;AACX,cAAcE,cAAc;AAC5B;AACA,kBAAkBD,gCAAgC;AAClD;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,4BAA4B,GAAGb,MAAM,CAACc,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGf,MAAM,CAACgB,KAAkC;AAC/E;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEX;AAAmC,CAAC,KAAKA,KAAK,CAACY,IAAI;AACnE,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGlB,MAAM,CAACI,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.js

@@ -2,12 +2,13 @@ import { c as _c } from "react-compiler-runtime";
 import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { StyledInputRightElement } from '../input/Input.styles';
-import { StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
+import { StyledRightElementWrapper, StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
 import { useCursorRepaint } from '../../hooks/resize';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
   "use memo";
 
-  const $ = _c(28);
+  const $ = _c(29);
   const {
     isDisabled,
     isInvalid,
@@ -20,7 +21,8 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
     onBlur,
     maxHeight: t1,
     minHeight: t2,
-    colors
+    colors,
+    shouldEnableKeyboardHighlighting
   } = t0;
   const maxHeight = t1 === undefined ? "120px" : t1;
   const minHeight = t2 === undefined ? "41px" : t2;
@@ -30,6 +32,7 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
   useCursorRepaint(textareaRef);
   const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;
   const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   let t3;
   if ($[0] !== maxHeight) {
     t3 = () => {
@@ -88,7 +91,7 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
   }
   const labelPosition = t7;
   let t8;
-  if ($[9] !== colors?.backgroundColor || $[10] !== colors?.borderColor || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== value) {
+  if ($[9] !== colors?.backgroundColor || $[10] !== colors?.borderColor || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== shouldShowKeyboardHighlighting || $[27] !== value) {
     colors?.backgroundColor;
     colors?.borderColor;
     t8 = (() => /*#__PURE__*/React.createElement(StyledTextArea, {
@@ -97,7 +100,8 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
       $isInvalid: isInvalid,
       $shouldChangeColor: shouldChangeColor,
       $backgroundColor: colors?.backgroundColor,
-      $borderColor: colors?.borderColor
+      $borderColor: colors?.borderColor,
+      "data-should-show-keyboard-highlighting": shouldShowKeyboardHighlighting
     }, /*#__PURE__*/React.createElement(StyledTextAreaContent, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
       className: "chayns-scrollbar",
       disabled: isDisabled,
@@ -124,7 +128,11 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
       }
     }, /*#__PURE__*/React.createElement(StyledTextAreaLabel, {
       $isInvalid: isInvalid
-    }, placeholder))), rightElement && shouldShowBorder && rightElement), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, null, rightElement)))();
+    }, placeholder))), rightElement && shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, {
+      $isInline: true
+    }, /*#__PURE__*/React.createElement(StyledRightElementWrapper, null, rightElement))), rightElement && !shouldShowBorder && /*#__PURE__*/React.createElement(StyledInputRightElement, {
+      $isInline: true
+    }, /*#__PURE__*/React.createElement(StyledRightElementWrapper, null, rightElement))))();
     $[9] = colors?.backgroundColor;
     $[10] = colors?.borderColor;
     $[11] = hasValue;
@@ -142,10 +150,11 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
     $[23] = rightElement;
     $[24] = shouldChangeColor;
     $[25] = shouldShowBorder;
-    $[26] = value;
-    $[27] = t8;
+    $[26] = shouldShowKeyboardHighlighting;
+    $[27] = value;
+    $[28] = t8;
   } else {
-    t8 = $[27];
+    t8 = $[28];
   }
   return t8;
 });

package/lib/esm/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","TextArea","t0","ref","$","_c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","undefined","isOverflowing","setIsOverflowing","areaProvider","textareaRef","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","t5","t6","length","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","$backgroundColor","$borderColor","className","rows","animate","fontSize","initial","transition","type","duration","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\n\ntype TextAreaColors = {\n    backgroundColor: CSSProperties['backgroundColor'];\n    borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n    /**\n     * Provide custom colors to the TextArea Component\n     */\n    colors?: TextAreaColors;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n            colors,\n        },\n        ref,\n    ) => {\n        'use memo';\n\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        const hasValue = value !== undefined && value.length > 0;\n\n        const labelPosition = useMemo(\n            () =>\n                hasValue\n                    ? {\n                          bottom: '2px',\n                          right: '2px',\n                      }\n                    : {\n                          top: '12px',\n                          left: '10px',\n                      },\n            [hasValue],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                        $backgroundColor={colors?.backgroundColor}\n                        $borderColor={colors?.borderColor}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                className=\"chayns-scrollbar\"\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            <StyledTextAreaLabelWrapper\n                                animate={{ fontSize: hasValue ? '9px' : undefined }}\n                                initial={false}\n                                style={labelPosition}\n                                transition={{ type: 'tween', duration: 0.1 }}\n                            >\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && rightElement}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                isDisabled,\n                isInvalid,\n                shouldChangeColor,\n                colors?.backgroundColor,\n                colors?.borderColor,\n                value,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                maxHeight,\n                minHeight,\n                isOverflowing,\n                hasValue,\n                labelPosition,\n                placeholder,\n                rightElement,\n                shouldShowBorder,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextArea.js","names":["React","forwardRef","useCallback","useContext","useEffect","useImperativeHandle","useMemo","useRef","useState","AreaContext","StyledInputRightElement","StyledRightElementWrapper","StyledTextArea","StyledTextAreaContent","StyledTextAreaContentWrapper","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","useCursorRepaint","useKeyboardFocusHighlighting","TextArea","t0","ref","$","_c","isDisabled","isInvalid","placeholder","value","onChange","onFocus","onKeyDown","rightElement","onBlur","maxHeight","t1","minHeight","t2","colors","shouldEnableKeyboardHighlighting","undefined","isOverflowing","setIsOverflowing","areaProvider","textareaRef","shouldShowBorder","props","style","backgroundColor","shouldChangeColor","shouldShowKeyboardHighlighting","t3","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t4","Symbol","for","t5","t6","length","hasValue","t7","bottom","right","top","left","labelPosition","t8","borderColor","createElement","$backgroundColor","$borderColor","className","rows","animate","fontSize","initial","transition","type","duration","$isInline","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEventHandler,\n    ReactElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledInputRightElement } from '../input/Input.styles';\nimport {\n    StyledRightElementWrapper,\n    StyledTextArea,\n    StyledTextAreaContent,\n    StyledTextAreaContentWrapper,\n    StyledTextAreaInput,\n    StyledTextAreaLabel,\n    StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\nimport { useCursorRepaint } from '../../hooks/resize';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\ntype TextAreaColors = {\n    backgroundColor: CSSProperties['backgroundColor'];\n    borderColor: CSSProperties['borderColor'];\n};\n\nexport type TextAreaProps = {\n    /**\n     * Disables the text area so that it cannot be changed.\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the text area is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n    /**\n     * Provide custom colors to the TextArea Component\n     */\n    colors?: TextAreaColors;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (\n        {\n            isDisabled,\n            isInvalid,\n            placeholder,\n            value,\n            onChange,\n            onFocus,\n            onKeyDown,\n            rightElement,\n            onBlur,\n            maxHeight = '120px',\n            minHeight = '41px',\n            colors,\n            shouldEnableKeyboardHighlighting,\n        },\n        ref,\n    ) => {\n        'use memo';\n\n        const [isOverflowing, setIsOverflowing] = useState(false);\n\n        const areaProvider = useContext(AreaContext);\n\n        const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n        useCursorRepaint(textareaRef);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n            shouldEnableKeyboardHighlighting && !isDisabled,\n        );\n\n        const adjustTextareaHeight = useCallback(() => {\n            if (textareaRef.current) {\n                textareaRef.current.style.height = 'auto';\n                textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n                setIsOverflowing(\n                    textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10),\n                );\n            }\n        }, [maxHeight]);\n\n        useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);\n\n        /**\n         * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n         * To maintain the functionality while clearing the input, the length need to be greater than -1.\n         */\n        useEffect(() => {\n            if (typeof value === 'string' && value.length > -1) {\n                adjustTextareaHeight();\n            }\n        }, [adjustTextareaHeight, value]);\n\n        const hasValue = value !== undefined && value.length > 0;\n\n        const labelPosition = useMemo(\n            () =>\n                hasValue\n                    ? {\n                          bottom: '2px',\n                          right: '2px',\n                      }\n                    : {\n                          top: '12px',\n                          left: '10px',\n                      },\n            [hasValue],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTextArea $isDisabled={isDisabled}>\n                    <StyledTextAreaContentWrapper\n                        $isInvalid={isInvalid}\n                        $shouldChangeColor={shouldChangeColor}\n                        $backgroundColor={colors?.backgroundColor}\n                        $borderColor={colors?.borderColor}\n                        data-should-show-keyboard-highlighting={shouldShowKeyboardHighlighting}\n                    >\n                        <StyledTextAreaContent>\n                            <StyledTextAreaInput\n                                className=\"chayns-scrollbar\"\n                                disabled={isDisabled}\n                                $isInvalid={isInvalid}\n                                ref={textareaRef}\n                                value={value}\n                                onBlur={onBlur}\n                                onChange={onChange}\n                                onFocus={onFocus}\n                                onKeyDown={onKeyDown}\n                                $maxHeight={maxHeight}\n                                $minHeight={minHeight}\n                                $isOverflowing={isOverflowing}\n                                rows={1}\n                            />\n                            <StyledTextAreaLabelWrapper\n                                animate={{ fontSize: hasValue ? '9px' : undefined }}\n                                initial={false}\n                                style={labelPosition}\n                                transition={{ type: 'tween', duration: 0.1 }}\n                            >\n                                <StyledTextAreaLabel $isInvalid={isInvalid}>\n                                    {placeholder}\n                                </StyledTextAreaLabel>\n                            </StyledTextAreaLabelWrapper>\n                        </StyledTextAreaContent>\n                        {rightElement && shouldShowBorder && (\n                            <StyledInputRightElement $isInline>\n                                <StyledRightElementWrapper>\n                                    {rightElement}\n                                </StyledRightElementWrapper>\n                            </StyledInputRightElement>\n                        )}\n                    </StyledTextAreaContentWrapper>\n                    {rightElement && !shouldShowBorder && (\n                        <StyledInputRightElement $isInline>\n                            <StyledRightElementWrapper>{rightElement}</StyledRightElementWrapper>\n                        </StyledInputRightElement>\n                    )}\n                </StyledTextArea>\n            ),\n            [\n                isDisabled,\n                isInvalid,\n                shouldChangeColor,\n                shouldShowKeyboardHighlighting,\n                colors?.backgroundColor,\n                colors?.borderColor,\n                value,\n                onBlur,\n                onChange,\n                onFocus,\n                onKeyDown,\n                maxHeight,\n                minHeight,\n                isOverflowing,\n                hasValue,\n                labelPosition,\n                placeholder,\n                rightElement,\n                shouldShowBorder,\n            ],\n        );\n    },\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/text-area/TextArea.styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { motion } from 'motion/react';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledTextArea = styled.div`
     display: flex;
     flex: 1 1 auto;
@@ -24,6 +25,13 @@ export const StyledTextAreaContentWrapper = styled.div`
 }) => $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};
     width: 100%;
     display: flex;
+
+    &[data-should-show-keyboard-highlighting='true'] {
+        &:focus-within {
+            transition: none;
+            ${keyboardFocusHighlightingRingCss}
+        }
+    }
 `;
 export const StyledTextAreaContent = styled.div`
     position: relative;
@@ -75,4 +83,10 @@ export const StyledTextAreaLabel = styled.label`
     cursor: text;
     text-overflow: ellipsis;
 `;
+export const StyledRightElementWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+`;
 //# sourceMappingURL=TextArea.styles.js.map

package/lib/esm/components/text-area/TextArea.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styles.js","names":["styled","motion","StyledTextArea","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\nimport { motion } from 'motion/react';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n`;\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderColor?: CSSProperties['borderColor'];\n    $isInvalid: TextAreaProps['isInvalid'];\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n    background-color: ${({ theme, $shouldChangeColor, $backgroundColor }) =>\n        $backgroundColor ??\n        (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid, $borderColor }) =>\n            $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};\n    width: 100%;\n    display: flex;\n`;\n\nexport const StyledTextAreaContent = styled.div`\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $isOverflowing: boolean;\n    $maxHeight: CSSProperties['maxHeight'];\n    $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    background: none;\n    border: none;\n    resize: none;\n    overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n    max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n        typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n    min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n        typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n    width: 100%;\n    padding: 8px 10px;\n    cursor: text;\n`;\n\nexport const StyledTextAreaLabelWrapper = 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: calc(100% - 20px);\n    cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n    line-height: 1.3;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: text;\n    text-overflow: ellipsis;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,SAASC,MAAM,QAAQ,cAAc;AAIrC,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAQD,OAAO,MAAMC,4BAA4B,GAAGL,MAAM,CAACG,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC,kBAAkB;EAAEC;AAAiB,CAAC,KAChEA,gBAAgB,KACfF,KAAK,CAACG,SAAS,KAAK,SAAS,IAAIF,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC,CAAC;AAC3F;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEI,UAAU;EAAEC;AAAa,CAAC,KAClCA,YAAY,KAAKD,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,0BAA0B,CAAC;AACnF;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGb,MAAM,CAACG,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMW,mBAAmB,GAAGd,MAAM,CAACe,QAAkC;AAC5E,aAAa,CAAC;EAAET,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACU,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGpB,MAAM,CAACC,MAAM,CAACoB,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGtB,MAAM,CAACqB,KAA+B;AACzE,aAAa,CAAC;EAAEf,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,QAAQN,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TextArea.styles.js","names":["styled","motion","keyboardFocusHighlightingRingCss","StyledTextArea","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","StyledRightElementWrapper"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\nimport { motion } from 'motion/react';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n`;\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderColor?: CSSProperties['borderColor'];\n    $isInvalid: TextAreaProps['isInvalid'];\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n    background-color: ${({ theme, $shouldChangeColor, $backgroundColor }) =>\n        $backgroundColor ??\n        (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid, $borderColor }) =>\n            $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};\n    width: 100%;\n    display: flex;\n\n    &[data-should-show-keyboard-highlighting='true'] {\n        &:focus-within {\n            transition: none;\n            ${keyboardFocusHighlightingRingCss}\n        }\n    }\n`;\n\nexport const StyledTextAreaContent = styled.div`\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $isOverflowing: boolean;\n    $maxHeight: CSSProperties['maxHeight'];\n    $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    background: none;\n    border: none;\n    resize: none;\n    overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n    max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n        typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n    min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n        typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n    width: 100%;\n    padding: 8px 10px;\n    cursor: text;\n`;\n\nexport const StyledTextAreaLabelWrapper = 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: calc(100% - 20px);\n    cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n    line-height: 1.3;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: text;\n    text-overflow: ellipsis;\n`;\n\nexport const StyledRightElementWrapper = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,SAASC,MAAM,QAAQ,cAAc;AACrC,SAASC,gCAAgC,QAAQ,8CAA8C;AAI/F,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAQD,OAAO,MAAMC,4BAA4B,GAAGN,MAAM,CAACI,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC,kBAAkB;EAAEC;AAAiB,CAAC,KAChEA,gBAAgB,KACfF,KAAK,CAACG,SAAS,KAAK,SAAS,IAAIF,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC,CAAC;AAC3F;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEI,UAAU;EAAEC;AAAa,CAAC,KAClCA,YAAY,KAAKD,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,0BAA0B,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA,cAAcX,gCAAgC;AAC9C;AACA;AACA,CAAC;AAED,OAAO,MAAMY,qBAAqB,GAAGd,MAAM,CAACI,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMW,mBAAmB,GAAGf,MAAM,CAACgB,QAAkC;AAC5E,aAAa,CAAC;EAAET,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACU,IAAI;AAC7C;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,QAAQ,GAAG,QAAS;AAChF,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE,kBAAkB,CAAC;EAAEC;AAAqC,CAAC,KACnD,OAAOA,UAAU,KAAK,QAAQ,GAAG,GAAGA,UAAU,IAAI,GAAGA,UAAU;AACvE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGrB,MAAM,CAACC,MAAM,CAACqB,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGvB,MAAM,CAACsB,KAA+B;AACzE,aAAa,CAAC;EAAEf,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,QAAQN,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,yBAAyB,GAAGxB,MAAM,CAACI,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/truncation/Truncation.js

@@ -2,9 +2,10 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { ClampPosition } from '../../types/truncation';
 import { debounce } from '../../utils/debounce';
 import { truncateElement } from '../../utils/truncation';
-import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampWrapper, StyledTruncationPseudoContent } from './Truncation.styles';
+import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampFocusWrapper, StyledTruncationClampWrapper, StyledTruncationPseudoContent } from './Truncation.styles';
 import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';
 import textStrings from '../../constants/textStrings';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const Truncation = ({
   collapsedHeight = 150,
@@ -13,8 +14,10 @@ const Truncation = ({
   moreLabel,
   lessLabel,
   onChange,
-  children
+  children,
+  shouldEnableKeyboardHighlighting
 }) => {
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
   const [internalIsOpen, setInternalIsOpen] = useState(false);
   const [showClamp, setShowClamp] = useState(true);
   const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);
@@ -52,6 +55,12 @@ const Truncation = ({
       return !current;
     });
   }, [onChange]);
+  const handleClampKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  }, []);
   useEffect(() => {
     if (children) {
       setShouldSkipChangeCheck(true);
@@ -178,9 +187,14 @@ const Truncation = ({
     $position: clampPosition
   }, /*#__PURE__*/React.createElement(TextstringProvider, {
     libraryName: "@chayns-components-core"
+  }, /*#__PURE__*/React.createElement(StyledTruncationClampFocusWrapper, {
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
   }, /*#__PURE__*/React.createElement(StyledTruncationClamp, {
-    onClick: handleClampClick
-  }, internalIsOpen ? internalLessLabel : internalMoreLabel)))), [children, clampPosition, handleAnimationEnd, handleClampClick, hasSizeChanged, internalIsOpen, lessLabel, moreLabel, newCollapsedHeight, originalHeight, showClamp]);
+    onClick: handleClampClick,
+    onKeyDown: handleClampKeyDown,
+    role: "button",
+    tabIndex: 0
+  }, internalIsOpen ? internalLessLabel : internalMoreLabel))))), [children, clampPosition, handleAnimationEnd, handleClampClick, handleClampKeyDown, hasSizeChanged, internalIsOpen, lessLabel, moreLabel, newCollapsedHeight, originalHeight, shouldShowKeyboardHighlighting, showClamp]);
 };
 export default Truncation;
 //# sourceMappingURL=Truncation.js.map