@chayns-components/core 5.5.25 → 5.5.26

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 (10) hide show
  1. package/lib/cjs/components/copyable-content/CopyableContent.js +10 -1
  2. package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
  3. package/lib/cjs/components/copyable-content/CopyableContent.styles.js +62 -40
  4. package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map +1 -1
  5. package/lib/esm/components/copyable-content/CopyableContent.js +11 -2
  6. package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
  7. package/lib/esm/components/copyable-content/CopyableContent.styles.js +61 -39
  8. package/lib/esm/components/copyable-content/CopyableContent.styles.js.map +1 -1
  9. package/lib/types/components/copyable-content/CopyableContent.styles.d.ts +16 -6
  10. package/package.json +2 -2
package/lib/cjs/components/copyable-content/CopyableContent.js CHANGED
@@ -16,6 +16,7 @@ var _chaynsApi = require("chayns-api");
16
16
  var _react = _interopRequireWildcard(require("react"));
17
17
  var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
18
18
  var _useStickyActionState = require("../../hooks/useStickyActionState");
19
+ var _ColorSchemeProvider = require("../color-scheme-provider/ColorSchemeProvider");
19
20
  var _SharingContextMenu = _interopRequireDefault(require("../sharing-context-menu/SharingContextMenu"));
20
21
  var _Icon = _interopRequireDefault(require("../icon/Icon"));
21
22
  var _Truncation = _interopRequireDefault(require("../truncation/Truncation"));
@@ -37,6 +38,8 @@ const CopyableContent = ({
37
38
  const copyFeedbackTimeoutRef = (0, _react.useRef)();
38
39
  const isActionGroupSticky = (0, _useStickyActionState.useStickyActionState)(rootRef, actionGroupRef);
39
40
  const [hasCopied, setHasCopied] = (0, _react.useState)(false);
41
+ const colorScheme = (0, _ColorSchemeProvider.useColorScheme)();
42
+ const colorMode = (colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.theme.colorMode) === 'dark' ? _CopyableContent.CopyableContentColorMode.Dark : _CopyableContent.CopyableContentColorMode.Light;
40
43
  const defaultCopyButtonText = (0, _textstring.useTextstringValue)({
41
44
  textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.copy)
42
45
  });
@@ -72,11 +75,13 @@ const CopyableContent = ({
72
75
  }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);
73
76
  return /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContent, {
74
77
  $appearance: appearance,
78
+ $colorMode: colorMode,
75
79
  className: "copyable-content",
76
80
  ref: rootRef
77
81
  }, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActions, {
78
82
  ref: actionGroupRef
79
83
  }, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActionGroup, null, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentButton, {
84
+ $colorMode: colorMode,
80
85
  $isSticky: isActionGroupSticky,
81
86
  "aria-label": defaultCopyButtonText,
82
87
  onClick: () => {
@@ -91,6 +96,7 @@ const CopyableContent = ({
91
96
  shouldShowCopyAction: false,
92
97
  shouldUseDefaultTriggerStyles: false
93
98
  }, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentButton, {
99
+ $colorMode: colorMode,
94
100
  $isSticky: isActionGroupSticky,
95
101
  "aria-label": shareText,
96
102
  type: "button"
@@ -99,12 +105,15 @@ const CopyableContent = ({
99
105
  }))))), typeof collapsedHeight === 'number' ? /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentTruncation, null, /*#__PURE__*/_react.default.createElement(_Truncation.default, {
100
106
  collapsedHeight: collapsedHeight
101
107
  }, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentBody, {
108
+ $colorMode: colorMode,
102
109
  $shouldShowPadding: false
103
110
  }, children ?? /*#__PURE__*/_react.default.createElement("div", {
104
111
  dangerouslySetInnerHTML: {
105
112
  __html: html
106
113
  }
107
- })))) : /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentBody, null, children ?? /*#__PURE__*/_react.default.createElement("div", {
114
+ })))) : /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentBody, {
115
+ $colorMode: colorMode
116
+ }, children ?? /*#__PURE__*/_react.default.createElement("div", {
108
117
  dangerouslySetInnerHTML: {
109
118
  __html: html
110
119
  }
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","_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","rootRef","useRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","useStickyActionState","hasCopied","setHasCopied","useState","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","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 SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\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\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\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 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);\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 }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\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 $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 $shouldShowPadding={false}>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </Truncation>\n </StyledCopyableContentTruncation>\n ) : (\n <StyledCopyableContentBody>\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","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\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\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);\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 }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\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":[]}
package/lib/cjs/components/copyable-content/CopyableContent.styles.js CHANGED
@@ -3,21 +3,27 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.StyledCopyableContentTruncation = exports.StyledCopyableContentButton = exports.StyledCopyableContentBody = exports.StyledCopyableContentActions = exports.StyledCopyableContentActionGroup = exports.StyledCopyableContent = void 0;
6
+ exports.StyledCopyableContentTruncation = exports.StyledCopyableContentButton = exports.StyledCopyableContentBody = exports.StyledCopyableContentActions = exports.StyledCopyableContentActionGroup = exports.StyledCopyableContent = exports.CopyableContentColorMode = void 0;
7
7
  var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _CopyableContent = require("./CopyableContent.types");
