@geomak/ui 6.9.0 → 6.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +282 -205
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +43 -1
- package/dist/index.d.ts +43 -1
- package/dist/index.js +89 -13
- package/dist/index.js.map +1 -1
- package/dist/styles.css +9 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var chunk255PCZIW_cjs = require('./chunk-255PCZIW.cjs');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var React18 = require('react');
|
|
6
6
|
var reactDom = require('react-dom');
|
|
7
7
|
var AvatarPrimitive = require('@radix-ui/react-avatar');
|
|
8
8
|
var Dialog = require('@radix-ui/react-dialog');
|
|
@@ -10,8 +10,8 @@ var framerMotion = require('framer-motion');
|
|
|
10
10
|
var TooltipPrimitive = require('@radix-ui/react-tooltip');
|
|
11
11
|
var TabsPrimitive = require('@radix-ui/react-tabs');
|
|
12
12
|
var AccordionPrimitive = require('@radix-ui/react-accordion');
|
|
13
|
-
var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
|
|
14
13
|
var Popover = require('@radix-ui/react-popover');
|
|
14
|
+
var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
|
|
15
15
|
var SwitchPrimitive = require('@radix-ui/react-switch');
|
|
16
16
|
var NavigationMenu = require('@radix-ui/react-navigation-menu');
|
|
17
17
|
var CheckboxPrimitive = require('@radix-ui/react-checkbox');
|
|
@@ -39,14 +39,14 @@ function _interopNamespace(e) {
|
|
|
39
39
|
return Object.freeze(n);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
var
|
|
42
|
+
var React18__default = /*#__PURE__*/_interopDefault(React18);
|
|
43
43
|
var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
|
|
44
44
|
var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
|
|
45
45
|
var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
|
|
46
46
|
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
|
|
47
47
|
var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
|
|
48
|
-
var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
|
|
49
48
|
var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
|
|
49
|
+
var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
|
|
50
50
|
var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
|
|
51
51
|
var NavigationMenu__namespace = /*#__PURE__*/_interopNamespace(NavigationMenu);
|
|
52
52
|
var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
|
|
@@ -214,8 +214,8 @@ Icon.Copy = Copy;
|
|
|
214
214
|
Icon.CircleStack = CircleStack;
|
|
215
215
|
var icons_default = Icon;
|
|
216
216
|
function Portal({ children, target }) {
|
|
217
|
-
const [resolved, setResolved] =
|
|
218
|
-
|
|
217
|
+
const [resolved, setResolved] = React18.useState(null);
|
|
218
|
+
React18.useEffect(() => {
|
|
219
219
|
if (target === null) {
|
|
220
220
|
setResolved(null);
|
|
221
221
|
return;
|
|
@@ -648,7 +648,7 @@ function IconButton({
|
|
|
648
648
|
className = "",
|
|
649
649
|
style
|
|
650
650
|
}) {
|
|
651
|
-
const colorScheme =
|
|
651
|
+
const colorScheme = React18.useMemo(() => {
|
|
652
652
|
if (type === "primary") {
|
|
653
653
|
return "bg-accent text-accent-fg hover:bg-accent-hover";
|
|
654
654
|
}
|
|
@@ -960,9 +960,9 @@ function Tooltip({
|
|
|
960
960
|
] }) });
|
|
961
961
|
}
|
|
962
962
|
var TooltipProvider = TooltipPrimitive__namespace.Provider;
|
|
963
|
-
var TabsContext =
|
|
963
|
+
var TabsContext = React18.createContext(null);
|
|
964
964
|
function useTabsContext() {
|
|
965
|
-
const ctx =
|
|
965
|
+
const ctx = React18.useContext(TabsContext);
|
|
966
966
|
if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Panel must be rendered inside <Tabs>.");
|
|
967
967
|
return ctx;
|
|
968
968
|
}
|
|
@@ -984,26 +984,26 @@ function Tabs({
|
|
|
984
984
|
children
|
|
985
985
|
}) {
|
|
986
986
|
const isControlled = value !== void 0;
|
|
987
|
-
const [internal, setInternal] =
|
|
987
|
+
const [internal, setInternal] = React18.useState(defaultValue);
|
|
988
988
|
const current = isControlled ? value : internal;
|
|
989
989
|
const reduced = !!framerMotion.useReducedMotion();
|
|
990
|
-
const indicatorId =
|
|
991
|
-
const select =
|
|
990
|
+
const indicatorId = React18.useId();
|
|
991
|
+
const select = React18.useCallback((next) => {
|
|
992
992
|
if (!isControlled) setInternal(next);
|
|
993
993
|
onValueChange?.(next);
|
|
994
994
|
}, [isControlled, onValueChange]);
|
|
995
|
-
const registry =
|
|
996
|
-
const orderRef =
|
|
997
|
-
const [, bump] =
|
|
998
|
-
const registerTab =
|
|
995
|
+
const registry = React18.useRef(/* @__PURE__ */ new Map());
|
|
996
|
+
const orderRef = React18.useRef(0);
|
|
997
|
+
const [, bump] = React18.useState(0);
|
|
998
|
+
const registerTab = React18.useCallback((val, meta) => {
|
|
999
999
|
const existing = registry.current.get(val);
|
|
1000
1000
|
registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
|
|
1001
1001
|
if (!existing) bump((v) => v + 1);
|
|
1002
1002
|
}, []);
|
|
1003
|
-
const unregisterTab =
|
|
1003
|
+
const unregisterTab = React18.useCallback((val) => {
|
|
1004
1004
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
1005
1005
|
}, []);
|
|
1006
|
-
const getTabs =
|
|
1006
|
+
const getTabs = React18.useCallback(() => [...registry.current.entries()].sort((a, b) => a[1].order - b[1].order).map(([val, m]) => ({ value: val, label: m.label, icon: m.icon, disabled: m.disabled })), []);
|
|
1007
1007
|
return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1008
1008
|
TabsPrimitive__namespace.Root,
|
|
1009
1009
|
{
|
|
@@ -1023,10 +1023,10 @@ function Tabs({
|
|
|
1023
1023
|
function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
1024
1024
|
const { variant, orientation, reduced, value } = useTabsContext();
|
|
1025
1025
|
const horizontal = orientation === "horizontal";
|
|
1026
|
-
const scrollRef =
|
|
1027
|
-
const [edges, setEdges] =
|
|
1026
|
+
const scrollRef = React18.useRef(null);
|
|
1027
|
+
const [edges, setEdges] = React18.useState({ start: false, end: false });
|
|
1028
1028
|
const scrollable = variant !== "segmented";
|
|
1029
|
-
|
|
1029
|
+
React18.useLayoutEffect(() => {
|
|
1030
1030
|
const el = scrollRef.current;
|
|
1031
1031
|
if (!el || !scrollable) return;
|
|
1032
1032
|
const update = () => {
|
|
@@ -1051,13 +1051,13 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
|
1051
1051
|
ro.disconnect();
|
|
1052
1052
|
};
|
|
1053
1053
|
}, [horizontal, scrollable, children]);
|
|
1054
|
-
const nudge =
|
|
1054
|
+
const nudge = React18.useCallback((dir) => {
|
|
1055
1055
|
const el = scrollRef.current;
|
|
1056
1056
|
if (!el) return;
|
|
1057
1057
|
const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
|
|
1058
1058
|
el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
|
|
1059
1059
|
}, [horizontal, reduced]);
|
|
1060
|
-
|
|
1060
|
+
React18.useLayoutEffect(() => {
|
|
1061
1061
|
const el = scrollRef.current;
|
|
1062
1062
|
if (!el || !scrollable) return;
|
|
1063
1063
|
const active = el.querySelector("[role=tab][data-state=active]");
|
|
@@ -1115,9 +1115,9 @@ function Chevron({ side, orientation, onClick }) {
|
|
|
1115
1115
|
function OverflowMenu() {
|
|
1116
1116
|
const { getTabs, value, select, orientation } = useTabsContext();
|
|
1117
1117
|
const horizontal = orientation === "horizontal";
|
|
1118
|
-
const [open, setOpen] =
|
|
1119
|
-
const wrapRef =
|
|
1120
|
-
const timer =
|
|
1118
|
+
const [open, setOpen] = React18.useState(false);
|
|
1119
|
+
const wrapRef = React18.useRef(null);
|
|
1120
|
+
const timer = React18.useRef(null);
|
|
1121
1121
|
const openNow = () => {
|
|
1122
1122
|
if (timer.current) clearTimeout(timer.current);
|
|
1123
1123
|
setOpen(true);
|
|
@@ -1125,7 +1125,7 @@ function OverflowMenu() {
|
|
|
1125
1125
|
const closeSoon = () => {
|
|
1126
1126
|
timer.current = setTimeout(() => setOpen(false), 160);
|
|
1127
1127
|
};
|
|
1128
|
-
|
|
1128
|
+
React18.useLayoutEffect(() => {
|
|
1129
1129
|
if (!open) return;
|
|
1130
1130
|
const onDoc = (e) => {
|
|
1131
1131
|
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
|
|
@@ -1206,7 +1206,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
|
|
|
1206
1206
|
const isActive = active === value;
|
|
1207
1207
|
const horizontal = orientation === "horizontal";
|
|
1208
1208
|
const sz = SIZE[size];
|
|
1209
|
-
|
|
1209
|
+
React18.useLayoutEffect(() => {
|
|
1210
1210
|
registerTab(value, { label: children, icon, disabled });
|
|
1211
1211
|
return () => unregisterTab(value);
|
|
1212
1212
|
}, [value, children, icon, disabled, registerTab, unregisterTab]);
|
|
@@ -1404,7 +1404,7 @@ function Tree({
|
|
|
1404
1404
|
item.key
|
|
1405
1405
|
)) });
|
|
1406
1406
|
}
|
|
1407
|
-
var AccordionCtx =
|
|
1407
|
+
var AccordionCtx = React18.createContext({ variant: "separated" });
|
|
1408
1408
|
function Accordion2({
|
|
1409
1409
|
children,
|
|
1410
1410
|
type = "single",
|
|
@@ -1463,7 +1463,7 @@ var Chevron2 = /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
1463
1463
|
}
|
|
1464
1464
|
);
|
|
1465
1465
|
function AccordionItem({ value, title, icon, children, disabled, className = "" }) {
|
|
1466
|
-
const { variant } =
|
|
1466
|
+
const { variant } = React18.useContext(AccordionCtx);
|
|
1467
1467
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1468
1468
|
AccordionPrimitive__namespace.Item,
|
|
1469
1469
|
{
|
|
@@ -1522,7 +1522,7 @@ function Breadcrumbs({
|
|
|
1522
1522
|
className = "",
|
|
1523
1523
|
style
|
|
1524
1524
|
}) {
|
|
1525
|
-
const [expanded, setExpanded] =
|
|
1525
|
+
const [expanded, setExpanded] = React18.useState(false);
|
|
1526
1526
|
const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
|
|
1527
1527
|
const visible = [];
|
|
1528
1528
|
if (shouldCollapse) {
|
|
@@ -1666,7 +1666,7 @@ function Kbd({
|
|
|
1666
1666
|
style
|
|
1667
1667
|
}) {
|
|
1668
1668
|
if (keys && keys.length > 0) {
|
|
1669
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1669
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(React18__default.default.Fragment, { children: [
|
|
1670
1670
|
i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
|
|
1671
1671
|
/* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
|
|
1672
1672
|
] }, `${k}-${i}`)) });
|
|
@@ -1739,13 +1739,13 @@ function CardCarousel({
|
|
|
1739
1739
|
className = "",
|
|
1740
1740
|
style
|
|
1741
1741
|
}) {
|
|
1742
|
-
const scrollerRef =
|
|
1743
|
-
const slides =
|
|
1744
|
-
const [active, setActive] =
|
|
1745
|
-
const [atStart, setAtStart] =
|
|
1746
|
-
const [atEnd, setAtEnd] =
|
|
1742
|
+
const scrollerRef = React18.useRef(null);
|
|
1743
|
+
const slides = React18__default.default.Children.toArray(children);
|
|
1744
|
+
const [active, setActive] = React18.useState(0);
|
|
1745
|
+
const [atStart, setAtStart] = React18.useState(true);
|
|
1746
|
+
const [atEnd, setAtEnd] = React18.useState(false);
|
|
1747
1747
|
const width = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
|
|
1748
|
-
const update =
|
|
1748
|
+
const update = React18.useCallback(() => {
|
|
1749
1749
|
const el = scrollerRef.current;
|
|
1750
1750
|
if (!el) return;
|
|
1751
1751
|
el.clientWidth;
|
|
@@ -1755,7 +1755,7 @@ function CardCarousel({
|
|
|
1755
1755
|
const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
|
|
1756
1756
|
setActive(Math.round(el.scrollLeft / slideW));
|
|
1757
1757
|
}, [gap]);
|
|
1758
|
-
|
|
1758
|
+
React18.useEffect(() => {
|
|
1759
1759
|
update();
|
|
1760
1760
|
const el = scrollerRef.current;
|
|
1761
1761
|
if (!el) return;
|
|
@@ -1888,7 +1888,7 @@ function FAB({
|
|
|
1888
1888
|
className = "",
|
|
1889
1889
|
style
|
|
1890
1890
|
}) {
|
|
1891
|
-
const [open, setOpen] =
|
|
1891
|
+
const [open, setOpen] = React18.useState(false);
|
|
1892
1892
|
const reduced = framerMotion.useReducedMotion();
|
|
1893
1893
|
const hasDial = !!actions && actions.length > 0;
|
|
1894
1894
|
const bottom = position.startsWith("bottom");
|
|
@@ -1959,7 +1959,83 @@ function FAB({
|
|
|
1959
1959
|
}
|
|
1960
1960
|
);
|
|
1961
1961
|
}
|
|
1962
|
-
|
|
1962
|
+
function PopConfirm({
|
|
1963
|
+
children,
|
|
1964
|
+
title,
|
|
1965
|
+
description,
|
|
1966
|
+
onConfirm,
|
|
1967
|
+
onCancel,
|
|
1968
|
+
confirmText = "Confirm",
|
|
1969
|
+
cancelText = "Cancel",
|
|
1970
|
+
tone = "default",
|
|
1971
|
+
icon,
|
|
1972
|
+
side = "top",
|
|
1973
|
+
open,
|
|
1974
|
+
onOpenChange,
|
|
1975
|
+
className = ""
|
|
1976
|
+
}) {
|
|
1977
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React18.useState(false);
|
|
1978
|
+
const [loading, setLoading] = React18.useState(false);
|
|
1979
|
+
const isOpen = open ?? uncontrolledOpen;
|
|
1980
|
+
const setOpen = (next) => {
|
|
1981
|
+
onOpenChange?.(next);
|
|
1982
|
+
if (open === void 0) setUncontrolledOpen(next);
|
|
1983
|
+
};
|
|
1984
|
+
const handleConfirm = async () => {
|
|
1985
|
+
try {
|
|
1986
|
+
setLoading(true);
|
|
1987
|
+
await onConfirm?.();
|
|
1988
|
+
setOpen(false);
|
|
1989
|
+
} finally {
|
|
1990
|
+
setLoading(false);
|
|
1991
|
+
}
|
|
1992
|
+
};
|
|
1993
|
+
const handleCancel = () => {
|
|
1994
|
+
onCancel?.();
|
|
1995
|
+
setOpen(false);
|
|
1996
|
+
};
|
|
1997
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: isOpen, onOpenChange: (o) => o ? setOpen(true) : handleCancel(), children: [
|
|
1998
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children }),
|
|
1999
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2000
|
+
Popover__namespace.Content,
|
|
2001
|
+
{
|
|
2002
|
+
side,
|
|
2003
|
+
sideOffset: 8,
|
|
2004
|
+
collisionPadding: 12,
|
|
2005
|
+
className: [
|
|
2006
|
+
"z-[400] w-64 rounded-lg border border-border bg-surface p-3.5 shadow-lg",
|
|
2007
|
+
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
2008
|
+
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
2009
|
+
className
|
|
2010
|
+
].filter(Boolean).join(" "),
|
|
2011
|
+
children: [
|
|
2012
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5", children: [
|
|
2013
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center ${tone === "danger" ? "text-status-error" : "text-status-warning"}`, children: icon }),
|
|
2014
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
|
|
2015
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
|
|
2016
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-foreground-secondary leading-snug", children: description })
|
|
2017
|
+
] })
|
|
2018
|
+
] }),
|
|
2019
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
|
|
2020
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { content: cancelText, size: "sm", variant: "ghost", onClick: handleCancel }),
|
|
2021
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2022
|
+
Button,
|
|
2023
|
+
{
|
|
2024
|
+
content: confirmText,
|
|
2025
|
+
size: "sm",
|
|
2026
|
+
variant: tone === "danger" ? "danger" : "primary",
|
|
2027
|
+
loading,
|
|
2028
|
+
onClick: handleConfirm
|
|
2029
|
+
}
|
|
2030
|
+
)
|
|
2031
|
+
] }),
|
|
2032
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-surface" })
|
|
2033
|
+
]
|
|
2034
|
+
}
|
|
2035
|
+
) })
|
|
2036
|
+
] });
|
|
2037
|
+
}
|
|
2038
|
+
var NotificationContext = React18.createContext({
|
|
1963
2039
|
open: () => void 0,
|
|
1964
2040
|
close: () => void 0
|
|
1965
2041
|
});
|
|
@@ -2017,26 +2093,26 @@ function NotificationItem({
|
|
|
2017
2093
|
onClose,
|
|
2018
2094
|
reduced
|
|
2019
2095
|
}) {
|
|
2020
|
-
const [paused, setPaused] =
|
|
2096
|
+
const [paused, setPaused] = React18.useState(false);
|
|
2021
2097
|
const duration = n.duration ?? 4e3;
|
|
2022
2098
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
2023
2099
|
const showProgress = !reduced && isAutoDismissing;
|
|
2024
|
-
const timerRef =
|
|
2025
|
-
const startTimeRef =
|
|
2026
|
-
const remainingRef =
|
|
2027
|
-
const clearTimer =
|
|
2100
|
+
const timerRef = React18.useRef(null);
|
|
2101
|
+
const startTimeRef = React18.useRef(0);
|
|
2102
|
+
const remainingRef = React18.useRef(duration);
|
|
2103
|
+
const clearTimer = React18.useCallback(() => {
|
|
2028
2104
|
if (timerRef.current !== null) {
|
|
2029
2105
|
clearTimeout(timerRef.current);
|
|
2030
2106
|
timerRef.current = null;
|
|
2031
2107
|
}
|
|
2032
2108
|
}, []);
|
|
2033
|
-
const scheduleDismiss =
|
|
2109
|
+
const scheduleDismiss = React18.useCallback((ms) => {
|
|
2034
2110
|
clearTimer();
|
|
2035
2111
|
if (!isAutoDismissing) return;
|
|
2036
2112
|
startTimeRef.current = Date.now();
|
|
2037
2113
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
2038
2114
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
2039
|
-
|
|
2115
|
+
React18.useEffect(() => {
|
|
2040
2116
|
if (paused || !isAutoDismissing) return;
|
|
2041
2117
|
scheduleDismiss(remainingRef.current);
|
|
2042
2118
|
return clearTimer;
|
|
@@ -2119,15 +2195,15 @@ function NotificationProvider({
|
|
|
2119
2195
|
children,
|
|
2120
2196
|
position = "top-right"
|
|
2121
2197
|
}) {
|
|
2122
|
-
const [notifications, setNotifications] =
|
|
2198
|
+
const [notifications, setNotifications] = React18.useState([]);
|
|
2123
2199
|
const reduced = framerMotion.useReducedMotion();
|
|
2124
|
-
const open =
|
|
2200
|
+
const open = React18.useCallback((payload) => {
|
|
2125
2201
|
setNotifications((prev) => [
|
|
2126
2202
|
...prev,
|
|
2127
2203
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
2128
2204
|
]);
|
|
2129
2205
|
}, []);
|
|
2130
|
-
const close =
|
|
2206
|
+
const close = React18.useCallback((id) => {
|
|
2131
2207
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
2132
2208
|
}, []);
|
|
2133
2209
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -2156,7 +2232,7 @@ function NotificationProvider({
|
|
|
2156
2232
|
] });
|
|
2157
2233
|
}
|
|
2158
2234
|
function useNotification() {
|
|
2159
|
-
const { open } =
|
|
2235
|
+
const { open } = React18.useContext(NotificationContext);
|
|
2160
2236
|
return {
|
|
2161
2237
|
info: (props) => open({ type: "info", ...props }),
|
|
2162
2238
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -2273,10 +2349,10 @@ function FadingBase({
|
|
|
2273
2349
|
isMounted = false,
|
|
2274
2350
|
children
|
|
2275
2351
|
}) {
|
|
2276
|
-
const [shouldRender, setShouldRender] =
|
|
2277
|
-
const [visible, setVisible] =
|
|
2278
|
-
const timerRef =
|
|
2279
|
-
|
|
2352
|
+
const [shouldRender, setShouldRender] = React18.useState(isMounted);
|
|
2353
|
+
const [visible, setVisible] = React18.useState(false);
|
|
2354
|
+
const timerRef = React18.useRef(null);
|
|
2355
|
+
React18.useEffect(() => {
|
|
2280
2356
|
if (isMounted) {
|
|
2281
2357
|
setShouldRender(true);
|
|
2282
2358
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -2374,8 +2450,8 @@ function ScalableContainer({
|
|
|
2374
2450
|
togglePosition = "top-right",
|
|
2375
2451
|
className = ""
|
|
2376
2452
|
}) {
|
|
2377
|
-
const containerRef =
|
|
2378
|
-
const [internalScaled, setInternalScaled] =
|
|
2453
|
+
const containerRef = React18.useRef(null);
|
|
2454
|
+
const [internalScaled, setInternalScaled] = React18.useState(false);
|
|
2379
2455
|
const isScaled = expanded ?? internalScaled;
|
|
2380
2456
|
const reduced = framerMotion.useReducedMotion();
|
|
2381
2457
|
const onToggle = () => {
|
|
@@ -2513,17 +2589,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2513
2589
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap gap-2 ${className}`.trim(), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
|
|
2514
2590
|
}
|
|
2515
2591
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2516
|
-
const [activeIndex, setActiveIndex] =
|
|
2517
|
-
const [indexPool, setIndexPool] =
|
|
2518
|
-
const cardRefs =
|
|
2519
|
-
const getIndexes =
|
|
2592
|
+
const [activeIndex, setActiveIndex] = React18.useState(0);
|
|
2593
|
+
const [indexPool, setIndexPool] = React18.useState([]);
|
|
2594
|
+
const cardRefs = React18.useRef([]);
|
|
2595
|
+
const getIndexes = React18.useMemo(() => {
|
|
2520
2596
|
let nextIndex = activeIndex + 1;
|
|
2521
2597
|
let previousIndex = activeIndex - 1;
|
|
2522
2598
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2523
2599
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2524
2600
|
return { previousIndex, nextIndex };
|
|
2525
2601
|
}, [activeIndex, items.length]);
|
|
2526
|
-
|
|
2602
|
+
React18.useEffect(() => {
|
|
2527
2603
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2528
2604
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2529
2605
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2696,8 +2772,8 @@ function writeDismissed(key) {
|
|
|
2696
2772
|
}
|
|
2697
2773
|
}
|
|
2698
2774
|
function useTargetBbox(ref) {
|
|
2699
|
-
const [bbox, setBbox] =
|
|
2700
|
-
|
|
2775
|
+
const [bbox, setBbox] = React18.useState(null);
|
|
2776
|
+
React18.useLayoutEffect(() => {
|
|
2701
2777
|
const el = ref?.current;
|
|
2702
2778
|
if (!el) {
|
|
2703
2779
|
setBbox(null);
|
|
@@ -2727,7 +2803,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2727
2803
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2728
2804
|
}
|
|
2729
2805
|
function useFocusTrap(containerRef, active) {
|
|
2730
|
-
|
|
2806
|
+
React18.useEffect(() => {
|
|
2731
2807
|
if (!active) return;
|
|
2732
2808
|
const el = containerRef.current;
|
|
2733
2809
|
if (!el) return;
|
|
@@ -2766,16 +2842,16 @@ function Wizard({
|
|
|
2766
2842
|
onComplete,
|
|
2767
2843
|
onSkip
|
|
2768
2844
|
}) {
|
|
2769
|
-
const tooltipRef =
|
|
2770
|
-
const tooltipTitleId =
|
|
2771
|
-
const tooltipBodyId =
|
|
2845
|
+
const tooltipRef = React18.useRef(null);
|
|
2846
|
+
const tooltipTitleId = React18.useId();
|
|
2847
|
+
const tooltipBodyId = React18.useId();
|
|
2772
2848
|
const reduced = framerMotion.useReducedMotion();
|
|
2773
|
-
const [open, setOpen] =
|
|
2774
|
-
const [activeIndex, setActiveIndex] =
|
|
2849
|
+
const [open, setOpen] = React18.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
2850
|
+
const [activeIndex, setActiveIndex] = React18.useState(0);
|
|
2775
2851
|
const step = steps[activeIndex];
|
|
2776
2852
|
const bbox = useTargetBbox(step?.stepRef);
|
|
2777
2853
|
useFocusTrap(tooltipRef, open);
|
|
2778
|
-
|
|
2854
|
+
React18.useEffect(() => {
|
|
2779
2855
|
if (!open || !dismissible) return;
|
|
2780
2856
|
const onKey = (e) => {
|
|
2781
2857
|
if (e.key === "Escape") {
|
|
@@ -2786,12 +2862,12 @@ function Wizard({
|
|
|
2786
2862
|
document.addEventListener("keydown", onKey);
|
|
2787
2863
|
return () => document.removeEventListener("keydown", onKey);
|
|
2788
2864
|
}, [open, dismissible]);
|
|
2789
|
-
const handleSkip =
|
|
2865
|
+
const handleSkip = React18.useCallback(() => {
|
|
2790
2866
|
writeDismissed(storageKey);
|
|
2791
2867
|
setOpen(false);
|
|
2792
2868
|
onSkip?.();
|
|
2793
2869
|
}, [storageKey, onSkip]);
|
|
2794
|
-
const handleComplete =
|
|
2870
|
+
const handleComplete = React18.useCallback(() => {
|
|
2795
2871
|
writeDismissed(storageKey);
|
|
2796
2872
|
setOpen(false);
|
|
2797
2873
|
onComplete?.();
|
|
@@ -3062,7 +3138,7 @@ function Field({
|
|
|
3062
3138
|
);
|
|
3063
3139
|
}
|
|
3064
3140
|
var SearchIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
|
|
3065
|
-
var SearchInput =
|
|
3141
|
+
var SearchInput = React18__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
3066
3142
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3067
3143
|
"div",
|
|
3068
3144
|
{
|
|
@@ -3116,11 +3192,11 @@ function MultiTagRow({
|
|
|
3116
3192
|
labelFor,
|
|
3117
3193
|
onRemove
|
|
3118
3194
|
}) {
|
|
3119
|
-
const wrapRef =
|
|
3120
|
-
const measureRef =
|
|
3121
|
-
const [visibleCount, setVisibleCount] =
|
|
3195
|
+
const wrapRef = React18.useRef(null);
|
|
3196
|
+
const measureRef = React18.useRef(null);
|
|
3197
|
+
const [visibleCount, setVisibleCount] = React18.useState(values.length);
|
|
3122
3198
|
const key = values.map(String).join("|");
|
|
3123
|
-
|
|
3199
|
+
React18.useLayoutEffect(() => {
|
|
3124
3200
|
const wrap = wrapRef.current;
|
|
3125
3201
|
const measure = measureRef.current;
|
|
3126
3202
|
if (!wrap || !measure) return;
|
|
@@ -3214,16 +3290,16 @@ function Dropdown({
|
|
|
3214
3290
|
size = "md",
|
|
3215
3291
|
className = ""
|
|
3216
3292
|
}) {
|
|
3217
|
-
const [open, setOpen] =
|
|
3218
|
-
const [selectedItems, setSelectedItems] =
|
|
3219
|
-
const [searchTerm, setSearchTerm] =
|
|
3220
|
-
const [innerItems, setInnerItems] =
|
|
3221
|
-
const errorId =
|
|
3293
|
+
const [open, setOpen] = React18.useState(false);
|
|
3294
|
+
const [selectedItems, setSelectedItems] = React18.useState([]);
|
|
3295
|
+
const [searchTerm, setSearchTerm] = React18.useState("");
|
|
3296
|
+
const [innerItems, setInnerItems] = React18.useState([]);
|
|
3297
|
+
const errorId = React18.useId();
|
|
3222
3298
|
const hasError = errorMessage != null;
|
|
3223
|
-
|
|
3299
|
+
React18.useEffect(() => {
|
|
3224
3300
|
setInnerItems(items);
|
|
3225
3301
|
}, [items]);
|
|
3226
|
-
|
|
3302
|
+
React18.useEffect(() => {
|
|
3227
3303
|
if (isMultiselect && Array.isArray(value)) {
|
|
3228
3304
|
setSelectedItems(value);
|
|
3229
3305
|
}
|
|
@@ -3548,7 +3624,7 @@ function TableBody({
|
|
|
3548
3624
|
expandRow,
|
|
3549
3625
|
getRowKey
|
|
3550
3626
|
}) {
|
|
3551
|
-
const [expanded, setExpanded] =
|
|
3627
|
+
const [expanded, setExpanded] = React18.useState(() => /* @__PURE__ */ new Set());
|
|
3552
3628
|
const reduced = framerMotion.useReducedMotion();
|
|
3553
3629
|
const toggleRow = (rowKey) => {
|
|
3554
3630
|
setExpanded((prev) => {
|
|
@@ -3563,7 +3639,7 @@ function TableBody({
|
|
|
3563
3639
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3564
3640
|
const rowKey = getRowKey(row, i);
|
|
3565
3641
|
const isExpanded = expanded.has(rowKey);
|
|
3566
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3642
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React18__default.default.Fragment, { children: [
|
|
3567
3643
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3568
3644
|
"tr",
|
|
3569
3645
|
{
|
|
@@ -3619,9 +3695,9 @@ function Pagination({
|
|
|
3619
3695
|
const matchedOption = picker.find(
|
|
3620
3696
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3621
3697
|
);
|
|
3622
|
-
const [perPageKey, setPerPageKey] =
|
|
3698
|
+
const [perPageKey, setPerPageKey] = React18.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3623
3699
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3624
|
-
|
|
3700
|
+
React18.useEffect(() => {
|
|
3625
3701
|
if (serverSide && options.perPage != null) {
|
|
3626
3702
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3627
3703
|
if (next) setPerPageKey(next.key);
|
|
@@ -3685,14 +3761,14 @@ function Table({
|
|
|
3685
3761
|
className = "",
|
|
3686
3762
|
style
|
|
3687
3763
|
}) {
|
|
3688
|
-
const searchRef =
|
|
3689
|
-
const [searchTerm, setSearchTerm] =
|
|
3690
|
-
const [perPage, setPerPage] =
|
|
3764
|
+
const searchRef = React18.useRef(null);
|
|
3765
|
+
const [searchTerm, setSearchTerm] = React18.useState("");
|
|
3766
|
+
const [perPage, setPerPage] = React18.useState(
|
|
3691
3767
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3692
3768
|
);
|
|
3693
|
-
const [activePage, setActivePage] =
|
|
3769
|
+
const [activePage, setActivePage] = React18.useState(0);
|
|
3694
3770
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3695
|
-
const filteredRows =
|
|
3771
|
+
const filteredRows = React18.useMemo(() => {
|
|
3696
3772
|
if (isServerSide || !searchTerm) return rows;
|
|
3697
3773
|
const term = searchTerm.toLowerCase();
|
|
3698
3774
|
return rows.filter(
|
|
@@ -3701,29 +3777,29 @@ function Table({
|
|
|
3701
3777
|
)
|
|
3702
3778
|
);
|
|
3703
3779
|
}, [rows, searchTerm, isServerSide]);
|
|
3704
|
-
const datasets =
|
|
3780
|
+
const datasets = React18.useMemo(() => {
|
|
3705
3781
|
if (isServerSide) return [rows];
|
|
3706
3782
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3707
3783
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3708
|
-
const MAX_PAGE =
|
|
3784
|
+
const MAX_PAGE = React18.useMemo(() => {
|
|
3709
3785
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3710
3786
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3711
3787
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3712
3788
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3713
3789
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3714
|
-
const currentPageRows =
|
|
3790
|
+
const currentPageRows = React18.useMemo(() => {
|
|
3715
3791
|
if (isServerSide) return rows;
|
|
3716
3792
|
return datasets[activePage] ?? [];
|
|
3717
3793
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3718
|
-
|
|
3794
|
+
React18.useEffect(() => {
|
|
3719
3795
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3720
3796
|
setPerPage(pagination.perPage);
|
|
3721
3797
|
}
|
|
3722
3798
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3723
|
-
|
|
3799
|
+
React18.useEffect(() => {
|
|
3724
3800
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3725
3801
|
}, [isServerSide, pagination.perPage]);
|
|
3726
|
-
|
|
3802
|
+
React18.useEffect(() => {
|
|
3727
3803
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3728
3804
|
setActivePage(pagination.page - 1);
|
|
3729
3805
|
}, [isServerSide, pagination.page]);
|
|
@@ -3807,7 +3883,7 @@ function TableSkeletonBody({
|
|
|
3807
3883
|
)) });
|
|
3808
3884
|
}
|
|
3809
3885
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
3810
|
-
const id =
|
|
3886
|
+
const id = React18.useId();
|
|
3811
3887
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3812
3888
|
SwitchPrimitive__namespace.Root,
|
|
3813
3889
|
{
|
|
@@ -3991,7 +4067,7 @@ function Sidebar({
|
|
|
3991
4067
|
}
|
|
3992
4068
|
) });
|
|
3993
4069
|
}
|
|
3994
|
-
var MegaMenuContext =
|
|
4070
|
+
var MegaMenuContext = React18.createContext({ align: "start" });
|
|
3995
4071
|
function MegaMenu({
|
|
3996
4072
|
children,
|
|
3997
4073
|
align = "start",
|
|
@@ -4022,7 +4098,7 @@ function MegaMenu({
|
|
|
4022
4098
|
}
|
|
4023
4099
|
var TOP_ITEM = "group/top inline-flex items-center gap-1.5 h-10 px-3 rounded-md text-sm font-medium select-none text-foreground-secondary hover:text-foreground hover:bg-surface-raised data-[state=open]:text-accent data-[active]:text-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
|
|
4024
4100
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
4025
|
-
const { align } =
|
|
4101
|
+
const { align } = React18.useContext(MegaMenuContext);
|
|
4026
4102
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
4027
4103
|
if (!children) {
|
|
4028
4104
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -4107,8 +4183,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
4107
4183
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
4108
4184
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
|
|
4109
4185
|
}
|
|
4110
|
-
var elementsOfType = (children, type) =>
|
|
4111
|
-
(c) =>
|
|
4186
|
+
var elementsOfType = (children, type) => React18__default.default.Children.toArray(children).filter(
|
|
4187
|
+
(c) => React18__default.default.isValidElement(c) && c.type === type
|
|
4112
4188
|
);
|
|
4113
4189
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4114
4190
|
"svg",
|
|
@@ -4145,9 +4221,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
4145
4221
|
);
|
|
4146
4222
|
}
|
|
4147
4223
|
function MobilePanel({ panel, onNavigate }) {
|
|
4148
|
-
const nodes =
|
|
4224
|
+
const nodes = React18__default.default.Children.toArray(panel.props.children);
|
|
4149
4225
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
4150
|
-
if (!
|
|
4226
|
+
if (!React18__default.default.isValidElement(node)) return null;
|
|
4151
4227
|
const el = node;
|
|
4152
4228
|
if (el.type === MegaMenuSection) {
|
|
4153
4229
|
const { title, children } = el.props;
|
|
@@ -4166,8 +4242,8 @@ function MegaMenuMobile({
|
|
|
4166
4242
|
children,
|
|
4167
4243
|
label
|
|
4168
4244
|
}) {
|
|
4169
|
-
const [open, setOpen] =
|
|
4170
|
-
const [expanded, setExpanded] =
|
|
4245
|
+
const [open, setOpen] = React18.useState(false);
|
|
4246
|
+
const [expanded, setExpanded] = React18.useState(null);
|
|
4171
4247
|
const items = elementsOfType(children, MegaMenuItem);
|
|
4172
4248
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
4173
4249
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4240,17 +4316,17 @@ function AppShell({
|
|
|
4240
4316
|
children,
|
|
4241
4317
|
className = ""
|
|
4242
4318
|
}) {
|
|
4243
|
-
const [expanded, setExpanded] =
|
|
4244
|
-
const [isMobile, setIsMobile] =
|
|
4245
|
-
const [mobileOpen, setMobileOpen] =
|
|
4246
|
-
|
|
4319
|
+
const [expanded, setExpanded] = React18.useState(sidebarDefaultExpanded);
|
|
4320
|
+
const [isMobile, setIsMobile] = React18.useState(false);
|
|
4321
|
+
const [mobileOpen, setMobileOpen] = React18.useState(false);
|
|
4322
|
+
React18.useEffect(() => {
|
|
4247
4323
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
4248
4324
|
const update = (e) => setIsMobile(e.matches);
|
|
4249
4325
|
update(mq);
|
|
4250
4326
|
mq.addEventListener("change", update);
|
|
4251
4327
|
return () => mq.removeEventListener("change", update);
|
|
4252
4328
|
}, []);
|
|
4253
|
-
|
|
4329
|
+
React18.useEffect(() => {
|
|
4254
4330
|
if (!isMobile) setMobileOpen(false);
|
|
4255
4331
|
}, [isMobile]);
|
|
4256
4332
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -4440,10 +4516,10 @@ function ThemeProvider({
|
|
|
4440
4516
|
className = "",
|
|
4441
4517
|
style
|
|
4442
4518
|
}) {
|
|
4443
|
-
const id =
|
|
4519
|
+
const id = React18__default.default.useId().replace(/:/g, "");
|
|
4444
4520
|
const scopeClass = `geo-th-${id}`;
|
|
4445
|
-
const divRef =
|
|
4446
|
-
|
|
4521
|
+
const divRef = React18.useRef(null);
|
|
4522
|
+
React18.useEffect(() => {
|
|
4447
4523
|
const el = divRef.current;
|
|
4448
4524
|
if (!el) return;
|
|
4449
4525
|
if (colorScheme === "auto") return;
|
|
@@ -4458,8 +4534,8 @@ function ThemeProvider({
|
|
|
4458
4534
|
}
|
|
4459
4535
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4460
4536
|
}, [colorScheme]);
|
|
4461
|
-
const lightVars =
|
|
4462
|
-
const darkVarStr =
|
|
4537
|
+
const lightVars = React18.useMemo(() => toCssVars(theme), [theme]);
|
|
4538
|
+
const darkVarStr = React18.useMemo(() => {
|
|
4463
4539
|
if (!darkTheme) return "";
|
|
4464
4540
|
const dvars = toCssVars(darkTheme);
|
|
4465
4541
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4499,7 +4575,7 @@ function TextInput({
|
|
|
4499
4575
|
prefix,
|
|
4500
4576
|
suffix
|
|
4501
4577
|
}) {
|
|
4502
|
-
const errorId =
|
|
4578
|
+
const errorId = React18.useId();
|
|
4503
4579
|
const hasError = errorMessage != null;
|
|
4504
4580
|
const hasAdornment = prefix != null || suffix != null;
|
|
4505
4581
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4569,7 +4645,7 @@ function NumberInput({
|
|
|
4569
4645
|
readOnly = false,
|
|
4570
4646
|
precision
|
|
4571
4647
|
}) {
|
|
4572
|
-
const errorId =
|
|
4648
|
+
const errorId = React18.useId();
|
|
4573
4649
|
const hasError = errorMessage != null;
|
|
4574
4650
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4575
4651
|
const round = (n) => {
|
|
@@ -4700,8 +4776,8 @@ function Password({
|
|
|
4700
4776
|
showIcon,
|
|
4701
4777
|
hideIcon
|
|
4702
4778
|
}) {
|
|
4703
|
-
const [visible, setVisible] =
|
|
4704
|
-
const errorId =
|
|
4779
|
+
const [visible, setVisible] = React18.useState(false);
|
|
4780
|
+
const errorId = React18.useId();
|
|
4705
4781
|
const hasError = errorMessage != null;
|
|
4706
4782
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4707
4783
|
Field,
|
|
@@ -4774,7 +4850,7 @@ function Checkbox({
|
|
|
4774
4850
|
}) {
|
|
4775
4851
|
const isChecked = checked ?? value ?? false;
|
|
4776
4852
|
const labelFirst = labelPosition === "left";
|
|
4777
|
-
const errorId =
|
|
4853
|
+
const errorId = React18.useId();
|
|
4778
4854
|
const hasError = errorMessage != null;
|
|
4779
4855
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4780
4856
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -4882,8 +4958,8 @@ function RadioGroup({
|
|
|
4882
4958
|
className,
|
|
4883
4959
|
errorMessage
|
|
4884
4960
|
}) {
|
|
4885
|
-
const errorId =
|
|
4886
|
-
const groupId =
|
|
4961
|
+
const errorId = React18.useId();
|
|
4962
|
+
const groupId = React18.useId();
|
|
4887
4963
|
const hasError = errorMessage != null;
|
|
4888
4964
|
const labelFirst = labelPosition === "left";
|
|
4889
4965
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4983,11 +5059,11 @@ function Switch({
|
|
|
4983
5059
|
disabled,
|
|
4984
5060
|
errorMessage
|
|
4985
5061
|
}) {
|
|
4986
|
-
const id =
|
|
4987
|
-
const errorId =
|
|
5062
|
+
const id = React18.useId();
|
|
5063
|
+
const errorId = React18.useId();
|
|
4988
5064
|
const hasError = errorMessage != null;
|
|
4989
5065
|
const isControlled = checked !== void 0;
|
|
4990
|
-
const [internal, setInternal] =
|
|
5066
|
+
const [internal, setInternal] = React18.useState(defaultChecked);
|
|
4991
5067
|
const isOn = isControlled ? checked : internal;
|
|
4992
5068
|
const handle = (c) => {
|
|
4993
5069
|
if (!isControlled) setInternal(c);
|
|
@@ -5060,19 +5136,19 @@ function AutoComplete({
|
|
|
5060
5136
|
required,
|
|
5061
5137
|
htmlFor
|
|
5062
5138
|
}) {
|
|
5063
|
-
const errorId =
|
|
5139
|
+
const errorId = React18.useId();
|
|
5064
5140
|
const hasError = errorMessage != null;
|
|
5065
|
-
const [term, setTerm] =
|
|
5066
|
-
const [open, setOpen] =
|
|
5067
|
-
const [asyncItems, setAsyncItems] =
|
|
5068
|
-
const [loading, setLoading] =
|
|
5141
|
+
const [term, setTerm] = React18.useState("");
|
|
5142
|
+
const [open, setOpen] = React18.useState(false);
|
|
5143
|
+
const [asyncItems, setAsyncItems] = React18.useState([]);
|
|
5144
|
+
const [loading, setLoading] = React18.useState(false);
|
|
5069
5145
|
const isAsync = typeof onSearch === "function";
|
|
5070
|
-
const debounceRef =
|
|
5071
|
-
const requestIdRef =
|
|
5146
|
+
const debounceRef = React18.useRef(null);
|
|
5147
|
+
const requestIdRef = React18.useRef(0);
|
|
5072
5148
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
5073
5149
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
5074
5150
|
) : [];
|
|
5075
|
-
|
|
5151
|
+
React18.useEffect(() => {
|
|
5076
5152
|
if (!isAsync) return;
|
|
5077
5153
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5078
5154
|
if (!term.trim()) {
|
|
@@ -5228,15 +5304,15 @@ function TreeSelect({
|
|
|
5228
5304
|
defaultExpandedKeys = [],
|
|
5229
5305
|
size = "md"
|
|
5230
5306
|
}) {
|
|
5231
|
-
const errorId =
|
|
5307
|
+
const errorId = React18.useId();
|
|
5232
5308
|
const hasError = errorMessage != null;
|
|
5233
|
-
const [open, setOpen] =
|
|
5234
|
-
const [expanded, setExpanded] =
|
|
5235
|
-
const [activeIndex, setActiveIndex] =
|
|
5236
|
-
const listRef =
|
|
5237
|
-
const visible =
|
|
5238
|
-
const didSyncOnOpenRef =
|
|
5239
|
-
|
|
5309
|
+
const [open, setOpen] = React18.useState(false);
|
|
5310
|
+
const [expanded, setExpanded] = React18.useState(() => new Set(defaultExpandedKeys));
|
|
5311
|
+
const [activeIndex, setActiveIndex] = React18.useState(0);
|
|
5312
|
+
const listRef = React18.useRef(null);
|
|
5313
|
+
const visible = React18.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
5314
|
+
const didSyncOnOpenRef = React18.useRef(false);
|
|
5315
|
+
React18.useEffect(() => {
|
|
5240
5316
|
if (!open) {
|
|
5241
5317
|
didSyncOnOpenRef.current = false;
|
|
5242
5318
|
return;
|
|
@@ -5246,7 +5322,7 @@ function TreeSelect({
|
|
|
5246
5322
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
5247
5323
|
didSyncOnOpenRef.current = true;
|
|
5248
5324
|
}, [open, value]);
|
|
5249
|
-
const selectedNode =
|
|
5325
|
+
const selectedNode = React18.useMemo(
|
|
5250
5326
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
5251
5327
|
[items, value]
|
|
5252
5328
|
);
|
|
@@ -5477,11 +5553,11 @@ function FileInput({
|
|
|
5477
5553
|
required,
|
|
5478
5554
|
icon
|
|
5479
5555
|
}) {
|
|
5480
|
-
const inputRef =
|
|
5481
|
-
const errorId =
|
|
5482
|
-
const [files, setFiles] =
|
|
5483
|
-
const [dragging, setDragging] =
|
|
5484
|
-
const [sizeError, setSizeError] =
|
|
5556
|
+
const inputRef = React18.useRef(null);
|
|
5557
|
+
const errorId = React18.useId();
|
|
5558
|
+
const [files, setFiles] = React18.useState([]);
|
|
5559
|
+
const [dragging, setDragging] = React18.useState(false);
|
|
5560
|
+
const [sizeError, setSizeError] = React18.useState(null);
|
|
5485
5561
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5486
5562
|
const openPicker = () => {
|
|
5487
5563
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5672,30 +5748,30 @@ function DatePicker({
|
|
|
5672
5748
|
size = "md",
|
|
5673
5749
|
className = ""
|
|
5674
5750
|
}) {
|
|
5675
|
-
const errorId =
|
|
5751
|
+
const errorId = React18.useId();
|
|
5676
5752
|
const hasError = errorMessage != null;
|
|
5677
|
-
const [open, setOpen] =
|
|
5678
|
-
const [viewMonth, setViewMonth] =
|
|
5679
|
-
const [focusDate, setFocusDate] =
|
|
5680
|
-
const [view, setView] =
|
|
5681
|
-
const gridRef =
|
|
5682
|
-
|
|
5753
|
+
const [open, setOpen] = React18.useState(false);
|
|
5754
|
+
const [viewMonth, setViewMonth] = React18.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
5755
|
+
const [focusDate, setFocusDate] = React18.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
5756
|
+
const [view, setView] = React18.useState("days");
|
|
5757
|
+
const gridRef = React18.useRef(null);
|
|
5758
|
+
React18.useEffect(() => {
|
|
5683
5759
|
if (!open) return;
|
|
5684
5760
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5685
5761
|
setViewMonth(startOfMonth(target));
|
|
5686
5762
|
setFocusDate(target);
|
|
5687
5763
|
setView("days");
|
|
5688
5764
|
}, [open, value]);
|
|
5689
|
-
|
|
5765
|
+
React18.useEffect(() => {
|
|
5690
5766
|
if (!open) return;
|
|
5691
5767
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
|
|
5692
5768
|
cell?.focus();
|
|
5693
5769
|
}, [open, focusDate]);
|
|
5694
|
-
const weekdays =
|
|
5770
|
+
const weekdays = React18.useMemo(() => {
|
|
5695
5771
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5696
5772
|
return ordered;
|
|
5697
5773
|
}, [weekStartsOn]);
|
|
5698
|
-
const grid =
|
|
5774
|
+
const grid = React18.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5699
5775
|
const isDisabled = (d) => {
|
|
5700
5776
|
if (min && d < min) return true;
|
|
5701
5777
|
if (max && d > max) return true;
|
|
@@ -5985,10 +6061,10 @@ function TextArea({
|
|
|
5985
6061
|
style,
|
|
5986
6062
|
inputStyle
|
|
5987
6063
|
}) {
|
|
5988
|
-
const errorId =
|
|
6064
|
+
const errorId = React18.useId();
|
|
5989
6065
|
const hasError = errorMessage != null;
|
|
5990
|
-
const ref =
|
|
5991
|
-
|
|
6066
|
+
const ref = React18.useRef(null);
|
|
6067
|
+
React18.useLayoutEffect(() => {
|
|
5992
6068
|
if (!autoGrow) return;
|
|
5993
6069
|
const el = ref.current;
|
|
5994
6070
|
if (!el) return;
|
|
@@ -6058,11 +6134,11 @@ function SegmentedControl({
|
|
|
6058
6134
|
"aria-label": ariaLabel
|
|
6059
6135
|
}) {
|
|
6060
6136
|
const sz = SIZE5[size];
|
|
6061
|
-
const groupId =
|
|
6062
|
-
const errorId =
|
|
6137
|
+
const groupId = React18.useId();
|
|
6138
|
+
const errorId = React18.useId();
|
|
6063
6139
|
const hasError = errorMessage != null;
|
|
6064
6140
|
const isControlled = value !== void 0;
|
|
6065
|
-
const [internal, setInternal] =
|
|
6141
|
+
const [internal, setInternal] = React18.useState(defaultValue);
|
|
6066
6142
|
const current = isControlled ? value : internal;
|
|
6067
6143
|
const handle = (v) => {
|
|
6068
6144
|
if (!v) return;
|
|
@@ -6156,14 +6232,14 @@ function Slider({
|
|
|
6156
6232
|
name,
|
|
6157
6233
|
htmlFor
|
|
6158
6234
|
}) {
|
|
6159
|
-
const errorId =
|
|
6235
|
+
const errorId = React18.useId();
|
|
6160
6236
|
const hasError = errorMessage != null;
|
|
6161
6237
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
6162
|
-
const [internal, setInternal] =
|
|
6238
|
+
const [internal, setInternal] = React18.useState(
|
|
6163
6239
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
6164
6240
|
);
|
|
6165
6241
|
const current = toArray(value) ?? internal;
|
|
6166
|
-
const [dragging, setDragging] =
|
|
6242
|
+
const [dragging, setDragging] = React18.useState(false);
|
|
6167
6243
|
const emit = (arr) => {
|
|
6168
6244
|
setInternal(arr);
|
|
6169
6245
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -6258,11 +6334,11 @@ function TagsInput({
|
|
|
6258
6334
|
validate,
|
|
6259
6335
|
separators = ["Enter", ","]
|
|
6260
6336
|
}) {
|
|
6261
|
-
const errorId =
|
|
6262
|
-
const inputRef =
|
|
6263
|
-
const [internal, setInternal] =
|
|
6264
|
-
const [draft, setDraft] =
|
|
6265
|
-
const [localError, setLocalError] =
|
|
6337
|
+
const errorId = React18.useId();
|
|
6338
|
+
const inputRef = React18.useRef(null);
|
|
6339
|
+
const [internal, setInternal] = React18.useState(defaultValue ?? []);
|
|
6340
|
+
const [draft, setDraft] = React18.useState("");
|
|
6341
|
+
const [localError, setLocalError] = React18.useState(null);
|
|
6266
6342
|
const tags = value ?? internal;
|
|
6267
6343
|
const hasError = errorMessage != null || localError != null;
|
|
6268
6344
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -6393,9 +6469,9 @@ function OtpInput({
|
|
|
6393
6469
|
className,
|
|
6394
6470
|
groupAfter
|
|
6395
6471
|
}) {
|
|
6396
|
-
const errorId =
|
|
6472
|
+
const errorId = React18.useId();
|
|
6397
6473
|
const hasError = errorMessage != null;
|
|
6398
|
-
const refs =
|
|
6474
|
+
const refs = React18.useRef([]);
|
|
6399
6475
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
6400
6476
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
6401
6477
|
const emit = (next) => {
|
|
@@ -6444,7 +6520,7 @@ function OtpInput({
|
|
|
6444
6520
|
emit(valid.join(""));
|
|
6445
6521
|
focusBox(valid.length);
|
|
6446
6522
|
};
|
|
6447
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6523
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React18__default.default.Fragment, { children: [
|
|
6448
6524
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6449
6525
|
"input",
|
|
6450
6526
|
{
|
|
@@ -6502,9 +6578,9 @@ function Rating({
|
|
|
6502
6578
|
className,
|
|
6503
6579
|
required
|
|
6504
6580
|
}) {
|
|
6505
|
-
const errorId =
|
|
6506
|
-
const [internal, setInternal] =
|
|
6507
|
-
const [hover, setHover] =
|
|
6581
|
+
const errorId = React18.useId();
|
|
6582
|
+
const [internal, setInternal] = React18.useState(defaultValue);
|
|
6583
|
+
const [hover, setHover] = React18.useState(null);
|
|
6508
6584
|
const current = value ?? internal;
|
|
6509
6585
|
const display2 = hover ?? current;
|
|
6510
6586
|
const interactive = !readOnly && !disabled;
|
|
@@ -6627,9 +6703,9 @@ function TimePicker({
|
|
|
6627
6703
|
required,
|
|
6628
6704
|
style
|
|
6629
6705
|
}) {
|
|
6630
|
-
const errorId =
|
|
6706
|
+
const errorId = React18.useId();
|
|
6631
6707
|
const hasError = errorMessage != null;
|
|
6632
|
-
const [open, setOpen] =
|
|
6708
|
+
const [open, setOpen] = React18.useState(false);
|
|
6633
6709
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6634
6710
|
const update = (next) => {
|
|
6635
6711
|
const merged = { ...parsed, ...next };
|
|
@@ -6753,13 +6829,13 @@ function DateRangePicker({
|
|
|
6753
6829
|
required,
|
|
6754
6830
|
style
|
|
6755
6831
|
}) {
|
|
6756
|
-
const errorId =
|
|
6832
|
+
const errorId = React18.useId();
|
|
6757
6833
|
const hasError = errorMessage != null;
|
|
6758
|
-
const [open, setOpen] =
|
|
6759
|
-
const [leftMonth, setLeftMonth] =
|
|
6760
|
-
const [pendingStart, setPendingStart] =
|
|
6761
|
-
const [hoverDate, setHoverDate] =
|
|
6762
|
-
const weekdays =
|
|
6834
|
+
const [open, setOpen] = React18.useState(false);
|
|
6835
|
+
const [leftMonth, setLeftMonth] = React18.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
|
|
6836
|
+
const [pendingStart, setPendingStart] = React18.useState(null);
|
|
6837
|
+
const [hoverDate, setHoverDate] = React18.useState(null);
|
|
6838
|
+
const weekdays = React18.useMemo(
|
|
6763
6839
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
6764
6840
|
[weekStartsOn]
|
|
6765
6841
|
);
|
|
@@ -6935,10 +7011,10 @@ function ColorPicker({
|
|
|
6935
7011
|
required,
|
|
6936
7012
|
placeholder = "Pick a colour\u2026"
|
|
6937
7013
|
}) {
|
|
6938
|
-
const errorId =
|
|
7014
|
+
const errorId = React18.useId();
|
|
6939
7015
|
const hasError = errorMessage != null;
|
|
6940
|
-
const [open, setOpen] =
|
|
6941
|
-
const [draft, setDraft] =
|
|
7016
|
+
const [open, setOpen] = React18.useState(false);
|
|
7017
|
+
const [draft, setDraft] = React18.useState(value);
|
|
6942
7018
|
const valid = HEX_RE.test(value);
|
|
6943
7019
|
const pick = (hex) => {
|
|
6944
7020
|
onChange?.(hex);
|
|
@@ -7325,11 +7401,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
7325
7401
|
|
|
7326
7402
|
// src/form/useForm.ts
|
|
7327
7403
|
function useForm(options = {}) {
|
|
7328
|
-
const ref =
|
|
7404
|
+
const ref = React18.useRef(null);
|
|
7329
7405
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
7330
7406
|
const store = ref.current;
|
|
7331
|
-
|
|
7332
|
-
const make =
|
|
7407
|
+
React18.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7408
|
+
const make = React18.useCallback(
|
|
7333
7409
|
(kind) => (name, rules) => {
|
|
7334
7410
|
if (rules !== void 0) store.setRule(name, rules);
|
|
7335
7411
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -7358,9 +7434,9 @@ function useForm(options = {}) {
|
|
|
7358
7434
|
fieldTarget: make("target")
|
|
7359
7435
|
};
|
|
7360
7436
|
}
|
|
7361
|
-
var FormContext =
|
|
7437
|
+
var FormContext = React18.createContext(null);
|
|
7362
7438
|
function useFormStore() {
|
|
7363
|
-
const store =
|
|
7439
|
+
const store = React18.useContext(FormContext);
|
|
7364
7440
|
if (!store) {
|
|
7365
7441
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
7366
7442
|
}
|
|
@@ -7374,8 +7450,8 @@ function Form({
|
|
|
7374
7450
|
children,
|
|
7375
7451
|
...rest
|
|
7376
7452
|
}) {
|
|
7377
|
-
const ref =
|
|
7378
|
-
const bypass =
|
|
7453
|
+
const ref = React18.useRef(null);
|
|
7454
|
+
const bypass = React18.useRef(false);
|
|
7379
7455
|
const handleSubmit = async (e) => {
|
|
7380
7456
|
if (bypass.current) {
|
|
7381
7457
|
bypass.current = false;
|
|
@@ -7427,12 +7503,12 @@ function useFormField(name, options = {}) {
|
|
|
7427
7503
|
const store = useFormStore();
|
|
7428
7504
|
const { kind = "value", rules } = options;
|
|
7429
7505
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
7430
|
-
|
|
7506
|
+
React18.useEffect(() => {
|
|
7431
7507
|
return () => {
|
|
7432
7508
|
if (rules !== void 0) store.removeRule(name);
|
|
7433
7509
|
};
|
|
7434
7510
|
}, [store, name]);
|
|
7435
|
-
const snap =
|
|
7511
|
+
const snap = React18.useSyncExternalStore(
|
|
7436
7512
|
store.subscribe,
|
|
7437
7513
|
() => store.getFieldSnapshot(name)
|
|
7438
7514
|
);
|
|
@@ -7444,7 +7520,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
7444
7520
|
}
|
|
7445
7521
|
function useFieldArray(name) {
|
|
7446
7522
|
const store = useFormStore();
|
|
7447
|
-
|
|
7523
|
+
React18.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7448
7524
|
const arr = store.getValue(name) ?? [];
|
|
7449
7525
|
const keys = store.getKeys(name);
|
|
7450
7526
|
return {
|
|
@@ -7567,7 +7643,7 @@ function CreditCardForm({
|
|
|
7567
7643
|
className = "",
|
|
7568
7644
|
style
|
|
7569
7645
|
}) {
|
|
7570
|
-
const initial =
|
|
7646
|
+
const initial = React18.useRef({
|
|
7571
7647
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7572
7648
|
name: defaultValue?.name ?? "",
|
|
7573
7649
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7576,7 +7652,7 @@ function CreditCardForm({
|
|
|
7576
7652
|
const form = useForm({ initialValues: initial });
|
|
7577
7653
|
const numberStr = String(form.values.number ?? "");
|
|
7578
7654
|
const brand = detectBrand(numberStr);
|
|
7579
|
-
|
|
7655
|
+
React18.useEffect(() => {
|
|
7580
7656
|
onChange?.(toCard(form.values));
|
|
7581
7657
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7582
7658
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7720,6 +7796,7 @@ exports.NumberInput = NumberInput;
|
|
|
7720
7796
|
exports.OpaqueGridCard = OpaqueGridCard;
|
|
7721
7797
|
exports.OtpInput = OtpInput;
|
|
7722
7798
|
exports.Password = Password;
|
|
7799
|
+
exports.PopConfirm = PopConfirm;
|
|
7723
7800
|
exports.Portal = Portal;
|
|
7724
7801
|
exports.RadioGroup = RadioGroup;
|
|
7725
7802
|
exports.Rating = Rating;
|