npm - @chayns-components/core - Versions diffs - 5.4.13 → 5.4.14-alpha.0 - Mend

@chayns-components/core 5.4.13 → 5.4.14-alpha.0

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

Files changed (462) 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","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":[]}
1	+ {"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 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 ]);\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":"AAAA,OAAOA,KAAK,IACRC,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,EAIRC,mBAAmB,EACnBC,UAAU,EAIVC,MAAM,QACH,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,EAAE,IAAIC,MAAM,QAAQ,MAAM;AAEnC,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,cAAc,EACdC,6BAA6B,EAC7BC,yBAAyB,EACzBC,sBAAsB,EACtBC,wBAAwB,EACxBC,4BAA4B,QACzB,mBAAmB;AAC1B,SAASC,WAAW,QAAQ,sCAAsC;AAElE,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,4BAA4B,QAAQ,0CAA0C;AAuDvF,MAAMC,QAAQ,gBAAGrB,UAAU,CACvB,CACI;EACIsB,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC,mBAAmB,GAAG,IAAI;EAC1BC,gCAAgC;EAChCC,kBAAkB;EAClBC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGhC,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACiC,UAAU,EAAEC,aAAa,CAAC,GAAGlC,QAAQ,CAAY,CAAC;EAEzD,MAAMmC,YAAY,GAAGjC,UAAU,CAACa,WAAW,CAAC;EAE5C,MAAMqB,QAAQ,GAAGjC,MAAM,CAA0B,IAAI,CAAC;EAEtDa,gBAAgB,CAACoB,QAAQ,CAAC;EAE1B,MAAMC,KAAK,GAAGjC,QAAQ,CAAC,CAAU;EAEjC,MAAMkC,gBAAgB,GAAGA,CAAA,KAAM;IAC3BN,eAAe,CAAC,EAAE,CAAC;EACvB,CAAC;EAED,MAAMO,iBAAiB,GAAGxC,OAAO,CAC7B,MAAMoC,YAAY,CAACI,iBAAiB,IAAI,KAAK,EAC7C,CAACJ,YAAY,CAACI,iBAAiB,CACnC,CAAC;EAED,MAAMC,8BAA8B,GAAGvB,4BAA4B,CAC/DU,gCACJ,CAAC;EAED,MAAMc,yBAAyB,GAC3BD,8BAA8B,IAAI,OAAOP,UAAU,KAAK,QAAQ;EAEpEhC,mBAAmB,CACf6B,GAAG,EACH,OAAO;IACHY,IAAI,EAAEA,CAAA,KAAMN,QAAQ,CAACO,OAAO,EAAED,IAAI,CAAC,CAAC;IACpCE,iBAAiB,EAAEb,YAAY,KAAK,EAAE,GAAGA,YAAY,GAAGc,SAAS;IACjEC,UAAU,EAAER;EAChB,CAAC,CAAC,EACF,CAACP,YAAY,CACjB,CAAC;EAED,MAAMgB,eAAe,GAAGjD,WAAW,CAC/B,CAACkD,EAAU,EAAEC,WAAkB,KAAK;IAChC,MAAMC,eAAe,GAAGD,WAAW,CAACE,SAAS,CAAEC,GAAG,IAAKA,GAAG,CAACJ,EAAE,KAAKA,EAAE,CAAC;IAErE,IAAI,OAAOxB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACwB,EAAE,CAAC;IAChB;IAEA,IAAIE,eAAe,GAAG,CAAC,EAAE;MACrBhB,aAAa,CAACW,SAAS,CAAC;MACxB;IACJ;IAEAX,aAAa,CACTe,WAAW,CAACC,eAAe,GAAG,CAAC,CAAC,EAAEF,EAAE,IAAIC,WAAW,CAACC,eAAe,GAAG,CAAC,CAAC,EAAEF,EAC9E,CAAC;EACL,CAAC,EACD,CAACxB,QAAQ,CACb,CAAC;EAED,MAAM6B,aAAa,GAAGvD,WAAW,CAC5BwD,KAAsC,IAAK;IACxC,MAAMC,WAAW,GAAG7B,mBAAmB,GAAIG,IAAI,IAAI,EAAE,GAAI,CAACA,IAAI,IAAI,EAAE,EAAE2B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IACjF,MAAMC,gBAAgB,GAAGF,WAAW,CAACJ,SAAS,CAAEC,GAAG,IAAKA,GAAG,CAACJ,EAAE,KAAKf,UAAU,CAAC;IAC9E,MAAMyB,WAAW,GACbD,gBAAgB,IAAI,CAAC,GAAGF,WAAW,CAACE,gBAAgB,CAAC,GAAGZ,SAAS;IACrE,MAAMc,UAAU,GAAGL,KAAK,CAACM,GAAG,KAAK,GAAG;IACpC,MAAMC,UAAU,GAAGP,KAAK,CAACM,GAAG,KAAK,OAAO;IACxC,MAAME,WAAW,GAAGR,KAAK,CAACM,GAAG,KAAK,QAAQ;IAE1C,IAAI7B,YAAY,KAAK,EAAE,IAAIwB,WAAW,CAACQ,MAAM,GAAG,CAAC,EAAE;MAC/C,IAAIT,KAAK,CAACM,GAAG,KAAK,WAAW,EAAE;QAC3BN,KAAK,CAACU,cAAc,CAAC,CAAC;QAEtB,IAAI,CAAC/B,UAAU,EAAE;UACbC,aAAa,CAACqB,WAAW,CAACA,WAAW,CAACQ,MAAM,GAAG,CAAC,CAAC,EAAEf,EAAE,CAAC;UACtD;QACJ;QAEA,IAAIS,gBAAgB,IAAI,CAAC,EAAE;UACvBvB,aAAa,CAACW,SAAS,CAAC;UACxB;QACJ;QAEAX,aAAa,CAACqB,WAAW,CAACE,gBAAgB,GAAG,CAAC,CAAC,EAAET,EAAE,CAAC;QACpD;MACJ;MAEA,IAAIM,KAAK,CAACM,GAAG,KAAK,YAAY,EAAE;QAC5BN,KAAK,CAACU,cAAc,CAAC,CAAC;QAEtB,IAAI,CAAC/B,UAAU,IAAIwB,gBAAgB,GAAG,CAAC,EAAE;UACrC;QACJ;QAEA,IAAIA,gBAAgB,IAAIF,WAAW,CAACQ,MAAM,GAAG,CAAC,EAAE;UAC5C7B,aAAa,CAACW,SAAS,CAAC;UACxB;QACJ;QAEAX,aAAa,CAACqB,WAAW,CAACE,gBAAgB,GAAG,CAAC,CAAC,EAAET,EAAE,CAAC;QACpD;MACJ;MAEA,IAAIM,KAAK,CAACM,GAAG,KAAK,MAAM,EAAE;QACtBN,KAAK,CAACU,cAAc,CAAC,CAAC;QACtB9B,aAAa,CAACqB,WAAW,CAAC,CAAC,CAAC,EAAEP,EAAE,CAAC;QACjC;MACJ;MAEA,IAAIM,KAAK,CAACM,GAAG,KAAK,KAAK,EAAE;QACrBN,KAAK,CAACU,cAAc,CAAC,CAAC;QACtB9B,aAAa,CAACqB,WAAW,CAACA,WAAW,CAACQ,MAAM,GAAG,CAAC,CAAC,EAAEf,EAAE,CAAC;QACtD;MACJ;MAEA,IAAIa,UAAU,IAAIF,UAAU,IAAIL,KAAK,CAACM,GAAG,KAAK,WAAW,IAAIE,WAAW,EAAE;QACtER,KAAK,CAACU,cAAc,CAAC,CAAC;QAEtB,IAAI,CAACN,WAAW,EAAE;UACdxB,aAAa,CAACqB,WAAW,CAACA,WAAW,CAACQ,MAAM,GAAG,CAAC,CAAC,EAAEf,EAAE,CAAC;UACtD;QACJ;QAEAD,eAAe,CAACW,WAAW,CAACV,EAAE,EAAEO,WAAW,CAAC;QAC5C;MACJ;IACJ;IAEA,IAAIM,UAAU,IAAI,CAACjC,kBAAkB,EAAE;MACnCI,eAAe,CAAEiC,SAAS,IAAK;QAC3B,IAAI,CAACA,SAAS,EAAE;UACZ,OAAO,EAAE;QACb;QAEA,IAAI,CAACvC,mBAAmB,IAAI,CAACG,IAAI,EAAEkC,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE;QAE9D,MAAMG,MAAM,GAAG;UAAElB,EAAE,EAAE1C,MAAM,CAAC,CAAC;UAAE6D,IAAI,EAAEF;QAAU,CAAC;QAEhD,IAAI,OAAO7C,KAAK,KAAK,UAAU,EAAE;UAC7B,MAAMgD,WAAW,GAAGhD,KAAK,CAAC8C,MAAM,CAAC;UAEjC,IAAI,OAAOE,WAAW,KAAK,SAAS,IAAI,CAACA,WAAW,EAAE;YAClD,OAAOH,SAAS;UACpB;UAEA,IAAIG,WAAW,YAAYC,OAAO,EAAE;YAChC,KAAKD,WAAW,CAACE,IAAI,CAAEC,YAAY,IAAK;cACpC,IAAI,CAACA,YAAY,EAAE;gBACf,OAAON,SAAS;cACpB;cAEA,OAAO,EAAE;YACb,CAAC,CAAC;UACN;QACJ;QAEA,OAAO,EAAE;MACb,CAAC,CAAC;IACN;EACJ,CAAC,EACD,CACIlC,YAAY,EACZX,KAAK,EACL2B,eAAe,EACfd,UAAU,EACVP,mBAAmB,EACnBE,kBAAkB,EAClBC,IAAI,CAEZ,CAAC;EAED,MAAM2C,YAAY,GAAG1E,WAAW,CAC3BwD,KAAoC,IAAK;IACtCtB,eAAe,CAACsB,KAAK,CAACmB,MAAM,CAACC,KAAK,CAAC;IAEnC,IAAI,OAAOpD,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACgC,KAAK,CAAC;IACnB;IAEA,IAAIA,KAAK,CAACmB,MAAM,CAACC,KAAK,KAAK,EAAE,EAAE;MAC3BxC,aAAa,CAACW,SAAS,CAAC;IAC5B;EACJ,CAAC,EACD,CAACvB,QAAQ,CACb,CAAC;EAED,MAAMqD,eAAe,GAAG7E,WAAW,CAC9BkD,EAAU,IAAK;IACZD,eAAe,CAACC,EAAE,EAAEtB,mBAAmB,GAAIG,IAAI,IAAI,EAAE,GAAI,CAACA,IAAI,IAAI,EAAE,EAAE2B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EACtF,CAAC,EACD,CAACT,eAAe,EAAErB,mBAAmB,EAAEG,IAAI,CAC/C,CAAC;EAED,MAAM+C,OAAO,GAAG7E,OAAO,CAAC,MAAM;IAC1B,MAAM8E,KAAqB,GAAG,EAAE;IAEhC,IAAI,CAAChD,IAAI,EAAE;MACP,OAAOgD,KAAK;IAChB;IAEA,CAACnD,mBAAmB,GAAGG,IAAI,GAAGA,IAAI,CAAC2B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEsB,OAAO,CACnD,CAAC;MAAEX,IAAI;MAAEnB,EAAE;MAAE+B;IAAa,CAAC,KAAK;MAC5B,MAAMC,UAAU,GAAGhC,EAAE,KAAKf,UAAU;MAEpC4C,KAAK,CAACI,IAAI,cACNrF,KAAA,CAAAsF,aAAA,CAACxE,6BAA6B;QAC1ByE,WAAW,EAAEH,UAAW;QACxBI,+BAA+B,EAAE5C,8BAA+B;QAChEoB,GAAG,EAAE,aAAaZ,EAAE;MAAG,gBAEvBpD,KAAA,CAAAsF,aAAA,CAAC3E,KAAK;QACF8E,eAAe,EACXL,UAAU,GAAK3C,KAAK,CAAC,KAAK,CAAC,IAAeQ,SAAS,GAAIA;MAC1D,gBAEDjD,KAAA,CAAAsF,aAAA,CAACrE,wBAAwB,qBACrBjB,KAAA,CAAAsF,aAAA,CAACpE,4BAA4B,QACxBqD,IACyB,CAAC,EAC9BY,YAAY,eACbnF,KAAA,CAAAsF,aAAA,CAAC1E,IAAI;QACD8E,KAAK,EAAE,CAAC,UAAU,CAAE;QACpB3D,gCAAgC,EAAE,KAAM;QACxC4D,OAAO,EAAGjC,KAAK,IAAK;UAChBA,KAAK,CAACU,cAAc,CAAC,CAAC;UACtBV,KAAK,CAACkC,eAAe,CAAC,CAAC;UAEvBb,eAAe,CAAC3B,EAAE,CAAC;QACvB;MAAE,CACL,CACqB,CACvB,CACoB,CACnC,CAAC;IACL,CACJ,CAAC;IAED,OAAO6B,KAAK;EAChB,CAAC,EAAE,CACChD,IAAI,EACJH,mBAAmB,EACnBO,UAAU,EACVO,8BAA8B,EAC9BH,KAAK,EACLsC,eAAe,CAClB,CAAC;EAEF,MAAMc,eAAe,GAAG1F,OAAO,CAC3B,MAAM2B,mBAAmB,IAAI,CAACG,IAAI,EAAEkC,MAAM,IAAI,CAAC,IAAI,CAAC,EACpD,CAAClC,IAAI,EAAEkC,MAAM,EAAErC,mBAAmB,CACtC,CAAC;EAED,OAAO3B,OAAO,CACV,mBACIH,KAAA,CAAAsF,aAAA,CAACzE,cAAc;IACXiF,kBAAkB,EAAEnD,iBAAkB;IACtC6C,+BAA+B,EAAE5C,8BAA+B;IAChEmD,0BAA0B,EAAElD;EAA0B,GAErDtB,WAAW,iBACRvB,KAAA,CAAAsF,aAAA,CAACvE,yBAAyB,QAAEQ,WAAuC,CACtE,EACAyD,OAAO,EACPa,eAAe,iBACZ7F,KAAA,CAAAsF,aAAA,CAACtE,sBAAsB;IACnBS,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEkD,YAAa;IACvBjD,OAAO,EAAEA,OAAQ;IACjBqE,SAAS,EAAEvC,aAAc;IACzB5B,WAAW,EAAEI,IAAI,IAAIA,IAAI,CAACkC,MAAM,GAAG,CAAC,GAAGlB,SAAS,GAAGpB,WAAY;IAC/DK,GAAG,EAAEM,QAAS;IACdsC,KAAK,EAAE3C;EAAa,CACvB,CAEO,CACnB,EACD,CACI6C,OAAO,EACP7C,YAAY,EACZyC,YAAY,EACZnB,aAAa,EACblC,WAAW,EACXE,MAAM,EACNE,OAAO,EACPE,WAAW,EACXc,iBAAiB,EACjBkD,eAAe,EACfjD,8BAA8B,EAC9BC,yBAAyB,EACzBZ,IAAI,CAEZ,CAAC;AACL,CACJ,CAAC;AAED,eAAeX,QAAQ","ignoreList":[]}

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

