@chayns-components/code-highlighter 5.5.9 → 5.5.10

package/AGENTS.md

@@ -288,6 +288,20 @@ import { CodeHighlighter } from '@chayns-components/code-highlighter';
 />
 ```
 
+#### Nested Scroll Container
+
+```tsx
+<CodeHighlighter
+    copyButtonText={'Code kopieren'}
+    shouldShowLineNumbers
+    language={'typescript'}
+    code={Array.from(
+            { length: 80 },
+            (_, index) => `const update${index + 1} = createUpdate(${index + 1});`,
+        ).join('\n')}
+/>
+```
+
 ### Props
 
 No prop documentation available.

package/lib/cjs/components/code-highlighter/CodeHighlighter.js

@@ -145,7 +145,8 @@ const CodeHighlighter = ({
   }, /*#__PURE__*/_react.default.createElement("tw-ignore", null, (0, _codeHighlighter2.formatLanguage)(language)))), /*#__PURE__*/_react.default.createElement(_CopyToClipboard.default, {
     text: code,
     theme: resolvedTheme,
-    copyButtonText: copyButtonText
+    copyButtonText: copyButtonText,
+    rootRef: ref
   }), /*#__PURE__*/_react.default.createElement(_reactSyntaxHighlighter.Prism, {
     customStyle: syntaxHighlighterStyle,
     language: language ?? '',

package/lib/cjs/components/code-highlighter/CodeHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_core","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","useColorScheme","width","setWidth","useState","formattedCode","setFormattedCode","ref","useRef","resolvedTheme","colorMode","CodeHighlighterTheme","Dark","Light","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","useMemo","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","Prism","customStyle","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":";;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,uBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAN,OAAA;AAKA,IAAAO,iBAAA,GAAAP,OAAA;AACA,IAAAQ,gBAAA,GAAAR,OAAA;AAKA,IAAAS,gBAAA,GAAAC,sBAAA,CAAAV,OAAA;AAAkE,SAAAU,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,CAAAS,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAOlE,MAAMgB,sBAAsB,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAAoC,CAAC,KAAK;EAC9E,IAAI,CAACD,IAAI,EAAE;EAEX,MAAME,UAAU,GAAGF,IAAI,CAACG,aAAa,CAAC,KAAK,CAAC;EAC5C,IAAI,CAACD,UAAU,EAAE;EAEjBA,UAAU,CAACE,SAAS,CAACC,GAAG,CAACJ,SAAS,CAAC;AACvC,CAAC;AA2CD,MAAMK,eAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,IAAI;EACJC,cAAc;EACdC,QAAQ;EACRC,gBAAgB;EAChBC,gBAAgB,GAAG,KAAK;EACxBC,aAAa;EACbC,qBAAqB,GAAG,KAAK;EAC7BC;AACJ,CAAC,KAAK;EACF,MAAMC,WAAW,GAAG,IAAAC,oBAAc,EAAC,CAAC;EAEpC,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EACrC,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAF,eAAQ,EAACZ,IAAI,CAAC;EAExD,MAAMe,GAAG,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAExC,MAAMC,aAAa,GACflB,KAAK,KACJ,CAAAS,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAET,KAAK,CAACmB,SAAS,MAAK,MAAM,GAClCC,qCAAoB,CAACC,IAAI,GACzBD,qCAAoB,CAACE,KAAK,CAAC;EAErC,IAAAC,gBAAS,EAAC,MAAM;IACZ/B,sBAAsB,CAAC;MAAEC,IAAI,EAAEuB,GAAG,CAACQ,OAAO;MAAE9B,SAAS,EAAE;IAAmB,CAAC,CAAC;EAChF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA6B,gBAAS,EAAC,MAAM;IACZ,MAAME,YAAY,GAAGA,CAAA,KAAM;MACvB,IAAIT,GAAG,CAACQ,OAAO,EAAE;QACb,MAAM;UAAEE;QAAS,CAAC,GAAGV,GAAG,CAACQ,OAAO;QAEhC,MAAM7B,UAAU,GAAGgC,KAAK,CAACC,IAAI,CAACF,QAAQ,CAAC,CAACG,IAAI,CACxC,CAAC;UAAEC;QAAQ,CAAC,KAAKA,OAAO,CAACC,WAAW,CAAC,CAAC,KAAK,KAC/C,CAAC;QAED,IAAIpC,UAAU,EAAE;UACZiB,QAAQ,CAACjB,UAAU,CAACqC,WAAW,CAAC;QACpC;MACJ;IACJ,CAAC;IAEDP,YAAY,CAAC,CAAC;IAEdQ,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTQ,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEV,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMW,WAAW,GAAG,IAAAC,kBAAW,EAC1BC,UAAkB,IAAK;IACpB,IAAIC,KAAK,GAAG;MACRC,eAAe,EAAE,MAAM;MACvBC,OAAO,EAAE,OAAO;MAChBC,YAAY,EAAE,KAAK;MACnB/B,KAAK,EAAEA,KAAK,GAAG;IACnB,CAAC;IAED,IAAIP,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEuC,KAAK,IAAIvC,gBAAgB,CAACuC,KAAK,CAACC,QAAQ,CAACN,UAAU,CAAC,EAAE;MACxEC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIpC,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAEyC,OAAO,IAAIzC,gBAAgB,CAACyC,OAAO,CAACD,QAAQ,CAACN,UAAU,CAAC,EAAE;MACnFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD,CAAC,MAAM,IAAIpC,gBAAgB,aAAhBA,gBAAgB,eAAhBA,gBAAgB,CAAE0C,MAAM,IAAI1C,gBAAgB,CAAC0C,MAAM,CAACF,QAAQ,CAACN,UAAU,CAAC,EAAE;MACjFC,KAAK,GAAG;QAAE,GAAGA,KAAK;QAAEC,eAAe,EAAE;MAAY,CAAC;IACtD;IAEA,OAAO;MAAED;IAAM,CAAC;EACpB,CAAC,EACD,CAACnC,gBAAgB,EAAEO,KAAK,CAC5B,CAAC;EAED,MAAMoC,eAAe,GAAG,IAAAC,cAAO,EAC3B,OAAO;IACHC,gBAAgB,EAAE;EACtB,CAAC,CAAC,EACF,EACJ,CAAC;EAED,MAAMC,sBAAsB,GAAG,IAAAF,cAAO,EAClC,OAAO;IACHG,OAAO,EAAE;EACb,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAA5B,gBAAS,EAAC,MAAM;IACZ,IAAI6B,SAAS,GAAG,IAAI;IAEpB,IAAI,CAAC/C,gBAAgB,EAAE;MACnBU,gBAAgB,CAACd,IAAI,CAAC;MAEtB,OAAO,MAAM;QACTmD,SAAS,GAAG,KAAK;MACrB,CAAC;IACL;IAEA,KAAK,IAAAC,sCAAoB,EAAClD,QAAQ,CAAC,CAACmD,IAAI,CAAEC,MAAM,IAAK;MACjD,IAAI,CAACA,MAAM,IAAI,CAACH,SAAS,EAAE;QACvB;MACJ;MAEA,IAAI;QACArC,gBAAgB,CAAC,IAAAyC,kBAAM,EAACvD,IAAI,EAAEsD,MAAM,CAAsB,CAAC;MAC/D,CAAC,CAAC,OAAOE,KAAK,EAAE;QACZnD,aAAa,aAAbA,aAAa,eAAbA,aAAa,CAAGmD,KAAK,CAAC;QACtB1C,gBAAgB,CAACd,IAAI,CAAC;MAC1B;IACJ,CAAC,CAAC;IAEF,OAAO,MAAM;MACTmD,SAAS,GAAG,KAAK;IACrB,CAAC;EACL,CAAC,EAAE,CAACnD,IAAI,EAAEE,QAAQ,EAAEG,aAAa,EAAED,gBAAgB,CAAC,CAAC;EAErD,IAAAkB,gBAAS,EAAC,MAAM;IACZ,MAAMmC,QAAQ,GAAGC,QAAQ,CAACC,sBAAsB,CAAC,YAAY,CAAC;IAE9DjC,KAAK,CAACC,IAAI,CAAC8B,QAAQ,CAAC,CAACG,OAAO,CAAEC,OAAO,IAAK;MACtC,MAAMC,OAAO,GAAGJ,QAAQ,CAACK,aAAa,CAAC,WAAW,CAAC;MAEnD,OAAOF,OAAO,CAACG,UAAU,EAAE;QACvBF,OAAO,CAACG,WAAW,CAACJ,OAAO,CAACG,UAAU,CAAC;MAC3C;MAEAH,OAAO,CAACI,WAAW,CAACH,OAAO,CAAC;IAChC,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAf,cAAO,EACV,mBACIrF,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC9F,gBAAA,CAAAiG,qBAAqB;IAClBC,gBAAgB,EAAE5D,eAAgB;IAClC6D,UAAU,EAAEnD,aAAc;IAC1BF,GAAG,EAAEA;EAAI,gBAETrD,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC9F,gBAAA,CAAAoG,2BAA2B;IAACD,UAAU,EAAEnD;EAAc,gBACnDvD,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC9F,gBAAA,CAAAqG,6BAA6B;IAACF,UAAU,EAAEnD;EAAc,gBAGrDvD,MAAA,CAAAY,OAAA,CAAAyF,aAAA,oBAAY,IAAAQ,gCAAc,EAACrE,QAAQ,CAAa,CACrB,CACN,CAAC,eAC9BxC,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAAC7F,gBAAA,CAAAI,OAAe;IACZkG,IAAI,EAAExE,IAAK;IACXD,KAAK,EAAEkB,aAAc;IACrBhB,cAAc,EAAEA;EAAe,CAClC,CAAC,eACFvC,MAAA,CAAAY,OAAA,CAAAyF,aAAA,CAACnG,uBAAA,CAAA6G,KAAiB;IACdC,WAAW,EAAEzB,sBAAuB;IACpC/C,QAAQ,EAAEA,QAAQ,IAAI,EAAG;IACzB4C,eAAe,EAAEA,eAAgB;IACjC6B,eAAe,EAAErE,qBAAsB;IACvCgC,KAAK,EAAErB,aAAa,KAAKE,qCAAoB,CAACC,IAAI,GAAGwD,cAAO,GAAGC,eAAS;IACxEC,SAAS;IACTC,aAAa,EAAExE,eAAgB;IAC/ByE,SAAS,EAAE7C;EAAY,GAEtBtB,aACc,CACA,CAC1B,EACD,CACIN,eAAe,EACfU,aAAa,EACbf,QAAQ,EACRF,IAAI,EACJC,cAAc,EACd6C,eAAe,EACfG,sBAAsB,EACtB3C,qBAAqB,EACrB6B,WAAW,EACXtB,aAAa,CAErB,CAAC;AACL,CAAC;AAEDf,eAAe,CAACmF,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7G,OAAA,GAEjCwB,eAAe","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.js","names":["_standalone","require","_react","_interopRequireWildcard","_reactSyntaxHighlighter","_prism","_core","_codeHighlighter","_codeHighlighter2","_CodeHighlighter","_CopyToClipboard","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","useColorScheme","width","setWidth","useState","formattedCode","setFormattedCode","ref","useRef","resolvedTheme","colorMode","CodeHighlighterTheme","Dark","Light","useEffect","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","useCallback","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","useMemo","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","getParserForLanguage","then","config","format","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","StyledCodeHighlighter","$shouldWrapLines","$codeTheme","StyledCodeHighlighterHeader","StyledCodeHighlighterFileName","formatLanguage","text","rootRef","Prism","customStyle","showLineNumbers","oneDark","oneLight","wrapLines","wrapLongLines","lineProps","displayName","_default","exports"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                    rootRef={ref}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js

@@ -11,16 +11,17 @@ var _react = _interopRequireWildcard(require("react"));
 var _codeHighlighter = require("../../../types/codeHighlighter");
 var _CopyToClipboard = require("./CopyToClipboard.styles");
 var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
+var _useStickyActionPosition = require("./useStickyActionPosition");
 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 STICKY_ACTION_OFFSET = 8;
 const CopyToClipboard = ({
   copyButtonText,
+  rootRef,
   text,
   theme
 }) => {
-  const [isActionGroupSticky, setIsActionGroupSticky] = (0, _react.useState)(false);
   const actionGroupRef = (0, _react.useRef)(null);
+  const stickyActionPosition = (0, _useStickyActionPosition.useStickyActionPosition)(rootRef, actionGroupRef);
   const defaultCopyText = (0, _textstring.useTextstringValue)({
     textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copy)
   });
@@ -35,20 +36,6 @@ const CopyToClipboard = ({
   });
   const copyText = copyButtonText ?? defaultCopyText;
   const iconColor = theme === _codeHighlighter.CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
-  (0, _react.useEffect)(() => {
-    const updateStickyState = () => {
-      var _actionGroupRef$curre;
-      const actionGroupTop = (_actionGroupRef$curre = actionGroupRef.current) === null || _actionGroupRef$curre === void 0 ? void 0 : _actionGroupRef$curre.getBoundingClientRect().top;
-      setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
-    };
-    updateStickyState();
-    document.addEventListener('scroll', updateStickyState, true);
-    window.addEventListener('resize', updateStickyState);
-    return () => {
-      document.removeEventListener('scroll', updateStickyState, true);
-      window.removeEventListener('resize', updateStickyState);
-    };
-  }, []);
   const handleCopy = (0, _react.useCallback)(async () => {
     try {
       await navigator.clipboard.writeText(text);
@@ -69,10 +56,13 @@ const CopyToClipboard = ({
   }, [copiedText, copyFailedText, text]);
   return /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboard, {
     $codeTheme: theme,
+    $fixedRight: stickyActionPosition.fixedRight,
+    $fixedTop: stickyActionPosition.fixedTop,
+    $isFixed: stickyActionPosition.isFixed,
     ref: actionGroupRef
   }, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardActionGroup, null, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardButton, {
     $codeTheme: theme,
-    $isSticky: isActionGroupSticky,
+    $isSticky: stickyActionPosition.isSticky,
     "aria-label": copyText,
     onClick: () => {
       void handleCopy();
@@ -86,7 +76,7 @@ const CopyToClipboard = ({
     shouldUseDefaultTriggerStyles: false
   }, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardButton, {
     $codeTheme: theme,
-    $isSticky: isActionGroupSticky,
+    $isSticky: stickyActionPosition.isSticky,
     "aria-label": shareText,
     type: "button"
   }, /*#__PURE__*/_react.default.createElement(_core.Icon, {

package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","STICKY_ACTION_OFFSET","CopyToClipboard","copyButtonText","text","theme","isActionGroupSticky","setIsActionGroupSticky","useState","actionGroupRef","useRef","defaultCopyText","useTextstringValue","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","CodeHighlighterTheme","Dark","useEffect","updateStickyState","_actionGroupRef$curre","actionGroupTop","current","getBoundingClientRect","top","undefined","document","addEventListener","window","removeEventListener","handleCopy","useCallback","navigator","clipboard","writeText","createDialog","showCloseIcon","toastType","ToastType","SUCCESS","type","DialogType","TOAST","open","ERROR","createElement","StyledCopyToClipboard","$codeTheme","ref","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","$isSticky","onClick","Icon","color","icons","SharingContextMenu","link","shouldUseDefaultTriggerStyles","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst STICKY_ACTION_OFFSET = 8;\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);\n\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copiedText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    useEffect(() => {\n        const updateStickyState = () => {\n            const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;\n            setIsActionGroupSticky(\n                actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET,\n            );\n        };\n\n        updateStickyState();\n        document.addEventListener('scroll', updateStickyState, true);\n        window.addEventListener('resize', updateStickyState);\n\n        return () => {\n            document.removeEventListener('scroll', updateStickyState, true);\n            window.removeEventListener('resize', updateStickyState);\n        };\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            void createDialog({\n                showCloseIcon: true,\n                text: copiedText,\n                toastType: ToastType.SUCCESS,\n                type: DialogType.TOAST,\n            }).open();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copiedText, copyFailedText, text]);\n\n    return (\n        <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={isActionGroupSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    type=\"button\"\n                >\n                    <Icon color={iconColor} icons={['fa-light fa-copy']} />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu link={text} shouldUseDefaultTriggerStyles={false}>\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","_useStickyActionPosition","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","useRef","stickyActionPosition","useStickyActionPosition","defaultCopyText","useTextstringValue","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","CodeHighlighterTheme","Dark","handleCopy","useCallback","navigator","clipboard","writeText","createDialog","showCloseIcon","toastType","ToastType","SUCCESS","type","DialogType","TOAST","open","ERROR","createElement","StyledCopyToClipboard","$codeTheme","$fixedRight","fixedRight","$fixedTop","fixedTop","$isFixed","isFixed","ref","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","$isSticky","isSticky","onClick","Icon","color","icons","SharingContextMenu","link","shouldUseDefaultTriggerStyles","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useRef } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionPosition } from './useStickyActionPosition';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const stickyActionPosition = useStickyActionPosition(rootRef, actionGroupRef);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copiedText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            void createDialog({\n                showCloseIcon: true,\n                text: copiedText,\n                toastType: ToastType.SUCCESS,\n                type: DialogType.TOAST,\n            }).open();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copiedText, copyFailedText, text]);\n\n    return (\n        <StyledCopyToClipboard\n            $codeTheme={theme}\n            $fixedRight={stickyActionPosition.fixedRight}\n            $fixedTop={stickyActionPosition.fixedTop}\n            $isFixed={stickyActionPosition.isFixed}\n            ref={actionGroupRef}\n        >\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={stickyActionPosition.isSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    type=\"button\"\n                >\n                    <Icon color={iconColor} icons={['fa-light fa-copy']} />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu link={text} shouldUseDefaultTriggerStyles={false}>\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={stickyActionPosition.isSticky}\n                        aria-label={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js

@@ -8,15 +8,24 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _codeHighlighter = require("../../../types/codeHighlighter");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledCopyToClipboard = exports.StyledCopyToClipboard = _styledComponents.default.div`
-    position: sticky;
-    top: var(--code-highlighter-action-inset);
+    position: ${({
+  $isFixed
+}) => $isFixed ? 'fixed' : 'sticky'};
+    top: ${({
+  $fixedTop,
+  $isFixed
+}) => $isFixed ? `${$fixedTop}px` : 'var(--code-highlighter-action-inset)'};
+    right: ${({
+  $fixedRight,
+  $isFixed
+}) => $isFixed ? `${$fixedRight}px` : 'auto'};
     z-index: 1;
     display: flex;
     justify-content: flex-end;
     height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));
