@intlayer/design-system 5.7.5 → 5.7.6-canary.0
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/dist/.vite/manifest.json +7 -7
- package/dist/components/DictionaryEditor/NodeWrapper/FileWrapper.cjs +0 -9
- package/dist/components/DictionaryEditor/NodeWrapper/FileWrapper.cjs.map +1 -1
- package/dist/components/DictionaryEditor/NodeWrapper/FileWrapper.d.ts.map +1 -1
- package/dist/components/DictionaryEditor/NodeWrapper/FileWrapper.mjs +0 -9
- package/dist/components/DictionaryEditor/NodeWrapper/FileWrapper.mjs.map +1 -1
- package/dist/components/RightDrawer/RightDrawer.cjs +2 -2
- package/dist/components/RightDrawer/RightDrawer.cjs.map +1 -1
- package/dist/components/RightDrawer/RightDrawer.mjs +1 -1
- package/dist/components/RightDrawer/RightDrawer.mjs.map +1 -1
- package/dist/{utils → components/RightDrawer}/isElementAtTopAndNotCovered.cjs +1 -1
- package/dist/components/RightDrawer/isElementAtTopAndNotCovered.cjs.map +1 -0
- package/dist/components/RightDrawer/isElementAtTopAndNotCovered.d.ts.map +1 -0
- package/dist/{utils → components/RightDrawer}/isElementAtTopAndNotCovered.mjs +1 -1
- package/dist/components/RightDrawer/isElementAtTopAndNotCovered.mjs.map +1 -0
- package/package.json +17 -17
- package/dist/utils/isElementAtTopAndNotCovered.cjs.map +0 -1
- package/dist/utils/isElementAtTopAndNotCovered.d.ts.map +0 -1
- package/dist/utils/isElementAtTopAndNotCovered.mjs.map +0 -1
- /package/dist/{utils → components/RightDrawer}/isElementAtTopAndNotCovered.d.ts +0 -0
package/dist/.vite/manifest.json
CHANGED
|
@@ -1738,10 +1738,10 @@
|
|
|
1738
1738
|
"imports": [
|
|
1739
1739
|
"_index-BYzBot7l.cjs",
|
|
1740
1740
|
"src/hooks/useDevice.ts",
|
|
1741
|
-
"src/utils/isElementAtTopAndNotCovered.tsx",
|
|
1742
1741
|
"src/components/Button/Button.tsx",
|
|
1743
1742
|
"src/components/Container/index.tsx",
|
|
1744
1743
|
"src/components/MaxWidthSmoother/index.tsx",
|
|
1744
|
+
"src/components/RightDrawer/isElementAtTopAndNotCovered.tsx",
|
|
1745
1745
|
"src/components/RightDrawer/useRightDrawerStore.ts"
|
|
1746
1746
|
]
|
|
1747
1747
|
},
|
|
@@ -1755,6 +1755,12 @@
|
|
|
1755
1755
|
"src/components/RightDrawer/useRightDrawerStore.ts"
|
|
1756
1756
|
]
|
|
1757
1757
|
},
|
|
1758
|
+
"src/components/RightDrawer/isElementAtTopAndNotCovered.tsx": {
|
|
1759
|
+
"file": "components/RightDrawer/isElementAtTopAndNotCovered.cjs",
|
|
1760
|
+
"name": "components/RightDrawer/isElementAtTopAndNotCovered",
|
|
1761
|
+
"src": "src/components/RightDrawer/isElementAtTopAndNotCovered.tsx",
|
|
1762
|
+
"isEntry": true
|
|
1763
|
+
},
|
|
1758
1764
|
"src/components/RightDrawer/useRightDrawerStore.ts": {
|
|
1759
1765
|
"file": "components/RightDrawer/useRightDrawerStore.cjs",
|
|
1760
1766
|
"name": "components/RightDrawer/useRightDrawerStore",
|
|
@@ -2365,12 +2371,6 @@
|
|
|
2365
2371
|
"src": "src/utils/cn.ts",
|
|
2366
2372
|
"isEntry": true
|
|
2367
2373
|
},
|
|
2368
|
-
"src/utils/isElementAtTopAndNotCovered.tsx": {
|
|
2369
|
-
"file": "utils/isElementAtTopAndNotCovered.cjs",
|
|
2370
|
-
"name": "utils/isElementAtTopAndNotCovered",
|
|
2371
|
-
"src": "src/utils/isElementAtTopAndNotCovered.tsx",
|
|
2372
|
-
"isEntry": true
|
|
2373
|
-
},
|
|
2374
2374
|
"src/utils/object.ts": {
|
|
2375
2375
|
"file": "utils/object.cjs",
|
|
2376
2376
|
"name": "utils/object",
|
|
@@ -32,15 +32,6 @@ const FileWrapper = (props) => {
|
|
|
32
32
|
section: content,
|
|
33
33
|
editedContentValue: editedContentValue?.content,
|
|
34
34
|
onContentChange: (content2) => {
|
|
35
|
-
console.log("lll", {
|
|
36
|
-
subSection,
|
|
37
|
-
file: {
|
|
38
|
-
...section,
|
|
39
|
-
content: content2.newValue
|
|
40
|
-
},
|
|
41
|
-
keyPath,
|
|
42
|
-
newKeyPath
|
|
43
|
-
});
|
|
44
35
|
addEditedContent(
|
|
45
36
|
props.dictionary.key,
|
|
46
37
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileWrapper.cjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"sourcesContent":["import {\n getContentNodeByKeyPath,\n NodeType,\n type FileContent,\n type KeyPath,\n} from '@intlayer/core';\nimport
|
|
1
|
+
{"version":3,"file":"FileWrapper.cjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"sourcesContent":["import {\n getContentNodeByKeyPath,\n NodeType,\n type FileContent,\n type KeyPath,\n} from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { StringWrapper, type StringWrapperProps } from './StringWrapper';\n\ntype FileWrapperProps = Omit<StringWrapperProps, 'section'> & {\n section: FileContent;\n};\n\nexport const FileWrapper: FC<FileWrapperProps> = (props) => {\n const { keyPath, section } = props;\n const { addEditedContent } = useEditedContent();\n const editedContentValue = getContentNodeByKeyPath(\n props.editedContent,\n keyPath\n ) as FileContent | undefined;\n\n const subSection = section[NodeType.File];\n const { content } = section;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.File,\n },\n ];\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <span className=\"text-neutral text-sm\">{subSection} </span>\n <StringWrapper\n {...props}\n keyPath={newKeyPath}\n section={content}\n editedContentValue={editedContentValue?.content}\n onContentChange={(content) => {\n addEditedContent(\n props.dictionary.key,\n {\n ...section,\n content: content.newValue,\n } as FileContent,\n keyPath\n );\n }}\n />\n </div>\n );\n};\n"],"names":["useEditedContent","getContentNodeByKeyPath","NodeType","jsxs","jsx","StringWrapper","content"],"mappings":";;;;;;AAca,MAAA,cAAoC,CAAC,UAAU;AACpD,QAAA,EAAE,SAAS,QAAA,IAAY;AACvB,QAAA,EAAE,iBAAiB,IAAIA,6BAAiB;AAC9C,QAAM,qBAAqBC,KAAA;AAAA,IACzB,MAAM;AAAA,IACN;AAAA,EACF;AAEM,QAAA,aAAa,QAAQC,KAAA,SAAS,IAAI;AAClC,QAAA,EAAE,YAAY;AAEpB,QAAM,aAAwB;AAAA,IAC5B,GAAG;AAAA,IACH;AAAA,MACE,MAAMA,KAAAA,SAAS;AAAA,IAAA;AAAA,EAEnB;AAGE,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAU,wCACb,UAAA;AAAA,IAACA,2BAAAA,KAAA,QAAA,EAAK,WAAU,wBAAwB,UAAA;AAAA,MAAA;AAAA,MAAW;AAAA,IAAA,GAAC;AAAA,IACpDC,2BAAA;AAAA,MAACC,sDAAA;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,oBAAoB,oBAAoB;AAAA,QACxC,iBAAiB,CAACC,aAAY;AAC5B;AAAA,YACE,MAAM,WAAW;AAAA,YACjB;AAAA,cACE,GAAG;AAAA,cACH,SAASA,SAAQ;AAAA,YACnB;AAAA,YACA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"FileWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,KAAK,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAAG;IAC5D,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuC5C,CAAC"}
|
|
@@ -30,15 +30,6 @@ const FileWrapper = (props) => {
|
|
|
30
30
|
section: content,
|
|
31
31
|
editedContentValue: editedContentValue?.content,
|
|
32
32
|
onContentChange: (content2) => {
|
|
33
|
-
console.log("lll", {
|
|
34
|
-
subSection,
|
|
35
|
-
file: {
|
|
36
|
-
...section,
|
|
37
|
-
content: content2.newValue
|
|
38
|
-
},
|
|
39
|
-
keyPath,
|
|
40
|
-
newKeyPath
|
|
41
|
-
});
|
|
42
33
|
addEditedContent(
|
|
43
34
|
props.dictionary.key,
|
|
44
35
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileWrapper.mjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"sourcesContent":["import {\n getContentNodeByKeyPath,\n NodeType,\n type FileContent,\n type KeyPath,\n} from '@intlayer/core';\nimport
|
|
1
|
+
{"version":3,"file":"FileWrapper.mjs","sources":["../../../../src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx"],"sourcesContent":["import {\n getContentNodeByKeyPath,\n NodeType,\n type FileContent,\n type KeyPath,\n} from '@intlayer/core';\nimport { useEditedContent } from '@intlayer/editor-react';\nimport type { FC } from 'react';\nimport { StringWrapper, type StringWrapperProps } from './StringWrapper';\n\ntype FileWrapperProps = Omit<StringWrapperProps, 'section'> & {\n section: FileContent;\n};\n\nexport const FileWrapper: FC<FileWrapperProps> = (props) => {\n const { keyPath, section } = props;\n const { addEditedContent } = useEditedContent();\n const editedContentValue = getContentNodeByKeyPath(\n props.editedContent,\n keyPath\n ) as FileContent | undefined;\n\n const subSection = section[NodeType.File];\n const { content } = section;\n\n const newKeyPath: KeyPath[] = [\n ...keyPath,\n {\n type: NodeType.File,\n },\n ];\n\n return (\n <div className=\"ml-2 grid grid-cols-[auto,1fr] gap-2\">\n <span className=\"text-neutral text-sm\">{subSection} </span>\n <StringWrapper\n {...props}\n keyPath={newKeyPath}\n section={content}\n editedContentValue={editedContentValue?.content}\n onContentChange={(content) => {\n addEditedContent(\n props.dictionary.key,\n {\n ...section,\n content: content.newValue,\n } as FileContent,\n keyPath\n );\n }}\n />\n </div>\n );\n};\n"],"names":["content"],"mappings":";;;;AAca,MAAA,cAAoC,CAAC,UAAU;AACpD,QAAA,EAAE,SAAS,QAAA,IAAY;AACvB,QAAA,EAAE,iBAAiB,IAAI,iBAAiB;AAC9C,QAAM,qBAAqB;AAAA,IACzB,MAAM;AAAA,IACN;AAAA,EACF;AAEM,QAAA,aAAa,QAAQ,SAAS,IAAI;AAClC,QAAA,EAAE,YAAY;AAEpB,QAAM,aAAwB;AAAA,IAC5B,GAAG;AAAA,IACH;AAAA,MACE,MAAM,SAAS;AAAA,IAAA;AAAA,EAEnB;AAGE,SAAA,qBAAC,OAAI,EAAA,WAAU,wCACb,UAAA;AAAA,IAAC,qBAAA,QAAA,EAAK,WAAU,wBAAwB,UAAA;AAAA,MAAA;AAAA,MAAW;AAAA,IAAA,GAAC;AAAA,IACpD;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS;AAAA,QACT,SAAS;AAAA,QACT,oBAAoB,oBAAoB;AAAA,QACxC,iBAAiB,CAACA,aAAY;AAC5B;AAAA,YACE,MAAM,WAAW;AAAA,YACjB;AAAA,cACE,GAAG;AAAA,cACH,SAASA,SAAQ;AAAA,YACnB;AAAA,YACA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|
|
@@ -6,10 +6,10 @@ const lucideReact = require("lucide-react");
|
|
|
6
6
|
const ReactExports = require("react");
|
|
7
7
|
const hooks_useScrollBlockage_index = require("../../index-BYzBot7l.cjs");
|
|
8
8
|
const hooks_useDevice = require("../../hooks/useDevice.cjs");
|
|
9
|
-
const utils_isElementAtTopAndNotCovered = require("../../utils/isElementAtTopAndNotCovered.cjs");
|
|
10
9
|
const components_Button_Button = require("../Button/Button.cjs");
|
|
11
10
|
const components_Container_index = require("../Container/index.cjs");
|
|
12
11
|
const components_MaxWidthSmoother_index = require("../MaxWidthSmoother/index.cjs");
|
|
12
|
+
const components_RightDrawer_isElementAtTopAndNotCovered = require("./isElementAtTopAndNotCovered.cjs");
|
|
13
13
|
const components_RightDrawer_useRightDrawerStore = require("./useRightDrawerStore.cjs");
|
|
14
14
|
const RightDrawer = ({
|
|
15
15
|
title,
|
|
@@ -41,7 +41,7 @@ const RightDrawer = ({
|
|
|
41
41
|
if (!panelRef.current) return;
|
|
42
42
|
const isClickAble = isOpen && closeOnOutsideClick;
|
|
43
43
|
const isClickOutside = event.target && !panelRef.current.contains(event.target);
|
|
44
|
-
const isAtTopAndVisible =
|
|
44
|
+
const isAtTopAndVisible = components_RightDrawer_isElementAtTopAndNotCovered.isElementAtTopAndNotCovered(panelRef.current);
|
|
45
45
|
if (isClickAble && isClickOutside && isAtTopAndVisible || !event.target) {
|
|
46
46
|
close();
|
|
47
47
|
onClose?.();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport {
|
|
1
|
+
{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n onBack: () => void;\n text?: string;\n};\n\ntype RightDrawerProps = {\n title?: ReactNode;\n identifier: string;\n children?: ReactNode;\n header?: ReactNode;\n closeOnOutsideClick?: boolean;\n backButton?: BackButtonProps;\n isOpen?: boolean;\n onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n}) => {\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const { close, open, isOpen } = useRightDrawerStore(\n useShallow((s) => ({\n close: () => s.close(identifier),\n open: () => s.open(identifier),\n isOpen: s.isOpen(identifier),\n }))\n );\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n try {\n if (!panelRef.current) return;\n\n // Check if drawer is open and click outside is enabled\n const isClickAble = isOpen && closeOnOutsideClick;\n\n // Check if click is outside the drawer panel\n const isClickOutside =\n event.target && !panelRef.current.contains(event.target as Node);\n\n // Check if event propagation has been stopped\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (\n (isClickAble && isClickOutside && isAtTopAndVisible) ||\n !event.target\n ) {\n close();\n onClose?.();\n }\n } catch (_e) {\n close();\n onClose?.();\n }\n };\n\n window.addEventListener('mousedown', handleClickOutside);\n return () => window.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n useEffect(() => {\n if (isOpenProp !== undefined) {\n if (isOpenProp) {\n open();\n } else {\n close();\n onClose?.();\n }\n }\n }, [close, open, onClose, isOpenProp, identifier]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n // Check if the click trigger the background\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (isMobile) {\n close();\n onClose?.();\n }\n };\n\n return (\n <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"text-text relative flex h-screen w-screen flex-col md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n <div className=\"flex flex-col gap-3 p-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label={backButton.text ?? 'Go back'}\n onClick={backButton.onBack}\n Icon={ChevronLeft}\n >\n {backButton?.text}\n </Button>\n )}\n </div>\n <div>\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label=\"Close\"\n className=\"ml-auto\"\n onClick={close}\n Icon={X}\n size=\"icon-md\"\n />\n </div>\n </div>\n {title && (\n <h2 className=\"flex items-center justify-center text-lg font-bold\">\n {title}\n </h2>\n )}\n {header}\n </div>\n\n <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n <div\n className=\"flex flex-1 flex-col\"\n onClick={handleSpareSpaceClick}\n ref={childrenContainerRef}\n >\n {children}\n </div>\n </div>\n </Container>\n </MaxWidthSmoother>\n </div>\n );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","Button","ChevronLeft","X"],"mappings":"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"}
|
|
@@ -4,10 +4,10 @@ import { ChevronLeft, X } from "lucide-react";
|
|
|
4
4
|
import { useRef, useEffect } from "react";
|
|
5
5
|
import { a as useShallow, u as useScrollBlockage } from "../../index-BCuMWKyy.js";
|
|
6
6
|
import { useDevice } from "../../hooks/useDevice.mjs";
|
|
7
|
-
import { isElementAtTopAndNotCovered } from "../../utils/isElementAtTopAndNotCovered.mjs";
|
|
8
7
|
import { Button } from "../Button/Button.mjs";
|
|
9
8
|
import { Container } from "../Container/index.mjs";
|
|
10
9
|
import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
|
|
10
|
+
import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
|
|
11
11
|
import { useRightDrawerStore } from "./useRightDrawerStore.mjs";
|
|
12
12
|
const RightDrawer = ({
|
|
13
13
|
title,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport {
|
|
1
|
+
{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n type FC,\n type MouseEventHandler,\n type ReactNode,\n useEffect,\n useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n onBack: () => void;\n text?: string;\n};\n\ntype RightDrawerProps = {\n title?: ReactNode;\n identifier: string;\n children?: ReactNode;\n header?: ReactNode;\n closeOnOutsideClick?: boolean;\n backButton?: BackButtonProps;\n isOpen?: boolean;\n onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n title,\n identifier,\n children,\n header,\n closeOnOutsideClick = true,\n backButton,\n isOpen: isOpenProp,\n onClose,\n}) => {\n const { isMobile } = useDevice('md');\n const panelRef = useRef<HTMLDivElement>(null);\n const childrenContainerRef = useRef<HTMLDivElement>(null);\n const { close, open, isOpen } = useRightDrawerStore(\n useShallow((s) => ({\n close: () => s.close(identifier),\n open: () => s.open(identifier),\n isOpen: s.isOpen(identifier),\n }))\n );\n\n useScrollBlockage({\n disableScroll: isOpen,\n key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n });\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n try {\n if (!panelRef.current) return;\n\n // Check if drawer is open and click outside is enabled\n const isClickAble = isOpen && closeOnOutsideClick;\n\n // Check if click is outside the drawer panel\n const isClickOutside =\n event.target && !panelRef.current.contains(event.target as Node);\n\n // Check if event propagation has been stopped\n const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n if (\n (isClickAble && isClickOutside && isAtTopAndVisible) ||\n !event.target\n ) {\n close();\n onClose?.();\n }\n } catch (_e) {\n close();\n onClose?.();\n }\n };\n\n window.addEventListener('mousedown', handleClickOutside);\n return () => window.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n useEffect(() => {\n if (isOpenProp !== undefined) {\n if (isOpenProp) {\n open();\n } else {\n close();\n onClose?.();\n }\n }\n }, [close, open, onClose, isOpenProp, identifier]);\n\n const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n // Check if the click trigger the background\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (isMobile) {\n close();\n onClose?.();\n }\n };\n\n return (\n <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n <Container\n className=\"text-text relative flex h-screen w-screen flex-col md:w-[400px]\"\n ref={panelRef}\n roundedSize=\"none\"\n >\n <div className=\"flex flex-col gap-3 p-6\">\n <div className=\"flex justify-between gap-3\">\n <div>\n {backButton && (\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label={backButton.text ?? 'Go back'}\n onClick={backButton.onBack}\n Icon={ChevronLeft}\n >\n {backButton?.text}\n </Button>\n )}\n </div>\n <div>\n <Button\n variant=\"hoverable\"\n color=\"text\"\n label=\"Close\"\n className=\"ml-auto\"\n onClick={close}\n Icon={X}\n size=\"icon-md\"\n />\n </div>\n </div>\n {title && (\n <h2 className=\"flex items-center justify-center text-lg font-bold\">\n {title}\n </h2>\n )}\n {header}\n </div>\n\n <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n <div\n className=\"flex flex-1 flex-col\"\n onClick={handleSpareSpaceClick}\n ref={childrenContainerRef}\n >\n {children}\n </div>\n </div>\n </Container>\n </MaxWidthSmoother>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const isElementAtTopAndNotCovered = (element) => {
|
|
4
4
|
const rect = element.getBoundingClientRect();
|
|
5
5
|
const elemTop = rect.top;
|
|
6
|
-
const elemBottom = rect.bottom;
|
|
6
|
+
const elemBottom = rect.bottom - 1;
|
|
7
7
|
const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;
|
|
8
8
|
if (isVisibleAtTop) {
|
|
9
9
|
const centerX = rect.left + rect.width / 2;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isElementAtTopAndNotCovered.cjs","sources":["../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["export const isElementAtTopAndNotCovered = (element: HTMLElement) => {\n const rect = element.getBoundingClientRect();\n const elemTop = rect.top;\n const elemBottom = rect.bottom - 1; // -1 to avoid the border of the element\n\n // Check if element is at the top of the viewport\n const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n // Further check if the element is not covered by any other element at the center point of its top boundary\n if (isVisibleAtTop) {\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n const topElement = document.elementFromPoint(centerX, centerY);\n\n // Check if our element is the topmost element at these coordinates or a child of the topmost element\n return element === topElement || element.contains(topElement);\n }\n\n return false;\n};\n"],"names":[],"mappings":";;AAAa,MAAA,8BAA8B,CAAC,YAAyB;AAC7D,QAAA,OAAO,QAAQ,sBAAsB;AAC3C,QAAM,UAAU,KAAK;AACf,QAAA,aAAa,KAAK,SAAS;AAGjC,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACnC,UAAA,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAAA;AAGvD,SAAA;AACT;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isElementAtTopAndNotCovered.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B,GAAI,SAAS,WAAW,YAmB/D,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const isElementAtTopAndNotCovered = (element) => {
|
|
2
2
|
const rect = element.getBoundingClientRect();
|
|
3
3
|
const elemTop = rect.top;
|
|
4
|
-
const elemBottom = rect.bottom;
|
|
4
|
+
const elemBottom = rect.bottom - 1;
|
|
5
5
|
const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;
|
|
6
6
|
if (isVisibleAtTop) {
|
|
7
7
|
const centerX = rect.left + rect.width / 2;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isElementAtTopAndNotCovered.mjs","sources":["../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["export const isElementAtTopAndNotCovered = (element: HTMLElement) => {\n const rect = element.getBoundingClientRect();\n const elemTop = rect.top;\n const elemBottom = rect.bottom - 1; // -1 to avoid the border of the element\n\n // Check if element is at the top of the viewport\n const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n // Further check if the element is not covered by any other element at the center point of its top boundary\n if (isVisibleAtTop) {\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n const topElement = document.elementFromPoint(centerX, centerY);\n\n // Check if our element is the topmost element at these coordinates or a child of the topmost element\n return element === topElement || element.contains(topElement);\n }\n\n return false;\n};\n"],"names":[],"mappings":"AAAa,MAAA,8BAA8B,CAAC,YAAyB;AAC7D,QAAA,OAAO,QAAQ,sBAAsB;AAC3C,QAAM,UAAU,KAAK;AACf,QAAA,aAAa,KAAK,SAAS;AAGjC,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACnC,UAAA,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAAA;AAGvD,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intlayer/design-system",
|
|
3
|
-
"version": "5.7.
|
|
3
|
+
"version": "5.7.6-canary.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
|
|
6
6
|
"keywords": [
|
|
@@ -79,12 +79,12 @@
|
|
|
79
79
|
"tailwind-merge": "^3.3.0",
|
|
80
80
|
"zod": "^3.25.56",
|
|
81
81
|
"zustand": "^4.5.6",
|
|
82
|
-
"@intlayer/config": "5.7.
|
|
83
|
-
"@intlayer/
|
|
84
|
-
"@intlayer/dictionaries-entry": "5.7.
|
|
85
|
-
"@intlayer/
|
|
86
|
-
"react
|
|
87
|
-
"
|
|
82
|
+
"@intlayer/config": "5.7.6-canary.0",
|
|
83
|
+
"@intlayer/api": "5.7.6-canary.0",
|
|
84
|
+
"@intlayer/dictionaries-entry": "5.7.6-canary.0",
|
|
85
|
+
"@intlayer/core": "5.7.6-canary.0",
|
|
86
|
+
"@intlayer/editor-react": "5.7.6-canary.0",
|
|
87
|
+
"react-intlayer": "5.7.6-canary.0"
|
|
88
88
|
},
|
|
89
89
|
"devDependencies": {
|
|
90
90
|
"@chromatic-com/storybook": "^3.2.6",
|
|
@@ -121,11 +121,11 @@
|
|
|
121
121
|
"vite": "^6.3.5",
|
|
122
122
|
"vite-plugin-dts": "^4.5.3",
|
|
123
123
|
"vitest": "^3.2.2",
|
|
124
|
-
"@
|
|
124
|
+
"@intlayer/backend": "5.7.6-canary.0",
|
|
125
125
|
"@utils/ts-config": "1.0.4",
|
|
126
126
|
"@utils/ts-config-types": "1.0.4",
|
|
127
|
-
"@utils/
|
|
128
|
-
"@
|
|
127
|
+
"@utils/eslint-config": "1.0.4",
|
|
128
|
+
"@utils/tsup-config": "1.0.4"
|
|
129
129
|
},
|
|
130
130
|
"peerDependencies": {
|
|
131
131
|
"@monaco-editor/react": "^4.7.0",
|
|
@@ -136,13 +136,13 @@
|
|
|
136
136
|
"react-dom": ">=16.0.0",
|
|
137
137
|
"tailwind-merge": "^3.3.0",
|
|
138
138
|
"zustand": "^4.5.6",
|
|
139
|
-
"@intlayer/
|
|
140
|
-
"
|
|
141
|
-
"@intlayer/
|
|
142
|
-
"@intlayer/
|
|
143
|
-
"@intlayer/
|
|
144
|
-
"
|
|
145
|
-
"intlayer": "5.7.
|
|
139
|
+
"@intlayer/api": "5.7.6-canary.0",
|
|
140
|
+
"@intlayer/config": "5.7.6-canary.0",
|
|
141
|
+
"@intlayer/core": "5.7.6-canary.0",
|
|
142
|
+
"@intlayer/dictionaries-entry": "5.7.6-canary.0",
|
|
143
|
+
"@intlayer/editor-react": "5.7.6-canary.0",
|
|
144
|
+
"react-intlayer": "5.7.6-canary.0",
|
|
145
|
+
"intlayer": "5.7.6-canary.0"
|
|
146
146
|
},
|
|
147
147
|
"scripts": {
|
|
148
148
|
"build": "pnpm clean & pnpm build:ci",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isElementAtTopAndNotCovered.cjs","sources":["../../src/utils/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["export const isElementAtTopAndNotCovered = (element: HTMLElement) => {\n const rect = element.getBoundingClientRect();\n const elemTop = rect.top;\n const elemBottom = rect.bottom;\n\n // Check if element is at the top of the viewport\n const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n // Further check if the element is not covered by any other element at the center point of its top boundary\n if (isVisibleAtTop) {\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n const topElement = document.elementFromPoint(centerX, centerY);\n\n // Check if our element is the topmost element at these coordinates or a child of the topmost element\n return element === topElement || element.contains(topElement);\n }\n\n return false;\n};\n"],"names":[],"mappings":";;AAAa,MAAA,8BAA8B,CAAC,YAAyB;AAC7D,QAAA,OAAO,QAAQ,sBAAsB;AAC3C,QAAM,UAAU,KAAK;AACrB,QAAM,aAAa,KAAK;AAGxB,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACnC,UAAA,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAAA;AAGvD,SAAA;AACT;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isElementAtTopAndNotCovered.d.ts","sourceRoot":"","sources":["../../src/utils/isElementAtTopAndNotCovered.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B,GAAI,SAAS,WAAW,YAmB/D,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isElementAtTopAndNotCovered.mjs","sources":["../../src/utils/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["export const isElementAtTopAndNotCovered = (element: HTMLElement) => {\n const rect = element.getBoundingClientRect();\n const elemTop = rect.top;\n const elemBottom = rect.bottom;\n\n // Check if element is at the top of the viewport\n const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n // Further check if the element is not covered by any other element at the center point of its top boundary\n if (isVisibleAtTop) {\n const centerX = rect.left + rect.width / 2;\n const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n const topElement = document.elementFromPoint(centerX, centerY);\n\n // Check if our element is the topmost element at these coordinates or a child of the topmost element\n return element === topElement || element.contains(topElement);\n }\n\n return false;\n};\n"],"names":[],"mappings":"AAAa,MAAA,8BAA8B,CAAC,YAAyB;AAC7D,QAAA,OAAO,QAAQ,sBAAsB;AAC3C,QAAM,UAAU,KAAK;AACrB,QAAM,aAAa,KAAK;AAGxB,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACnC,UAAA,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAAA;AAGvD,SAAA;AACT;"}
|
|
File without changes
|