@chayns-components/core 5.5.29 → 5.5.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/AGENTS.md +10 -0
  2. package/lib/cjs/components/copyable-content/CopyableContent.js +8 -1
  3. package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
  4. package/lib/cjs/components/copyable-content/CopyableContent.styles.js +7 -2
  5. package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map +1 -1
  6. package/lib/esm/components/copyable-content/CopyableContent.js +8 -1
  7. package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
  8. package/lib/esm/components/copyable-content/CopyableContent.styles.js +7 -2
  9. package/lib/esm/components/copyable-content/CopyableContent.styles.js.map +1 -1
  10. package/lib/types/components/copyable-content/CopyableContent.d.ts +4 -0
  11. package/package.json +2 -2
package/AGENTS.md CHANGED
@@ -1731,6 +1731,15 @@ import { CopyableContent } from '@chayns-components/core';
1731
1731
  />
1732
1732
  ```
1733
1733
 
1734
+ #### Disabled
1735
+
1736
+ ```tsx
1737
+ <CopyableContent
1738
+ content={'Dieser Inhalt wird noch aktualisiert. Kopieren und Teilen sind bis zum Abschluss deaktiviert.'}
1739
+ isDisabled
1740
+ />
1741
+ ```
1742
+
1734
1743
  #### Typewriter Loop
1735
1744
 
1736
1745
  ```tsx
@@ -1831,6 +1840,7 @@ import { CopyableContent } from '@chayns-components/core';
1831
1840
  | `collapsedHeight` | `number \| undefined` | no | The height of the content in its collapsed state. |
1832
1841
  | `content` | `string` | yes | Markdown source used for rendering and clipboard data. |
1833
1842
  | `copyFailedMessage` | `string \| undefined` | no | Replaces the localized error message shown when copying fails. |
1843
+ | `isDisabled` | `boolean \| undefined` | no | Disables the copy and share actions. |
1834
1844
  | `transformClipboardHtml` | `((html: string) => string) \| undefined` | no | Transforms the generated HTML before it is written to the clipboard. |
1835
1845
 
1836
1846
  ### Types
package/lib/cjs/components/copyable-content/CopyableContent.js CHANGED
@@ -32,6 +32,7 @@ const CopyableContent = ({
32
32
  children,
33
33
  copyFailedMessage,
34
34
  collapsedHeight,
35
+ isDisabled = false,
35
36
  transformClipboardHtml
36
37
  }) => {
37
38
  const rootRef = (0, _react.useRef)(null);
@@ -62,6 +63,9 @@ const CopyableContent = ({
62
63
  }, COPY_FEEDBACK_DURATION);
63
64
  }, []);
