@chayns-components/core 5.5.30 → 5.5.34

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

@@ -10,13 +10,14 @@ var _AreaContextProvider = require("../area-provider/AreaContextProvider");
 var _Input = require("../input/Input.styles");
 var _TextArea = require("./TextArea.styles");
 var _resize = require("../../hooks/resize");
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
 var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
   "use memo";
 
   var _rightElement$props;
-  const $ = (0, _reactCompilerRuntime.c)(29);
+  const $ = (0, _reactCompilerRuntime.c)(31);
   const {
     isDisabled,
     isInvalid,
@@ -42,67 +43,78 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
   const shouldChangeColor = areaProvider.shouldChangeColor ?? false;
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
   let t3;
-  if ($[0] !== maxHeight) {
-    t3 = () => {
+  if ($[0] !== shouldShowKeyboardHighlighting) {
+    t3 = {
+      isEnabled: shouldShowKeyboardHighlighting
+    };
+    $[0] = shouldShowKeyboardHighlighting;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  (0, _useFocusRingPortal.useFocusRingPortal)(textareaRef, t3);
+  let t4;
+  if ($[2] !== maxHeight) {
+    t4 = () => {
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
         textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
         setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));
       }
     };
-    $[0] = maxHeight;
-    $[1] = t3;
+    $[2] = maxHeight;
+    $[3] = t4;
   } else {
-    t3 = $[1];
+    t4 = $[3];
   }
-  const adjustTextareaHeight = t3;
-  let t4;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = () => textareaRef.current;
-    $[2] = t4;
+  const adjustTextareaHeight = t4;
+  let t5;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => textareaRef.current;
+    $[4] = t5;
   } else {
-    t4 = $[2];
+    t5 = $[4];
   }
-  (0, _react.useImperativeHandle)(ref, t4);
-  let t5;
+  (0, _react.useImperativeHandle)(ref, t5);
   let t6;