9
9
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ let CopyableContentColorMode = exports.CopyableContentColorMode = /*#__PURE__*/function (CopyableContentColorMode) {
11
+ CopyableContentColorMode["Dark"] = "dark";
12
+ CopyableContentColorMode["Light"] = "light";
13
+ return CopyableContentColorMode;
14
+ }({});
10
15
  const getBackgroundColor = ({
11
16
  $appearance,
12
- theme
17
+ $colorMode
13
18
  }) => {
14
19
  if ($appearance === _CopyableContent.CopyableContentAppearance.Chat) {
15
20
  return 'rgba(0, 0, 0, 0.12)';
16
21
  }
17
- const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';
18
- const opacity = theme.cardBackgroundOpacity ?? 1;
19
- return `rgba(${secondaryColor}, ${opacity})`;
22
+ return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';
20
23
  };
24
+ const getTextColor = ({
25
+ $colorMode
26
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';
21
27
  const StyledCopyableContent = exports.StyledCopyableContent = _styledComponents.default.section`
22
28
  --copyable-content-action-size: 32px;
23
29
  --copyable-content-action-inset: 8px;
@@ -32,11 +38,39 @@ const StyledCopyableContent = exports.StyledCopyableContent = _styledComponents.
32
38
  );
33
39
  border-radius: 8px;
34
40
  background-color: ${getBackgroundColor};
35
- color: ${({
36
- theme
37
- }) => theme.text};
41
+ color: ${getTextColor};
38
42
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
39
43
  `;
44
+ const getActionGroupBorder = ({
45
+ $colorMode,
46
+ $isSticky
47
+ }) => {
48
+ if (!$isSticky) {
49
+ return 'transparent';
50
+ }
51
+ return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';
52
+ };
53
+ const getActionGroupBackground = ({
54
+ $colorMode,
55
+ $isSticky
56
+ }) => {
57
+ if (!$isSticky) {
58
+ return 'transparent';
59
+ }
60
+ return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';
61
+ };
62
+ const getButtonHoverBackground = ({
63
+ $colorMode
64
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';
65
+ const getButtonActiveBackground = ({
66
+ $colorMode
67
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';
68
+ const getButtonHoverBorder = ({
69
+ $colorMode
70
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';
71
+ const getButtonColor = ({
72
+ $colorMode
73
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';
40
74
  const StyledCopyableContentActions = exports.StyledCopyableContentActions = _styledComponents.default.div`
41
75
  position: sticky;
42
76
  top: var(--copyable-content-action-inset);
@@ -56,22 +90,14 @@ const StyledCopyableContentActionGroup = exports.StyledCopyableContentActionGrou
56
90
  `;
57
91
  const StyledCopyableContentButton = exports.StyledCopyableContentButton = _styledComponents.default.button`
58
92
  box-sizing: border-box;
59
- border: 1px solid ${({
60
- $isSticky,
61
- theme
62
- }) => $isSticky ? theme['202'] : 'transparent'};
93
+ border: 1px solid ${getActionGroupBorder};
63
94
  border-radius: 4px;
64
95
  width: var(--copyable-content-action-size);
65
96
  height: var(--copyable-content-action-size);
66
97
  padding: 0;
67
98
  cursor: pointer;
68
- background-color: ${({
69
- $isSticky,
70
- theme
71
- }) => $isSticky ? theme['100'] : 'transparent'};
72
- color: ${({
73
- theme
74
- }) => theme.text};
99
+ background-color: ${getActionGroupBackground};
100
+ color: ${getButtonColor};
75
101
  box-shadow: ${({
76
102
  $isSticky
77
103
  }) => $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none'};
@@ -82,31 +108,33 @@ const StyledCopyableContentButton = exports.StyledCopyableContentButton = _style
82
108
  transform 0.15s ease;
83
109
 
84
110
  &:hover {
85
- border-color: rgba(${({
86
- theme
87
- }) => theme['text-rgb']}, 0.18);
88
- background-color: rgba(${({
89
- theme
90
- }) => theme['text-rgb']}, 0.1);
91
- box-shadow: inset 0 0 0 1px rgba(${({
92
- theme
93
- }) => theme['text-rgb']}, 0.06);
111
+ border-color: ${getButtonHoverBorder};
112
+ background-color: ${getButtonHoverBackground};
113
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
94
114
  }
95
115
 
96
116
  &:active {
117
+ background-color: ${getButtonActiveBackground};
97
118
  transform: scale(0.94);
98
119
  }
99
120
 
100
121
  &:focus-visible {
101
- outline: 2px solid ${({
102
- theme
103
- }) => theme.buttonBackgroundColor};
122
+ outline: 2px solid currentColor;
104
123
  outline-offset: 2px;
105
124
  }
106
125
  `;
107
126
  const StyledCopyableContentTruncation = exports.StyledCopyableContentTruncation = _styledComponents.default.div`
108
127
  padding: 0 12px 12px;
109
128
  `;
129
+ const getHeadlineColor = ({
130
+ $colorMode
131
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';
132
+ const getBlockquoteBorderColor = ({
133
+ $colorMode
134
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';
135
+ const getLinkColor = ({
136
+ $colorMode
137
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';
110
138
  const StyledCopyableContentBody = exports.StyledCopyableContentBody = _styledComponents.default.div`
111
139
  min-width: 0;
112
140
  max-width: 100%;
@@ -134,9 +162,7 @@ const StyledCopyableContentBody = exports.StyledCopyableContentBody = _styledCom
134
162
  h4,
135
163
  h5,
136
164
  h6 {
137
- color: ${({
138
- theme
139
- }) => theme.headline};
165
+ color: ${getHeadlineColor};
140
166
  }
141
167
 
142
168
  ul,
@@ -146,15 +172,11 @@ const StyledCopyableContentBody = exports.StyledCopyableContentBody = _styledCom
146
172
 
147
173
  blockquote {
148
174
  padding-left: 12px;
149
- border-left: 3px solid ${({
150
- theme
151
- }) => theme['202']};
175
+ border-left: 3px solid ${getBlockquoteBorderColor};
152
176
  }
153
177
 
154
178
  a {
155
- color: ${({
156
- theme
157
- }) => theme.primary};
179
+ color: ${getLinkColor};
158
180
  overflow-wrap: anywhere;
159
181
  }
160
182
 
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","getBackgroundColor","$appearance","theme","CopyableContentAppearance","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","exports","styled","section","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentTruncation","StyledCopyableContentBody","$shouldShowPadding","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';\n const opacity = theme.cardBackgroundOpacity ?? 1;\n\n return `rgba(${secondaryColor}, ${opacity})`;\n};\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 4px 0;\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${({ theme }) => theme.text};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${({ $isSticky, theme }) => ($isSticky ? theme['202'] : 'transparent')};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${({ $isSticky, theme }) => ($isSticky ? theme['100'] : 'transparent')};\n color: ${({ theme }) => theme.text};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: rgba(${({ theme }) => theme['text-rgb']}, 0.18);\n background-color: rgba(${({ theme }) => theme['text-rgb']}, 0.1);\n box-shadow: inset 0 0 0 1px rgba(${({ theme }) => theme['text-rgb']}, 0.06);\n }\n\n &:active {\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $shouldShowPadding?: boolean;\n}>;\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${({ theme }) => theme.headline};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${({ theme }) => theme['202']};\n }\n\n a {\n color: ${({ theme }) => theme.primary};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
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-x: clip;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${getTextColor};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${getButtonColor};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n &:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${getHeadlineColor};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${getBlockquoteBorderColor};\n }\n\n a {\n color: ${getLinkColor};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/esm/components/copyable-content/CopyableContent.js CHANGED
@@ -4,10 +4,11 @@ import { createDialog, DialogType, ToastType } from 'chayns-api';
4
4
  import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
5
5
  import textStrings from '../../constants/textStrings';
6
6
  import { useStickyActionState } from '../../hooks/useStickyActionState';
7
+ import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
7
8
  import SharingContextMenu from '../sharing-context-menu/SharingContextMenu';
8
9
  import Icon from '../icon/Icon';
9
10
  import Truncation from '../truncation/Truncation';
10
- import { StyledCopyableContent, StyledCopyableContentActionGroup, StyledCopyableContentActions, StyledCopyableContentBody, StyledCopyableContentButton, StyledCopyableContentTruncation } from './CopyableContent.styles';
11
+ import { CopyableContentColorMode, StyledCopyableContent, StyledCopyableContentActionGroup, StyledCopyableContentActions, StyledCopyableContentBody, StyledCopyableContentButton, StyledCopyableContentTruncation } from './CopyableContent.styles';
11
12
  import { CopyableContentAppearance } from './CopyableContent.types';
12
13
  import { copyableContentToClipboard } from './copyableContentClipboard';
13
14
  const COPY_FEEDBACK_DURATION = 1500;
@@ -23,6 +24,8 @@ const CopyableContent = ({
23
24
  const copyFeedbackTimeoutRef = useRef();
24
25
  const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);
25
26
  const [hasCopied, setHasCopied] = useState(false);
27
+ const colorScheme = useColorScheme();
28
+ const colorMode = colorScheme?.theme.colorMode === 'dark' ? CopyableContentColorMode.Dark : CopyableContentColorMode.Light;
26
29
  const defaultCopyButtonText = useTextstringValue({
27
30
  textstring: ttsToITextString(textStrings.components.copyableContent.copy)
28
31
  });
@@ -58,11 +61,13 @@ const CopyableContent = ({
58
61
  }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);
59
62
  return /*#__PURE__*/React.createElement(StyledCopyableContent, {
60
63
  $appearance: appearance,
64
+ $colorMode: colorMode,
61
65
  className: "copyable-content",
62
66
  ref: rootRef
63
67
  }, /*#__PURE__*/React.createElement(StyledCopyableContentActions, {
64
68
  ref: actionGroupRef
65
69
  }, /*#__PURE__*/React.createElement(StyledCopyableContentActionGroup, null, /*#__PURE__*/React.createElement(StyledCopyableContentButton, {
70
+ $colorMode: colorMode,
66
71
  $isSticky: isActionGroupSticky,
67
72
  "aria-label": defaultCopyButtonText,
68
73
  onClick: () => {
@@ -77,6 +82,7 @@ const CopyableContent = ({
77
82
  shouldShowCopyAction: false,
78
83
  shouldUseDefaultTriggerStyles: false
79
84
  }, /*#__PURE__*/React.createElement(StyledCopyableContentButton, {
85
+ $colorMode: colorMode,
80
86
  $isSticky: isActionGroupSticky,
81
87
  "aria-label": shareText,
82
88
  type: "button"
@@ -85,12 +91,15 @@ const CopyableContent = ({
85
91
  }))))), typeof collapsedHeight === 'number' ? /*#__PURE__*/React.createElement(StyledCopyableContentTruncation, null, /*#__PURE__*/React.createElement(Truncation, {
86
92
  collapsedHeight: collapsedHeight
87
93
  }, /*#__PURE__*/React.createElement(StyledCopyableContentBody, {
94
+ $colorMode: colorMode,
88
95
  $shouldShowPadding: false
89
96
  }, children ?? /*#__PURE__*/React.createElement("div", {
90
97
  dangerouslySetInnerHTML: {
91
98
  __html: html
92
99
  }
93
- })))) : /*#__PURE__*/React.createElement(StyledCopyableContentBody, null, children ?? /*#__PURE__*/React.createElement("div", {
100
+ })))) : /*#__PURE__*/React.createElement(StyledCopyableContentBody, {
101
+ $colorMode: colorMode
102
+ }, children ?? /*#__PURE__*/React.createElement("div", {
94
103
  dangerouslySetInnerHTML: {
95
104
  __html: html
96
105
  }
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","SharingContextMenu","Icon","Truncation","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","StyledCopyableContentTruncation","CopyableContentAppearance","copyableContentToClipboard","COPY_FEEDBACK_DURATION","CopyableContent","appearance","Default","content","children","copyFailedMessage","collapsedHeight","rootRef","actionGroupRef","copyFeedbackTimeoutRef","isActionGroupSticky","hasCopied","setHasCopied","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","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 SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport Truncation from '../truncation/Truncation';\nimport {\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\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\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 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);\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 }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\n\n return (\n <StyledCopyableContent $appearance={appearance} className=\"copyable-content\" ref={rootRef}>\n <StyledCopyableContentActions ref={actionGroupRef}>\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\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 $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 $shouldShowPadding={false}>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </Truncation>\n </StyledCopyableContentTruncation>\n ) : (\n <StyledCopyableContentBody>\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,SAASA,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,+BAA+B;AACpF,SAASC,YAAY,EAAEC,UAAU,EAAEC,SAAS,QAAQ,YAAY;AAChE,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC/F,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,oBAAoB,QAAQ,kCAAkC;AACvE,OAAOC,kBAAkB,MAAM,4CAA4C;AAC3E,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,UAAU,MAAM,0BAA0B;AACjD,SACIC,qBAAqB,EACrBC,gCAAgC,EAChCC,4BAA4B,EAC5BC,yBAAyB,EACzBC,2BAA2B,EAC3BC,+BAA+B,QAC5B,0BAA0B;AACjC,SAASC,yBAAyB,QAAQ,yBAAyB;AACnE,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE,MAAMC,sBAAsB,GAAG,IAAI;AAyBnC,MAAMC,eAAyC,GAAGA,CAAC;EAC/CC,UAAU,GAAGJ,yBAAyB,CAACK,OAAO;EAC9CC,OAAO;EACPC,QAAQ;EACRC,iBAAiB;EACjBC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGvB,MAAM,CAAc,IAAI,CAAC;EACzC,MAAMwB,cAAc,GAAGxB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMyB,sBAAsB,GAAGzB,MAAM,CAAS,CAAC;EAC/C,MAAM0B,mBAAmB,GAAGvB,oBAAoB,CAACoB,OAAO,EAAEC,cAAc,CAAC;EACzE,MAAM,CAACG,SAAS,EAAEC,YAAY,CAAC,GAAG3B,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAM4B,qBAAqB,GAAGrC,kBAAkB,CAAC;IAC7CsC,UAAU,EAAEvC,gBAAgB,CAACW,WAAW,CAAC6B,UAAU,CAACC,eAAe,CAACC,IAAI;EAC5E,CAAC,CAAC;EACF,MAAMC,wBAAwB,GAAG1C,kBAAkB,CAAC;IAChDsC,UAAU,EAAEvC,gBAAgB,CAACW,WAAW,CAAC6B,UAAU,CAACC,eAAe,CAACG,UAAU;EAClF,CAAC,CAAC;EACF,MAAMC,SAAS,GAAG5C,kBAAkB,CAAC;IACjCsC,UAAU,EAAEvC,gBAAgB,CAACW,WAAW,CAAC6B,UAAU,CAACC,eAAe,CAACK,KAAK;EAC7E,CAAC,CAAC;EAEF,MAAMC,IAAI,GAAGvC,OAAO,CAAC,MAAMT,kBAAkB,CAAC6B,OAAO,CAAC,CAACmB,IAAI,EAAE,CAACnB,OAAO,CAAC,CAAC;EAEvErB,SAAS,CACL,MAAM,MAAM;IACRyC,MAAM,CAACC,YAAY,CAACf,sBAAsB,CAACgB,OAAO,CAAC;EACvD,CAAC,EACD,EACJ,CAAC;EAED,MAAMC,gBAAgB,GAAG7C,WAAW,CAAC,MAAM;IACvC0C,MAAM,CAACC,YAAY,CAACf,sBAAsB,CAACgB,OAAO,CAAC;IACnDb,YAAY,CAAC,IAAI,CAAC;IAElBH,sBAAsB,CAACgB,OAAO,GAAGF,MAAM,CAACI,UAAU,CAAC,MAAM;MACrDf,YAAY,CAAC,KAAK,CAAC;IACvB,CAAC,EAAEb,sBAAsB,CAAC;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM6B,UAAU,GAAG/C,WAAW,CAAC,YAAY;IACvC,IAAI;MACA,MAAMiB,0BAA0B,CAACK,OAAO,CAAC;MACzCuB,gBAAgB,CAAC,CAAC;IACtB,CAAC,CAAC,MAAM;MACJ,KAAKjD,YAAY,CAAC;QACdoD,aAAa,EAAE,IAAI;QACnBC,IAAI,EAAEzB,iBAAiB,IAAIa,wBAAwB;QACnDa,SAAS,EAAEpD,SAAS,CAACqD,KAAK;QAC1BC,IAAI,EAAEvD,UAAU,CAACwD;MACrB,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAAChC,OAAO,EAAEe,wBAAwB,EAAEb,iBAAiB,EAAEqB,gBAAgB,CAAC,CAAC;EAE5E,oBACI9C,KAAA,CAAAwD,aAAA,CAAC7C,qBAAqB;IAAC8C,WAAW,EAAEpC,UAAW;IAACqC,SAAS,EAAC,kBAAkB;IAACC,GAAG,EAAEhC;EAAQ,gBACtF3B,KAAA,CAAAwD,aAAA,CAAC3C,4BAA4B;IAAC8C,GAAG,EAAE/B;EAAe,gBAC9C5B,KAAA,CAAAwD,aAAA,CAAC5C,gCAAgC,qBAC7BZ,KAAA,CAAAwD,aAAA,CAACzC,2BAA2B;IACxB6C,SAAS,EAAE9B,mBAAoB;IAC/B,cAAYG,qBAAsB;IAClC4B,OAAO,EAAEA,CAAA,KAAM;MACX,KAAKb,UAAU,CAAC,CAAC;IACrB,CAAE;IACFK,IAAI,EAAC;EAAQ,gBAEbrD,KAAA,CAAAwD,aAAA,CAAC/C,IAAI;IAACqD,KAAK,EAAE/B,SAAS,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,kBAAkB;EAAE,CAAE,CACzC,CAAC,eAC9B/B,KAAA,CAAAwD,aAAA,CAAChD,kBAAkB;IACfuD,IAAI,EAAExC,OAAQ;IACdyC,2BAA2B,EAAE,KAAM;IACnCC,oBAAoB,EAAE,KAAM;IAC5BC,6BAA6B,EAAE;EAAM,gBAErClE,KAAA,CAAAwD,aAAA,CAACzC,2BAA2B;IACxB6C,SAAS,EAAE9B,mBAAoB;IAC/B,cAAYU,SAAU;IACtBa,IAAI,EAAC;EAAQ,gBAEbrD,KAAA,CAAAwD,aAAA,CAAC/C,IAAI;IAACqD,KAAK,EAAE,CAAC,mBAAmB;EAAE,CAAE,CACZ,CACb,CACU,CACR,CAAC,EAC9B,OAAOpC,eAAe,KAAK,QAAQ,gBAChC1B,KAAA,CAAAwD,aAAA,CAACxC,+BAA+B,qBAC5BhB,KAAA,CAAAwD,aAAA,CAAC9C,UAAU;IAACgB,eAAe,EAAEA;EAAgB,gBACzC1B,KAAA,CAAAwD,aAAA,CAAC1C,yBAAyB;IAACqD,kBAAkB,EAAE;EAAM,GAChD3C,QAAQ,iBAAIxB,KAAA,CAAAwD,aAAA;IAAKY,uBAAuB,EAAE;MAAEC,MAAM,EAAE3B;IAAK;EAAE,CAAE,CACvC,CACnB,CACiB,CAAC,gBAElC1C,KAAA,CAAAwD,aAAA,CAAC1C,yBAAyB,QACrBU,QAAQ,iBAAIxB,KAAA,CAAAwD,aAAA;IAAKY,uBAAuB,EAAE;MAAEC,MAAM,EAAE3B;IAAK;EAAE,CAAE,CACvC,CAEZ,CAAC;AAEhC,CAAC;AAEDtB,eAAe,CAACkD,WAAW,GAAG,iBAAiB;AAE/C,eAAelD,eAAe;AAE9B,SAASH,yBAAyB,QAAQ,yBAAyB","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","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\nconst CopyableContent: FC<CopyableContentProps> = ({\n appearance = CopyableContentAppearance.Default,\n content,\n children,\n copyFailedMessage,\n collapsedHeight,\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);\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 }, [content, defaultCopyFailedMessage, copyFailedMessage, showCopyFeedback]);\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":[]}
package/lib/esm/components/copyable-content/CopyableContent.styles.js CHANGED
@@ -1,16 +1,22 @@
1
1
  import styled from 'styled-components';
2
2
  import { CopyableContentAppearance } from './CopyableContent.types';
3
+ export let CopyableContentColorMode = /*#__PURE__*/function (CopyableContentColorMode) {
4
+ CopyableContentColorMode["Dark"] = "dark";
5
+ CopyableContentColorMode["Light"] = "light";
6
+ return CopyableContentColorMode;
7
+ }({});
3
8
  const getBackgroundColor = ({
4
9
  $appearance,
5
- theme
10
+ $colorMode
6
11
  }) => {
7
12
  if ($appearance === CopyableContentAppearance.Chat) {
8
13
  return 'rgba(0, 0, 0, 0.12)';
9
14
  }
10
- const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';
11
- const opacity = theme.cardBackgroundOpacity ?? 1;
12
- return `rgba(${secondaryColor}, ${opacity})`;
15
+ return $colorMode === CopyableContentColorMode.Dark ? '#282c34' : '#fafafa';
13
16
  };
17
+ const getTextColor = ({
18
+ $colorMode
19
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#333333';
14
20
  export const StyledCopyableContent = styled.section`
15
21
  --copyable-content-action-size: 32px;
16
22
  --copyable-content-action-inset: 8px;
@@ -25,11 +31,39 @@ export const StyledCopyableContent = styled.section`
25
31
  );
26
32
  border-radius: 8px;
27
33
  background-color: ${getBackgroundColor};
28
- color: ${({
29
- theme
30
- }) => theme.text};
34
+ color: ${getTextColor};
31
35
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
32
36
  `;
37
+ const getActionGroupBorder = ({
38
+ $colorMode,
39
+ $isSticky
40
+ }) => {
41
+ if (!$isSticky) {
42
+ return 'transparent';
43
+ }
44
+ return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';
45
+ };
46
+ const getActionGroupBackground = ({
47
+ $colorMode,
48
+ $isSticky
49
+ }) => {
50
+ if (!$isSticky) {
51
+ return 'transparent';
52
+ }
53
+ return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';
54
+ };
55
+ const getButtonHoverBackground = ({
56
+ $colorMode
57
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';
58
+ const getButtonActiveBackground = ({
59
+ $colorMode
60
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';
61
+ const getButtonHoverBorder = ({
62
+ $colorMode
63
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';
64
+ const getButtonColor = ({
65
+ $colorMode
66
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';
33
67
  export const StyledCopyableContentActions = styled.div`
34
68
  position: sticky;
35
69
  top: var(--copyable-content-action-inset);
@@ -49,22 +83,14 @@ export const StyledCopyableContentActionGroup = styled.div`
49
83
  `;
50
84
  export const StyledCopyableContentButton = styled.button`
51
85
  box-sizing: border-box;
52
- border: 1px solid ${({
53
- $isSticky,
54
- theme
55
- }) => $isSticky ? theme['202'] : 'transparent'};
86
+ border: 1px solid ${getActionGroupBorder};
56
87
  border-radius: 4px;
57
88
  width: var(--copyable-content-action-size);
58
89
  height: var(--copyable-content-action-size);
59
90
  padding: 0;
60
91
  cursor: pointer;
61
- background-color: ${({
62
- $isSticky,
63
- theme
64
- }) => $isSticky ? theme['100'] : 'transparent'};
65
- color: ${({
66
- theme
67
- }) => theme.text};
92
+ background-color: ${getActionGroupBackground};
93
+ color: ${getButtonColor};
68
94
  box-shadow: ${({
69
95
  $isSticky
70
96
  }) => $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none'};
@@ -75,31 +101,33 @@ export const StyledCopyableContentButton = styled.button`
75
101
  transform 0.15s ease;
76
102
 
77
103
  &:hover {
78
- border-color: rgba(${({
79
- theme
80
- }) => theme['text-rgb']}, 0.18);
81
- background-color: rgba(${({
82
- theme
83
- }) => theme['text-rgb']}, 0.1);
84
- box-shadow: inset 0 0 0 1px rgba(${({
85
- theme
86
- }) => theme['text-rgb']}, 0.06);
104
+ border-color: ${getButtonHoverBorder};
105
+ background-color: ${getButtonHoverBackground};
106
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
87
107
  }
88
108
 
89
109
  &:active {
110
+ background-color: ${getButtonActiveBackground};
90
111
  transform: scale(0.94);
91
112
  }
92
113
 
93
114
  &:focus-visible {
94
- outline: 2px solid ${({
95
- theme
96
- }) => theme.buttonBackgroundColor};
115
+ outline: 2px solid currentColor;
97
116
  outline-offset: 2px;
98
117
  }
99
118
  `;
100
119
  export const StyledCopyableContentTruncation = styled.div`
101
120
  padding: 0 12px 12px;
102
121
  `;
122
+ const getHeadlineColor = ({
123
+ $colorMode
124
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';
125
+ const getBlockquoteBorderColor = ({
126
+ $colorMode
127
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';
128
+ const getLinkColor = ({
129
+ $colorMode
130
+ }) => $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';
103
131
  export const StyledCopyableContentBody = styled.div`
104
132
  min-width: 0;
105
133
  max-width: 100%;
@@ -127,9 +155,7 @@ export const StyledCopyableContentBody = styled.div`
127
155
  h4,
128
156
  h5,
129
157
  h6 {
130
- color: ${({
131
- theme
132
- }) => theme.headline};
158
+ color: ${getHeadlineColor};
133
159
  }
134
160
 
135
161
  ul,
@@ -139,15 +165,11 @@ export const StyledCopyableContentBody = styled.div`
139
165
 
140
166
  blockquote {
141
167
  padding-left: 12px;
142
- border-left: 3px solid ${({
143
- theme
144
- }) => theme['202']};
168
+ border-left: 3px solid ${getBlockquoteBorderColor};
145
169
  }
146
170
 
147
171
  a {
148
- color: ${({
149
- theme
150
- }) => theme.primary};
172
+ color: ${getLinkColor};
151
173
  overflow-wrap: anywhere;
152
174
  }
153
175
 
package/lib/esm/components/copyable-content/CopyableContent.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CopyableContent.styles.js","names":["styled","CopyableContentAppearance","getBackgroundColor","$appearance","theme","Chat","secondaryColor","opacity","cardBackgroundOpacity","StyledCopyableContent","section","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentTruncation","StyledCopyableContentBody","$shouldShowPadding","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\nimport { CopyableContentAppearance } from './CopyableContent.types';\n\ntype StyledCopyableContentProps = WithTheme<{\n $appearance: CopyableContentAppearance;\n}>;\n\nconst getBackgroundColor = ({ $appearance, theme }: StyledCopyableContentProps) => {\n if ($appearance === CopyableContentAppearance.Chat) {\n return 'rgba(0, 0, 0, 0.12)';\n }\n\n const secondaryColor = theme['secondary-100-rgb'] ?? '255, 255, 255';\n const opacity = theme.cardBackgroundOpacity ?? 1;\n\n return `rgba(${secondaryColor}, ${opacity})`;\n};\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\n margin: 4px 0;\n min-width: 0;\n max-width: 100%;\n overflow-x: clip;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${({ theme }) => theme.text};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${({ $isSticky, theme }) => ($isSticky ? theme['202'] : 'transparent')};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${({ $isSticky, theme }) => ($isSticky ? theme['100'] : 'transparent')};\n color: ${({ theme }) => theme.text};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: rgba(${({ theme }) => theme['text-rgb']}, 0.18);\n background-color: rgba(${({ theme }) => theme['text-rgb']}, 0.1);\n box-shadow: inset 0 0 0 1px rgba(${({ theme }) => theme['text-rgb']}, 0.06);\n }\n\n &:active {\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $shouldShowPadding?: boolean;\n}>;\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${({ theme }) => theme.headline};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${({ theme }) => theme['202']};\n }\n\n a {\n color: ${({ theme }) => theme.primary};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
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-x: clip;\n overflow-wrap: anywhere;\n padding-top: calc(\n var(--copyable-content-action-size) + var(--copyable-content-action-inset) * 2\n );\n border-radius: 8px;\n background-color: ${getBackgroundColor};\n color: ${getTextColor};\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $colorMode, $isSticky }: StyledCopyableContentButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $colorMode === CopyableContentColorMode.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonColor = ({ $colorMode }: StyledCopyableContentButtonProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#f4f6f8' : '#999999';\n\nexport const StyledCopyableContentActions = styled.div`\n position: sticky;\n top: var(--copyable-content-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));\n margin-top: calc(\n (var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1\n );\n padding-right: var(--copyable-content-action-inset);\n`;\n\nexport const StyledCopyableContentActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--copyable-content-action-size);\n`;\n\nexport const StyledCopyableContentButton = styled.button<StyledCopyableContentButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--copyable-content-action-size);\n height: var(--copyable-content-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${getButtonColor};\n box-shadow: ${({ $isSticky }) => ($isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none')};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);\n }\n\n &:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentTruncation = styled.div`\n padding: 0 12px 12px;\n`;\n\ntype StyledCopyableContentBodyProps = WithTheme<{\n $colorMode: CopyableContentColorMode;\n $shouldShowPadding?: boolean;\n}>;\n\nconst getHeadlineColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#e5e5e5' : '#333333';\n\nconst getBlockquoteBorderColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#5a6474' : '#d4d4d4';\n\nconst getLinkColor = ({ $colorMode }: StyledCopyableContentBodyProps) =>\n $colorMode === CopyableContentColorMode.Dark ? '#7cb3ff' : '#0066cc';\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentBodyProps>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: ${({ $shouldShowPadding = true }) => ($shouldShowPadding ? '0 12px 12px' : '0')};\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n ul,\n ol,\n blockquote {\n margin: 0 0 12px;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: ${getHeadlineColor};\n }\n\n ul,\n ol {\n padding-left: 24px;\n }\n\n blockquote {\n padding-left: 12px;\n border-left: 3px solid ${getBlockquoteBorderColor};\n }\n\n a {\n color: ${getLinkColor};\n overflow-wrap: anywhere;\n }\n\n > :last-child {\n margin-bottom: 0;\n }\n`;\n"],"mappings":"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","ignoreList":[]}
package/lib/types/components/copyable-content/CopyableContent.styles.d.ts CHANGED
@@ -1,30 +1,40 @@
1
1
  import { CopyableContentAppearance } from './CopyableContent.types';
2
- export declare const StyledCopyableContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "theme" | "$appearance"> & {
2
+ export declare enum CopyableContentColorMode {
3
+ Dark = "dark",
4
+ Light = "light"
5
+ }
6
+ export declare const StyledCopyableContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "theme" | "$colorMode" | "$appearance"> & {
3
7
  $appearance: CopyableContentAppearance;
8
+ $colorMode: CopyableContentColorMode;
4
9
  } & {
5
10
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
6
- }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "theme" | "$appearance"> & {
11
+ }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "theme" | "$colorMode" | "$appearance"> & {
7
12
  $appearance: CopyableContentAppearance;
13
+ $colorMode: CopyableContentColorMode;
8
14
  } & {
9
15
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
10
16
  }, never>>> & string;
11
17
  export declare const StyledCopyableContentActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
12
18
  export declare const StyledCopyableContentActionGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
13
- export declare const StyledCopyableContentButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$isSticky"> & {
19
+ export declare const StyledCopyableContentButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$colorMode" | "$isSticky"> & {
20
+ $colorMode: CopyableContentColorMode;
14
21
  $isSticky: boolean;
15
22
  } & {
16
23
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
17
- }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$isSticky"> & {
24
+ }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$colorMode" | "$isSticky"> & {
25
+ $colorMode: CopyableContentColorMode;
18
26
  $isSticky: boolean;
19
27
  } & {
20
28
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
21
29
  }, never>>> & string;
22
30
  export declare const StyledCopyableContentTruncation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
23
- export declare const StyledCopyableContentBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowPadding"> & {
31
+ export declare const StyledCopyableContentBody: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$colorMode" | "$shouldShowPadding"> & {
32
+ $colorMode: CopyableContentColorMode;
24
33
  $shouldShowPadding?: boolean;
25
34
  } & {
26
35
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
27
- }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowPadding"> & {
36
+ }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$colorMode" | "$shouldShowPadding"> & {
37
+ $colorMode: CopyableContentColorMode;
28
38
  $shouldShowPadding?: boolean;
29
39
  } & {
30
40
  theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.5.25",
3
+ "version": "5.5.26",
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": "fb124c67d5545a50ad85006b0ef94fa44a967f48"
96
+ "gitHead": "92d9195193d59f3180f001b3545b34167476d6a7"
97
97
  }