@chayns-components/core 5.5.10 → 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 +16 -0
- package/lib/cjs/components/copyable-content/CopyableContent.js +4 -7
- package/lib/cjs/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/cjs/components/copyable-content/CopyableContent.styles.js +5 -14
- 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 +4 -7
- package/lib/esm/components/copyable-content/CopyableContent.js.map +1 -1
- package/lib/esm/components/copyable-content/CopyableContent.styles.js +5 -14
- 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 -7
- package/lib/types/hooks/useStickyActionState.d.ts +5 -0
- package/package.json +2 -2
- package/lib/cjs/hooks/useStickyActionPosition.js +0 -90
- package/lib/cjs/hooks/useStickyActionPosition.js.map +0 -1
- package/lib/esm/hooks/useStickyActionPosition.js +0 -83
- package/lib/esm/hooks/useStickyActionPosition.js.map +0 -1
- package/lib/types/hooks/useStickyActionPosition.d.ts +0 -14
package/AGENTS.md
CHANGED
|
@@ -1545,6 +1545,22 @@ import { CopyableContent } from '@chayns-components/core';
|
|
|
1545
1545
|
/>
|
|
1546
1546
|
```
|
|
1547
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
|
+
|
|
1548
1564
|
### Props
|
|
1549
1565
|
|
|
1550
1566
|
No prop documentation available.
|
|
@@ -9,7 +9,7 @@ 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
|
|
12
|
+
var _useStickyActionState = require("../../hooks/useStickyActionState");
|
|
13
13
|
var _SharingContextMenu = _interopRequireDefault(require("../sharing-context-menu/SharingContextMenu"));
|
|
14
14
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
15
15
|
var _CopyableContent = require("./CopyableContent.styles");
|
|
@@ -24,7 +24,7 @@ const CopyableContent = ({
|
|
|
24
24
|
}) => {
|
|
25
25
|
const rootRef = (0, _react.useRef)(null);
|
|
26
26
|
const actionGroupRef = (0, _react.useRef)(null);
|
|
27
|
-
const
|
|
27
|
+
const isActionGroupSticky = (0, _useStickyActionState.useStickyActionState)(rootRef, actionGroupRef);
|
|
28
28
|
const defaultCopyButtonText = (0, _textstring.useTextstringValue)({
|
|
29
29
|
textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.copyableContent.copy)
|
|
30
30
|
});
|
|
@@ -60,12 +60,9 @@ const CopyableContent = ({
|
|
|
60
60
|
className: "copyable-content",
|
|
61
61
|
ref: rootRef
|
|
62
62
|
}, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActions, {
|
|
63
|
-
$fixedRight: stickyActionPosition.fixedRight,
|
|
64
|
-
$fixedTop: stickyActionPosition.fixedTop,
|
|
65
|
-
$isFixed: stickyActionPosition.isFixed,
|
|
66
63
|
ref: actionGroupRef
|
|
67
64
|
}, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentActionGroup, null, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentButton, {
|
|
68
|
-
$isSticky:
|
|
65
|
+
$isSticky: isActionGroupSticky,
|
|
69
66
|
"aria-label": defaultCopyButtonText,
|
|
70
67
|
onClick: () => {
|
|
71
68
|
void handleCopy();
|
|
@@ -77,7 +74,7 @@ const CopyableContent = ({
|
|
|
77
74
|
link: content,
|
|
78
75
|
shouldUseDefaultTriggerStyles: false
|
|
79
76
|
}, /*#__PURE__*/_react.default.createElement(_CopyableContent.StyledCopyableContentButton, {
|
|
80
|
-
$isSticky:
|
|
77
|
+
$isSticky: isActionGroupSticky,
|
|
81
78
|
"aria-label": shareText,
|
|
82
79
|
type: "button"
|
|
83
80
|
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["_format","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_textStrings","_interopRequireDefault","_useStickyActionPosition","_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","stickyActionPosition","useStickyActionPosition","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","$fixedRight","fixedRight","$fixedTop","fixedTop","$isFixed","isFixed","StyledCopyableContentActionGroup","StyledCopyableContentButton","$isSticky","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 { useStickyActionPosition } from '../../hooks/useStickyActionPosition';\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 stickyActionPosition = useStickyActionPosition(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\n $fixedRight={stickyActionPosition.fixedRight}\n $fixedTop={stickyActionPosition.fixedTop}\n $isFixed={stickyActionPosition.isFixed}\n ref={actionGroupRef}\n >\n <StyledCopyableContentActionGroup>\n <StyledCopyableContentButton\n $isSticky={stickyActionPosition.isSticky}\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={stickyActionPosition.isSticky}\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":[]}
|
|
@@ -33,24 +33,15 @@ const StyledCopyableContent = exports.StyledCopyableContent = _styledComponents.
|
|
|
33
33
|
}) => theme.text};
|
|
34
34
|
`;
|
|
35
35
|
const StyledCopyableContentActions = exports.StyledCopyableContentActions = _styledComponents.default.div`
|
|
36
|
-
position:
|
|
37
|
-
|
|
38
|
-
}) => $isFixed ? 'fixed' : 'sticky'};
|
|
39
|
-
top: ${({
|
|
40
|
-
$fixedTop,
|
|
41
|
-
$isFixed
|
|
42
|
-
}) => $isFixed ? `${$fixedTop}px` : 'var(--copyable-content-action-inset)'};
|
|
43
|
-
right: ${({
|
|
44
|
-
$fixedRight,
|
|
45
|
-
$isFixed
|
|
46
|
-
}) => $isFixed ? `${$fixedRight}px` : 'auto'};
|
|
36
|
+
position: sticky;
|
|
37
|
+
top: var(--copyable-content-action-inset);
|
|
47
38
|
z-index: 1;
|
|
48
39
|
display: flex;
|
|
49
40
|
justify-content: flex-end;
|
|
50
41
|
height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));
|
|
51
|
-
margin-top:
|
|
52
|
-
|
|
53
|
-
|
|
42
|
+
margin-top: calc(
|
|
43
|
+
(var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1
|
|
44
|
+
);
|
|
54
45
|
padding-right: var(--copyable-content-action-inset);
|
|
55
46
|
`;
|
|
56
47
|
const StyledCopyableContentActionGroup = exports.StyledCopyableContentActionGroup = _styledComponents.default.div`
|
|
@@ -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","
|
|
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":[]}
|
|
@@ -3,7 +3,7 @@ import { ttsToITextString, useTextstringValue } from '@chayns-components/textstr
|
|
|
3
3
|
import { createDialog, DialogType, ToastType } from 'chayns-api';
|
|
4
4
|
import React, { useCallback, useMemo, useRef } from 'react';
|
|
5
5
|
import textStrings from '../../constants/textStrings';
|
|
6
|
-
import {
|
|
6
|
+
import { useStickyActionState } from '../../hooks/useStickyActionState';
|
|
7
7
|
import SharingContextMenu from '../sharing-context-menu/SharingContextMenu';
|
|
8
8
|
import Icon from '../icon/Icon';
|
|
9
9
|
import { StyledCopyableContent, StyledCopyableContentActionGroup, StyledCopyableContentActions, StyledCopyableContentBody, StyledCopyableContentButton } from './CopyableContent.styles';
|
|
@@ -16,7 +16,7 @@ const CopyableContent = ({
|
|
|
16
16
|
}) => {
|
|
17
17
|
const rootRef = useRef(null);
|
|
18
18
|
const actionGroupRef = useRef(null);
|
|
19
|
-
const
|
|
19
|
+
const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);
|
|
20
20
|
const defaultCopyButtonText = useTextstringValue({
|
|
21
21
|
textstring: ttsToITextString(textStrings.components.copyableContent.copy)
|
|
22
22
|
});
|
|
@@ -52,12 +52,9 @@ const CopyableContent = ({
|
|
|
52
52
|
className: "copyable-content",
|
|
53
53
|
ref: rootRef
|
|
54
54
|
}, /*#__PURE__*/React.createElement(StyledCopyableContentActions, {
|
|
55
|
-
$fixedRight: stickyActionPosition.fixedRight,
|
|
56
|
-
$fixedTop: stickyActionPosition.fixedTop,
|
|
57
|
-
$isFixed: stickyActionPosition.isFixed,
|
|
58
55
|
ref: actionGroupRef
|
|
59
56
|
}, /*#__PURE__*/React.createElement(StyledCopyableContentActionGroup, null, /*#__PURE__*/React.createElement(StyledCopyableContentButton, {
|
|
60
|
-
$isSticky:
|
|
57
|
+
$isSticky: isActionGroupSticky,
|
|
61
58
|
"aria-label": defaultCopyButtonText,
|
|
62
59
|
onClick: () => {
|
|
63
60
|
void handleCopy();
|
|
@@ -69,7 +66,7 @@ const CopyableContent = ({
|
|
|
69
66
|
link: content,
|
|
70
67
|
shouldUseDefaultTriggerStyles: false
|
|
71
68
|
}, /*#__PURE__*/React.createElement(StyledCopyableContentButton, {
|
|
72
|
-
$isSticky:
|
|
69
|
+
$isSticky: isActionGroupSticky,
|
|
73
70
|
"aria-label": shareText,
|
|
74
71
|
type: "button"
|
|
75
72
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.js","names":["formatStringToHtml","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useMemo","useRef","textStrings","
|
|
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":[]}
|
|
@@ -26,24 +26,15 @@ export const StyledCopyableContent = styled.section`
|
|
|
26
26
|
}) => theme.text};
|
|
27
27
|
`;
|
|
28
28
|
export const StyledCopyableContentActions = styled.div`
|
|
29
|
-
position:
|
|
30
|
-
|
|
31
|
-
}) => $isFixed ? 'fixed' : 'sticky'};
|
|
32
|
-
top: ${({
|
|
33
|
-
$fixedTop,
|
|
34
|
-
$isFixed
|
|
35
|
-
}) => $isFixed ? `${$fixedTop}px` : 'var(--copyable-content-action-inset)'};
|
|
36
|
-
right: ${({
|
|
37
|
-
$fixedRight,
|
|
38
|
-
$isFixed
|
|
39
|
-
}) => $isFixed ? `${$fixedRight}px` : 'auto'};
|
|
29
|
+
position: sticky;
|
|
30
|
+
top: var(--copyable-content-action-inset);
|
|
40
31
|
z-index: 1;
|
|
41
32
|
display: flex;
|
|
42
33
|
justify-content: flex-end;
|
|
43
34
|
height: calc(var(--copyable-content-action-size) + var(--copyable-content-action-inset));
|
|
44
|
-
margin-top:
|
|
45
|
-
|
|
46
|
-
|
|
35
|
+
margin-top: calc(
|
|
36
|
+
(var(--copyable-content-action-size) + var(--copyable-content-action-inset)) * -1
|
|
37
|
+
);
|
|
47
38
|
padding-right: var(--copyable-content-action-inset);
|
|
48
39
|
`;
|
|
49
40
|
export const StyledCopyableContentActionGroup = styled.div`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableContent.styles.js","names":["styled","StyledCopyableContent","section","theme","cardBorderRadius","cardBackgroundOpacity","text","StyledCopyableContentActions","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,12 +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
|
-
|
|
7
|
-
$fixedRight: number;
|
|
8
|
-
$fixedTop: number;
|
|
9
|
-
$isFixed: boolean;
|
|
10
|
-
};
|
|
11
|
-
export declare const StyledCopyableContentActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledCopyableContentActionsProps> & StyledCopyableContentActionsProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledCopyableContentActionsProps> & StyledCopyableContentActionsProps, 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;
|
|
12
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;
|
|
13
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"> & {
|
|
14
9
|
$isSticky: boolean;
|
|
@@ -24,4 +19,3 @@ export declare const StyledCopyableContentBody: import("styled-components/dist/t
|
|
|
24
19
|
}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
|
|
25
20
|
theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
26
21
|
}, never>>> & string;
|
|
27
|
-
export {};
|
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
|
}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useStickyActionPosition = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
const STICKY_ACTION_INSET = 8;
|
|
9
|
-
const STICKY_ACTION_SIZE = 32;
|
|
10
|
-
const initialPosition = {
|
|
11
|
-
fixedRight: 0,
|
|
12
|
-
fixedTop: STICKY_ACTION_INSET,
|
|
13
|
-
isFixed: false,
|
|
14
|
-
isSticky: false
|
|
15
|
-
};
|
|
16
|
-
const isScrollable = element => {
|
|
17
|
-
const {
|
|
18
|
-
overflow,
|
|
19
|
-
overflowY
|
|
20
|
-
} = window.getComputedStyle(element);
|
|
21
|
-
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
22
|
-
};
|
|
23
|
-
const getScrollableAncestor = element => {
|
|
24
|
-
let parent = element.parentElement;
|
|
25
|
-
while (parent) {
|
|
26
|
-
if (isScrollable(parent)) {
|
|
27
|
-
return parent;
|
|
28
|
-
}
|
|
29
|
-
parent = parent.parentElement;
|
|
30
|
-
}
|
|
31
|
-
return undefined;
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Keeps an action group visible inside the nearest nested scroll container.
|
|
36
|
-
* Native sticky positioning is retained for document scrolling; a fixed-position
|
|
37
|
-
* fallback only applies when the component is hosted in an element scroll container.
|
|
38
|
-
*/
|
|
39
|
-
const useStickyActionPosition = (rootRef, actionRef) => {
|
|
40
|
-
const [position, setPosition] = (0, _react.useState)(initialPosition);
|
|
41
|
-
(0, _react.useEffect)(() => {
|
|
42
|
-
const root = rootRef.current;
|
|
43
|
-
const action = actionRef.current;
|
|
44
|
-
if (!root || !action) {
|
|
45
|
-
return undefined;
|
|
46
|
-
}
|
|
47
|
-
const scrollContainer = getScrollableAncestor(root);
|
|
48
|
-
const updatePosition = () => {
|
|
49
|
-
const rootRect = root.getBoundingClientRect();
|
|
50
|
-
const containerTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect().top) ?? 0;
|
|
51
|
-
const fixedTop = containerTop + STICKY_ACTION_INSET;
|
|
52
|
-
const isSticky = rootRect.top <= fixedTop;
|
|
53
|
-
const isFixed = Boolean(scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE);
|
|
54
|
-
const fixedRight = Math.max(0, window.innerWidth - rootRect.right);
|
|
55
|
-
setPosition(currentPosition => {
|
|
56
|
-
if (currentPosition.fixedRight === fixedRight && currentPosition.fixedTop === fixedTop && currentPosition.isFixed === isFixed && currentPosition.isSticky === isSticky) {
|
|
57
|
-
return currentPosition;
|
|
58
|
-
}
|
|
59
|
-
return {
|
|
60
|
-
fixedRight,
|
|
61
|
-
fixedTop,
|
|
62
|
-
isFixed,
|
|
63
|
-
isSticky
|
|
64
|
-
};
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
updatePosition();
|
|
68
|
-
scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', updatePosition, {
|
|
69
|
-
passive: true
|
|
70
|
-
});
|
|
71
|
-
window.addEventListener('scroll', updatePosition, {
|
|
72
|
-
passive: true
|
|
73
|
-
});
|
|
74
|
-
window.addEventListener('resize', updatePosition);
|
|
75
|
-
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);
|
|
76
|
-
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(root);
|
|
77
|
-
if (scrollContainer) {
|
|
78
|
-
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollContainer);
|
|
79
|
-
}
|
|
80
|
-
return () => {
|
|
81
|
-
scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', updatePosition);
|
|
82
|
-
window.removeEventListener('scroll', updatePosition);
|
|
83
|
-
window.removeEventListener('resize', updatePosition);
|
|
84
|
-
resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
|
|
85
|
-
};
|
|
86
|
-
}, [actionRef, rootRef]);
|
|
87
|
-
return position;
|
|
88
|
-
};
|
|
89
|
-
exports.useStickyActionPosition = useStickyActionPosition;
|
|
90
|
-
//# sourceMappingURL=useStickyActionPosition.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useStickyActionPosition.js","names":["_react","require","STICKY_ACTION_INSET","STICKY_ACTION_SIZE","initialPosition","fixedRight","fixedTop","isFixed","isSticky","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","undefined","useStickyActionPosition","rootRef","actionRef","position","setPosition","useState","useEffect","root","current","action","scrollContainer","updatePosition","rootRect","getBoundingClientRect","containerTop","top","Boolean","bottom","Math","max","innerWidth","right","currentPosition","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect","exports"],"sources":["../../../src/hooks/useStickyActionPosition.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst STICKY_ACTION_INSET = 8;\nconst STICKY_ACTION_SIZE = 32;\n\ntype StickyActionPosition = {\n fixedRight: number;\n fixedTop: number;\n isFixed: boolean;\n isSticky: boolean;\n};\n\nconst initialPosition: StickyActionPosition = {\n fixedRight: 0,\n fixedTop: STICKY_ACTION_INSET,\n isFixed: false,\n isSticky: false,\n};\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\n/**\n * Keeps an action group visible inside the nearest nested scroll container.\n * Native sticky positioning is retained for document scrolling; a fixed-position\n * fallback only applies when the component is hosted in an element scroll container.\n */\nexport const useStickyActionPosition = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n): StickyActionPosition => {\n const [position, setPosition] = useState<StickyActionPosition>(initialPosition);\n\n useEffect(() => {\n const root = rootRef.current;\n const action = actionRef.current;\n\n if (!root || !action) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updatePosition = () => {\n const rootRect = root.getBoundingClientRect();\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const fixedTop = containerTop + STICKY_ACTION_INSET;\n const isSticky = rootRect.top <= fixedTop;\n const isFixed = Boolean(\n scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE,\n );\n const fixedRight = Math.max(0, window.innerWidth - rootRect.right);\n\n setPosition((currentPosition) => {\n if (\n currentPosition.fixedRight === fixedRight &&\n currentPosition.fixedTop === fixedTop &&\n currentPosition.isFixed === isFixed &&\n currentPosition.isSticky === isSticky\n ) {\n return currentPosition;\n }\n\n return { fixedRight, fixedTop, isFixed, isSticky };\n });\n };\n\n updatePosition();\n scrollContainer?.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('resize', updatePosition);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updatePosition);\n window.removeEventListener('scroll', updatePosition);\n window.removeEventListener('resize', updatePosition);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return position;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
const STICKY_ACTION_INSET = 8;
|
|
3
|
-
const STICKY_ACTION_SIZE = 32;
|
|
4
|
-
const initialPosition = {
|
|
5
|
-
fixedRight: 0,
|
|
6
|
-
fixedTop: STICKY_ACTION_INSET,
|
|
7
|
-
isFixed: false,
|
|
8
|
-
isSticky: false
|
|
9
|
-
};
|
|
10
|
-
const isScrollable = element => {
|
|
11
|
-
const {
|
|
12
|
-
overflow,
|
|
13
|
-
overflowY
|
|
14
|
-
} = window.getComputedStyle(element);
|
|
15
|
-
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
16
|
-
};
|
|
17
|
-
const getScrollableAncestor = element => {
|
|
18
|
-
let parent = element.parentElement;
|
|
19
|
-
while (parent) {
|
|
20
|
-
if (isScrollable(parent)) {
|
|
21
|
-
return parent;
|
|
22
|
-
}
|
|
23
|
-
parent = parent.parentElement;
|
|
24
|
-
}
|
|
25
|
-
return undefined;
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Keeps an action group visible inside the nearest nested scroll container.
|
|
30
|
-
* Native sticky positioning is retained for document scrolling; a fixed-position
|
|
31
|
-
* fallback only applies when the component is hosted in an element scroll container.
|
|
32
|
-
*/
|
|
33
|
-
export const useStickyActionPosition = (rootRef, actionRef) => {
|
|
34
|
-
const [position, setPosition] = useState(initialPosition);
|
|
35
|
-
useEffect(() => {
|
|
36
|
-
const root = rootRef.current;
|
|
37
|
-
const action = actionRef.current;
|
|
38
|
-
if (!root || !action) {
|
|
39
|
-
return undefined;
|
|
40
|
-
}
|
|
41
|
-
const scrollContainer = getScrollableAncestor(root);
|
|
42
|
-
const updatePosition = () => {
|
|
43
|
-
const rootRect = root.getBoundingClientRect();
|
|
44
|
-
const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
|
|
45
|
-
const fixedTop = containerTop + STICKY_ACTION_INSET;
|
|
46
|
-
const isSticky = rootRect.top <= fixedTop;
|
|
47
|
-
const isFixed = Boolean(scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE);
|
|
48
|
-
const fixedRight = Math.max(0, window.innerWidth - rootRect.right);
|
|
49
|
-
setPosition(currentPosition => {
|
|
50
|
-
if (currentPosition.fixedRight === fixedRight && currentPosition.fixedTop === fixedTop && currentPosition.isFixed === isFixed && currentPosition.isSticky === isSticky) {
|
|
51
|
-
return currentPosition;
|
|
52
|
-
}
|
|
53
|
-
return {
|
|
54
|
-
fixedRight,
|
|
55
|
-
fixedTop,
|
|
56
|
-
isFixed,
|
|
57
|
-
isSticky
|
|
58
|
-
};
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
|
-
updatePosition();
|
|
62
|
-
scrollContainer?.addEventListener('scroll', updatePosition, {
|
|
63
|
-
passive: true
|
|
64
|
-
});
|
|
65
|
-
window.addEventListener('scroll', updatePosition, {
|
|
66
|
-
passive: true
|
|
67
|
-
});
|
|
68
|
-
window.addEventListener('resize', updatePosition);
|
|
69
|
-
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);
|
|
70
|
-
resizeObserver?.observe(root);
|
|
71
|
-
if (scrollContainer) {
|
|
72
|
-
resizeObserver?.observe(scrollContainer);
|
|
73
|
-
}
|
|
74
|
-
return () => {
|
|
75
|
-
scrollContainer?.removeEventListener('scroll', updatePosition);
|
|
76
|
-
window.removeEventListener('scroll', updatePosition);
|
|
77
|
-
window.removeEventListener('resize', updatePosition);
|
|
78
|
-
resizeObserver?.disconnect();
|
|
79
|
-
};
|
|
80
|
-
}, [actionRef, rootRef]);
|
|
81
|
-
return position;
|
|
82
|
-
};
|
|
83
|
-
//# sourceMappingURL=useStickyActionPosition.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useStickyActionPosition.js","names":["useEffect","useState","STICKY_ACTION_INSET","STICKY_ACTION_SIZE","initialPosition","fixedRight","fixedTop","isFixed","isSticky","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","undefined","useStickyActionPosition","rootRef","actionRef","position","setPosition","root","current","action","scrollContainer","updatePosition","rootRect","getBoundingClientRect","containerTop","top","Boolean","bottom","Math","max","innerWidth","right","currentPosition","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect"],"sources":["../../../src/hooks/useStickyActionPosition.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst STICKY_ACTION_INSET = 8;\nconst STICKY_ACTION_SIZE = 32;\n\ntype StickyActionPosition = {\n fixedRight: number;\n fixedTop: number;\n isFixed: boolean;\n isSticky: boolean;\n};\n\nconst initialPosition: StickyActionPosition = {\n fixedRight: 0,\n fixedTop: STICKY_ACTION_INSET,\n isFixed: false,\n isSticky: false,\n};\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\n/**\n * Keeps an action group visible inside the nearest nested scroll container.\n * Native sticky positioning is retained for document scrolling; a fixed-position\n * fallback only applies when the component is hosted in an element scroll container.\n */\nexport const useStickyActionPosition = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n): StickyActionPosition => {\n const [position, setPosition] = useState<StickyActionPosition>(initialPosition);\n\n useEffect(() => {\n const root = rootRef.current;\n const action = actionRef.current;\n\n if (!root || !action) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updatePosition = () => {\n const rootRect = root.getBoundingClientRect();\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const fixedTop = containerTop + STICKY_ACTION_INSET;\n const isSticky = rootRect.top <= fixedTop;\n const isFixed = Boolean(\n scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE,\n );\n const fixedRight = Math.max(0, window.innerWidth - rootRect.right);\n\n setPosition((currentPosition) => {\n if (\n currentPosition.fixedRight === fixedRight &&\n currentPosition.fixedTop === fixedTop &&\n currentPosition.isFixed === isFixed &&\n currentPosition.isSticky === isSticky\n ) {\n return currentPosition;\n }\n\n return { fixedRight, fixedTop, isFixed, isSticky };\n });\n };\n\n updatePosition();\n scrollContainer?.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('resize', updatePosition);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updatePosition);\n window.removeEventListener('scroll', updatePosition);\n window.removeEventListener('resize', updatePosition);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return position;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
type StickyActionPosition = {
|
|
3
|
-
fixedRight: number;
|
|
4
|
-
fixedTop: number;
|
|
5
|
-
isFixed: boolean;
|
|
6
|
-
isSticky: boolean;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Keeps an action group visible inside the nearest nested scroll container.
|
|
10
|
-
* Native sticky positioning is retained for document scrolling; a fixed-position
|
|
11
|
-
* fallback only applies when the component is hosted in an element scroll container.
|
|
12
|
-
*/
|
|
13
|
-
export declare const useStickyActionPosition: (rootRef: RefObject<HTMLElement>, actionRef: RefObject<HTMLElement>) => StickyActionPosition;
|
|
14
|
-
export {};
|