@gcsa/console-react 0.1.3 → 0.1.5

package/dist/GcsaConfigProvider.js

@@ -1,61 +1,63 @@
-import { jsx as e, jsxs as R } from "react/jsx-runtime";
-import { useContext as n, useState as l, useRef as b, useMemo as _, useEffect as i } from "react";
-import { createPortal as j } from "react-dom";
-import { GCSA_MESSAGE_DURATION_MS as k } from "@gcsa/console-core";
-import { GcsaConfigProviderContext as p, GcsaMessageContext as L, GcsaThemeContext as O } from "./hooks/useGcsaTheme.js";
-import { GcsaLocaleContext as U } from "./hooks/useGcsaLocale.js";
-import { GcsaRestoreDocumentThemeContext as q } from "./hooks/useDocumentThemeSync.js";
-import { GcsaToastStack as w } from "./GcsaToastStack.js";
-import { GcsaZIndexContext as x, readToastZIndex as v, createGcsaZIndexApi as B } from "./hooks/useGcsaZIndex.js";
+import { jsx as e, jsxs as _ } from "react/jsx-runtime";
+import { useContext as n, useState as d, useRef as j, useMemo as k, useEffect as s } from "react";
+import { createPortal as L } from "react-dom";
+import { GCSA_MESSAGE_DURATION_MS as O } from "@gcsa/console-core";
+import { GcsaConfigProviderContext as p, GcsaMessageContext as U, GcsaThemeContext as q } from "./hooks/useGcsaTheme.js";
+import { GcsaLocaleContext as w } from "./hooks/useGcsaLocale.js";
+import { GcsaRestoreDocumentThemeContext as B } from "./hooks/useDocumentThemeSync.js";
+import { GcsaToastStack as F } from "./GcsaToastStack.js";
+import { GcsaZIndexContext as x, readToastZIndex as v, createGcsaZIndexApi as H } from "./hooks/useGcsaZIndex.js";
 import { GcsaComponentSizeContext as h } from "./hooks/useGcsaComponentSize.js";
