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/tag-input/TagInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","BadgeSize","InputSize","Icon","StyledTagInput","StyledTagInputTagFocusWrapper","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","useKeyboardFocusHighlighting","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","size","Medium","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","Small","SMALL","DEFAULT","$size","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 { BadgeSize } from '../badge/Badge.types';\nimport { InputSize } from '../input/Input';\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 The size of the input field.\n */\n size?: InputSize;\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 size = InputSize.Medium,\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 size={\n size === InputSize.Small ? BadgeSize.SMALL : BadgeSize.DEFAULT\n }\n >\n <StyledTagInputTagWrapper $size={size}>\n <StyledTagInputTagWrapperText $size={size}>\n {text}\n </StyledTagInputTagWrapperText>\n {rightElement}\n <Icon\n icons={['ts-wrong']}\n size={size === InputSize.Small ? 14 : 16}\n shouldEnableKeyboardHighlighting={false}\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 size,\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 $size={size}\n >\n {leftElement && (\n <StyledTagInputIconWrapper $size={size}>\n {leftElement}\n </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 $size={size}\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 size,\n tags,\n ],\n );\n },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","BadgeSize","InputSize","Icon","StyledTagInput","StyledTagInputTagFocusWrapper","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","useFocusRingPortal","useKeyboardFocusHighlighting","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldEnableKeyboardHighlighting","shouldPreventEnter","size","Medium","tags","ref","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","tagInputRef","theme","handleResetValue","shouldChangeColor","shouldShowKeyboardHighlighting","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","Small","SMALL","DEFAULT","$size","icons","onClick","stopPropagation","shouldShowInput","isEnabled","overlayRef","shouldShowTagHighlighting","$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 { BadgeSize } from '../badge/Badge.types';\nimport { InputSize } from '../input/Input';\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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 The size of the input field.\n */\n size?: InputSize;\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 size = InputSize.Medium,\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 const tagInputRef = useRef<HTMLDivElement \| 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 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 size={\n size === InputSize.Small ? BadgeSize.SMALL : BadgeSize.DEFAULT\n }\n >\n <StyledTagInputTagWrapper $size={size}>\n <StyledTagInputTagWrapperText $size={size}>\n {text}\n </StyledTagInputTagWrapperText>\n {rightElement}\n <Icon\n icons={['ts-wrong']}\n size={size === InputSize.Small ? 14 : 16}\n shouldEnableKeyboardHighlighting={false}\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 size,\n ]);\n\n const shouldShowInput = useMemo(\n () => shouldAllowMultiple \|\| (tags?.length ?? 0) < 1,\n [tags?.length, shouldAllowMultiple],\n );\n\n useFocusRingPortal(inputRef, {\n isEnabled: shouldShowKeyboardHighlighting && shouldShowInput,\n overlayRef: tagInputRef,\n });\n\n const shouldShowTagHighlighting =\n shouldShowKeyboardHighlighting && typeof selectedId === 'string';\n\n return useMemo(\n () => (\n <StyledTagInput\n ref={tagInputRef}\n $shouldChangeColor={shouldChangeColor}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n $shouldShowTagHighlighting={shouldShowTagHighlighting}\n $size={size}\n >\n {leftElement && (\n <StyledTagInputIconWrapper $size={size}>\n {leftElement}\n </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 $size={size}\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 size,\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 CHANGED Viewed

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledTagInput = styled.div`
     display: flex;
     flex-wrap: wrap;
@@ -25,7 +24,6 @@ export const StyledTagInput = styled.div`
 }) => $shouldShowKeyboardHighlighting && !$shouldShowTagHighlighting && css`
             &:focus-within {
                 transition: none;
-                ${keyboardFocusHighlightingRingCss}
             }
         `}
 `;
@@ -45,7 +43,7 @@ export const StyledTagInputTagFocusWrapper = styled.div`
 }) => $isSelected && $shouldShowKeyboardHighlighting && css`
             ${StyledTagInput}:focus-within & > .beta-chayns-badge {
                 transition: none;
-                ${keyboardFocusHighlightingRingCss}
                 border-radius: 999px;
                 outline-offset: 0;
             }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.styles.js","names":["styled","css","~~keyboardFocusHighlightingRingCss","~~StyledTagInput","div","$size","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';\nimport~~ type { InputSize } from '../input/Input';\n\ntype StyledTagInputProps = WithTheme<{\n $shouldChangeColor: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n $shouldShowTagHighlighting: boolean;\n $size: InputSize;\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: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n padding: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n align-items: center;\n gap: ${({ $size }) => ($size === 'medium' ? '6px' : '4px')};\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\ntype StyledTagInputTagWrapperProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapper = styled.div<StyledTagInputTagWrapperProps>`\n display: flex;\n align-items: center;\n gap: ${({ $size }) => ($size === 'medium' ? '4px' : '2px')};\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 }\n `}\n`;\n\ntype StyledTagInputTagWrapperTextProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapperText = styled.p<StyledTagInputTagWrapperTextProps>`\n margin: 0;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<{\n $size: InputSize;\n}>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n border: none;\n height: ${({ $size }) => ($size === 'medium' ? '24px' : '20px')};\n flex-grow: 1;\n background-color: transparent;\n color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputIconWrapperProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputIconWrapper = styled.div<StyledTagInputIconWrapperProps>`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAE~~/C,~~SAASC,gCAAgC,QAAQ,8CAA8C;AAe/F,~~OAAO,MAAMC,cAAc,~~GAAGH~~,MAAM,~~CAACI~~,GAAwB;AAC7D;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACvE,eAAe,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAClE;AACA,WAAW,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAC9D,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,~~IAC3BT~~,GAAG;AACX;AACA;AACA~~,kBAAkBC,gCAAgC~~;~~AAClD;~~AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMS,wBAAwB,~~GAAGX~~,MAAM,~~CAACI~~,GAAkC;AACjF;AACA;AACA,WAAW,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAC9D,CAAC;AAED,OAAO,MAAMO,6BAA6B,~~GAAGZ~~,MAAM,~~CAACI~~,GAAuC;AAC3F;AACA;AACA,MAAM,CAAC;EAAES,WAAW;EAAEJ;AAAgC,CAAC,KAC/CI,WAAW,IACXJ,+BAA+B,IAC/BR,GAAG;AACX,~~cAAcE~~,cAAc;AAC5B;AACA~~,kBAAkBD,gCAAgC~~;~~AAClD~~;AACA;AACA;AACA,SAAS;AACT,CAAC;AAMD,OAAO,~~MAAMY~~,4BAA4B,~~GAAGd~~,MAAM,~~CAACe~~,CAAoC;AACvF;AACA;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEV;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACtE,CAAC;AAMD,OAAO,MAAMW,sBAAsB,~~GAAGhB~~,MAAM,~~CAACiB~~,KAAkC;AAC/E;AACA,cAAc,CAAC;EAAEZ;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA;AACA,aAAa,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAACY,IAAI;AACnE,iBAAiB,CAAC;EAAEb;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACtE,CAAC;AAMD,OAAO,MAAMc,yBAAyB,~~GAAGnB~~,MAAM,~~CAACI~~,GAAmC;AACnF;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AACtE,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.styles.js","names":["styled","css","StyledTagInput","div","$size","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 type { InputSize } from '../input/Input';\n\ntype StyledTagInputProps = WithTheme<{\n $shouldChangeColor: boolean;\n $shouldShowKeyboardHighlighting: boolean;\n $shouldShowTagHighlighting: boolean;\n $size: InputSize;\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: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n padding: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n align-items: center;\n gap: ${({ $size }) => ($size === 'medium' ? '6px' : '4px')};\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 }\n `}\n`;\n\ntype StyledTagInputTagWrapperProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapper = styled.div<StyledTagInputTagWrapperProps>`\n display: flex;\n align-items: center;\n gap: ${({ $size }) => ($size === 'medium' ? '4px' : '2px')};\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\n border-radius: 999px;\n outline-offset: 0;\n }\n `}\n`;\n\ntype StyledTagInputTagWrapperTextProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputTagWrapperText = styled.p<StyledTagInputTagWrapperTextProps>`\n margin: 0;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputTagInputProps = WithTheme<{\n $size: InputSize;\n}>;\n\nexport const StyledTagInputTagInput = styled.input<StyledTagInputTagInputProps>`\n border: none;\n height: ${({ $size }) => ($size === 'medium' ? '24px' : '20px')};\n flex-grow: 1;\n background-color: transparent;\n color: ${({ theme }: StyledTagInputTagInputProps) => theme.text};\n font-size: ${({ $size }) => ($size === 'medium' ? '15px' : '13px')};\n`;\n\ntype StyledTagInputIconWrapperProps = {\n $size: InputSize;\n};\n\nexport const StyledTagInputIconWrapper = styled.div<StyledTagInputIconWrapperProps>`\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n margin-left: ${({ $size }) => ($size === 'medium' ? '5px' : '4px')};\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAgB/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAwB;AAC7D;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACvE,eAAe,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAClE;AACA,WAAW,CAAC;EAAEA;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAC9D,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;AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMS,wBAAwB,GAAGV,MAAM,CAACG,GAAkC;AACjF;AACA;AACA,WAAW,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AAC9D,CAAC;AAED,OAAO,MAAMO,6BAA6B,GAAGX,MAAM,CAACG,GAAuC;AAC3F;AACA;AACA,MAAM,CAAC;EAAES,WAAW;EAAEJ;AAAgC,CAAC,KAC/CI,WAAW,IACXJ,+BAA+B,IAC/BP,GAAG;AACX,cAAcC,cAAc;AAC5B;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,CAAC;AAMD,OAAO,MAAMW,4BAA4B,GAAGb,MAAM,CAACc,CAAoC;AACvF;AACA;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEV;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACtE,CAAC;AAMD,OAAO,MAAMW,sBAAsB,GAAGf,MAAM,CAACgB,KAAkC;AAC/E;AACA,cAAc,CAAC;EAAEZ;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACnE;AACA;AACA,aAAa,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAACY,IAAI;AACnE,iBAAiB,CAAC;EAAEb;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AACtE,CAAC;AAMD,OAAO,MAAMc,yBAAyB,GAAGlB,MAAM,CAACG,GAAmC;AACnF;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAM;AACtE,CAAC","ignoreList":[]}

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

@@ -4,11 +4,12 @@ import { AreaContext } from '../area-provider/AreaContextProvider';
 import { StyledInputRightElement } from '../input/Input.styles';
 import { StyledRightElementWrapper, StyledTextArea, StyledTextAreaContent, StyledTextAreaContentWrapper, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
 import { useCursorRepaint } from '../../hooks/resize';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
   "use memo";
-  const $ = _c(29);
+  const $ = _c(31);
   const {
     isDisabled,
     isInvalid,
@@ -34,67 +35,78 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
   const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   let t3;
-  if ($[0] !== maxHeight) {
-    t3 = () => {
+  if ($[0] !== shouldShowKeyboardHighlighting) {
+    t3 = {
+      isEnabled: shouldShowKeyboardHighlighting
+    };
+    $[0] = shouldShowKeyboardHighlighting;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  useFocusRingPortal(textareaRef, t3);
+  let t4;
+  if ($[2] !== maxHeight) {
+    t4 = () => {
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
         textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
         setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
       }
     };
-    $[0] = maxHeight;
-    $[1] = t3;
+    $[2] = maxHeight;
+    $[3] = t4;
   } else {
-    t3 = $[1];
+    t4 = $[3];
   }
-  const adjustTextareaHeight = t3;
-  let t4;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = () => textareaRef.current;
-    $[2] = t4;
+  const adjustTextareaHeight = t4;
+  let t5;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => textareaRef.current;
+    $[4] = t5;
   } else {
-    t4 = $[2];
+    t5 = $[4];
   }
-  useImperativeHandle(ref, t4);
-  let t5;
+  useImperativeHandle(ref, t5);
   let t6;
-  if ($[3] !== adjustTextareaHeight || $[4] !== value) {
-    t5 = () => {
+  let t7;
+  if ($[5] !== adjustTextareaHeight || $[6] !== value) {
+    t6 = () => {
       if (typeof value === "string" && value.length > -1) {
         adjustTextareaHeight();
       }
     };
-    t6 = [adjustTextareaHeight, value];
-    $[3] = adjustTextareaHeight;
-    $[4] = value;
-    $[5] = t5;
-    $[6] = t6;
+    t7 = [adjustTextareaHeight, value];
+    $[5] = adjustTextareaHeight;
+    $[6] = value;
+    $[7] = t6;
+    $[8] = t7;
   } else {
-    t5 = $[5];
-    t6 = $[6];
+    t6 = $[7];
+    t7 = $[8];
   }
-  useEffect(t5, t6);
+  useEffect(t6, t7);
   const hasValue = value !== undefined && value.length > 0;
-  let t7;
-  if ($[7] !== hasValue) {
-    t7 = hasValue ? {
+  let t8;
+  if ($[9] !== hasValue) {
+    t8 = hasValue ? {
       bottom: "2px",
       right: "2px"
     } : {
       top: "12px",
       left: "10px"
     };
-    $[7] = hasValue;
-    $[8] = t7;
+    $[9] = hasValue;
+    $[10] = t8;
   } else {
-    t7 = $[8];
+    t8 = $[10];
   }
-  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] !== shouldShowKeyboardHighlighting || $[27] !== value) {
+  const labelPosition = t8;
+  let t9;
+  if ($[11] !== colors?.backgroundColor || $[12] !== colors?.borderColor || $[13] !== hasValue || $[14] !== isDisabled || $[15] !== isInvalid || $[16] !== isOverflowing || $[17] !== labelPosition || $[18] !== maxHeight || $[19] !== minHeight || $[20] !== onBlur || $[21] !== onChange || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== rightElement || $[26] !== shouldChangeColor || $[27] !== shouldShowBorder || $[28] !== shouldShowKeyboardHighlighting || $[29] !== value) {
     colors?.backgroundColor;
     colors?.borderColor;
-    t8 = (() => /*#__PURE__*/React.createElement(StyledTextArea, {
+    t9 = (() => /*#__PURE__*/React.createElement(StyledTextArea, {
       $isDisabled: isDisabled
     }, /*#__PURE__*/React.createElement(StyledTextAreaContentWrapper, {
       $isInvalid: isInvalid,
@@ -133,30 +145,30 @@ const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
     }, /*#__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;
-    $[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;
-    $[28] = t8;
+    $[11] = colors?.backgroundColor;
+    $[12] = colors?.borderColor;
+    $[13] = hasValue;
+    $[14] = isDisabled;
+    $[15] = isInvalid;
+    $[16] = isOverflowing;
+    $[17] = labelPosition;
+    $[18] = maxHeight;
+    $[19] = minHeight;
+    $[20] = onBlur;
+    $[21] = onChange;
+    $[22] = onFocus;
+    $[23] = onKeyDown;
+    $[24] = placeholder;
+    $[25] = rightElement;
+    $[26] = shouldChangeColor;
+    $[27] = shouldShowBorder;
+    $[28] = shouldShowKeyboardHighlighting;
+    $[29] = value;
+    $[30] = t9;
   } else {
-    t8 = $[28];
+    t9 = $[30];
   }
-  return t8;
+  return t9;
 });
 TextArea.displayName = 'TextArea';
 export default TextArea;

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

	@@ -1 +1 @@
1	- {"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":";AAAA,OAAOA,KAAK,IAIRC,UAAU,EAGVC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,WAAW,QAAQ,sCAAsC;AAClE,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SACIC,yBAAyB,EACzBC,cAAc,EACdC,qBAAqB,EACrBC,4BAA4B,EAC5BC,mBAAmB,EACnBC,mBAAmB,EACnBC,0BAA0B,QACvB,mBAAmB;AAC1B,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,4BAA4B,QAAQ,0CAA0C;AA8DvF,MAAMC,QAAQ,gBAAGnB,UAAU,CACvB,CAAAoB,EAAA,EAAAC,GAAA;EAAA;;EAAA,MAAAC,CAAA,GAAAC,EAAA;EACI;IAAAC,UAAA;IAAAC,SAAA;IAAAC,WAAA;IAAAC,KAAA;IAAAC,QAAA;IAAAC,OAAA;IAAAC,SAAA;IAAAC,YAAA;IAAAC,MAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,MAAA;IAAAC;EAAA,IAAAlB,EAcC;EAJG,MAAAa,SAAA,GAAAC,EAAmB,KAAnBK,SAAmB,GAAnB,OAAmB,GAAnBL,EAAmB;EACnB,MAAAC,SAAA,GAAAC,EAAkB,KAAlBG,SAAkB,GAAlB,MAAkB,GAAlBH,EAAkB;EAQtB,OAAAI,aAAA,EAAAC,gBAAA,IAA0ClC,QAAQ,CAAC,KAAK,CAAC;EAEzD,MAAAmC,YAAA,GAAqBxC,UAAU,CAACM,WAAW,CAAC;EAE5C,MAAAmC,WAAA,GAAoBrC,MAAM,CAAsB,IAAI,CAAC;EAErDW,gBAAgB,CAAC0B,WAAW,CAAC;EAG7B,MAAAC,gBAAA,GAAyBb,YAAY,EAAAc,KAAc,EAAAC,KAAiB,EAAAC,eAAA,KAAKR,SAAS;EAElF,MAAAS,iBAAA,GACUN,YAAY,CAAAM,iBAA2B,IAAvC,KAAuC;EAIjD,MAAAC,8BAAA,GAAuC/B,4BAA4B,CAC/DoB,gCAA+C,IAA/C,CAAqCd,UACzC,CAAC;EAAC,IAAA0B,EAAA;EAAA,IAAA5B,CAAA,QAAAW,SAAA;IAEuCiB,EAAA,GAAAA,CAAA;MACrC,IAAIP,WAAW,CAAAQ,OAAQ;QACnBR,WAAW,CAAAQ,OAAQ,CAAAL,KAAM,CAAAM,MAAA,GAAU,MAAH;QAChCT,WAAW,CAAAQ,OAAQ,CAAAL,KAAM,CAAAM,MAAA,GAAU,GAAGT,WAAW,CAAAQ,OAAQ,CAAAE,YAAa,IAAtC;QAEhCZ,gBAAgB,CACZE,WAAW,CAAAQ,OAAQ,CAAAE,YAAa,GAAGC,QAAQ,CAACrB,SAAS,CAAAsB,QAAS,CAAC,CAAC,EAAE,EAAE,CACxE,CAAC;MAAA;IACJ,CACJ;IAAAjC,CAAA,MAAAW,SAAA;IAAAX,CAAA,MAAA4B,EAAA;EAAA;IAAAA,EAAA,GAAA5B,CAAA;EAAA;EATD,MAAAkC,oBAAA,GAA6BN,EASd;EAAC,IAAAO,EAAA;EAAA,IAAAnC,CAAA,QAAAoC,MAAA,CAAAC,GAAA;IAESF,EAAA,GAAAA,CAAA,KAAMd,WAAW,CAAAQ,OAA+B;IAAA7B,CAAA,MAAAmC,EAAA;EAAA;IAAAA,EAAA,GAAAnC,CAAA;EAAA;EAAzElB,mBAAmB,CAACiB,GAAG,EAAEoC,EAAgD,CAAC;EAAA,IAAAG,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAvC,CAAA,QAAAkC,oBAAA,IAAAlC,CAAA,QAAAK,KAAA;IAMhEiC,EAAA,GAAAA,CAAA;MACN,IAAI,OAAOjC,KAAK,KAAK,QAA6B,IAAjBA,KAAK,CAAAmC,MAAO,GAAG,EAAE;QAC9CN,oBAAoB,CAAC,CAAC;MAAA;IACzB,CACJ;IAAEK,EAAA,IAACL,oBAAoB,EAAE7B,KAAK,CAAC;IAAAL,CAAA,MAAAkC,oBAAA;IAAAlC,CAAA,MAAAK,KAAA;IAAAL,CAAA,MAAAsC,EAAA;IAAAtC,CAAA,MAAAuC,EAAA;EAAA;IAAAD,EAAA,GAAAtC,CAAA;IAAAuC,EAAA,GAAAvC,CAAA;EAAA;EAJhCnB,SAAS,CAACyD,EAIT,EAAEC,EAA6B,CAAC;EAEjC,MAAAE,QAAA,GAAiBpC,KAAK,KAAKY,SAA6B,IAAhBZ,KAAK,CAAAmC,MAAO,GAAG,CAAC;EAAC,IAAAE,EAAA;EAAA,IAAA1C,CAAA,QAAAyC,QAAA;IAIjDC,EAAA,GAAAD,QAAQ,GAAR;MAAAE,MAAA,EAEkB,KAAK;MAAAC,KAAA,EACN;IAKX,CAAC,GARP;MAAAC,GAAA,EAMe,MAAM;MAAAC,IAAA,EACL;IACV,CAAC;IAAA9C,CAAA,MAAAyC,QAAA;IAAAzC,CAAA,MAAA0C,EAAA;EAAA;IAAAA,EAAA,GAAA1C,CAAA;EAAA;EAVf,MAAA+C,aAAA,GAEQL,EAQO;EAEb,IAAAM,EAAA;EAAA,IAAAhD,CAAA,QAAAe,MAAA,EAAAU,eAAA,IAAAzB,CAAA,SAAAe,MAAA,EAAAkC,WAAA,IAAAjD,CAAA,SAAAyC,QAAA,IAAAzC,CAAA,SAAAE,UAAA,IAAAF,CAAA,SAAAG,SAAA,IAAAH,CAAA,SAAAkB,aAAA,IAAAlB,CAAA,SAAA+C,aAAA,IAAA/C,CAAA,SAAAW,SAAA,IAAAX,CAAA,SAAAa,SAAA,IAAAb,CAAA,SAAAU,MAAA,IAAAV,CAAA,SAAAM,QAAA,IAAAN,CAAA,SAAAO,OAAA,IAAAP,CAAA,SAAAQ,SAAA,IAAAR,CAAA,SAAAI,WAAA,IAAAJ,CAAA,SAAAS,YAAA,IAAAT,CAAA,SAAA0B,iBAAA,IAAA1B,CAAA,SAAAsB,gBAAA,IAAAtB,CAAA,SAAA2B,8BAAA,IAAA3B,CAAA,SAAAK,KAAA;IA2DMU,MAAM,EAAAU,eAAiB;IACvBV,MAAM,EAAAkC,WAAa;IA1DpBD,EAAA,IACH,mBACIvE,KAAA,CAAAyE,aAAA,CAAC7D,cAAc;MAAca,WAAU,EAAVA;IAAU,gBACnCzB,KAAA,CAAAyE,aAAA,CAAC3D,4BAA4B;MACbY,UAAS,EAATA,SAAS;MACDuB,kBAAiB,EAAjBA,iBAAiB;MACnByB,gBAAuB,EAAvBpC,MAAM,EAAAU,eAAiB;MAC3B2B,YAAmB,EAAnBrC,MAAM,EAAAkC,WAAa;MACOtB,yCAAA,CAAAA;IAA8B,gBAEtElD,KAAA,CAAAyE,aAAA,CAAC5D,qBAAqB,qBAClBb,KAAA,CAAAyE,aAAA,CAAC1D,mBAAmB;MACN6D,SAAkB,EAAlB,kBAAkB;MAClBnD,QAAU,EAAVA,UAAU;MACRC,UAAS,EAATA,SAAS;MAChBkB,GAAW,EAAXA,WAAW;MACThB,KAAK,EAALA,KAAK;MACJK,MAAM,EAANA,MAAM;MACJJ,QAAQ,EAARA,QAAQ;MACTC,OAAO,EAAPA,OAAO;MACLC,SAAS,EAATA,SAAS;MACRG,UAAS,EAATA,SAAS;MACTE,UAAS,EAATA,SAAS;MACLK,cAAa,EAAbA,aAAa;MACvBoC,IAAC,EAAD;IAAC,CACV,CAAC,eACF7E,KAAA,CAAAyE,aAAA,CAACxD,0BAA0B;MACd6D,OAA0C,EAA1C;QAAAC,QAAA,EAAYf,QAAQ,GAAR,KAA4B,GAA5BxB;MAA6B,CAAC;MAC1CwC,OAAK,EAAL,KAAK;MACPV,KAAa,EAAbA,aAAa;MACRW,UAAgC,EAAhC;QAAAC,IAAA,EAAQ,OAAO;QAAAC,QAAA,EAAY;MAAI;IAAC,gBAE5CnF,KAAA,CAAAyE,aAAA,CAACzD,mBAAmB;MAAaU,UAAS,EAATA;IAAS,GACrCC,WACgB,CACG,CACT,CAAC,EACvBK,YAAgC,IAAhCa,gBAMA,iBANA7C,KAAA,CAAAyE,aAAA,CACI/D,uBAAuB;MAAC0E,SAAS,EAAT;IAAS,gBAC9BpF,KAAA,CAAAyE,aAAA,CAAC9D,yBAAyB,QACrBqB,YACsB,CAEnC,CAC0B,CAAC,EAC9BA,YAAiC,IAAjC,CAAiBa,gBAIjB,iBAJA7C,KAAA,CAAAyE,aAAA,CACI/D,uBAAuB;MAAC0E,SAAS,EAAT;IAAS,gBAC9BpF,KAAA,CAAAyE,aAAA,CAAC9D,yBAAyB,QAAEqB,YAAwC,CAE5E,CACY,CACnB,EAsBL,CAAC;IAAAT,CAAA,MAAAe,MAAA,EAAAU,eAAA;IAAAzB,CAAA,OAAAe,MAAA,EAAAkC,WAAA;IAAAjD,CAAA,OAAAyC,QAAA;IAAAzC,CAAA,OAAAE,UAAA;IAAAF,CAAA,OAAAG,SAAA;IAAAH,CAAA,OAAAkB,aAAA;IAAAlB,CAAA,OAAA+C,aAAA;IAAA/C,CAAA,OAAAW,SAAA;IAAAX,CAAA,OAAAa,SAAA;IAAAb,CAAA,OAAAU,MAAA;IAAAV,CAAA,OAAAM,QAAA;IAAAN,CAAA,OAAAO,OAAA;IAAAP,CAAA,OAAAQ,SAAA;IAAAR,CAAA,OAAAI,WAAA;IAAAJ,CAAA,OAAAS,YAAA;IAAAT,CAAA,OAAA0B,iBAAA;IAAA1B,CAAA,OAAAsB,gBAAA;IAAAtB,CAAA,OAAA2B,8BAAA;IAAA3B,CAAA,OAAAK,KAAA;IAAAL,CAAA,OAAAgD,EAAA;EAAA;IAAAA,EAAA,GAAAhD,CAAA;EAAA;EAAA,OAzEMgD,EAyEN;AAAA,CAET,CAAC;AAEDnD,QAAQ,CAACiE,WAAW,GAAG,UAAU;AAEjC,eAAejE,QAAQ","ignoreList":[]}
1	+ {"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","useFocusRingPortal","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","isEnabled","t4","current","height","scrollHeight","parseInt","toString","adjustTextareaHeight","t5","Symbol","for","t6","t7","length","hasValue","t8","bottom","right","top","left","labelPosition","t9","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 { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\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 useFocusRingPortal(textareaRef, { isEnabled: shouldShowKeyboardHighlighting });\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 CHANGED Viewed

@@ -1,6 +1,5 @@
 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;
@@ -29,7 +28,6 @@ export const StyledTextAreaContentWrapper = styled.div`
     &[data-should-show-keyboard-highlighting='true'] {
         &:focus-within {
             transition: none;
-            ${keyboardFocusHighlightingRingCss}
         }
     }
 `;

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

	@@ -1 +1 @@
1	- {"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":[]}
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","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';\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 }\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;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;AACA;AACA;AACA;AACA;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;AAED,OAAO,MAAMiB,yBAAyB,GAAGvB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -1,7 +1,8 @@
 import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import textStrings from '../../constants/textStrings';
+import { useFocusRingPortal } from '../../hooks/useFocusRingPortal';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { ClampPosition } from '../../types/truncation';
 import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampFocusWrapper, StyledTruncationClampWrapper, StyledTruncationContent } from './Truncation.styles';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -17,6 +18,7 @@ const Truncation = ({
 }) => {
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
   const contentRef = useRef(null);
+  const clampRef = useRef(null);
   const pendingObservedHeight = useRef(0);
   const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));
   const [contentHeight, setContentHeight] = useState(0);
@@ -25,6 +27,10 @@ const Truncation = ({
       setInternalIsOpen(isOpen);
     }
   }, [isOpen]);
+  const hasOverflow = contentHeight > collapsedHeight;
+  useFocusRingPortal(clampRef, {
+    isEnabled: shouldShowKeyboardHighlighting && hasOverflow
+  });
   useIsomorphicLayoutEffect(() => {
     if (!contentRef.current) {
       return () => {};
@@ -79,7 +85,6 @@ const Truncation = ({
   const internalLessLabel = lessLabel ?? /*#__PURE__*/React.createElement(Textstring, {
     textstring: ttsToITextString(textStrings.components.truncation.less)
   });
-  const hasOverflow = contentHeight > collapsedHeight;
   const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);
   const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;
   return /*#__PURE__*/React.createElement(StyledTruncation, {
@@ -99,9 +104,8 @@ const Truncation = ({
     $position: clampPosition
   }, /*#__PURE__*/React.createElement(TextstringProvider, {
     libraryName: "@chayns-components-core"
-  }, /*#__PURE__*/React.createElement(StyledTruncationClampFocusWrapper, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
-  }, /*#__PURE__*/React.createElement(StyledTruncationClamp, {
+  }, /*#__PURE__*/React.createElement(StyledTruncationClampFocusWrapper, null, /*#__PURE__*/React.createElement(StyledTruncationClamp, {
+    ref: clampRef,
     onClick: handleClampClick,
     onKeyDown: handleClampKeyDown,
     role: "button",

package/lib/esm/components/truncation/Truncation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.js","names":["Textstring","TextstringProvider","ttsToITextString","React","useCallback","useEffect","useLayoutEffect","useRef","useState","useKeyboardFocusHighlighting","textStrings","ClampPosition","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationContent","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","contentRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","Boolean","contentHeight","setContentHeight","current","frame","updateContentHeight","entries","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","textstring","components","truncation","more","internalLessLabel","less","hasOverflow","collapsedContentHeight","min","targetHeight","className","animate","initial","transition","type","duration","ref","$position","libraryName","$shouldShowKeyboardHighlighting","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport textStrings from '../../constants/textStrings';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children element in its collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n /\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number \| undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n setContentHeight(\n Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Textstring textstring={ttsToITextString(textStrings.components.truncation.more)} />\n );\n const internalLessLabel = lessLabel ?? (\n <Textstring textstring={ttsToITextString(textStrings.components.truncation.less)} />\n );\n const hasOverflow = contentHeight > collapsedHeight;\n const collapsedContentHeight = Math.min(contentHeight \|\| collapsedHeight, collapsedHeight);\n const targetHeight = internalIsOpen ? contentHeight \|\| collapsedHeight : collapsedContentHeight;\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClampFocusWrapper\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n >\n <StyledTruncationClamp\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.js","names":["Textstring","TextstringProvider","ttsToITextString","React","useCallback","useEffect","useLayoutEffect","useRef","useState","textStrings","useFocusRingPortal","useKeyboardFocusHighlighting","ClampPosition","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationContent","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","contentRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","Boolean","contentHeight","setContentHeight","hasOverflow","isEnabled","current","frame","updateContentHeight","entries","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","textstring","components","truncation","more","internalLessLabel","less","collapsedContentHeight","min","targetHeight","className","animate","initial","transition","type","duration","ref","$position","libraryName","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n /*\n The elements that should be expanding or collapsing.\n /\n children: ReactElement;\n /\n The position of the clamp.\n /\n clampPosition?: ClampPosition;\n /\n The height of the children element in its collapsed state.\n /\n collapsedHeight?: number;\n /\n If set to true, the content is exposed.\n /\n isOpen?: boolean;\n /\n A text that should be displayed if the content is expanded.\n /\n lessLabel?: string;\n /\n A text that should be displayed if the content is collapsed.\n /\n moreLabel?: string;\n /\n Function to be executed when the component is expanding or collapsing.\n /\n onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n /\n Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n lessLabel,\n moreLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n const contentRef = useRef<HTMLDivElement>(null);\n const clampRef = useRef<HTMLAnchorElement>(null);\n const pendingObservedHeight = useRef(0);\n const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n const [contentHeight, setContentHeight] = useState(0);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n }\n }, [isOpen]);\n\n const hasOverflow = contentHeight > collapsedHeight;\n\n useFocusRingPortal(clampRef, {\n isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (!contentRef.current) {\n return () => {};\n }\n\n let frame: number \| undefined;\n const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n pendingObservedHeight.current = Math.max(\n pendingObservedHeight.current,\n entries?.[0]?.contentRect.height ?? 0,\n );\n\n if (frame !== undefined) {\n return;\n }\n\n frame = window.requestAnimationFrame(() => {\n frame = undefined;\n\n if (!contentRef.current) {\n return;\n }\n\n setContentHeight(\n Math.max(\n pendingObservedHeight.current,\n contentRef.current.scrollHeight,\n contentRef.current.getBoundingClientRect().height,\n ),\n );\n pendingObservedHeight.current = 0;\n });\n };\n\n const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n resizeObserver.observe(contentRef.current);\n mutationObserver.observe(contentRef.current, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n updateContentHeight();\n\n return () => {\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n\n if (frame !== undefined) {\n window.cancelAnimationFrame(frame);\n }\n };\n }, [children]);\n\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n onChange?.(event, !current);\n return !current;\n });\n },\n [onChange],\n );\n\n const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n event.currentTarget.click();\n }\n }, []);\n\n const internalMoreLabel = moreLabel ?? (\n <Textstring textstring={ttsToITextString(textStrings.components.truncation.more)} />\n );\n const internalLessLabel = lessLabel ?? (\n <Textstring textstring={ttsToITextString(textStrings.components.truncation.less)} />\n );\n const collapsedContentHeight = Math.min(contentHeight \|\| collapsedHeight, collapsedHeight);\n const targetHeight = internalIsOpen ? contentHeight \|\| collapsedHeight : collapsedContentHeight;\n\n return (\n <StyledTruncation className=\"beta-chayns-truncation\">\n <StyledMotionTruncationContent\n animate={{ height: targetHeight }}\n initial={false}\n transition={{ type: 'tween', duration: 0.2 }}\n >\n <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n </StyledMotionTruncationContent>\n {hasOverflow && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClampFocusWrapper>\n <StyledTruncationClamp\n ref={clampRef}\n onClick={handleClampClick}\n onKeyDown={handleClampKeyDown}\n role=\"button\"\n tabIndex={0}\n >\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </StyledTruncationClampFocusWrapper>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}