@gcsa/console-react 0.1.3 → 0.1.4

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcsa/console-react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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-core": "0.1.4",
+    "@gcsa/console-styles": "0.1.4"
   },
   "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/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);
       }}