-function ee({
+function oe({
   theme: o = "dark",
   locale: C = "zh-CN",
   syncDocument: G = !0,
-  size: g,
-  children: I
+  size: P,
+  children: g
 }) {
-  const P = n(p), d = n(x), S = n(h), s = n(q), [T, u] = l([]), [A, Z] = l(() => v()), y = b(0), z = _(
-    () => d ?? B(),
-    [d]
-  ), r = !P && G, E = g ?? S ?? "md", m = () => {
+  const I = n(p), u = n(x), S = n(h), c = n(B), [T, m] = d([]), [A, Z] = d(() => v()), [z, M] = d(!1), y = j(0), E = k(
+    () => u ?? H(),
+    [u]
+  ), r = !I && G, D = P ?? S ?? "md", l = () => {
     Z(v());
-  }, c = (t, M) => {
-    m();
+  }, a = (t, R) => {
+    l();
     const f = ++y.current;
-    u((a) => [...a, { id: f, message: t, type: M }].slice(-4)), setTimeout(() => {
-      u((a) => a.filter((N) => N.id !== f));
-    }, k);
-  }, D = {
-    success: (t) => c(t, "success"),
-    error: (t) => c(t, "error"),
-    info: (t) => c(t, "info")
+    m((i) => [...i, { id: f, message: t, type: R }].slice(-4)), setTimeout(() => {
+      m((i) => i.filter((b) => b.id !== f));
+    }, O);
+  }, N = {
+    success: (t) => a(t, "success"),
+    error: (t) => a(t, "error"),
+    info: (t) => a(t, "info")
   };
-  return i(() => {
+  return s(() => {
     !r || typeof document > "u" || document.documentElement.setAttribute("data-gcsa-theme", o);
-  }, [o, r]), i(() => {
-    m();
-  }, []), i(() => {
+  }, [o, r]), s(() => {
+    l();
+  }, []), s(() => {
+    M(!0);
+  }, []), s(() => {
     if (r)
       return () => {
         if (!(typeof document > "u")) {
-          if (s) {
-            s();
+          if (c) {
+            c();
             return;
           }
           document.documentElement.removeAttribute("data-gcsa-theme");
         }
       };
-  }, [r, s]), /* @__PURE__ */ e(p.Provider, { value: !0, children: /* @__PURE__ */ e(x.Provider, { value: z, children: /* @__PURE__ */ e(h.Provider, { value: E, children: /* @__PURE__ */ e(L.Provider, { value: D, children: /* @__PURE__ */ e(O.Provider, { value: o, children: /* @__PURE__ */ R(U.Provider, { value: C, children: [
-    /* @__PURE__ */ e("div", { className: "gcsa-console-root", "data-gcsa-theme": o, children: I }),
-    typeof document < "u" ? j(
+  }, [r, c]), /* @__PURE__ */ e(p.Provider, { value: !0, children: /* @__PURE__ */ e(x.Provider, { value: E, children: /* @__PURE__ */ e(h.Provider, { value: D, children: /* @__PURE__ */ e(U.Provider, { value: N, children: /* @__PURE__ */ e(q.Provider, { value: o, children: /* @__PURE__ */ _(w.Provider, { value: C, children: [
+    /* @__PURE__ */ e("div", { className: "gcsa-console-root", "data-gcsa-theme": o, children: g }),
+    z ? L(
       /* @__PURE__ */ e(
         "div",
         {
           className: "gcsa-portal-scope gcsa-toast-portal",
           "data-gcsa-theme": o,
           style: { zIndex: A },
-          children: /* @__PURE__ */ e(w, { toasts: T })
+          children: /* @__PURE__ */ e(F, { toasts: T })
         }
       ),
       document.body
@@ -63,6 +65,6 @@ function ee({
   ] }) }) }) }) }) });
 }
 export {
-  ee as GcsaConfigProvider
+  oe as GcsaConfigProvider
 };
 //# sourceMappingURL=GcsaConfigProvider.js.map

package/dist/GcsaConfigProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"GcsaConfigProvider.js","sources":["../src/GcsaConfigProvider.tsx"],"sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { GcsaConsoleTheme, GcsaConsoleLocale, GcsaMessageType, GcsaComponentSize } from '@gcsa/console-core';\nimport { GCSA_MESSAGE_DURATION_MS } from '@gcsa/console-core';\nimport {\n  GcsaConfigProviderContext,\n  GcsaMessageContext,\n  GcsaThemeContext\n} from './hooks/useGcsaTheme';\nimport type { GcsaMessageApi } from './hooks/useMessage';\nimport { GcsaLocaleContext } from './hooks/useGcsaLocale';\nimport { GcsaRestoreDocumentThemeContext } from './hooks/useDocumentThemeSync';\nimport { GcsaToastStack } from './GcsaToastStack';\nimport { GcsaZIndexContext, createGcsaZIndexApi, readToastZIndex } from './hooks/useGcsaZIndex';\nimport { GcsaComponentSizeContext } from './hooks/useGcsaComponentSize';\n\nexport type GcsaConfigProviderProps = {\n  theme?: GcsaConsoleTheme;\n  /** 界面语言（zh-CN / zh-TW / en-US） */\n  locale?: GcsaConsoleLocale;\n  /** 是否同步到 document（Portal 浮层）。文档站 demo 应关闭，由 VitePress 全局同步。 */\n  syncDocument?: boolean;\n  /** 全局控件尺寸（Button / Select / InputGroup / Switch / Table 等） */\n  size?: GcsaComponentSize;\n  children: ReactNode;\n};\n\nexport function GcsaConfigProvider({\n  theme = 'dark',\n  locale = 'zh-CN',\n  syncDocument = true,\n  size,\n  children\n}: GcsaConfigProviderProps) {\n  const parentProvider = useContext(GcsaConfigProviderContext);\n  const parentZIndexApi = useContext(GcsaZIndexContext);\n  const parentSize = useContext(GcsaComponentSizeContext);\n  const restoreDocumentTheme = useContext(GcsaRestoreDocumentThemeContext);\n  const [toasts, setToasts] = useState<Array<{ id: number; message: string; type: GcsaMessageType }>>([]);\n  const [toastZIndex, setToastZIndex] = useState<number>(() => readToastZIndex());\n  const idRef = useRef(0);\n  const MAX_TOASTS = 4;\n\n  const zIndexApi = useMemo(\n    () => parentZIndexApi ?? createGcsaZIndexApi(),\n    [parentZIndexApi]\n  );\n\n  const shouldSyncDocument = !parentProvider && syncDocument;\n  const resolvedSize = size ?? parentSize ?? 'md';\n\n  const refreshToastZIndex = () => {\n    setToastZIndex(readToastZIndex());\n  };\n\n  const push = (message: string, type: GcsaMessageType) => {\n    refreshToastZIndex();\n    const current = ++idRef.current;\n    setToasts(prev => [...prev, { id: current, message, type }].slice(-MAX_TOASTS));\n    setTimeout(() => {\n      setToasts(prev => prev.filter(t => t.id !== current));\n    }, GCSA_MESSAGE_DURATION_MS);\n  };\n\n  const api: GcsaMessageApi = {\n    success: message => push(message, 'success'),\n    error: message => push(message, 'error'),\n    info: message => push(message, 'info')\n  };\n\n  useEffect(() => {\n    if (!shouldSyncDocument || typeof document === 'undefined') return;\n    document.documentElement.setAttribute('data-gcsa-theme', theme);\n  }, [theme, shouldSyncDocument]);\n\n  useEffect(() => {\n    refreshToastZIndex();\n  }, []);\n\n  useEffect(() => {\n    if (!shouldSyncDocument) return;\n    return () => {\n      if (typeof document === 'undefined') return;\n      if (restoreDocumentTheme) {\n        restoreDocumentTheme();\n        return;\n      }\n      document.documentElement.removeAttribute('data-gcsa-theme');\n    };\n  }, [shouldSyncDocument, restoreDocumentTheme]);\n\n  return (\n    <GcsaConfigProviderContext.Provider value={true}>\n      <GcsaZIndexContext.Provider value={zIndexApi}>\n        <GcsaComponentSizeContext.Provider value={resolvedSize}>\n          <GcsaMessageContext.Provider value={api}>\n            <GcsaThemeContext.Provider value={theme}>\n              <GcsaLocaleContext.Provider value={locale}>\n                <div className=\"gcsa-console-root\" data-gcsa-theme={theme}>\n                  {children}\n                </div>\n                {typeof document !== 'undefined'\n                  ? createPortal(\n                      <div\n                        className=\"gcsa-portal-scope gcsa-toast-portal\"\n                        data-gcsa-theme={theme}\n                        style={{ zIndex: toastZIndex }}\n                      >\n                        <GcsaToastStack toasts={toasts} />\n                      </div>,\n                      document.body\n                    )\n                  : null}\n              </GcsaLocaleContext.Provider>\n            </GcsaThemeContext.Provider>\n          </GcsaMessageContext.Provider>\n        </GcsaComponentSizeContext.Provider>\n      </GcsaZIndexContext.Provider>\n    </GcsaConfigProviderContext.Provider>\n  );\n}"],"names":["GcsaConfigProvider","theme","locale","syncDocument","size","children","parentProvider","useContext","GcsaConfigProviderContext","parentZIndexApi","GcsaZIndexContext","parentSize","GcsaComponentSizeContext","restoreDocumentTheme","GcsaRestoreDocumentThemeContext","toasts","setToasts","useState","toastZIndex","setToastZIndex","readToastZIndex","idRef","useRef","zIndexApi","useMemo","createGcsaZIndexApi","shouldSyncDocument","resolvedSize","refreshToastZIndex","push","message","type","current","prev","t","GCSA_MESSAGE_DURATION_MS","api","useEffect","jsx","GcsaMessageContext","GcsaThemeContext","jsxs","GcsaLocaleContext","createPortal","GcsaToastStack"],"mappings":"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"}
+{"version":3,"file":"GcsaConfigProvider.js","sources":["../src/GcsaConfigProvider.tsx"],"sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { GcsaConsoleTheme, GcsaConsoleLocale, GcsaMessageType, GcsaComponentSize } from '@gcsa/console-core';\nimport { GCSA_MESSAGE_DURATION_MS } from '@gcsa/console-core';\nimport {\n  GcsaConfigProviderContext,\n  GcsaMessageContext,\n  GcsaThemeContext\n} from './hooks/useGcsaTheme';\nimport type { GcsaMessageApi } from './hooks/useMessage';\nimport { GcsaLocaleContext } from './hooks/useGcsaLocale';\nimport { GcsaRestoreDocumentThemeContext } from './hooks/useDocumentThemeSync';\nimport { GcsaToastStack } from './GcsaToastStack';\nimport { GcsaZIndexContext, createGcsaZIndexApi, readToastZIndex } from './hooks/useGcsaZIndex';\nimport { GcsaComponentSizeContext } from './hooks/useGcsaComponentSize';\n\nexport type GcsaConfigProviderProps = {\n  theme?: GcsaConsoleTheme;\n  /** 界面语言（zh-CN / zh-TW / en-US） */\n  locale?: GcsaConsoleLocale;\n  /** 是否同步到 document（Portal 浮层）。文档站 demo 应关闭，由 VitePress 全局同步。 */\n  syncDocument?: boolean;\n  /** 全局控件尺寸（Button / Select / InputGroup / Switch / Table 等） */\n  size?: GcsaComponentSize;\n  children: ReactNode;\n};\n\nexport function GcsaConfigProvider({\n  theme = 'dark',\n  locale = 'zh-CN',\n  syncDocument = true,\n  size,\n  children\n}: GcsaConfigProviderProps) {\n  const parentProvider = useContext(GcsaConfigProviderContext);\n  const parentZIndexApi = useContext(GcsaZIndexContext);\n  const parentSize = useContext(GcsaComponentSizeContext);\n  const restoreDocumentTheme = useContext(GcsaRestoreDocumentThemeContext);\n  const [toasts, setToasts] = useState<Array<{ id: number; message: string; type: GcsaMessageType }>>([]);\n  const [toastZIndex, setToastZIndex] = useState<number>(() => readToastZIndex());\n  const [portalMounted, setPortalMounted] = useState(false);\n  const idRef = useRef(0);\n  const MAX_TOASTS = 4;\n\n  const zIndexApi = useMemo(\n    () => parentZIndexApi ?? createGcsaZIndexApi(),\n    [parentZIndexApi]\n  );\n\n  const shouldSyncDocument = !parentProvider && syncDocument;\n  const resolvedSize = size ?? parentSize ?? 'md';\n\n  const refreshToastZIndex = () => {\n    setToastZIndex(readToastZIndex());\n  };\n\n  const push = (message: string, type: GcsaMessageType) => {\n    refreshToastZIndex();\n    const current = ++idRef.current;\n    setToasts(prev => [...prev, { id: current, message, type }].slice(-MAX_TOASTS));\n    setTimeout(() => {\n      setToasts(prev => prev.filter(t => t.id !== current));\n    }, GCSA_MESSAGE_DURATION_MS);\n  };\n\n  const api: GcsaMessageApi = {\n    success: message => push(message, 'success'),\n    error: message => push(message, 'error'),\n    info: message => push(message, 'info')\n  };\n\n  useEffect(() => {\n    if (!shouldSyncDocument || typeof document === 'undefined') return;\n    document.documentElement.setAttribute('data-gcsa-theme', theme);\n  }, [theme, shouldSyncDocument]);\n\n  useEffect(() => {\n    refreshToastZIndex();\n  }, []);\n\n  useEffect(() => {\n    setPortalMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (!shouldSyncDocument) return;\n    return () => {\n      if (typeof document === 'undefined') return;\n      if (restoreDocumentTheme) {\n        restoreDocumentTheme();\n        return;\n      }\n      document.documentElement.removeAttribute('data-gcsa-theme');\n    };\n  }, [shouldSyncDocument, restoreDocumentTheme]);\n\n  return (\n    <GcsaConfigProviderContext.Provider value={true}>\n      <GcsaZIndexContext.Provider value={zIndexApi}>\n        <GcsaComponentSizeContext.Provider value={resolvedSize}>\n          <GcsaMessageContext.Provider value={api}>\n            <GcsaThemeContext.Provider value={theme}>\n              <GcsaLocaleContext.Provider value={locale}>\n                <div className=\"gcsa-console-root\" data-gcsa-theme={theme}>\n                  {children}\n                </div>\n                {portalMounted\n                  ? createPortal(\n                      <div\n                        className=\"gcsa-portal-scope gcsa-toast-portal\"\n                        data-gcsa-theme={theme}\n                        style={{ zIndex: toastZIndex }}\n                      >\n                        <GcsaToastStack toasts={toasts} />\n                      </div>,\n                      document.body\n                    )\n                  : null}\n              </GcsaLocaleContext.Provider>\n            </GcsaThemeContext.Provider>\n          </GcsaMessageContext.Provider>\n        </GcsaComponentSizeContext.Provider>\n      </GcsaZIndexContext.Provider>\n    </GcsaConfigProviderContext.Provider>\n  );\n}"],"names":["GcsaConfigProvider","theme","locale","syncDocument","size","children","parentProvider","useContext","GcsaConfigProviderContext","parentZIndexApi","GcsaZIndexContext","parentSize","GcsaComponentSizeContext","restoreDocumentTheme","GcsaRestoreDocumentThemeContext","toasts","setToasts","useState","toastZIndex","setToastZIndex","readToastZIndex","portalMounted","setPortalMounted","idRef","useRef","zIndexApi","useMemo","createGcsaZIndexApi","shouldSyncDocument","resolvedSize","refreshToastZIndex","push","message","type","current","prev","t","GCSA_MESSAGE_DURATION_MS","api","useEffect","jsx","GcsaMessageContext","GcsaThemeContext","jsxs","GcsaLocaleContext","createPortal","GcsaToastStack"],"mappings":"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"}

package/dist/GcsaDrawer.js

@@ -1,40 +1,40 @@
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { Dialog as e } from "@ark-ui/react/dialog";
-import { Portal as v } from "@ark-ui/react/portal";
-import { useGcsaLocaleMessages as y } from "./hooks/useGcsaLocale.js";
-import { useGcsaOverlayZIndex as x } from "./hooks/useOverlayZIndex.js";
-import { usePreserveScrollOnFocus as N } from "./hooks/usePreventHiddenInputScroll.js";
-function I({
-  open: s,
-  title: a,
-  closable: n = !0,
-  placement: o = "right",
-  size: u = "default",
-  footer: c,
+import { Portal as f } from "@ark-ui/react/portal";
+import { useGcsaLocaleMessages as v } from "./hooks/useGcsaLocale.js";
+import { useGcsaOverlayZIndex as N } from "./hooks/useOverlayZIndex.js";
+import { useGcsaTheme as x } from "./hooks/useGcsaTheme.js";
+import { usePreserveScrollOnFocus as y } from "./hooks/usePreventHiddenInputScroll.js";
+function P({
+  open: a,
+  title: s,
+  closable: i = !0,
+  placement: c = "right",
+  size: n = "default",
+  footer: o,
   onOpenChange: l,
-  children: _
+  children: m
 }) {
-  const m = y(), g = N(s), { backdropZ: i, positionerZ: d } = x(s), h = i == null ? void 0 : { zIndex: i }, p = d == null ? void 0 : { zIndex: d }, w = u === "lg" ? " gcsa-drawer__panel--size-lg" : "";
+  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" : "";
   return /* @__PURE__ */ r(
     e.Root,
     {
-      open: s,
+      open: a,
       lazyMount: !0,
       unmountOnExit: !0,
-      onOpenChange: (f) => l == null ? void 0 : l(f.open),
-      children: /* @__PURE__ */ t(v, { children: [
-        /* @__PURE__ */ r(e.Backdrop, { className: "gcsa-drawer__backdrop", style: h }),
+      onOpenChange: (w) => l == null ? void 0 : l(w.open),
+      children: /* @__PURE__ */ r(f, { children: /* @__PURE__ */ d("div", { className: "gcsa-portal-scope gcsa-modal-portal", "data-gcsa-theme": _, style: h, children: [
+        /* @__PURE__ */ r(e.Backdrop, { className: "gcsa-drawer__backdrop" }),
         /* @__PURE__ */ r(
           e.Positioner,
           {
-            className: `gcsa-drawer__positioner gcsa-drawer__positioner--${o}`,
-            style: p,
-            children: /* @__PURE__ */ t(
+            className: `gcsa-drawer__positioner gcsa-drawer__positioner--${c}`,
+            children: /* @__PURE__ */ d(
               e.Content,
               {
-                className: `gcsa-drawer__panel gcsa-ui-surface gcsa-drawer__panel--${o}${w}`,
+                className: `gcsa-drawer__panel gcsa-ui-surface gcsa-drawer__panel--${c}${p}`,
                 children: [
-                  n ? /* @__PURE__ */ r(e.CloseTrigger, { className: "gcsa-drawer__close", "aria-label": m.close, children: /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r(
+                  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(
                     "path",
                     {
                       d: "M2 2l10 10M12 2L2 12",
@@ -43,26 +43,26 @@ function I({
                       strokeLinecap: "round"
                     }
                   ) }) }) : null,
-                  a ? /* @__PURE__ */ r("header", { className: "gcsa-drawer__header", children: /* @__PURE__ */ r(e.Title, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "gcsa-drawer__title", children: a }) }) }) : null,
+                  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,
                   /* @__PURE__ */ r(
                     "div",
                     {
                       ref: g,
-                      className: `gcsa-drawer__body${a ? " gcsa-drawer__body--titled" : ""}`,
-                      children: _
+                      className: `gcsa-drawer__body${s ? " gcsa-drawer__body--titled" : ""}`,
+                      children: m
                     }
                   ),
-                  c ? /* @__PURE__ */ r("div", { className: "gcsa-drawer__footer", children: c }) : null
+                  o ? /* @__PURE__ */ r("div", { className: "gcsa-drawer__footer", children: o }) : null
                 ]
               }
             )
           }
         )
-      ] })
+      ] }) })
     }
   );
 }
 export {
-  I as GcsaDrawer
+  P as GcsaDrawer
 };
 //# sourceMappingURL=GcsaDrawer.js.map

package/dist/GcsaDrawer.js.map

@@ -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 bodyRef = usePreserveScrollOnFocus(open);\n  const { backdropZ, positionerZ } = useGcsaOverlayZIndex(open);\n  const backdropStyle = (backdropZ == null ? undefined : { zIndex: backdropZ }) as CSSProperties | undefined;\n  const positionerStyle = (positionerZ == null ? undefined : { zIndex: positionerZ }) 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        <Dialog.Backdrop className=\"gcsa-drawer__backdrop\" style={backdropStyle} />\n        <Dialog.Positioner\n          className={`gcsa-drawer__positioner gcsa-drawer__positioner--${placement}`}\n          style={positionerStyle}\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      </Portal>\n    </Dialog.Root>\n  );\n}\n"],"names":["GcsaDrawer","open","title","closable","placement","size","footer","onOpenChange","children","messages","useGcsaLocaleMessages","bodyRef","usePreserveScrollOnFocus","backdropZ","positionerZ","useGcsaOverlayZIndex","backdropStyle","positionerStyle","sizeClass","jsx","Dialog","details","Portal","jsxs"],"mappings":";;;;;;AAsBO,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,IAAUC,EAAyBX,CAAI,GACvC,EAAE,WAAAY,GAAW,aAAAC,MAAgBC,EAAqBd,CAAI,GACtDe,IAAiBH,KAAa,OAAO,SAAY,EAAE,QAAQA,EAAA,GAC3DI,IAAmBH,KAAe,OAAO,SAAY,EAAE,QAAQA,EAAA,GAC/DI,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,4BAACC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAH,EAACC,EAAO,UAAP,EAAgB,WAAU,yBAAwB,OAAOJ,GAAe;AAAA,QACzE,gBAAAG;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAW,oDAAoDhB,CAAS;AAAA,YACxE,OAAOa;AAAA,YAEP,UAAA,gBAAAM;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,KAAKR;AAAA,sBACL,WAAW,oBAAoBT,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,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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

@@ -1,28 +1,29 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { Dialog as a } from "@ark-ui/react/dialog";
-import { Portal as g } from "@ark-ui/react/portal";
-import { useGcsaLocaleMessages as p } from "./hooks/useGcsaLocale.js";
-import { useGcsaOverlayZIndex as f } from "./hooks/useOverlayZIndex.js";
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import { Dialog as e } from "@ark-ui/react/dialog";
+import { Portal as _ } from "@ark-ui/react/portal";
+import { useGcsaLocaleMessages as g } from "./hooks/useGcsaLocale.js";
+import { useGcsaOverlayZIndex as p } from "./hooks/useOverlayZIndex.js";
+import { useGcsaTheme as f } from "./hooks/useGcsaTheme.js";
 function b({
   open: o,
-  title: l,
-  closable: t = !0,
+  title: s,
+  closable: d = !0,
   footer: r,
-  onOpenChange: s,
-  children: n
+  onOpenChange: l,
+  children: i
 }) {
-  const m = p(), { backdropZ: c, positionerZ: d } = f(o), u = c == null ? void 0 : { zIndex: c }, _ = d == null ? void 0 : { zIndex: d };
-  return /* @__PURE__ */ e(
-    a.Root,
+  const m = g(), n = f(), { portalZ: c } = p(o), u = c == null ? void 0 : { zIndex: c };
+  return /* @__PURE__ */ a(
+    e.Root,
     {
       open: o,
       lazyMount: !0,
       unmountOnExit: !0,
-      onOpenChange: (h) => s == null ? void 0 : s(h.open),
-      children: /* @__PURE__ */ i(g, { children: [
-        /* @__PURE__ */ e(a.Backdrop, { className: "gcsa-modal__backdrop", style: u }),
-        /* @__PURE__ */ e(a.Positioner, { className: "gcsa-modal__positioner", style: _, children: /* @__PURE__ */ i(a.Content, { className: "gcsa-modal__panel gcsa-ui-surface", children: [
-          t ? /* @__PURE__ */ e(a.CloseTrigger, { className: "gcsa-modal__close", "aria-label": m.close, children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ e(
+      onOpenChange: (h) => l == null ? void 0 : l(h.open),
+      children: /* @__PURE__ */ a(_, { children: /* @__PURE__ */ t("div", { className: "gcsa-portal-scope gcsa-modal-portal", "data-gcsa-theme": n, style: u, children: [
+        /* @__PURE__ */ a(e.Backdrop, { className: "gcsa-modal__backdrop" }),
+        /* @__PURE__ */ a(e.Positioner, { className: "gcsa-modal__positioner", children: /* @__PURE__ */ t(e.Content, { className: "gcsa-modal__panel gcsa-ui-surface", children: [
+          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(
             "path",
             {
               d: "M2 2l10 10M12 2L2 12",
@@ -31,11 +32,11 @@ function b({
               strokeLinecap: "round"
             }
           ) }) }) : null,
-          l ? /* @__PURE__ */ e("header", { className: "gcsa-modal__header", children: /* @__PURE__ */ e(a.Title, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "gcsa-modal__title", children: l }) }) }) : null,
-          /* @__PURE__ */ e("div", { className: `gcsa-modal__body${l ? " gcsa-modal__body--titled" : ""}`, children: n }),
-          r ? /* @__PURE__ */ e("div", { className: "gcsa-modal__footer", children: r }) : null
+          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,
+          /* @__PURE__ */ a("div", { className: `gcsa-modal__body${s ? " gcsa-modal__body--titled" : ""}`, children: i }),
+          r ? /* @__PURE__ */ a("div", { className: "gcsa-modal__footer", children: r }) : null
         ] }) })
-      ] })
+      ] }) })
     }
   );
 }

package/dist/GcsaModal.js.map

@@ -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 { backdropZ, positionerZ } = useGcsaOverlayZIndex(open);\n  const backdropStyle = (backdropZ == null ? undefined : { zIndex: backdropZ }) as CSSProperties | undefined;\n  const positionerStyle = (positionerZ == null ? undefined : { zIndex: positionerZ }) 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        <Dialog.Backdrop className=\"gcsa-modal__backdrop\" style={backdropStyle} />\n        <Dialog.Positioner className=\"gcsa-modal__positioner\" style={positionerStyle}>\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      </Portal>\n    </Dialog.Root>\n  );\n}\n"],"names":["GcsaModal","open","title","closable","footer","onOpenChange","children","messages","useGcsaLocaleMessages","backdropZ","positionerZ","useGcsaOverlayZIndex","backdropStyle","positionerStyle","jsx","Dialog","details","Portal","jsxs"],"mappings":";;;;;AAeO,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,GACX,EAAE,WAAAC,GAAW,aAAAC,MAAgBC,EAAqBV,CAAI,GACtDW,IAAiBH,KAAa,OAAO,SAAY,EAAE,QAAQA,EAAA,GAC3DI,IAAmBH,KAAe,OAAO,SAAY,EAAE,QAAQA,EAAA;AAErE,SACE,gBAAAI;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,4BAACC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAH,EAACC,EAAO,UAAP,EAAgB,WAAU,wBAAuB,OAAOH,GAAe;AAAA,QACxE,gBAAAE,EAACC,EAAO,YAAP,EAAkB,WAAU,0BAAyB,OAAOF,GAC3D,UAAA,gBAAAK,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;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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;"}

package/dist/GcsaSelect.js

@@ -1,117 +1,126 @@
-import { jsxs as o, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { useRef as w, useMemo as z } from "react";
-import { createListCollection as R } from "@ark-ui/react/collection";
-import { Select as t } from "@ark-ui/react/select";
-import { Portal as j } from "@ark-ui/react/portal";
-import { formatGcsaLocaleMessage as E, createGcsaPopupPositioning as F, gcsaControlSizeClass as O } from "@gcsa/console-core";
-import { GcsaIcon as P } from "./GcsaIcon.js";
-import { useGcsaLocaleMessages as $ } from "./hooks/useGcsaLocale.js";
-import { useGcsaPopupZIndex as B } from "./hooks/useGcsaPopupZIndex.js";
-import { useGcsaComponentSize as Z } from "./hooks/useGcsaComponentSize.js";
-import { preserveDrawerScrollFrom as q } from "./utils/preserveDrawerScroll.js";
-function C({
-  collection: r,
+import { jsxs as r, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { useRef as B, useState as E, useMemo as z } from "react";
+import { createListCollection as F } from "@ark-ui/react/collection";
+import { Select as s } from "@ark-ui/react/select";
+import { Portal as O } from "@ark-ui/react/portal";
+import { formatGcsaLocaleMessage as W, createGcsaPopupPositioning as Z, gcsaControlSizeClass as q } from "@gcsa/console-core";
+import { GcsaIcon as b } from "./GcsaIcon.js";
+import { useGcsaLocaleMessages as A } from "./hooks/useGcsaLocale.js";
+import { useGcsaPopupZIndex as J } from "./hooks/useGcsaPopupZIndex.js";
+import { useGcsaComponentSize as K } from "./hooks/useGcsaComponentSize.js";
+import { preserveDrawerScrollFrom as Q } from "./utils/preserveDrawerScroll.js";
+function P({
+  collection: i,
   contentStyle: c,
-  showListHint: u,
-  listHintText: g,
-  empty: n,
-  emptyText: d
+  showListHint: d,
+  listHintText: h,
+  empty: o,
+  emptyText: p
 }) {
-  return /* @__PURE__ */ e(t.Content, { className: "gcsa-select-content gcsa-ui-surface", style: c, children: n ? /* @__PURE__ */ e("div", { className: "gcsa-select-empty", role: "status", children: /* @__PURE__ */ e("span", { className: "gcsa-select-empty__text", children: d }) }) : /* @__PURE__ */ o(k, { children: [
-    /* @__PURE__ */ e(t.List, { className: "gcsa-select-list", children: r.group().map(([l, i]) => /* @__PURE__ */ o(t.ItemGroup, { className: "gcsa-select-group", children: [
-      l ? /* @__PURE__ */ e(t.ItemGroupLabel, { className: "gcsa-select-group__label", children: l }) : null,
-      i.map((a) => /* @__PURE__ */ o(t.Item, { item: a, className: "gcsa-select-item", children: [
-        /* @__PURE__ */ e(t.ItemText, { className: "gcsa-select-item__text", children: a.label }),
-        /* @__PURE__ */ e(t.ItemIndicator, { className: "gcsa-select-item__check", children: /* @__PURE__ */ e(P, { name: "check", size: "sm", className: "gcsa-select-item__check-icon" }) })
-      ] }, a.value))
+  return /* @__PURE__ */ e(s.Content, { className: "gcsa-select-content gcsa-ui-surface", style: c, children: o ? /* @__PURE__ */ e("div", { className: "gcsa-select-empty", role: "status", children: /* @__PURE__ */ e("span", { className: "gcsa-select-empty__text", children: p }) }) : /* @__PURE__ */ r(j, { children: [
+    /* @__PURE__ */ e(s.List, { className: "gcsa-select-list", children: i.group().map(([l, a]) => /* @__PURE__ */ r(s.ItemGroup, { className: "gcsa-select-group", children: [
+      l ? /* @__PURE__ */ e(s.ItemGroupLabel, { className: "gcsa-select-group__label", children: l }) : null,
+      a.map((n) => /* @__PURE__ */ r(s.Item, { item: n, className: "gcsa-select-item", children: [
+        /* @__PURE__ */ e(s.ItemText, { className: "gcsa-select-item__text", children: n.label }),
+        /* @__PURE__ */ e(s.ItemIndicator, { className: "gcsa-select-item__check", children: /* @__PURE__ */ e(b, { name: "check", size: "sm", className: "gcsa-select-item__check-icon" }) })
+      ] }, n.value))
     ] }, l || "default")) }),
-    u ? /* @__PURE__ */ e("div", { className: "gcsa-select-hint", children: g }) : null
+    d ? /* @__PURE__ */ e("div", { className: "gcsa-select-hint", children: h }) : null
   ] }) });
 }
-function se({
-  value: r,
+function ie({
+  value: i,
   options: c,
-  placeholder: u,
-  invalid: g,
-  placement: n = "bottom-start",
-  listMaxHeight: d = 280,
+  placeholder: d,
+  invalid: h,
+  placement: o = "bottom-start",
+  listMaxHeight: p = 280,
   listHintThreshold: l = 16,
-  groupOrder: i,
-  portalled: a = !0,
-  sameWidth: f = !0,
-  size: b,
-  onValueChange: p
+  groupOrder: a,
+  portalled: n = !0,
+  sameWidth: m = !0,
+  size: L,
+  onValueChange: f
 }) {
-  const N = w(null), L = Z(b), x = $(), { zIndex: m, onOpenChange: D } = B(), y = c.some((s) => s.group), h = z(
-    () => R({
+  const N = B(null), [g, M] = E(), D = K(L), y = A(), { zIndex: u, onOpenChange: H } = J(), S = c.some((t) => t.group), x = z(
+    () => F({
       items: c,
-      itemToValue: (s) => s.value,
-      itemToString: (s) => s.label,
-      isItemDisabled: (s) => s.disabled ?? !1,
-      ...y ? {
-        groupBy: (s) => s.group ?? "",
-        groupSort: i ?? "asc"
+      itemToValue: (t) => t.value,
+      itemToString: (t) => t.label,
+      isItemDisabled: (t) => t.disabled ?? !1,
+      ...S ? {
+        groupBy: (t) => t.group ?? "",
+        groupSort: a ?? "asc"
       } : {}
     }),
-    [c, y, i]
-  ), H = r == null ? [] : [r], v = c.length >= l, S = E(x.selectListHint, { count: c.length }), _ = x.emptyDefault, I = c.length === 0, G = {
-    "--gcsa-select-list-max-height": `${d}px`,
-    ...m == null ? {} : { zIndex: m }
-  }, T = m == null ? void 0 : { zIndex: m }, M = z(
-    () => F({ placement: n, sameWidth: f, gutter: 4 }),
-    [n, f]
+    [c, S, a]
+  ), R = () => {
+    var C;
+    const t = (C = N.current) == null ? void 0 : C.getBoundingClientRect().width;
+    t && M(Math.round(t));
+  }, k = i == null ? [] : [i], v = c.length >= l, _ = W(y.selectListHint, { count: c.length }), I = y.emptyDefault, G = c.length === 0, T = {
+    "--gcsa-select-list-max-height": `${p}px`,
+    ...u == null ? {} : { zIndex: u },
+    ...m && g != null ? {
+      width: g,
+      minWidth: g,
+      "--reference-width": `${g}px`
+    } : {}
+  }, w = u == null ? void 0 : { zIndex: u }, $ = z(
+    () => Z({ placement: o, sameWidth: m, gutter: 4 }),
+    [o, m]
   );
-  return /* @__PURE__ */ o(
-    t.Root,
+  return /* @__PURE__ */ r(
+    s.Root,
     {
-      collection: h,
-      value: H,
-      positioning: M,
+      collection: x,
+      value: k,
+      positioning: $,
       lazyMount: !0,
       unmountOnExit: !0,
-      onOpenChange: (s) => {
-        D(s.open), q(N.current);
+      onOpenChange: (t) => {
+        t.open && m && R(), H(t.open), Q(N.current);
       },
-      onValueChange: (s) => p == null ? void 0 : p(s.value[0] ?? ""),
+      onValueChange: (t) => f == null ? void 0 : f(t.value[0] ?? ""),
       children: [
-        /* @__PURE__ */ e(t.Control, { ref: N, className: "gcsa-select-control", children: /* @__PURE__ */ o(
-          t.Trigger,
+        /* @__PURE__ */ e(s.Control, { ref: N, className: "gcsa-select-control", children: /* @__PURE__ */ r(
+          s.Trigger,
           {
-            className: `gcsa-select-trigger gcsa-focus-ring ${O("gcsa-select-trigger", L)}`,
-            "data-invalid": g || void 0,
+            className: `gcsa-select-trigger gcsa-focus-ring ${q("gcsa-select-trigger", D)}`,
+            "data-invalid": h || void 0,
             children: [
-              /* @__PURE__ */ e(t.ValueText, { className: "gcsa-select-value", placeholder: u }),
-              /* @__PURE__ */ e(t.Indicator, { className: "gcsa-select-indicator", "aria-hidden": "true", children: /* @__PURE__ */ e(P, { name: "chevronDown", className: "gcsa-select-indicator__icon" }) })
+              /* @__PURE__ */ e(s.ValueText, { className: "gcsa-select-value", placeholder: d }),
+              /* @__PURE__ */ e(s.Indicator, { className: "gcsa-select-indicator", "aria-hidden": "true", children: /* @__PURE__ */ e(b, { name: "chevronDown", className: "gcsa-select-indicator__icon" }) })
             ]
           }
         ) }),
-        a ? /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(t.Positioner, { style: T, children: /* @__PURE__ */ e(
-          C,
+        n ? /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(s.Positioner, { style: w, children: /* @__PURE__ */ e(
+          P,
           {
-            collection: h,
-            contentStyle: G,
+            collection: x,
+            contentStyle: T,
             showListHint: v,
-            listHintText: S,
-            empty: I,
-            emptyText: _
+            listHintText: _,
+            empty: G,
+            emptyText: I
           }
-        ) }) }) : /* @__PURE__ */ e(t.Positioner, { style: T, children: /* @__PURE__ */ e(
-          C,
+        ) }) }) : /* @__PURE__ */ e(s.Positioner, { style: w, children: /* @__PURE__ */ e(
+          P,
           {
-            collection: h,
-            contentStyle: G,
+            collection: x,
+            contentStyle: T,
             showListHint: v,
-            listHintText: S,
-            empty: I,
-            emptyText: _
+            listHintText: _,
+            empty: G,
+            emptyText: I
           }
         ) }),
-        /* @__PURE__ */ e(t.HiddenSelect, {})
+        /* @__PURE__ */ e(s.HiddenSelect, {})
       ]
     }
   );
 }
 export {
-  se as GcsaSelect
+  ie as GcsaSelect
 };
 //# sourceMappingURL=GcsaSelect.js.map

package/dist/GcsaSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"GcsaSelect.js","sources":["../src/GcsaSelect.tsx"],"sourcesContent":["import { useMemo, useRef, type CSSProperties } from 'react';\nimport { createListCollection } from '@ark-ui/react/collection';\nimport { Select } from '@ark-ui/react/select';\nimport { Portal } from '@ark-ui/react/portal';\nimport type { GcsaPopupPlacement, GcsaSelectOption, GcsaSelectSize } from '@gcsa/console-core';\nimport { createGcsaPopupPositioning, formatGcsaLocaleMessage, gcsaControlSizeClass } from '@gcsa/console-core';\nimport { GcsaIcon } from './GcsaIcon';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';\nimport { useGcsaComponentSize } from './hooks/useGcsaComponentSize';\nimport { preserveDrawerScrollFrom } from './utils/preserveDrawerScroll';\n\nexport type GcsaSelectPlacement = GcsaPopupPlacement;\n\nexport type GcsaSelectProps = {\n  value: string;\n  options: GcsaSelectOption[];\n  placeholder?: string;\n  invalid?: boolean;\n  /** 下拉相对触发器的初始方位 */\n  placement?: GcsaSelectPlacement;\n  listMaxHeight?: number;\n  listHintThreshold?: number;\n  groupOrder?: string[];\n  /** 是否挂载到 body；嵌套浮层（如 DatePicker 内）应设为 false */\n  portalled?: boolean;\n  /** 下拉面板是否与触发器同宽 */\n  sameWidth?: boolean;\n  size?: GcsaSelectSize;\n  onValueChange?: (value: string) => void;\n};\n\nfunction SelectContent({\n  collection,\n  contentStyle,\n  showListHint,\n  listHintText,\n  empty,\n  emptyText\n}: {\n  collection: ReturnType<typeof createListCollection<GcsaSelectOption>>;\n  contentStyle: CSSProperties;\n  showListHint: boolean;\n  listHintText: string;\n  empty: boolean;\n  emptyText: string;\n}) {\n  return (\n    <Select.Content className=\"gcsa-select-content gcsa-ui-surface\" style={contentStyle}>\n      {empty ? (\n        <div className=\"gcsa-select-empty\" role=\"status\">\n          <span className=\"gcsa-select-empty__text\">{emptyText}</span>\n        </div>\n      ) : (\n        <>\n          <Select.List className=\"gcsa-select-list\">\n            {collection.group().map(([groupLabel, groupItems]) => (\n              <Select.ItemGroup key={groupLabel || 'default'} className=\"gcsa-select-group\">\n                {groupLabel ? (\n                  <Select.ItemGroupLabel className=\"gcsa-select-group__label\">\n                    {groupLabel}\n                  </Select.ItemGroupLabel>\n                ) : null}\n                {groupItems.map(opt => (\n                  <Select.Item key={opt.value} item={opt} className=\"gcsa-select-item\">\n                    <Select.ItemText className=\"gcsa-select-item__text\">{opt.label}</Select.ItemText>\n                    <Select.ItemIndicator className=\"gcsa-select-item__check\">\n                      <GcsaIcon name=\"check\" size=\"sm\" className=\"gcsa-select-item__check-icon\" />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                ))}\n              </Select.ItemGroup>\n            ))}\n          </Select.List>\n          {showListHint ? <div className=\"gcsa-select-hint\">{listHintText}</div> : null}\n        </>\n      )}\n    </Select.Content>\n  );\n}\n\nexport function GcsaSelect({\n  value,\n  options,\n  placeholder,\n  invalid,\n  placement = 'bottom-start',\n  listMaxHeight = 280,\n  listHintThreshold = 16,\n  groupOrder,\n  portalled = true,\n  sameWidth = true,\n  size,\n  onValueChange\n}: GcsaSelectProps) {\n  const controlRef = useRef<HTMLDivElement>(null);\n  const resolvedSize = useGcsaComponentSize(size);\n  const messages = useGcsaLocaleMessages();\n  const { zIndex, onOpenChange } = useGcsaPopupZIndex();\n  const hasGroups = options.some(item => item.group);\n\n  const collection = useMemo(\n    () =>\n      createListCollection({\n        items: options,\n        itemToValue: item => item.value,\n        itemToString: item => item.label,\n        isItemDisabled: item => item.disabled ?? false,\n        ...(hasGroups\n          ? {\n              groupBy: (item: GcsaSelectOption) => item.group ?? '',\n              groupSort: groupOrder ?? ('asc' as const)\n            }\n          : {})\n      }),\n    [options, hasGroups, groupOrder]\n  );\n\n  const selectedValue = value == null ? [] : [value];\n  const showListHint = options.length >= listHintThreshold;\n  const listHintText = formatGcsaLocaleMessage(messages.selectListHint, { count: options.length });\n  const emptyText = messages.emptyDefault;\n  const isEmpty = options.length === 0;\n  const contentStyle = {\n    '--gcsa-select-list-max-height': `${listMaxHeight}px`,\n    ...(zIndex == null ? {} : { zIndex })\n  } as CSSProperties;\n  const positionerStyle = zIndex == null ? undefined : ({ zIndex } as CSSProperties);\n  const positioning = useMemo(\n    () => createGcsaPopupPositioning({ placement, sameWidth, gutter: 4 }),\n    [placement, sameWidth]\n  );\n\n  return (\n    <Select.Root\n      collection={collection}\n      value={selectedValue}\n      positioning={positioning}\n      lazyMount\n      unmountOnExit\n      onOpenChange={details => {\n        onOpenChange(details.open);\n        preserveDrawerScrollFrom(controlRef.current);\n      }}\n      onValueChange={details => onValueChange?.(details.value[0] ?? '')}\n    >\n      <Select.Control ref={controlRef} className=\"gcsa-select-control\">\n        <Select.Trigger\n          className={`gcsa-select-trigger gcsa-focus-ring ${gcsaControlSizeClass('gcsa-select-trigger', resolvedSize)}`}\n          data-invalid={invalid || undefined}\n        >\n          <Select.ValueText className=\"gcsa-select-value\" placeholder={placeholder} />\n          <Select.Indicator className=\"gcsa-select-indicator\" aria-hidden=\"true\">\n            <GcsaIcon name=\"chevronDown\" className=\"gcsa-select-indicator__icon\" />\n          </Select.Indicator>\n        </Select.Trigger>\n      </Select.Control>\n      {portalled ? (\n        <Portal>\n          <Select.Positioner style={positionerStyle}>\n            <SelectContent\n              collection={collection}\n              contentStyle={contentStyle}\n              showListHint={showListHint}\n              listHintText={listHintText}\n              empty={isEmpty}\n              emptyText={emptyText}\n            />\n          </Select.Positioner>\n        </Portal>\n      ) : (\n        <Select.Positioner style={positionerStyle}>\n          <SelectContent\n            collection={collection}\n            contentStyle={contentStyle}\n            showListHint={showListHint}\n            listHintText={listHintText}\n            empty={isEmpty}\n            emptyText={emptyText}\n          />\n        </Select.Positioner>\n      )}\n      <Select.HiddenSelect />\n    </Select.Root>\n  );\n}\n"],"names":["SelectContent","collection","contentStyle","showListHint","listHintText","empty","emptyText","jsx","Select","jsxs","Fragment","groupLabel","groupItems","opt","GcsaIcon","GcsaSelect","value","options","placeholder","invalid","placement","listMaxHeight","listHintThreshold","groupOrder","portalled","sameWidth","size","onValueChange","controlRef","useRef","resolvedSize","useGcsaComponentSize","messages","useGcsaLocaleMessages","zIndex","onOpenChange","useGcsaPopupZIndex","hasGroups","item","useMemo","createListCollection","selectedValue","formatGcsaLocaleMessage","isEmpty","positionerStyle","positioning","createGcsaPopupPositioning","details","preserveDrawerScrollFrom","gcsaControlSizeClass","Portal"],"mappings":"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"}
+{"version":3,"file":"GcsaSelect.js","sources":["../src/GcsaSelect.tsx"],"sourcesContent":["import { useMemo, useRef, useState, type CSSProperties } from 'react';\nimport { createListCollection } from '@ark-ui/react/collection';\nimport { Select } from '@ark-ui/react/select';\nimport { Portal } from '@ark-ui/react/portal';\nimport type { GcsaPopupPlacement, GcsaSelectOption, GcsaSelectSize } from '@gcsa/console-core';\nimport { createGcsaPopupPositioning, formatGcsaLocaleMessage, gcsaControlSizeClass } from '@gcsa/console-core';\nimport { GcsaIcon } from './GcsaIcon';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';\nimport { useGcsaComponentSize } from './hooks/useGcsaComponentSize';\nimport { preserveDrawerScrollFrom } from './utils/preserveDrawerScroll';\n\nexport type GcsaSelectPlacement = GcsaPopupPlacement;\n\nexport type GcsaSelectProps = {\n  value: string;\n  options: GcsaSelectOption[];\n  placeholder?: string;\n  invalid?: boolean;\n  /** 下拉相对触发器的初始方位 */\n  placement?: GcsaSelectPlacement;\n  listMaxHeight?: number;\n  listHintThreshold?: number;\n  groupOrder?: string[];\n  /** 是否挂载到 body；嵌套浮层（如 DatePicker 内）应设为 false */\n  portalled?: boolean;\n  /** 下拉面板是否与触发器同宽 */\n  sameWidth?: boolean;\n  size?: GcsaSelectSize;\n  onValueChange?: (value: string) => void;\n};\n\nfunction SelectContent({\n  collection,\n  contentStyle,\n  showListHint,\n  listHintText,\n  empty,\n  emptyText\n}: {\n  collection: ReturnType<typeof createListCollection<GcsaSelectOption>>;\n  contentStyle: CSSProperties;\n  showListHint: boolean;\n  listHintText: string;\n  empty: boolean;\n  emptyText: string;\n}) {\n  return (\n    <Select.Content className=\"gcsa-select-content gcsa-ui-surface\" style={contentStyle}>\n      {empty ? (\n        <div className=\"gcsa-select-empty\" role=\"status\">\n          <span className=\"gcsa-select-empty__text\">{emptyText}</span>\n        </div>\n      ) : (\n        <>\n          <Select.List className=\"gcsa-select-list\">\n            {collection.group().map(([groupLabel, groupItems]) => (\n              <Select.ItemGroup key={groupLabel || 'default'} className=\"gcsa-select-group\">\n                {groupLabel ? (\n                  <Select.ItemGroupLabel className=\"gcsa-select-group__label\">\n                    {groupLabel}\n                  </Select.ItemGroupLabel>\n                ) : null}\n                {groupItems.map(opt => (\n                  <Select.Item key={opt.value} item={opt} className=\"gcsa-select-item\">\n                    <Select.ItemText className=\"gcsa-select-item__text\">{opt.label}</Select.ItemText>\n                    <Select.ItemIndicator className=\"gcsa-select-item__check\">\n                      <GcsaIcon name=\"check\" size=\"sm\" className=\"gcsa-select-item__check-icon\" />\n                    </Select.ItemIndicator>\n                  </Select.Item>\n                ))}\n              </Select.ItemGroup>\n            ))}\n          </Select.List>\n          {showListHint ? <div className=\"gcsa-select-hint\">{listHintText}</div> : null}\n        </>\n      )}\n    </Select.Content>\n  );\n}\n\nexport function GcsaSelect({\n  value,\n  options,\n  placeholder,\n  invalid,\n  placement = 'bottom-start',\n  listMaxHeight = 280,\n  listHintThreshold = 16,\n  groupOrder,\n  portalled = true,\n  sameWidth = true,\n  size,\n  onValueChange\n}: GcsaSelectProps) {\n  const controlRef = useRef<HTMLDivElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<number | undefined>();\n  const resolvedSize = useGcsaComponentSize(size);\n  const messages = useGcsaLocaleMessages();\n  const { zIndex, onOpenChange } = useGcsaPopupZIndex();\n  const hasGroups = options.some(item => item.group);\n\n  const collection = useMemo(\n    () =>\n      createListCollection({\n        items: options,\n        itemToValue: item => item.value,\n        itemToString: item => item.label,\n        isItemDisabled: item => item.disabled ?? false,\n        ...(hasGroups\n          ? {\n              groupBy: (item: GcsaSelectOption) => item.group ?? '',\n              groupSort: groupOrder ?? ('asc' as const)\n            }\n          : {})\n      }),\n    [options, hasGroups, groupOrder]\n  );\n\n  const syncTriggerWidth = () => {\n    const width = controlRef.current?.getBoundingClientRect().width;\n    if (width) {\n      setTriggerWidth(Math.round(width));\n    }\n  };\n\n  const selectedValue = value == null ? [] : [value];\n  const showListHint = options.length >= listHintThreshold;\n  const listHintText = formatGcsaLocaleMessage(messages.selectListHint, { count: options.length });\n  const emptyText = messages.emptyDefault;\n  const isEmpty = options.length === 0;\n  const contentStyle = {\n    '--gcsa-select-list-max-height': `${listMaxHeight}px`,\n    ...(zIndex == null ? {} : { zIndex }),\n    ...(sameWidth && triggerWidth != null\n      ? {\n          width: triggerWidth,\n          minWidth: triggerWidth,\n          '--reference-width': `${triggerWidth}px`\n        }\n      : {})\n  } as CSSProperties;\n  const positionerStyle = zIndex == null ? undefined : ({ zIndex } as CSSProperties);\n  const positioning = useMemo(\n    () => createGcsaPopupPositioning({ placement, sameWidth, gutter: 4 }),\n    [placement, sameWidth]\n  );\n\n  return (\n    <Select.Root\n      collection={collection}\n      value={selectedValue}\n      positioning={positioning}\n      lazyMount\n      unmountOnExit\n      onOpenChange={details => {\n        if (details.open && sameWidth) {\n          syncTriggerWidth();\n        }\n        onOpenChange(details.open);\n        preserveDrawerScrollFrom(controlRef.current);\n      }}\n      onValueChange={details => onValueChange?.(details.value[0] ?? '')}\n    >\n      <Select.Control ref={controlRef} className=\"gcsa-select-control\">\n        <Select.Trigger\n          className={`gcsa-select-trigger gcsa-focus-ring ${gcsaControlSizeClass('gcsa-select-trigger', resolvedSize)}`}\n          data-invalid={invalid || undefined}\n        >\n          <Select.ValueText className=\"gcsa-select-value\" placeholder={placeholder} />\n          <Select.Indicator className=\"gcsa-select-indicator\" aria-hidden=\"true\">\n            <GcsaIcon name=\"chevronDown\" className=\"gcsa-select-indicator__icon\" />\n          </Select.Indicator>\n        </Select.Trigger>\n      </Select.Control>\n      {portalled ? (\n        <Portal>\n          <Select.Positioner style={positionerStyle}>\n            <SelectContent\n              collection={collection}\n              contentStyle={contentStyle}\n              showListHint={showListHint}\n              listHintText={listHintText}\n              empty={isEmpty}\n              emptyText={emptyText}\n            />\n          </Select.Positioner>\n        </Portal>\n      ) : (\n        <Select.Positioner style={positionerStyle}>\n          <SelectContent\n            collection={collection}\n            contentStyle={contentStyle}\n            showListHint={showListHint}\n            listHintText={listHintText}\n            empty={isEmpty}\n            emptyText={emptyText}\n          />\n        </Select.Positioner>\n      )}\n      <Select.HiddenSelect />\n    </Select.Root>\n  );\n}\n"],"names":["SelectContent","collection","contentStyle","showListHint","listHintText","empty","emptyText","jsx","Select","jsxs","Fragment","groupLabel","groupItems","opt","GcsaIcon","GcsaSelect","value","options","placeholder","invalid","placement","listMaxHeight","listHintThreshold","groupOrder","portalled","sameWidth","size","onValueChange","controlRef","useRef","triggerWidth","setTriggerWidth","useState","resolvedSize","useGcsaComponentSize","messages","useGcsaLocaleMessages","zIndex","onOpenChange","useGcsaPopupZIndex","hasGroups","item","useMemo","createListCollection","syncTriggerWidth","width","_a","selectedValue","formatGcsaLocaleMessage","isEmpty","positionerStyle","positioning","createGcsaPopupPositioning","details","preserveDrawerScrollFrom","gcsaControlSizeClass","Portal"],"mappings":"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"}

package/dist/hooks/useOverlayZIndex.d.ts

@@ -1,8 +1,7 @@
 /**
- * Modal / Drawer：仅在 open 变为 true 时分配 backdrop + positioner 两层 z-index（与 Vue watch(open) 一致）。
+ * Modal / Drawer：仅在 open 变为 true 时分配 portal 层 z-index（与 Vue watch(open) 一致）。
  * 打开期间父组件重渲染不得再次 claim，否则会盖住内部后打开的 Select/Dropdown。
  */
 export declare function useGcsaOverlayZIndex(open: boolean): {
-    backdropZ: number | undefined;
-    positionerZ: number | undefined;
+    portalZ: number | undefined;
 };

package/dist/hooks/useOverlayZIndex.js

@@ -1,14 +1,14 @@
-import { useRef as f, useState as n, useEffect as i } from "react";
-import { useGcsaZIndex as Z } from "./useGcsaZIndex.js";
-function d(t) {
-  const { nextZIndex: r } = Z(), e = f(r);
-  e.current = r;
-  const [o, s] = n(), [c, u] = n();
-  return i(() => {
-    t && (s(e.current()), u(e.current()));
-  }, [t]), { backdropZ: o, positionerZ: c };
+import { useRef as o, useState as u, useEffect as c } from "react";
+import { useGcsaZIndex as f } from "./useGcsaZIndex.js";
+function Z(e) {
+  const { nextZIndex: t } = f(), r = o(t);
+  r.current = t;
+  const [n, s] = u();
+  return c(() => {
+    e && s(r.current());
+  }, [e]), { portalZ: n };
 }
 export {
-  d as useGcsaOverlayZIndex
+  Z as useGcsaOverlayZIndex
 };
 //# sourceMappingURL=useOverlayZIndex.js.map

package/dist/hooks/useOverlayZIndex.js.map

@@ -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 时分配 backdrop + positioner 两层 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 [backdropZ, setBackdropZ] = useState<number>();\n  const [positionerZ, setPositionerZ] = useState<number>();\n\n  useEffect(() => {\n    if (!open) return;\n    setBackdropZ(nextZIndexRef.current());\n    setPositionerZ(nextZIndexRef.current());\n  }, [open]);\n\n  return { backdropZ, positionerZ };\n}\n"],"names":["useGcsaOverlayZIndex","open","nextZIndex","useGcsaZIndex","nextZIndexRef","useRef","backdropZ","setBackdropZ","useState","positionerZ","setPositionerZ","useEffect"],"mappings":";;AAOO,SAASA,EAAqBC,GAAe;AAClD,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA,GACjBC,IAAgBC,EAAOH,CAAU;AACvC,EAAAE,EAAc,UAAUF;AAExB,QAAM,CAACI,GAAWC,CAAY,IAAIC,EAAA,GAC5B,CAACC,GAAaC,CAAc,IAAIF,EAAA;AAEtC,SAAAG,EAAU,MAAM;AACd,IAAKV,MACLM,EAAaH,EAAc,SAAS,GACpCM,EAAeN,EAAc,SAAS;AAAA,EACxC,GAAG,CAACH,CAAI,CAAC,GAEF,EAAE,WAAAK,GAAW,aAAAG,EAAA;AACtB;"}
+{"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

@@ -1087,6 +1087,9 @@
 }
 
 .gcsa-table-wrap {
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
   overflow-x: auto;
   border: 1px solid var(--gcsa-color-border-subtle);
   border-radius: var(--gcsa-radius-md);
@@ -3363,6 +3366,8 @@
 .gcsa-modal-portal {
   position: fixed;
   inset: 0;
+  z-index: var(--gcsa-z-modal);
+  isolation: isolate;
   pointer-events: none;
 }
 
@@ -3370,7 +3375,7 @@
   position: fixed;
   inset: 0;
   background: var(--gcsa-color-scrim);
-  z-index: var(--gcsa-z-modal);
+  z-index: 0;
   animation-duration: var(--gcsa-motion-modal);
   animation-timing-function: var(--gcsa-ease-modal);
   animation-fill-mode: both;
@@ -3393,7 +3398,7 @@
 .gcsa-modal__positioner {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--gcsa-z-modal) + 1);
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3612,7 +3617,7 @@
   position: fixed;
   inset: 0;
   background: var(--gcsa-color-scrim);
-  z-index: var(--gcsa-z-modal);
+  z-index: 0;
   animation-duration: var(--gcsa-motion-modal);
   animation-timing-function: var(--gcsa-ease-modal);
   animation-fill-mode: both;
@@ -3635,7 +3640,7 @@
 .gcsa-drawer__positioner {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--gcsa-z-modal) + 1);
+  z-index: 1;
   display: flex;
   pointer-events: none;
 }
@@ -3938,6 +3943,29 @@
   justify-content: flex-end;
 }
 
+/* Side nav drawer — panel flush to viewport; inner shell supplies content inset */
+.gcsa-drawer-nav.gcsa-drawer__panel {
+  height: 100dvh;
+  min-height: 100dvh;
+  max-height: 100dvh;
+}
+
+.gcsa-drawer-nav.gcsa-drawer__panel--left,
+.gcsa-drawer-nav.gcsa-drawer__panel--right {
+  width: min(var(--gcsa-drawer-nav-width, var(--gcsa-drawer-width, 280px)), 100%);
+  max-width: 100%;
+}
+
+.gcsa-drawer-nav.gcsa-drawer__panel > .gcsa-drawer__body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
 .gcsa-tabs {
   color: var(--gcsa-color-text);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcsa/console-react",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "GCSA console UI — React components (Ark UI + TanStack + GCSA styles)",
   "type": "module",
   "license": "UNLICENSED",
@@ -34,8 +34,8 @@
     "@tanstack/react-form": "^1.12.2",
     "@tanstack/react-table": "^8.21.3",
     "zod": "^3.24.4",
-    "@gcsa/console-core": "0.1.3",
-    "@gcsa/console-styles": "0.1.3"
+    "@gcsa/console-styles": "0.1.5",
+    "@gcsa/console-core": "0.1.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/GcsaConfigProvider.tsx

@@ -38,6 +38,7 @@ export function GcsaConfigProvider({
   const restoreDocumentTheme = useContext(GcsaRestoreDocumentThemeContext);
   const [toasts, setToasts] = useState<Array<{ id: number; message: string; type: GcsaMessageType }>>([]);
   const [toastZIndex, setToastZIndex] = useState<number>(() => readToastZIndex());
+  const [portalMounted, setPortalMounted] = useState(false);
   const idRef = useRef(0);
   const MAX_TOASTS = 4;
 
@@ -77,6 +78,10 @@ export function GcsaConfigProvider({
     refreshToastZIndex();
   }, []);
 
+  useEffect(() => {
+    setPortalMounted(true);
+  }, []);
+
   useEffect(() => {
     if (!shouldSyncDocument) return;
     return () => {
@@ -99,7 +104,7 @@ export function GcsaConfigProvider({
                 <div className="gcsa-console-root" data-gcsa-theme={theme}>
                   {children}
                 </div>
-                {typeof document !== 'undefined'
+                {portalMounted
                   ? createPortal(
                       <div
                         className="gcsa-portal-scope gcsa-toast-portal"

package/src/GcsaDrawer.tsx

@@ -4,6 +4,7 @@ import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
 import { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';
+import { useGcsaTheme } from './hooks/useGcsaTheme';
 import { usePreserveScrollOnFocus } from './hooks/usePreventHiddenInputScroll';
 
 export type GcsaDrawerSize = 'default' | 'lg';
@@ -31,10 +32,10 @@ export function GcsaDrawer({
   children
 }: GcsaDrawerProps) {
   const messages = useGcsaLocaleMessages();
+  const theme = useGcsaTheme();
   const bodyRef = usePreserveScrollOnFocus(open);
-  const { backdropZ, positionerZ } = useGcsaOverlayZIndex(open);
-  const backdropStyle = (backdropZ == null ? undefined : { zIndex: backdropZ }) as CSSProperties | undefined;
-  const positionerStyle = (positionerZ == null ? undefined : { zIndex: positionerZ }) as CSSProperties | undefined;
+  const { portalZ } = useGcsaOverlayZIndex(open);
+  const portalStyle = (portalZ == null ? undefined : { zIndex: portalZ }) as CSSProperties | undefined;
   const sizeClass = size === 'lg' ? ' gcsa-drawer__panel--size-lg' : '';
 
   return (
@@ -45,11 +46,11 @@ export function GcsaDrawer({
       onOpenChange={details => onOpenChange?.(details.open)}
     >
       <Portal>
-        <Dialog.Backdrop className="gcsa-drawer__backdrop" style={backdropStyle} />
-        <Dialog.Positioner
-          className={`gcsa-drawer__positioner gcsa-drawer__positioner--${placement}`}
-          style={positionerStyle}
-        >
+        <div className="gcsa-portal-scope gcsa-modal-portal" data-gcsa-theme={theme} style={portalStyle}>
+          <Dialog.Backdrop className="gcsa-drawer__backdrop" />
+          <Dialog.Positioner
+            className={`gcsa-drawer__positioner gcsa-drawer__positioner--${placement}`}
+          >
           <Dialog.Content
             className={`gcsa-drawer__panel gcsa-ui-surface gcsa-drawer__panel--${placement}${sizeClass}`}
           >
@@ -81,6 +82,7 @@ export function GcsaDrawer({
             {footer ? <div className="gcsa-drawer__footer">{footer}</div> : null}
           </Dialog.Content>
         </Dialog.Positioner>
+        </div>
       </Portal>
     </Dialog.Root>
   );

package/src/GcsaModal.tsx

@@ -3,6 +3,7 @@ import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
 import { useGcsaLocaleMessages } from './hooks/useGcsaLocale';
 import { useGcsaOverlayZIndex } from './hooks/useOverlayZIndex';
+import { useGcsaTheme } from './hooks/useGcsaTheme';
 
 export type GcsaModalProps = {
   open: boolean;
@@ -22,9 +23,9 @@ export function GcsaModal({
   children
 }: GcsaModalProps) {
   const messages = useGcsaLocaleMessages();
-  const { backdropZ, positionerZ } = useGcsaOverlayZIndex(open);
-  const backdropStyle = (backdropZ == null ? undefined : { zIndex: backdropZ }) as CSSProperties | undefined;
-  const positionerStyle = (positionerZ == null ? undefined : { zIndex: positionerZ }) as CSSProperties | undefined;
+  const theme = useGcsaTheme();
+  const { portalZ } = useGcsaOverlayZIndex(open);
+  const portalStyle = (portalZ == null ? undefined : { zIndex: portalZ }) as CSSProperties | undefined;
 
   return (
     <Dialog.Root
@@ -34,34 +35,36 @@ export function GcsaModal({
       onOpenChange={details => onOpenChange?.(details.open)}
     >
       <Portal>
-        <Dialog.Backdrop className="gcsa-modal__backdrop" style={backdropStyle} />
-        <Dialog.Positioner className="gcsa-modal__positioner" style={positionerStyle}>
-          <Dialog.Content className="gcsa-modal__panel gcsa-ui-surface">
-            {closable ? (
-              <Dialog.CloseTrigger className="gcsa-modal__close" aria-label={messages.close}>
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-                  <path
-                    d="M2 2l10 10M12 2L2 12"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                  />
-                </svg>
-              </Dialog.CloseTrigger>
-            ) : null}
-            {title ? (
-              <header className="gcsa-modal__header">
-                <Dialog.Title asChild>
-                  <div className="gcsa-modal__title">{title}</div>
-                </Dialog.Title>
-              </header>
-            ) : null}
-            <div className={`gcsa-modal__body${title ? ' gcsa-modal__body--titled' : ''}`}>
-              {children}
-            </div>
-            {footer ? <div className="gcsa-modal__footer">{footer}</div> : null}
-          </Dialog.Content>
-        </Dialog.Positioner>
+        <div className="gcsa-portal-scope gcsa-modal-portal" data-gcsa-theme={theme} style={portalStyle}>
+          <Dialog.Backdrop className="gcsa-modal__backdrop" />
+          <Dialog.Positioner className="gcsa-modal__positioner">
+            <Dialog.Content className="gcsa-modal__panel gcsa-ui-surface">
+              {closable ? (
+                <Dialog.CloseTrigger className="gcsa-modal__close" aria-label={messages.close}>
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+                    <path
+                      d="M2 2l10 10M12 2L2 12"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </Dialog.CloseTrigger>
+              ) : null}
+              {title ? (
+                <header className="gcsa-modal__header">
+                  <Dialog.Title asChild>
+                    <div className="gcsa-modal__title">{title}</div>
+                  </Dialog.Title>
+                </header>
+              ) : null}
+              <div className={`gcsa-modal__body${title ? ' gcsa-modal__body--titled' : ''}`}>
+                {children}
+              </div>
+              {footer ? <div className="gcsa-modal__footer">{footer}</div> : null}
+            </Dialog.Content>
+          </Dialog.Positioner>
+        </div>
       </Portal>
     </Dialog.Root>
   );

package/src/GcsaSelect.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, type CSSProperties } from 'react';
+import { useMemo, useRef, useState, type CSSProperties } from 'react';
 import { createListCollection } from '@ark-ui/react/collection';
 import { Select } from '@ark-ui/react/select';
 import { Portal } from '@ark-ui/react/portal';
@@ -94,6 +94,7 @@ export function GcsaSelect({
   onValueChange
 }: GcsaSelectProps) {
   const controlRef = useRef<HTMLDivElement>(null);
+  const [triggerWidth, setTriggerWidth] = useState<number | undefined>();
   const resolvedSize = useGcsaComponentSize(size);
   const messages = useGcsaLocaleMessages();
   const { zIndex, onOpenChange } = useGcsaPopupZIndex();
@@ -116,6 +117,13 @@ export function GcsaSelect({
     [options, hasGroups, groupOrder]
   );
 
+  const syncTriggerWidth = () => {
+    const width = controlRef.current?.getBoundingClientRect().width;
+    if (width) {
+      setTriggerWidth(Math.round(width));
+    }
+  };
+
   const selectedValue = value == null ? [] : [value];
   const showListHint = options.length >= listHintThreshold;
   const listHintText = formatGcsaLocaleMessage(messages.selectListHint, { count: options.length });
@@ -123,7 +131,14 @@ export function GcsaSelect({
   const isEmpty = options.length === 0;
   const contentStyle = {
     '--gcsa-select-list-max-height': `${listMaxHeight}px`,
-    ...(zIndex == null ? {} : { zIndex })
+    ...(zIndex == null ? {} : { zIndex }),
+    ...(sameWidth && triggerWidth != null
+      ? {
+          width: triggerWidth,
+          minWidth: triggerWidth,
+          '--reference-width': `${triggerWidth}px`
+        }
+      : {})
   } as CSSProperties;
   const positionerStyle = zIndex == null ? undefined : ({ zIndex } as CSSProperties);
   const positioning = useMemo(
@@ -139,6 +154,9 @@ export function GcsaSelect({
       lazyMount
       unmountOnExit
       onOpenChange={details => {
+        if (details.open && sameWidth) {
+          syncTriggerWidth();
+        }
         onOpenChange(details.open);
         preserveDrawerScrollFrom(controlRef.current);
       }}

package/src/hooks/useOverlayZIndex.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useGcsaZIndex } from './useGcsaZIndex';
 
 /**
- * Modal / Drawer：仅在 open 变为 true 时分配 backdrop + positioner 两层 z-index（与 Vue watch(open) 一致）。
+ * Modal / Drawer：仅在 open 变为 true 时分配 portal 层 z-index（与 Vue watch(open) 一致）。
  * 打开期间父组件重渲染不得再次 claim，否则会盖住内部后打开的 Select/Dropdown。
  */
 export function useGcsaOverlayZIndex(open: boolean) {
@@ -10,14 +10,12 @@ export function useGcsaOverlayZIndex(open: boolean) {
   const nextZIndexRef = useRef(nextZIndex);
   nextZIndexRef.current = nextZIndex;
 
-  const [backdropZ, setBackdropZ] = useState<number>();
-  const [positionerZ, setPositionerZ] = useState<number>();
+  const [portalZ, setPortalZ] = useState<number>();
 
   useEffect(() => {
     if (!open) return;
-    setBackdropZ(nextZIndexRef.current());
-    setPositionerZ(nextZIndexRef.current());
+    setPortalZ(nextZIndexRef.current());
   }, [open]);
 
-  return { backdropZ, positionerZ };
+  return { portalZ };
 }