@gcsa/console-react 0.1.4 → 0.1.5
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/GcsaDrawer.js +29 -29
- package/dist/GcsaDrawer.js.map +1 -1
- package/dist/GcsaModal.js +22 -21
- package/dist/GcsaModal.js.map +1 -1
- package/dist/hooks/useOverlayZIndex.d.ts +2 -3
- package/dist/hooks/useOverlayZIndex.js +10 -10
- package/dist/hooks/useOverlayZIndex.js.map +1 -1
- package/dist/style.css +32 -4
- package/package.json +3 -3
- package/src/GcsaDrawer.tsx +10 -8
- package/src/GcsaModal.tsx +34 -31
- package/src/hooks/useOverlayZIndex.ts +4 -6
package/dist/GcsaDrawer.js
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
1
|
+
import { jsx as r, jsxs as d } from "react/jsx-runtime";
|
|
2
2
|
import { Dialog as e } from "@ark-ui/react/dialog";
|
|
3
|
-
import { Portal as
|
|
4
|
-
import { useGcsaLocaleMessages as
|
|
5
|
-
import { useGcsaOverlayZIndex as
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
import { Portal as f } from "@ark-ui/react/portal";
|
|
4
|
+
import { useGcsaLocaleMessages as v } from "./hooks/useGcsaLocale.js";
|
|
5
|
+
import { useGcsaOverlayZIndex as N } from "./hooks/useOverlayZIndex.js";
|
|
6
|
+
import { useGcsaTheme as x } from "./hooks/useGcsaTheme.js";
|
|
7
|
+
import { usePreserveScrollOnFocus as y } from "./hooks/usePreventHiddenInputScroll.js";
|
|
8
|
+
function P({
|
|
9
|
+
open: a,
|
|
10
|
+
title: s,
|
|
11
|
+
closable: i = !0,
|
|
12
|
+
placement: c = "right",
|
|
13
|
+
size: n = "default",
|
|
14
|
+
footer: o,
|
|
14
15
|
onOpenChange: l,
|
|
15
|
-
children:
|
|
16
|
+
children: m
|
|
16
17
|
}) {
|
|
17
|
-
const
|
|
18
|
+
const u = v(), _ = x(), g = y(a), { portalZ: t } = N(a), h = t == null ? void 0 : { zIndex: t }, p = n === "lg" ? " gcsa-drawer__panel--size-lg" : "";
|
|
18
19
|
return /* @__PURE__ */ r(
|
|
19
20
|
e.Root,
|
|
20
21
|
{
|
|
21
|
-
open:
|
|
22
|
+
open: a,
|
|
22
23
|
lazyMount: !0,
|
|
23
24
|
unmountOnExit: !0,
|
|
24
|
-
onOpenChange: (
|
|
25
|
-
children: /* @__PURE__ */
|
|
26
|
-
/* @__PURE__ */ r(e.Backdrop, { className: "gcsa-drawer__backdrop"
|
|
25
|
+
onOpenChange: (w) => l == null ? void 0 : l(w.open),
|
|
26
|
+
children: /* @__PURE__ */ r(f, { children: /* @__PURE__ */ d("div", { className: "gcsa-portal-scope gcsa-modal-portal", "data-gcsa-theme": _, style: h, children: [
|
|
27
|
+
/* @__PURE__ */ r(e.Backdrop, { className: "gcsa-drawer__backdrop" }),
|
|
27
28
|
/* @__PURE__ */ r(
|
|
28
29
|
e.Positioner,
|
|
29
30
|
{
|
|
30
|
-
className: `gcsa-drawer__positioner gcsa-drawer__positioner--${
|
|
31
|
-
|
|
32
|
-
children: /* @__PURE__ */ t(
|
|
31
|
+
className: `gcsa-drawer__positioner gcsa-drawer__positioner--${c}`,
|
|
32
|
+
children: /* @__PURE__ */ d(
|
|
33
33
|
e.Content,
|
|
34
34
|
{
|
|
35
|
-
className: `gcsa-drawer__panel gcsa-ui-surface gcsa-drawer__panel--${
|
|
35
|
+
className: `gcsa-drawer__panel gcsa-ui-surface gcsa-drawer__panel--${c}${p}`,
|
|
36
36
|
children: [
|
|
37
|
-
|
|
37
|
+
i ? /* @__PURE__ */ r(e.CloseTrigger, { className: "gcsa-drawer__close", "aria-label": u.close, children: /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r(
|
|
38
38
|
"path",
|
|
39
39
|
{
|
|
40
40
|
d: "M2 2l10 10M12 2L2 12",
|
|
@@ -43,26 +43,26 @@ function I({
|
|
|
43
43
|
strokeLinecap: "round"
|
|
44
44
|
}
|
|
45
45
|
) }) }) : null,
|
|
46
|
-
|
|
46
|
+
s ? /* @__PURE__ */ r("header", { className: "gcsa-drawer__header", children: /* @__PURE__ */ r(e.Title, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "gcsa-drawer__title", children: s }) }) }) : null,
|
|
47
47
|
/* @__PURE__ */ r(
|
|
48
48
|
"div",
|
|
49
49
|
{
|
|
50
50
|
ref: g,
|
|
51
|
-
className: `gcsa-drawer__body${
|
|
52
|
-
children:
|
|
51
|
+
className: `gcsa-drawer__body${s ? " gcsa-drawer__body--titled" : ""}`,
|
|
52
|
+
children: m
|
|
53
53
|
}
|
|
54
54
|
),
|
|
55
|
-
|
|
55
|
+
o ? /* @__PURE__ */ r("div", { className: "gcsa-drawer__footer", children: o }) : null
|
|
56
56
|
]
|
|
57
57
|
}
|
|
58
58
|
)
|
|
59
59
|
}
|
|
60
60
|
)
|
|
61
|
-
] })
|
|
61
|
+
] }) })
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
64
|
}
|
|
65
65
|
export {
|
|
66
|
-
|
|
66
|
+
P as GcsaDrawer
|
|
67
67
|
};
|
|
68
68
|
//# sourceMappingURL=GcsaDrawer.js.map
|
package/dist/GcsaDrawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GcsaDrawer.js","sources":["../src/GcsaDrawer.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport type { GcsaDrawerPlacement } from '@gcsa/console-core';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';\nimport { usePreserveScrollOnFocus } from './hooks/usePreventHiddenInputScroll';\n\nexport type GcsaDrawerSize = 'default' | 'lg';\n\nexport type GcsaDrawerProps = {\n open: boolean;\n title?: string;\n closable?: boolean;\n placement?: GcsaDrawerPlacement;\n /** default=720px, lg=960px（复杂表单） */\n size?: GcsaDrawerSize;\n footer?: ReactNode;\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n};\n\nexport function GcsaDrawer({\n open,\n title,\n closable = true,\n placement = 'right',\n size = 'default',\n footer,\n onOpenChange,\n children\n}: GcsaDrawerProps) {\n const messages = useGcsaLocaleMessages();\n const
|
|
1
|
+
{"version":3,"file":"GcsaDrawer.js","sources":["../src/GcsaDrawer.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport type { GcsaDrawerPlacement } from '@gcsa/console-core';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';\nimport { useGcsaTheme } from './hooks/useGcsaTheme';\nimport { usePreserveScrollOnFocus } from './hooks/usePreventHiddenInputScroll';\n\nexport type GcsaDrawerSize = 'default' | 'lg';\n\nexport type GcsaDrawerProps = {\n open: boolean;\n title?: string;\n closable?: boolean;\n placement?: GcsaDrawerPlacement;\n /** default=720px, lg=960px（复杂表单） */\n size?: GcsaDrawerSize;\n footer?: ReactNode;\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n};\n\nexport function GcsaDrawer({\n open,\n title,\n closable = true,\n placement = 'right',\n size = 'default',\n footer,\n onOpenChange,\n children\n}: GcsaDrawerProps) {\n const messages = useGcsaLocaleMessages();\n const theme = useGcsaTheme();\n const bodyRef = usePreserveScrollOnFocus(open);\n const { portalZ } = useGcsaOverlayZIndex(open);\n const portalStyle = (portalZ == null ? undefined : { zIndex: portalZ }) as CSSProperties | undefined;\n const sizeClass = size === 'lg' ? ' gcsa-drawer__panel--size-lg' : '';\n\n return (\n <Dialog.Root\n open={open}\n lazyMount\n unmountOnExit\n onOpenChange={details => onOpenChange?.(details.open)}\n >\n <Portal>\n <div className=\"gcsa-portal-scope gcsa-modal-portal\" data-gcsa-theme={theme} style={portalStyle}>\n <Dialog.Backdrop className=\"gcsa-drawer__backdrop\" />\n <Dialog.Positioner\n className={`gcsa-drawer__positioner gcsa-drawer__positioner--${placement}`}\n >\n <Dialog.Content\n className={`gcsa-drawer__panel gcsa-ui-surface gcsa-drawer__panel--${placement}${sizeClass}`}\n >\n {closable ? (\n <Dialog.CloseTrigger className=\"gcsa-drawer__close\" aria-label={messages.close}>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M2 2l10 10M12 2L2 12\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n />\n </svg>\n </Dialog.CloseTrigger>\n ) : null}\n {title ? (\n <header className=\"gcsa-drawer__header\">\n <Dialog.Title asChild>\n <div className=\"gcsa-drawer__title\">{title}</div>\n </Dialog.Title>\n </header>\n ) : null}\n <div\n ref={bodyRef}\n className={`gcsa-drawer__body${title ? ' gcsa-drawer__body--titled' : ''}`}\n >\n {children}\n </div>\n {footer ? <div className=\"gcsa-drawer__footer\">{footer}</div> : null}\n </Dialog.Content>\n </Dialog.Positioner>\n </div>\n </Portal>\n </Dialog.Root>\n );\n}\n"],"names":["GcsaDrawer","open","title","closable","placement","size","footer","onOpenChange","children","messages","useGcsaLocaleMessages","theme","useGcsaTheme","bodyRef","usePreserveScrollOnFocus","portalZ","useGcsaOverlayZIndex","portalStyle","sizeClass","jsx","Dialog","details","Portal","jsxs"],"mappings":";;;;;;;AAuBO,SAASA,EAAW;AAAA,EACzB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,GAAoB;AAClB,QAAMC,IAAWC,EAAA,GACXC,IAAQC,EAAA,GACRC,IAAUC,EAAyBb,CAAI,GACvC,EAAE,SAAAc,EAAA,IAAYC,EAAqBf,CAAI,GACvCgB,IAAeF,KAAW,OAAO,SAAY,EAAE,QAAQA,EAAA,GACvDG,IAAYb,MAAS,OAAO,iCAAiC;AAEnE,SACE,gBAAAc;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,MAAAnB;AAAA,MACA,WAAS;AAAA,MACT,eAAa;AAAA,MACb,cAAc,CAAAoB,MAAWd,KAAA,gBAAAA,EAAec,EAAQ;AAAA,MAEhD,UAAA,gBAAAF,EAACG,KACC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,uCAAsC,mBAAiBZ,GAAO,OAAOM,GAClF,UAAA;AAAA,QAAA,gBAAAE,EAACC,EAAO,UAAP,EAAgB,WAAU,wBAAA,CAAwB;AAAA,QACnD,gBAAAD;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAW,oDAAoDhB,CAAS;AAAA,YAE1E,UAAA,gBAAAmB;AAAA,cAACH,EAAO;AAAA,cAAP;AAAA,gBACC,WAAW,0DAA0DhB,CAAS,GAAGc,CAAS;AAAA,gBAEzF,UAAA;AAAA,kBAAAf,IACC,gBAAAgB,EAACC,EAAO,cAAP,EAAoB,WAAU,sBAAqB,cAAYX,EAAS,OACvE,UAAA,gBAAAU,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,UAAA,gBAAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,GAAE;AAAA,sBACF,QAAO;AAAA,sBACP,aAAY;AAAA,sBACZ,eAAc;AAAA,oBAAA;AAAA,kBAAA,EAChB,CACF,GACF,IACE;AAAA,kBACHjB,IACC,gBAAAiB,EAAC,UAAA,EAAO,WAAU,uBAChB,UAAA,gBAAAA,EAACC,EAAO,OAAP,EAAa,SAAO,IACnB,4BAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAlB,EAAA,CAAM,GAC7C,GACF,IACE;AAAA,kBACJ,gBAAAiB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAKN;AAAA,sBACL,WAAW,oBAAoBX,IAAQ,+BAA+B,EAAE;AAAA,sBAEvE,UAAAM;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEFF,IAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,uBAAuB,aAAO,IAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAClE;AAAA,QAAA;AAAA,MACF,EAAA,CACA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
package/dist/GcsaModal.js
CHANGED
|
@@ -1,28 +1,29 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { Dialog as
|
|
3
|
-
import { Portal as
|
|
4
|
-
import { useGcsaLocaleMessages as
|
|
5
|
-
import { useGcsaOverlayZIndex as
|
|
1
|
+
import { jsx as a, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
import { Dialog as e } from "@ark-ui/react/dialog";
|
|
3
|
+
import { Portal as _ } from "@ark-ui/react/portal";
|
|
4
|
+
import { useGcsaLocaleMessages as g } from "./hooks/useGcsaLocale.js";
|
|
5
|
+
import { useGcsaOverlayZIndex as p } from "./hooks/useOverlayZIndex.js";
|
|
6
|
+
import { useGcsaTheme as f } from "./hooks/useGcsaTheme.js";
|
|
6
7
|
function b({
|
|
7
8
|
open: o,
|
|
8
|
-
title:
|
|
9
|
-
closable:
|
|
9
|
+
title: s,
|
|
10
|
+
closable: d = !0,
|
|
10
11
|
footer: r,
|
|
11
|
-
onOpenChange:
|
|
12
|
-
children:
|
|
12
|
+
onOpenChange: l,
|
|
13
|
+
children: i
|
|
13
14
|
}) {
|
|
14
|
-
const m =
|
|
15
|
-
return /* @__PURE__ */
|
|
16
|
-
|
|
15
|
+
const m = g(), n = f(), { portalZ: c } = p(o), u = c == null ? void 0 : { zIndex: c };
|
|
16
|
+
return /* @__PURE__ */ a(
|
|
17
|
+
e.Root,
|
|
17
18
|
{
|
|
18
19
|
open: o,
|
|
19
20
|
lazyMount: !0,
|
|
20
21
|
unmountOnExit: !0,
|
|
21
|
-
onOpenChange: (h) =>
|
|
22
|
-
children: /* @__PURE__ */
|
|
23
|
-
/* @__PURE__ */ e
|
|
24
|
-
/* @__PURE__ */ e
|
|
25
|
-
|
|
22
|
+
onOpenChange: (h) => l == null ? void 0 : l(h.open),
|
|
23
|
+
children: /* @__PURE__ */ a(_, { children: /* @__PURE__ */ t("div", { className: "gcsa-portal-scope gcsa-modal-portal", "data-gcsa-theme": n, style: u, children: [
|
|
24
|
+
/* @__PURE__ */ a(e.Backdrop, { className: "gcsa-modal__backdrop" }),
|
|
25
|
+
/* @__PURE__ */ a(e.Positioner, { className: "gcsa-modal__positioner", children: /* @__PURE__ */ t(e.Content, { className: "gcsa-modal__panel gcsa-ui-surface", children: [
|
|
26
|
+
d ? /* @__PURE__ */ a(e.CloseTrigger, { className: "gcsa-modal__close", "aria-label": m.close, children: /* @__PURE__ */ a("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ a(
|
|
26
27
|
"path",
|
|
27
28
|
{
|
|
28
29
|
d: "M2 2l10 10M12 2L2 12",
|
|
@@ -31,11 +32,11 @@ function b({
|
|
|
31
32
|
strokeLinecap: "round"
|
|
32
33
|
}
|
|
33
34
|
) }) }) : null,
|
|
34
|
-
|
|
35
|
-
/* @__PURE__ */
|
|
36
|
-
r ? /* @__PURE__ */
|
|
35
|
+
s ? /* @__PURE__ */ a("header", { className: "gcsa-modal__header", children: /* @__PURE__ */ a(e.Title, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "gcsa-modal__title", children: s }) }) }) : null,
|
|
36
|
+
/* @__PURE__ */ a("div", { className: `gcsa-modal__body${s ? " gcsa-modal__body--titled" : ""}`, children: i }),
|
|
37
|
+
r ? /* @__PURE__ */ a("div", { className: "gcsa-modal__footer", children: r }) : null
|
|
37
38
|
] }) })
|
|
38
|
-
] })
|
|
39
|
+
] }) })
|
|
39
40
|
}
|
|
40
41
|
);
|
|
41
42
|
}
|
package/dist/GcsaModal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GcsaModal.js","sources":["../src/GcsaModal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';\n\nexport type GcsaModalProps = {\n open: boolean;\n title?: string;\n closable?: boolean;\n footer?: ReactNode;\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n};\n\nexport function GcsaModal({\n open,\n title,\n closable = true,\n footer,\n onOpenChange,\n children\n}: GcsaModalProps) {\n const messages = useGcsaLocaleMessages();\n const
|
|
1
|
+
{"version":3,"file":"GcsaModal.js","sources":["../src/GcsaModal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';\nimport { useGcsaTheme } from './hooks/useGcsaTheme';\n\nexport type GcsaModalProps = {\n open: boolean;\n title?: string;\n closable?: boolean;\n footer?: ReactNode;\n onOpenChange?: (open: boolean) => void;\n children?: ReactNode;\n};\n\nexport function GcsaModal({\n open,\n title,\n closable = true,\n footer,\n onOpenChange,\n children\n}: GcsaModalProps) {\n const messages = useGcsaLocaleMessages();\n const theme = useGcsaTheme();\n const { portalZ } = useGcsaOverlayZIndex(open);\n const portalStyle = (portalZ == null ? undefined : { zIndex: portalZ }) as CSSProperties | undefined;\n\n return (\n <Dialog.Root\n open={open}\n lazyMount\n unmountOnExit\n onOpenChange={details => onOpenChange?.(details.open)}\n >\n <Portal>\n <div className=\"gcsa-portal-scope gcsa-modal-portal\" data-gcsa-theme={theme} style={portalStyle}>\n <Dialog.Backdrop className=\"gcsa-modal__backdrop\" />\n <Dialog.Positioner className=\"gcsa-modal__positioner\">\n <Dialog.Content className=\"gcsa-modal__panel gcsa-ui-surface\">\n {closable ? (\n <Dialog.CloseTrigger className=\"gcsa-modal__close\" aria-label={messages.close}>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n <path\n d=\"M2 2l10 10M12 2L2 12\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n />\n </svg>\n </Dialog.CloseTrigger>\n ) : null}\n {title ? (\n <header className=\"gcsa-modal__header\">\n <Dialog.Title asChild>\n <div className=\"gcsa-modal__title\">{title}</div>\n </Dialog.Title>\n </header>\n ) : null}\n <div className={`gcsa-modal__body${title ? ' gcsa-modal__body--titled' : ''}`}>\n {children}\n </div>\n {footer ? <div className=\"gcsa-modal__footer\">{footer}</div> : null}\n </Dialog.Content>\n </Dialog.Positioner>\n </div>\n </Portal>\n </Dialog.Root>\n );\n}\n"],"names":["GcsaModal","open","title","closable","footer","onOpenChange","children","messages","useGcsaLocaleMessages","theme","useGcsaTheme","portalZ","useGcsaOverlayZIndex","portalStyle","jsx","Dialog","details","Portal","jsxs"],"mappings":";;;;;;AAgBO,SAASA,EAAU;AAAA,EACxB,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,GAAmB;AACjB,QAAMC,IAAWC,EAAA,GACXC,IAAQC,EAAA,GACR,EAAE,SAAAC,EAAA,IAAYC,EAAqBX,CAAI,GACvCY,IAAeF,KAAW,OAAO,SAAY,EAAE,QAAQA,EAAA;AAE7D,SACE,gBAAAG;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,MAAAd;AAAA,MACA,WAAS;AAAA,MACT,eAAa;AAAA,MACb,cAAc,CAAAe,MAAWX,KAAA,gBAAAA,EAAeW,EAAQ;AAAA,MAEhD,UAAA,gBAAAF,EAACG,KACC,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,uCAAsC,mBAAiBT,GAAO,OAAOI,GAClF,UAAA;AAAA,QAAA,gBAAAC,EAACC,EAAO,UAAP,EAAgB,WAAU,uBAAA,CAAuB;AAAA,QAClD,gBAAAD,EAACC,EAAO,YAAP,EAAkB,WAAU,0BAC3B,UAAA,gBAAAG,EAACH,EAAO,SAAP,EAAe,WAAU,qCACvB,UAAA;AAAA,UAAAZ,IACC,gBAAAW,EAACC,EAAO,cAAP,EAAoB,WAAU,qBAAoB,cAAYR,EAAS,OACtE,UAAA,gBAAAO,EAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACtE,UAAA,gBAAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,GAAE;AAAA,cACF,QAAO;AAAA,cACP,aAAY;AAAA,cACZ,eAAc;AAAA,YAAA;AAAA,UAAA,EAChB,CACF,GACF,IACE;AAAA,UACHZ,IACC,gBAAAY,EAAC,UAAA,EAAO,WAAU,sBAChB,UAAA,gBAAAA,EAACC,EAAO,OAAP,EAAa,SAAO,IACnB,4BAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAb,EAAA,CAAM,GAC5C,GACF,IACE;AAAA,UACJ,gBAAAY,EAAC,SAAI,WAAW,mBAAmBZ,IAAQ,8BAA8B,EAAE,IACxE,UAAAI,GACH;AAAA,UACCF,IAAS,gBAAAU,EAAC,OAAA,EAAI,WAAU,sBAAsB,aAAO,IAAS;AAAA,QAAA,EAAA,CACjE,EAAA,CACF;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Modal / Drawer：仅在 open 变为 true 时分配
|
|
2
|
+
* Modal / Drawer：仅在 open 变为 true 时分配 portal 层 z-index（与 Vue watch(open) 一致）。
|
|
3
3
|
* 打开期间父组件重渲染不得再次 claim，否则会盖住内部后打开的 Select/Dropdown。
|
|
4
4
|
*/
|
|
5
5
|
export declare function useGcsaOverlayZIndex(open: boolean): {
|
|
6
|
-
|
|
7
|
-
positionerZ: number | undefined;
|
|
6
|
+
portalZ: number | undefined;
|
|
8
7
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useRef as
|
|
2
|
-
import { useGcsaZIndex as
|
|
3
|
-
function
|
|
4
|
-
const { nextZIndex:
|
|
5
|
-
|
|
6
|
-
const [
|
|
7
|
-
return
|
|
8
|
-
|
|
9
|
-
}, [
|
|
1
|
+
import { useRef as o, useState as u, useEffect as c } from "react";
|
|
2
|
+
import { useGcsaZIndex as f } from "./useGcsaZIndex.js";
|
|
3
|
+
function Z(e) {
|
|
4
|
+
const { nextZIndex: t } = f(), r = o(t);
|
|
5
|
+
r.current = t;
|
|
6
|
+
const [n, s] = u();
|
|
7
|
+
return c(() => {
|
|
8
|
+
e && s(r.current());
|
|
9
|
+
}, [e]), { portalZ: n };
|
|
10
10
|
}
|
|
11
11
|
export {
|
|
12
|
-
|
|
12
|
+
Z as useGcsaOverlayZIndex
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=useOverlayZIndex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlayZIndex.js","sources":["../../src/hooks/useOverlayZIndex.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useGcsaZIndex } from './useGcsaZIndex';\n\n/**\n * Modal / Drawer：仅在 open 变为 true 时分配
|
|
1
|
+
{"version":3,"file":"useOverlayZIndex.js","sources":["../../src/hooks/useOverlayZIndex.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useGcsaZIndex } from './useGcsaZIndex';\n\n/**\n * Modal / Drawer：仅在 open 变为 true 时分配 portal 层 z-index（与 Vue watch(open) 一致）。\n * 打开期间父组件重渲染不得再次 claim，否则会盖住内部后打开的 Select/Dropdown。\n */\nexport function useGcsaOverlayZIndex(open: boolean) {\n const { nextZIndex } = useGcsaZIndex();\n const nextZIndexRef = useRef(nextZIndex);\n nextZIndexRef.current = nextZIndex;\n\n const [portalZ, setPortalZ] = useState<number>();\n\n useEffect(() => {\n if (!open) return;\n setPortalZ(nextZIndexRef.current());\n }, [open]);\n\n return { portalZ };\n}\n"],"names":["useGcsaOverlayZIndex","open","nextZIndex","useGcsaZIndex","nextZIndexRef","useRef","portalZ","setPortalZ","useState","useEffect"],"mappings":";;AAOO,SAASA,EAAqBC,GAAe;AAClD,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA,GACjBC,IAAgBC,EAAOH,CAAU;AACvC,EAAAE,EAAc,UAAUF;AAExB,QAAM,CAACI,GAASC,CAAU,IAAIC,EAAA;AAE9B,SAAAC,EAAU,MAAM;AACd,IAAKR,KACLM,EAAWH,EAAc,SAAS;AAAA,EACpC,GAAG,CAACH,CAAI,CAAC,GAEF,EAAE,SAAAK,EAAA;AACX;"}
|
package/dist/style.css
CHANGED
|
@@ -1087,6 +1087,9 @@
|
|
|
1087
1087
|
}
|
|
1088
1088
|
|
|
1089
1089
|
.gcsa-table-wrap {
|
|
1090
|
+
position: relative;
|
|
1091
|
+
z-index: 0;
|
|
1092
|
+
isolation: isolate;
|
|
1090
1093
|
overflow-x: auto;
|
|
1091
1094
|
border: 1px solid var(--gcsa-color-border-subtle);
|
|
1092
1095
|
border-radius: var(--gcsa-radius-md);
|
|
@@ -3363,6 +3366,8 @@
|
|
|
3363
3366
|
.gcsa-modal-portal {
|
|
3364
3367
|
position: fixed;
|
|
3365
3368
|
inset: 0;
|
|
3369
|
+
z-index: var(--gcsa-z-modal);
|
|
3370
|
+
isolation: isolate;
|
|
3366
3371
|
pointer-events: none;
|
|
3367
3372
|
}
|
|
3368
3373
|
|
|
@@ -3370,7 +3375,7 @@
|
|
|
3370
3375
|
position: fixed;
|
|
3371
3376
|
inset: 0;
|
|
3372
3377
|
background: var(--gcsa-color-scrim);
|
|
3373
|
-
z-index:
|
|
3378
|
+
z-index: 0;
|
|
3374
3379
|
animation-duration: var(--gcsa-motion-modal);
|
|
3375
3380
|
animation-timing-function: var(--gcsa-ease-modal);
|
|
3376
3381
|
animation-fill-mode: both;
|
|
@@ -3393,7 +3398,7 @@
|
|
|
3393
3398
|
.gcsa-modal__positioner {
|
|
3394
3399
|
position: fixed;
|
|
3395
3400
|
inset: 0;
|
|
3396
|
-
z-index:
|
|
3401
|
+
z-index: 1;
|
|
3397
3402
|
display: flex;
|
|
3398
3403
|
align-items: center;
|
|
3399
3404
|
justify-content: center;
|
|
@@ -3612,7 +3617,7 @@
|
|
|
3612
3617
|
position: fixed;
|
|
3613
3618
|
inset: 0;
|
|
3614
3619
|
background: var(--gcsa-color-scrim);
|
|
3615
|
-
z-index:
|
|
3620
|
+
z-index: 0;
|
|
3616
3621
|
animation-duration: var(--gcsa-motion-modal);
|
|
3617
3622
|
animation-timing-function: var(--gcsa-ease-modal);
|
|
3618
3623
|
animation-fill-mode: both;
|
|
@@ -3635,7 +3640,7 @@
|
|
|
3635
3640
|
.gcsa-drawer__positioner {
|
|
3636
3641
|
position: fixed;
|
|
3637
3642
|
inset: 0;
|
|
3638
|
-
z-index:
|
|
3643
|
+
z-index: 1;
|
|
3639
3644
|
display: flex;
|
|
3640
3645
|
pointer-events: none;
|
|
3641
3646
|
}
|
|
@@ -3938,6 +3943,29 @@
|
|
|
3938
3943
|
justify-content: flex-end;
|
|
3939
3944
|
}
|
|
3940
3945
|
|
|
3946
|
+
/* Side nav drawer — panel flush to viewport; inner shell supplies content inset */
|
|
3947
|
+
.gcsa-drawer-nav.gcsa-drawer__panel {
|
|
3948
|
+
height: 100dvh;
|
|
3949
|
+
min-height: 100dvh;
|
|
3950
|
+
max-height: 100dvh;
|
|
3951
|
+
}
|
|
3952
|
+
|
|
3953
|
+
.gcsa-drawer-nav.gcsa-drawer__panel--left,
|
|
3954
|
+
.gcsa-drawer-nav.gcsa-drawer__panel--right {
|
|
3955
|
+
width: min(var(--gcsa-drawer-nav-width, var(--gcsa-drawer-width, 280px)), 100%);
|
|
3956
|
+
max-width: 100%;
|
|
3957
|
+
}
|
|
3958
|
+
|
|
3959
|
+
.gcsa-drawer-nav.gcsa-drawer__panel > .gcsa-drawer__body {
|
|
3960
|
+
display: flex;
|
|
3961
|
+
flex-direction: column;
|
|
3962
|
+
height: 100%;
|
|
3963
|
+
min-height: 0;
|
|
3964
|
+
padding: 0;
|
|
3965
|
+
overflow: hidden;
|
|
3966
|
+
background: transparent;
|
|
3967
|
+
}
|
|
3968
|
+
|
|
3941
3969
|
.gcsa-tabs {
|
|
3942
3970
|
color: var(--gcsa-color-text);
|
|
3943
3971
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gcsa/console-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "GCSA console UI — React components (Ark UI + TanStack + GCSA styles)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"@tanstack/react-form": "^1.12.2",
|
|
35
35
|
"@tanstack/react-table": "^8.21.3",
|
|
36
36
|
"zod": "^3.24.4",
|
|
37
|
-
"@gcsa/console-
|
|
38
|
-
"@gcsa/console-
|
|
37
|
+
"@gcsa/console-styles": "0.1.5",
|
|
38
|
+
"@gcsa/console-core": "0.1.5"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "^18.0.0 || ^19.0.0",
|
package/src/GcsaDrawer.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import { Dialog } from '@ark-ui/react/dialog';
|
|
|
4
4
|
import { Portal } from '@ark-ui/react/portal';
|
|
5
5
|
import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
|
|
6
6
|
import { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';
|
|
7
|
+
import { useGcsaTheme } from './hooks/useGcsaTheme';
|
|
7
8
|
import { usePreserveScrollOnFocus } from './hooks/usePreventHiddenInputScroll';
|
|
8
9
|
|
|
9
10
|
export type GcsaDrawerSize = 'default' | 'lg';
|
|
@@ -31,10 +32,10 @@ export function GcsaDrawer({
|
|
|
31
32
|
children
|
|
32
33
|
}: GcsaDrawerProps) {
|
|
33
34
|
const messages = useGcsaLocaleMessages();
|
|
35
|
+
const theme = useGcsaTheme();
|
|
34
36
|
const bodyRef = usePreserveScrollOnFocus(open);
|
|
35
|
-
const {
|
|
36
|
-
const
|
|
37
|
-
const positionerStyle = (positionerZ == null ? undefined : { zIndex: positionerZ }) as CSSProperties | undefined;
|
|
37
|
+
const { portalZ } = useGcsaOverlayZIndex(open);
|
|
38
|
+
const portalStyle = (portalZ == null ? undefined : { zIndex: portalZ }) as CSSProperties | undefined;
|
|
38
39
|
const sizeClass = size === 'lg' ? ' gcsa-drawer__panel--size-lg' : '';
|
|
39
40
|
|
|
40
41
|
return (
|
|
@@ -45,11 +46,11 @@ export function GcsaDrawer({
|
|
|
45
46
|
onOpenChange={details => onOpenChange?.(details.open)}
|
|
46
47
|
>
|
|
47
48
|
<Portal>
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
<div className="gcsa-portal-scope gcsa-modal-portal" data-gcsa-theme={theme} style={portalStyle}>
|
|
50
|
+
<Dialog.Backdrop className="gcsa-drawer__backdrop" />
|
|
51
|
+
<Dialog.Positioner
|
|
52
|
+
className={`gcsa-drawer__positioner gcsa-drawer__positioner--${placement}`}
|
|
53
|
+
>
|
|
53
54
|
<Dialog.Content
|
|
54
55
|
className={`gcsa-drawer__panel gcsa-ui-surface gcsa-drawer__panel--${placement}${sizeClass}`}
|
|
55
56
|
>
|
|
@@ -81,6 +82,7 @@ export function GcsaDrawer({
|
|
|
81
82
|
{footer ? <div className="gcsa-drawer__footer">{footer}</div> : null}
|
|
82
83
|
</Dialog.Content>
|
|
83
84
|
</Dialog.Positioner>
|
|
85
|
+
</div>
|
|
84
86
|
</Portal>
|
|
85
87
|
</Dialog.Root>
|
|
86
88
|
);
|
package/src/GcsaModal.tsx
CHANGED
|
@@ -3,6 +3,7 @@ import { Dialog } from '@ark-ui/react/dialog';
|
|
|
3
3
|
import { Portal } from '@ark-ui/react/portal';
|
|
4
4
|
import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
|
|
5
5
|
import { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';
|
|
6
|
+
import { useGcsaTheme } from './hooks/useGcsaTheme';
|
|
6
7
|
|
|
7
8
|
export type GcsaModalProps = {
|
|
8
9
|
open: boolean;
|
|
@@ -22,9 +23,9 @@ export function GcsaModal({
|
|
|
22
23
|
children
|
|
23
24
|
}: GcsaModalProps) {
|
|
24
25
|
const messages = useGcsaLocaleMessages();
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
26
|
+
const theme = useGcsaTheme();
|
|
27
|
+
const { portalZ } = useGcsaOverlayZIndex(open);
|
|
28
|
+
const portalStyle = (portalZ == null ? undefined : { zIndex: portalZ }) as CSSProperties | undefined;
|
|
28
29
|
|
|
29
30
|
return (
|
|
30
31
|
<Dialog.Root
|
|
@@ -34,34 +35,36 @@ export function GcsaModal({
|
|
|
34
35
|
onOpenChange={details => onOpenChange?.(details.open)}
|
|
35
36
|
>
|
|
36
37
|
<Portal>
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
<Dialog.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
38
|
+
<div className="gcsa-portal-scope gcsa-modal-portal" data-gcsa-theme={theme} style={portalStyle}>
|
|
39
|
+
<Dialog.Backdrop className="gcsa-modal__backdrop" />
|
|
40
|
+
<Dialog.Positioner className="gcsa-modal__positioner">
|
|
41
|
+
<Dialog.Content className="gcsa-modal__panel gcsa-ui-surface">
|
|
42
|
+
{closable ? (
|
|
43
|
+
<Dialog.CloseTrigger className="gcsa-modal__close" aria-label={messages.close}>
|
|
44
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
|
|
45
|
+
<path
|
|
46
|
+
d="M2 2l10 10M12 2L2 12"
|
|
47
|
+
stroke="currentColor"
|
|
48
|
+
strokeWidth="1.5"
|
|
49
|
+
strokeLinecap="round"
|
|
50
|
+
/>
|
|
51
|
+
</svg>
|
|
52
|
+
</Dialog.CloseTrigger>
|
|
53
|
+
) : null}
|
|
54
|
+
{title ? (
|
|
55
|
+
<header className="gcsa-modal__header">
|
|
56
|
+
<Dialog.Title asChild>
|
|
57
|
+
<div className="gcsa-modal__title">{title}</div>
|
|
58
|
+
</Dialog.Title>
|
|
59
|
+
</header>
|
|
60
|
+
) : null}
|
|
61
|
+
<div className={`gcsa-modal__body${title ? ' gcsa-modal__body--titled' : ''}`}>
|
|
62
|
+
{children}
|
|
63
|
+
</div>
|
|
64
|
+
{footer ? <div className="gcsa-modal__footer">{footer}</div> : null}
|
|
65
|
+
</Dialog.Content>
|
|
66
|
+
</Dialog.Positioner>
|
|
67
|
+
</div>
|
|
65
68
|
</Portal>
|
|
66
69
|
</Dialog.Root>
|
|
67
70
|
);
|
|
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
import { useGcsaZIndex } from './useGcsaZIndex';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
* Modal / Drawer：仅在 open 变为 true 时分配
|
|
5
|
+
* Modal / Drawer：仅在 open 变为 true 时分配 portal 层 z-index（与 Vue watch(open) 一致）。
|
|
6
6
|
* 打开期间父组件重渲染不得再次 claim，否则会盖住内部后打开的 Select/Dropdown。
|
|
7
7
|
*/
|
|
8
8
|
export function useGcsaOverlayZIndex(open: boolean) {
|
|
@@ -10,14 +10,12 @@ export function useGcsaOverlayZIndex(open: boolean) {
|
|
|
10
10
|
const nextZIndexRef = useRef(nextZIndex);
|
|
11
11
|
nextZIndexRef.current = nextZIndex;
|
|
12
12
|
|
|
13
|
-
const [
|
|
14
|
-
const [positionerZ, setPositionerZ] = useState<number>();
|
|
13
|
+
const [portalZ, setPortalZ] = useState<number>();
|
|
15
14
|
|
|
16
15
|
useEffect(() => {
|
|
17
16
|
if (!open) return;
|
|
18
|
-
|
|
19
|
-
setPositionerZ(nextZIndexRef.current());
|
|
17
|
+
setPortalZ(nextZIndexRef.current());
|
|
20
18
|
}, [open]);
|
|
21
19
|
|
|
22
|
-
return {
|
|
20
|
+
return { portalZ };
|
|
23
21
|
}
|