@chayns-components/core 5.5.24 → 5.5.26

package/lib/esm/components/copyable-content/CopyableContent.styles.js

@@ -1,16 +1,22 @@
 import styled from 'styled-components';
 import { CopyableContentAppearance } from './CopyableContent.types';
+export let CopyableContentColorMode = /*#__PURE__*/function (CopyableContentColorMode) {
+  CopyableContentColorMode["Dark"] = "dark";
+  CopyableContentColorMode["Light"] = "light";
+  return CopyableContentColorMode;
+}({});
 const getBackgroundColor = ({
   $appearance,
-  theme
+  $colorMode
 }) => {
   if ($appearance === CopyableContentAppearance.Chat) {
     return 'rgba(0, 0, 0, 0.12)';
   }
-  const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';
-  const opacity = theme.cardBackgroundOpacity ?? 1;
-  return `rgba(${secondaryColor}, ${opacity})`;
+  return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';
 };
+const getTextColor = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';
 export const StyledCopyableContent = styled.section`
     --copyable-content-action-size: 32px;
     --copyable-content-action-inset: 8px;
@@ -25,11 +31,39 @@ export const StyledCopyableContent = styled.section`
     );
     border-radius: 8px;
     background-color: ${getBackgroundColor};
-    color: ${({
-  theme
-}) => theme.text};
+    color: ${getTextColor};
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
 `;
+const getActionGroupBorder = ({
+  $colorMode,
+  $isSticky
+}) => {
+  if (!$isSticky) {
+    return 'transparent';
+  }
+  return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';
+};
+const getActionGroupBackground = ({
+  $colorMode,
+  $isSticky
+}) => {
+  if (!$isSticky) {
+    return 'transparent';
+  }
+  return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';
+};
+const getButtonHoverBackground = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';
+const getButtonActiveBackground = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';
+const getButtonHoverBorder = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';
+const getButtonColor = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';
 export const StyledCopyableContentActions = styled.div`
     position: sticky;
     top: var(--copyable-content-action-inset);
@@ -49,22 +83,14 @@ export const StyledCopyableContentActionGroup = styled.div`
 `;
 export const StyledCopyableContentButton = styled.button`
     box-sizing: border-box;
-    border: 1px solid ${({
-  $isSticky,
-  theme
-}) => $isSticky ? theme['202'] : 'transparent'};
+    border: 1px solid ${getActionGroupBorder};
     border-radius: 4px;
     width: var(--copyable-content-action-size);
     height: var(--copyable-content-action-size);
     padding: 0;
     cursor: pointer;
-    background-color: ${({
-  $isSticky,
-  theme
-}) => $isSticky ? theme['100'] : 'transparent'};
-    color: ${({
-  theme
-}) => theme.text};
+    background-color: ${getActionGroupBackground};
+    color: ${getButtonColor};
     box-shadow: ${({
   $isSticky
 }) => $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none'};
@@ -75,31 +101,33 @@ export const StyledCopyableContentButton = styled.button`
         transform 0.15s ease;
 
     &:hover {
-        border-color: rgba(${({
-  theme
-}) => theme['text-rgb']}, 0.18);
-        background-color: rgba(${({
-  theme
-}) => theme['text-rgb']}, 0.1);
-        box-shadow: inset 0 0 0 1px rgba(${({
-  theme
-}) => theme['text-rgb']}, 0.06);
+        border-color: ${getButtonHoverBorder};
+        background-color: ${getButtonHoverBackground};
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
     }
 
     &:active {
+        background-color: ${getButtonActiveBackground};
         transform: scale(0.94);
     }
 
     &:focus-visible {
-        outline: 2px solid ${({
-  theme
-}) => theme.buttonBackgroundColor};
+        outline: 2px solid currentColor;
         outline-offset: 2px;
     }
 `;
 export const StyledCopyableContentTruncation = styled.div`
     padding: 0 12px 12px;
 `;
+const getHeadlineColor = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';
+const getBlockquoteBorderColor = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';
+const getLinkColor = ({
+  $colorMode
+}) => $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';
 export const StyledCopyableContentBody = styled.div`
     min-width: 0;
     max-width: 100%;
