@chayns-components/core 5.5.24 → 5.5.25

package/AGENTS.md

@@ -1497,6 +1497,25 @@ import { CopyableContent } from '@chayns-components/core';
 />
 ```
 
+#### Collapsed
+
+```tsx
+<CopyableContent
+    collapsedHeight={180}
+    content={Array.from(
+            { length: 12 },
+            (_, index) =>
+                `### Abschnitt ${index + 1}\n\nDas Planungsteam hat die Hinweise aus den Gesprächen aufgenommen und bereitet jetzt die nächsten Schritte vor.`,
+        ).join('\n\n')}
+/>
+```
+
+#### Typewriter Loop
+
+```tsx
+<CopyableContent />
+```
+
 #### Markdown
 
 ```tsx
@@ -5075,6 +5094,31 @@ import { Button, Truncation } from '@chayns-components/core';
 </Truncation>
 ```
 
+#### Typewriter Loop
+
+```tsx
+<Truncation
+    collapsedHeight={100}
+>
+    {
+        <div>
+                <p id="isPasted">
+                    Der legendärste Abend: Homecoming at next! Studenten und Ausreißer, Urlauber und
+                    Daheimgebliebene, Partymäuse und Partymuffel – sie alle zieht es am Tag vor Heiligabend
+                    in die Heimat an einen zuvor ausgemachten Ort, um all die guten Freunde und alte
+                    Bekannte wiederzutreffen.
+                </p>
+                <p>
+                    Was damals vor vielen Jahren auf der StattAlm auf dem Campus in Ahaus begann, führen wir
+                    bei uns im next fort!&nbsp;
+                </p>
+                <p>Alle Infos und Tickets zum Event in Kürze.&nbsp;</p>
+                <Button onClick={() => alert('hallo')}>test</Button>
+            </div>
+    }
+</Truncation>
+```
+
 #### Small Text
 
 ```tsx

package/lib/cjs/components/copyable-content/CopyableContent.test.js