64
65
  const handleCopy = (0, _react.useCallback)(async () => {
66
+ if (isDisabled) {
67
+ return;
68
+ }
65
69
  try {
66
70
  await (0, _copyableContentClipboard.copyableContentToClipboard)(content, transformClipboardHtml);
67
71
  showCopyFeedback();
@@ -73,7 +77,7 @@ const CopyableContent = ({
73
77
  type: _chaynsApi.DialogType.TOAST
74
78
  }).open();
75
79
  }
76
- }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback, transformClipboardHtml]);
80
+ }, [content, defaultCopyFailedMessage, isDisabled, copyFailedMessage, showCopyFeedback, transformClipboardHtml]);
77
81
  return /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContent, {
78
82
  $appearance: appearance,
79
83
  $colorMode: colorMode,
@@ -85,6 +89,7 @@ const CopyableContent = ({
85
89
  $colorMode: colorMode,
86
90
  $isSticky: isActionGroupSticky,
87
91
  "aria-label": defaultCopyButtonText,
92
+ disabled: isDisabled,
88
93
  onClick: () => {
89
94
  void handleCopy();
90
95
  },
@@ -93,6 +98,7 @@ const CopyableContent = ({
93
98
  icons: hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']
94
99
  })), /*#__PURE__*/_react.default.createElement(_SharingContextMenu.default, {
95
100
  link: content,
101
+ shouldDisableClick: isDisabled,
96
102
  shouldShowCallingCodeAction: false,
97
103
  shouldShowCopyAction: false,
98
104
  shouldUseDefaultTriggerStyles: false
@@ -100,6 +106,7 @@ const CopyableContent = ({
100
106
  $colorMode: colorMode,
101
107
  $isSticky: isActionGroupSticky,
102
108
  "aria-label": shareText,
109
+ disabled: isDisabled,
103
110
  type: "button"
104
111
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
105
112
  icons: ['fa fa-share-nodes']
package/lib/cjs/components/copyable-content/CopyableContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionState","_ColorSchemeProvider","_SharingContextMenu","_Icon","_Truncation","_CopyableContent","_CopyableContent2","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyableContent","appearance","CopyableContentAppearance","Default","content","children","copyFailedMessage","collapsedHeight","transformClipboardHtml","rootRef","useRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","colorScheme","useColorScheme","colorMode","theme","CopyableContentColorMode","Dark","Light","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyableContent","$appearance","$colorMode","className","ref","StyledCopyableContentActions","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","StyledCopyableContentTruncation","StyledCopyableContentBody","$shouldShowPadding","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\n CopyableContentColorMode,\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n StyledCopyableContentTruncation,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n /**\n * The height of the content in its collapsed state.\n */\n collapsedHeight?: number;\n /**\n * Transforms the generated HTML before it is written to the clipboard.\n */\n transformClipboardHtml?: (html: string) => string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\n transformClipboardHtml,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const colorScheme = useColorScheme();\n const colorMode =\n colorScheme?.theme.colorMode === 'dark'\n ? CopyableContentColorMode.Dark\n : CopyableContentColorMode.Light;\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content, transformClipboardHtml);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [\n content,\n defaultCopyFailedMessage,\n copyFailedMessage,\n showCopyFeedback,\n transformClipboardHtml,\n ]);\n\n return (\n <StyledCopyableContent\n $appearance={appearance}\n $colorMode={colorMode}\n className=\"copyable-content\"\n ref={rootRef}\n >\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n {typeof collapsedHeight === 'number' ? (\n <StyledCopyableContentTruncation>\n <Truncation collapsedHeight={collapsedHeight}>\n <StyledCopyableContentBody\n $colorMode={colorMode}\n $shouldShowPadding={false}\n >\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </Truncation>\n </StyledCopyableContentTruncation>\n ) : (\n <StyledCopyableContentBody $colorMode={colorMode}>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n )}\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionState","_ColorSchemeProvider","_SharingContextMenu","_Icon","_Truncation","_CopyableContent","_CopyableContent2","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","COPY_FEEDBACK_DURATION","CopyableContent","appearance","CopyableContentAppearance","Default","content","children","copyFailedMessage","collapsedHeight","isDisabled","transformClipboardHtml","rootRef","useRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","colorScheme","useColorScheme","colorMode","theme","CopyableContentColorMode","Dark","Light","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","window","clearTimeout","current","showCopyFeedback","useCallback","setTimeout","handleCopy","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","ERROR","type","DialogType","TOAST","open","createElement","StyledCopyableContent","$appearance","$colorMode","className","ref","StyledCopyableContentActions","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","disabled","onClick","icons","link","shouldDisableClick","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","StyledCopyableContentTruncation","StyledCopyableContentBody","$shouldShowPadding","dangerouslySetInnerHTML","__html","displayName","_default","exports"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\n CopyableContentColorMode,\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n StyledCopyableContentTruncation,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Disables the copy and share actions.\n */\n isDisabled?: boolean;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n /**\n * The height of the content in its collapsed state.\n */\n collapsedHeight?: number;\n /**\n * Transforms the generated HTML before it is written to the clipboard.\n */\n transformClipboardHtml?: (html: string) => string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\n isDisabled = false,\n transformClipboardHtml,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const colorScheme = useColorScheme();\n const colorMode =\n colorScheme?.theme.colorMode === 'dark'\n ? CopyableContentColorMode.Dark\n : CopyableContentColorMode.Light;\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n try {\n await copyableContentToClipboard(content, transformClipboardHtml);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [\n content,\n defaultCopyFailedMessage,\n isDisabled,\n copyFailedMessage,\n showCopyFeedback,\n transformClipboardHtml,\n ]);\n\n return (\n <StyledCopyableContent\n $appearance={appearance}\n $colorMode={colorMode}\n className=\"copyable-content\"\n ref={rootRef}\n >\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n disabled={isDisabled}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldDisableClick={isDisabled}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n disabled={isDisabled}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n {typeof collapsedHeight === 'number' ? (\n <StyledCopyableContentTruncation>\n <Truncation collapsedHeight={collapsedHeight}>\n <StyledCopyableContentBody\n $colorMode={colorMode}\n $shouldShowPadding={false}\n >\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </Truncation>\n </StyledCopyableContentTruncation>\n ) : (\n <StyledCopyableContentBody $colorMode={colorMode}>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n )}\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,uBAAA,CAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,qBAAA,GAAAP,OAAA;AACA,IAAAQ,oBAAA,GAAAR,OAAA;AACA,IAAAS,mBAAA,GAAAH,sBAAA,CAAAN,OAAA;AACA,IAAAU,KAAA,GAAAJ,sBAAA,CAAAN,OAAA;AACA,IAAAW,WAAA,GAAAL,sBAAA,CAAAN,OAAA;AACA,IAAAY,gBAAA,GAAAZ,OAAA;AASA,IAAAa,iBAAA,GAAAb,OAAA;AACA,IAAAc,yBAAA,GAAAd,OAAA;AAAwE,SAAAM,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,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;AAExE,MAAMgB,sBAAsB,GAAG,IAAI;AAiCnC,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,UAAU,GAAGC,2CAAyB,CAACC,OAAO;EAC9CC,OAAO;EACPC,QAAQ;EACRC,iBAAiB;EACjBC,eAAe;EACfC,UAAU,GAAG,KAAK;EAClBC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAc,IAAI,CAAC;EACzC,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAiB,IAAI,CAAC;EACnD,MAAME,sBAAsB,GAAG,IAAAF,aAAM,EAAS,CAAC;EAC/C,MAAMG,mBAAmB,GAAG,IAAAC,0CAAoB,EAACL,OAAO,EAAEE,cAAc,CAAC;EACzE,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAEjD,MAAMC,WAAW,GAAG,IAAAC,mCAAc,EAAC,CAAC;EACpC,MAAMC,SAAS,GACX,CAAAF,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEG,KAAK,CAACD,SAAS,MAAK,MAAM,GACjCE,yCAAwB,CAACC,IAAI,GAC7BD,yCAAwB,CAACE,KAAK;EAExC,MAAMC,qBAAqB,GAAG,IAAAC,8BAAkB,EAAC;IAC7CC,UAAU,EAAE,IAAAC,4BAAgB,EAACC,oBAAW,CAACC,UAAU,CAACC,eAAe,CAACC,IAAI;EAC5E,CAAC,CAAC;EACF,MAAMC,wBAAwB,GAAG,IAAAP,8BAAkB,EAAC;IAChDC,UAAU,EAAE,IAAAC,4BAAgB,EAACC,oBAAW,CAACC,UAAU,CAACC,eAAe,CAACG,UAAU;EAClF,CAAC,CAAC;EACF,MAAMC,SAAS,GAAG,IAAAT,8BAAkB,EAAC;IACjCC,UAAU,EAAE,IAAAC,4BAAgB,EAACC,oBAAW,CAACC,UAAU,CAACC,eAAe,CAACK,KAAK;EAC7E,CAAC,CAAC;EAEF,MAAMC,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM,IAAAC,0BAAkB,EAACpC,OAAO,CAAC,CAACkC,IAAI,EAAE,CAAClC,OAAO,CAAC,CAAC;EAEvE,IAAAqC,gBAAS,EACL,MAAM,MAAM;IACRC,MAAM,CAACC,YAAY,CAAC9B,sBAAsB,CAAC+B,OAAO,CAAC;EACvD,CAAC,EACD,EACJ,CAAC;EAED,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACvCJ,MAAM,CAACC,YAAY,CAAC9B,sBAAsB,CAAC+B,OAAO,CAAC;IACnD3B,YAAY,CAAC,IAAI,CAAC;IAElBJ,sBAAsB,CAAC+B,OAAO,GAAGF,MAAM,CAACK,UAAU,CAAC,MAAM;MACrD9B,YAAY,CAAC,KAAK,CAAC;IACvB,CAAC,EAAElB,sBAAsB,CAAC;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMiD,UAAU,GAAG,IAAAF,kBAAW,EAAC,YAAY;IACvC,IAAItC,UAAU,EAAE;MACZ;IACJ;IAEA,IAAI;MACA,MAAM,IAAAyC,oDAA0B,EAAC7C,OAAO,EAAEK,sBAAsB,CAAC;MACjEoC,gBAAgB,CAAC,CAAC;IACtB,CAAC,CAAC,MAAM;MACJ,KAAK,IAAAK,uBAAY,EAAC;QACdC,aAAa,EAAE,IAAI;QACnBC,IAAI,EAAE9C,iBAAiB,IAAI4B,wBAAwB;QACnDmB,SAAS,EAAEC,oBAAS,CAACC,KAAK;QAC1BC,IAAI,EAAEC,qBAAU,CAACC;MACrB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CACCvD,OAAO,EACP8B,wBAAwB,EACxB1B,UAAU,EACVF,iBAAiB,EACjBuC,gBAAgB,EAChBpC,sBAAsB,CACzB,CAAC;EAEF,oBACIzC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAAoF,qBAAqB;IAClBC,WAAW,EAAE7D,UAAW;IACxB8D,UAAU,EAAE1C,SAAU;IACtB2C,SAAS,EAAC,kBAAkB;IAC5BC,GAAG,EAAEvD;EAAQ,gBAEb1C,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAAyF,4BAA4B;IAACD,GAAG,EAAErD;EAAe,gBAC9C5C,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAA0F,gCAAgC,qBAC7BnG,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAA2F,2BAA2B;IACxBL,UAAU,EAAE1C,SAAU;IACtBgD,SAAS,EAAEvD,mBAAoB;IAC/B,cAAYY,qBAAsB;IAClC4C,QAAQ,EAAE9D,UAAW;IACrB+D,OAAO,EAAEA,CAAA,KAAM;MACX,KAAKvB,UAAU,CAAC,CAAC;IACrB,CAAE;IACFQ,IAAI,EAAC;EAAQ,gBAEbxF,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACrF,KAAA,CAAAO,OAAI;IAAC0F,KAAK,EAAExD,SAAS,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,kBAAkB;EAAE,CAAE,CACzC,CAAC,eAC9BhD,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACtF,mBAAA,CAAAQ,OAAkB;IACf2F,IAAI,EAAErE,OAAQ;IACdsE,kBAAkB,EAAElE,UAAW;IAC/BmE,2BAA2B,EAAE,KAAM;IACnCC,oBAAoB,EAAE,KAAM;IAC5BC,6BAA6B,EAAE;EAAM,gBAErC7G,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAA2F,2BAA2B;IACxBL,UAAU,EAAE1C,SAAU;IACtBgD,SAAS,EAAEvD,mBAAoB;IAC/B,cAAYsB,SAAU;IACtBkC,QAAQ,EAAE9D,UAAW;IACrBgD,IAAI,EAAC;EAAQ,gBAEbxF,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACrF,KAAA,CAAAO,OAAI;IAAC0F,KAAK,EAAE,CAAC,mBAAmB;EAAE,CAAE,CACZ,CACb,CACU,CACR,CAAC,EAC9B,OAAOjE,eAAe,KAAK,QAAQ,gBAChCvC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAAqG,+BAA+B,qBAC5B9G,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACpF,WAAA,CAAAM,OAAU;IAACyB,eAAe,EAAEA;EAAgB,gBACzCvC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAAsG,yBAAyB;IACtBhB,UAAU,EAAE1C,SAAU;IACtB2D,kBAAkB,EAAE;EAAM,GAEzB3E,QAAQ,iBAAIrC,MAAA,CAAAc,OAAA,CAAA8E,aAAA;IAAKqB,uBAAuB,EAAE;MAAEC,MAAM,EAAE5C;IAAK;EAAE,CAAE,CACvC,CACnB,CACiB,CAAC,gBAElCtE,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,gBAAA,CAAAsG,yBAAyB;IAAChB,UAAU,EAAE1C;EAAU,GAC5ChB,QAAQ,iBAAIrC,MAAA,CAAAc,OAAA,CAAA8E,aAAA;IAAKqB,uBAAuB,EAAE;MAAEC,MAAM,EAAE5C;IAAK;EAAE,CAAE,CACvC,CAEZ,CAAC;AAEhC,CAAC;AAEDtC,eAAe,CAACmF,WAAW,GAAG,iBAAiB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvG,OAAA,GAEjCkB,eAAe","ignoreList":[]}
package/lib/cjs/components/copyable-content/CopyableContent.styles.js CHANGED
@@ -106,17 +106,22 @@ const StyledCopyableContentButton = exports.StyledCopyableContentButton = _style
106
106
  box-shadow 0.15s ease,
107
107
  transform 0.15s ease;
108
108
 
109
- &:hover {
109
+ &:enabled:hover {
110
110
  border-color: ${getButtonHoverBorder};
111
111
  background-color: ${getButtonHoverBackground};
112
112
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
113
113
  }
114
114
 
115
- &:active {
115
+ &:enabled:active {
116
116
  background-color: ${getButtonActiveBackground};
117
117
  transform: scale(0.94);
118
118
  }
119
119
 
120
+ &:disabled {
121
+ cursor: not-allowed;
122
+ opacity: 0.45;
123
+ }
124
+
120
125
  &:focus-visible {
121
126
  outline: 2px solid currentColor;
122
127
  outline-offset: 2px;
package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_CopyableContent","e","__esModule","default","CopyableContentColorMode","exports","getBackgroundColor","$appearance","$colorMode","CopyableContentAppearance","Chat","Dark","getTextColor","StyledCopyableContent","styled","section","getActionGroupBorder","$isSticky","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonColor","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","StyledCopyableContentTruncation","getHeadlineColor","getBlockquoteBorderColor","getLinkColor","StyledCopyableContentBody","$shouldShowPadding"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\nexport enum CopyableContentColorMode {\n Dark = 'dark',\n Light = 'light',\n}\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n $colorMode: CopyableContentColorMode;\n}>;\n\nconst getBackgroundColor = ({ $appearance, $colorMode }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';\n};\n\nconst getTextColor = ({ $colorMode }: StyledCopyableContentProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 4px 0;\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${getTextColor};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${getButtonColor};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n &:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${getHeadlineColor};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${getBlockquoteBorderColor};\n }\n\n a {\n color: ${getLinkColor};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAoE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAExDG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,0BAAxBA,wBAAwB;EAAxBA,wBAAwB;EAAxBA,wBAAwB;EAAA,OAAxBA,wBAAwB;AAAA;AAUpC,MAAME,kBAAkB,GAAGA,CAAC;EAAEC,WAAW;EAAEC;AAAuC,CAAC,KAAK;EACpF,IAAID,WAAW,KAAKE,0CAAyB,CAACC,IAAI,EAAE;IAChD,OAAO,qBAAqB;EAChC;EAEA,OAAOF,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAC/E,CAAC;AAED,MAAMC,YAAY,GAAGA,CAAC;EAAEJ;AAAuC,CAAC,KAC5DA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAEjE,MAAME,qBAAqB,GAAAR,OAAA,CAAAQ,qBAAA,GAAGC,yBAAM,CAACC,OAAmC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBT,kBAAkB;AAC1C,aAAaM,YAAY;AACzB;AACA,CAAC;AAOD,MAAMI,oBAAoB,GAAGA,CAAC;EAAER,UAAU;EAAES;AAA4C,CAAC,KAAK;EAC1F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOT,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAC/E,CAAC;AAED,MAAMO,wBAAwB,GAAGA,CAAC;EAAEV,UAAU;EAAES;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOT,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAC/E,CAAC;AAED,MAAMQ,wBAAwB,GAAGA,CAAC;EAAEX;AAA6C,CAAC,KAC9EA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAEzF,MAAMS,yBAAyB,GAAGA,CAAC;EAAEZ;AAA6C,CAAC,KAC/EA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAEzF,MAAMU,oBAAoB,GAAGA,CAAC;EAAEb;AAA6C,CAAC,KAC1EA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAExE,MAAMW,cAAc,GAAGA,CAAC;EAAEd;AAA6C,CAAC,KACpEA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAEjE,MAAMY,4BAA4B,GAAAlB,OAAA,CAAAkB,4BAAA,GAAGT,yBAAM,CAACU,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gCAAgC,GAAApB,OAAA,CAAAoB,gCAAA,GAAGX,yBAAM,CAACU,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAEM,MAAME,2BAA2B,GAAArB,OAAA,CAAAqB,2BAAA,GAAGZ,yBAAM,CAACa,MAAwC;AAC1F;AACA,wBAAwBX,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBE,wBAAwB;AAChD,aAAaI,cAAc;AAC3B,kBAAkB,CAAC;EAAEL;AAAU,CAAC,KAAMA,SAAS,GAAG,+BAA+B,GAAG,MAAO;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBI,oBAAoB;AAC5C,4BAA4BF,wBAAwB;AACpD;AACA;AACA;AACA;AACA,4BAA4BC,yBAAyB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMQ,+BAA+B,GAAAvB,OAAA,CAAAuB,+BAAA,GAAGd,yBAAM,CAACU,GAAG;AACzD;AACA,CAAC;AAOD,MAAMK,gBAAgB,GAAGA,CAAC;EAAErB;AAA2C,CAAC,KACpEA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAExE,MAAMmB,wBAAwB,GAAGA,CAAC;EAAEtB;AAA2C,CAAC,KAC5EA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAExE,MAAMoB,YAAY,GAAGA,CAAC;EAAEvB;AAA2C,CAAC,KAChEA,UAAU,KAAKJ,wBAAwB,CAACO,IAAI,GAAG,SAAS,GAAG,SAAS;AAEjE,MAAMqB,yBAAyB,GAAA3B,OAAA,CAAA2B,yBAAA,GAAGlB,yBAAM,CAACU,GAAmC;AACnF;AACA;AACA;AACA;AACA,eAAe,CAAC;EAAES,kBAAkB,GAAG;AAAK,CAAC,KAAMA,kBAAkB,GAAG,aAAa,GAAG,GAAI;AAC5F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBJ,gBAAgB;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiCC,wBAAwB;AACzD;AACA;AACA;AACA,iBAAiBC,YAAY;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","_CopyableContent","e","__esModule","default","CopyableContentColorMode","exports","getBackgroundColor","$appearance","$colorMode","CopyableContentAppearance","Chat","Dark","getTextColor","StyledCopyableContent","styled","section","getActionGroupBorder","$isSticky","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonColor","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","StyledCopyableContentTruncation","getHeadlineColor","getBlockquoteBorderColor","getLinkColor","StyledCopyableContentBody","$shouldShowPadding"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\nexport enum CopyableContentColorMode {\n Dark = 'dark',\n Light = 'light',\n}\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n $colorMode: CopyableContentColorMode;\n}>;\n\nconst getBackgroundColor = ({ $appearance, $colorMode }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';\n};\n\nconst getTextColor = ({ $colorMode }: StyledCopyableContentProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 4px 0;\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${getTextColor};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${getButtonColor};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:enabled:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n &:enabled:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${getHeadlineColor};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${getBlockquoteBorderColor};\n }\n\n a {\n color: ${getLinkColor};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/copyable-content/CopyableContent.js CHANGED
@@ -18,6 +18,7 @@ const CopyableContent = ({
18
18
  children,
19
19
  copyFailedMessage,
20
20
  collapsedHeight,
21
+ isDisabled = false,
21
22
  transformClipboardHtml
22
23
  }) => {
23
24
  const rootRef = useRef(null);
@@ -48,6 +49,9 @@ const CopyableContent = ({
48
49
  }, COPY_FEEDBACK_DURATION);
49
50
  }, []);
50
51
  const handleCopy = useCallback(async () => {
52
+ if (isDisabled) {
53
+ return;
54
+ }
51
55
  try {
52
56
  await copyableContentToClipboard(content, transformClipboardHtml);
53
57
  showCopyFeedback();
@@ -59,7 +63,7 @@ const CopyableContent = ({
59
63
  type: DialogType.TOAST
60
64
  }).open();
61
65
  }
62
- }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback, transformClipboardHtml]);
66
+ }, [content, defaultCopyFailedMessage, isDisabled, copyFailedMessage, showCopyFeedback, transformClipboardHtml]);
63
67
  return /*#__PURE__*/React.createElement(StyledCopyableContent, {
64
68
  $appearance: appearance,
65
69
  $colorMode: colorMode,
@@ -71,6 +75,7 @@ const CopyableContent = ({
71
75
  $colorMode: colorMode,
72
76
  $isSticky: isActionGroupSticky,
73
77
  "aria-label": defaultCopyButtonText,
78
+ disabled: isDisabled,
74
79
  onClick: () => {
75
80
  void handleCopy();
76
81
  },
@@ -79,6 +84,7 @@ const CopyableContent = ({
79
84
  icons: hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']
80
85
  })), /*#__PURE__*/React.createElement(SharingContextMenu, {
81
86
  link: content,
87
+ shouldDisableClick: isDisabled,
82
88
  shouldShowCallingCodeAction: false,
83
89
  shouldShowCopyAction: false,
84
90
  shouldUseDefaultTriggerStyles: false
@@ -86,6 +92,7 @@ const CopyableContent = ({
86
92
  $colorMode: colorMode,
87
93
  $isSticky: isActionGroupSticky,
88
94
  "aria-label": shareText,
95
+ disabled: isDisabled,
89
96
  type: "button"
90
97
  }, /*#__PURE__*/React.createElement(Icon, {
91
98
  icons: ['fa fa-share-nodes']
package/lib/esm/components/copyable-content/CopyableContent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","useColorScheme","SharingContextMenu","Icon","Truncation","CopyableContentColorMode","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","StyledCopyableContentTruncation","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","collapsedHeight","transformClipboardHtml","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","colorScheme","colorMode","theme","Dark","Light","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","$colorMode","className","ref","$isSticky","onClick","icons","link","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","$shouldShowPadding","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\n CopyableContentColorMode,\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n StyledCopyableContentTruncation,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n /**\n * The height of the content in its collapsed state.\n */\n collapsedHeight?: number;\n /**\n * Transforms the generated HTML before it is written to the clipboard.\n */\n transformClipboardHtml?: (html: string) => string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\n transformClipboardHtml,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const colorScheme = useColorScheme();\n const colorMode =\n colorScheme?.theme.colorMode === 'dark'\n ? CopyableContentColorMode.Dark\n : CopyableContentColorMode.Light;\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content, transformClipboardHtml);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [\n content,\n defaultCopyFailedMessage,\n copyFailedMessage,\n showCopyFeedback,\n transformClipboardHtml,\n ]);\n\n return (\n <StyledCopyableContent\n $appearance={appearance}\n $colorMode={colorMode}\n className=\"copyable-content\"\n ref={rootRef}\n >\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n {typeof collapsedHeight === 'number' ? (\n <StyledCopyableContentTruncation>\n <Truncation collapsedHeight={collapsedHeight}>\n <StyledCopyableContentBody\n $colorMode={colorMode}\n $shouldShowPadding={false}\n >\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </Truncation>\n </StyledCopyableContentTruncation>\n ) : (\n <StyledCopyableContentBody $colorMode={colorMode}>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n )}\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useEffect","useMemo","useRef","useState","textStrings","useStickyActionState","useColorScheme","SharingContextMenu","Icon","Truncation","CopyableContentColorMode","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","StyledCopyableContentTruncation","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","collapsedHeight","isDisabled","transformClipboardHtml","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","colorScheme","colorMode","theme","Dark","Light","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopyFailedMessage","copyFailed","shareText","share","html","window","clearTimeout","current","showCopyFeedback","setTimeout","handleCopy","showCloseIcon","text","toastType","ERROR","type","TOAST","open","createElement","$appearance","$colorMode","className","ref","$isSticky","disabled","onClick","icons","link","shouldDisableClick","shouldShowCallingCodeAction","shouldShowCopyAction","shouldUseDefaultTriggerStyles","$shouldShowPadding","dangerouslySetInnerHTML","__html","displayName"],"sources":["../../../../src/components/copyable-content/CopyableContent.tsx"],"sourcesContent":["import { formatStringToHtml } from '@chayns-components/format';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport textStrings from '../../constants/textStrings';\nimport { useStickyActionState } from '../../hooks/useStickyActionState';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\n CopyableContentColorMode,\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n StyledCopyableContentTruncation,\n} from './CopyableContent.styles';\nimport { CopyableContentAppearance } from './CopyableContent.types';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nconst COPY_FEEDBACK_DURATION = 1500;\n\nexport type CopyableContentProps = {\n /**\n * Controls the visual surface of the content block.\n */\n appearance?: CopyableContentAppearance;\n /**\n * Markdown source used for rendering and clipboard data.\n */\n content: string;\n /**\n * Disables the copy and share actions.\n */\n isDisabled?: boolean;\n /**\n * Replaces only the visible rendered content and never the copied source.\n */\n children?: ReactNode;\n /**\n * Replaces the localized error message shown when copying fails.\n */\n copyFailedMessage?: string;\n /**\n * The height of the content in its collapsed state.\n */\n collapsedHeight?: number;\n /**\n * Transforms the generated HTML before it is written to the clipboard.\n */\n transformClipboardHtml?: (html: string) => string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\n isDisabled = false,\n transformClipboardHtml,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const copyFeedbackTimeoutRef = useRef<number>();\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n const [hasCopied, setHasCopied] = useState(false);\n\n const colorScheme = useColorScheme();\n const colorMode =\n colorScheme?.theme.colorMode === 'dark'\n ? CopyableContentColorMode.Dark\n : CopyableContentColorMode.Light;\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopyFailedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copyFailed),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.share),\n });\n\n const html = useMemo(() => formatStringToHtml(content).html, [content]);\n\n useEffect(\n () => () => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n },\n [],\n );\n\n const showCopyFeedback = useCallback(() => {\n window.clearTimeout(copyFeedbackTimeoutRef.current);\n setHasCopied(true);\n\n copyFeedbackTimeoutRef.current = window.setTimeout(() => {\n setHasCopied(false);\n }, COPY_FEEDBACK_DURATION);\n }, []);\n\n const handleCopy = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n try {\n await copyableContentToClipboard(content, transformClipboardHtml);\n showCopyFeedback();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedMessage ?? defaultCopyFailedMessage,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [\n content,\n defaultCopyFailedMessage,\n isDisabled,\n copyFailedMessage,\n showCopyFeedback,\n transformClipboardHtml,\n ]);\n\n return (\n <StyledCopyableContent\n $appearance={appearance}\n $colorMode={colorMode}\n className=\"copyable-content\"\n ref={rootRef}\n >\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={defaultCopyButtonText}\n disabled={isDisabled}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon icons={hasCopied ? ['fa fa-check'] : ['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu\n link={content}\n shouldDisableClick={isDisabled}\n shouldShowCallingCodeAction={false}\n shouldShowCopyAction={false}\n shouldUseDefaultTriggerStyles={false}\n >\n <StyledCopyableContentButton\n $colorMode={colorMode}\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n disabled={isDisabled}\n type=\"button\"\n >\n <Icon icons={['fa fa-share-nodes']} />\n </StyledCopyableContentButton>\n </SharingContextMenu>\n </StyledCopyableContentActionGroup>\n </StyledCopyableContentActions>\n {typeof collapsedHeight === 'number' ? (\n <StyledCopyableContentTruncation>\n <Truncation collapsedHeight={collapsedHeight}>\n <StyledCopyableContentBody\n $colorMode={colorMode}\n $shouldShowPadding={false}\n >\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </Truncation>\n </StyledCopyableContentTruncation>\n ) : (\n <StyledCopyableContentBody $colorMode={colorMode}>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n )}\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n\nexport { CopyableContentAppearance } from './CopyableContent.types';\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/copyable-content/CopyableContent.styles.js CHANGED
@@ -99,17 +99,22 @@ export const StyledCopyableContentButton = styled.button`
99
99
  box-shadow 0.15s ease,
100
100
  transform 0.15s ease;
101
101
 
102
- &:hover {
102
+ &:enabled:hover {
103
103
  border-color: ${getButtonHoverBorder};
104
104
  background-color: ${getButtonHoverBackground};
105
105
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
106
106
  }
107
107
 
108
- &:active {
108
+ &:enabled:active {
109
109
  background-color: ${getButtonActiveBackground};
110
110
  transform: scale(0.94);
111
111
  }
112
112
 
113
+ &:disabled {
114
+ cursor: not-allowed;
115
+ opacity: 0.45;
116
+ }
117
+
113
118
  &:focus-visible {
114
119
  outline: 2px solid currentColor;
115
120
  outline-offset: 2px;
package/lib/esm/components/copyable-content/CopyableContent.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","CopyableContentColorMode","getBackgroundColor","$appearance","$colorMode","Chat","Dark","getTextColor","StyledCopyableContent","section","getActionGroupBorder","$isSticky","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonColor","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","StyledCopyableContentTruncation","getHeadlineColor","getBlockquoteBorderColor","getLinkColor","StyledCopyableContentBody","$shouldShowPadding"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\nexport enum CopyableContentColorMode {\n Dark = 'dark',\n Light = 'light',\n}\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n $colorMode: CopyableContentColorMode;\n}>;\n\nconst getBackgroundColor = ({ $appearance, $colorMode }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';\n};\n\nconst getTextColor = ({ $colorMode }: StyledCopyableContentProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 4px 0;\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${getTextColor};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${getButtonColor};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n &:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${getHeadlineColor};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${getBlockquoteBorderColor};\n }\n\n a {\n color: ${getLinkColor};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","CopyableContentColorMode","getBackgroundColor","$appearance","$colorMode","Chat","Dark","getTextColor","StyledCopyableContent","section","getActionGroupBorder","$isSticky","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonColor","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","StyledCopyableContentTruncation","getHeadlineColor","getBlockquoteBorderColor","getLinkColor","StyledCopyableContentBody","$shouldShowPadding"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\nexport enum CopyableContentColorMode {\n Dark = 'dark',\n Light = 'light',\n}\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n $colorMode: CopyableContentColorMode;\n}>;\n\nconst getBackgroundColor = ({ $appearance, $colorMode }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';\n};\n\nconst getTextColor = ({ $colorMode }: StyledCopyableContentProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 4px 0;\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${getTextColor};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${getButtonColor};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:enabled:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n &:enabled:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.45;\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${getHeadlineColor};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${getBlockquoteBorderColor};\n }\n\n a {\n color: ${getLinkColor};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/types/components/copyable-content/CopyableContent.d.ts CHANGED
@@ -9,6 +9,10 @@ export type CopyableContentProps = {
9
9
  * Markdown source used for rendering and clipboard data.
10
10
  */
11
11
  content: string;
12
+ /**
13
+ * Disables the copy and share actions.
14
+ */
15
+ isDisabled?: boolean;
12
16
  /**
13
17
  * Replaces only the visible rendered content and never the copied source.
14
18
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.5.29",
3
+ "version": "5.5.30",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -93,5 +93,5 @@
93
93
  "publishConfig": {
94
94
  "access": "public"
95
95
  },
96
- "gitHead": "f8e901fa5342d0b0b294c12955bc68dddb31bcb8"
96
+ "gitHead": "b90fd1685e1067d28e29580095f3d290be892769"
97
97
  }