-  if ($[3] !== adjustTextareaHeight || $[4] !== value) {
-    t5 = () => {
+  let t7;
+  if ($[5] !== adjustTextareaHeight || $[6] !== value) {
+    t6 = () => {
       if (typeof value === "string" && value.length > -1) {
         adjustTextareaHeight();
       }
     };
-    t6 = [adjustTextareaHeight, value];
-    $[3] = adjustTextareaHeight;
-    $[4] = value;
-    $[5] = t5;
-    $[6] = t6;
+    t7 = [adjustTextareaHeight, value];
+    $[5] = adjustTextareaHeight;
+    $[6] = value;
+    $[7] = t6;
+    $[8] = t7;
   } else {
-    t5 = $[5];
-    t6 = $[6];
+    t6 = $[7];
+    t7 = $[8];
   }
-  (0, _react.useEffect)(t5, t6);
+  (0, _react.useEffect)(t6, t7);
   const hasValue = value !== undefined && value.length > 0;
-  let t7;
-  if ($[7] !== hasValue) {
-    t7 = hasValue ? {
+  let t8;
+  if ($[9] !== hasValue) {
+    t8 = hasValue ? {
       bottom: "2px",
       right: "2px"
     } : {
       top: "12px",
       left: "10px"
     };
-    $[7] = hasValue;
-    $[8] = t7;
+    $[9] = hasValue;
+    $[10] = t8;
   } else {
-    t7 = $[8];
+    t8 = $[10];
   }
-  const labelPosition = t7;
-  let t8;
-  if ($[9] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[10] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[11] !== hasValue || $[12] !== isDisabled || $[13] !== isInvalid || $[14] !== isOverflowing || $[15] !== labelPosition || $[16] !== maxHeight || $[17] !== minHeight || $[18] !== onBlur || $[19] !== onChange || $[20] !== onFocus || $[21] !== onKeyDown || $[22] !== placeholder || $[23] !== rightElement || $[24] !== shouldChangeColor || $[25] !== shouldShowBorder || $[26] !== shouldShowKeyboardHighlighting || $[27] !== value) {
+  const labelPosition = t8;
+  let t9;
+  if ($[11] !== (colors === null || colors === void 0 ? void 0 : colors.backgroundColor) || $[12] !== (colors === null || colors === void 0 ? void 0 : colors.borderColor) || $[13] !== hasValue || $[14] !== isDisabled || $[15] !== isInvalid || $[16] !== isOverflowing || $[17] !== labelPosition || $[18] !== maxHeight || $[19] !== minHeight || $[20] !== onBlur || $[21] !== onChange || $[22] !== onFocus || $[23] !== onKeyDown || $[24] !== placeholder || $[25] !== rightElement || $[26] !== shouldChangeColor || $[27] !== shouldShowBorder || $[28] !== shouldShowKeyboardHighlighting || $[29] !== value) {
     colors === null || colors === void 0 || colors.backgroundColor;
     colors === null || colors === void 0 || colors.borderColor;
-    t8 = (() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
+    t9 = (() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, {
       $isDisabled: isDisabled
     }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaContentWrapper, {
       $isInvalid: isInvalid,
@@ -141,30 +153,30 @@ const TextArea = /*#__PURE__*/(0, _react.forwardRef)((t0, ref) => {
     }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledRightElementWrapper, null, rightElement))), rightElement && !shouldShowBorder && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, {
       $isInline: true
     }, /*#__PURE__*/_react.default.createElement(_TextArea.StyledRightElementWrapper, null, rightElement))))();
-    $[9] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
-    $[10] = colors === null || colors === void 0 ? void 0 : colors.borderColor;
-    $[11] = hasValue;
-    $[12] = isDisabled;
-    $[13] = isInvalid;
-    $[14] = isOverflowing;
-    $[15] = labelPosition;
-    $[16] = maxHeight;
-    $[17] = minHeight;
-    $[18] = onBlur;
-    $[19] = onChange;
-    $[20] = onFocus;
-    $[21] = onKeyDown;
-    $[22] = placeholder;
-    $[23] = rightElement;
-    $[24] = shouldChangeColor;
-    $[25] = shouldShowBorder;
-    $[26] = shouldShowKeyboardHighlighting;
-    $[27] = value;
-    $[28] = t8;
+    $[11] = colors === null || colors === void 0 ? void 0 : colors.backgroundColor;
+    $[12] = colors === null || colors === void 0 ? void 0 : colors.borderColor;
+    $[13] = hasValue;
+    $[14] = isDisabled;
+    $[15] = isInvalid;
+    $[16] = isOverflowing;
+    $[17] = labelPosition;
+    $[18] = maxHeight;
+    $[19] = minHeight;
+    $[20] = onBlur;
+    $[21] = onChange;
+    $[22] = onFocus;
+    $[23] = onKeyDown;
+    $[24] = placeholder;
+    $[25] = rightElement;
+    $[26] = shouldChangeColor;
+    $[27] = shouldShowBorder;
+    $[28] = shouldShowKeyboardHighlighting;
+    $[29] = value;
+    $[30] = t9;
   } else {
-    t8 = $[28];
+    t9 = $[30];
   }
-  return t8;
+  return t9;
 });
 TextArea.displayName = 'TextArea';
 var _default = exports.default = TextArea;

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

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

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledTextAreaLabelWrapper = exports.StyledTextAreaLabel = exports.StyledTextAreaInput = exports.StyledTextAreaContentWrapper = exports.StyledTextAreaContent = exports.StyledTextArea = exports.StyledRightElementWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _react = require("motion/react");
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledTextArea = exports.StyledTextArea = _styledComponents.default.div`
     display: flex;
@@ -36,7 +35,6 @@ const StyledTextAreaContentWrapper = exports.StyledTextAreaContentWrapper = _sty
     &[data-should-show-keyboard-highlighting='true'] {
         &:focus-within {
             transition: none;
-            ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss}
         }
     }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","_react","_keyboardFocusHighlighting","e","__esModule","default","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","keyboardFocusHighlightingRingCss","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","motion","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AAAgG,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIzF,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAQM,MAAMC,4BAA4B,GAAAJ,OAAA,CAAAI,4BAAA,GAAGH,yBAAM,CAACC,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,cAAcC,2DAAgC;AAC9C;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAb,OAAA,CAAAa,qBAAA,GAAGZ,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASM,MAAMY,mBAAmB,GAAAd,OAAA,CAAAc,mBAAA,GAAGb,yBAAM,CAACc,QAAkC;AAC5E,aAAa,CAAC;EAAEV,KAAK;EAAEI;AAAqC,CAAC,KACrDA,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAGN,KAAK,CAACW,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;AAEM,MAAMC,0BAA0B,GAAApB,OAAA,CAAAoB,0BAAA,GAAG,IAAAnB,yBAAM,EAACoB,aAAM,CAACC,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAvB,OAAA,CAAAuB,mBAAA,GAAGtB,yBAAM,CAACqB,KAA+B;AACzE,aAAa,CAAC;EAAEjB,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;AAEM,MAAMmB,yBAAyB,GAAAxB,OAAA,CAAAwB,yBAAA,GAAGvB,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireDefault","require","_react","e","__esModule","default","StyledTextArea","exports","styled","div","$isDisabled","StyledTextAreaContentWrapper","theme","$shouldChangeColor","$backgroundColor","colorMode","$isInvalid","$borderColor","wrong","StyledTextAreaContent","StyledTextAreaInput","textarea","text","$isOverflowing","$maxHeight","$minHeight","StyledTextAreaLabelWrapper","motion","label","StyledTextAreaLabel","StyledRightElementWrapper"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { TextAreaProps } from './TextArea';\nimport { motion } from 'motion/react';\n\ntype StyledTextAreaProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledTextArea = styled.div<StyledTextAreaProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n`;\ntype StyledTextAreaContentWrapperProps = WithTheme<{\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderColor?: CSSProperties['borderColor'];\n    $isInvalid: TextAreaProps['isInvalid'];\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledTextAreaContentWrapper = styled.div<StyledTextAreaContentWrapperProps>`\n    background-color: ${({ theme, $shouldChangeColor, $backgroundColor }) =>\n        $backgroundColor ??\n        (theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'])};\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid, $borderColor }) =>\n            $borderColor ?? ($isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)')};\n    width: 100%;\n    display: flex;\n\n    &[data-should-show-keyboard-highlighting='true'] {\n        &:focus-within {\n            transition: none;\n        }\n    }\n`;\n\nexport const StyledTextAreaContent = styled.div`\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n    $isInvalid: TextAreaProps['isInvalid'];\n    $isOverflowing: boolean;\n    $maxHeight: CSSProperties['maxHeight'];\n    $minHeight: CSSProperties['minHeight'];\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    background: none;\n    border: none;\n    resize: none;\n    overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n    max-height: ${({ $maxHeight }: StyledTextAreaInputProps) =>\n        typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};\n    min-height: ${({ $minHeight }: StyledTextAreaInputProps) =>\n        typeof $minHeight === 'number' ? `${$minHeight}px` : $minHeight};\n    width: 100%;\n    padding: 8px 10px;\n    cursor: text;\n`;\n\nexport const StyledTextAreaLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: calc(100% - 20px);\n    cursor: text;\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<{ $isInvalid?: TextAreaProps['isInvalid'] }>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n    color: ${({ theme, $isInvalid }: StyledTextAreaLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n    line-height: 1.3;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    cursor: text;\n    text-overflow: ellipsis;\n`;\n\nexport const StyledRightElementWrapper = styled.div`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAI/B,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAwB;AAC7D;AACA;AACA;AACA,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA,CAAC;AAQM,MAAMC,4BAA4B,GAAAJ,OAAA,CAAAI,4BAAA,GAAGH,yBAAM,CAACC,GAAsC;AACzF,wBAAwB,CAAC;EAAEG,KAAK;EAAEC,kBAAkB;EAAEC;AAAiB,CAAC,KAChEA,gBAAgB,KACfF,KAAK,CAACG,SAAS,KAAK,SAAS,IAAIF,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC,CAAC;AAC3F;AACA;AACA,UAAU,CAAC;EAAEA,KAAK;EAAEI,UAAU;EAAEC;AAAa,CAAC,KAClCA,YAAY,KAAKD,UAAU,GAAGJ,KAAK,CAACM,KAAK,GAAG,0BAA0B,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,qBAAqB,GAAAZ,OAAA,CAAAY,qBAAA,GAAGX,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA,CAAC;AASM,MAAMW,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAGZ,yBAAM,CAACa,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;AAEM,MAAMC,0BAA0B,GAAAnB,OAAA,CAAAmB,0BAAA,GAAG,IAAAlB,yBAAM,EAACmB,aAAM,CAACC,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,mBAAmB,GAAAtB,OAAA,CAAAsB,mBAAA,GAAGrB,yBAAM,CAACoB,KAA+B;AACzE,aAAa,CAAC;EAAEhB,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;AAEM,MAAMkB,yBAAyB,GAAAvB,OAAA,CAAAuB,yBAAA,GAAGtB,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _textstring = require("@chayns-components/textstring");
 var _react = _interopRequireWildcard(require("react"));
-var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
+var _useFocusRingPortal = require("../../hooks/useFocusRingPortal");
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _truncation = require("../../types/truncation");
 var _Truncation = require("./Truncation.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -25,6 +26,7 @@ const Truncation = ({
 }) => {
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
   const contentRef = (0, _react.useRef)(null);
+  const clampRef = (0, _react.useRef)(null);
   const pendingObservedHeight = (0, _react.useRef)(0);
   const [internalIsOpen, setInternalIsOpen] = (0, _react.useState)(Boolean(isOpen));
   const [contentHeight, setContentHeight] = (0, _react.useState)(0);
@@ -33,6 +35,10 @@ const Truncation = ({
       setInternalIsOpen(isOpen);
     }
   }, [isOpen]);
+  const hasOverflow = contentHeight > collapsedHeight;
+  (0, _useFocusRingPortal.useFocusRingPortal)(clampRef, {
+    isEnabled: shouldShowKeyboardHighlighting && hasOverflow
+  });
   useIsomorphicLayoutEffect(() => {
     if (!contentRef.current) {
       return () => {};
@@ -88,7 +94,6 @@ const Truncation = ({
   const internalLessLabel = lessLabel ?? /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
     textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.truncation.less)
   });
-  const hasOverflow = contentHeight > collapsedHeight;
   const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);
   const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;
   return /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncation, {
@@ -108,9 +113,8 @@ const Truncation = ({
     $position: clampPosition
   }, /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
     libraryName: "@chayns-components-core"
-  }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClampFocusWrapper, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting
-  }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClamp, {
+  }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClampFocusWrapper, null, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClamp, {
+    ref: clampRef,
     onClick: handleClampClick,
     onKeyDown: handleClampKeyDown,
     role: "button",

package/lib/cjs/components/truncation/Truncation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.js","names":["_textstring","require","_react","_interopRequireWildcard","_useKeyboardFocusHighlighting","_textStrings","_interopRequireDefault","_truncation","_Truncation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","contentRef","useRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","useState","Boolean","contentHeight","setContentHeight","current","frame","updateContentHeight","entries","_entries$","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","useCallback","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","Textstring","textstring","ttsToITextString","textStrings","components","truncation","more","internalLessLabel","less","hasOverflow","collapsedContentHeight","min","targetHeight","StyledTruncation","className","StyledMotionTruncationContent","animate","initial","transition","type","duration","StyledTruncationContent","ref","StyledTruncationClampWrapper","$position","TextstringProvider","libraryName","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","StyledTruncationClamp","onClick","onKeyDown","role","tabIndex","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport React, {\n    FC,\n    KeyboardEventHandler,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport textStrings from '../../constants/textStrings';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampFocusWrapper,\n    StyledTruncationClampWrapper,\n    StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children element in its collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    lessLabel,\n    moreLabel,\n    onChange,\n    children,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n    const contentRef = useRef<HTMLDivElement>(null);\n    const pendingObservedHeight = useRef(0);\n    const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n    const [contentHeight, setContentHeight] = useState(0);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n        }\n    }, [isOpen]);\n\n    useIsomorphicLayoutEffect(() => {\n        if (!contentRef.current) {\n            return () => {};\n        }\n\n        let frame: number | undefined;\n        const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n            pendingObservedHeight.current = Math.max(\n                pendingObservedHeight.current,\n                entries?.[0]?.contentRect.height ?? 0,\n            );\n\n            if (frame !== undefined) {\n                return;\n            }\n\n            frame = window.requestAnimationFrame(() => {\n                frame = undefined;\n\n                if (!contentRef.current) {\n                    return;\n                }\n\n                setContentHeight(\n                    Math.max(\n                        pendingObservedHeight.current,\n                        contentRef.current.scrollHeight,\n                        contentRef.current.getBoundingClientRect().height,\n                    ),\n                );\n                pendingObservedHeight.current = 0;\n            });\n        };\n\n        const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n        const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n        resizeObserver.observe(contentRef.current);\n        mutationObserver.observe(contentRef.current, {\n            characterData: true,\n            childList: true,\n            subtree: true,\n        });\n        updateContentHeight();\n\n        return () => {\n            resizeObserver.disconnect();\n            mutationObserver.disconnect();\n\n            if (frame !== undefined) {\n                window.cancelAnimationFrame(frame);\n            }\n        };\n    }, [children]);\n\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                onChange?.(event, !current);\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    }, []);\n\n    const internalMoreLabel = moreLabel ?? (\n        <Textstring textstring={ttsToITextString(textStrings.components.truncation.more)} />\n    );\n    const internalLessLabel = lessLabel ?? (\n        <Textstring textstring={ttsToITextString(textStrings.components.truncation.less)} />\n    );\n    const hasOverflow = contentHeight > collapsedHeight;\n    const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);\n    const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;\n\n    return (\n        <StyledTruncation className=\"beta-chayns-truncation\">\n            <StyledMotionTruncationContent\n                animate={{ height: targetHeight }}\n                initial={false}\n                transition={{ type: 'tween', duration: 0.2 }}\n            >\n                <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n            </StyledMotionTruncationContent>\n            {hasOverflow && (\n                <StyledTruncationClampWrapper $position={clampPosition}>\n                    <TextstringProvider libraryName=\"@chayns-components-core\">\n                        <StyledTruncationClampFocusWrapper\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        >\n                            <StyledTruncationClamp\n                                onClick={handleClampClick}\n                                onKeyDown={handleClampKeyDown}\n                                role=\"button\"\n                                tabIndex={0}\n                            >\n                                {internalIsOpen ? internalLessLabel : internalMoreLabel}\n                            </StyledTruncationClamp>\n                        </StyledTruncationClampFocusWrapper>\n                    </TextstringProvider>\n                </StyledTruncationClampWrapper>\n            )}\n        </StyledTruncation>\n    );\n};\n\nexport default Truncation;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Truncation.js","names":["_textstring","require","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useFocusRingPortal","_useKeyboardFocusHighlighting","_truncation","_Truncation","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","Truncation","collapsedHeight","clampPosition","ClampPosition","Right","isOpen","lessLabel","moreLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","contentRef","useRef","clampRef","pendingObservedHeight","internalIsOpen","setInternalIsOpen","useState","Boolean","contentHeight","setContentHeight","hasOverflow","useFocusRingPortal","isEnabled","current","frame","updateContentHeight","entries","_entries$","Math","max","contentRect","height","undefined","requestAnimationFrame","scrollHeight","getBoundingClientRect","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","observe","characterData","childList","subtree","disconnect","cancelAnimationFrame","handleClampClick","useCallback","event","handleClampKeyDown","key","preventDefault","currentTarget","click","internalMoreLabel","createElement","Textstring","textstring","ttsToITextString","textStrings","components","truncation","more","internalLessLabel","less","collapsedContentHeight","min","targetHeight","StyledTruncation","className","StyledMotionTruncationContent","animate","initial","transition","type","duration","StyledTruncationContent","ref","StyledTruncationClampWrapper","$position","TextstringProvider","libraryName","StyledTruncationClampFocusWrapper","StyledTruncationClamp","onClick","onKeyDown","role","tabIndex","_default","exports"],"sources":["../../../../src/components/truncation/Truncation.tsx"],"sourcesContent":["import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';\nimport React, {\n    FC,\n    KeyboardEventHandler,\n    MouseEvent,\n    MouseEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useFocusRingPortal } from '../../hooks/useFocusRingPortal';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { ClampPosition } from '../../types/truncation';\nimport {\n    StyledMotionTruncationContent,\n    StyledTruncation,\n    StyledTruncationClamp,\n    StyledTruncationClampFocusWrapper,\n    StyledTruncationClampWrapper,\n    StyledTruncationContent,\n} from './Truncation.styles';\n\nexport type TruncationProps = {\n    /**\n     * The elements that should be expanding or collapsing.\n     */\n    children: ReactElement;\n    /**\n     * The position of the clamp.\n     */\n    clampPosition?: ClampPosition;\n    /**\n     * The height of the children element in its collapsed state.\n     */\n    collapsedHeight?: number;\n    /**\n     * If set to true, the content is exposed.\n     */\n    isOpen?: boolean;\n    /**\n     * A text that should be displayed if the content is expanded.\n     */\n    lessLabel?: string;\n    /**\n     * A text that should be displayed if the content is collapsed.\n     */\n    moreLabel?: string;\n    /**\n     * Function to be executed when the component is expanding or collapsing.\n     */\n    onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nconst Truncation: FC<TruncationProps> = ({\n    collapsedHeight = 150,\n    clampPosition = ClampPosition.Right,\n    isOpen,\n    lessLabel,\n    moreLabel,\n    onChange,\n    children,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n    const contentRef = useRef<HTMLDivElement>(null);\n    const clampRef = useRef<HTMLAnchorElement>(null);\n    const pendingObservedHeight = useRef(0);\n    const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));\n    const [contentHeight, setContentHeight] = useState(0);\n\n    useEffect(() => {\n        if (typeof isOpen === 'boolean') {\n            setInternalIsOpen(isOpen);\n        }\n    }, [isOpen]);\n\n    const hasOverflow = contentHeight > collapsedHeight;\n\n    useFocusRingPortal(clampRef, {\n        isEnabled: shouldShowKeyboardHighlighting && hasOverflow,\n    });\n\n    useIsomorphicLayoutEffect(() => {\n        if (!contentRef.current) {\n            return () => {};\n        }\n\n        let frame: number | undefined;\n        const updateContentHeight = (entries?: ResizeObserverEntry[]) => {\n            pendingObservedHeight.current = Math.max(\n                pendingObservedHeight.current,\n                entries?.[0]?.contentRect.height ?? 0,\n            );\n\n            if (frame !== undefined) {\n                return;\n            }\n\n            frame = window.requestAnimationFrame(() => {\n                frame = undefined;\n\n                if (!contentRef.current) {\n                    return;\n                }\n\n                setContentHeight(\n                    Math.max(\n                        pendingObservedHeight.current,\n                        contentRef.current.scrollHeight,\n                        contentRef.current.getBoundingClientRect().height,\n                    ),\n                );\n                pendingObservedHeight.current = 0;\n            });\n        };\n\n        const resizeObserver = new ResizeObserver((entries) => updateContentHeight(entries));\n        const mutationObserver = new MutationObserver(() => updateContentHeight());\n\n        resizeObserver.observe(contentRef.current);\n        mutationObserver.observe(contentRef.current, {\n            characterData: true,\n            childList: true,\n            subtree: true,\n        });\n        updateContentHeight();\n\n        return () => {\n            resizeObserver.disconnect();\n            mutationObserver.disconnect();\n\n            if (frame !== undefined) {\n                window.cancelAnimationFrame(frame);\n            }\n        };\n    }, [children]);\n\n    const handleClampClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(\n        (event) => {\n            setInternalIsOpen((current) => {\n                onChange?.(event, !current);\n                return !current;\n            });\n        },\n        [onChange],\n    );\n\n    const handleClampKeyDown = useCallback<KeyboardEventHandler<HTMLAnchorElement>>((event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    }, []);\n\n    const internalMoreLabel = moreLabel ?? (\n        <Textstring textstring={ttsToITextString(textStrings.components.truncation.more)} />\n    );\n    const internalLessLabel = lessLabel ?? (\n        <Textstring textstring={ttsToITextString(textStrings.components.truncation.less)} />\n    );\n    const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);\n    const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;\n\n    return (\n        <StyledTruncation className=\"beta-chayns-truncation\">\n            <StyledMotionTruncationContent\n                animate={{ height: targetHeight }}\n                initial={false}\n                transition={{ type: 'tween', duration: 0.2 }}\n            >\n                <StyledTruncationContent ref={contentRef}>{children}</StyledTruncationContent>\n            </StyledMotionTruncationContent>\n            {hasOverflow && (\n                <StyledTruncationClampWrapper $position={clampPosition}>\n                    <TextstringProvider libraryName=\"@chayns-components-core\">\n                        <StyledTruncationClampFocusWrapper>\n                            <StyledTruncationClamp\n                                ref={clampRef}\n                                onClick={handleClampClick}\n                                onKeyDown={handleClampKeyDown}\n                                role=\"button\"\n                                tabIndex={0}\n                            >\n                                {internalIsOpen ? internalLessLabel : internalMoreLabel}\n                            </StyledTruncationClamp>\n                        </StyledTruncationClampFocusWrapper>\n                    </TextstringProvider>\n                </StyledTruncationClampWrapper>\n            )}\n        </StyledTruncation>\n    );\n};\n\nexport default Truncation;\n"],"mappings":";;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAYA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,mBAAA,GAAAL,OAAA;AACA,IAAAM,6BAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAO6B,SAAAI,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAP,wBAAAO,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAX,uBAAA,YAAAA,CAAAO,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAqC7B,MAAMgB,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGC,sBAAe,GAAGC,gBAAS;AAE7F,MAAMC,UAA+B,GAAGA,CAAC;EACrCC,eAAe,GAAG,GAAG;EACrBC,aAAa,GAAGC,yBAAa,CAACC,KAAK;EACnCC,MAAM;EACNC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAMC,8BAA8B,GAAG,IAAAC,0DAA4B,EAC/DF,gCACJ,CAAC;EACD,MAAMG,UAAU,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC/C,MAAMC,QAAQ,GAAG,IAAAD,aAAM,EAAoB,IAAI,CAAC;EAChD,MAAME,qBAAqB,GAAG,IAAAF,aAAM,EAAC,CAAC,CAAC;EACvC,MAAM,CAACG,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAACC,OAAO,CAACf,MAAM,CAAC,CAAC;EACrE,MAAM,CAACgB,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAH,eAAQ,EAAC,CAAC,CAAC;EAErD,IAAApB,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOM,MAAM,KAAK,SAAS,EAAE;MAC7Ba,iBAAiB,CAACb,MAAM,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMkB,WAAW,GAAGF,aAAa,GAAGpB,eAAe;EAEnD,IAAAuB,sCAAkB,EAACT,QAAQ,EAAE;IACzBU,SAAS,EAAEd,8BAA8B,IAAIY;EACjD,CAAC,CAAC;EAEF3B,yBAAyB,CAAC,MAAM;IAC5B,IAAI,CAACiB,UAAU,CAACa,OAAO,EAAE;MACrB,OAAO,MAAM,CAAC,CAAC;IACnB;IAEA,IAAIC,KAAyB;IAC7B,MAAMC,mBAAmB,GAAIC,OAA+B,IAAK;MAAA,IAAAC,SAAA;MAC7Dd,qBAAqB,CAACU,OAAO,GAAGK,IAAI,CAACC,GAAG,CACpChB,qBAAqB,CAACU,OAAO,EAC7B,CAAAG,OAAO,aAAPA,OAAO,gBAAAC,SAAA,GAAPD,OAAO,CAAG,CAAC,CAAC,cAAAC,SAAA,uBAAZA,SAAA,CAAcG,WAAW,CAACC,MAAM,KAAI,CACxC,CAAC;MAED,IAAIP,KAAK,KAAKQ,SAAS,EAAE;QACrB;MACJ;MAEAR,KAAK,GAAG9B,MAAM,CAACuC,qBAAqB,CAAC,MAAM;QACvCT,KAAK,GAAGQ,SAAS;QAEjB,IAAI,CAACtB,UAAU,CAACa,OAAO,EAAE;UACrB;QACJ;QAEAJ,gBAAgB,CACZS,IAAI,CAACC,GAAG,CACJhB,qBAAqB,CAACU,OAAO,EAC7Bb,UAAU,CAACa,OAAO,CAACW,YAAY,EAC/BxB,UAAU,CAACa,OAAO,CAACY,qBAAqB,CAAC,CAAC,CAACJ,MAC/C,CACJ,CAAC;QACDlB,qBAAqB,CAACU,OAAO,GAAG,CAAC;MACrC,CAAC,CAAC;IACN,CAAC;IAED,MAAMa,cAAc,GAAG,IAAIC,cAAc,CAAEX,OAAO,IAAKD,mBAAmB,CAACC,OAAO,CAAC,CAAC;IACpF,MAAMY,gBAAgB,GAAG,IAAIC,gBAAgB,CAAC,MAAMd,mBAAmB,CAAC,CAAC,CAAC;IAE1EW,cAAc,CAACI,OAAO,CAAC9B,UAAU,CAACa,OAAO,CAAC;IAC1Ce,gBAAgB,CAACE,OAAO,CAAC9B,UAAU,CAACa,OAAO,EAAE;MACzCkB,aAAa,EAAE,IAAI;MACnBC,SAAS,EAAE,IAAI;MACfC,OAAO,EAAE;IACb,CAAC,CAAC;IACFlB,mBAAmB,CAAC,CAAC;IAErB,OAAO,MAAM;MACTW,cAAc,CAACQ,UAAU,CAAC,CAAC;MAC3BN,gBAAgB,CAACM,UAAU,CAAC,CAAC;MAE7B,IAAIpB,KAAK,KAAKQ,SAAS,EAAE;QACrBtC,MAAM,CAACmD,oBAAoB,CAACrB,KAAK,CAAC;MACtC;IACJ,CAAC;EACL,CAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC;EAEd,MAAMwC,gBAAgB,GAAG,IAAAC,kBAAW,EAC/BC,KAAK,IAAK;IACPjC,iBAAiB,CAAEQ,OAAO,IAAK;MAC3BlB,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG2C,KAAK,EAAE,CAACzB,OAAO,CAAC;MAC3B,OAAO,CAACA,OAAO;IACnB,CAAC,CAAC;EACN,CAAC,EACD,CAAClB,QAAQ,CACb,CAAC;EAED,MAAM4C,kBAAkB,GAAG,IAAAF,kBAAW,EAA2CC,KAAK,IAAK;IACvF,IAAIA,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;MAC5CF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBH,KAAK,CAACI,aAAa,CAACC,KAAK,CAAC,CAAC;IAC/B;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,iBAAiB,GAAGlD,SAAS,iBAC/BtC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAC3F,WAAA,CAAA4F,UAAU;IAACC,UAAU,EAAE,IAAAC,4BAAgB,EAACC,oBAAW,CAACC,UAAU,CAACC,UAAU,CAACC,IAAI;EAAE,CAAE,CACtF;EACD,MAAMC,iBAAiB,GAAG5D,SAAS,iBAC/BrC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAC3F,WAAA,CAAA4F,UAAU;IAACC,UAAU,EAAE,IAAAC,4BAAgB,EAACC,oBAAW,CAACC,UAAU,CAACC,UAAU,CAACG,IAAI;EAAE,CAAE,CACtF;EACD,MAAMC,sBAAsB,GAAGrC,IAAI,CAACsC,GAAG,CAAChD,aAAa,IAAIpB,eAAe,EAAEA,eAAe,CAAC;EAC1F,MAAMqE,YAAY,GAAGrD,cAAc,GAAGI,aAAa,IAAIpB,eAAe,GAAGmE,sBAAsB;EAE/F,oBACInG,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAA+F,gBAAgB;IAACC,SAAS,EAAC;EAAwB,gBAChDvG,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAiG,6BAA6B;IAC1BC,OAAO,EAAE;MAAExC,MAAM,EAAEoC;IAAa,CAAE;IAClCK,OAAO,EAAE,KAAM;IACfC,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE7C7G,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAuG,uBAAuB;IAACC,GAAG,EAAEnE;EAAW,GAAEJ,QAAkC,CAClD,CAAC,EAC/Bc,WAAW,iBACRtD,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAyG,4BAA4B;IAACC,SAAS,EAAEhF;EAAc,gBACnDjC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAC3F,WAAA,CAAAoH,kBAAkB;IAACC,WAAW,EAAC;EAAyB,gBACrDnH,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAA6G,iCAAiC,qBAC9BpH,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAA8G,qBAAqB;IAClBN,GAAG,EAAEjE,QAAS;IACdwE,OAAO,EAAEtC,gBAAiB;IAC1BuC,SAAS,EAAEpC,kBAAmB;IAC9BqC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAE;EAAE,GAEXzE,cAAc,GAAGiD,iBAAiB,GAAGT,iBACnB,CACQ,CACnB,CACM,CAEpB,CAAC;AAE3B,CAAC;AAAC,IAAAkC,QAAA,GAAAC,OAAA,CAAAjH,OAAA,GAEaqB,UAAU","ignoreList":[]}