-    margin-top: calc(
-        (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1
-    );
+    margin-top: ${({
+  $isFixed
+}) => $isFixed ? '0' : 'calc((var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1)'};
     padding-right: var(--code-highlighter-action-inset);
 `;
 const getActionGroupBorder = ({

package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCopyToClipboard","exports","styled","div","getActionGroupBorder","$codeTheme","$isSticky","CodeHighlighterTheme","Dark","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonShadow","getButtonHoverShadow","insetShadow","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","button","StyledCopyToClipboardText","span"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\ntype StyledCopyToClipboardProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCopyToClipboard = styled.div<StyledCopyToClipboardProps>`\n    position: sticky;\n    top: var(--code-highlighter-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));\n    margin-top: calc(\n        (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1\n    );\n    padding-right: var(--code-highlighter-action-inset);\n`;\n\ntype StyledCopyToClipboardButtonProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) =>\n    $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';\n\nconst getButtonHoverShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) => {\n    const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';\n\n    return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;\n};\n\nexport const StyledCopyToClipboardActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--code-highlighter-action-size);\n`;\n\nexport const StyledCopyToClipboardButton = styled.button<StyledCopyToClipboardButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--code-highlighter-action-size);\n    height: var(--code-highlighter-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};\n    box-shadow: ${getButtonShadow};\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: ${getButtonHoverShadow};\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\ntype StyledCopyToClipboardTextProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n    font-size: small;\n    margin-left: 4px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAsE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAM/D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC1F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAMC,wBAAwB,GAAGA,CAAC;EAAEJ,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAME,wBAAwB,GAAGA,CAAC;EAAEL;AAA6C,CAAC,KAC9EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMG,yBAAyB,GAAGA,CAAC;EAAEN;AAA6C,CAAC,KAC/EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMI,oBAAoB,GAAGA,CAAC;EAAEP;AAA6C,CAAC,KAC1EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAEpE,MAAMK,eAAe,GAAGA,CAAC;EAAEP;AAA4C,CAAC,KACpEA,SAAS,GAAG,+BAA+B,GAAG,MAAM;AAExD,MAAMQ,oBAAoB,GAAGA,CAAC;EAAER;AAA4C,CAAC,KAAK;EAC9E,MAAMS,WAAW,GAAG,2CAA2C;EAE/D,OAAOT,SAAS,GAAG,kCAAkCS,WAAW,EAAE,GAAGA,WAAW;AACpF,CAAC;AAEM,MAAMC,gCAAgC,GAAAf,OAAA,CAAAe,gCAAA,GAAGd,yBAAM,CAACC,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAEM,MAAMc,2BAA2B,GAAAhB,OAAA,CAAAgB,2BAAA,GAAGf,yBAAM,CAACgB,MAAwC;AAC1F;AACA,wBAAwBd,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBK,wBAAwB;AAChD,aAAa,CAAC;EAAEJ;AAAW,CAAC,KACpBA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,kBAAkBK,eAAe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,oBAAoB;AAC5C,4BAA4BF,wBAAwB;AACpD,sBAAsBI,oBAAoB;AAC1C;AACA;AACA;AACA,4BAA4BH,yBAAyB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAKM,MAAMQ,yBAAyB,GAAAlB,OAAA,CAAAkB,yBAAA,GAAGjB,yBAAM,CAACkB,IAAoC;AACpF,aAAa,CAAC;EAAEf;AAAW,CAAC,KACpBA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCopyToClipboard","exports","styled","div","$isFixed","$fixedTop","$fixedRight","getActionGroupBorder","$codeTheme","$isSticky","CodeHighlighterTheme","Dark","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonShadow","getButtonHoverShadow","insetShadow","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","button","StyledCopyToClipboardText","span"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\ntype StyledCopyToClipboardProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $fixedRight: number;\n    $fixedTop: number;\n    $isFixed: boolean;\n}>;\n\nexport const StyledCopyToClipboard = styled.div<StyledCopyToClipboardProps>`\n    position: ${({ $isFixed }) => ($isFixed ? 'fixed' : 'sticky')};\n    top: ${({ $fixedTop, $isFixed }) =>\n        $isFixed ? `${$fixedTop}px` : 'var(--code-highlighter-action-inset)'};\n    right: ${({ $fixedRight, $isFixed }) => ($isFixed ? `${$fixedRight}px` : 'auto')};\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));\n    margin-top: ${({ $isFixed }) =>\n        $isFixed\n            ? '0'\n            : 'calc((var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1)'};\n    padding-right: var(--code-highlighter-action-inset);\n`;\n\ntype StyledCopyToClipboardButtonProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) =>\n    $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';\n\nconst getButtonHoverShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) => {\n    const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';\n\n    return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;\n};\n\nexport const StyledCopyToClipboardActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--code-highlighter-action-size);\n`;\n\nexport const StyledCopyToClipboardButton = styled.button<StyledCopyToClipboardButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--code-highlighter-action-size);\n    height: var(--code-highlighter-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};\n    box-shadow: ${getButtonShadow};\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: ${getButtonHoverShadow};\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\ntype StyledCopyToClipboardTextProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n    font-size: small;\n    margin-left: 4px;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStickyActionPosition = void 0;
+var _react = require("react");
+const STICKY_ACTION_INSET = 8;
+const STICKY_ACTION_SIZE = 32;
+const initialPosition = {
+  fixedRight: 0,
+  fixedTop: STICKY_ACTION_INSET,
+  isFixed: false,
+  isSticky: false
+};
+const isScrollable = element => {
+  const {
+    overflow,
+    overflowY
+  } = window.getComputedStyle(element);
+  return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
+};
+const getScrollableAncestor = element => {
+  let parent = element.parentElement;
+  while (parent) {
+    if (isScrollable(parent)) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return undefined;
+};
+const useStickyActionPosition = (rootRef, actionRef) => {
+  const [position, setPosition] = (0, _react.useState)(initialPosition);
+  (0, _react.useEffect)(() => {
+    const root = rootRef.current;
+    const action = actionRef.current;
+    if (!root || !action) {
+      return undefined;
+    }
+    const scrollContainer = getScrollableAncestor(root);
+    const updatePosition = () => {
+      const rootRect = root.getBoundingClientRect();
+      const containerTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect().top) ?? 0;
+      const fixedTop = containerTop + STICKY_ACTION_INSET;
+      const isSticky = rootRect.top <= fixedTop;
+      const isFixed = Boolean(scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE);
+      const fixedRight = Math.max(0, window.innerWidth - rootRect.right);
+      setPosition(currentPosition => {
+        if (currentPosition.fixedRight === fixedRight && currentPosition.fixedTop === fixedTop && currentPosition.isFixed === isFixed && currentPosition.isSticky === isSticky) {
+          return currentPosition;
+        }
+        return {
+          fixedRight,
+          fixedTop,
+          isFixed,
+          isSticky
+        };
+      });
+    };
+    updatePosition();
+    scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', updatePosition, {
+      passive: true
+    });
+    window.addEventListener('scroll', updatePosition, {
+      passive: true
+    });
+    window.addEventListener('resize', updatePosition);
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);
+    resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(root);
+    if (scrollContainer) {
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollContainer);
+    }
+    return () => {
+      scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', updatePosition);
+      window.removeEventListener('scroll', updatePosition);
+      window.removeEventListener('resize', updatePosition);
+      resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
+    };
+  }, [actionRef, rootRef]);
+  return position;
+};
+exports.useStickyActionPosition = useStickyActionPosition;
+//# sourceMappingURL=useStickyActionPosition.js.map