@@ -127,9 +155,7 @@ export const StyledCopyableContentBody = styled.div`
     h4,
     h5,
     h6 {
-        color: ${({
-  theme
-}) => theme.headline};
+        color: ${getHeadlineColor};
     }
 
     ul,
@@ -139,15 +165,11 @@ export const StyledCopyableContentBody = styled.div`
 
     blockquote {
         padding-left: 12px;
-        border-left: 3px solid ${({
-  theme
-}) => theme['202']};
+        border-left: 3px solid ${getBlockquoteBorderColor};
     }
 
     a {
-        color: ${({
-  theme
-}) => theme.primary};
+        color: ${getLinkColor};
         overflow-wrap: anywhere;
     }
 

package/lib/esm/components/copyable-content/CopyableContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","getBackgroundColor","$appearance","theme","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","section","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentTruncation","StyledCopyableContentBody","$shouldShowPadding","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n    $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n    if ($appearance === CopyableContentAppearance.Chat) {\n        return 'rgba(0, 0, 0, 0.12)';\n    }\n\n    const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';\n    const opacity = theme.cardBackgroundOpacity ?? 1;\n\n    return `rgba(${secondaryColor}, ${opacity})`;\n};\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n    --copyable-content-action-size: 32px;\n    --copyable-content-action-inset: 8px;\n\n    margin: 4px 0;\n    min-width: 0;\n    max-width: 100%;\n    overflow-x: clip;\n    overflow-wrap: anywhere;\n    padding-top: calc(\n        var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n    );\n    border-radius: 8px;\n    background-color: ${getBackgroundColor};\n    color: ${({ theme }) => theme.text};\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n    $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div`\n    position: sticky;\n    top: var(--copyable-content-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n    margin-top: calc(\n        (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n    );\n    padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${({ $isSticky, theme }) => ($isSticky ? theme['202'] : 'transparent')};\n    border-radius: 4px;\n    width: var(--copyable-content-action-size);\n    height: var(--copyable-content-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${({ $isSticky, theme }) => ($isSticky ? theme['100'] : 'transparent')};\n    color: ${({ theme }) => theme.text};\n    box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n    transition:\n        background-color 0.15s ease,\n        border-color 0.15s ease,\n        box-shadow 0.15s ease,\n        transform 0.15s ease;\n\n    &:hover {\n        border-color: rgba(${({ theme }) => theme['text-rgb']}, 0.18);\n        background-color: rgba(${({ theme }) => theme['text-rgb']}, 0.1);\n        box-shadow: inset 0 0 0 1px rgba(${({ theme }) => theme['text-rgb']}, 0.06);\n    }\n\n    &:active {\n        transform: scale(0.94);\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n        outline-offset: 2px;\n    }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n    padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n    $shouldShowPadding?: boolean;\n}>;\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n    min-width: 0;\n    max-width: 100%;\n    overflow-wrap: anywhere;\n    padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    p,\n    ul,\n    ol,\n    blockquote {\n        margin: 0 0 12px;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        color: ${({ theme }) => theme.headline};\n    }\n\n    ul,\n    ol {\n        padding-left: 24px;\n    }\n\n    blockquote {\n        padding-left: 12px;\n        border-left: 3px solid ${({ theme }) => theme['202']};\n    }\n\n    a {\n        color: ${({ theme }) => theme.primary};\n        overflow-wrap: anywhere;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","CopyableContentColorMode","getBackgroundColor","$appearance","$colorMode","Chat","Dark","getTextColor","StyledCopyableContent","section","getActionGroupBorder","$isSticky","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonColor","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","StyledCopyableContentTruncation","getHeadlineColor","getBlockquoteBorderColor","getLinkColor","StyledCopyableContentBody","$shouldShowPadding"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\nexport enum CopyableContentColorMode {\n    Dark = 'dark',\n    Light = 'light',\n}\n\ntype StyledCopyableContentProps = WithTheme<{\n    $appearance: CopyableContentAppearance;\n    $colorMode: CopyableContentColorMode;\n}>;\n\nconst getBackgroundColor = ({ $appearance, $colorMode }: StyledCopyableContentProps) => {\n    if ($appearance === CopyableContentAppearance.Chat) {\n        return 'rgba(0, 0, 0, 0.12)';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';\n};\n\nconst getTextColor = ({ $colorMode }: StyledCopyableContentProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n    --copyable-content-action-size: 32px;\n    --copyable-content-action-inset: 8px;\n\n    margin: 4px 0;\n    min-width: 0;\n    max-width: 100%;\n    overflow-x: clip;\n    overflow-wrap: anywhere;\n    padding-top: calc(\n        var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n    );\n    border-radius: 8px;\n    background-color: ${getBackgroundColor};\n    color: ${getTextColor};\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n    $colorMode: CopyableContentColorMode;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n    position: sticky;\n    top: var(--copyable-content-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n    margin-top: calc(\n        (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n    );\n    padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--copyable-content-action-size);\n    height: var(--copyable-content-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${getButtonColor};\n    box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n    transition:\n        background-color 0.15s ease,\n        border-color 0.15s ease,\n        box-shadow 0.15s ease,\n        transform 0.15s ease;\n\n    &:hover {\n        border-color: ${getButtonHoverBorder};\n        background-color: ${getButtonHoverBackground};\n        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n    }\n\n    &:active {\n        background-color: ${getButtonActiveBackground};\n        transform: scale(0.94);\n    }\n\n    &:focus-visible {\n        outline: 2px solid currentColor;\n        outline-offset: 2px;\n    }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n    padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n    $colorMode: CopyableContentColorMode;\n    $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n    $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n    min-width: 0;\n    max-width: 100%;\n    overflow-wrap: anywhere;\n    padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    p,\n    ul,\n    ol,\n    blockquote {\n        margin: 0 0 12px;\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n        color: ${getHeadlineColor};\n    }\n\n    ul,\n    ol {\n        padding-left: 24px;\n    }\n\n    blockquote {\n        padding-left: 12px;\n        border-left: 3px solid ${getBlockquoteBorderColor};\n    }\n\n    a {\n        color: ${getLinkColor};\n        overflow-wrap: anywhere;\n    }\n\n    > :last-child {\n        margin-bottom: 0;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,6 +3,37 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import CopyableContent from './CopyableContent';
+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() {}
+}
+vi.stubGlobal('ResizeObserver', ResizeObserverMock);
+const triggerResize = height => {
+  resizeObserverCallbacks.forEach(callback => {
+    callback([{
+      contentRect: {
+        height
+      }
+    }]);
+  });
+};
 vi.mock('../icon/Icon', () => ({
   default: ({
     icons
@@ -84,14 +115,17 @@ describe('CopyableContent', () => {
     expect(container.querySelector('[data-copy-action="false"]')).toBeInTheDocument();
     expect(container.querySelector('[data-calling-code-action="false"]')).toBeInTheDocument();
   });
-  it('supports collapsed content', () => {
+  it('supports collapsed content', async () => {
     render(/*#__PURE__*/React.createElement(CopyableContent, {
       collapsedHeight: 100,
       content: Array(20).fill('Long content').join('\n\n')
     }));
-    expect(screen.getByRole('button', {
-      name: 'Mehr anzeigen'
-    })).toBeInTheDocument();
+    triggerResize(240);
+    await waitFor(() => {
+      expect(screen.getByRole('button', {
+        name: 'Mehr'
+      })).toBeInTheDocument();
+    });
   });
 });
 //# sourceMappingURL=CopyableContent.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CopyableContent.test.js","names":["fireEvent","render","screen","waitFor","React","describe","expect","it","vi","CopyableContent","mock","default","icons","createElement","join","children","shouldShowCallingCodeAction","shouldShowCopyAction","importOriginal","createDialog","fn","open","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","content","getByRole","name","toBeInTheDocument","toHaveAttribute","document","querySelector","not","write","spyOn","navigator","clipboard","mockResolvedValue","click","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":["fireEvent","render","screen","waitFor","React","describe","expect","it","vi","CopyableContent","mock","Textstring","textstring","fallback","TextstringProvider","children","ttsToITextString","useTextstringValue","resizeObserverCallbacks","ResizeObserverMock","constructor","callback","push","disconnect","observe","unobserve","stubGlobal","triggerResize","height","forEach","contentRect","default","icons","createElement","join","shouldShowCallingCodeAction","shouldShowCopyAction","importOriginal","createDialog","fn","open","readBlob","blob","Promise","resolve","reject","reader","FileReader","onerror","error","onload","result","readAsText","content","getByRole","name","toBeInTheDocument","toHaveAttribute","document","querySelector","not","write","spyOn","navigator","clipboard","mockResolvedValue","click","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/esm/components/truncation/Truncation.js

@@ -1,57 +1,69 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { ClampPosition } from '../../types/truncation';
-import { debounce } from '../../utils/debounce';
-import { truncateElement } from '../../utils/truncation';
-import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampFocusWrapper, StyledTruncationClampWrapper, StyledTruncationPseudoContent } from './Truncation.styles';
 import { Textstring, TextstringProvider, ttsToITextString } from '@chayns-components/textstring';
-import textStrings from '../../constants/textStrings';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
+import textStrings from '../../constants/textStrings';
+import { ClampPosition } from '../../types/truncation';
+import { StyledMotionTruncationContent, StyledTruncation, StyledTruncationClamp, StyledTruncationClampFocusWrapper, StyledTruncationClampWrapper, StyledTruncationContent } from './Truncation.styles';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const Truncation = ({
   collapsedHeight = 150,
   clampPosition = ClampPosition.Right,
   isOpen,
-  moreLabel,
   lessLabel,
+  moreLabel,
   onChange,
   children,
   shouldEnableKeyboardHighlighting
 }) => {
   const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
-  const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const [showClamp, setShowClamp] = useState(true);
-  const [newCollapsedHeight, setNewCollapsedHeight] = useState(collapsedHeight);
-  const [originalHeight, setOriginalHeight] = useState(0);
-  const [shouldShowCollapsedElement, setShouldShowCollapsedElement] = useState(true);
-  const [hasSizeChanged, setHasSizeChanged] = useState(false);
-  const [initialRender, setInitialRender] = useState(true);
-  const [shouldSkipChangeCheck, setShouldSkipChangeCheck] = useState(false);
-  const [originalSmallHeight, setOriginalSmallHeight] = useState(0);
-  const [originalBigHeight, setOriginalBigHeight] = useState(0);
-  useEffect(() => {
-    setInitialRender(false);
-  }, []);
-  const parentRef = useRef(null);
-  const pseudoChildrenRef = useRef(null);
-  const childrenRef = useRef(null);
-  const originalChildrenRef = useRef(null);
-  const hasCollapsed = useRef(false);
-  const isAnimating = useRef(false);
-  const hasSizeRecentlyChanged = useRef(false);
-  const canResetSizeChanged = useRef(true);
+  const contentRef = useRef(null);
+  const pendingObservedHeight = useRef(0);
+  const [internalIsOpen, setInternalIsOpen] = useState(Boolean(isOpen));
+  const [contentHeight, setContentHeight] = useState(0);
   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 => {
+      pendingObservedHeight.current = Math.max(pendingObservedHeight.current, entries?.[0]?.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 = useCallback(event => {
     setInternalIsOpen(current => {
-      if (typeof onChange === 'function') {
-        onChange(event, !current);
-      }
+      onChange?.(event, !current);
       return !current;
     });
   }, [onChange]);
@@ -61,129 +73,29 @@ const Truncation = ({
       event.currentTarget.click();
     }
   }, []);
-  useEffect(() => {
-    if (children) {
-      setShouldSkipChangeCheck(true);
-      window.setTimeout(() => {
-        setShouldSkipChangeCheck(false);
-      }, 200);
-    }
-  }, [children]);
-  const handleAnimationEnd = 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]);
-  useEffect(() => {
-    if (!pseudoChildrenRef.current) {
-      return;
-    }
-    setOriginalHeight(pseudoChildrenRef.current.offsetHeight);
-    setOriginalBigHeight(pseudoChildrenRef.current.offsetHeight);
-    truncateElement(pseudoChildrenRef.current, collapsedHeight);
-    setNewCollapsedHeight(pseudoChildrenRef.current.offsetHeight);
-    setOriginalSmallHeight(pseudoChildrenRef.current.offsetHeight);
-  }, [collapsedHeight, pseudoChildrenRef, children]);
-
-  // Checks if the clamp should be shown
-  useEffect(() => {
-    if (pseudoChildrenRef.current && (!hasSizeChanged || shouldSkipChangeCheck) && !initialRender) {
-      setShowClamp(originalHeight > newCollapsedHeight);
-    }
-  }, [shouldSkipChangeCheck, collapsedHeight, hasSizeChanged, initialRender, newCollapsedHeight, originalHeight, children]);
-  useEffect(() => {
-    if (childrenRef.current && pseudoChildrenRef.current && originalChildrenRef.current) {
-      while (childrenRef.current.firstChild) {
-        childrenRef.current.removeChild(childrenRef.current.firstChild);
-      }
-      childrenRef.current.appendChild(shouldShowCollapsedElement && !internalIsOpen ? pseudoChildrenRef.current : originalChildrenRef.current);
-      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 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 debounce(() => {
-              canResetSizeChanged.current = true;
-            }, 250)();
-            setHasSizeChanged(true);
-            hasSizeRecentlyChanged.current = true;
-          }
-        }
-      });
-      resizeObserver.observe(pseudoChildrenRef.current);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    return () => {};
-  }, [originalSmallHeight, children]);
-  const ts = textStrings.components.truncation;
   const internalMoreLabel = moreLabel ?? /*#__PURE__*/React.createElement(Textstring, {
-    textstring: ttsToITextString(ts.more)
+    textstring: ttsToITextString(textStrings.components.truncation.more)
   });
   const internalLessLabel = lessLabel ?? /*#__PURE__*/React.createElement(Textstring, {
-    textstring: ttsToITextString(ts.less)
+    textstring: ttsToITextString(textStrings.components.truncation.less)
   });
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledTruncation, {
-    className: "beta-chayns-truncation",
-    ref: parentRef
-  }, /*#__PURE__*/React.createElement(StyledTruncationPseudoContent, {
-    ref: pseudoChildrenRef
-  }, children), /*#__PURE__*/React.createElement(StyledTruncationPseudoContent, {
-    ref: originalChildrenRef
-  }, children), /*#__PURE__*/React.createElement(StyledMotionTruncationContent, {
+  const hasOverflow = contentHeight > collapsedHeight;
+  const collapsedContentHeight = Math.min(contentHeight || collapsedHeight, collapsedHeight);
+  const targetHeight = internalIsOpen ? contentHeight || collapsedHeight : collapsedContentHeight;
+  return /*#__PURE__*/React.createElement(StyledTruncation, {
+    className: "beta-chayns-truncation"
+  }, /*#__PURE__*/React.createElement(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.createElement(StyledTruncationClampWrapper, {
+      duration: 0.2
+    }
+  }, /*#__PURE__*/React.createElement(StyledTruncationContent, {
+    ref: contentRef
+  }, children)), hasOverflow && /*#__PURE__*/React.createElement(StyledTruncationClampWrapper, {
     $position: clampPosition
   }, /*#__PURE__*/React.createElement(TextstringProvider, {
     libraryName: "@chayns-components-core"
@@ -194,7 +106,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)))));
 };
 export default Truncation;
 //# sourceMappingURL=Truncation.js.map