package/lib/cjs/components/truncation/Truncation.styles.js

@@ -7,7 +7,6 @@ exports.StyledTruncationContent = exports.StyledTruncationClampWrapper = exports
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _truncation = require("../../types/truncation");
-var _keyboardFocusHighlighting = require("../../utils/keyboardFocusHighlighting.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledTruncation = exports.StyledTruncation = _styledComponents.default.div`
     position: relative;
@@ -48,16 +47,6 @@ const StyledTruncationClampWrapper = exports.StyledTruncationClampWrapper = _sty
 const StyledTruncationClampFocusWrapper = exports.StyledTruncationClampFocusWrapper = _styledComponents.default.div`
     display: inline-block;
     border-radius: 3px;
-
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && (0, _styledComponents.css)`
-            &:focus-within {
-                transition: none;
-                ${_keyboardFocusHighlighting.keyboardFocusHighlightingRingCss};
-                color: inherit;
-            }
-        `}
 `;
 const StyledTruncationClamp = exports.StyledTruncationClamp = _styledComponents.default.a`
     cursor: pointer;

package/lib/cjs/components/truncation/Truncation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Truncation.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_truncation","_keyboardFocusHighlighting","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTruncation","exports","styled","div","StyledMotionTruncationContent","motion","StyledTruncationContent","StyledTruncationClampWrapper","$position","ClampPosition","Left","css","Middle","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","keyboardFocusHighlightingRingCss","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 StyledTruncationContent = styled.div`\n    min-width: 0;\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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAEA,IAAAI,0BAAA,GAAAJ,OAAA;AAAgG,SAAAE,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzF,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACO,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAEM,MAAMG,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACC,GAAG;AACjD;AACA;AACA,CAAC;AAIM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEK;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,yBAAa,CAACC,IAAI;MACnB,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,yBAAa,CAACG,MAAM;MACrB,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAMM,MAAME,iCAAiC,GAAAZ,OAAA,CAAAY,iCAAA,GAAGX,yBAAM,CAACC,GAA+B;AACvF;AACA;AACA;AACA,MAAM,CAAC;EAAEW;AAAgC,CAAC,KAClCA,+BAA+B,IAC/B,IAAAH,qBAAG;AACX;AACA;AACA,kBAAkBI,2DAAgC;AAClD;AACA;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,qBAAqB,GAAAf,OAAA,CAAAe,qBAAA,GAAGd,yBAAM,CAACe,CAAC;AAC7C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Truncation.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_truncation","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledTruncation","exports","styled","div","StyledMotionTruncationContent","motion","StyledTruncationContent","StyledTruncationClampWrapper","$position","ClampPosition","Left","css","Middle","StyledTruncationClampFocusWrapper","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 StyledTruncationContent = styled.div`\n    min-width: 0;\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 StyledTruncationClampFocusWrapper = styled.div`\n    display: inline-block;\n    border-radius: 3px;\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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAuD,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGhD,MAAMkB,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA,CAAC;;AAED;AACO,MAAMC,6BAA6B,GAAAH,OAAA,CAAAG,6BAAA,GAAG,IAAAF,yBAAM,EAACG,aAAM,CAACF,GAAG,CAAC;AAC/D;AACA;AACA,CAAC;AAEM,MAAMG,uBAAuB,GAAAL,OAAA,CAAAK,uBAAA,GAAGJ,yBAAM,CAACC,GAAG;AACjD;AACA;AACA,CAAC;AAIM,MAAMI,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACC,GAAsC;AACzF;AACA;AACA,MAAM,CAAC;EAAEK;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,yBAAa,CAACC,IAAI;MACnB,OAAO,IAAAC,qBAAG;AAC1B;AACA,iBAAiB;IACL,KAAKF,yBAAa,CAACG,MAAM;MACrB,OAAO,IAAAD,qBAAG;AAC1B;AACA,iBAAiB;IACL;MACI,OAAO,IAAAA,qBAAG;AAC1B;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC;AAEM,MAAME,iCAAiC,GAAAZ,OAAA,CAAAY,iCAAA,GAAGX,yBAAM,CAACC,GAAG;AAC3D;AACA;AACA,CAAC;AAEM,MAAMW,qBAAqB,GAAAb,OAAA,CAAAa,qBAAA,GAAGZ,yBAAM,CAACa,CAAC;AAC7C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}