package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStickyActionPosition.js","names":["_react","require","STICKY_ACTION_INSET","STICKY_ACTION_SIZE","initialPosition","fixedRight","fixedTop","isFixed","isSticky","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","undefined","useStickyActionPosition","rootRef","actionRef","position","setPosition","useState","useEffect","root","current","action","scrollContainer","updatePosition","rootRect","getBoundingClientRect","containerTop","top","Boolean","bottom","Math","max","innerWidth","right","currentPosition","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst STICKY_ACTION_INSET = 8;\nconst STICKY_ACTION_SIZE = 32;\n\ntype StickyActionPosition = {\n    fixedRight: number;\n    fixedTop: number;\n    isFixed: boolean;\n    isSticky: boolean;\n};\n\nconst initialPosition: StickyActionPosition = {\n    fixedRight: 0,\n    fixedTop: STICKY_ACTION_INSET,\n    isFixed: false,\n    isSticky: false,\n};\n\nconst isScrollable = (element: HTMLElement) => {\n    const { overflow, overflowY } = window.getComputedStyle(element);\n\n    return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n    let parent = element.parentElement;\n\n    while (parent) {\n        if (isScrollable(parent)) {\n            return parent;\n        }\n\n        parent = parent.parentElement;\n    }\n\n    return undefined;\n};\n\nexport const useStickyActionPosition = (\n    rootRef: RefObject<HTMLElement>,\n    actionRef: RefObject<HTMLElement>,\n): StickyActionPosition => {\n    const [position, setPosition] = useState<StickyActionPosition>(initialPosition);\n\n    useEffect(() => {\n        const root = rootRef.current;\n        const action = actionRef.current;\n\n        if (!root || !action) {\n            return undefined;\n        }\n\n        const scrollContainer = getScrollableAncestor(root);\n\n        const updatePosition = () => {\n            const rootRect = root.getBoundingClientRect();\n            const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n            const fixedTop = containerTop + STICKY_ACTION_INSET;\n            const isSticky = rootRect.top <= fixedTop;\n            const isFixed = Boolean(\n                scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE,\n            );\n            const fixedRight = Math.max(0, window.innerWidth - rootRect.right);\n\n            setPosition((currentPosition) => {\n                if (\n                    currentPosition.fixedRight === fixedRight &&\n                    currentPosition.fixedTop === fixedTop &&\n                    currentPosition.isFixed === isFixed &&\n                    currentPosition.isSticky === isSticky\n                ) {\n                    return currentPosition;\n                }\n\n                return { fixedRight, fixedTop, isFixed, isSticky };\n            });\n        };\n\n        updatePosition();\n        scrollContainer?.addEventListener('scroll', updatePosition, { passive: true });\n        window.addEventListener('scroll', updatePosition, { passive: true });\n        window.addEventListener('resize', updatePosition);\n\n        const resizeObserver =\n            typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);\n        resizeObserver?.observe(root);\n\n        if (scrollContainer) {\n            resizeObserver?.observe(scrollContainer);\n        }\n\n        return () => {\n            scrollContainer?.removeEventListener('scroll', updatePosition);\n            window.removeEventListener('scroll', updatePosition);\n            window.removeEventListener('resize', updatePosition);\n            resizeObserver?.disconnect();\n        };\n    }, [actionRef, rootRef]);\n\n    return position;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/code-highlighter/CodeHighlighter.js