@@ -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,37 @@ 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;
+            }
+        `}
+`;
 export const StyledTagInputTagWrapperText = styled.p`
     margin: 0;
     flex-grow: 1;

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","ClampPosition","debounce","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Textstring","TextstringProvider","ttsToITextString","textStrings","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","shouldSkipChangeCheck","setShouldSkipChangeCheck","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","event","current","setTimeout","handleAnimationEnd","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","ts","components","truncation","internalMoreLabel","createElement","textstring","more","internalLessLabel","less","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","libraryName","onClick"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\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 it`s 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\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n collapsedHeight = 150,\n clampPosition = ClampPosition.Right,\n isOpen,\n moreLabel,\n lessLabel,\n onChange,\n children,\n}) => {\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = useState(false);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const parentRef = useRef<HTMLDivElement>(null);\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n const hasCollapsed = useRef(false);\n const isAnimating = useRef(false);\n const hasSizeRecentlyChanged = useRef(false);\n const canResetSizeChanged = useRef(true);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\n return !current;\n });\n },\n [onChange],\n );\n\n useEffect(() => {\n if (children) {\n setShouldSkipChangeCheck(true);\n\n window.setTimeout(() => {\n setShouldSkipChangeCheck(false);\n }, 200);\n }\n }, [children]);\n\n const handleAnimationEnd = useCallback(() => {\n hasCollapsed.current = true;\n isAnimating.current = false;\n\n if (canResetSizeChanged.current) {\n setHasSizeChanged(false);\n canResetSizeChanged.current = false;\n }\n\n window.setTimeout(() => {\n hasSizeRecentlyChanged.current = false;\n }, 10);\n\n setShouldShowCollapsedElement(!internalIsOpen);\n\n window.setTimeout(() => {\n hasCollapsed.current = false;\n }, 30);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef, children]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (\n pseudoChildrenRef.current &&\n (!hasSizeChanged \|\| shouldSkipChangeCheck) &&\n !initialRender\n ) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [\n shouldSkipChangeCheck,\n collapsedHeight,\n hasSizeChanged,\n initialRender,\n newCollapsedHeight,\n originalHeight,\n children,\n ]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n parentRef.current?.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? originalChildrenRef.current\n : pseudoChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useIsomorphicLayoutEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight, children]);\n\n useIsomorphicLayoutEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight, children]);\n\n const ts = textStrings.components.truncation;\n\n const internalMoreLabel = moreLabel ?? <Textstring textstring={ttsToITextString(ts.more)} />;\n const internalLessLabel = lessLabel ?? <Textstring textstring={ttsToITextString(ts.less)} />;\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n onAnimationStart={() => {\n isAnimating.current = true;\n }}\n ref={childrenRef}\n />\n {showClamp && (\n <StyledTruncationClampWrapper $position={clampPosition}>\n <TextstringProvider libraryName=\"@chayns-components-core\">\n <StyledTruncationClamp onClick={handleClampClick}>\n {internalIsOpen ? internalLessLabel : internalMoreLabel}\n </StyledTruncationClamp>\n </TextstringProvider>\n </StyledTruncationClampWrapper>\n )}\n </StyledTruncation>\n ),\n [\n children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"AAAA,OAAOA,KAAK,IAKRC,WAAW,EACXC,SAAS,EACTC,eAAe,EACfC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,eAAe,QAAQ,wBAAwB;AACxD,SACIC,6BAA6B,EAC7BC,gBAAgB,EAChBC,qBAAqB,EACrBC,4BAA4B,EAC5BC,6BAA6B,QAC1B,qBAAqB;AAC5B,SAASC,UAAU,EAAEC,kBAAkB,EAAEC,gBAAgB,QAAQ,+BAA+B;AAChG,OAAOC,WAAW,MAAM,6BAA6B;AAiCrD,MAAMC,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGjB,eAAe,GAAGD,SAAS;AAE7F,MAAMmB,UAA+B,GAAGA,CAAC;EACrCC,eAAe,GAAG,GAAG;EACrBC,aAAa,GAAGhB,aAAa,CAACiB,KAAK;EACnCC,MAAM;EACNC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGzB,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM,CAAC0B,SAAS,EAAEC,YAAY,CAAC,GAAG3B,QAAQ,CAAC,IAAI,CAAC;EAChD,MAAM,CAAC4B,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG7B,QAAQ,CAACgB,eAAe,CAAC;EAC7E,MAAM,CAACc,cAAc,EAAEC,iBAAiB,CAAC,GAAG/B,QAAQ,CAAC,CAAC,CAAC;EACvD,MAAM,CAACgC,0BAA0B,EAAEC,6BAA6B,CAAC,GAAGjC,QAAQ,CAAC,IAAI,CAAC;EAClF,MAAM,CAACkC,cAAc,EAAEC,iBAAiB,CAAC,GAAGnC,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM,CAACoC,aAAa,EAAEC,gBAAgB,CAAC,GAAGrC,QAAQ,CAAC,IAAI,CAAC;EACxD,MAAM,CAACsC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGvC,QAAQ,CAAC,KAAK,CAAC;EAEzE,MAAM,CAACwC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGzC,QAAQ,CAAC,CAAC,CAAC;EACjE,MAAM,CAAC0C,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG3C,QAAQ,CAAC,CAAC,CAAC;EAE7DJ,SAAS,CAAC,MAAM;IACZyC,gBAAgB,CAAC,KAAK,CAAC;EAC3B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,SAAS,GAAG7C,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAM8C,iBAAiB,GAAG9C,MAAM,CAAiB,IAAI,CAAC;EACtD,MAAM+C,WAAW,GAAG/C,MAAM,CAAiB,IAAI,CAAC;EAChD,MAAMgD,mBAAmB,GAAGhD,MAAM,CAAiB,IAAI,CAAC;EACxD,MAAMiD,YAAY,GAAGjD,MAAM,CAAC,KAAK,CAAC;EAClC,MAAMkD,WAAW,GAAGlD,MAAM,CAAC,KAAK,CAAC;EACjC,MAAMmD,sBAAsB,GAAGnD,MAAM,CAAC,KAAK,CAAC;EAC5C,MAAMoD,mBAAmB,GAAGpD,MAAM,CAAC,IAAI,CAAC;EAExCH,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOuB,MAAM,KAAK,SAAS,EAAE;MAC7BM,iBAAiB,CAACN,MAAM,CAAC;MACzBQ,YAAY,CAAC,CAACR,MAAM,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;;EAEZ;EACA,MAAMiC,gBAAgB,GAAGzD,WAAW,CAC/B0D,KAAK,IAAK;IACP5B,iBAAiB,CAAE6B,OAAO,IAAK;MAC3B,IAAI,OAAOhC,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC+B,KAAK,EAAE,CAACC,OAAO,CAAC;MAC7B;MAEA,OAAO,CAACA,OAAO;IACnB,CAAC,CAAC;EACN,CAAC,EACD,CAAChC,QAAQ,CACb,CAAC;EAED1B,SAAS,CAAC,MAAM;IACZ,IAAI2B,QAAQ,EAAE;MACVgB,wBAAwB,CAAC,IAAI,CAAC;MAE9BzB,MAAM,CAACyC,UAAU,CAAC,MAAM;QACpBhB,wBAAwB,CAAC,KAAK,CAAC;MACnC,CAAC,EAAE,GAAG,CAAC;IACX;EACJ,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;EAEd,MAAMiC,kBAAkB,GAAG7D,WAAW,CAAC,MAAM;IACzCqD,YAAY,CAACM,OAAO,GAAG,IAAI;IAC3BL,WAAW,CAACK,OAAO,GAAG,KAAK;IAE3B,IAAIH,mBAAmB,CAACG,OAAO,EAAE;MAC7BnB,iBAAiB,CAAC,KAAK,CAAC;MACxBgB,mBAAmB,CAACG,OAAO,GAAG,KAAK;IACvC;IAEAxC,MAAM,CAACyC,UAAU,CAAC,MAAM;MACpBL,sBAAsB,CAACI,OAAO,GAAG,KAAK;IAC1C,CAAC,EAAE,EAAE,CAAC;IAENrB,6BAA6B,CAAC,CAACT,cAAc,CAAC;IAE9CV,MAAM,CAACyC,UAAU,CAAC,MAAM;MACpBP,YAAY,CAACM,OAAO,GAAG,KAAK;IAChC,CAAC,EAAE,EAAE,CAAC;EACV,CAAC,EAAE,CAAC9B,cAAc,CAAC,CAAC;EAEpB5B,SAAS,CAAC,MAAM;IACZ,IAAI,CAACiD,iBAAiB,CAACS,OAAO,EAAE;MAC5B;IACJ;IAEAvB,iBAAiB,CAACc,iBAAiB,CAACS,OAAO,CAACG,YAAY,CAAC;IACzDd,oBAAoB,CAACE,iBAAiB,CAACS,OAAO,CAACG,YAAY,CAAC;IAE5DtD,eAAe,CAAC0C,iBAAiB,CAACS,OAAO,EAAEtC,eAAe,CAAC;IAE3Da,qBAAqB,CAACgB,iBAAiB,CAACS,OAAO,CAACG,YAAY,CAAC;IAC7DhB,sBAAsB,CAACI,iBAAiB,CAACS,OAAO,CAACG,YAAY,CAAC;EAClE,CAAC,EAAE,CAACzC,eAAe,EAAE6B,iBAAiB,EAAEtB,QAAQ,CAAC,CAAC;;EAElD;EACA3B,SAAS,CAAC,MAAM;IACZ,IACIiD,iBAAiB,CAACS,OAAO,KACxB,CAACpB,cAAc,IAAII,qBAAqB,CAAC,IAC1C,CAACF,aAAa,EAChB;MACET,YAAY,CAACG,cAAc,GAAGF,kBAAkB,CAAC;IACrD;EACJ,CAAC,EAAE,CACCU,qBAAqB,EACrBtB,eAAe,EACfkB,cAAc,EACdE,aAAa,EACbR,kBAAkB,EAClBE,cAAc,EACdP,QAAQ,CACX,CAAC;EAEF3B,SAAS,CAAC,MAAM;IACZ,IAAIkD,WAAW,CAACQ,OAAO,IAAIT,iBAAiB,CAACS,OAAO,IAAIP,mBAAmB,CAACO,OAAO,EAAE;MACjF,OAAOR,WAAW,CAACQ,OAAO,CAACI,UAAU,EAAE;QACnCZ,WAAW,CAACQ,OAAO,CAACK,WAAW,CAACb,WAAW,CAACQ,OAAO,CAACI,UAAU,CAAC;MACnE;MAEAZ,WAAW,CAACQ,OAAO,CAACM,WAAW,CAC3B5B,0BAA0B,IAAI,CAACR,cAAc,GACvCqB,iBAAiB,CAACS,OAAO,GACzBP,mBAAmB,CAACO,OAC9B,CAAC;MAEDV,SAAS,CAACU,OAAO,EAAEM,WAAW,CAC1B5B,0BAA0B,IAAI,CAACR,cAAc,GACvCuB,mBAAmB,CAACO,OAAO,GAC3BT,iBAAiB,CAACS,OAC5B,CAAC;MAEAR,WAAW,CAACQ,OAAO,CAAC/B,QAAQ,CAAC,CAAC,CAAC,CAAoBsC,KAAK,CAACC,UAAU,GAAG,SAAS;IACpF;EACJ,CAAC,EAAE,CAACvC,QAAQ,EAAEC,cAAc,EAAEQ,0BAA0B,CAAC,CAAC;EAE1DnB,yBAAyB,CAAC,MAAM;IAC5B,IAAIkC,mBAAmB,CAACO,OAAO,EAAE;MAC7B,MAAMS,cAAc,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;QACnD,IAAIA,OAAO,IAAIA,OAAO,CAAC,CAAC,CAAC,EAAE;UACvB,MAAMC,cAAc,GAAGD,OAAO,CAAC,CAAC,CAAC,CAACE,WAAW,CAACC,MAAM;UAEpDrC,iBAAiB,CACbmC,cAAc,GAAGxB,iBAAiB,GAAGA,iBAAiB,GAAGwB,cAC7D,CAAC;UAED,IACI,CAAClB,YAAY,CAACM,OAAO,IACrB,CAACL,WAAW,CAACK,OAAO,IACpB,CAACJ,sBAAsB,CAACI,OAAO,EACjC;YACE,KAAKpD,QAAQ,CAAC,MAAM;cAChBiD,mBAAmB,CAACG,OAAO,GAAG,IAAI;YACtC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YAETnB,iBAAiB,CAAC,IAAI,CAAC;YACvBe,sBAAsB,CAACI,OAAO,GAAG,IAAI;UACzC;QACJ;MACJ,CAAC,CAAC;MAEFS,cAAc,CAACM,OAAO,CAACtB,mBAAmB,CAACO,OAAO,CAAC;MAEnD,OAAO,MAAM;QACTS,cAAc,CAACO,UAAU,CAAC,CAAC;MAC/B,CAAC;IACL;IAEA,OAAO,MAAM,CAAC,CAAC;EACnB,CAAC,EAAE,CAAC5B,iBAAiB,EAAEnB,QAAQ,CAAC,CAAC;EAEjCV,yBAAyB,CAAC,MAAM;IAC5B,IAAIgC,iBAAiB,CAACS,OAAO,EAAE;MAC3B,MAAMS,cAAc,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;QACnD,IAAIA,OAAO,IAAIA,OAAO,CAAC,CAAC,CAAC,EAAE;UACvB,MAAMC,cAAc,GAAGD,OAAO,CAAC,CAAC,CAAC,CAACE,WAAW,CAACC,MAAM;UAEpDvC,qBAAqB,CACjBqC,cAAc,GAAG1B,mBAAmB,GAAGA,mBAAmB,GAAG0B,cACjE,CAAC;UAED,IACI,CAAClB,YAAY,CAACM,OAAO,IACrB,CAACL,WAAW,CAACK,OAAO,IACpB,CAACJ,sBAAsB,CAACI,OAAO,EACjC;YACE,KAAKpD,QAAQ,CAAC,MAAM;cAChBiD,mBAAmB,CAACG,OAAO,GAAG,IAAI;YACtC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YAETnB,iBAAiB,CAAC,IAAI,CAAC;YACvBe,sBAAsB,CAACI,OAAO,GAAG,IAAI;UACzC;QACJ;MACJ,CAAC,CAAC;MAEFS,cAAc,CAACM,OAAO,CAACxB,iBAAiB,CAACS,OAAO,CAAC;MAEjD,OAAO,MAAM;QACTS,cAAc,CAACO,UAAU,CAAC,CAAC;MAC/B,CAAC;IACL;IAEA,OAAO,MAAM,CAAC,CAAC;EACnB,CAAC,EAAE,CAAC9B,mBAAmB,EAAEjB,QAAQ,CAAC,CAAC;EAEnC,MAAMgD,EAAE,GAAG3D,WAAW,CAAC4D,UAAU,CAACC,UAAU;EAE5C,MAAMC,iBAAiB,GAAGtD,SAAS,iBAAI1B,KAAA,CAAAiF,aAAA,CAAClE,UAAU;IAACmE,UAAU,EAAEjE,gBAAgB,CAAC4D,EAAE,CAACM,IAAI;EAAE,CAAE,CAAC;EAC5F,MAAMC,iBAAiB,GAAGzD,SAAS,iBAAI3B,KAAA,CAAAiF,aAAA,CAAClE,UAAU;IAACmE,UAAU,EAAEjE,gBAAgB,CAAC4D,EAAE,CAACQ,IAAI;EAAE,CAAE,CAAC;EAE5F,OAAOjF,OAAO,CACV,mBACIJ,KAAA,CAAAiF,aAAA,CAACtE,gBAAgB;IAAC2E,SAAS,EAAC,wBAAwB;IAACC,GAAG,EAAErC;EAAU,gBAChElD,KAAA,CAAAiF,aAAA,CAACnE,6BAA6B;IAACyE,GAAG,EAAEpC;EAAkB,GACjDtB,QAC0B,CAAC,eAChC7B,KAAA,CAAAiF,aAAA,CAACnE,6BAA6B;IAACyE,GAAG,EAAElC;EAAoB,GACnDxB,QAC0B,CAAC,eAChC7B,KAAA,CAAAiF,aAAA,CAACvE,6BAA6B;IAC1B8E,OAAO,EAAE;MAAEd,MAAM,EAAE5C,cAAc,GAAGM,cAAc,GAAGF;IAAmB,CAAE;IAC1EuD,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAEpD,cAAc,GAAG,CAAC,GAAG;IAAI,CAAE;IAClEqD,mBAAmB,EAAE/B,kBAAmB;IACxCgC,gBAAgB,EAAEA,CAAA,KAAM;MACpBvC,WAAW,CAACK,OAAO,GAAG,IAAI;IAC9B,CAAE;IACF2B,GAAG,EAAEnC;EAAY,CACpB,CAAC,EACDpB,SAAS,iBACNhC,KAAA,CAAAiF,aAAA,CAACpE,4BAA4B;IAACkF,SAAS,EAAExE;EAAc,gBACnDvB,KAAA,CAAAiF,aAAA,CAACjE,kBAAkB;IAACgF,WAAW,EAAC;EAAyB,gBACrDhG,KAAA,CAAAiF,aAAA,CAACrE,qBAAqB;IAACqF,OAAO,EAAEvC;EAAiB,GAC5C5B,cAAc,GAAGsD,iBAAiB,GAAGJ,iBACnB,CACP,CACM,CAEpB,CACrB,EACD,CACInD,QAAQ,EACRN,aAAa,EACbuC,kBAAkB,EAClBJ,gBAAgB,EAChBlB,cAAc,EACdV,cAAc,EACdH,SAAS,EACTD,SAAS,EACTQ,kBAAkB,EAClBE,cAAc,EACdJ,SAAS,CAEjB,CAAC;AACL,CAAC;AAED,eAAeX,UAAU","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.js","names":["React","useCallback","useEffect","useLayoutEffect","useMemo","useRef","useState","ClampPosition","debounce","truncateElement","StyledMotionTruncationContent","StyledTruncation","StyledTruncationClamp","StyledTruncationClampFocusWrapper","StyledTruncationClampWrapper","StyledTruncationPseudoContent","Textstring","TextstringProvider","ttsToITextString","textStrings","useKeyboardFocusHighlighting","useIsomorphicLayoutEffect","window","Truncation","collapsedHeight","clampPosition","Right","isOpen","moreLabel","lessLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","internalIsOpen","setInternalIsOpen","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","shouldSkipChangeCheck","setShouldSkipChangeCheck","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","event","current","handleClampKeyDown","key","preventDefault","currentTarget","click","setTimeout","handleAnimationEnd","offsetHeight","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","observe","disconnect","ts","components","truncation","internalMoreLabel","createElement","textstring","more","internalLessLabel","less","className","ref","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","$position","libraryName","$shouldShowKeyboardHighlighting","onClick","onKeyDown","role","tabIndex"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import React, {\n FC,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ClampPosition } from '../../types/truncation';\nimport { debounce } from '../../utils/debounce';\nimport { truncateElement } from '../../utils/truncation';\nimport {\n StyledMotionTruncationContent,\n StyledTruncation,\n StyledTruncationClamp,\n StyledTruncationClampFocusWrapper,\n StyledTruncationClampWrapper,\n StyledTruncationPseudoContent,\n} from './Truncation.styles';\nimport { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\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 it`s 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 moreLabel,\n lessLabel,\n onChange,\n children,\n shouldEnableKeyboardHighlighting,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting,\n );\n\n const [internalIsOpen, setInternalIsOpen] = useState(false);\n const [showClamp, setShowClamp] = useState(true);\n const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);\n const [originalHeight, setOriginalHeight] = useState(0);\n const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);\n const [hasSizeChanged, setHasSizeChanged] = useState(false);\n const [initialRender, setInitialRender] = useState(true);\n const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = useState(false);\n\n const [originalSmallHeight, setOriginalSmallHeight] = useState(0);\n const [originalBigHeight, setOriginalBigHeight] = useState(0);\n\n useEffect(() => {\n setInitialRender(false);\n }, []);\n\n const parentRef = useRef<HTMLDivElement>(null);\n const pseudoChildrenRef = useRef<HTMLDivElement>(null);\n const childrenRef = useRef<HTMLDivElement>(null);\n const originalChildrenRef = useRef<HTMLDivElement>(null);\n const hasCollapsed = useRef(false);\n const isAnimating = useRef(false);\n const hasSizeRecentlyChanged = useRef(false);\n const canResetSizeChanged = useRef(true);\n\n useEffect(() => {\n if (typeof isOpen === 'boolean') {\n setInternalIsOpen(isOpen);\n setShowClamp(!isOpen);\n }\n }, [isOpen]);\n\n // Changes the state of the truncation\n const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n (event) => {\n setInternalIsOpen((current) => {\n if (typeof onChange === 'function') {\n onChange(event, !current);\n }\n\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 useEffect(() => {\n if (children) {\n setShouldSkipChangeCheck(true);\n\n window.setTimeout(() => {\n setShouldSkipChangeCheck(false);\n }, 200);\n }\n }, [children]);\n\n const handleAnimationEnd = useCallback(() => {\n hasCollapsed.current = true;\n isAnimating.current = false;\n\n if (canResetSizeChanged.current) {\n setHasSizeChanged(false);\n canResetSizeChanged.current = false;\n }\n\n window.setTimeout(() => {\n hasSizeRecentlyChanged.current = false;\n }, 10);\n\n setShouldShowCollapsedElement(!internalIsOpen);\n\n window.setTimeout(() => {\n hasCollapsed.current = false;\n }, 30);\n }, [internalIsOpen]);\n\n useEffect(() => {\n if (!pseudoChildrenRef.current) {\n return;\n }\n\n setOriginalHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);\n\n truncateElement(pseudoChildrenRef.current, collapsedHeight);\n\n setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);\n setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);\n }, [collapsedHeight, pseudoChildrenRef, children]);\n\n // Checks if the clamp should be shown\n useEffect(() => {\n if (\n pseudoChildrenRef.current &&\n (!hasSizeChanged \|\| shouldSkipChangeCheck) &&\n !initialRender\n ) {\n setShowClamp(originalHeight > newCollapsedHeight);\n }\n }, [\n shouldSkipChangeCheck,\n collapsedHeight,\n hasSizeChanged,\n initialRender,\n newCollapsedHeight,\n originalHeight,\n children,\n ]);\n\n useEffect(() => {\n if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {\n while (childrenRef.current.firstChild) {\n childrenRef.current.removeChild(childrenRef.current.firstChild);\n }\n\n childrenRef.current.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? pseudoChildrenRef.current\n : originalChildrenRef.current,\n );\n\n parentRef.current?.appendChild(\n shouldShowCollapsedElement && !internalIsOpen\n ? originalChildrenRef.current\n : pseudoChildrenRef.current,\n );\n\n (childrenRef.current.children[0] as HTMLDivElement).style.visibility = 'visible';\n }\n }, [children, internalIsOpen, shouldShowCollapsedElement]);\n\n useIsomorphicLayoutEffect(() => {\n if (originalChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setOriginalHeight(\n observedHeight < originalBigHeight ? originalBigHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(originalChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalBigHeight, children]);\n\n useIsomorphicLayoutEffect(() => {\n if (pseudoChildrenRef.current) {\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries && entries[0]) {\n const observedHeight = entries[0].contentRect.height;\n\n setNewCollapsedHeight(\n observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight,\n );\n\n if (\n !hasCollapsed.current &&\n !isAnimating.current &&\n !hasSizeRecentlyChanged.current\n ) {\n void debounce(() => {\n canResetSizeChanged.current = true;\n }, 250)();\n\n setHasSizeChanged(true);\n hasSizeRecentlyChanged.current = true;\n }\n }\n });\n\n resizeObserver.observe(pseudoChildrenRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }\n\n return () => {};\n }, [originalSmallHeight, children]);\n\n const ts = textStrings.components.truncation;\n\n const internalMoreLabel = moreLabel ?? <Textstring textstring={ttsToITextString(ts.more)} />;\n const internalLessLabel = lessLabel ?? <Textstring textstring={ttsToITextString(ts.less)} />;\n\n return useMemo(\n () => (\n <StyledTruncation className=\"beta-chayns-truncation\" ref={parentRef}>\n <StyledTruncationPseudoContent ref={pseudoChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledTruncationPseudoContent ref={originalChildrenRef}>\n {children}\n </StyledTruncationPseudoContent>\n <StyledMotionTruncationContent\n animate={{ height: internalIsOpen ? originalHeight : newCollapsedHeight }}\n initial={false}\n transition={{ type: 'tween', duration: hasSizeChanged ? 0 : 0.2 }}\n onAnimationComplete={handleAnimationEnd}\n onAnimationStart={() => {\n isAnimating.current = true;\n }}\n ref={childrenRef}\n />\n {showClamp && (\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 children,\n clampPosition,\n handleAnimationEnd,\n handleClampClick,\n handleClampKeyDown,\n hasSizeChanged,\n internalIsOpen,\n lessLabel,\n moreLabel,\n newCollapsedHeight,\n originalHeight,\n shouldShowKeyboardHighlighting,\n showClamp,\n ],\n );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 import { ClampPosition } from '../../types/truncation';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledTruncation = styled.div`
     position: relative;
     overflow: hidden;
@@ -38,8 +39,24 @@ export const StyledTruncationClampWrapper = styled.div`
   }
 }}
 `;
+export const StyledTruncationClampFocusWrapper = styled.div`
+    display: inline-block;
+    border-radius: 3px;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-within {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss};
+                color: inherit;
+            }
+        `}
+`;
 export const StyledTruncationClamp = styled.a`
     cursor: pointer;
     z-index: 2;
+    display: inline-block;
+    line-height: 1.2;
 `;
 //# sourceMappingURL=Truncation.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","Left","Middle","StyledTruncationClamp","a"],"sources":["../../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTruncation = styled.div`\n position: relative;\n overflow: hidden;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)`\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n visibility: hidden;\n position: absolute;\n width: 100%;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n display: flex;\n\n ${({ $position }) => {\n switch ($position) {\n case ClampPosition.Left:\n return css`\n justify-content: left;\n `;\n case ClampPosition.Middle:\n return css`\n justify-content: center;\n `;\n default:\n return css`\n justify-content: right;\n `;\n }\n }}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n cursor: pointer;\n z-index: 2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;~~AAGtD~~,OAAO,MAAMC,gBAAgB,~~GAAGH~~,MAAM,~~CAACI~~,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,~~GAAGL~~,MAAM,CAACD,MAAM,~~CAACK~~,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,~~GAAGN~~,MAAM,~~CAACI~~,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,~~GAAGP~~,MAAM,~~CAACI~~,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEI;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,~~KAAKN~~,aAAa,~~CAACO~~,IAAI;MACnB,~~OAAOR~~,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,aAAa,~~CAACQ~~,MAAM;MACrB,~~OAAOT~~,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAED,OAAO,~~MAAMU~~,qBAAqB,~~GAAGX~~,MAAM,~~CAACY~~,CAAC;AAC7C;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"Truncation.styles.js","names":["motion","styled","css","ClampPosition","keyboardFocusHighlightingRingCss","StyledTruncation","div","StyledMotionTruncationContent","StyledTruncationPseudoContent","StyledTruncationClampWrapper","$position","Left","Middle","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","StyledTruncationClamp","a"],"sources":["../../../../src/components/truncation/Truncation.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ClampPosition } from '../../types/truncation';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\nexport const StyledTruncation = styled.div`\n position: relative;\n overflow: hidden;\n`;\n\n// Fix framer-motion bug\nexport const StyledMotionTruncationContent = styled(motion.div)`\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledTruncationPseudoContent = styled.div`\n visibility: hidden;\n position: absolute;\n width: 100%;\n`;\n\ntype StyledTruncationClampWrapperProps = WithTheme<{ $position: ClampPosition }>;\n\nexport const StyledTruncationClampWrapper = styled.div<StyledTruncationClampWrapperProps>`\n display: flex;\n\n ${({ $position }) => {\n switch ($position) {\n case ClampPosition.Left:\n return css`\n justify-content: left;\n `;\n case ClampPosition.Middle:\n return css`\n justify-content: center;\n `;\n default:\n return css`\n justify-content: right;\n `;\n }\n }}\n`;\n\ntype StyledTruncationClampProps = {\n $shouldShowKeyboardHighlighting: boolean;\n};\n\nexport const StyledTruncationClampFocusWrapper = styled.div<StyledTruncationClampProps>`\n display: inline-block;\n border-radius: 3px;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-within {\n transition: none;\n ${keyboardFocusHighlightingRingCss};\n color: inherit;\n }\n `}\n`;\n\nexport const StyledTruncationClamp = styled.a`\n cursor: pointer;\n z-index: 2;\n display: inline-block;\n line-height: 1.2;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,aAAa,QAAQ,wBAAwB;AAEtD,SAASC,gCAAgC,QAAQ,8CAA8C;AAE/F,OAAO,MAAMC,gBAAgB,GAAGJ,MAAM,CAACK,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACA,OAAO,MAAMC,6BAA6B,GAAGN,MAAM,CAACD,MAAM,CAACM,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGP,MAAM,CAACK,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMG,4BAA4B,GAAGR,MAAM,CAACK,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEI;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKP,aAAa,CAACQ,IAAI;MACnB,OAAOT,GAAG;AAC1B;AACA,iBAAiB;IACL,KAAKC,aAAa,CAACS,MAAM;MACrB,OAAOV,GAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAOA,GAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAMD,OAAO,MAAMW,iCAAiC,GAAGZ,MAAM,CAACK,GAA+B;AACvF;AACA;AACA;AACA,MAAM,CAAC;EAAEQ;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BZ,GAAG;AACX;AACA;AACA,kBAAkBE,gCAAgC;AAClD;AACA;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMW,qBAAqB,GAAGd,MAAM,CAACe,CAAC;AAC7C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}