@geomak/ui 6.8.0 → 6.9.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 +302 -204
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +50 -1
- package/dist/index.d.ts +50 -1
- package/dist/index.js +111 -14
- package/dist/index.js.map +1 -1
- package/dist/styles.css +31 -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 React17 = 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');
|
|
@@ -39,7 +39,7 @@ function _interopNamespace(e) {
|
|
|
39
39
|
return Object.freeze(n);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
var
|
|
42
|
+
var React17__default = /*#__PURE__*/_interopDefault(React17);
|
|
43
43
|
var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
|
|
44
44
|
var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
|
|
45
45
|
var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
|
|
@@ -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] = React17.useState(null);
|
|
218
|
+
React17.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 = React17.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 = React17.createContext(null);
|
|
964
964
|
function useTabsContext() {
|
|
965
|
-
const ctx =
|
|
965
|
+
const ctx = React17.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] = React17.useState(defaultValue);
|
|
988
988
|
const current = isControlled ? value : internal;
|
|
989
989
|
const reduced = !!framerMotion.useReducedMotion();
|
|
990
|
-
const indicatorId =
|
|
991
|
-
const select =
|
|
990
|
+
const indicatorId = React17.useId();
|
|
991
|
+
const select = React17.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 = React17.useRef(/* @__PURE__ */ new Map());
|
|
996
|
+
const orderRef = React17.useRef(0);
|
|
997
|
+
const [, bump] = React17.useState(0);
|
|
998
|
+
const registerTab = React17.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 = React17.useCallback((val) => {
|
|
1004
1004
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
1005
1005
|
}, []);
|
|
1006
|
-
const getTabs =
|
|
1006
|
+
const getTabs = React17.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 = React17.useRef(null);
|
|
1027
|
+
const [edges, setEdges] = React17.useState({ start: false, end: false });
|
|
1028
1028
|
const scrollable = variant !== "segmented";
|
|
1029
|
-
|
|
1029
|
+
React17.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 = React17.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
|
+
React17.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] = React17.useState(false);
|
|
1119
|
+
const wrapRef = React17.useRef(null);
|
|
1120
|
+
const timer = React17.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
|
+
React17.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
|
+
React17.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 = React17.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 } = React17.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] = React17.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(React17__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 = React17.useRef(null);
|
|
1743
|
+
const slides = React17__default.default.Children.toArray(children);
|
|
1744
|
+
const [active, setActive] = React17.useState(0);
|
|
1745
|
+
const [atStart, setAtStart] = React17.useState(true);
|
|
1746
|
+
const [atEnd, setAtEnd] = React17.useState(false);
|
|
1747
1747
|
const width = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
|
|
1748
|
-
const update =
|
|
1748
|
+
const update = React17.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
|
+
React17.useEffect(() => {
|
|
1759
1759
|
update();
|
|
1760
1760
|
const el = scrollerRef.current;
|
|
1761
1761
|
if (!el) return;
|
|
@@ -1862,7 +1862,104 @@ function Statistic({
|
|
|
1862
1862
|
}
|
|
1863
1863
|
);
|
|
1864
1864
|
}
|
|
1865
|
-
var
|
|
1865
|
+
var POS = {
|
|
1866
|
+
"bottom-right": "bottom-6 right-6 items-end",
|
|
1867
|
+
"bottom-left": "bottom-6 left-6 items-start",
|
|
1868
|
+
"top-right": "top-6 right-6 items-end",
|
|
1869
|
+
"top-left": "top-6 left-6 items-start"
|
|
1870
|
+
};
|
|
1871
|
+
var SIZE4 = {
|
|
1872
|
+
md: "h-12 w-12",
|
|
1873
|
+
lg: "h-14 w-14"
|
|
1874
|
+
};
|
|
1875
|
+
var TONE3 = {
|
|
1876
|
+
accent: "bg-accent text-accent-fg hover:bg-accent-hover",
|
|
1877
|
+
neutral: "bg-foreground-secondary text-background hover:opacity-90"
|
|
1878
|
+
};
|
|
1879
|
+
function FAB({
|
|
1880
|
+
icon,
|
|
1881
|
+
label,
|
|
1882
|
+
onClick,
|
|
1883
|
+
actions,
|
|
1884
|
+
position = "bottom-right",
|
|
1885
|
+
size = "lg",
|
|
1886
|
+
tone = "accent",
|
|
1887
|
+
fixed = true,
|
|
1888
|
+
className = "",
|
|
1889
|
+
style
|
|
1890
|
+
}) {
|
|
1891
|
+
const [open, setOpen] = React17.useState(false);
|
|
1892
|
+
const reduced = framerMotion.useReducedMotion();
|
|
1893
|
+
const hasDial = !!actions && actions.length > 0;
|
|
1894
|
+
const bottom = position.startsWith("bottom");
|
|
1895
|
+
const alignRight = position.endsWith("right");
|
|
1896
|
+
const dial = hasDial && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1897
|
+
framerMotion.motion.ul,
|
|
1898
|
+
{
|
|
1899
|
+
className: `flex flex-col gap-3 ${bottom ? "mb-3" : "mt-3 order-last"} ${alignRight ? "items-end" : "items-start"}`,
|
|
1900
|
+
initial: "hidden",
|
|
1901
|
+
animate: "show",
|
|
1902
|
+
exit: "hidden",
|
|
1903
|
+
variants: { show: { transition: { staggerChildren: reduced ? 0 : 0.04, staggerDirection: bottom ? -1 : 1 } } },
|
|
1904
|
+
children: actions.map((a, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1905
|
+
framerMotion.motion.li,
|
|
1906
|
+
{
|
|
1907
|
+
className: `flex items-center gap-2 ${alignRight ? "flex-row" : "flex-row-reverse"}`,
|
|
1908
|
+
variants: {
|
|
1909
|
+
hidden: { opacity: 0, y: reduced ? 0 : bottom ? 8 : -8, scale: reduced ? 1 : 0.9 },
|
|
1910
|
+
show: { opacity: 1, y: 0, scale: 1 }
|
|
1911
|
+
},
|
|
1912
|
+
children: [
|
|
1913
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-md bg-surface px-2 py-1 text-xs font-medium text-foreground shadow-md border border-border whitespace-nowrap", children: a.label }),
|
|
1914
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1915
|
+
"button",
|
|
1916
|
+
{
|
|
1917
|
+
type: "button",
|
|
1918
|
+
"aria-label": a.label,
|
|
1919
|
+
onClick: (e) => {
|
|
1920
|
+
a.onClick?.(e);
|
|
1921
|
+
setOpen(false);
|
|
1922
|
+
},
|
|
1923
|
+
className: "flex h-11 w-11 items-center justify-center rounded-full bg-surface text-foreground-secondary shadow-lg border border-border transition hover:text-foreground hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
1924
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-5 w-5 inline-flex items-center justify-center", children: a.icon })
|
|
1925
|
+
}
|
|
1926
|
+
)
|
|
1927
|
+
]
|
|
1928
|
+
},
|
|
1929
|
+
i
|
|
1930
|
+
))
|
|
1931
|
+
}
|
|
1932
|
+
) });
|
|
1933
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1934
|
+
"div",
|
|
1935
|
+
{
|
|
1936
|
+
className: [fixed ? "fixed" : "absolute", "z-40 flex flex-col", POS[position], className].filter(Boolean).join(" "),
|
|
1937
|
+
style,
|
|
1938
|
+
children: [
|
|
1939
|
+
bottom && dial,
|
|
1940
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1941
|
+
"button",
|
|
1942
|
+
{
|
|
1943
|
+
type: "button",
|
|
1944
|
+
"aria-label": label,
|
|
1945
|
+
"aria-expanded": hasDial ? open : void 0,
|
|
1946
|
+
onClick: (e) => hasDial ? setOpen((o) => !o) : onClick?.(e),
|
|
1947
|
+
className: [
|
|
1948
|
+
"flex items-center justify-center rounded-full shadow-lg transition-[background-color,transform] duration-200",
|
|
1949
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
|
|
1950
|
+
SIZE4[size],
|
|
1951
|
+
TONE3[tone],
|
|
1952
|
+
hasDial && open ? "rotate-45" : ""
|
|
1953
|
+
].filter(Boolean).join(" "),
|
|
1954
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-6 w-6 inline-flex items-center justify-center", children: icon })
|
|
1955
|
+
}
|
|
1956
|
+
),
|
|
1957
|
+
!bottom && dial
|
|
1958
|
+
]
|
|
1959
|
+
}
|
|
1960
|
+
);
|
|
1961
|
+
}
|
|
1962
|
+
var NotificationContext = React17.createContext({
|
|
1866
1963
|
open: () => void 0,
|
|
1867
1964
|
close: () => void 0
|
|
1868
1965
|
});
|
|
@@ -1920,26 +2017,26 @@ function NotificationItem({
|
|
|
1920
2017
|
onClose,
|
|
1921
2018
|
reduced
|
|
1922
2019
|
}) {
|
|
1923
|
-
const [paused, setPaused] =
|
|
2020
|
+
const [paused, setPaused] = React17.useState(false);
|
|
1924
2021
|
const duration = n.duration ?? 4e3;
|
|
1925
2022
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
1926
2023
|
const showProgress = !reduced && isAutoDismissing;
|
|
1927
|
-
const timerRef =
|
|
1928
|
-
const startTimeRef =
|
|
1929
|
-
const remainingRef =
|
|
1930
|
-
const clearTimer =
|
|
2024
|
+
const timerRef = React17.useRef(null);
|
|
2025
|
+
const startTimeRef = React17.useRef(0);
|
|
2026
|
+
const remainingRef = React17.useRef(duration);
|
|
2027
|
+
const clearTimer = React17.useCallback(() => {
|
|
1931
2028
|
if (timerRef.current !== null) {
|
|
1932
2029
|
clearTimeout(timerRef.current);
|
|
1933
2030
|
timerRef.current = null;
|
|
1934
2031
|
}
|
|
1935
2032
|
}, []);
|
|
1936
|
-
const scheduleDismiss =
|
|
2033
|
+
const scheduleDismiss = React17.useCallback((ms) => {
|
|
1937
2034
|
clearTimer();
|
|
1938
2035
|
if (!isAutoDismissing) return;
|
|
1939
2036
|
startTimeRef.current = Date.now();
|
|
1940
2037
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
1941
2038
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
1942
|
-
|
|
2039
|
+
React17.useEffect(() => {
|
|
1943
2040
|
if (paused || !isAutoDismissing) return;
|
|
1944
2041
|
scheduleDismiss(remainingRef.current);
|
|
1945
2042
|
return clearTimer;
|
|
@@ -2022,15 +2119,15 @@ function NotificationProvider({
|
|
|
2022
2119
|
children,
|
|
2023
2120
|
position = "top-right"
|
|
2024
2121
|
}) {
|
|
2025
|
-
const [notifications, setNotifications] =
|
|
2122
|
+
const [notifications, setNotifications] = React17.useState([]);
|
|
2026
2123
|
const reduced = framerMotion.useReducedMotion();
|
|
2027
|
-
const open =
|
|
2124
|
+
const open = React17.useCallback((payload) => {
|
|
2028
2125
|
setNotifications((prev) => [
|
|
2029
2126
|
...prev,
|
|
2030
2127
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
2031
2128
|
]);
|
|
2032
2129
|
}, []);
|
|
2033
|
-
const close =
|
|
2130
|
+
const close = React17.useCallback((id) => {
|
|
2034
2131
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
2035
2132
|
}, []);
|
|
2036
2133
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -2059,7 +2156,7 @@ function NotificationProvider({
|
|
|
2059
2156
|
] });
|
|
2060
2157
|
}
|
|
2061
2158
|
function useNotification() {
|
|
2062
|
-
const { open } =
|
|
2159
|
+
const { open } = React17.useContext(NotificationContext);
|
|
2063
2160
|
return {
|
|
2064
2161
|
info: (props) => open({ type: "info", ...props }),
|
|
2065
2162
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -2176,10 +2273,10 @@ function FadingBase({
|
|
|
2176
2273
|
isMounted = false,
|
|
2177
2274
|
children
|
|
2178
2275
|
}) {
|
|
2179
|
-
const [shouldRender, setShouldRender] =
|
|
2180
|
-
const [visible, setVisible] =
|
|
2181
|
-
const timerRef =
|
|
2182
|
-
|
|
2276
|
+
const [shouldRender, setShouldRender] = React17.useState(isMounted);
|
|
2277
|
+
const [visible, setVisible] = React17.useState(false);
|
|
2278
|
+
const timerRef = React17.useRef(null);
|
|
2279
|
+
React17.useEffect(() => {
|
|
2183
2280
|
if (isMounted) {
|
|
2184
2281
|
setShouldRender(true);
|
|
2185
2282
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -2277,8 +2374,8 @@ function ScalableContainer({
|
|
|
2277
2374
|
togglePosition = "top-right",
|
|
2278
2375
|
className = ""
|
|
2279
2376
|
}) {
|
|
2280
|
-
const containerRef =
|
|
2281
|
-
const [internalScaled, setInternalScaled] =
|
|
2377
|
+
const containerRef = React17.useRef(null);
|
|
2378
|
+
const [internalScaled, setInternalScaled] = React17.useState(false);
|
|
2282
2379
|
const isScaled = expanded ?? internalScaled;
|
|
2283
2380
|
const reduced = framerMotion.useReducedMotion();
|
|
2284
2381
|
const onToggle = () => {
|
|
@@ -2416,17 +2513,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2416
2513
|
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)) });
|
|
2417
2514
|
}
|
|
2418
2515
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2419
|
-
const [activeIndex, setActiveIndex] =
|
|
2420
|
-
const [indexPool, setIndexPool] =
|
|
2421
|
-
const cardRefs =
|
|
2422
|
-
const getIndexes =
|
|
2516
|
+
const [activeIndex, setActiveIndex] = React17.useState(0);
|
|
2517
|
+
const [indexPool, setIndexPool] = React17.useState([]);
|
|
2518
|
+
const cardRefs = React17.useRef([]);
|
|
2519
|
+
const getIndexes = React17.useMemo(() => {
|
|
2423
2520
|
let nextIndex = activeIndex + 1;
|
|
2424
2521
|
let previousIndex = activeIndex - 1;
|
|
2425
2522
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2426
2523
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2427
2524
|
return { previousIndex, nextIndex };
|
|
2428
2525
|
}, [activeIndex, items.length]);
|
|
2429
|
-
|
|
2526
|
+
React17.useEffect(() => {
|
|
2430
2527
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2431
2528
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2432
2529
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2599,8 +2696,8 @@ function writeDismissed(key) {
|
|
|
2599
2696
|
}
|
|
2600
2697
|
}
|
|
2601
2698
|
function useTargetBbox(ref) {
|
|
2602
|
-
const [bbox, setBbox] =
|
|
2603
|
-
|
|
2699
|
+
const [bbox, setBbox] = React17.useState(null);
|
|
2700
|
+
React17.useLayoutEffect(() => {
|
|
2604
2701
|
const el = ref?.current;
|
|
2605
2702
|
if (!el) {
|
|
2606
2703
|
setBbox(null);
|
|
@@ -2630,7 +2727,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2630
2727
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2631
2728
|
}
|
|
2632
2729
|
function useFocusTrap(containerRef, active) {
|
|
2633
|
-
|
|
2730
|
+
React17.useEffect(() => {
|
|
2634
2731
|
if (!active) return;
|
|
2635
2732
|
const el = containerRef.current;
|
|
2636
2733
|
if (!el) return;
|
|
@@ -2669,16 +2766,16 @@ function Wizard({
|
|
|
2669
2766
|
onComplete,
|
|
2670
2767
|
onSkip
|
|
2671
2768
|
}) {
|
|
2672
|
-
const tooltipRef =
|
|
2673
|
-
const tooltipTitleId =
|
|
2674
|
-
const tooltipBodyId =
|
|
2769
|
+
const tooltipRef = React17.useRef(null);
|
|
2770
|
+
const tooltipTitleId = React17.useId();
|
|
2771
|
+
const tooltipBodyId = React17.useId();
|
|
2675
2772
|
const reduced = framerMotion.useReducedMotion();
|
|
2676
|
-
const [open, setOpen] =
|
|
2677
|
-
const [activeIndex, setActiveIndex] =
|
|
2773
|
+
const [open, setOpen] = React17.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
2774
|
+
const [activeIndex, setActiveIndex] = React17.useState(0);
|
|
2678
2775
|
const step = steps[activeIndex];
|
|
2679
2776
|
const bbox = useTargetBbox(step?.stepRef);
|
|
2680
2777
|
useFocusTrap(tooltipRef, open);
|
|
2681
|
-
|
|
2778
|
+
React17.useEffect(() => {
|
|
2682
2779
|
if (!open || !dismissible) return;
|
|
2683
2780
|
const onKey = (e) => {
|
|
2684
2781
|
if (e.key === "Escape") {
|
|
@@ -2689,12 +2786,12 @@ function Wizard({
|
|
|
2689
2786
|
document.addEventListener("keydown", onKey);
|
|
2690
2787
|
return () => document.removeEventListener("keydown", onKey);
|
|
2691
2788
|
}, [open, dismissible]);
|
|
2692
|
-
const handleSkip =
|
|
2789
|
+
const handleSkip = React17.useCallback(() => {
|
|
2693
2790
|
writeDismissed(storageKey);
|
|
2694
2791
|
setOpen(false);
|
|
2695
2792
|
onSkip?.();
|
|
2696
2793
|
}, [storageKey, onSkip]);
|
|
2697
|
-
const handleComplete =
|
|
2794
|
+
const handleComplete = React17.useCallback(() => {
|
|
2698
2795
|
writeDismissed(storageKey);
|
|
2699
2796
|
setOpen(false);
|
|
2700
2797
|
onComplete?.();
|
|
@@ -2965,7 +3062,7 @@ function Field({
|
|
|
2965
3062
|
);
|
|
2966
3063
|
}
|
|
2967
3064
|
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" }) });
|
|
2968
|
-
var SearchInput =
|
|
3065
|
+
var SearchInput = React17__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
2969
3066
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2970
3067
|
"div",
|
|
2971
3068
|
{
|
|
@@ -3019,11 +3116,11 @@ function MultiTagRow({
|
|
|
3019
3116
|
labelFor,
|
|
3020
3117
|
onRemove
|
|
3021
3118
|
}) {
|
|
3022
|
-
const wrapRef =
|
|
3023
|
-
const measureRef =
|
|
3024
|
-
const [visibleCount, setVisibleCount] =
|
|
3119
|
+
const wrapRef = React17.useRef(null);
|
|
3120
|
+
const measureRef = React17.useRef(null);
|
|
3121
|
+
const [visibleCount, setVisibleCount] = React17.useState(values.length);
|
|
3025
3122
|
const key = values.map(String).join("|");
|
|
3026
|
-
|
|
3123
|
+
React17.useLayoutEffect(() => {
|
|
3027
3124
|
const wrap = wrapRef.current;
|
|
3028
3125
|
const measure = measureRef.current;
|
|
3029
3126
|
if (!wrap || !measure) return;
|
|
@@ -3117,16 +3214,16 @@ function Dropdown({
|
|
|
3117
3214
|
size = "md",
|
|
3118
3215
|
className = ""
|
|
3119
3216
|
}) {
|
|
3120
|
-
const [open, setOpen] =
|
|
3121
|
-
const [selectedItems, setSelectedItems] =
|
|
3122
|
-
const [searchTerm, setSearchTerm] =
|
|
3123
|
-
const [innerItems, setInnerItems] =
|
|
3124
|
-
const errorId =
|
|
3217
|
+
const [open, setOpen] = React17.useState(false);
|
|
3218
|
+
const [selectedItems, setSelectedItems] = React17.useState([]);
|
|
3219
|
+
const [searchTerm, setSearchTerm] = React17.useState("");
|
|
3220
|
+
const [innerItems, setInnerItems] = React17.useState([]);
|
|
3221
|
+
const errorId = React17.useId();
|
|
3125
3222
|
const hasError = errorMessage != null;
|
|
3126
|
-
|
|
3223
|
+
React17.useEffect(() => {
|
|
3127
3224
|
setInnerItems(items);
|
|
3128
3225
|
}, [items]);
|
|
3129
|
-
|
|
3226
|
+
React17.useEffect(() => {
|
|
3130
3227
|
if (isMultiselect && Array.isArray(value)) {
|
|
3131
3228
|
setSelectedItems(value);
|
|
3132
3229
|
}
|
|
@@ -3451,7 +3548,7 @@ function TableBody({
|
|
|
3451
3548
|
expandRow,
|
|
3452
3549
|
getRowKey
|
|
3453
3550
|
}) {
|
|
3454
|
-
const [expanded, setExpanded] =
|
|
3551
|
+
const [expanded, setExpanded] = React17.useState(() => /* @__PURE__ */ new Set());
|
|
3455
3552
|
const reduced = framerMotion.useReducedMotion();
|
|
3456
3553
|
const toggleRow = (rowKey) => {
|
|
3457
3554
|
setExpanded((prev) => {
|
|
@@ -3466,7 +3563,7 @@ function TableBody({
|
|
|
3466
3563
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3467
3564
|
const rowKey = getRowKey(row, i);
|
|
3468
3565
|
const isExpanded = expanded.has(rowKey);
|
|
3469
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3566
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React17__default.default.Fragment, { children: [
|
|
3470
3567
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3471
3568
|
"tr",
|
|
3472
3569
|
{
|
|
@@ -3522,9 +3619,9 @@ function Pagination({
|
|
|
3522
3619
|
const matchedOption = picker.find(
|
|
3523
3620
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3524
3621
|
);
|
|
3525
|
-
const [perPageKey, setPerPageKey] =
|
|
3622
|
+
const [perPageKey, setPerPageKey] = React17.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3526
3623
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3527
|
-
|
|
3624
|
+
React17.useEffect(() => {
|
|
3528
3625
|
if (serverSide && options.perPage != null) {
|
|
3529
3626
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3530
3627
|
if (next) setPerPageKey(next.key);
|
|
@@ -3588,14 +3685,14 @@ function Table({
|
|
|
3588
3685
|
className = "",
|
|
3589
3686
|
style
|
|
3590
3687
|
}) {
|
|
3591
|
-
const searchRef =
|
|
3592
|
-
const [searchTerm, setSearchTerm] =
|
|
3593
|
-
const [perPage, setPerPage] =
|
|
3688
|
+
const searchRef = React17.useRef(null);
|
|
3689
|
+
const [searchTerm, setSearchTerm] = React17.useState("");
|
|
3690
|
+
const [perPage, setPerPage] = React17.useState(
|
|
3594
3691
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3595
3692
|
);
|
|
3596
|
-
const [activePage, setActivePage] =
|
|
3693
|
+
const [activePage, setActivePage] = React17.useState(0);
|
|
3597
3694
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3598
|
-
const filteredRows =
|
|
3695
|
+
const filteredRows = React17.useMemo(() => {
|
|
3599
3696
|
if (isServerSide || !searchTerm) return rows;
|
|
3600
3697
|
const term = searchTerm.toLowerCase();
|
|
3601
3698
|
return rows.filter(
|
|
@@ -3604,29 +3701,29 @@ function Table({
|
|
|
3604
3701
|
)
|
|
3605
3702
|
);
|
|
3606
3703
|
}, [rows, searchTerm, isServerSide]);
|
|
3607
|
-
const datasets =
|
|
3704
|
+
const datasets = React17.useMemo(() => {
|
|
3608
3705
|
if (isServerSide) return [rows];
|
|
3609
3706
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3610
3707
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3611
|
-
const MAX_PAGE =
|
|
3708
|
+
const MAX_PAGE = React17.useMemo(() => {
|
|
3612
3709
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3613
3710
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3614
3711
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3615
3712
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3616
3713
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3617
|
-
const currentPageRows =
|
|
3714
|
+
const currentPageRows = React17.useMemo(() => {
|
|
3618
3715
|
if (isServerSide) return rows;
|
|
3619
3716
|
return datasets[activePage] ?? [];
|
|
3620
3717
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3621
|
-
|
|
3718
|
+
React17.useEffect(() => {
|
|
3622
3719
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3623
3720
|
setPerPage(pagination.perPage);
|
|
3624
3721
|
}
|
|
3625
3722
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3626
|
-
|
|
3723
|
+
React17.useEffect(() => {
|
|
3627
3724
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3628
3725
|
}, [isServerSide, pagination.perPage]);
|
|
3629
|
-
|
|
3726
|
+
React17.useEffect(() => {
|
|
3630
3727
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3631
3728
|
setActivePage(pagination.page - 1);
|
|
3632
3729
|
}, [isServerSide, pagination.page]);
|
|
@@ -3710,7 +3807,7 @@ function TableSkeletonBody({
|
|
|
3710
3807
|
)) });
|
|
3711
3808
|
}
|
|
3712
3809
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
3713
|
-
const id =
|
|
3810
|
+
const id = React17.useId();
|
|
3714
3811
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3715
3812
|
SwitchPrimitive__namespace.Root,
|
|
3716
3813
|
{
|
|
@@ -3894,7 +3991,7 @@ function Sidebar({
|
|
|
3894
3991
|
}
|
|
3895
3992
|
) });
|
|
3896
3993
|
}
|
|
3897
|
-
var MegaMenuContext =
|
|
3994
|
+
var MegaMenuContext = React17.createContext({ align: "start" });
|
|
3898
3995
|
function MegaMenu({
|
|
3899
3996
|
children,
|
|
3900
3997
|
align = "start",
|
|
@@ -3925,7 +4022,7 @@ function MegaMenu({
|
|
|
3925
4022
|
}
|
|
3926
4023
|
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";
|
|
3927
4024
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
3928
|
-
const { align } =
|
|
4025
|
+
const { align } = React17.useContext(MegaMenuContext);
|
|
3929
4026
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
3930
4027
|
if (!children) {
|
|
3931
4028
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -4010,8 +4107,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
4010
4107
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
4011
4108
|
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 });
|
|
4012
4109
|
}
|
|
4013
|
-
var elementsOfType = (children, type) =>
|
|
4014
|
-
(c) =>
|
|
4110
|
+
var elementsOfType = (children, type) => React17__default.default.Children.toArray(children).filter(
|
|
4111
|
+
(c) => React17__default.default.isValidElement(c) && c.type === type
|
|
4015
4112
|
);
|
|
4016
4113
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4017
4114
|
"svg",
|
|
@@ -4048,9 +4145,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
4048
4145
|
);
|
|
4049
4146
|
}
|
|
4050
4147
|
function MobilePanel({ panel, onNavigate }) {
|
|
4051
|
-
const nodes =
|
|
4148
|
+
const nodes = React17__default.default.Children.toArray(panel.props.children);
|
|
4052
4149
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
4053
|
-
if (!
|
|
4150
|
+
if (!React17__default.default.isValidElement(node)) return null;
|
|
4054
4151
|
const el = node;
|
|
4055
4152
|
if (el.type === MegaMenuSection) {
|
|
4056
4153
|
const { title, children } = el.props;
|
|
@@ -4069,8 +4166,8 @@ function MegaMenuMobile({
|
|
|
4069
4166
|
children,
|
|
4070
4167
|
label
|
|
4071
4168
|
}) {
|
|
4072
|
-
const [open, setOpen] =
|
|
4073
|
-
const [expanded, setExpanded] =
|
|
4169
|
+
const [open, setOpen] = React17.useState(false);
|
|
4170
|
+
const [expanded, setExpanded] = React17.useState(null);
|
|
4074
4171
|
const items = elementsOfType(children, MegaMenuItem);
|
|
4075
4172
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
4076
4173
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4143,17 +4240,17 @@ function AppShell({
|
|
|
4143
4240
|
children,
|
|
4144
4241
|
className = ""
|
|
4145
4242
|
}) {
|
|
4146
|
-
const [expanded, setExpanded] =
|
|
4147
|
-
const [isMobile, setIsMobile] =
|
|
4148
|
-
const [mobileOpen, setMobileOpen] =
|
|
4149
|
-
|
|
4243
|
+
const [expanded, setExpanded] = React17.useState(sidebarDefaultExpanded);
|
|
4244
|
+
const [isMobile, setIsMobile] = React17.useState(false);
|
|
4245
|
+
const [mobileOpen, setMobileOpen] = React17.useState(false);
|
|
4246
|
+
React17.useEffect(() => {
|
|
4150
4247
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
4151
4248
|
const update = (e) => setIsMobile(e.matches);
|
|
4152
4249
|
update(mq);
|
|
4153
4250
|
mq.addEventListener("change", update);
|
|
4154
4251
|
return () => mq.removeEventListener("change", update);
|
|
4155
4252
|
}, []);
|
|
4156
|
-
|
|
4253
|
+
React17.useEffect(() => {
|
|
4157
4254
|
if (!isMobile) setMobileOpen(false);
|
|
4158
4255
|
}, [isMobile]);
|
|
4159
4256
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -4343,10 +4440,10 @@ function ThemeProvider({
|
|
|
4343
4440
|
className = "",
|
|
4344
4441
|
style
|
|
4345
4442
|
}) {
|
|
4346
|
-
const id =
|
|
4443
|
+
const id = React17__default.default.useId().replace(/:/g, "");
|
|
4347
4444
|
const scopeClass = `geo-th-${id}`;
|
|
4348
|
-
const divRef =
|
|
4349
|
-
|
|
4445
|
+
const divRef = React17.useRef(null);
|
|
4446
|
+
React17.useEffect(() => {
|
|
4350
4447
|
const el = divRef.current;
|
|
4351
4448
|
if (!el) return;
|
|
4352
4449
|
if (colorScheme === "auto") return;
|
|
@@ -4361,8 +4458,8 @@ function ThemeProvider({
|
|
|
4361
4458
|
}
|
|
4362
4459
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4363
4460
|
}, [colorScheme]);
|
|
4364
|
-
const lightVars =
|
|
4365
|
-
const darkVarStr =
|
|
4461
|
+
const lightVars = React17.useMemo(() => toCssVars(theme), [theme]);
|
|
4462
|
+
const darkVarStr = React17.useMemo(() => {
|
|
4366
4463
|
if (!darkTheme) return "";
|
|
4367
4464
|
const dvars = toCssVars(darkTheme);
|
|
4368
4465
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4402,7 +4499,7 @@ function TextInput({
|
|
|
4402
4499
|
prefix,
|
|
4403
4500
|
suffix
|
|
4404
4501
|
}) {
|
|
4405
|
-
const errorId =
|
|
4502
|
+
const errorId = React17.useId();
|
|
4406
4503
|
const hasError = errorMessage != null;
|
|
4407
4504
|
const hasAdornment = prefix != null || suffix != null;
|
|
4408
4505
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4472,7 +4569,7 @@ function NumberInput({
|
|
|
4472
4569
|
readOnly = false,
|
|
4473
4570
|
precision
|
|
4474
4571
|
}) {
|
|
4475
|
-
const errorId =
|
|
4572
|
+
const errorId = React17.useId();
|
|
4476
4573
|
const hasError = errorMessage != null;
|
|
4477
4574
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4478
4575
|
const round = (n) => {
|
|
@@ -4603,8 +4700,8 @@ function Password({
|
|
|
4603
4700
|
showIcon,
|
|
4604
4701
|
hideIcon
|
|
4605
4702
|
}) {
|
|
4606
|
-
const [visible, setVisible] =
|
|
4607
|
-
const errorId =
|
|
4703
|
+
const [visible, setVisible] = React17.useState(false);
|
|
4704
|
+
const errorId = React17.useId();
|
|
4608
4705
|
const hasError = errorMessage != null;
|
|
4609
4706
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4610
4707
|
Field,
|
|
@@ -4677,7 +4774,7 @@ function Checkbox({
|
|
|
4677
4774
|
}) {
|
|
4678
4775
|
const isChecked = checked ?? value ?? false;
|
|
4679
4776
|
const labelFirst = labelPosition === "left";
|
|
4680
|
-
const errorId =
|
|
4777
|
+
const errorId = React17.useId();
|
|
4681
4778
|
const hasError = errorMessage != null;
|
|
4682
4779
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4683
4780
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -4785,8 +4882,8 @@ function RadioGroup({
|
|
|
4785
4882
|
className,
|
|
4786
4883
|
errorMessage
|
|
4787
4884
|
}) {
|
|
4788
|
-
const errorId =
|
|
4789
|
-
const groupId =
|
|
4885
|
+
const errorId = React17.useId();
|
|
4886
|
+
const groupId = React17.useId();
|
|
4790
4887
|
const hasError = errorMessage != null;
|
|
4791
4888
|
const labelFirst = labelPosition === "left";
|
|
4792
4889
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4886,11 +4983,11 @@ function Switch({
|
|
|
4886
4983
|
disabled,
|
|
4887
4984
|
errorMessage
|
|
4888
4985
|
}) {
|
|
4889
|
-
const id =
|
|
4890
|
-
const errorId =
|
|
4986
|
+
const id = React17.useId();
|
|
4987
|
+
const errorId = React17.useId();
|
|
4891
4988
|
const hasError = errorMessage != null;
|
|
4892
4989
|
const isControlled = checked !== void 0;
|
|
4893
|
-
const [internal, setInternal] =
|
|
4990
|
+
const [internal, setInternal] = React17.useState(defaultChecked);
|
|
4894
4991
|
const isOn = isControlled ? checked : internal;
|
|
4895
4992
|
const handle = (c) => {
|
|
4896
4993
|
if (!isControlled) setInternal(c);
|
|
@@ -4963,19 +5060,19 @@ function AutoComplete({
|
|
|
4963
5060
|
required,
|
|
4964
5061
|
htmlFor
|
|
4965
5062
|
}) {
|
|
4966
|
-
const errorId =
|
|
5063
|
+
const errorId = React17.useId();
|
|
4967
5064
|
const hasError = errorMessage != null;
|
|
4968
|
-
const [term, setTerm] =
|
|
4969
|
-
const [open, setOpen] =
|
|
4970
|
-
const [asyncItems, setAsyncItems] =
|
|
4971
|
-
const [loading, setLoading] =
|
|
5065
|
+
const [term, setTerm] = React17.useState("");
|
|
5066
|
+
const [open, setOpen] = React17.useState(false);
|
|
5067
|
+
const [asyncItems, setAsyncItems] = React17.useState([]);
|
|
5068
|
+
const [loading, setLoading] = React17.useState(false);
|
|
4972
5069
|
const isAsync = typeof onSearch === "function";
|
|
4973
|
-
const debounceRef =
|
|
4974
|
-
const requestIdRef =
|
|
5070
|
+
const debounceRef = React17.useRef(null);
|
|
5071
|
+
const requestIdRef = React17.useRef(0);
|
|
4975
5072
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
4976
5073
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
4977
5074
|
) : [];
|
|
4978
|
-
|
|
5075
|
+
React17.useEffect(() => {
|
|
4979
5076
|
if (!isAsync) return;
|
|
4980
5077
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
4981
5078
|
if (!term.trim()) {
|
|
@@ -5131,15 +5228,15 @@ function TreeSelect({
|
|
|
5131
5228
|
defaultExpandedKeys = [],
|
|
5132
5229
|
size = "md"
|
|
5133
5230
|
}) {
|
|
5134
|
-
const errorId =
|
|
5231
|
+
const errorId = React17.useId();
|
|
5135
5232
|
const hasError = errorMessage != null;
|
|
5136
|
-
const [open, setOpen] =
|
|
5137
|
-
const [expanded, setExpanded] =
|
|
5138
|
-
const [activeIndex, setActiveIndex] =
|
|
5139
|
-
const listRef =
|
|
5140
|
-
const visible =
|
|
5141
|
-
const didSyncOnOpenRef =
|
|
5142
|
-
|
|
5233
|
+
const [open, setOpen] = React17.useState(false);
|
|
5234
|
+
const [expanded, setExpanded] = React17.useState(() => new Set(defaultExpandedKeys));
|
|
5235
|
+
const [activeIndex, setActiveIndex] = React17.useState(0);
|
|
5236
|
+
const listRef = React17.useRef(null);
|
|
5237
|
+
const visible = React17.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
5238
|
+
const didSyncOnOpenRef = React17.useRef(false);
|
|
5239
|
+
React17.useEffect(() => {
|
|
5143
5240
|
if (!open) {
|
|
5144
5241
|
didSyncOnOpenRef.current = false;
|
|
5145
5242
|
return;
|
|
@@ -5149,7 +5246,7 @@ function TreeSelect({
|
|
|
5149
5246
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
5150
5247
|
didSyncOnOpenRef.current = true;
|
|
5151
5248
|
}, [open, value]);
|
|
5152
|
-
const selectedNode =
|
|
5249
|
+
const selectedNode = React17.useMemo(
|
|
5153
5250
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
5154
5251
|
[items, value]
|
|
5155
5252
|
);
|
|
@@ -5380,11 +5477,11 @@ function FileInput({
|
|
|
5380
5477
|
required,
|
|
5381
5478
|
icon
|
|
5382
5479
|
}) {
|
|
5383
|
-
const inputRef =
|
|
5384
|
-
const errorId =
|
|
5385
|
-
const [files, setFiles] =
|
|
5386
|
-
const [dragging, setDragging] =
|
|
5387
|
-
const [sizeError, setSizeError] =
|
|
5480
|
+
const inputRef = React17.useRef(null);
|
|
5481
|
+
const errorId = React17.useId();
|
|
5482
|
+
const [files, setFiles] = React17.useState([]);
|
|
5483
|
+
const [dragging, setDragging] = React17.useState(false);
|
|
5484
|
+
const [sizeError, setSizeError] = React17.useState(null);
|
|
5388
5485
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5389
5486
|
const openPicker = () => {
|
|
5390
5487
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5575,30 +5672,30 @@ function DatePicker({
|
|
|
5575
5672
|
size = "md",
|
|
5576
5673
|
className = ""
|
|
5577
5674
|
}) {
|
|
5578
|
-
const errorId =
|
|
5675
|
+
const errorId = React17.useId();
|
|
5579
5676
|
const hasError = errorMessage != null;
|
|
5580
|
-
const [open, setOpen] =
|
|
5581
|
-
const [viewMonth, setViewMonth] =
|
|
5582
|
-
const [focusDate, setFocusDate] =
|
|
5583
|
-
const [view, setView] =
|
|
5584
|
-
const gridRef =
|
|
5585
|
-
|
|
5677
|
+
const [open, setOpen] = React17.useState(false);
|
|
5678
|
+
const [viewMonth, setViewMonth] = React17.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
5679
|
+
const [focusDate, setFocusDate] = React17.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
5680
|
+
const [view, setView] = React17.useState("days");
|
|
5681
|
+
const gridRef = React17.useRef(null);
|
|
5682
|
+
React17.useEffect(() => {
|
|
5586
5683
|
if (!open) return;
|
|
5587
5684
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5588
5685
|
setViewMonth(startOfMonth(target));
|
|
5589
5686
|
setFocusDate(target);
|
|
5590
5687
|
setView("days");
|
|
5591
5688
|
}, [open, value]);
|
|
5592
|
-
|
|
5689
|
+
React17.useEffect(() => {
|
|
5593
5690
|
if (!open) return;
|
|
5594
5691
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
|
|
5595
5692
|
cell?.focus();
|
|
5596
5693
|
}, [open, focusDate]);
|
|
5597
|
-
const weekdays =
|
|
5694
|
+
const weekdays = React17.useMemo(() => {
|
|
5598
5695
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5599
5696
|
return ordered;
|
|
5600
5697
|
}, [weekStartsOn]);
|
|
5601
|
-
const grid =
|
|
5698
|
+
const grid = React17.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5602
5699
|
const isDisabled = (d) => {
|
|
5603
5700
|
if (min && d < min) return true;
|
|
5604
5701
|
if (max && d > max) return true;
|
|
@@ -5888,10 +5985,10 @@ function TextArea({
|
|
|
5888
5985
|
style,
|
|
5889
5986
|
inputStyle
|
|
5890
5987
|
}) {
|
|
5891
|
-
const errorId =
|
|
5988
|
+
const errorId = React17.useId();
|
|
5892
5989
|
const hasError = errorMessage != null;
|
|
5893
|
-
const ref =
|
|
5894
|
-
|
|
5990
|
+
const ref = React17.useRef(null);
|
|
5991
|
+
React17.useLayoutEffect(() => {
|
|
5895
5992
|
if (!autoGrow) return;
|
|
5896
5993
|
const el = ref.current;
|
|
5897
5994
|
if (!el) return;
|
|
@@ -5938,7 +6035,7 @@ function TextArea({
|
|
|
5938
6035
|
}
|
|
5939
6036
|
);
|
|
5940
6037
|
}
|
|
5941
|
-
var
|
|
6038
|
+
var SIZE5 = {
|
|
5942
6039
|
sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
|
|
5943
6040
|
md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
|
|
5944
6041
|
lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
|
|
@@ -5960,12 +6057,12 @@ function SegmentedControl({
|
|
|
5960
6057
|
errorMessage,
|
|
5961
6058
|
"aria-label": ariaLabel
|
|
5962
6059
|
}) {
|
|
5963
|
-
const sz =
|
|
5964
|
-
const groupId =
|
|
5965
|
-
const errorId =
|
|
6060
|
+
const sz = SIZE5[size];
|
|
6061
|
+
const groupId = React17.useId();
|
|
6062
|
+
const errorId = React17.useId();
|
|
5966
6063
|
const hasError = errorMessage != null;
|
|
5967
6064
|
const isControlled = value !== void 0;
|
|
5968
|
-
const [internal, setInternal] =
|
|
6065
|
+
const [internal, setInternal] = React17.useState(defaultValue);
|
|
5969
6066
|
const current = isControlled ? value : internal;
|
|
5970
6067
|
const handle = (v) => {
|
|
5971
6068
|
if (!v) return;
|
|
@@ -6059,14 +6156,14 @@ function Slider({
|
|
|
6059
6156
|
name,
|
|
6060
6157
|
htmlFor
|
|
6061
6158
|
}) {
|
|
6062
|
-
const errorId =
|
|
6159
|
+
const errorId = React17.useId();
|
|
6063
6160
|
const hasError = errorMessage != null;
|
|
6064
6161
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
6065
|
-
const [internal, setInternal] =
|
|
6162
|
+
const [internal, setInternal] = React17.useState(
|
|
6066
6163
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
6067
6164
|
);
|
|
6068
6165
|
const current = toArray(value) ?? internal;
|
|
6069
|
-
const [dragging, setDragging] =
|
|
6166
|
+
const [dragging, setDragging] = React17.useState(false);
|
|
6070
6167
|
const emit = (arr) => {
|
|
6071
6168
|
setInternal(arr);
|
|
6072
6169
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -6161,11 +6258,11 @@ function TagsInput({
|
|
|
6161
6258
|
validate,
|
|
6162
6259
|
separators = ["Enter", ","]
|
|
6163
6260
|
}) {
|
|
6164
|
-
const errorId =
|
|
6165
|
-
const inputRef =
|
|
6166
|
-
const [internal, setInternal] =
|
|
6167
|
-
const [draft, setDraft] =
|
|
6168
|
-
const [localError, setLocalError] =
|
|
6261
|
+
const errorId = React17.useId();
|
|
6262
|
+
const inputRef = React17.useRef(null);
|
|
6263
|
+
const [internal, setInternal] = React17.useState(defaultValue ?? []);
|
|
6264
|
+
const [draft, setDraft] = React17.useState("");
|
|
6265
|
+
const [localError, setLocalError] = React17.useState(null);
|
|
6169
6266
|
const tags = value ?? internal;
|
|
6170
6267
|
const hasError = errorMessage != null || localError != null;
|
|
6171
6268
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -6296,9 +6393,9 @@ function OtpInput({
|
|
|
6296
6393
|
className,
|
|
6297
6394
|
groupAfter
|
|
6298
6395
|
}) {
|
|
6299
|
-
const errorId =
|
|
6396
|
+
const errorId = React17.useId();
|
|
6300
6397
|
const hasError = errorMessage != null;
|
|
6301
|
-
const refs =
|
|
6398
|
+
const refs = React17.useRef([]);
|
|
6302
6399
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
6303
6400
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
6304
6401
|
const emit = (next) => {
|
|
@@ -6347,7 +6444,7 @@ function OtpInput({
|
|
|
6347
6444
|
emit(valid.join(""));
|
|
6348
6445
|
focusBox(valid.length);
|
|
6349
6446
|
};
|
|
6350
|
-
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(
|
|
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(React17__default.default.Fragment, { children: [
|
|
6351
6448
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6352
6449
|
"input",
|
|
6353
6450
|
{
|
|
@@ -6405,9 +6502,9 @@ function Rating({
|
|
|
6405
6502
|
className,
|
|
6406
6503
|
required
|
|
6407
6504
|
}) {
|
|
6408
|
-
const errorId =
|
|
6409
|
-
const [internal, setInternal] =
|
|
6410
|
-
const [hover, setHover] =
|
|
6505
|
+
const errorId = React17.useId();
|
|
6506
|
+
const [internal, setInternal] = React17.useState(defaultValue);
|
|
6507
|
+
const [hover, setHover] = React17.useState(null);
|
|
6411
6508
|
const current = value ?? internal;
|
|
6412
6509
|
const display2 = hover ?? current;
|
|
6413
6510
|
const interactive = !readOnly && !disabled;
|
|
@@ -6530,9 +6627,9 @@ function TimePicker({
|
|
|
6530
6627
|
required,
|
|
6531
6628
|
style
|
|
6532
6629
|
}) {
|
|
6533
|
-
const errorId =
|
|
6630
|
+
const errorId = React17.useId();
|
|
6534
6631
|
const hasError = errorMessage != null;
|
|
6535
|
-
const [open, setOpen] =
|
|
6632
|
+
const [open, setOpen] = React17.useState(false);
|
|
6536
6633
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6537
6634
|
const update = (next) => {
|
|
6538
6635
|
const merged = { ...parsed, ...next };
|
|
@@ -6656,13 +6753,13 @@ function DateRangePicker({
|
|
|
6656
6753
|
required,
|
|
6657
6754
|
style
|
|
6658
6755
|
}) {
|
|
6659
|
-
const errorId =
|
|
6756
|
+
const errorId = React17.useId();
|
|
6660
6757
|
const hasError = errorMessage != null;
|
|
6661
|
-
const [open, setOpen] =
|
|
6662
|
-
const [leftMonth, setLeftMonth] =
|
|
6663
|
-
const [pendingStart, setPendingStart] =
|
|
6664
|
-
const [hoverDate, setHoverDate] =
|
|
6665
|
-
const weekdays =
|
|
6758
|
+
const [open, setOpen] = React17.useState(false);
|
|
6759
|
+
const [leftMonth, setLeftMonth] = React17.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
|
|
6760
|
+
const [pendingStart, setPendingStart] = React17.useState(null);
|
|
6761
|
+
const [hoverDate, setHoverDate] = React17.useState(null);
|
|
6762
|
+
const weekdays = React17.useMemo(
|
|
6666
6763
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
6667
6764
|
[weekStartsOn]
|
|
6668
6765
|
);
|
|
@@ -6838,10 +6935,10 @@ function ColorPicker({
|
|
|
6838
6935
|
required,
|
|
6839
6936
|
placeholder = "Pick a colour\u2026"
|
|
6840
6937
|
}) {
|
|
6841
|
-
const errorId =
|
|
6938
|
+
const errorId = React17.useId();
|
|
6842
6939
|
const hasError = errorMessage != null;
|
|
6843
|
-
const [open, setOpen] =
|
|
6844
|
-
const [draft, setDraft] =
|
|
6940
|
+
const [open, setOpen] = React17.useState(false);
|
|
6941
|
+
const [draft, setDraft] = React17.useState(value);
|
|
6845
6942
|
const valid = HEX_RE.test(value);
|
|
6846
6943
|
const pick = (hex) => {
|
|
6847
6944
|
onChange?.(hex);
|
|
@@ -7228,11 +7325,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
7228
7325
|
|
|
7229
7326
|
// src/form/useForm.ts
|
|
7230
7327
|
function useForm(options = {}) {
|
|
7231
|
-
const ref =
|
|
7328
|
+
const ref = React17.useRef(null);
|
|
7232
7329
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
7233
7330
|
const store = ref.current;
|
|
7234
|
-
|
|
7235
|
-
const make =
|
|
7331
|
+
React17.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7332
|
+
const make = React17.useCallback(
|
|
7236
7333
|
(kind) => (name, rules) => {
|
|
7237
7334
|
if (rules !== void 0) store.setRule(name, rules);
|
|
7238
7335
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -7261,9 +7358,9 @@ function useForm(options = {}) {
|
|
|
7261
7358
|
fieldTarget: make("target")
|
|
7262
7359
|
};
|
|
7263
7360
|
}
|
|
7264
|
-
var FormContext =
|
|
7361
|
+
var FormContext = React17.createContext(null);
|
|
7265
7362
|
function useFormStore() {
|
|
7266
|
-
const store =
|
|
7363
|
+
const store = React17.useContext(FormContext);
|
|
7267
7364
|
if (!store) {
|
|
7268
7365
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
7269
7366
|
}
|
|
@@ -7277,8 +7374,8 @@ function Form({
|
|
|
7277
7374
|
children,
|
|
7278
7375
|
...rest
|
|
7279
7376
|
}) {
|
|
7280
|
-
const ref =
|
|
7281
|
-
const bypass =
|
|
7377
|
+
const ref = React17.useRef(null);
|
|
7378
|
+
const bypass = React17.useRef(false);
|
|
7282
7379
|
const handleSubmit = async (e) => {
|
|
7283
7380
|
if (bypass.current) {
|
|
7284
7381
|
bypass.current = false;
|
|
@@ -7330,12 +7427,12 @@ function useFormField(name, options = {}) {
|
|
|
7330
7427
|
const store = useFormStore();
|
|
7331
7428
|
const { kind = "value", rules } = options;
|
|
7332
7429
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
7333
|
-
|
|
7430
|
+
React17.useEffect(() => {
|
|
7334
7431
|
return () => {
|
|
7335
7432
|
if (rules !== void 0) store.removeRule(name);
|
|
7336
7433
|
};
|
|
7337
7434
|
}, [store, name]);
|
|
7338
|
-
const snap =
|
|
7435
|
+
const snap = React17.useSyncExternalStore(
|
|
7339
7436
|
store.subscribe,
|
|
7340
7437
|
() => store.getFieldSnapshot(name)
|
|
7341
7438
|
);
|
|
@@ -7347,7 +7444,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
7347
7444
|
}
|
|
7348
7445
|
function useFieldArray(name) {
|
|
7349
7446
|
const store = useFormStore();
|
|
7350
|
-
|
|
7447
|
+
React17.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7351
7448
|
const arr = store.getValue(name) ?? [];
|
|
7352
7449
|
const keys = store.getKeys(name);
|
|
7353
7450
|
return {
|
|
@@ -7470,7 +7567,7 @@ function CreditCardForm({
|
|
|
7470
7567
|
className = "",
|
|
7471
7568
|
style
|
|
7472
7569
|
}) {
|
|
7473
|
-
const initial =
|
|
7570
|
+
const initial = React17.useRef({
|
|
7474
7571
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7475
7572
|
name: defaultValue?.name ?? "",
|
|
7476
7573
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7479,7 +7576,7 @@ function CreditCardForm({
|
|
|
7479
7576
|
const form = useForm({ initialValues: initial });
|
|
7480
7577
|
const numberStr = String(form.values.number ?? "");
|
|
7481
7578
|
const brand = detectBrand(numberStr);
|
|
7482
|
-
|
|
7579
|
+
React17.useEffect(() => {
|
|
7483
7580
|
onChange?.(toCard(form.values));
|
|
7484
7581
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7485
7582
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7598,6 +7695,7 @@ exports.CreditCardForm = CreditCardForm;
|
|
|
7598
7695
|
exports.DateRangePicker = DateRangePicker;
|
|
7599
7696
|
exports.Drawer = Drawer;
|
|
7600
7697
|
exports.Dropdown = Dropdown;
|
|
7698
|
+
exports.FAB = FAB;
|
|
7601
7699
|
exports.FadingBase = FadingBase;
|
|
7602
7700
|
exports.Field = Field;
|
|
7603
7701
|
exports.FieldHelpIcon = FieldHelpIcon;
|