@@ -137,7 +137,8 @@ const CodeHighlighter = ({
   }, /*#__PURE__*/React.createElement("tw-ignore", null, formatLanguage(language)))), /*#__PURE__*/React.createElement(CopyToClipboard, {
     text: code,
     theme: resolvedTheme,
-    copyButtonText: copyButtonText
+    copyButtonText: copyButtonText,
+    rootRef: ref
   }), /*#__PURE__*/React.createElement(SyntaxHighlighter, {
     customStyle: syntaxHighlighterStyle,
     language: language ?? '',

package/lib/esm/components/code-highlighter/CodeHighlighter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","Prism","SyntaxHighlighter","oneDark","oneLight","useColorScheme","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","width","setWidth","formattedCode","setFormattedCode","ref","resolvedTheme","colorMode","Dark","Light","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","customStyle","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CodeHighlighter.js","names":["format","React","useCallback","useEffect","useMemo","useRef","useState","Prism","SyntaxHighlighter","oneDark","oneLight","useColorScheme","CodeHighlighterTheme","formatLanguage","getParserForLanguage","StyledCodeHighlighter","StyledCodeHighlighterFileName","StyledCodeHighlighterHeader","CopyToClipboard","addScrollbarClassToPre","root","className","preElement","querySelector","classList","add","CodeHighlighter","theme","code","copyButtonText","language","highlightedLines","shouldFormatCode","onFormatError","shouldShowLineNumbers","shouldWrapLines","colorScheme","width","setWidth","formattedCode","setFormattedCode","ref","resolvedTheme","colorMode","Dark","Light","current","handleResize","children","Array","from","find","tagName","toLowerCase","scrollWidth","window","addEventListener","removeEventListener","lineWrapper","lineNumber","style","backgroundColor","display","borderRadius","added","includes","removed","marked","lineNumberStyle","WebkitUserSelect","syntaxHighlighterStyle","padding","isCurrent","then","config","error","elements","document","getElementsByClassName","forEach","element","wrapper","createElement","firstChild","appendChild","$shouldWrapLines","$codeTheme","text","rootRef","customStyle","showLineNumbers","wrapLines","wrapLongLines","lineProps","displayName"],"sources":["../../../../src/components/code-highlighter/CodeHighlighter.tsx"],"sourcesContent":["import { format } from 'prettier/standalone';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport { useColorScheme } from '@chayns-components/core';\nimport {\n    CodeHighlighterLanguage,\n    CodeHighlighterTheme,\n    HighlightedLines,\n} from '../../types/codeHighlighter';\nimport { formatLanguage, getParserForLanguage } from '../../utils/codeHighlighter';\nimport {\n    StyledCodeHighlighter,\n    StyledCodeHighlighterFileName,\n    StyledCodeHighlighterHeader,\n} from './CodeHighlighter.styles';\nimport CopyToClipboard from './copy-to-clipboard/CopyToClipboard';\n\ntype AddScrollbarClassOptions = {\n    root: HTMLDivElement | null;\n    className: string;\n};\n\nconst addScrollbarClassToPre = ({ root, className }: AddScrollbarClassOptions) => {\n    if (!root) return;\n\n    const preElement = root.querySelector('pre');\n    if (!preElement) return;\n\n    preElement.classList.add(className);\n};\n\nexport type CodeHighlighterProps = {\n    /**\n     * The code that should be displayed.\n     */\n    code: string;\n    /**\n     * The text that should be displayed after the copy button.\n     * If not set, just the button is displayed without text.\n     */\n    copyButtonText?: string;\n    /**\n     * The lines of code that should be highlighted.\n     * Following lines can be highlighted: added, removed and just marked.\n     */\n    highlightedLines?: HighlightedLines;\n    /**\n     * The language of the displayed code.\n     */\n    language: CodeHighlighterLanguage;\n    /**\n     * Function to be executed when the formatting of the code fails.\n     */\n    onFormatError?: (error: unknown) => void;\n    /**\n     * Whether the code should be formatted with prettier.\n     */\n    shouldFormatCode?: boolean;\n    /**\n     * Whether the line numbers should be displayed.\n     */\n    shouldShowLineNumbers?: boolean;\n    /**\n     * Whether long lines should be wrapped.\n     */\n    shouldWrapLines?: boolean;\n    /**\n     * The theme of the code block. Decide between dark and light.\n     */\n    theme?: CodeHighlighterTheme;\n};\n\nconst CodeHighlighter: FC<CodeHighlighterProps> = ({\n    theme,\n    code,\n    copyButtonText,\n    language,\n    highlightedLines,\n    shouldFormatCode = false,\n    onFormatError,\n    shouldShowLineNumbers = false,\n    shouldWrapLines,\n}) => {\n    const colorScheme = useColorScheme();\n\n    const [width, setWidth] = useState(0);\n    const [formattedCode, setFormattedCode] = useState(code);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const resolvedTheme =\n        theme ??\n        (colorScheme?.theme.colorMode === 'dark'\n            ? CodeHighlighterTheme.Dark\n            : CodeHighlighterTheme.Light);\n\n    useEffect(() => {\n        addScrollbarClassToPre({ root: ref.current, className: 'chayns-scrollbar' });\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            if (ref.current) {\n                const { children } = ref.current;\n\n                const preElement = Array.from(children).find(\n                    ({ tagName }) => tagName.toLowerCase() === 'pre',\n                );\n\n                if (preElement) {\n                    setWidth(preElement.scrollWidth);\n                }\n            }\n        };\n\n        handleResize();\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    // function to style highlighted code\n    const lineWrapper = useCallback(\n        (lineNumber: number) => {\n            let style = {\n                backgroundColor: 'none',\n                display: 'block',\n                borderRadius: '2px',\n                width: width - 15,\n            };\n\n            if (highlightedLines?.added && highlightedLines.added.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#2EF29930' };\n            } else if (highlightedLines?.removed && highlightedLines.removed.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#F22E5B30' };\n            } else if (highlightedLines?.marked && highlightedLines.marked.includes(lineNumber)) {\n                style = { ...style, backgroundColor: '#cccccc40' };\n            }\n\n            return { style };\n        },\n        [highlightedLines, width],\n    );\n\n    const lineNumberStyle = useMemo(\n        () => ({\n            WebkitUserSelect: 'none' as const,\n        }),\n        [],\n    );\n\n    const syntaxHighlighterStyle = useMemo(\n        () => ({\n            padding: '0 15px 15px',\n        }),\n        [],\n    );\n\n    useEffect(() => {\n        let isCurrent = true;\n\n        if (!shouldFormatCode) {\n            setFormattedCode(code);\n\n            return () => {\n                isCurrent = false;\n            };\n        }\n\n        void getParserForLanguage(language).then((config) => {\n            if (!config || !isCurrent) {\n                return;\n            }\n\n            try {\n                setFormattedCode(format(code, config) as unknown as string);\n            } catch (error) {\n                onFormatError?.(error);\n                setFormattedCode(code);\n            }\n        });\n\n        return () => {\n            isCurrent = false;\n        };\n    }, [code, language, onFormatError, shouldFormatCode]);\n\n    useEffect(() => {\n        const elements = document.getElementsByClassName('linenumber');\n\n        Array.from(elements).forEach((element) => {\n            const wrapper = document.createElement('tw-ignore');\n\n            while (element.firstChild) {\n                wrapper.appendChild(element.firstChild);\n            }\n\n            element.appendChild(wrapper);\n        });\n    }, []);\n\n    return useMemo(\n        () => (\n            <StyledCodeHighlighter\n                $shouldWrapLines={shouldWrapLines}\n                $codeTheme={resolvedTheme}\n                ref={ref}\n            >\n                <StyledCodeHighlighterHeader $codeTheme={resolvedTheme}>\n                    <StyledCodeHighlighterFileName $codeTheme={resolvedTheme}>\n                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n                        {/* @ts-ignore */}\n                        <tw-ignore>{formatLanguage(language)}</tw-ignore>\n                    </StyledCodeHighlighterFileName>\n                </StyledCodeHighlighterHeader>\n                <CopyToClipboard\n                    text={code}\n                    theme={resolvedTheme}\n                    copyButtonText={copyButtonText}\n                    rootRef={ref}\n                />\n                <SyntaxHighlighter\n                    customStyle={syntaxHighlighterStyle}\n                    language={language ?? ''}\n                    lineNumberStyle={lineNumberStyle}\n                    showLineNumbers={shouldShowLineNumbers}\n                    style={resolvedTheme === CodeHighlighterTheme.Dark ? oneDark : oneLight}\n                    wrapLines\n                    wrapLongLines={shouldWrapLines}\n                    lineProps={lineWrapper}\n                >\n                    {formattedCode}\n                </SyntaxHighlighter>\n            </StyledCodeHighlighter>\n        ),\n        [\n            shouldWrapLines,\n            resolvedTheme,\n            language,\n            code,\n            copyButtonText,\n            lineNumberStyle,\n            syntaxHighlighterStyle,\n            shouldShowLineNumbers,\n            lineWrapper,\n            formattedCode,\n        ],\n    );\n};\n\nCodeHighlighter.displayName = 'CodeHighlighter';\n\nexport default CodeHighlighter;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js

@@ -1,18 +1,19 @@
 import { Icon, SharingContextMenu } from '@chayns-components/core';
 import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
 import { createDialog, DialogType, ToastType } from 'chayns-api';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
 import { StyledCopyToClipboard, StyledCopyToClipboardActionGroup, StyledCopyToClipboardButton } from './CopyToClipboard.styles';
 import textStrings from '../../../constants/textStrings';
-const STICKY_ACTION_OFFSET = 8;
+import { useStickyActionPosition } from './useStickyActionPosition';
 const CopyToClipboard = ({
   copyButtonText,
+  rootRef,
   text,
   theme
 }) => {
-  const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);
   const actionGroupRef = useRef(null);
+  const stickyActionPosition = useStickyActionPosition(rootRef, actionGroupRef);
   const defaultCopyText = useTextstringValue({
     textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy)
   });
@@ -27,19 +28,6 @@ const CopyToClipboard = ({
   });
   const copyText = copyButtonText ?? defaultCopyText;
   const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';
-  useEffect(() => {
-    const updateStickyState = () => {
-      const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;
-      setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
-    };
-    updateStickyState();
-    document.addEventListener('scroll', updateStickyState, true);
-    window.addEventListener('resize', updateStickyState);
-    return () => {
-      document.removeEventListener('scroll', updateStickyState, true);
-      window.removeEventListener('resize', updateStickyState);
-    };
-  }, []);
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(text);
@@ -60,10 +48,13 @@ const CopyToClipboard = ({
   }, [copiedText, copyFailedText, text]);
   return /*#__PURE__*/React.createElement(StyledCopyToClipboard, {
     $codeTheme: theme,
+    $fixedRight: stickyActionPosition.fixedRight,
+    $fixedTop: stickyActionPosition.fixedTop,
+    $isFixed: stickyActionPosition.isFixed,
     ref: actionGroupRef
   }, /*#__PURE__*/React.createElement(StyledCopyToClipboardActionGroup, null, /*#__PURE__*/React.createElement(StyledCopyToClipboardButton, {
     $codeTheme: theme,
-    $isSticky: isActionGroupSticky,
+    $isSticky: stickyActionPosition.isSticky,
     "aria-label": copyText,
     onClick: () => {
       void handleCopy();
@@ -77,7 +68,7 @@ const CopyToClipboard = ({
     shouldUseDefaultTriggerStyles: false
   }, /*#__PURE__*/React.createElement(StyledCopyToClipboardButton, {
     $codeTheme: theme,
-    $isSticky: isActionGroupSticky,
+    $isSticky: stickyActionPosition.isSticky,
     "aria-label": shareText,
     type: "button"
   }, /*#__PURE__*/React.createElement(Icon, {

package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useRef","useState","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","STICKY_ACTION_OFFSET","CopyToClipboard","copyButtonText","text","theme","isActionGroupSticky","setIsActionGroupSticky","actionGroupRef","defaultCopyText","textstring","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","Dark","updateStickyState","actionGroupTop","current","getBoundingClientRect","top","undefined","document","addEventListener","window","removeEventListener","handleCopy","navigator","clipboard","writeText","showCloseIcon","toastType","SUCCESS","type","TOAST","open","ERROR","createElement","$codeTheme","ref","$isSticky","onClick","color","icons","link","shouldUseDefaultTriggerStyles","displayName"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst STICKY_ACTION_OFFSET = 8;\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, text, theme }) => {\n    const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);\n\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copiedText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    useEffect(() => {\n        const updateStickyState = () => {\n            const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;\n            setIsActionGroupSticky(\n                actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET,\n            );\n        };\n\n        updateStickyState();\n        document.addEventListener('scroll', updateStickyState, true);\n        window.addEventListener('resize', updateStickyState);\n\n        return () => {\n            document.removeEventListener('scroll', updateStickyState, true);\n            window.removeEventListener('resize', updateStickyState);\n        };\n    }, []);\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            void createDialog({\n                showCloseIcon: true,\n                text: copiedText,\n                toastType: ToastType.SUCCESS,\n                type: DialogType.TOAST,\n            }).open();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copiedText, copyFailedText, text]);\n\n    return (\n        <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={isActionGroupSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    type=\"button\"\n                >\n                    <Icon color={iconColor} icons={['fa-light fa-copy']} />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu link={text} shouldUseDefaultTriggerStyles={false}>\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={isActionGroupSticky}\n                        aria-label={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"AAAA,SAASA,IAAI,EAAEC,kBAAkB,QAAQ,yBAAyB;AAClE,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,+BAA+B;AACpF,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,YAAY;AAChE,OAAOC,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC3E,SAASC,oBAAoB,QAAQ,gCAAgC;AACrE,SACIC,qBAAqB,EACrBC,gCAAgC,EAChCC,2BAA2B,QACxB,0BAA0B;AACjC,OAAOC,WAAW,MAAM,gCAAgC;AAQxD,MAAMC,oBAAoB,GAAG,CAAC;AAE9B,MAAMC,eAAyC,GAAGA,CAAC;EAAEC,cAAc;EAAEC,IAAI;EAAEC;AAAM,CAAC,KAAK;EACnF,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGZ,QAAQ,CAAC,KAAK,CAAC;EAErE,MAAMa,cAAc,GAAGd,MAAM,CAAiB,IAAI,CAAC;EAEnD,MAAMe,eAAe,GAAGtB,kBAAkB,CAAC;IACvCuB,UAAU,EAAExB,gBAAgB,CAACc,WAAW,CAACW,UAAU,CAACC,eAAe,CAACC,eAAe,CAACC,IAAI;EAC5F,CAAC,CAAC;EACF,MAAMC,UAAU,GAAG5B,kBAAkB,CAAC;IAClCuB,UAAU,EAAExB,gBAAgB,CAACc,WAAW,CAACW,UAAU,CAACC,eAAe,CAACC,eAAe,CAACG,MAAM;EAC9F,CAAC,CAAC;EACF,MAAMC,cAAc,GAAG9B,kBAAkB,CAAC;IACtCuB,UAAU,EAAExB,gBAAgB,CACxBc,WAAW,CAACW,UAAU,CAACC,eAAe,CAACC,eAAe,CAACK,UAC3D;EACJ,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGhC,kBAAkB,CAAC;IACjCuB,UAAU,EAAExB,gBAAgB,CAACc,WAAW,CAACW,UAAU,CAACC,eAAe,CAACC,eAAe,CAACO,KAAK;EAC7F,CAAC,CAAC;EAEF,MAAMC,QAAQ,GAAGlB,cAAc,IAAIM,eAAe;EAClD,MAAMa,SAAS,GAAGjB,KAAK,KAAKT,oBAAoB,CAAC2B,IAAI,GAAG,SAAS,GAAG,SAAS;EAE7E9B,SAAS,CAAC,MAAM;IACZ,MAAM+B,iBAAiB,GAAGA,CAAA,KAAM;MAC5B,MAAMC,cAAc,GAAGjB,cAAc,CAACkB,OAAO,EAAEC,qBAAqB,CAAC,CAAC,CAACC,GAAG;MAC1ErB,sBAAsB,CAClBkB,cAAc,KAAKI,SAAS,IAAIJ,cAAc,IAAIxB,oBACtD,CAAC;IACL,CAAC;IAEDuB,iBAAiB,CAAC,CAAC;IACnBM,QAAQ,CAACC,gBAAgB,CAAC,QAAQ,EAAEP,iBAAiB,EAAE,IAAI,CAAC;IAC5DQ,MAAM,CAACD,gBAAgB,CAAC,QAAQ,EAAEP,iBAAiB,CAAC;IAEpD,OAAO,MAAM;MACTM,QAAQ,CAACG,mBAAmB,CAAC,QAAQ,EAAET,iBAAiB,EAAE,IAAI,CAAC;MAC/DQ,MAAM,CAACC,mBAAmB,CAAC,QAAQ,EAAET,iBAAiB,CAAC;IAC3D,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMU,UAAU,GAAG1C,WAAW,CAAC,YAAY;IACvC,IAAI;MACA,MAAM2C,SAAS,CAACC,SAAS,CAACC,SAAS,CAACjC,IAAI,CAAC;MACzC,KAAKhB,YAAY,CAAC;QACdkD,aAAa,EAAE,IAAI;QACnBlC,IAAI,EAAEW,UAAU;QAChBwB,SAAS,EAAEjD,SAAS,CAACkD,OAAO;QAC5BC,IAAI,EAAEpD,UAAU,CAACqD;MACrB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACb,CAAC,CAAC,MAAM;MACJ,KAAKvD,YAAY,CAAC;QACdkD,aAAa,EAAE,IAAI;QACnBlC,IAAI,EAAEa,cAAc;QACpBsB,SAAS,EAAEjD,SAAS,CAACsD,KAAK;QAC1BH,IAAI,EAAEpD,UAAU,CAACqD;MACrB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAAC5B,UAAU,EAAEE,cAAc,EAAEb,IAAI,CAAC,CAAC;EAEtC,oBACIb,KAAA,CAAAsD,aAAA,CAAChD,qBAAqB;IAACiD,UAAU,EAAEzC,KAAM;IAAC0C,GAAG,EAAEvC;EAAe,gBAC1DjB,KAAA,CAAAsD,aAAA,CAAC/C,gCAAgC,qBAC7BP,KAAA,CAAAsD,aAAA,CAAC9C,2BAA2B;IACxB+C,UAAU,EAAEzC,KAAM;IAClB2C,SAAS,EAAE1C,mBAAoB;IAC/B,cAAYe,QAAS;IACrB4B,OAAO,EAAEA,CAAA,KAAM;MACX,KAAKf,UAAU,CAAC,CAAC;IACrB,CAAE;IACFO,IAAI,EAAC;EAAQ,gBAEblD,KAAA,CAAAsD,aAAA,CAAC7D,IAAI;IAACkE,KAAK,EAAE5B,SAAU;IAAC6B,KAAK,EAAE,CAAC,kBAAkB;EAAE,CAAE,CAC7B,CAAC,eAC9B5D,KAAA,CAAAsD,aAAA,CAAC5D,kBAAkB;IAACmE,IAAI,EAAEhD,IAAK;IAACiD,6BAA6B,EAAE;EAAM,gBACjE9D,KAAA,CAAAsD,aAAA,CAAC9C,2BAA2B;IACxB+C,UAAU,EAAEzC,KAAM;IAClB2C,SAAS,EAAE1C,mBAAoB;IAC/B,cAAYa,SAAU;IACtBsB,IAAI,EAAC;EAAQ,gBAEblD,KAAA,CAAAsD,aAAA,CAAC7D,IAAI;IAACkE,KAAK,EAAE5B,SAAU;IAAC6B,KAAK,EAAE,CAAC,mBAAmB;EAAE,CAAE,CAC9B,CACb,CACU,CACf,CAAC;AAEhC,CAAC;AAEDjD,eAAe,CAACoD,WAAW,GAAG,iBAAiB;AAE/C,eAAepD,eAAe","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useRef","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","useStickyActionPosition","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","stickyActionPosition","defaultCopyText","textstring","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","Dark","handleCopy","navigator","clipboard","writeText","showCloseIcon","toastType","SUCCESS","type","TOAST","open","ERROR","createElement","$codeTheme","$fixedRight","fixedRight","$fixedTop","fixedTop","$isFixed","isFixed","ref","$isSticky","isSticky","onClick","color","icons","link","shouldUseDefaultTriggerStyles","displayName"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useRef } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n    StyledCopyToClipboard,\n    StyledCopyToClipboardActionGroup,\n    StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionPosition } from './useStickyActionPosition';\n\nexport type CopyToClipboardProps = {\n    copyButtonText?: string;\n    rootRef: RefObject<HTMLDivElement>;\n    text: string;\n    theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n    const actionGroupRef = useRef<HTMLDivElement>(null);\n    const stickyActionPosition = useStickyActionPosition(rootRef, actionGroupRef);\n\n    const defaultCopyText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n    });\n    const copiedText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),\n    });\n    const copyFailedText = useTextstringValue({\n        textstring: ttsToITextString(\n            textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n        ),\n    });\n    const shareText = useTextstringValue({\n        textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n    });\n\n    const copyText = copyButtonText ?? defaultCopyText;\n    const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n    const handleCopy = useCallback(async () => {\n        try {\n            await navigator.clipboard.writeText(text);\n            void createDialog({\n                showCloseIcon: true,\n                text: copiedText,\n                toastType: ToastType.SUCCESS,\n                type: DialogType.TOAST,\n            }).open();\n        } catch {\n            void createDialog({\n                showCloseIcon: true,\n                text: copyFailedText,\n                toastType: ToastType.ERROR,\n                type: DialogType.TOAST,\n            }).open();\n        }\n    }, [copiedText, copyFailedText, text]);\n\n    return (\n        <StyledCopyToClipboard\n            $codeTheme={theme}\n            $fixedRight={stickyActionPosition.fixedRight}\n            $fixedTop={stickyActionPosition.fixedTop}\n            $isFixed={stickyActionPosition.isFixed}\n            ref={actionGroupRef}\n        >\n            <StyledCopyToClipboardActionGroup>\n                <StyledCopyToClipboardButton\n                    $codeTheme={theme}\n                    $isSticky={stickyActionPosition.isSticky}\n                    aria-label={copyText}\n                    onClick={() => {\n                        void handleCopy();\n                    }}\n                    type=\"button\"\n                >\n                    <Icon color={iconColor} icons={['fa-light fa-copy']} />\n                </StyledCopyToClipboardButton>\n                <SharingContextMenu link={text} shouldUseDefaultTriggerStyles={false}>\n                    <StyledCopyToClipboardButton\n                        $codeTheme={theme}\n                        $isSticky={stickyActionPosition.isSticky}\n                        aria-label={shareText}\n                        type=\"button\"\n                    >\n                        <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n                    </StyledCopyToClipboardButton>\n                </SharingContextMenu>\n            </StyledCopyToClipboardActionGroup>\n        </StyledCopyToClipboard>\n    );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js

@@ -1,15 +1,24 @@
 import styled from 'styled-components';
 import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
 export const StyledCopyToClipboard = styled.div`
-    position: sticky;
-    top: var(--code-highlighter-action-inset);
+    position: ${({
+  $isFixed
+}) => $isFixed ? 'fixed' : 'sticky'};
+    top: ${({
+  $fixedTop,
+  $isFixed
+}) => $isFixed ? `${$fixedTop}px` : 'var(--code-highlighter-action-inset)'};
+    right: ${({
+  $fixedRight,
+  $isFixed
+}) => $isFixed ? `${$fixedRight}px` : 'auto'};
     z-index: 1;
     display: flex;
     justify-content: flex-end;
     height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));
-    margin-top: calc(
-        (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1
-    );
+    margin-top: ${({
+  $isFixed
+}) => $isFixed ? '0' : 'calc((var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1)'};
     padding-right: var(--code-highlighter-action-inset);
 `;
 const getActionGroupBorder = ({

package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","getActionGroupBorder","$codeTheme","$isSticky","Dark","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonShadow","getButtonHoverShadow","insetShadow","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","button","StyledCopyToClipboardText","span"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\ntype StyledCopyToClipboardProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCopyToClipboard = styled.div<StyledCopyToClipboardProps>`\n    position: sticky;\n    top: var(--code-highlighter-action-inset);\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));\n    margin-top: calc(\n        (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1\n    );\n    padding-right: var(--code-highlighter-action-inset);\n`;\n\ntype StyledCopyToClipboardButtonProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) =>\n    $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';\n\nconst getButtonHoverShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) => {\n    const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';\n\n    return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;\n};\n\nexport const StyledCopyToClipboardActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--code-highlighter-action-size);\n`;\n\nexport const StyledCopyToClipboardButton = styled.button<StyledCopyToClipboardButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--code-highlighter-action-size);\n    height: var(--code-highlighter-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};\n    box-shadow: ${getButtonShadow};\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: ${getButtonHoverShadow};\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\ntype StyledCopyToClipboardTextProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n    font-size: small;\n    margin-left: 4px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,gCAAgC;AAMrE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC1F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAMC,wBAAwB,GAAGA,CAAC;EAAEH,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAME,wBAAwB,GAAGA,CAAC;EAAEJ;AAA6C,CAAC,KAC9EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMG,yBAAyB,GAAGA,CAAC;EAAEL;AAA6C,CAAC,KAC/EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMI,oBAAoB,GAAGA,CAAC;EAAEN;AAA6C,CAAC,KAC1EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAEpE,MAAMK,eAAe,GAAGA,CAAC;EAAEN;AAA4C,CAAC,KACpEA,SAAS,GAAG,+BAA+B,GAAG,MAAM;AAExD,MAAMO,oBAAoB,GAAGA,CAAC;EAAEP;AAA4C,CAAC,KAAK;EAC9E,MAAMQ,WAAW,GAAG,2CAA2C;EAE/D,OAAOR,SAAS,GAAG,kCAAkCQ,WAAW,EAAE,GAAGA,WAAW;AACpF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACG,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,2BAA2B,GAAGhB,MAAM,CAACiB,MAAwC;AAC1F;AACA,wBAAwBb,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBI,wBAAwB;AAChD,aAAa,CAAC;EAAEH;AAAW,CAAC,KACpBA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,kBAAkBK,eAAe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,oBAAoB;AAC5C,4BAA4BF,wBAAwB;AACpD,sBAAsBI,oBAAoB;AAC1C;AACA;AACA;AACA,4BAA4BH,yBAAyB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAKD,OAAO,MAAMQ,yBAAyB,GAAGlB,MAAM,CAACmB,IAAoC;AACpF,aAAa,CAAC;EAAEd;AAAW,CAAC,KACpBA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","$isFixed","$fixedTop","$fixedRight","getActionGroupBorder","$codeTheme","$isSticky","Dark","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonShadow","getButtonHoverShadow","insetShadow","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","button","StyledCopyToClipboardText","span"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\ntype StyledCopyToClipboardProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $fixedRight: number;\n    $fixedTop: number;\n    $isFixed: boolean;\n}>;\n\nexport const StyledCopyToClipboard = styled.div<StyledCopyToClipboardProps>`\n    position: ${({ $isFixed }) => ($isFixed ? 'fixed' : 'sticky')};\n    top: ${({ $fixedTop, $isFixed }) =>\n        $isFixed ? `${$fixedTop}px` : 'var(--code-highlighter-action-inset)'};\n    right: ${({ $fixedRight, $isFixed }) => ($isFixed ? `${$fixedRight}px` : 'auto')};\n    z-index: 1;\n    display: flex;\n    justify-content: flex-end;\n    height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));\n    margin-top: ${({ $isFixed }) =>\n        $isFixed\n            ? '0'\n            : 'calc((var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1)'};\n    padding-right: var(--code-highlighter-action-inset);\n`;\n\ntype StyledCopyToClipboardButtonProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n    $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n    if (!$isSticky) {\n        return 'transparent';\n    }\n\n    return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n    $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) =>\n    $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';\n\nconst getButtonHoverShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) => {\n    const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';\n\n    return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;\n};\n\nexport const StyledCopyToClipboardActionGroup = styled.div`\n    display: flex;\n    gap: 4px;\n    height: var(--code-highlighter-action-size);\n`;\n\nexport const StyledCopyToClipboardButton = styled.button<StyledCopyToClipboardButtonProps>`\n    box-sizing: border-box;\n    border: 1px solid ${getActionGroupBorder};\n    border-radius: 4px;\n    width: var(--code-highlighter-action-size);\n    height: var(--code-highlighter-action-size);\n    padding: 0;\n    cursor: pointer;\n    background-color: ${getActionGroupBackground};\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};\n    box-shadow: ${getButtonShadow};\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: ${getButtonHoverShadow};\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\ntype StyledCopyToClipboardTextProps = WithTheme<{\n    $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n    color: ${({ $codeTheme }) =>\n        $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n    font-size: small;\n    margin-left: 4px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,gCAAgC;AASrE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E,gBAAgB,CAAC;EAAEC;AAAS,CAAC,KAAMA,QAAQ,GAAG,OAAO,GAAG,QAAS;AACjE,WAAW,CAAC;EAAEC,SAAS;EAAED;AAAS,CAAC,KAC3BA,QAAQ,GAAG,GAAGC,SAAS,IAAI,GAAG,sCAAsC;AAC5E,aAAa,CAAC;EAAEC,WAAW;EAAEF;AAAS,CAAC,KAAMA,QAAQ,GAAG,GAAGE,WAAW,IAAI,GAAG,MAAO;AACpF;AACA;AACA;AACA;AACA,kBAAkB,CAAC;EAAEF;AAAS,CAAC,KACvBA,QAAQ,GACF,GAAG,GACH,yFAAyF;AACvG;AACA,CAAC;AAOD,MAAMG,oBAAoB,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC1F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKP,oBAAoB,CAACS,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAMC,wBAAwB,GAAGA,CAAC;EAAEH,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKP,oBAAoB,CAACS,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAME,wBAAwB,GAAGA,CAAC;EAAEJ;AAA6C,CAAC,KAC9EA,UAAU,KAAKP,oBAAoB,CAACS,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMG,yBAAyB,GAAGA,CAAC;EAAEL;AAA6C,CAAC,KAC/EA,UAAU,KAAKP,oBAAoB,CAACS,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMI,oBAAoB,GAAGA,CAAC;EAAEN;AAA6C,CAAC,KAC1EA,UAAU,KAAKP,oBAAoB,CAACS,IAAI,GAAG,SAAS,GAAG,SAAS;AAEpE,MAAMK,eAAe,GAAGA,CAAC;EAAEN;AAA4C,CAAC,KACpEA,SAAS,GAAG,+BAA+B,GAAG,MAAM;AAExD,MAAMO,oBAAoB,GAAGA,CAAC;EAAEP;AAA4C,CAAC,KAAK;EAC9E,MAAMQ,WAAW,GAAG,2CAA2C;EAE/D,OAAOR,SAAS,GAAG,kCAAkCQ,WAAW,EAAE,GAAGA,WAAW;AACpF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGlB,MAAM,CAACG,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMgB,2BAA2B,GAAGnB,MAAM,CAACoB,MAAwC;AAC1F;AACA,wBAAwBb,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBI,wBAAwB;AAChD,aAAa,CAAC;EAAEH;AAAW,CAAC,KACpBA,UAAU,KAAKP,oBAAoB,CAACS,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,kBAAkBK,eAAe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,oBAAoB;AAC5C,4BAA4BF,wBAAwB;AACpD,sBAAsBI,oBAAoB;AAC1C;AACA;AACA;AACA,4BAA4BH,yBAAyB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAKD,OAAO,MAAMQ,yBAAyB,GAAGrB,MAAM,CAACsB,IAAoC;AACpF,aAAa,CAAC;EAAEd;AAAW,CAAC,KACpBA,UAAU,KAAKP,oBAAoB,CAACS,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+const STICKY_ACTION_INSET = 8;
+const STICKY_ACTION_SIZE = 32;
+const initialPosition = {
+  fixedRight: 0,
+  fixedTop: STICKY_ACTION_INSET,
+  isFixed: false,
+  isSticky: false
+};
+const isScrollable = element => {
+  const {
+    overflow,
+    overflowY
+  } = window.getComputedStyle(element);
+  return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
+};
+const getScrollableAncestor = element => {
+  let parent = element.parentElement;
+  while (parent) {
+    if (isScrollable(parent)) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return undefined;
+};
+export const useStickyActionPosition = (rootRef, actionRef) => {
+  const [position, setPosition] = useState(initialPosition);
+  useEffect(() => {
+    const root = rootRef.current;
+    const action = actionRef.current;
+    if (!root || !action) {
+      return undefined;
+    }
+    const scrollContainer = getScrollableAncestor(root);
+    const updatePosition = () => {
+      const rootRect = root.getBoundingClientRect();
+      const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
+      const fixedTop = containerTop + STICKY_ACTION_INSET;
+      const isSticky = rootRect.top <= fixedTop;
+      const isFixed = Boolean(scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE);
+      const fixedRight = Math.max(0, window.innerWidth - rootRect.right);
+      setPosition(currentPosition => {
+        if (currentPosition.fixedRight === fixedRight && currentPosition.fixedTop === fixedTop && currentPosition.isFixed === isFixed && currentPosition.isSticky === isSticky) {
+          return currentPosition;
+        }
+        return {
+          fixedRight,
+          fixedTop,
+          isFixed,
+          isSticky
+        };
+      });
+    };
+    updatePosition();
+    scrollContainer?.addEventListener('scroll', updatePosition, {
+      passive: true
+    });
+    window.addEventListener('scroll', updatePosition, {
+      passive: true
+    });
+    window.addEventListener('resize', updatePosition);
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);
+    resizeObserver?.observe(root);
+    if (scrollContainer) {
+      resizeObserver?.observe(scrollContainer);
+    }
+    return () => {
+      scrollContainer?.removeEventListener('scroll', updatePosition);
+      window.removeEventListener('scroll', updatePosition);
+      window.removeEventListener('resize', updatePosition);
+      resizeObserver?.disconnect();
+    };
+  }, [actionRef, rootRef]);
+  return position;
+};
+//# sourceMappingURL=useStickyActionPosition.js.map

package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStickyActionPosition.js","names":["useEffect","useState","STICKY_ACTION_INSET","STICKY_ACTION_SIZE","initialPosition","fixedRight","fixedTop","isFixed","isSticky","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","undefined","useStickyActionPosition","rootRef","actionRef","position","setPosition","root","current","action","scrollContainer","updatePosition","rootRect","getBoundingClientRect","containerTop","top","Boolean","bottom","Math","max","innerWidth","right","currentPosition","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst STICKY_ACTION_INSET = 8;\nconst STICKY_ACTION_SIZE = 32;\n\ntype StickyActionPosition = {\n    fixedRight: number;\n    fixedTop: number;\n    isFixed: boolean;\n    isSticky: boolean;\n};\n\nconst initialPosition: StickyActionPosition = {\n    fixedRight: 0,\n    fixedTop: STICKY_ACTION_INSET,\n    isFixed: false,\n    isSticky: false,\n};\n\nconst isScrollable = (element: HTMLElement) => {\n    const { overflow, overflowY } = window.getComputedStyle(element);\n\n    return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n    let parent = element.parentElement;\n\n    while (parent) {\n        if (isScrollable(parent)) {\n            return parent;\n        }\n\n        parent = parent.parentElement;\n    }\n\n    return undefined;\n};\n\nexport const useStickyActionPosition = (\n    rootRef: RefObject<HTMLElement>,\n    actionRef: RefObject<HTMLElement>,\n): StickyActionPosition => {\n    const [position, setPosition] = useState<StickyActionPosition>(initialPosition);\n\n    useEffect(() => {\n        const root = rootRef.current;\n        const action = actionRef.current;\n\n        if (!root || !action) {\n            return undefined;\n        }\n\n        const scrollContainer = getScrollableAncestor(root);\n\n        const updatePosition = () => {\n            const rootRect = root.getBoundingClientRect();\n            const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n            const fixedTop = containerTop + STICKY_ACTION_INSET;\n            const isSticky = rootRect.top <= fixedTop;\n            const isFixed = Boolean(\n                scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE,\n            );\n            const fixedRight = Math.max(0, window.innerWidth - rootRect.right);\n\n            setPosition((currentPosition) => {\n                if (\n                    currentPosition.fixedRight === fixedRight &&\n                    currentPosition.fixedTop === fixedTop &&\n                    currentPosition.isFixed === isFixed &&\n                    currentPosition.isSticky === isSticky\n                ) {\n                    return currentPosition;\n                }\n\n                return { fixedRight, fixedTop, isFixed, isSticky };\n            });\n        };\n\n        updatePosition();\n        scrollContainer?.addEventListener('scroll', updatePosition, { passive: true });\n        window.addEventListener('scroll', updatePosition, { passive: true });\n        window.addEventListener('resize', updatePosition);\n\n        const resizeObserver =\n            typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);\n        resizeObserver?.observe(root);\n\n        if (scrollContainer) {\n            resizeObserver?.observe(scrollContainer);\n        }\n\n        return () => {\n            scrollContainer?.removeEventListener('scroll', updatePosition);\n            window.removeEventListener('scroll', updatePosition);\n            window.removeEventListener('resize', updatePosition);\n            resizeObserver?.disconnect();\n        };\n    }, [actionRef, rootRef]);\n\n    return position;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/code-highlighter/copy-to-clipboard/CopyToClipboard.d.ts

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import { FC, RefObject } from 'react';
 import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
 export type CopyToClipboardProps = {
     copyButtonText?: string;
+    rootRef: RefObject<HTMLDivElement>;
     text: string;
     theme: CodeHighlighterTheme;
 };

package/lib/types/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.d.ts

@@ -1,10 +1,16 @@
 import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
-export declare const StyledCopyToClipboard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"> & {
+export declare const StyledCopyToClipboard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme" | "$fixedRight" | "$fixedTop" | "$isFixed"> & {
     $codeTheme: CodeHighlighterTheme;
+    $fixedRight: number;
+    $fixedTop: number;
+    $isFixed: boolean;
 } & {
     theme: import("@chayns-components/core").Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme" | "$fixedRight" | "$fixedTop" | "$isFixed"> & {
     $codeTheme: CodeHighlighterTheme;
+    $fixedRight: number;
+    $fixedTop: number;
+    $isFixed: boolean;
 } & {
     theme: import("@chayns-components/core").Theme;
 }, never>>> & string;

package/lib/types/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+type StickyActionPosition = {
+    fixedRight: number;
+    fixedTop: number;
+    isFixed: boolean;
+    isSticky: boolean;
+};
+export declare const useStickyActionPosition: (rootRef: RefObject<HTMLElement>, actionRef: RefObject<HTMLElement>) => StickyActionPosition;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/code-highlighter",
-    "version": "5.5.9",
+    "version": "5.5.10",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -74,7 +74,7 @@
         "vitest": "^1.6.1"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.5.9",
+        "@chayns-components/core": "^5.5.10",
         "@chayns-components/textstring": "^5.5.8",
         "@types/react-syntax-highlighter": "^15.5.13",
         "babel-prettier-parser": "^0.10.8",
@@ -92,5 +92,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4660e894e1702d4a2399d0ee678dc46779d7ae98"
+    "gitHead": "ada2a8d95d50f5fb2761a73d1db59659bdbd2491"
 }