@@ -7,6 +7,37 @@ var _CopyableContent = _interopRequireDefault(require("./CopyableContent"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 
+_vitest.vi.mock('@chayns-components/textstring', () => ({
+  Textstring: ({
+    textstring
+  }) => textstring.fallback,
+  TextstringProvider: ({
+    children
+  }) => children,
+  ttsToITextString: textstring => textstring,
+  useTextstringValue: ({
+    textstring
+  }) => textstring.fallback
+}));
+const resizeObserverCallbacks = [];
+class ResizeObserverMock {
+  constructor(callback) {
+    resizeObserverCallbacks.push(callback);
+  }
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+}
+_vitest.vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+const triggerResize = height => {
+  resizeObserverCallbacks.forEach(callback => {
+    callback([{
+      contentRect: {
+        height
+      }
+    }]);
+  });
+};
 _vitest.vi.mock('../icon/Icon', () => ({
   default: ({
     icons
@@ -88,14 +119,17 @@ const readBlob = blob => new Promise((resolve, reject) => {
     (0, _vitest.expect)(container.querySelector('[data-copy-action="false"]')).toBeInTheDocument();
     (0, _vitest.expect)(container.querySelector('[data-calling-code-action="false"]')).toBeInTheDocument();
   });
-  (0, _vitest.it)('supports collapsed content', () => {
+  (0, _vitest.it)('supports collapsed content', async () => {
     (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_CopyableContent.default, {
       collapsedHeight: 100,
       content: Array(20).fill('Long content').join('\n\n')
     }));
-    (0, _vitest.expect)(_react.screen.getByRole('button', {
-      name: 'Mehr anzeigen'
-    })).toBeInTheDocument();
+    triggerResize(240);
+    await (0, _react.waitFor)(() => {
+      (0, _vitest.expect)(_react.screen.getByRole('button', {
+        name: 'Mehr'
+      })).toBeInTheDocument();
+    });
   });
 });
 //# sourceMappingURL=CopyableContent.test.js.map

package/lib/cjs/components/copyable-content/CopyableContent.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableContent.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_CopyableContent","e","__esModule","default","vi","mock","icons","createElement","join","children","shouldShowCallingCodeAction","shouldShowCopyAction","importOriginal","createDialog","fn","open","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","describe","it","render","content","expect","screen","getByRole","name","toBeInTheDocument","toHaveAttribute","document","querySelector","not","write","spyOn","navigator","clipboard","mockResolvedValue","fireEvent","click","waitFor","toHaveBeenCalled","item","calls","getType","resolves","toBe","container","collapsedHeight","Array","fill"],"sources":["../../../../src/components/copyable-content/CopyableContent.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport CopyableContent from './CopyableContent';\n\nvi.mock('../icon/Icon', () => ({\n    default: ({ icons }: { icons: string[] }) => <span data-icons={icons.join(' ')} />,\n}));\n\nvi.mock('../sharing-context-menu/SharingContextMenu', () => ({\n    default: ({\n        children,\n        shouldShowCallingCodeAction,\n        shouldShowCopyAction,\n    }: {\n        children: React.ReactNode;\n        shouldShowCallingCodeAction?: boolean;\n        shouldShowCopyAction?: boolean;\n    }) => (\n        <div\n            data-calling-code-action={shouldShowCallingCodeAction}\n            data-copy-action={shouldShowCopyAction}\n        >\n            {children}\n        </div>\n    ),\n}));\n\nvi.mock('chayns-api', async (importOriginal) => ({\n    ...(await importOriginal<typeof import('chayns-api')>()),\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\nconst readBlob = (blob: Blob) =>\n    new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onerror = () => reject(reader.error);\n        reader.onload = () => resolve(reader.result as string);\n        reader.readAsText(blob);\n    });\n\ndescribe('CopyableContent', () => {\n    it('renders formatted markdown without active input HTML', () => {\n        render(\n            <CopyableContent\n                content={\n                    '# Heading\\n\\n- Entry\\n\\n[Link](https://example.com)\\n<script onload=\"x\">bad</script>'\n                }\n            />,\n        );\n\n        expect(screen.getByRole('heading', { name: 'Heading' })).toBeInTheDocument();\n        expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(\n            'href',\n            'https://example.com',\n        );\n        expect(document.querySelector('script')).not.toBeInTheDocument();\n        expect(document.querySelector('[onload]')).not.toBeInTheDocument();\n    });\n\n    it('copies content instead of custom children', async () => {\n        const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n        render(<CopyableContent content=\"source markdown\">Visible replacement</CopyableContent>);\n\n        fireEvent.click(screen.getByRole('button', { name: 'Kopieren' }));\n\n        await waitFor(() => expect(write).toHaveBeenCalled());\n        const item = write.mock.calls[0][0][0] as unknown as ClipboardItem;\n        await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('source markdown');\n    });\n\n    it('shows a checkmark after a successful copy', async () => {\n        vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n        const { container } = render(<CopyableContent content=\"source\" />);\n\n        fireEvent.click(screen.getByRole('button', { name: 'Kopieren' }));\n\n        await waitFor(() => {\n            expect(container.querySelector('[data-icons=\"fa fa-check\"]')).toBeInTheDocument();\n        });\n    });\n\n    it('offers sharing actions', () => {\n        const { container } = render(<CopyableContent content=\"source\" />);\n\n        expect(screen.getByRole('button', { name: 'Teilen' })).toBeInTheDocument();\n        expect(container.querySelector('[data-copy-action=\"false\"]')).toBeInTheDocument();\n        expect(container.querySelector('[data-calling-code-action=\"false\"]')).toBeInTheDocument();\n    });\n\n    it('supports collapsed content', () => {\n        render(\n            <CopyableContent\n                collapsedHeight={100}\n                content={Array(20).fill('Long content').join('\\n\\n')}\n            />,\n        );\n\n        expect(screen.getByRole('button', { name: 'Mehr anzeigen' })).toBeInTheDocument();\n    });\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CopyableContent.test.js","names":["_react","require","_react2","_interopRequireDefault","_vitest","_CopyableContent","e","__esModule","default","vi","mock","Textstring","textstring","fallback","TextstringProvider","children","ttsToITextString","useTextstringValue","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","icons","createElement","join","shouldShowCallingCodeAction","shouldShowCopyAction","importOriginal","createDialog","fn","open","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","describe","it","render","content","expect","screen","getByRole","name","toBeInTheDocument","toHaveAttribute","document","querySelector","not","write","spyOn","navigator","clipboard","mockResolvedValue","fireEvent","click","waitFor","toHaveBeenCalled","item","calls","getType","resolves","toBe","container","collapsedHeight","Array","fill"],"sources":["../../../../src/components/copyable-content/CopyableContent.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport { fireEvent, render, screen, waitFor } from '@testing-library/react';\nimport React from 'react';\nimport { describe, expect, it, vi } from 'vitest';\nimport CopyableContent from './CopyableContent';\n\nvi.mock('@chayns-components/textstring', () => ({\n    Textstring: ({ textstring }: { textstring: { fallback: string } }) => textstring.fallback,\n    TextstringProvider: ({ children }: { children: React.ReactNode }) => children,\n    ttsToITextString: (textstring: { fallback: string }) => textstring,\n    useTextstringValue: ({ textstring }: { textstring: { fallback: string } }) =>\n        textstring.fallback,\n}));\n\ntype ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;\n\nconst resizeObserverCallbacks: ResizeObserverCallback[] = [];\n\nclass ResizeObserverMock {\n    constructor(callback: ResizeObserverCallback) {\n        resizeObserverCallbacks.push(callback);\n    }\n\n    disconnect() {}\n\n    observe() {}\n\n    unobserve() {}\n}\n\nvi.stubGlobal('ResizeObserver', ResizeObserverMock);\n\nconst triggerResize = (height: number) => {\n    resizeObserverCallbacks.forEach((callback) => {\n        callback([\n            {\n                contentRect: { height } as DOMRectReadOnly,\n            } as ResizeObserverEntry,\n        ]);\n    });\n};\n\nvi.mock('../icon/Icon', () => ({\n    default: ({ icons }: { icons: string[] }) => <span data-icons={icons.join(' ')} />,\n}));\n\nvi.mock('../sharing-context-menu/SharingContextMenu', () => ({\n    default: ({\n        children,\n        shouldShowCallingCodeAction,\n        shouldShowCopyAction,\n    }: {\n        children: React.ReactNode;\n        shouldShowCallingCodeAction?: boolean;\n        shouldShowCopyAction?: boolean;\n    }) => (\n        <div\n            data-calling-code-action={shouldShowCallingCodeAction}\n            data-copy-action={shouldShowCopyAction}\n        >\n            {children}\n        </div>\n    ),\n}));\n\nvi.mock('chayns-api', async (importOriginal) => ({\n    ...(await importOriginal<typeof import('chayns-api')>()),\n    createDialog: vi.fn(() => ({ open: vi.fn() })),\n}));\n\nconst readBlob = (blob: Blob) =>\n    new Promise<string>((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onerror = () => reject(reader.error);\n        reader.onload = () => resolve(reader.result as string);\n        reader.readAsText(blob);\n    });\n\ndescribe('CopyableContent', () => {\n    it('renders formatted markdown without active input HTML', () => {\n        render(\n            <CopyableContent\n                content={\n                    '# Heading\\n\\n- Entry\\n\\n[Link](https://example.com)\\n<script onload=\"x\">bad</script>'\n                }\n            />,\n        );\n\n        expect(screen.getByRole('heading', { name: 'Heading' })).toBeInTheDocument();\n        expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(\n            'href',\n            'https://example.com',\n        );\n        expect(document.querySelector('script')).not.toBeInTheDocument();\n        expect(document.querySelector('[onload]')).not.toBeInTheDocument();\n    });\n\n    it('copies content instead of custom children', async () => {\n        const write = vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n        render(<CopyableContent content=\"source markdown\">Visible replacement</CopyableContent>);\n\n        fireEvent.click(screen.getByRole('button', { name: 'Kopieren' }));\n\n        await waitFor(() => expect(write).toHaveBeenCalled());\n        const item = write.mock.calls[0][0][0] as unknown as ClipboardItem;\n        await expect(readBlob(await item.getType('text/plain'))).resolves.toBe('source markdown');\n    });\n\n    it('shows a checkmark after a successful copy', async () => {\n        vi.spyOn(navigator.clipboard, 'write').mockResolvedValue();\n        const { container } = render(<CopyableContent content=\"source\" />);\n\n        fireEvent.click(screen.getByRole('button', { name: 'Kopieren' }));\n\n        await waitFor(() => {\n            expect(container.querySelector('[data-icons=\"fa fa-check\"]')).toBeInTheDocument();\n        });\n    });\n\n    it('offers sharing actions', () => {\n        const { container } = render(<CopyableContent content=\"source\" />);\n\n        expect(screen.getByRole('button', { name: 'Teilen' })).toBeInTheDocument();\n        expect(container.querySelector('[data-copy-action=\"false\"]')).toBeInTheDocument();\n        expect(container.querySelector('[data-calling-code-action=\"false\"]')).toBeInTheDocument();\n    });\n\n    it('supports collapsed content', async () => {\n        render(\n            <CopyableContent\n                collapsedHeight={100}\n                content={Array(20).fill('Long content').join('\\n\\n')}\n            />,\n        );\n\n        triggerResize(240);\n\n        await waitFor(() => {\n            expect(screen.getByRole('button', { name: 'Mehr' })).toBeInTheDocument();\n        });\n    });\n});\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _truncation = require("../../types/truncation");
-var _debounce = require("../../utils/debounce");
-var _truncation2 = require("../../utils/truncation");
 var _Truncation = require("./Truncation.styles");
-var _textstring = require("@chayns-components/textstring");
-var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
-var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
@@ -19,47 +17,62 @@ const Truncation = ({
   collapsedHeight = 150,
   clampPosition = _truncation.ClampPosition.Right,
   isOpen,
-  moreLabel,
   lessLabel,
+  moreLabel,
   onChange,
   children,
   shouldEnableKeyboardHighlighting
 }) => {
   const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting);
-  const [internalIsOpen, setInternalIsOpen] = (0, _react.useState)(false);
-  const [showClamp, setShowClamp] = (0, _react.useState)(true);
-  const [newCollapsedHeight, setNewCollapsedHeight] = (0, _react.useState)(collapsedHeight);
-  const [originalHeight, setOriginalHeight] = (0, _react.useState)(0);
-  const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = (0, _react.useState)(true);
-  const [hasSizeChanged, setHasSizeChanged] = (0, _react.useState)(false);
-  const [initialRender, setInitialRender] = (0, _react.useState)(true);
-  const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = (0, _react.useState)(false);
-  const [originalSmallHeight, setOriginalSmallHeight] = (0, _react.useState)(0);
-  const [originalBigHeight, setOriginalBigHeight] = (0, _react.useState)(0);
-  (0, _react.useEffect)(() => {
-    setInitialRender(false);
-  }, []);
-  const parentRef = (0, _react.useRef)(null);
-  const pseudoChildrenRef = (0, _react.useRef)(null);
-  const childrenRef = (0, _react.useRef)(null);
-  const originalChildrenRef = (0, _react.useRef)(null);
-  const hasCollapsed = (0, _react.useRef)(false);
-  const isAnimating = (0, _react.useRef)(false);
-  const hasSizeRecentlyChanged = (0, _react.useRef)(false);
-  const canResetSizeChanged = (0, _react.useRef)(true);
+  const contentRef = (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);
   (0, _react.useEffect)(() => {
     if (typeof isOpen === 'boolean') {
       setInternalIsOpen(isOpen);
-      setShowClamp(!isOpen);
     }
   }, [isOpen]);
-
-  // Changes the state of the truncation
+  useIsomorphicLayoutEffect(() => {
+    if (!contentRef.current) {
+      return () => {};
+    }
+    let frame;
+    const updateContentHeight = entries => {
+      var _entries$;
+      pendingObservedHeight.current = Math.max(pendingObservedHeight.current, (entries === null || entries === void 0 || (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.height) ?? 0);
+      if (frame !== undefined) {
+        return;
+      }
+      frame = window.requestAnimationFrame(() => {
+        frame = undefined;
+        if (!contentRef.current) {
+          return;
+        }
+        setContentHeight(Math.max(pendingObservedHeight.current, contentRef.current.scrollHeight, contentRef.current.getBoundingClientRect().height));
+        pendingObservedHeight.current = 0;
+      });
+    };
+    const resizeObserver = new ResizeObserver(entries => updateContentHeight(entries));
+    const mutationObserver = new MutationObserver(() => updateContentHeight());
+    resizeObserver.observe(contentRef.current);
+    mutationObserver.observe(contentRef.current, {
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+    updateContentHeight();
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      if (frame !== undefined) {
+        window.cancelAnimationFrame(frame);
+      }
+    };
+  }, [children]);
   const handleClampClick = (0, _react.useCallback)(event => {
     setInternalIsOpen(current => {
-      if (typeof onChange === 'function') {
-        onChange(event, !current);
-      }
+      onChange === null || onChange === void 0 || onChange(event, !current);
       return !current;
     });
   }, [onChange]);
@@ -69,130 +82,29 @@ const Truncation = ({
       event.currentTarget.click();
     }
   }, []);
-  (0, _react.useEffect)(() => {
-    if (children) {
-      setShouldSkipChangeCheck(true);
-      window.setTimeout(() => {
-        setShouldSkipChangeCheck(false);
-      }, 200);
-    }
-  }, [children]);
-  const handleAnimationEnd = (0, _react.useCallback)(() => {
-    hasCollapsed.current = true;
-    isAnimating.current = false;
-    if (canResetSizeChanged.current) {
-      setHasSizeChanged(false);
-      canResetSizeChanged.current = false;
-    }
-    window.setTimeout(() => {
-      hasSizeRecentlyChanged.current = false;
-    }, 10);
-    setShouldShowCollapsedElement(!internalIsOpen);
-    window.setTimeout(() => {
-      hasCollapsed.current = false;
-    }, 30);
-  }, [internalIsOpen]);
-  (0, _react.useEffect)(() => {
-    if (!pseudoChildrenRef.current) {
-      return;
-    }
-    setOriginalHeight(pseudoChildrenRef.current.offsetHeight);
-    setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);
-    (0, _truncation2.truncateElement)(pseudoChildrenRef.current, collapsedHeight);
-    setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);
-    setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);
-  }, [collapsedHeight, pseudoChildrenRef, children]);
-
-  // Checks if the clamp should be shown
-  (0, _react.useEffect)(() => {
-    if (pseudoChildrenRef.current && (!hasSizeChanged || shouldSkipChangeCheck) && !initialRender) {
-      setShowClamp(originalHeight > newCollapsedHeight);
-    }
-  }, [shouldSkipChangeCheck, collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight, children]);
-  (0, _react.useEffect)(() => {
-    if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {
-      var _parentRef$current;
-      while (childrenRef.current.firstChild) {
-        childrenRef.current.removeChild(childrenRef.current.firstChild);
-      }
-      childrenRef.current.appendChild(shouldShowCollapsedElement && !internalIsOpen ? pseudoChildrenRef.current : originalChildrenRef.current);
-      (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 || _parentRef$current.appendChild(shouldShowCollapsedElement && !internalIsOpen ? originalChildrenRef.current : pseudoChildrenRef.current);
-      childrenRef.current.children[0].style.visibility = 'visible';
-    }
-  }, [children, internalIsOpen, shouldShowCollapsedElement]);
-  useIsomorphicLayoutEffect(() => {
-    if (originalChildrenRef.current) {
-      const resizeObserver = new ResizeObserver(entries => {
-        if (entries && entries[0]) {
-          const observedHeight = entries[0].contentRect.height;
-          setOriginalHeight(observedHeight < originalBigHeight ? originalBigHeight : observedHeight);
-          if (!hasCollapsed.current && !isAnimating.current && !hasSizeRecentlyChanged.current) {
-            void (0, _debounce.debounce)(() => {
-              canResetSizeChanged.current = true;
-            }, 250)();
-            setHasSizeChanged(true);
-            hasSizeRecentlyChanged.current = true;
-          }
-        }
-      });
-      resizeObserver.observe(originalChildrenRef.current);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    return () => {};
-  }, [originalBigHeight, children]);
-  useIsomorphicLayoutEffect(() => {
-    if (pseudoChildrenRef.current) {
-      const resizeObserver = new ResizeObserver(entries => {
-        if (entries && entries[0]) {
-          const observedHeight = entries[0].contentRect.height;
-          setNewCollapsedHeight(observedHeight < originalSmallHeight ? originalSmallHeight : observedHeight);
-          if (!hasCollapsed.current && !isAnimating.current && !hasSizeRecentlyChanged.current) {
-            void (0, _debounce.debounce)(() => {
-              canResetSizeChanged.current = true;
-            }, 250)();
-            setHasSizeChanged(true);
-            hasSizeRecentlyChanged.current = true;
-          }
-        }
-      });
-      resizeObserver.observe(pseudoChildrenRef.current);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    return () => {};
-  }, [originalSmallHeight, children]);
-  const ts = _textStrings.default.components.truncation;
   const internalMoreLabel = moreLabel ?? /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
-    textstring: (0, _textstring.ttsToITextString)(ts.more)
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.truncation.more)
   });
   const internalLessLabel = lessLabel ?? /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
-    textstring: (0, _textstring.ttsToITextString)(ts.less)
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.truncation.less)
   });
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncation, {
-    className: "beta-chayns-truncation",
-    ref: parentRef
-  }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationPseudoContent, {
-    ref: pseudoChildrenRef
-  }, children), /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationPseudoContent, {
-    ref: originalChildrenRef
-  }, children), /*#__PURE__*/_react.default.createElement(_Truncation.StyledMotionTruncationContent, {
+  const hasOverflow = contentHeight > collapsedHeight;
+  const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);
+  const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;
+  return /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncation, {
+    className: "beta-chayns-truncation"
+  }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledMotionTruncationContent, {
     animate: {
-      height: internalIsOpen ? originalHeight : newCollapsedHeight
+      height: targetHeight
     },
     initial: false,
     transition: {
       type: 'tween',
-      duration: hasSizeChanged ? 0 : 0.2
-    },
-    onAnimationComplete: handleAnimationEnd,
-    onAnimationStart: () => {
-      isAnimating.current = true;
-    },
-    ref: childrenRef
-  }), showClamp && /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClampWrapper, {
+      duration: 0.2
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationContent, {
+    ref: contentRef
+  }, children)), hasOverflow && /*#__PURE__*/_react.default.createElement(_Truncation.StyledTruncationClampWrapper, {
     $position: clampPosition
   }, /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
     libraryName: "@chayns-components-core"
@@ -203,7 +115,7 @@ const Truncation = ({
     onKeyDown: handleClampKeyDown,
     role: "button",
     tabIndex: 0
-  }, internalIsOpen ? internalLessLabel : internalMoreLabel))))), [children, clampPosition, handleAnimationEnd, handleClampClick, handleClampKeyDown, hasSizeChanged, internalIsOpen, lessLabel, moreLabel, newCollapsedHeight, originalHeight, shouldShowKeyboardHighlighting, showClamp]);
+  }, internalIsOpen ? internalLessLabel : internalMoreLabel)))));
 };
 var _default = exports.default = Truncation;
 //# sourceMappingURL=Truncation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Truncation.js","names":["_react","_interopRequireWildcard","require","_truncation","_debounce","_truncation2","_Truncation","_textstring","_textStrings","_interopRequireDefault","_useKeyboardFocusHighlighting","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","moreLabel","lessLabel","onChange","children","shouldEnableKeyboardHighlighting","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","internalIsOpen","setInternalIsOpen","useState","showClamp","setShowClamp","newCollapsedHeight","setNewCollapsedHeight","originalHeight","setOriginalHeight","shouldShowCollapsedElement","setShouldShowCollapsedElement","hasSizeChanged","setHasSizeChanged","initialRender","setInitialRender","shouldSkipChangeCheck","setShouldSkipChangeCheck","originalSmallHeight","setOriginalSmallHeight","originalBigHeight","setOriginalBigHeight","parentRef","useRef","pseudoChildrenRef","childrenRef","originalChildrenRef","hasCollapsed","isAnimating","hasSizeRecentlyChanged","canResetSizeChanged","handleClampClick","useCallback","event","current","handleClampKeyDown","key","preventDefault","currentTarget","click","setTimeout","handleAnimationEnd","offsetHeight","truncateElement","_parentRef$current","firstChild","removeChild","appendChild","style","visibility","resizeObserver","ResizeObserver","entries","observedHeight","contentRect","height","debounce","observe","disconnect","ts","textStrings","components","truncation","internalMoreLabel","createElement","Textstring","textstring","ttsToITextString","more","internalLessLabel","less","useMemo","StyledTruncation","className","ref","StyledTruncationPseudoContent","StyledMotionTruncationContent","animate","initial","transition","type","duration","onAnimationComplete","onAnimationStart","StyledTruncationClampWrapper","$position","TextstringProvider","libraryName","StyledTruncationClampFocusWrapper","$shouldShowKeyboardHighlighting","StyledTruncationClamp","onClick","onKeyDown","role","tabIndex","_default","exports"],"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":[]}
