@chayns-components/core 5.5.9 → 5.5.11
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.
- package/AGENTS.md +28 -0
- package/lib/cjs/components/copyable-content/CopyableContent.js +5 -17
- package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/cjs/hooks/useStickyActionState.js +70 -0
- package/lib/cjs/hooks/useStickyActionState.js.map +1 -0
- package/lib/esm/components/copyable-content/CopyableContent.js +6 -17
- package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.styles.js.map +1 -1
- package/lib/esm/hooks/useStickyActionState.js +63 -0
- package/lib/esm/hooks/useStickyActionState.js.map +1 -0
- package/lib/types/components/copyable-content/CopyableContent.styles.d.ts +1 -5
- package/lib/types/hooks/useStickyActionState.d.ts +5 -0
- package/package.json +2 -2
package/AGENTS.md
CHANGED
|
@@ -1533,6 +1533,34 @@ import { CopyableContent } from '@chayns-components/core';
|
|
|
1533
1533
|
/>
|
|
1534
1534
|
```
|
|
1535
1535
|
|
|
1536
|
+
#### Nested Scroll Container
|
|
1537
|
+
|
|
1538
|
+
```tsx
|
|
1539
|
+
<CopyableContent
|
|
1540
|
+
content={Array.from(
|
|
1541
|
+
{ length: 12 },
|
|
1542
|
+
(_, index) =>
|
|
1543
|
+
`### Update ${index + 1}\n\nDas Organisationsteam hat die aktuelle Rückmeldung zusammengefasst. Bitte prüft die offenen Punkte und gebt bis Freitag Bescheid, falls sich bei eurer Planung noch etwas geändert hat.`,
|
|
1544
|
+
).join('\n\n')}
|
|
1545
|
+
/>
|
|
1546
|
+
```
|
|
1547
|
+
|
|
1548
|
+
#### Virtualized Chat Message
|
|
1549
|
+
|
|
1550
|
+
```tsx
|
|
1551
|
+
<CopyableContent />
|
|
1552
|
+
```
|
|
1553
|
+
|
|
1554
|
+
#### Conversation
|
|
1555
|
+
|
|
1556
|
+
```tsx
|
|
1557
|
+
<CopyableContent
|
|
1558
|
+
content={`### Nächster Schritt
|
|
1559
|
+
|
|
1560
|
+
Bitte prüft die **offenen Aufgaben** und ergänzt eure Rückmeldung bis Freitagmittag. Die vollständige Übersicht steht im [gemeinsamen Ablaufplan](https://example.com/ablaufplan).`}
|
|
1561
|
+
/>
|
|
1562
|
+
```
|
|
1563
|
+
|
|
1536
1564
|
### Props
|
|
1537
1565
|
|
|
1538
1566
|
No prop documentation available.
|
|
@@ -9,21 +9,22 @@ var _textstring = require("@chayns-components/textstring");
|
|
|
9
9
|
var _chaynsApi = require("chayns-api");
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
|
|
12
|
+
var _useStickyActionState = require("../../hooks/useStickyActionState");
|
|
12
13
|
var _SharingContextMenu = _interopRequireDefault(require("../sharing-context-menu/SharingContextMenu"));
|
|
13
14
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
14
15
|
var _CopyableContent = require("./CopyableContent.styles");
|
|
15
16
|
var _copyableContentClipboard = require("./copyableContentClipboard");
|
|
16
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
18
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
18
|
-
const STICKY_ACTION_OFFSET = 8;
|
|
19
19
|
const CopyableContent = ({
|
|
20
20
|
content,
|
|
21
21
|
children,
|
|
22
22
|
copiedMessage,
|
|
23
23
|
copyFailedMessage
|
|
24
24
|
}) => {
|
|
25
|
-
const
|
|
25
|
+
const rootRef = (0, _react.useRef)(null);
|
|
26
26
|
const actionGroupRef = (0, _react.useRef)(null);
|
|
27
|
+
const isActionGroupSticky = (0, _useStickyActionState.useStickyActionState)(rootRef, actionGroupRef);
|
|
27
28
|
const defaultCopyButtonText = (0, _textstring.useTextstringValue)({
|
|
28
29
|
textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.copy)
|
|
29
30
|
});
|
|
@@ -37,20 +38,6 @@ const CopyableContent = ({
|
|
|
37
38
|
textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.share)
|
|
38
39
|
});
|
|
39
40
|
const html = (0, _react.useMemo)(() => (0, _format.formatStringToHtml)(content).html, [content]);
|
|
40
|
-
(0, _react.useEffect)(() => {
|
|
41
|
-
const updateStickyState = () => {
|
|
42
|
-
var _actionGroupRef$curre;
|
|
43
|
-
const actionGroupTop = (_actionGroupRef$curre = actionGroupRef.current) === null || _actionGroupRef$curre === void 0 ? void 0 : _actionGroupRef$curre.getBoundingClientRect().top;
|
|
44
|
-
setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
|
|
45
|
-
};
|
|
46
|
-
updateStickyState();
|
|
47
|
-
document.addEventListener('scroll', updateStickyState, true);
|
|
48
|
-
window.addEventListener('resize', updateStickyState);
|
|
49
|
-
return () => {
|
|
50
|
-
document.removeEventListener('scroll', updateStickyState, true);
|
|
51
|
-
window.removeEventListener('resize', updateStickyState);
|
|
52
|
-
};
|
|
53
|
-
}, []);
|
|
54
41
|
const handleCopy = (0, _react.useCallback)(async () => {
|
|
55
42
|
try {
|
|
56
43
|
await (0, _copyableContentClipboard.copyableContentToClipboard)(content);
|
|
@@ -70,7 +57,8 @@ const CopyableContent = ({
|
|
|
70
57
|
}
|
|
71
58
|
}, [content, copiedMessage, defaultCopiedMessage, defaultCopyFailedMessage, copyFailedMessage]);
|
|
72
59
|
return /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContent, {
|
|
73
|
-
className: "copyable-content"
|
|
60
|
+
className: "copyable-content",
|
|
61
|
+
ref: rootRef
|
|
74
62
|
}, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActions, {
|
|
75
63
|
ref: actionGroupRef
|
|
76
64
|
}, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActionGroup, null, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentButton, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_SharingContextMenu","_Icon","_CopyableContent","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","STICKY_ACTION_OFFSET","CopyableContent","content","children","copiedMessage","copyFailedMessage","isActionGroupSticky","setIsActionGroupSticky","useState","actionGroupRef","useRef","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopiedMessage","copied","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","useEffect","updateStickyState","_actionGroupRef$curre","actionGroupTop","current","getBoundingClientRect","top","undefined","document","addEventListener","window","removeEventListener","handleCopy","useCallback","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","SUCCESS","type","DialogType","TOAST","open","ERROR","createElement","StyledCopyableContent","className","StyledCopyableContentActions","ref","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldUseDefaultTriggerStyles","StyledCopyableContentBody","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 SharingContextMenu from '../sharing-context-menu/SharingContextMenu';\nimport Icon from '../icon/Icon';\nimport {\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nexport type CopyableContentProps = {\n content: string;\n children?: ReactNode;\n copiedMessage?: string;\n copyFailedMessage?: string;\n};\n\nconst STICKY_ACTION_OFFSET = 8;\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n content,\n children,\n copiedMessage,\n copyFailedMessage,\n}) => {\n const [isActionGroupSticky, setIsActionGroupSticky] = useState(false);\n\n const actionGroupRef = useRef<HTMLDivElement>(null);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopiedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copied),\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 const updateStickyState = () => {\n const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;\n setIsActionGroupSticky(\n actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET,\n );\n };\n\n updateStickyState();\n document.addEventListener('scroll', updateStickyState, true);\n window.addEventListener('resize', updateStickyState);\n\n return () => {\n document.removeEventListener('scroll', updateStickyState, true);\n window.removeEventListener('resize', updateStickyState);\n };\n }, []);\n\n const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n void createDialog({\n showCloseIcon: true,\n text: copiedMessage ?? defaultCopiedMessage,\n toastType: ToastType.SUCCESS,\n type: DialogType.TOAST,\n }).open();\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, copiedMessage, defaultCopiedMessage, defaultCopyFailedMessage, copyFailedMessage]);\n\n return (\n <StyledCopyableContent className=\"copyable-content\">\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={['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu link={content} shouldUseDefaultTriggerStyles={false}>\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 <StyledCopyableContentBody>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionState","_SharingContextMenu","_Icon","_CopyableContent","_copyableContentClipboard","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CopyableContent","content","children","copiedMessage","copyFailedMessage","rootRef","useRef","actionGroupRef","isActionGroupSticky","useStickyActionState","defaultCopyButtonText","useTextstringValue","textstring","ttsToITextString","textStrings","components","copyableContent","copy","defaultCopiedMessage","copied","defaultCopyFailedMessage","copyFailed","shareText","share","html","useMemo","formatStringToHtml","handleCopy","useCallback","copyableContentToClipboard","createDialog","showCloseIcon","text","toastType","ToastType","SUCCESS","type","DialogType","TOAST","open","ERROR","createElement","StyledCopyableContent","className","ref","StyledCopyableContentActions","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","onClick","icons","link","shouldUseDefaultTriggerStyles","StyledCopyableContentBody","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, useMemo, useRef } 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 {\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nexport type CopyableContentProps = {\n content: string;\n children?: ReactNode;\n copiedMessage?: string;\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n content,\n children,\n copiedMessage,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopiedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copied),\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 const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n void createDialog({\n showCloseIcon: true,\n text: copiedMessage ?? defaultCopiedMessage,\n toastType: ToastType.SUCCESS,\n type: DialogType.TOAST,\n }).open();\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, copiedMessage, defaultCopiedMessage, defaultCopyFailedMessage, copyFailedMessage]);\n\n return (\n <StyledCopyableContent 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={['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu link={content} shouldUseDefaultTriggerStyles={false}>\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 <StyledCopyableContentBody>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledCopyableContent","exports","styled","section","theme","cardBorderRadius","cardBackgroundOpacity","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\n\ntype StyledCopyableContentProps = WithTheme<unknown>;\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\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: ${({ theme }) => theme.cardBorderRadius}px;\n background-color: rgba(\n ${({ theme }) => theme['secondary-100-rgb']},\n ${({ theme }) => theme.cardBackgroundOpacity}\n );\n color: ${({ theme }) => theme.text};\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div
|
|
1
|
+
{"version":3,"file":"CopyableContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledCopyableContent","exports","styled","section","theme","cardBorderRadius","cardBackgroundOpacity","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\n\ntype StyledCopyableContentProps = WithTheme<unknown>;\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\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: ${({ theme }) => theme.cardBorderRadius}px;\n background-color: rgba(\n ${({ theme }) => theme['secondary-100-rgb']},\n ${({ theme }) => theme.cardBackgroundOpacity}\n );\n color: ${({ theme }) => theme.text};\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.16)' : '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 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.9);\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentProps>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: 0 12px 12px;\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":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIhC,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,OAAmC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAACC,gBAAgB;AAC1D;AACA,UAAU,CAAC;EAAED;AAAM,CAAC,KAAKA,KAAK,CAAC,mBAAmB,CAAC;AACnD,UAAU,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACpD;AACA,aAAa,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,CAACG,IAAI;AACtC,CAAC;AAMM,MAAMC,4BAA4B,GAAAP,OAAA,CAAAO,4BAAA,GAAGN,yBAAM,CAACO,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gCAAgC,GAAAT,OAAA,CAAAS,gCAAA,GAAGR,yBAAM,CAACO,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAEM,MAAME,2BAA2B,GAAAV,OAAA,CAAAU,2BAAA,GAAGT,yBAAM,CAACU,MAAwC;AAC1F;AACA,wBAAwB,CAAC;EAAEC,SAAS;EAAET;AAAM,CAAC,KAAMS,SAAS,GAAGT,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAES,SAAS;EAAET;AAAM,CAAC,KAAMS,SAAS,GAAGT,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACG,IAAI;AACtC,kBAAkB,CAAC;EAAEM;AAAU,CAAC,KAAMA,SAAS,GAAG,+BAA+B,GAAG,MAAO;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAET;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjE,2CAA2C,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACU,qBAAqB;AACvE;AACA;AACA,CAAC;AAEM,MAAMC,yBAAyB,GAAAd,OAAA,CAAAc,yBAAA,GAAGb,yBAAM,CAACO,GAA+B;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEL;AAAM,CAAC,KAAKA,KAAK,CAACY,QAAQ;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEZ;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5D;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACa,OAAO;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useStickyActionState = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
const isScrollable = element => {
|
|
9
|
+
const {
|
|
10
|
+
overflow,
|
|
11
|
+
overflowY
|
|
12
|
+
} = window.getComputedStyle(element);
|
|
13
|
+
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
14
|
+
};
|
|
15
|
+
const getScrollableAncestor = element => {
|
|
16
|
+
let parent = element.parentElement;
|
|
17
|
+
while (parent) {
|
|
18
|
+
if (parent === document.body || parent === document.documentElement) {
|
|
19
|
+
return undefined;
|
|
20
|
+
}
|
|
21
|
+
if (isScrollable(parent)) {
|
|
22
|
+
return parent;
|
|
23
|
+
}
|
|
24
|
+
parent = parent.parentElement;
|
|
25
|
+
}
|
|
26
|
+
return undefined;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Tracks whether a sticky action group has reached the nearest scroll container's top edge.
|
|
31
|
+
*/
|
|
32
|
+
const useStickyActionState = (rootRef, actionRef) => {
|
|
33
|
+
const [isSticky, setIsSticky] = (0, _react.useState)(false);
|
|
34
|
+
(0, _react.useEffect)(() => {
|
|
35
|
+
const root = rootRef.current;
|
|
36
|
+
if (!root || !actionRef.current) {
|
|
37
|
+
return undefined;
|
|
38
|
+
}
|
|
39
|
+
const scrollContainer = getScrollableAncestor(root);
|
|
40
|
+
const updateStickyState = () => {
|
|
41
|
+
const containerTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect().top) ?? 0;
|
|
42
|
+
const stickyBoundary = containerTop + 1;
|
|
43
|
+
setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
|
|
44
|
+
};
|
|
45
|
+
updateStickyState();
|
|
46
|
+
scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', updateStickyState, {
|
|
47
|
+
passive: true
|
|
48
|
+
});
|
|
49
|
+
document.addEventListener('scroll', updateStickyState, true);
|
|
50
|
+
window.addEventListener('scroll', updateStickyState, {
|
|
51
|
+
passive: true
|
|
52
|
+
});
|
|
53
|
+
window.addEventListener('resize', updateStickyState);
|
|
54
|
+
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
|
|
55
|
+
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(root);
|
|
56
|
+
if (scrollContainer) {
|
|
57
|
+
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollContainer);
|
|
58
|
+
}
|
|
59
|
+
return () => {
|
|
60
|
+
scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', updateStickyState);
|
|
61
|
+
document.removeEventListener('scroll', updateStickyState, true);
|
|
62
|
+
window.removeEventListener('scroll', updateStickyState);
|
|
63
|
+
window.removeEventListener('resize', updateStickyState);
|
|
64
|
+
resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
|
|
65
|
+
};
|
|
66
|
+
}, [actionRef, rootRef]);
|
|
67
|
+
return isSticky;
|
|
68
|
+
};
|
|
69
|
+
exports.useStickyActionState = useStickyActionState;
|
|
70
|
+
//# sourceMappingURL=useStickyActionState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStickyActionState.js","names":["_react","require","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","document","body","documentElement","undefined","useStickyActionState","rootRef","actionRef","isSticky","setIsSticky","useState","useEffect","root","current","scrollContainer","updateStickyState","containerTop","getBoundingClientRect","top","stickyBoundary","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect","exports"],"sources":["../../../src/hooks/useStickyActionState.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (parent === document.body || parent === document.documentElement) {\n return undefined;\n }\n\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\n/**\n * Tracks whether a sticky action group has reached the nearest scroll container's top edge.\n */\nexport const useStickyActionState = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n) => {\n const [isSticky, setIsSticky] = useState(false);\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root || !actionRef.current) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updateStickyState = () => {\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const stickyBoundary = containerTop + 1;\n\n setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);\n };\n\n updateStickyState();\n scrollContainer?.addEventListener('scroll', updateStickyState, { passive: true });\n document.addEventListener('scroll', updateStickyState, true);\n window.addEventListener('scroll', updateStickyState, { passive: true });\n window.addEventListener('resize', updateStickyState);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined'\n ? undefined\n : new ResizeObserver(updateStickyState);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updateStickyState);\n document.removeEventListener('scroll', updateStickyState, true);\n window.removeEventListener('scroll', updateStickyState);\n window.removeEventListener('resize', updateStickyState);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return isSticky;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import { formatStringToHtml } from '@chayns-components/format';
|
|
2
2
|
import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
|
|
3
3
|
import { createDialog, DialogType, ToastType } from 'chayns-api';
|
|
4
|
-
import React, { useCallback,
|
|
4
|
+
import React, { useCallback, useMemo, useRef } from 'react';
|
|
5
5
|
import textStrings from '../../constants/textStrings';
|
|
6
|
+
import { useStickyActionState } from '../../hooks/useStickyActionState';
|
|
6
7
|
import SharingContextMenu from '../sharing-context-menu/SharingContextMenu';
|
|
7
8
|
import Icon from '../icon/Icon';
|
|
8
9
|
import { StyledCopyableContent, StyledCopyableContentActionGroup, StyledCopyableContentActions, StyledCopyableContentBody, StyledCopyableContentButton } from './CopyableContent.styles';
|
|
9
10
|
import { copyableContentToClipboard } from './copyableContentClipboard';
|
|
10
|
-
const STICKY_ACTION_OFFSET = 8;
|
|
11
11
|
const CopyableContent = ({
|
|
12
12
|
content,
|
|
13
13
|
children,
|
|
14
14
|
copiedMessage,
|
|
15
15
|
copyFailedMessage
|
|
16
16
|
}) => {
|
|
17
|
-
const
|
|
17
|
+
const rootRef = useRef(null);
|
|
18
18
|
const actionGroupRef = useRef(null);
|
|
19
|
+
const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);
|
|
19
20
|
const defaultCopyButtonText = useTextstringValue({
|
|
20
21
|
textstring: ttsToITextString(textStrings.components.copyableContent.copy)
|
|
21
22
|
});
|
|
@@ -29,19 +30,6 @@ const CopyableContent = ({
|
|
|
29
30
|
textstring: ttsToITextString(textStrings.components.copyableContent.share)
|
|
30
31
|
});
|
|
31
32
|
const html = useMemo(() => formatStringToHtml(content).html, [content]);
|
|
32
|
-
useEffect(() => {
|
|
33
|
-
const updateStickyState = () => {
|
|
34
|
-
const actionGroupTop = actionGroupRef.current?.getBoundingClientRect().top;
|
|
35
|
-
setIsActionGroupSticky(actionGroupTop !== undefined && actionGroupTop <= STICKY_ACTION_OFFSET);
|
|
36
|
-
};
|
|
37
|
-
updateStickyState();
|
|
38
|
-
document.addEventListener('scroll', updateStickyState, true);
|
|
39
|
-
window.addEventListener('resize', updateStickyState);
|
|
40
|
-
return () => {
|
|
41
|
-
document.removeEventListener('scroll', updateStickyState, true);
|
|
42
|
-
window.removeEventListener('resize', updateStickyState);
|
|
43
|
-
};
|
|
44
|
-
}, []);
|
|
45
33
|
const handleCopy = useCallback(async () => {
|
|
46
34
|
try {
|
|
47
35
|
await copyableContentToClipboard(content);
|
|
@@ -61,7 +49,8 @@ const CopyableContent = ({
|
|
|
61
49
|
}
|
|
62
50
|
}, [content, copiedMessage, defaultCopiedMessage, defaultCopyFailedMessage, copyFailedMessage]);
|
|
63
51
|
return /*#__PURE__*/React.createElement(StyledCopyableContent, {
|
|
64
|
-
className: "copyable-content"
|
|
52
|
+
className: "copyable-content",
|
|
53
|
+
ref: rootRef
|
|
65
54
|
}, /*#__PURE__*/React.createElement(StyledCopyableContentActions, {
|
|
66
55
|
ref: actionGroupRef
|
|
67
56
|
}, /*#__PURE__*/React.createElement(StyledCopyableContentActionGroup, null, /*#__PURE__*/React.createElement(StyledCopyableContentButton, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","
|
|
1
|
+
{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useMemo","useRef","textStrings","useStickyActionState","SharingContextMenu","Icon","StyledCopyableContent","StyledCopyableContentActionGroup","StyledCopyableContentActions","StyledCopyableContentBody","StyledCopyableContentButton","copyableContentToClipboard","CopyableContent","content","children","copiedMessage","copyFailedMessage","rootRef","actionGroupRef","isActionGroupSticky","defaultCopyButtonText","textstring","components","copyableContent","copy","defaultCopiedMessage","copied","defaultCopyFailedMessage","copyFailed","shareText","share","html","handleCopy","showCloseIcon","text","toastType","SUCCESS","type","TOAST","open","ERROR","createElement","className","ref","$isSticky","onClick","icons","link","shouldUseDefaultTriggerStyles","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, useMemo, useRef } 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 {\n StyledCopyableContent,\n StyledCopyableContentActionGroup,\n StyledCopyableContentActions,\n StyledCopyableContentBody,\n StyledCopyableContentButton,\n} from './CopyableContent.styles';\nimport { copyableContentToClipboard } from './copyableContentClipboard';\n\nexport type CopyableContentProps = {\n content: string;\n children?: ReactNode;\n copiedMessage?: string;\n copyFailedMessage?: string;\n};\n\nconst CopyableContent: FC<CopyableContentProps> = ({\n content,\n children,\n copiedMessage,\n copyFailedMessage,\n}) => {\n const rootRef = useRef<HTMLElement>(null);\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n\n const defaultCopyButtonText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copy),\n });\n const defaultCopiedMessage = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.copyableContent.copied),\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 const handleCopy = useCallback(async () => {\n try {\n await copyableContentToClipboard(content);\n void createDialog({\n showCloseIcon: true,\n text: copiedMessage ?? defaultCopiedMessage,\n toastType: ToastType.SUCCESS,\n type: DialogType.TOAST,\n }).open();\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, copiedMessage, defaultCopiedMessage, defaultCopyFailedMessage, copyFailedMessage]);\n\n return (\n <StyledCopyableContent 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={['fa-light fa-copy']} />\n </StyledCopyableContentButton>\n <SharingContextMenu link={content} shouldUseDefaultTriggerStyles={false}>\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 <StyledCopyableContentBody>\n {children ?? <div dangerouslySetInnerHTML={{ __html: html }} />}\n </StyledCopyableContentBody>\n </StyledCopyableContent>\n );\n};\n\nCopyableContent.displayName = 'CopyableContent';\n\nexport default CopyableContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.styles.js","names":["styled","StyledCopyableContent","section","theme","cardBorderRadius","cardBackgroundOpacity","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\n\ntype StyledCopyableContentProps = WithTheme<unknown>;\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\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: ${({ theme }) => theme.cardBorderRadius}px;\n background-color: rgba(\n ${({ theme }) => theme['secondary-100-rgb']},\n ${({ theme }) => theme.cardBackgroundOpacity}\n );\n color: ${({ theme }) => theme.text};\n`;\n\ntype StyledCopyableContentButtonProps = WithTheme<{\n $isSticky: boolean;\n}>;\n\nexport const StyledCopyableContentActions = styled.div
|
|
1
|
+
{"version":3,"file":"CopyableContent.styles.js","names":["styled","StyledCopyableContent","section","theme","cardBorderRadius","cardBackgroundOpacity","text","StyledCopyableContentActions","div","StyledCopyableContentActionGroup","StyledCopyableContentButton","button","$isSticky","buttonBackgroundColor","StyledCopyableContentBody","headline","primary"],"sources":["../../../../src/components/copyable-content/CopyableContent.styles.ts"],"sourcesContent":["import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport styled from 'styled-components';\n\ntype StyledCopyableContentProps = WithTheme<unknown>;\n\nexport const StyledCopyableContent = styled.section<StyledCopyableContentProps>`\n --copyable-content-action-size: 32px;\n --copyable-content-action-inset: 8px;\n\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: ${({ theme }) => theme.cardBorderRadius}px;\n background-color: rgba(\n ${({ theme }) => theme['secondary-100-rgb']},\n ${({ theme }) => theme.cardBackgroundOpacity}\n );\n color: ${({ theme }) => theme.text};\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.16)' : '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 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.9);\n }\n\n &:focus-visible {\n outline: 2px solid ${({ theme }) => theme.buttonBackgroundColor};\n outline-offset: 2px;\n }\n`;\n\nexport const StyledCopyableContentBody = styled.div<StyledCopyableContentProps>`\n min-width: 0;\n max-width: 100%;\n overflow-wrap: anywhere;\n padding: 0 12px 12px;\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":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAItC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACE,OAAmC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAACC,gBAAgB;AAC1D;AACA,UAAU,CAAC;EAAED;AAAM,CAAC,KAAKA,KAAK,CAAC,mBAAmB,CAAC;AACnD,UAAU,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACpD;AACA,aAAa,CAAC;EAAEF;AAAM,CAAC,KAAKA,KAAK,CAACG,IAAI;AACtC,CAAC;AAMD,OAAO,MAAMC,4BAA4B,GAAGP,MAAM,CAACQ,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGT,MAAM,CAACQ,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,2BAA2B,GAAGV,MAAM,CAACW,MAAwC;AAC1F;AACA,wBAAwB,CAAC;EAAEC,SAAS;EAAET;AAAM,CAAC,KAAMS,SAAS,GAAGT,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAES,SAAS;EAAET;AAAM,CAAC,KAAMS,SAAS,GAAGT,KAAK,CAAC,KAAK,CAAC,GAAG,aAAc;AAC5F,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACG,IAAI;AACtC,kBAAkB,CAAC;EAAEM;AAAU,CAAC,KAAMA,SAAS,GAAG,+BAA+B,GAAG,MAAO;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAET;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjE,2CAA2C,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACU,qBAAqB;AACvE;AACA;AACA,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGd,MAAM,CAACQ,GAA+B;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEL;AAAM,CAAC,KAAKA,KAAK,CAACY,QAAQ;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEZ;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC5D;AACA;AACA;AACA,iBAAiB,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAACa,OAAO;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
const isScrollable = element => {
|
|
3
|
+
const {
|
|
4
|
+
overflow,
|
|
5
|
+
overflowY
|
|
6
|
+
} = window.getComputedStyle(element);
|
|
7
|
+
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
8
|
+
};
|
|
9
|
+
const getScrollableAncestor = element => {
|
|
10
|
+
let parent = element.parentElement;
|
|
11
|
+
while (parent) {
|
|
12
|
+
if (parent === document.body || parent === document.documentElement) {
|
|
13
|
+
return undefined;
|
|
14
|
+
}
|
|
15
|
+
if (isScrollable(parent)) {
|
|
16
|
+
return parent;
|
|
17
|
+
}
|
|
18
|
+
parent = parent.parentElement;
|
|
19
|
+
}
|
|
20
|
+
return undefined;
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Tracks whether a sticky action group has reached the nearest scroll container's top edge.
|
|
25
|
+
*/
|
|
26
|
+
export const useStickyActionState = (rootRef, actionRef) => {
|
|
27
|
+
const [isSticky, setIsSticky] = useState(false);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const root = rootRef.current;
|
|
30
|
+
if (!root || !actionRef.current) {
|
|
31
|
+
return undefined;
|
|
32
|
+
}
|
|
33
|
+
const scrollContainer = getScrollableAncestor(root);
|
|
34
|
+
const updateStickyState = () => {
|
|
35
|
+
const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
|
|
36
|
+
const stickyBoundary = containerTop + 1;
|
|
37
|
+
setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
|
|
38
|
+
};
|
|
39
|
+
updateStickyState();
|
|
40
|
+
scrollContainer?.addEventListener('scroll', updateStickyState, {
|
|
41
|
+
passive: true
|
|
42
|
+
});
|
|
43
|
+
document.addEventListener('scroll', updateStickyState, true);
|
|
44
|
+
window.addEventListener('scroll', updateStickyState, {
|
|
45
|
+
passive: true
|
|
46
|
+
});
|
|
47
|
+
window.addEventListener('resize', updateStickyState);
|
|
48
|
+
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
|
|
49
|
+
resizeObserver?.observe(root);
|
|
50
|
+
if (scrollContainer) {
|
|
51
|
+
resizeObserver?.observe(scrollContainer);
|
|
52
|
+
}
|
|
53
|
+
return () => {
|
|
54
|
+
scrollContainer?.removeEventListener('scroll', updateStickyState);
|
|
55
|
+
document.removeEventListener('scroll', updateStickyState, true);
|
|
56
|
+
window.removeEventListener('scroll', updateStickyState);
|
|
57
|
+
window.removeEventListener('resize', updateStickyState);
|
|
58
|
+
resizeObserver?.disconnect();
|
|
59
|
+
};
|
|
60
|
+
}, [actionRef, rootRef]);
|
|
61
|
+
return isSticky;
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=useStickyActionState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStickyActionState.js","names":["useEffect","useState","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","document","body","documentElement","undefined","useStickyActionState","rootRef","actionRef","isSticky","setIsSticky","root","current","scrollContainer","updateStickyState","containerTop","getBoundingClientRect","top","stickyBoundary","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect"],"sources":["../../../src/hooks/useStickyActionState.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (parent === document.body || parent === document.documentElement) {\n return undefined;\n }\n\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\n/**\n * Tracks whether a sticky action group has reached the nearest scroll container's top edge.\n */\nexport const useStickyActionState = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n) => {\n const [isSticky, setIsSticky] = useState(false);\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root || !actionRef.current) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updateStickyState = () => {\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const stickyBoundary = containerTop + 1;\n\n setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);\n };\n\n updateStickyState();\n scrollContainer?.addEventListener('scroll', updateStickyState, { passive: true });\n document.addEventListener('scroll', updateStickyState, true);\n window.addEventListener('scroll', updateStickyState, { passive: true });\n window.addEventListener('resize', updateStickyState);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined'\n ? undefined\n : new ResizeObserver(updateStickyState);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updateStickyState);\n document.removeEventListener('scroll', updateStickyState, true);\n window.removeEventListener('scroll', updateStickyState);\n window.removeEventListener('resize', updateStickyState);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return isSticky;\n};\n"],"mappings":"AAAA,SAAoBA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAEtD,MAAMC,YAAY,GAAIC,OAAoB,IAAK;EAC3C,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGC,MAAM,CAACC,gBAAgB,CAACJ,OAAO,CAAC;EAEhE,OAAO,qBAAqB,CAACK,IAAI,CAAC,GAAGJ,QAAQ,IAAIC,SAAS,EAAE,CAAC;AACjE,CAAC;AAED,MAAMI,qBAAqB,GAAIN,OAAoB,IAAK;EACpD,IAAIO,MAAM,GAAGP,OAAO,CAACQ,aAAa;EAElC,OAAOD,MAAM,EAAE;IACX,IAAIA,MAAM,KAAKE,QAAQ,CAACC,IAAI,IAAIH,MAAM,KAAKE,QAAQ,CAACE,eAAe,EAAE;MACjE,OAAOC,SAAS;IACpB;IAEA,IAAIb,YAAY,CAACQ,MAAM,CAAC,EAAE;MACtB,OAAOA,MAAM;IACjB;IAEAA,MAAM,GAAGA,MAAM,CAACC,aAAa;EACjC;EAEA,OAAOI,SAAS;AACpB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGA,CAChCC,OAA+B,EAC/BC,SAAiC,KAChC;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAE/CD,SAAS,CAAC,MAAM;IACZ,MAAMqB,IAAI,GAAGJ,OAAO,CAACK,OAAO;IAC5B,IAAI,CAACD,IAAI,IAAI,CAACH,SAAS,CAACI,OAAO,EAAE;MAC7B,OAAOP,SAAS;IACpB;IAEA,MAAMQ,eAAe,GAAGd,qBAAqB,CAACY,IAAI,CAAC;IAEnD,MAAMG,iBAAiB,GAAGA,CAAA,KAAM;MAC5B,MAAMC,YAAY,GAAGF,eAAe,EAAEG,qBAAqB,CAAC,CAAC,CAACC,GAAG,IAAI,CAAC;MACtE,MAAMC,cAAc,GAAGH,YAAY,GAAG,CAAC;MAEvCL,WAAW,CAACC,IAAI,CAACK,qBAAqB,CAAC,CAAC,CAACC,GAAG,IAAIC,cAAc,CAAC;IACnE,CAAC;IAEDJ,iBAAiB,CAAC,CAAC;IACnBD,eAAe,EAAEM,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE;MAAEM,OAAO,EAAE;IAAK,CAAC,CAAC;IACjFlB,QAAQ,CAACiB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE,IAAI,CAAC;IAC5DlB,MAAM,CAACuB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE;MAAEM,OAAO,EAAE;IAAK,CAAC,CAAC;IACvExB,MAAM,CAACuB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;IAEpD,MAAMO,cAAc,GAChB,OAAOC,cAAc,KAAK,WAAW,GAC/BjB,SAAS,GACT,IAAIiB,cAAc,CAACR,iBAAiB,CAAC;IAC/CO,cAAc,EAAEE,OAAO,CAACZ,IAAI,CAAC;IAE7B,IAAIE,eAAe,EAAE;MACjBQ,cAAc,EAAEE,OAAO,CAACV,eAAe,CAAC;IAC5C;IAEA,OAAO,MAAM;MACTA,eAAe,EAAEW,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACjEZ,QAAQ,CAACsB,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,EAAE,IAAI,CAAC;MAC/DlB,MAAM,CAAC4B,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACvDlB,MAAM,CAAC4B,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACvDO,cAAc,EAAEI,UAAU,CAAC,CAAC;IAChC,CAAC;EACL,CAAC,EAAE,CAACjB,SAAS,EAAED,OAAO,CAAC,CAAC;EAExB,OAAOE,QAAQ;AACnB,CAAC","ignoreList":[]}
|
|
@@ -3,11 +3,7 @@ export declare const StyledCopyableContent: import("styled-components/dist/types
|
|
|
3
3
|
}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "theme"> & {
|
|
4
4
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
5
5
|
}, never>>> & string;
|
|
6
|
-
export declare const StyledCopyableContentActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<
|
|
7
|
-
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
8
|
-
}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
|
|
9
|
-
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
10
|
-
}, never>>> & string;
|
|
6
|
+
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;
|
|
11
7
|
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;
|
|
12
8
|
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"> & {
|
|
13
9
|
$isSticky: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.11",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -94,5 +94,5 @@
|
|
|
94
94
|
"publishConfig": {
|
|
95
95
|
"access": "public"
|
|
96
96
|
},
|
|
97
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "d8423570f8ecef181291392dff29d7a733713634"
|
|
98
98
|
}
|