@gcsa/console-react 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/GcsaCascader.js +19 -18
- package/dist/GcsaCascader.js.map +1 -1
- package/dist/GcsaConfigProvider.js +38 -36
- package/dist/GcsaConfigProvider.js.map +1 -1
- package/dist/GcsaPopover.d.ts +3 -1
- package/dist/GcsaPopover.js +30 -29
- package/dist/GcsaPopover.js.map +1 -1
- package/dist/GcsaSelect.js +90 -81
- package/dist/GcsaSelect.js.map +1 -1
- package/dist/GcsaTransfer.js +72 -57
- package/dist/GcsaTransfer.js.map +1 -1
- package/dist/GcsaUpload.js +1 -1
- package/dist/GcsaUpload.js.map +1 -1
- package/dist/icons/iconNames.d.ts +2 -2
- package/dist/icons/iconNames.js +1 -0
- package/dist/icons/iconNames.js.map +1 -1
- package/dist/icons/registry.d.ts +1 -1
- package/dist/icons/registry.js +38 -35
- package/dist/icons/registry.js.map +1 -1
- package/dist/icons/svg/result-empty.svg.js +12 -2
- package/dist/icons/svg/result-empty.svg.js.map +1 -1
- package/dist/icons/svg/upload.svg.js +10 -0
- package/dist/icons/svg/upload.svg.js.map +1 -0
- package/dist/icons/svg/users.svg.js.map +1 -1
- package/dist/style.css +223 -140
- package/package.json +3 -3
- package/src/GcsaCascader.tsx +1 -0
- package/src/GcsaConfigProvider.tsx +6 -1
- package/src/GcsaPopover.tsx +4 -1
- package/src/GcsaSelect.tsx +20 -2
- package/src/GcsaTransfer.tsx +41 -13
- package/src/GcsaUpload.tsx +1 -1
- package/src/icons/iconNames.ts +1 -0
- package/src/icons/registry.ts +3 -1
- package/src/icons/svg/result-empty.svg +11 -1
- package/src/icons/svg/upload.svg +5 -0
package/dist/GcsaCascader.js
CHANGED
|
@@ -5,44 +5,44 @@ import { GcsaPopover as z } from "./GcsaPopover.js";
|
|
|
5
5
|
import { useGcsaLocaleMessages as D } from "./hooks/useGcsaLocale.js";
|
|
6
6
|
function I({
|
|
7
7
|
value: t = [],
|
|
8
|
-
options:
|
|
9
|
-
placeholder:
|
|
10
|
-
disabled:
|
|
8
|
+
options: i,
|
|
9
|
+
placeholder: p,
|
|
10
|
+
disabled: b = !1,
|
|
11
11
|
invalid: N = !1,
|
|
12
12
|
changeOnSelect: y = !1,
|
|
13
13
|
portalled: k = !0,
|
|
14
|
-
onValueChange:
|
|
14
|
+
onValueChange: d,
|
|
15
15
|
onChange: o,
|
|
16
16
|
className: m
|
|
17
17
|
}) {
|
|
18
|
-
const u = D(),
|
|
18
|
+
const u = D(), w = p ?? u.selectPlaceholder, [n, f] = j(t);
|
|
19
19
|
$(() => {
|
|
20
20
|
f(t);
|
|
21
21
|
}, [t]);
|
|
22
|
-
const
|
|
22
|
+
const P = _(() => {
|
|
23
23
|
var e;
|
|
24
|
-
const c = [
|
|
25
|
-
let s =
|
|
26
|
-
for (const a of
|
|
24
|
+
const c = [i];
|
|
25
|
+
let s = i;
|
|
26
|
+
for (const a of n) {
|
|
27
27
|
const l = s.find((G) => G.value === a);
|
|
28
28
|
if (!((e = l == null ? void 0 : l.children) != null && e.length)) break;
|
|
29
29
|
c.push(l.children), s = l.children;
|
|
30
30
|
}
|
|
31
31
|
return c;
|
|
32
|
-
}, [
|
|
32
|
+
}, [n, i]), h = _(() => {
|
|
33
33
|
const c = [];
|
|
34
|
-
let s =
|
|
34
|
+
let s = i;
|
|
35
35
|
for (const e of t) {
|
|
36
36
|
const a = s.find((l) => l.value === e);
|
|
37
37
|
if (!a) break;
|
|
38
38
|
c.push(a.label), s = a.children ?? [];
|
|
39
39
|
}
|
|
40
40
|
return c.join(" / ");
|
|
41
|
-
}, [
|
|
41
|
+
}, [i, t]), x = (c, s) => {
|
|
42
42
|
var a;
|
|
43
43
|
if (c.disabled) return;
|
|
44
|
-
const e = [...
|
|
45
|
-
f(e), (!((a = c.children) != null && a.length) || y) && (
|
|
44
|
+
const e = [...n.slice(0, s), c.value];
|
|
45
|
+
f(e), (!((a = c.children) != null && a.length) || y) && (d == null || d(e), o == null || o(e));
|
|
46
46
|
};
|
|
47
47
|
return /* @__PURE__ */ r(
|
|
48
48
|
z,
|
|
@@ -50,27 +50,28 @@ function I({
|
|
|
50
50
|
arrow: !1,
|
|
51
51
|
portalled: k,
|
|
52
52
|
gutter: 6,
|
|
53
|
+
fitViewport: !0,
|
|
53
54
|
className: "gcsa-cascader-popover",
|
|
54
55
|
trigger: /* @__PURE__ */ g(
|
|
55
56
|
"button",
|
|
56
57
|
{
|
|
57
58
|
type: "button",
|
|
58
59
|
className: `gcsa-cascader__trigger gcsa-focus-ring${m ? ` ${m}` : ""}`,
|
|
59
|
-
disabled:
|
|
60
|
+
disabled: b,
|
|
60
61
|
"data-invalid": N || void 0,
|
|
61
62
|
children: [
|
|
62
|
-
/* @__PURE__ */ r("span", { className: "gcsa-cascader__value", "data-placeholder": !h || void 0, children: h ||
|
|
63
|
+
/* @__PURE__ */ r("span", { className: "gcsa-cascader__value", "data-placeholder": !h || void 0, children: h || w }),
|
|
63
64
|
/* @__PURE__ */ r(v, { name: "chevronDown", size: "sm", "aria-hidden": "true" })
|
|
64
65
|
]
|
|
65
66
|
}
|
|
66
67
|
),
|
|
67
|
-
children: /* @__PURE__ */ r("div", { className: "gcsa-cascader__panel", children:
|
|
68
|
+
children: /* @__PURE__ */ r("div", { className: "gcsa-cascader__panel", children: P.map((c, s) => /* @__PURE__ */ r("div", { className: "gcsa-cascader__column", role: "menu", children: c.length ? c.map((e) => {
|
|
68
69
|
var a;
|
|
69
70
|
return /* @__PURE__ */ g(
|
|
70
71
|
"button",
|
|
71
72
|
{
|
|
72
73
|
type: "button",
|
|
73
|
-
className: `gcsa-cascader__option gcsa-focus-ring${
|
|
74
|
+
className: `gcsa-cascader__option gcsa-focus-ring${n[s] === e.value ? " gcsa-cascader__option--active" : ""}`,
|
|
74
75
|
disabled: e.disabled,
|
|
75
76
|
role: "menuitem",
|
|
76
77
|
onClick: () => x(e, s),
|
package/dist/GcsaCascader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GcsaCascader.js","sources":["../src/GcsaCascader.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport type { GcsaCascaderOption } from '@gcsa/console-core';\nimport { GcsaIcon } from './GcsaIcon';\nimport { GcsaPopover } from './GcsaPopover';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\n\nexport type GcsaCascaderProps = {\n value?: string[];\n options: GcsaCascaderOption[];\n placeholder?: string;\n disabled?: boolean;\n invalid?: boolean;\n changeOnSelect?: boolean;\n portalled?: boolean;\n onValueChange?: (value: string[]) => void;\n onChange?: (value: string[]) => void;\n className?: string;\n};\n\nexport function GcsaCascader({\n value = [],\n options,\n placeholder,\n disabled = false,\n invalid = false,\n changeOnSelect = false,\n portalled = true,\n onValueChange,\n onChange,\n className\n}: GcsaCascaderProps) {\n const messages = useGcsaLocaleMessages();\n const resolvedPlaceholder = placeholder ?? messages.selectPlaceholder;\n const [activePath, setActivePath] = useState(value);\n\n useEffect(() => {\n setActivePath(value);\n }, [value]);\n\n const columns = useMemo(() => {\n const result: GcsaCascaderOption[][] = [options];\n let current = options;\n for (const key of activePath) {\n const selected = current.find(option => option.value === key);\n if (!selected?.children?.length) break;\n result.push(selected.children);\n current = selected.children;\n }\n return result;\n }, [activePath, options]);\n\n const displayLabel = useMemo(() => {\n const labels: string[] = [];\n let current = options;\n for (const key of value) {\n const selected = current.find(option => option.value === key);\n if (!selected) break;\n labels.push(selected.label);\n current = selected.children ?? [];\n }\n return labels.join(' / ');\n }, [options, value]);\n\n const selectOption = (option: GcsaCascaderOption, depth: number) => {\n if (option.disabled) return;\n const next = [...activePath.slice(0, depth), option.value];\n setActivePath(next);\n if (!option.children?.length || changeOnSelect) {\n onValueChange?.(next);\n onChange?.(next);\n }\n };\n\n return (\n <GcsaPopover\n arrow={false}\n portalled={portalled}\n gutter={6}\n className=\"gcsa-cascader-popover\"\n trigger={\n <button\n type=\"button\"\n className={`gcsa-cascader__trigger gcsa-focus-ring${className ? ` ${className}` : ''}`}\n disabled={disabled}\n data-invalid={invalid || undefined}\n >\n <span className=\"gcsa-cascader__value\" data-placeholder={!displayLabel || undefined}>\n {displayLabel || resolvedPlaceholder}\n </span>\n <GcsaIcon name=\"chevronDown\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n >\n <div className=\"gcsa-cascader__panel\">\n {columns.map((column, depth) => (\n <div key={depth} className=\"gcsa-cascader__column\" role=\"menu\">\n {column.length ? (\n column.map(option => (\n <button\n key={option.value}\n type=\"button\"\n className={`gcsa-cascader__option gcsa-focus-ring${activePath[depth] === option.value ? ' gcsa-cascader__option--active' : ''}`}\n disabled={option.disabled}\n role=\"menuitem\"\n onClick={() => selectOption(option, depth)}\n >\n <span>{option.label}</span>\n {option.children?.length ? (\n <GcsaIcon name=\"chevronDown\" size=\"sm\" className=\"gcsa-cascader__arrow\" />\n ) : null}\n </button>\n ))\n ) : (\n <span className=\"gcsa-cascader__empty\">{messages.noOptions}</span>\n )}\n </div>\n ))}\n </div>\n </GcsaPopover>\n );\n}\n"],"names":["GcsaCascader","value","options","placeholder","disabled","invalid","changeOnSelect","portalled","onValueChange","onChange","className","messages","useGcsaLocaleMessages","resolvedPlaceholder","activePath","setActivePath","useState","useEffect","columns","useMemo","result","current","key","selected","option","_a","displayLabel","labels","selectOption","depth","next","jsx","GcsaPopover","jsxs","GcsaIcon","column"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GcsaCascader.js","sources":["../src/GcsaCascader.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport type { GcsaCascaderOption } from '@gcsa/console-core';\nimport { GcsaIcon } from './GcsaIcon';\nimport { GcsaPopover } from './GcsaPopover';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\n\nexport type GcsaCascaderProps = {\n value?: string[];\n options: GcsaCascaderOption[];\n placeholder?: string;\n disabled?: boolean;\n invalid?: boolean;\n changeOnSelect?: boolean;\n portalled?: boolean;\n onValueChange?: (value: string[]) => void;\n onChange?: (value: string[]) => void;\n className?: string;\n};\n\nexport function GcsaCascader({\n value = [],\n options,\n placeholder,\n disabled = false,\n invalid = false,\n changeOnSelect = false,\n portalled = true,\n onValueChange,\n onChange,\n className\n}: GcsaCascaderProps) {\n const messages = useGcsaLocaleMessages();\n const resolvedPlaceholder = placeholder ?? messages.selectPlaceholder;\n const [activePath, setActivePath] = useState(value);\n\n useEffect(() => {\n setActivePath(value);\n }, [value]);\n\n const columns = useMemo(() => {\n const result: GcsaCascaderOption[][] = [options];\n let current = options;\n for (const key of activePath) {\n const selected = current.find(option => option.value === key);\n if (!selected?.children?.length) break;\n result.push(selected.children);\n current = selected.children;\n }\n return result;\n }, [activePath, options]);\n\n const displayLabel = useMemo(() => {\n const labels: string[] = [];\n let current = options;\n for (const key of value) {\n const selected = current.find(option => option.value === key);\n if (!selected) break;\n labels.push(selected.label);\n current = selected.children ?? [];\n }\n return labels.join(' / ');\n }, [options, value]);\n\n const selectOption = (option: GcsaCascaderOption, depth: number) => {\n if (option.disabled) return;\n const next = [...activePath.slice(0, depth), option.value];\n setActivePath(next);\n if (!option.children?.length || changeOnSelect) {\n onValueChange?.(next);\n onChange?.(next);\n }\n };\n\n return (\n <GcsaPopover\n arrow={false}\n portalled={portalled}\n gutter={6}\n fitViewport\n className=\"gcsa-cascader-popover\"\n trigger={\n <button\n type=\"button\"\n className={`gcsa-cascader__trigger gcsa-focus-ring${className ? ` ${className}` : ''}`}\n disabled={disabled}\n data-invalid={invalid || undefined}\n >\n <span className=\"gcsa-cascader__value\" data-placeholder={!displayLabel || undefined}>\n {displayLabel || resolvedPlaceholder}\n </span>\n <GcsaIcon name=\"chevronDown\" size=\"sm\" aria-hidden=\"true\" />\n </button>\n }\n >\n <div className=\"gcsa-cascader__panel\">\n {columns.map((column, depth) => (\n <div key={depth} className=\"gcsa-cascader__column\" role=\"menu\">\n {column.length ? (\n column.map(option => (\n <button\n key={option.value}\n type=\"button\"\n className={`gcsa-cascader__option gcsa-focus-ring${activePath[depth] === option.value ? ' gcsa-cascader__option--active' : ''}`}\n disabled={option.disabled}\n role=\"menuitem\"\n onClick={() => selectOption(option, depth)}\n >\n <span>{option.label}</span>\n {option.children?.length ? (\n <GcsaIcon name=\"chevronDown\" size=\"sm\" className=\"gcsa-cascader__arrow\" />\n ) : null}\n </button>\n ))\n ) : (\n <span className=\"gcsa-cascader__empty\">{messages.noOptions}</span>\n )}\n </div>\n ))}\n </div>\n </GcsaPopover>\n );\n}\n"],"names":["GcsaCascader","value","options","placeholder","disabled","invalid","changeOnSelect","portalled","onValueChange","onChange","className","messages","useGcsaLocaleMessages","resolvedPlaceholder","activePath","setActivePath","useState","useEffect","columns","useMemo","result","current","key","selected","option","_a","displayLabel","labels","selectOption","depth","next","jsx","GcsaPopover","jsxs","GcsaIcon","column"],"mappings":"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"}
|
|
@@ -1,61 +1,63 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useContext as n, useState as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import { GCSA_MESSAGE_DURATION_MS as
|
|
5
|
-
import { GcsaConfigProviderContext as p, GcsaMessageContext as
|
|
6
|
-
import { GcsaLocaleContext as
|
|
7
|
-
import { GcsaRestoreDocumentThemeContext as
|
|
8
|
-
import { GcsaToastStack as
|
|
9
|
-
import { GcsaZIndexContext as x, readToastZIndex as v, createGcsaZIndexApi as
|
|
1
|
+
import { jsx as e, jsxs as _ } from "react/jsx-runtime";
|
|
2
|
+
import { useContext as n, useState as d, useRef as j, useMemo as k, useEffect as s } from "react";
|
|
3
|
+
import { createPortal as L } from "react-dom";
|
|
4
|
+
import { GCSA_MESSAGE_DURATION_MS as O } from "@gcsa/console-core";
|
|
5
|
+
import { GcsaConfigProviderContext as p, GcsaMessageContext as U, GcsaThemeContext as q } from "./hooks/useGcsaTheme.js";
|
|
6
|
+
import { GcsaLocaleContext as w } from "./hooks/useGcsaLocale.js";
|
|
7
|
+
import { GcsaRestoreDocumentThemeContext as B } from "./hooks/useDocumentThemeSync.js";
|
|
8
|
+
import { GcsaToastStack as F } from "./GcsaToastStack.js";
|
|
9
|
+
import { GcsaZIndexContext as x, readToastZIndex as v, createGcsaZIndexApi as H } from "./hooks/useGcsaZIndex.js";
|
|
10
10
|
import { GcsaComponentSizeContext as h } from "./hooks/useGcsaComponentSize.js";
|
|
11
|
-
function
|
|
11
|
+
function oe({
|
|
12
12
|
theme: o = "dark",
|
|
13
13
|
locale: C = "zh-CN",
|
|
14
14
|
syncDocument: G = !0,
|
|
15
|
-
size:
|
|
16
|
-
children:
|
|
15
|
+
size: P,
|
|
16
|
+
children: g
|
|
17
17
|
}) {
|
|
18
|
-
const
|
|
19
|
-
() =>
|
|
20
|
-
[
|
|
21
|
-
), r = !
|
|
18
|
+
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(
|
|
19
|
+
() => u ?? H(),
|
|
20
|
+
[u]
|
|
21
|
+
), r = !I && G, D = P ?? S ?? "md", l = () => {
|
|
22
22
|
Z(v());
|
|
23
|
-
},
|
|
24
|
-
|
|
23
|
+
}, a = (t, R) => {
|
|
24
|
+
l();
|
|
25
25
|
const f = ++y.current;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
success: (t) =>
|
|
31
|
-
error: (t) =>
|
|
32
|
-
info: (t) =>
|
|
26
|
+
m((i) => [...i, { id: f, message: t, type: R }].slice(-4)), setTimeout(() => {
|
|
27
|
+
m((i) => i.filter((b) => b.id !== f));
|
|
28
|
+
}, O);
|
|
29
|
+
}, N = {
|
|
30
|
+
success: (t) => a(t, "success"),
|
|
31
|
+
error: (t) => a(t, "error"),
|
|
32
|
+
info: (t) => a(t, "info")
|
|
33
33
|
};
|
|
34
|
-
return
|
|
34
|
+
return s(() => {
|
|
35
35
|
!r || typeof document > "u" || document.documentElement.setAttribute("data-gcsa-theme", o);
|
|
36
|
-
}, [o, r]),
|
|
37
|
-
|
|
38
|
-
}, []),
|
|
36
|
+
}, [o, r]), s(() => {
|
|
37
|
+
l();
|
|
38
|
+
}, []), s(() => {
|
|
39
|
+
M(!0);
|
|
40
|
+
}, []), s(() => {
|
|
39
41
|
if (r)
|
|
40
42
|
return () => {
|
|
41
43
|
if (!(typeof document > "u")) {
|
|
42
|
-
if (
|
|
43
|
-
|
|
44
|
+
if (c) {
|
|
45
|
+
c();
|
|
44
46
|
return;
|
|
45
47
|
}
|
|
46
48
|
document.documentElement.removeAttribute("data-gcsa-theme");
|
|
47
49
|
}
|
|
48
50
|
};
|
|
49
|
-
}, [r,
|
|
50
|
-
/* @__PURE__ */ e("div", { className: "gcsa-console-root", "data-gcsa-theme": o, children:
|
|
51
|
-
|
|
51
|
+
}, [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: [
|
|
52
|
+
/* @__PURE__ */ e("div", { className: "gcsa-console-root", "data-gcsa-theme": o, children: g }),
|
|
53
|
+
z ? L(
|
|
52
54
|
/* @__PURE__ */ e(
|
|
53
55
|
"div",
|
|
54
56
|
{
|
|
55
57
|
className: "gcsa-portal-scope gcsa-toast-portal",
|
|
56
58
|
"data-gcsa-theme": o,
|
|
57
59
|
style: { zIndex: A },
|
|
58
|
-
children: /* @__PURE__ */ e(
|
|
60
|
+
children: /* @__PURE__ */ e(F, { toasts: T })
|
|
59
61
|
}
|
|
60
62
|
),
|
|
61
63
|
document.body
|
|
@@ -63,6 +65,6 @@ function ee({
|
|
|
63
65
|
] }) }) }) }) }) });
|
|
64
66
|
}
|
|
65
67
|
export {
|
|
66
|
-
|
|
68
|
+
oe as GcsaConfigProvider
|
|
67
69
|
};
|
|
68
70
|
//# sourceMappingURL=GcsaConfigProvider.js.map
|
|
@@ -1 +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 {
|
|
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 [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/GcsaPopover.d.ts
CHANGED
|
@@ -13,6 +13,8 @@ export type GcsaPopoverProps = {
|
|
|
13
13
|
/** 受控开关;不传则为非受控 */
|
|
14
14
|
open?: boolean;
|
|
15
15
|
onOpenChange?: (open: boolean) => void;
|
|
16
|
+
/** 启用 size middleware,写入 --reference-width */
|
|
17
|
+
fitViewport?: boolean;
|
|
16
18
|
/** 预设尺寸;与 minWidth / maxWidth / width 可同时使用,inline 优先生效 */
|
|
17
19
|
size?: GcsaPopoverSize;
|
|
18
20
|
/** 面板宽度,如 560 或 '560px' */
|
|
@@ -27,4 +29,4 @@ export type GcsaPopoverProps = {
|
|
|
27
29
|
trigger?: ReactNode;
|
|
28
30
|
children?: ReactNode;
|
|
29
31
|
};
|
|
30
|
-
export declare function GcsaPopover({ title, triggerLabel, placement, arrow, portalled, gutter, open, onOpenChange, size, width, minWidth, maxWidth, contentClassName, className, footer, trigger, children }: GcsaPopoverProps): import("react").JSX.Element;
|
|
32
|
+
export declare function GcsaPopover({ title, triggerLabel, placement, arrow, portalled, gutter, open, onOpenChange, fitViewport, size, width, minWidth, maxWidth, contentClassName, className, footer, trigger, children }: GcsaPopoverProps): import("react").JSX.Element;
|
package/dist/GcsaPopover.js
CHANGED
|
@@ -1,57 +1,58 @@
|
|
|
1
1
|
import { jsx as e, jsxs as f } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as E, useMemo as R } from "react";
|
|
3
3
|
import { Popover as s } from "@ark-ui/react/popover";
|
|
4
|
-
import { Portal as
|
|
5
|
-
import { toCssLength as i, createGcsaPopupPositioning as
|
|
6
|
-
import { GcsaButton as
|
|
7
|
-
import { useGcsaLocaleMessages as
|
|
8
|
-
import { useGcsaPopupZIndex as
|
|
9
|
-
function
|
|
4
|
+
import { Portal as Z } from "@ark-ui/react/portal";
|
|
5
|
+
import { toCssLength as i, createGcsaPopupPositioning as q } from "@gcsa/console-core";
|
|
6
|
+
import { GcsaButton as D } from "./GcsaButton.js";
|
|
7
|
+
import { useGcsaLocaleMessages as F } from "./hooks/useGcsaLocale.js";
|
|
8
|
+
import { useGcsaPopupZIndex as H } from "./hooks/useGcsaPopupZIndex.js";
|
|
9
|
+
function oo({
|
|
10
10
|
title: l,
|
|
11
11
|
triggerLabel: h,
|
|
12
12
|
placement: _ = "bottom",
|
|
13
13
|
arrow: y = !0,
|
|
14
14
|
portalled: N = !0,
|
|
15
15
|
gutter: P = 8,
|
|
16
|
-
open:
|
|
16
|
+
open: a,
|
|
17
17
|
onOpenChange: t,
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
fitViewport: x = !1,
|
|
19
|
+
size: b = "default",
|
|
20
|
+
width: c,
|
|
20
21
|
minWidth: p,
|
|
21
22
|
maxWidth: d,
|
|
22
|
-
contentClassName:
|
|
23
|
-
className:
|
|
23
|
+
contentClassName: w,
|
|
24
|
+
className: C,
|
|
24
25
|
footer: n,
|
|
25
|
-
trigger:
|
|
26
|
-
children:
|
|
26
|
+
trigger: G,
|
|
27
|
+
children: M
|
|
27
28
|
}) {
|
|
28
|
-
const
|
|
29
|
+
const j = F(), { zIndex: r, onOpenChange: I } = H(), T = h ?? j.open, m = a !== void 0, [z, L] = E(!1), O = m ? a : z, S = G ?? /* @__PURE__ */ e(D, { variant: "secondary", children: T }), W = r == null ? void 0 : { zIndex: r }, A = R(() => {
|
|
29
30
|
const o = {};
|
|
30
31
|
r != null && (o.zIndex = r);
|
|
31
|
-
const u = i(
|
|
32
|
+
const u = i(c), g = i(p), v = i(d);
|
|
32
33
|
return u && (o.width = u), g && (o.minWidth = g), v && (o.maxWidth = v), Object.keys(o).length ? o : void 0;
|
|
33
|
-
}, [r,
|
|
34
|
+
}, [r, c, p, d]), B = [
|
|
34
35
|
"gcsa-popover",
|
|
35
36
|
"gcsa-ui-surface",
|
|
36
|
-
|
|
37
|
+
b === "lg" ? "gcsa-popover--lg" : void 0,
|
|
37
38
|
n ? "gcsa-popover--with-footer" : void 0,
|
|
38
|
-
|
|
39
|
-
].filter(Boolean).join(" "),
|
|
40
|
-
m ||
|
|
39
|
+
w
|
|
40
|
+
].filter(Boolean).join(" "), k = (o) => {
|
|
41
|
+
m || L(o), t == null || t(o), I(o);
|
|
41
42
|
};
|
|
42
|
-
return /* @__PURE__ */ e("span", { className:
|
|
43
|
+
return /* @__PURE__ */ e("span", { className: C, children: /* @__PURE__ */ f(
|
|
43
44
|
s.Root,
|
|
44
45
|
{
|
|
45
|
-
open:
|
|
46
|
+
open: O,
|
|
46
47
|
lazyMount: !0,
|
|
47
48
|
unmountOnExit: !0,
|
|
48
|
-
positioning:
|
|
49
|
-
onOpenChange: (o) =>
|
|
49
|
+
positioning: q({ placement: _, gutter: P, fitViewport: x }),
|
|
50
|
+
onOpenChange: (o) => k(o.open),
|
|
50
51
|
children: [
|
|
51
|
-
/* @__PURE__ */ e(s.Trigger, { asChild: !0, children:
|
|
52
|
-
/* @__PURE__ */ e(
|
|
52
|
+
/* @__PURE__ */ e(s.Trigger, { asChild: !0, children: S }),
|
|
53
|
+
/* @__PURE__ */ e(Z, { disabled: !N, children: /* @__PURE__ */ e(s.Positioner, { style: W, children: /* @__PURE__ */ f(s.Content, { className: B, style: A, children: [
|
|
53
54
|
l ? /* @__PURE__ */ e(s.Title, { className: "gcsa-popover__title", children: l }) : null,
|
|
54
|
-
/* @__PURE__ */ e("div", { className: "gcsa-popover__body", children:
|
|
55
|
+
/* @__PURE__ */ e("div", { className: "gcsa-popover__body", children: M }),
|
|
55
56
|
n ? /* @__PURE__ */ e("div", { className: "gcsa-popover__footer", children: n }) : null,
|
|
56
57
|
y ? /* @__PURE__ */ e(s.Arrow, { className: "gcsa-popover__arrow", children: /* @__PURE__ */ e(s.ArrowTip, { className: "gcsa-popover__arrow-tip" }) }) : null
|
|
57
58
|
] }) }) })
|
|
@@ -60,6 +61,6 @@ function $({
|
|
|
60
61
|
) });
|
|
61
62
|
}
|
|
62
63
|
export {
|
|
63
|
-
|
|
64
|
+
oo as GcsaPopover
|
|
64
65
|
};
|
|
65
66
|
//# sourceMappingURL=GcsaPopover.js.map
|
package/dist/GcsaPopover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GcsaPopover.js","sources":["../src/GcsaPopover.tsx"],"sourcesContent":["import { useMemo, useState, type CSSProperties, type ReactNode } from 'react';\nimport { Popover } from '@ark-ui/react/popover';\nimport { Portal } from '@ark-ui/react/portal';\nimport { createGcsaPopupPositioning, toCssLength } from '@gcsa/console-core';\nimport { GcsaButton } from './GcsaButton';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';\nimport type { GcsaTooltipPlacement } from './GcsaTooltip';\n\nexport type GcsaPopoverPlacement = GcsaTooltipPlacement;\n\n/** default=320px 上限;lg=表单类 Popover(560–680px,内容区可滚动) */\nexport type GcsaPopoverSize = 'default' | 'lg';\n\nexport type GcsaPopoverProps = {\n title?: string;\n triggerLabel?: string;\n placement?: GcsaPopoverPlacement;\n arrow?: boolean;\n portalled?: boolean;\n gutter?: number;\n /** 受控开关;不传则为非受控 */\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** 预设尺寸;与 minWidth / maxWidth / width 可同时使用,inline 优先生效 */\n size?: GcsaPopoverSize;\n /** 面板宽度,如 560 或 '560px' */\n width?: string | number;\n minWidth?: string | number;\n maxWidth?: string | number;\n /** 追加到 Popover.Content 的 class */\n contentClassName?: string;\n className?: string;\n /** 固定在面板底部、不参与 body 滚动的操作区 */\n footer?: ReactNode;\n trigger?: ReactNode;\n children?: ReactNode;\n};\n\nexport function GcsaPopover({\n title,\n triggerLabel,\n placement = 'bottom',\n arrow = true,\n portalled = true,\n gutter = 8,\n open,\n onOpenChange,\n size = 'default',\n width,\n minWidth,\n maxWidth,\n contentClassName,\n className,\n footer,\n trigger,\n children\n}: GcsaPopoverProps) {\n const messages = useGcsaLocaleMessages();\n const { zIndex, onOpenChange: onPopupOpenChange } = useGcsaPopupZIndex();\n const resolvedTriggerLabel = triggerLabel ?? messages.open;\n const isControlled = open !== undefined;\n const [internalOpen, setInternalOpen] = useState(false);\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const triggerNode = trigger ?? (\n <GcsaButton variant=\"secondary\">\n {resolvedTriggerLabel}\n </GcsaButton>\n );\n\n const positionerStyle = (zIndex == null ? undefined : { zIndex }) as CSSProperties | undefined;\n\n const contentStyle = useMemo(() => {\n const style: CSSProperties = {};\n if (zIndex != null) style.zIndex = zIndex;\n const resolvedWidth = toCssLength(width);\n const resolvedMinWidth = toCssLength(minWidth);\n const resolvedMaxWidth = toCssLength(maxWidth);\n if (resolvedWidth) style.width = resolvedWidth;\n if (resolvedMinWidth) style.minWidth = resolvedMinWidth;\n if (resolvedMaxWidth) style.maxWidth = resolvedMaxWidth;\n return Object.keys(style).length ? style : undefined;\n }, [zIndex, width, minWidth, maxWidth]);\n\n const contentClassNames = [\n 'gcsa-popover',\n 'gcsa-ui-surface',\n size === 'lg' ? 'gcsa-popover--lg' : undefined,\n footer ? 'gcsa-popover--with-footer' : undefined,\n contentClassName\n ]\n .filter(Boolean)\n .join(' ');\n\n const handleOpenChange = (nextOpen: boolean) => {\n if (!isControlled) {\n setInternalOpen(nextOpen);\n }\n onOpenChange?.(nextOpen);\n onPopupOpenChange(nextOpen);\n };\n\n return (\n <span className={className}>\n <Popover.Root\n open={resolvedOpen}\n lazyMount\n unmountOnExit\n positioning={createGcsaPopupPositioning({ placement, gutter })}\n onOpenChange={details => handleOpenChange(details.open)}\n >\n <Popover.Trigger asChild>{triggerNode}</Popover.Trigger>\n <Portal disabled={!portalled}>\n <Popover.Positioner style={positionerStyle}>\n <Popover.Content className={contentClassNames} style={contentStyle}>\n {title ? <Popover.Title className=\"gcsa-popover__title\">{title}</Popover.Title> : null}\n <div className=\"gcsa-popover__body\">{children}</div>\n {footer ? <div className=\"gcsa-popover__footer\">{footer}</div> : null}\n {arrow ? (\n <Popover.Arrow className=\"gcsa-popover__arrow\">\n <Popover.ArrowTip className=\"gcsa-popover__arrow-tip\" />\n </Popover.Arrow>\n ) : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n </span>\n );\n}\n"],"names":["GcsaPopover","title","triggerLabel","placement","arrow","portalled","gutter","open","onOpenChange","size","width","minWidth","maxWidth","contentClassName","className","footer","trigger","children","messages","useGcsaLocaleMessages","zIndex","onPopupOpenChange","useGcsaPopupZIndex","resolvedTriggerLabel","isControlled","internalOpen","setInternalOpen","useState","resolvedOpen","triggerNode","jsx","GcsaButton","positionerStyle","contentStyle","useMemo","style","resolvedWidth","toCssLength","resolvedMinWidth","resolvedMaxWidth","contentClassNames","handleOpenChange","nextOpen","jsxs","Popover","createGcsaPopupPositioning","details","Portal"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"GcsaPopover.js","sources":["../src/GcsaPopover.tsx"],"sourcesContent":["import { useMemo, useState, type CSSProperties, type ReactNode } from 'react';\nimport { Popover } from '@ark-ui/react/popover';\nimport { Portal } from '@ark-ui/react/portal';\nimport { createGcsaPopupPositioning, toCssLength } from '@gcsa/console-core';\nimport { GcsaButton } from './GcsaButton';\nimport { useGcsaLocaleMessages } from './hooks/useGcsaLocale';\nimport { useGcsaPopupZIndex } from './hooks/useGcsaPopupZIndex';\nimport type { GcsaTooltipPlacement } from './GcsaTooltip';\n\nexport type GcsaPopoverPlacement = GcsaTooltipPlacement;\n\n/** default=320px 上限;lg=表单类 Popover(560–680px,内容区可滚动) */\nexport type GcsaPopoverSize = 'default' | 'lg';\n\nexport type GcsaPopoverProps = {\n title?: string;\n triggerLabel?: string;\n placement?: GcsaPopoverPlacement;\n arrow?: boolean;\n portalled?: boolean;\n gutter?: number;\n /** 受控开关;不传则为非受控 */\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** 启用 size middleware,写入 --reference-width */\n fitViewport?: boolean;\n /** 预设尺寸;与 minWidth / maxWidth / width 可同时使用,inline 优先生效 */\n size?: GcsaPopoverSize;\n /** 面板宽度,如 560 或 '560px' */\n width?: string | number;\n minWidth?: string | number;\n maxWidth?: string | number;\n /** 追加到 Popover.Content 的 class */\n contentClassName?: string;\n className?: string;\n /** 固定在面板底部、不参与 body 滚动的操作区 */\n footer?: ReactNode;\n trigger?: ReactNode;\n children?: ReactNode;\n};\n\nexport function GcsaPopover({\n title,\n triggerLabel,\n placement = 'bottom',\n arrow = true,\n portalled = true,\n gutter = 8,\n open,\n onOpenChange,\n fitViewport = false,\n size = 'default',\n width,\n minWidth,\n maxWidth,\n contentClassName,\n className,\n footer,\n trigger,\n children\n}: GcsaPopoverProps) {\n const messages = useGcsaLocaleMessages();\n const { zIndex, onOpenChange: onPopupOpenChange } = useGcsaPopupZIndex();\n const resolvedTriggerLabel = triggerLabel ?? messages.open;\n const isControlled = open !== undefined;\n const [internalOpen, setInternalOpen] = useState(false);\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const triggerNode = trigger ?? (\n <GcsaButton variant=\"secondary\">\n {resolvedTriggerLabel}\n </GcsaButton>\n );\n\n const positionerStyle = (zIndex == null ? undefined : { zIndex }) as CSSProperties | undefined;\n\n const contentStyle = useMemo(() => {\n const style: CSSProperties = {};\n if (zIndex != null) style.zIndex = zIndex;\n const resolvedWidth = toCssLength(width);\n const resolvedMinWidth = toCssLength(minWidth);\n const resolvedMaxWidth = toCssLength(maxWidth);\n if (resolvedWidth) style.width = resolvedWidth;\n if (resolvedMinWidth) style.minWidth = resolvedMinWidth;\n if (resolvedMaxWidth) style.maxWidth = resolvedMaxWidth;\n return Object.keys(style).length ? style : undefined;\n }, [zIndex, width, minWidth, maxWidth]);\n\n const contentClassNames = [\n 'gcsa-popover',\n 'gcsa-ui-surface',\n size === 'lg' ? 'gcsa-popover--lg' : undefined,\n footer ? 'gcsa-popover--with-footer' : undefined,\n contentClassName\n ]\n .filter(Boolean)\n .join(' ');\n\n const handleOpenChange = (nextOpen: boolean) => {\n if (!isControlled) {\n setInternalOpen(nextOpen);\n }\n onOpenChange?.(nextOpen);\n onPopupOpenChange(nextOpen);\n };\n\n return (\n <span className={className}>\n <Popover.Root\n open={resolvedOpen}\n lazyMount\n unmountOnExit\n positioning={createGcsaPopupPositioning({ placement, gutter, fitViewport })}\n onOpenChange={details => handleOpenChange(details.open)}\n >\n <Popover.Trigger asChild>{triggerNode}</Popover.Trigger>\n <Portal disabled={!portalled}>\n <Popover.Positioner style={positionerStyle}>\n <Popover.Content className={contentClassNames} style={contentStyle}>\n {title ? <Popover.Title className=\"gcsa-popover__title\">{title}</Popover.Title> : null}\n <div className=\"gcsa-popover__body\">{children}</div>\n {footer ? <div className=\"gcsa-popover__footer\">{footer}</div> : null}\n {arrow ? (\n <Popover.Arrow className=\"gcsa-popover__arrow\">\n <Popover.ArrowTip className=\"gcsa-popover__arrow-tip\" />\n </Popover.Arrow>\n ) : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n </span>\n );\n}\n"],"names":["GcsaPopover","title","triggerLabel","placement","arrow","portalled","gutter","open","onOpenChange","fitViewport","size","width","minWidth","maxWidth","contentClassName","className","footer","trigger","children","messages","useGcsaLocaleMessages","zIndex","onPopupOpenChange","useGcsaPopupZIndex","resolvedTriggerLabel","isControlled","internalOpen","setInternalOpen","useState","resolvedOpen","triggerNode","jsx","GcsaButton","positionerStyle","contentStyle","useMemo","style","resolvedWidth","toCssLength","resolvedMinWidth","resolvedMaxWidth","contentClassNames","handleOpenChange","nextOpen","jsxs","Popover","createGcsaPopupPositioning","details","Portal"],"mappings":"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"}
|