+{"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":[]}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTruncationPseudoContent = exports.StyledTruncationClampWrapper = exports.StyledTruncationClampFocusWrapper = exports.StyledTruncationClamp = exports.StyledTruncation = exports.StyledMotionTruncationContent = void 0;
+exports.StyledTruncationContent = exports.StyledTruncationClampWrapper = exports.StyledTruncationClampFocusWrapper = exports.StyledTruncationClamp = exports.StyledTruncation = exports.StyledMotionTruncationContent = void 0;
 var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _truncation = require("../../types/truncation");
@@ -19,9 +19,8 @@ const StyledMotionTruncationContent = exports.StyledMotionTruncationContent = (0
     overflow: hidden;
     position: relative;
 `;
-const StyledTruncationPseudoContent = exports.StyledTruncationPseudoContent = _styledComponents.default.div`
-    visibility: hidden;
-    position: absolute;
+const StyledTruncationContent = exports.StyledTruncationContent = _styledComponents.default.div`
+    min-width: 0;
     width: 100%;
 `;
 const StyledTruncationClampWrapper = exports.StyledTruncationClampWrapper = _styledComponents.default.div`

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","StyledTruncationPseudoContent","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 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,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,6BAA6B,GAAAL,OAAA,CAAAK,6BAAA,GAAGJ,yBAAM,CAACC,GAAG;AACvD;AACA;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","_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":[]}

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _vitest = require("vitest");
+var _Truncation = _interopRequireDefault(require("./Truncation"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_vitest.vi.mock('@chayns-components/textstring', () => ({
+  Textstring: () => 'Mehr anzeigen',
+  TextstringProvider: ({
+    children
+  }) => children,
+  ttsToITextString: _vitest.vi.fn()
+}));
+const resizeObserverCallbacks = [];
+class ResizeObserverMock {
+  constructor(callback) {
+    resizeObserverCallbacks.push(callback);
+  }
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+}
+_vitest.vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+const triggerResize = height => {
+  resizeObserverCallbacks.forEach(callback => {
+    callback([{
+      contentRect: {
+        height
+      }
+    }]);
+  });
+};
+(0, _vitest.afterEach)(() => {
+  resizeObserverCallbacks.length = 0;
+});
+(0, _vitest.describe)('Truncation', () => {
+  (0, _vitest.it)('shows the more action when content exceeds the collapsed height', async () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_Truncation.default, {
+      collapsedHeight: 100
+    }, /*#__PURE__*/_react2.default.createElement("div", null, "Long content")));
+    triggerResize(240);
+    await (0, _react.waitFor)(() => {
+      (0, _vitest.expect)(_react.screen.getByRole('button', {
+        name: 'Mehr anzeigen'
+      })).toBeInTheDocument();
+    });
+  });
+  (0, _vitest.it)('keeps short content expanded without a more action', async () => {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_Truncation.default, {
+      collapsedHeight: 100
+    }, /*#__PURE__*/_react2.default.createElement("div", null, "Short content")));
+    triggerResize(64);
+    await (0, _react.waitFor)(() => {
+      (0, _vitest.expect)(_react.screen.queryByRole('button', {
+        name: 'Mehr anzeigen'
+      })).not.toBeInTheDocument();
+    });
+  });
+});
+//# sourceMappingURL=Truncation.test.js.map