@geomak/ui 6.5.0 → 6.6.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 +218 -196
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -1
- package/dist/index.d.ts +28 -1
- package/dist/index.js +33 -12
- package/dist/index.js.map +1 -1
- package/dist/styles.css +12 -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 React15 = 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 React15__default = /*#__PURE__*/_interopDefault(React15);
|
|
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] = React15.useState(null);
|
|
218
|
+
React15.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 = React15.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 = React15.createContext(null);
|
|
964
964
|
function useTabsContext() {
|
|
965
|
-
const ctx =
|
|
965
|
+
const ctx = React15.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] = React15.useState(defaultValue);
|
|
988
988
|
const current = isControlled ? value : internal;
|
|
989
989
|
const reduced = !!framerMotion.useReducedMotion();
|
|
990
|
-
const indicatorId =
|
|
991
|
-
const select =
|
|
990
|
+
const indicatorId = React15.useId();
|
|
991
|
+
const select = React15.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 = React15.useRef(/* @__PURE__ */ new Map());
|
|
996
|
+
const orderRef = React15.useRef(0);
|
|
997
|
+
const [, bump] = React15.useState(0);
|
|
998
|
+
const registerTab = React15.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 = React15.useCallback((val) => {
|
|
1004
1004
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
1005
1005
|
}, []);
|
|
1006
|
-
const getTabs =
|
|
1006
|
+
const getTabs = React15.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 = React15.useRef(null);
|
|
1027
|
+
const [edges, setEdges] = React15.useState({ start: false, end: false });
|
|
1028
1028
|
const scrollable = variant !== "segmented";
|
|
1029
|
-
|
|
1029
|
+
React15.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 = React15.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
|
+
React15.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] = React15.useState(false);
|
|
1119
|
+
const wrapRef = React15.useRef(null);
|
|
1120
|
+
const timer = React15.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
|
+
React15.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
|
+
React15.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 = React15.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 } = React15.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] = React15.useState(false);
|
|
1526
1526
|
const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
|
|
1527
1527
|
const visible = [];
|
|
1528
1528
|
if (shouldCollapse) {
|
|
@@ -1652,7 +1652,28 @@ function Badge({
|
|
|
1652
1652
|
!hidden && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex", children: indicator })
|
|
1653
1653
|
] });
|
|
1654
1654
|
}
|
|
1655
|
-
var
|
|
1655
|
+
var SIZE3 = {
|
|
1656
|
+
sm: "h-5 min-w-[20px] px-1.5 text-[11px]",
|
|
1657
|
+
md: "h-6 min-w-[24px] px-2 text-xs"
|
|
1658
|
+
};
|
|
1659
|
+
var cap = "inline-flex items-center justify-center rounded-md border border-border border-b-2 bg-surface-raised font-medium text-foreground-secondary leading-none select-none font-sans shadow-sm";
|
|
1660
|
+
function Kbd({
|
|
1661
|
+
children,
|
|
1662
|
+
keys,
|
|
1663
|
+
separator = "+",
|
|
1664
|
+
size = "md",
|
|
1665
|
+
className = "",
|
|
1666
|
+
style
|
|
1667
|
+
}) {
|
|
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(React15__default.default.Fragment, { children: [
|
|
1670
|
+
i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
|
|
1671
|
+
/* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
|
|
1672
|
+
] }, `${k}-${i}`)) });
|
|
1673
|
+
}
|
|
1674
|
+
return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size], className].filter(Boolean).join(" "), style, children });
|
|
1675
|
+
}
|
|
1676
|
+
var NotificationContext = React15.createContext({
|
|
1656
1677
|
open: () => void 0,
|
|
1657
1678
|
close: () => void 0
|
|
1658
1679
|
});
|
|
@@ -1710,26 +1731,26 @@ function NotificationItem({
|
|
|
1710
1731
|
onClose,
|
|
1711
1732
|
reduced
|
|
1712
1733
|
}) {
|
|
1713
|
-
const [paused, setPaused] =
|
|
1734
|
+
const [paused, setPaused] = React15.useState(false);
|
|
1714
1735
|
const duration = n.duration ?? 4e3;
|
|
1715
1736
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
1716
1737
|
const showProgress = !reduced && isAutoDismissing;
|
|
1717
|
-
const timerRef =
|
|
1718
|
-
const startTimeRef =
|
|
1719
|
-
const remainingRef =
|
|
1720
|
-
const clearTimer =
|
|
1738
|
+
const timerRef = React15.useRef(null);
|
|
1739
|
+
const startTimeRef = React15.useRef(0);
|
|
1740
|
+
const remainingRef = React15.useRef(duration);
|
|
1741
|
+
const clearTimer = React15.useCallback(() => {
|
|
1721
1742
|
if (timerRef.current !== null) {
|
|
1722
1743
|
clearTimeout(timerRef.current);
|
|
1723
1744
|
timerRef.current = null;
|
|
1724
1745
|
}
|
|
1725
1746
|
}, []);
|
|
1726
|
-
const scheduleDismiss =
|
|
1747
|
+
const scheduleDismiss = React15.useCallback((ms) => {
|
|
1727
1748
|
clearTimer();
|
|
1728
1749
|
if (!isAutoDismissing) return;
|
|
1729
1750
|
startTimeRef.current = Date.now();
|
|
1730
1751
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
1731
1752
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
1732
|
-
|
|
1753
|
+
React15.useEffect(() => {
|
|
1733
1754
|
if (paused || !isAutoDismissing) return;
|
|
1734
1755
|
scheduleDismiss(remainingRef.current);
|
|
1735
1756
|
return clearTimer;
|
|
@@ -1812,15 +1833,15 @@ function NotificationProvider({
|
|
|
1812
1833
|
children,
|
|
1813
1834
|
position = "top-right"
|
|
1814
1835
|
}) {
|
|
1815
|
-
const [notifications, setNotifications] =
|
|
1836
|
+
const [notifications, setNotifications] = React15.useState([]);
|
|
1816
1837
|
const reduced = framerMotion.useReducedMotion();
|
|
1817
|
-
const open =
|
|
1838
|
+
const open = React15.useCallback((payload) => {
|
|
1818
1839
|
setNotifications((prev) => [
|
|
1819
1840
|
...prev,
|
|
1820
1841
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
1821
1842
|
]);
|
|
1822
1843
|
}, []);
|
|
1823
|
-
const close =
|
|
1844
|
+
const close = React15.useCallback((id) => {
|
|
1824
1845
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
1825
1846
|
}, []);
|
|
1826
1847
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -1849,7 +1870,7 @@ function NotificationProvider({
|
|
|
1849
1870
|
] });
|
|
1850
1871
|
}
|
|
1851
1872
|
function useNotification() {
|
|
1852
|
-
const { open } =
|
|
1873
|
+
const { open } = React15.useContext(NotificationContext);
|
|
1853
1874
|
return {
|
|
1854
1875
|
info: (props) => open({ type: "info", ...props }),
|
|
1855
1876
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -1966,10 +1987,10 @@ function FadingBase({
|
|
|
1966
1987
|
isMounted = false,
|
|
1967
1988
|
children
|
|
1968
1989
|
}) {
|
|
1969
|
-
const [shouldRender, setShouldRender] =
|
|
1970
|
-
const [visible, setVisible] =
|
|
1971
|
-
const timerRef =
|
|
1972
|
-
|
|
1990
|
+
const [shouldRender, setShouldRender] = React15.useState(isMounted);
|
|
1991
|
+
const [visible, setVisible] = React15.useState(false);
|
|
1992
|
+
const timerRef = React15.useRef(null);
|
|
1993
|
+
React15.useEffect(() => {
|
|
1973
1994
|
if (isMounted) {
|
|
1974
1995
|
setShouldRender(true);
|
|
1975
1996
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -2067,8 +2088,8 @@ function ScalableContainer({
|
|
|
2067
2088
|
togglePosition = "top-right",
|
|
2068
2089
|
className = ""
|
|
2069
2090
|
}) {
|
|
2070
|
-
const containerRef =
|
|
2071
|
-
const [internalScaled, setInternalScaled] =
|
|
2091
|
+
const containerRef = React15.useRef(null);
|
|
2092
|
+
const [internalScaled, setInternalScaled] = React15.useState(false);
|
|
2072
2093
|
const isScaled = expanded ?? internalScaled;
|
|
2073
2094
|
const reduced = framerMotion.useReducedMotion();
|
|
2074
2095
|
const onToggle = () => {
|
|
@@ -2206,17 +2227,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2206
2227
|
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)) });
|
|
2207
2228
|
}
|
|
2208
2229
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2209
|
-
const [activeIndex, setActiveIndex] =
|
|
2210
|
-
const [indexPool, setIndexPool] =
|
|
2211
|
-
const cardRefs =
|
|
2212
|
-
const getIndexes =
|
|
2230
|
+
const [activeIndex, setActiveIndex] = React15.useState(0);
|
|
2231
|
+
const [indexPool, setIndexPool] = React15.useState([]);
|
|
2232
|
+
const cardRefs = React15.useRef([]);
|
|
2233
|
+
const getIndexes = React15.useMemo(() => {
|
|
2213
2234
|
let nextIndex = activeIndex + 1;
|
|
2214
2235
|
let previousIndex = activeIndex - 1;
|
|
2215
2236
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2216
2237
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2217
2238
|
return { previousIndex, nextIndex };
|
|
2218
2239
|
}, [activeIndex, items.length]);
|
|
2219
|
-
|
|
2240
|
+
React15.useEffect(() => {
|
|
2220
2241
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2221
2242
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2222
2243
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2389,8 +2410,8 @@ function writeDismissed(key) {
|
|
|
2389
2410
|
}
|
|
2390
2411
|
}
|
|
2391
2412
|
function useTargetBbox(ref) {
|
|
2392
|
-
const [bbox, setBbox] =
|
|
2393
|
-
|
|
2413
|
+
const [bbox, setBbox] = React15.useState(null);
|
|
2414
|
+
React15.useLayoutEffect(() => {
|
|
2394
2415
|
const el = ref?.current;
|
|
2395
2416
|
if (!el) {
|
|
2396
2417
|
setBbox(null);
|
|
@@ -2420,7 +2441,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2420
2441
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2421
2442
|
}
|
|
2422
2443
|
function useFocusTrap(containerRef, active) {
|
|
2423
|
-
|
|
2444
|
+
React15.useEffect(() => {
|
|
2424
2445
|
if (!active) return;
|
|
2425
2446
|
const el = containerRef.current;
|
|
2426
2447
|
if (!el) return;
|
|
@@ -2459,16 +2480,16 @@ function Wizard({
|
|
|
2459
2480
|
onComplete,
|
|
2460
2481
|
onSkip
|
|
2461
2482
|
}) {
|
|
2462
|
-
const tooltipRef =
|
|
2463
|
-
const tooltipTitleId =
|
|
2464
|
-
const tooltipBodyId =
|
|
2483
|
+
const tooltipRef = React15.useRef(null);
|
|
2484
|
+
const tooltipTitleId = React15.useId();
|
|
2485
|
+
const tooltipBodyId = React15.useId();
|
|
2465
2486
|
const reduced = framerMotion.useReducedMotion();
|
|
2466
|
-
const [open, setOpen] =
|
|
2467
|
-
const [activeIndex, setActiveIndex] =
|
|
2487
|
+
const [open, setOpen] = React15.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
2488
|
+
const [activeIndex, setActiveIndex] = React15.useState(0);
|
|
2468
2489
|
const step = steps[activeIndex];
|
|
2469
2490
|
const bbox = useTargetBbox(step?.stepRef);
|
|
2470
2491
|
useFocusTrap(tooltipRef, open);
|
|
2471
|
-
|
|
2492
|
+
React15.useEffect(() => {
|
|
2472
2493
|
if (!open || !dismissible) return;
|
|
2473
2494
|
const onKey = (e) => {
|
|
2474
2495
|
if (e.key === "Escape") {
|
|
@@ -2479,12 +2500,12 @@ function Wizard({
|
|
|
2479
2500
|
document.addEventListener("keydown", onKey);
|
|
2480
2501
|
return () => document.removeEventListener("keydown", onKey);
|
|
2481
2502
|
}, [open, dismissible]);
|
|
2482
|
-
const handleSkip =
|
|
2503
|
+
const handleSkip = React15.useCallback(() => {
|
|
2483
2504
|
writeDismissed(storageKey);
|
|
2484
2505
|
setOpen(false);
|
|
2485
2506
|
onSkip?.();
|
|
2486
2507
|
}, [storageKey, onSkip]);
|
|
2487
|
-
const handleComplete =
|
|
2508
|
+
const handleComplete = React15.useCallback(() => {
|
|
2488
2509
|
writeDismissed(storageKey);
|
|
2489
2510
|
setOpen(false);
|
|
2490
2511
|
onComplete?.();
|
|
@@ -2755,7 +2776,7 @@ function Field({
|
|
|
2755
2776
|
);
|
|
2756
2777
|
}
|
|
2757
2778
|
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" }) });
|
|
2758
|
-
var SearchInput =
|
|
2779
|
+
var SearchInput = React15__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
2759
2780
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2760
2781
|
"div",
|
|
2761
2782
|
{
|
|
@@ -2809,11 +2830,11 @@ function MultiTagRow({
|
|
|
2809
2830
|
labelFor,
|
|
2810
2831
|
onRemove
|
|
2811
2832
|
}) {
|
|
2812
|
-
const wrapRef =
|
|
2813
|
-
const measureRef =
|
|
2814
|
-
const [visibleCount, setVisibleCount] =
|
|
2833
|
+
const wrapRef = React15.useRef(null);
|
|
2834
|
+
const measureRef = React15.useRef(null);
|
|
2835
|
+
const [visibleCount, setVisibleCount] = React15.useState(values.length);
|
|
2815
2836
|
const key = values.map(String).join("|");
|
|
2816
|
-
|
|
2837
|
+
React15.useLayoutEffect(() => {
|
|
2817
2838
|
const wrap = wrapRef.current;
|
|
2818
2839
|
const measure = measureRef.current;
|
|
2819
2840
|
if (!wrap || !measure) return;
|
|
@@ -2907,16 +2928,16 @@ function Dropdown({
|
|
|
2907
2928
|
size = "md",
|
|
2908
2929
|
className = ""
|
|
2909
2930
|
}) {
|
|
2910
|
-
const [open, setOpen] =
|
|
2911
|
-
const [selectedItems, setSelectedItems] =
|
|
2912
|
-
const [searchTerm, setSearchTerm] =
|
|
2913
|
-
const [innerItems, setInnerItems] =
|
|
2914
|
-
const errorId =
|
|
2931
|
+
const [open, setOpen] = React15.useState(false);
|
|
2932
|
+
const [selectedItems, setSelectedItems] = React15.useState([]);
|
|
2933
|
+
const [searchTerm, setSearchTerm] = React15.useState("");
|
|
2934
|
+
const [innerItems, setInnerItems] = React15.useState([]);
|
|
2935
|
+
const errorId = React15.useId();
|
|
2915
2936
|
const hasError = errorMessage != null;
|
|
2916
|
-
|
|
2937
|
+
React15.useEffect(() => {
|
|
2917
2938
|
setInnerItems(items);
|
|
2918
2939
|
}, [items]);
|
|
2919
|
-
|
|
2940
|
+
React15.useEffect(() => {
|
|
2920
2941
|
if (isMultiselect && Array.isArray(value)) {
|
|
2921
2942
|
setSelectedItems(value);
|
|
2922
2943
|
}
|
|
@@ -3241,7 +3262,7 @@ function TableBody({
|
|
|
3241
3262
|
expandRow,
|
|
3242
3263
|
getRowKey
|
|
3243
3264
|
}) {
|
|
3244
|
-
const [expanded, setExpanded] =
|
|
3265
|
+
const [expanded, setExpanded] = React15.useState(() => /* @__PURE__ */ new Set());
|
|
3245
3266
|
const reduced = framerMotion.useReducedMotion();
|
|
3246
3267
|
const toggleRow = (rowKey) => {
|
|
3247
3268
|
setExpanded((prev) => {
|
|
@@ -3256,7 +3277,7 @@ function TableBody({
|
|
|
3256
3277
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3257
3278
|
const rowKey = getRowKey(row, i);
|
|
3258
3279
|
const isExpanded = expanded.has(rowKey);
|
|
3259
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3280
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React15__default.default.Fragment, { children: [
|
|
3260
3281
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3261
3282
|
"tr",
|
|
3262
3283
|
{
|
|
@@ -3312,9 +3333,9 @@ function Pagination({
|
|
|
3312
3333
|
const matchedOption = picker.find(
|
|
3313
3334
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3314
3335
|
);
|
|
3315
|
-
const [perPageKey, setPerPageKey] =
|
|
3336
|
+
const [perPageKey, setPerPageKey] = React15.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3316
3337
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3317
|
-
|
|
3338
|
+
React15.useEffect(() => {
|
|
3318
3339
|
if (serverSide && options.perPage != null) {
|
|
3319
3340
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3320
3341
|
if (next) setPerPageKey(next.key);
|
|
@@ -3378,14 +3399,14 @@ function Table({
|
|
|
3378
3399
|
className = "",
|
|
3379
3400
|
style
|
|
3380
3401
|
}) {
|
|
3381
|
-
const searchRef =
|
|
3382
|
-
const [searchTerm, setSearchTerm] =
|
|
3383
|
-
const [perPage, setPerPage] =
|
|
3402
|
+
const searchRef = React15.useRef(null);
|
|
3403
|
+
const [searchTerm, setSearchTerm] = React15.useState("");
|
|
3404
|
+
const [perPage, setPerPage] = React15.useState(
|
|
3384
3405
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3385
3406
|
);
|
|
3386
|
-
const [activePage, setActivePage] =
|
|
3407
|
+
const [activePage, setActivePage] = React15.useState(0);
|
|
3387
3408
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3388
|
-
const filteredRows =
|
|
3409
|
+
const filteredRows = React15.useMemo(() => {
|
|
3389
3410
|
if (isServerSide || !searchTerm) return rows;
|
|
3390
3411
|
const term = searchTerm.toLowerCase();
|
|
3391
3412
|
return rows.filter(
|
|
@@ -3394,29 +3415,29 @@ function Table({
|
|
|
3394
3415
|
)
|
|
3395
3416
|
);
|
|
3396
3417
|
}, [rows, searchTerm, isServerSide]);
|
|
3397
|
-
const datasets =
|
|
3418
|
+
const datasets = React15.useMemo(() => {
|
|
3398
3419
|
if (isServerSide) return [rows];
|
|
3399
3420
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3400
3421
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3401
|
-
const MAX_PAGE =
|
|
3422
|
+
const MAX_PAGE = React15.useMemo(() => {
|
|
3402
3423
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3403
3424
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3404
3425
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3405
3426
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3406
3427
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3407
|
-
const currentPageRows =
|
|
3428
|
+
const currentPageRows = React15.useMemo(() => {
|
|
3408
3429
|
if (isServerSide) return rows;
|
|
3409
3430
|
return datasets[activePage] ?? [];
|
|
3410
3431
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3411
|
-
|
|
3432
|
+
React15.useEffect(() => {
|
|
3412
3433
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3413
3434
|
setPerPage(pagination.perPage);
|
|
3414
3435
|
}
|
|
3415
3436
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3416
|
-
|
|
3437
|
+
React15.useEffect(() => {
|
|
3417
3438
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3418
3439
|
}, [isServerSide, pagination.perPage]);
|
|
3419
|
-
|
|
3440
|
+
React15.useEffect(() => {
|
|
3420
3441
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3421
3442
|
setActivePage(pagination.page - 1);
|
|
3422
3443
|
}, [isServerSide, pagination.page]);
|
|
@@ -3500,7 +3521,7 @@ function TableSkeletonBody({
|
|
|
3500
3521
|
)) });
|
|
3501
3522
|
}
|
|
3502
3523
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
3503
|
-
const id =
|
|
3524
|
+
const id = React15.useId();
|
|
3504
3525
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3505
3526
|
SwitchPrimitive__namespace.Root,
|
|
3506
3527
|
{
|
|
@@ -3684,7 +3705,7 @@ function Sidebar({
|
|
|
3684
3705
|
}
|
|
3685
3706
|
) });
|
|
3686
3707
|
}
|
|
3687
|
-
var MegaMenuContext =
|
|
3708
|
+
var MegaMenuContext = React15.createContext({ align: "start" });
|
|
3688
3709
|
function MegaMenu({
|
|
3689
3710
|
children,
|
|
3690
3711
|
align = "start",
|
|
@@ -3715,7 +3736,7 @@ function MegaMenu({
|
|
|
3715
3736
|
}
|
|
3716
3737
|
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";
|
|
3717
3738
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
3718
|
-
const { align } =
|
|
3739
|
+
const { align } = React15.useContext(MegaMenuContext);
|
|
3719
3740
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
3720
3741
|
if (!children) {
|
|
3721
3742
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -3800,8 +3821,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
3800
3821
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
3801
3822
|
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 });
|
|
3802
3823
|
}
|
|
3803
|
-
var elementsOfType = (children, type) =>
|
|
3804
|
-
(c) =>
|
|
3824
|
+
var elementsOfType = (children, type) => React15__default.default.Children.toArray(children).filter(
|
|
3825
|
+
(c) => React15__default.default.isValidElement(c) && c.type === type
|
|
3805
3826
|
);
|
|
3806
3827
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
3807
3828
|
"svg",
|
|
@@ -3838,9 +3859,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
3838
3859
|
);
|
|
3839
3860
|
}
|
|
3840
3861
|
function MobilePanel({ panel, onNavigate }) {
|
|
3841
|
-
const nodes =
|
|
3862
|
+
const nodes = React15__default.default.Children.toArray(panel.props.children);
|
|
3842
3863
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
3843
|
-
if (!
|
|
3864
|
+
if (!React15__default.default.isValidElement(node)) return null;
|
|
3844
3865
|
const el = node;
|
|
3845
3866
|
if (el.type === MegaMenuSection) {
|
|
3846
3867
|
const { title, children } = el.props;
|
|
@@ -3859,8 +3880,8 @@ function MegaMenuMobile({
|
|
|
3859
3880
|
children,
|
|
3860
3881
|
label
|
|
3861
3882
|
}) {
|
|
3862
|
-
const [open, setOpen] =
|
|
3863
|
-
const [expanded, setExpanded] =
|
|
3883
|
+
const [open, setOpen] = React15.useState(false);
|
|
3884
|
+
const [expanded, setExpanded] = React15.useState(null);
|
|
3864
3885
|
const items = elementsOfType(children, MegaMenuItem);
|
|
3865
3886
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
3866
3887
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -3933,17 +3954,17 @@ function AppShell({
|
|
|
3933
3954
|
children,
|
|
3934
3955
|
className = ""
|
|
3935
3956
|
}) {
|
|
3936
|
-
const [expanded, setExpanded] =
|
|
3937
|
-
const [isMobile, setIsMobile] =
|
|
3938
|
-
const [mobileOpen, setMobileOpen] =
|
|
3939
|
-
|
|
3957
|
+
const [expanded, setExpanded] = React15.useState(sidebarDefaultExpanded);
|
|
3958
|
+
const [isMobile, setIsMobile] = React15.useState(false);
|
|
3959
|
+
const [mobileOpen, setMobileOpen] = React15.useState(false);
|
|
3960
|
+
React15.useEffect(() => {
|
|
3940
3961
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
3941
3962
|
const update = (e) => setIsMobile(e.matches);
|
|
3942
3963
|
update(mq);
|
|
3943
3964
|
mq.addEventListener("change", update);
|
|
3944
3965
|
return () => mq.removeEventListener("change", update);
|
|
3945
3966
|
}, []);
|
|
3946
|
-
|
|
3967
|
+
React15.useEffect(() => {
|
|
3947
3968
|
if (!isMobile) setMobileOpen(false);
|
|
3948
3969
|
}, [isMobile]);
|
|
3949
3970
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -4133,10 +4154,10 @@ function ThemeProvider({
|
|
|
4133
4154
|
className = "",
|
|
4134
4155
|
style
|
|
4135
4156
|
}) {
|
|
4136
|
-
const id =
|
|
4157
|
+
const id = React15__default.default.useId().replace(/:/g, "");
|
|
4137
4158
|
const scopeClass = `geo-th-${id}`;
|
|
4138
|
-
const divRef =
|
|
4139
|
-
|
|
4159
|
+
const divRef = React15.useRef(null);
|
|
4160
|
+
React15.useEffect(() => {
|
|
4140
4161
|
const el = divRef.current;
|
|
4141
4162
|
if (!el) return;
|
|
4142
4163
|
if (colorScheme === "auto") return;
|
|
@@ -4151,8 +4172,8 @@ function ThemeProvider({
|
|
|
4151
4172
|
}
|
|
4152
4173
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4153
4174
|
}, [colorScheme]);
|
|
4154
|
-
const lightVars =
|
|
4155
|
-
const darkVarStr =
|
|
4175
|
+
const lightVars = React15.useMemo(() => toCssVars(theme), [theme]);
|
|
4176
|
+
const darkVarStr = React15.useMemo(() => {
|
|
4156
4177
|
if (!darkTheme) return "";
|
|
4157
4178
|
const dvars = toCssVars(darkTheme);
|
|
4158
4179
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4192,7 +4213,7 @@ function TextInput({
|
|
|
4192
4213
|
prefix,
|
|
4193
4214
|
suffix
|
|
4194
4215
|
}) {
|
|
4195
|
-
const errorId =
|
|
4216
|
+
const errorId = React15.useId();
|
|
4196
4217
|
const hasError = errorMessage != null;
|
|
4197
4218
|
const hasAdornment = prefix != null || suffix != null;
|
|
4198
4219
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4262,7 +4283,7 @@ function NumberInput({
|
|
|
4262
4283
|
readOnly = false,
|
|
4263
4284
|
precision
|
|
4264
4285
|
}) {
|
|
4265
|
-
const errorId =
|
|
4286
|
+
const errorId = React15.useId();
|
|
4266
4287
|
const hasError = errorMessage != null;
|
|
4267
4288
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4268
4289
|
const round = (n) => {
|
|
@@ -4393,8 +4414,8 @@ function Password({
|
|
|
4393
4414
|
showIcon,
|
|
4394
4415
|
hideIcon
|
|
4395
4416
|
}) {
|
|
4396
|
-
const [visible, setVisible] =
|
|
4397
|
-
const errorId =
|
|
4417
|
+
const [visible, setVisible] = React15.useState(false);
|
|
4418
|
+
const errorId = React15.useId();
|
|
4398
4419
|
const hasError = errorMessage != null;
|
|
4399
4420
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4400
4421
|
Field,
|
|
@@ -4467,7 +4488,7 @@ function Checkbox({
|
|
|
4467
4488
|
}) {
|
|
4468
4489
|
const isChecked = checked ?? value ?? false;
|
|
4469
4490
|
const labelFirst = labelPosition === "left";
|
|
4470
|
-
const errorId =
|
|
4491
|
+
const errorId = React15.useId();
|
|
4471
4492
|
const hasError = errorMessage != null;
|
|
4472
4493
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4473
4494
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -4575,8 +4596,8 @@ function RadioGroup({
|
|
|
4575
4596
|
className,
|
|
4576
4597
|
errorMessage
|
|
4577
4598
|
}) {
|
|
4578
|
-
const errorId =
|
|
4579
|
-
const groupId =
|
|
4599
|
+
const errorId = React15.useId();
|
|
4600
|
+
const groupId = React15.useId();
|
|
4580
4601
|
const hasError = errorMessage != null;
|
|
4581
4602
|
const labelFirst = labelPosition === "left";
|
|
4582
4603
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4676,11 +4697,11 @@ function Switch({
|
|
|
4676
4697
|
disabled,
|
|
4677
4698
|
errorMessage
|
|
4678
4699
|
}) {
|
|
4679
|
-
const id =
|
|
4680
|
-
const errorId =
|
|
4700
|
+
const id = React15.useId();
|
|
4701
|
+
const errorId = React15.useId();
|
|
4681
4702
|
const hasError = errorMessage != null;
|
|
4682
4703
|
const isControlled = checked !== void 0;
|
|
4683
|
-
const [internal, setInternal] =
|
|
4704
|
+
const [internal, setInternal] = React15.useState(defaultChecked);
|
|
4684
4705
|
const isOn = isControlled ? checked : internal;
|
|
4685
4706
|
const handle = (c) => {
|
|
4686
4707
|
if (!isControlled) setInternal(c);
|
|
@@ -4753,19 +4774,19 @@ function AutoComplete({
|
|
|
4753
4774
|
required,
|
|
4754
4775
|
htmlFor
|
|
4755
4776
|
}) {
|
|
4756
|
-
const errorId =
|
|
4777
|
+
const errorId = React15.useId();
|
|
4757
4778
|
const hasError = errorMessage != null;
|
|
4758
|
-
const [term, setTerm] =
|
|
4759
|
-
const [open, setOpen] =
|
|
4760
|
-
const [asyncItems, setAsyncItems] =
|
|
4761
|
-
const [loading, setLoading] =
|
|
4779
|
+
const [term, setTerm] = React15.useState("");
|
|
4780
|
+
const [open, setOpen] = React15.useState(false);
|
|
4781
|
+
const [asyncItems, setAsyncItems] = React15.useState([]);
|
|
4782
|
+
const [loading, setLoading] = React15.useState(false);
|
|
4762
4783
|
const isAsync = typeof onSearch === "function";
|
|
4763
|
-
const debounceRef =
|
|
4764
|
-
const requestIdRef =
|
|
4784
|
+
const debounceRef = React15.useRef(null);
|
|
4785
|
+
const requestIdRef = React15.useRef(0);
|
|
4765
4786
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
4766
4787
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
4767
4788
|
) : [];
|
|
4768
|
-
|
|
4789
|
+
React15.useEffect(() => {
|
|
4769
4790
|
if (!isAsync) return;
|
|
4770
4791
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
4771
4792
|
if (!term.trim()) {
|
|
@@ -4921,15 +4942,15 @@ function TreeSelect({
|
|
|
4921
4942
|
defaultExpandedKeys = [],
|
|
4922
4943
|
size = "md"
|
|
4923
4944
|
}) {
|
|
4924
|
-
const errorId =
|
|
4945
|
+
const errorId = React15.useId();
|
|
4925
4946
|
const hasError = errorMessage != null;
|
|
4926
|
-
const [open, setOpen] =
|
|
4927
|
-
const [expanded, setExpanded] =
|
|
4928
|
-
const [activeIndex, setActiveIndex] =
|
|
4929
|
-
const listRef =
|
|
4930
|
-
const visible =
|
|
4931
|
-
const didSyncOnOpenRef =
|
|
4932
|
-
|
|
4947
|
+
const [open, setOpen] = React15.useState(false);
|
|
4948
|
+
const [expanded, setExpanded] = React15.useState(() => new Set(defaultExpandedKeys));
|
|
4949
|
+
const [activeIndex, setActiveIndex] = React15.useState(0);
|
|
4950
|
+
const listRef = React15.useRef(null);
|
|
4951
|
+
const visible = React15.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
4952
|
+
const didSyncOnOpenRef = React15.useRef(false);
|
|
4953
|
+
React15.useEffect(() => {
|
|
4933
4954
|
if (!open) {
|
|
4934
4955
|
didSyncOnOpenRef.current = false;
|
|
4935
4956
|
return;
|
|
@@ -4939,7 +4960,7 @@ function TreeSelect({
|
|
|
4939
4960
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
4940
4961
|
didSyncOnOpenRef.current = true;
|
|
4941
4962
|
}, [open, value]);
|
|
4942
|
-
const selectedNode =
|
|
4963
|
+
const selectedNode = React15.useMemo(
|
|
4943
4964
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
4944
4965
|
[items, value]
|
|
4945
4966
|
);
|
|
@@ -5170,11 +5191,11 @@ function FileInput({
|
|
|
5170
5191
|
required,
|
|
5171
5192
|
icon
|
|
5172
5193
|
}) {
|
|
5173
|
-
const inputRef =
|
|
5174
|
-
const errorId =
|
|
5175
|
-
const [files, setFiles] =
|
|
5176
|
-
const [dragging, setDragging] =
|
|
5177
|
-
const [sizeError, setSizeError] =
|
|
5194
|
+
const inputRef = React15.useRef(null);
|
|
5195
|
+
const errorId = React15.useId();
|
|
5196
|
+
const [files, setFiles] = React15.useState([]);
|
|
5197
|
+
const [dragging, setDragging] = React15.useState(false);
|
|
5198
|
+
const [sizeError, setSizeError] = React15.useState(null);
|
|
5178
5199
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5179
5200
|
const openPicker = () => {
|
|
5180
5201
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5365,30 +5386,30 @@ function DatePicker({
|
|
|
5365
5386
|
size = "md",
|
|
5366
5387
|
className = ""
|
|
5367
5388
|
}) {
|
|
5368
|
-
const errorId =
|
|
5389
|
+
const errorId = React15.useId();
|
|
5369
5390
|
const hasError = errorMessage != null;
|
|
5370
|
-
const [open, setOpen] =
|
|
5371
|
-
const [viewMonth, setViewMonth] =
|
|
5372
|
-
const [focusDate, setFocusDate] =
|
|
5373
|
-
const [view, setView] =
|
|
5374
|
-
const gridRef =
|
|
5375
|
-
|
|
5391
|
+
const [open, setOpen] = React15.useState(false);
|
|
5392
|
+
const [viewMonth, setViewMonth] = React15.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
5393
|
+
const [focusDate, setFocusDate] = React15.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
5394
|
+
const [view, setView] = React15.useState("days");
|
|
5395
|
+
const gridRef = React15.useRef(null);
|
|
5396
|
+
React15.useEffect(() => {
|
|
5376
5397
|
if (!open) return;
|
|
5377
5398
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5378
5399
|
setViewMonth(startOfMonth(target));
|
|
5379
5400
|
setFocusDate(target);
|
|
5380
5401
|
setView("days");
|
|
5381
5402
|
}, [open, value]);
|
|
5382
|
-
|
|
5403
|
+
React15.useEffect(() => {
|
|
5383
5404
|
if (!open) return;
|
|
5384
5405
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
|
|
5385
5406
|
cell?.focus();
|
|
5386
5407
|
}, [open, focusDate]);
|
|
5387
|
-
const weekdays =
|
|
5408
|
+
const weekdays = React15.useMemo(() => {
|
|
5388
5409
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5389
5410
|
return ordered;
|
|
5390
5411
|
}, [weekStartsOn]);
|
|
5391
|
-
const grid =
|
|
5412
|
+
const grid = React15.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5392
5413
|
const isDisabled = (d) => {
|
|
5393
5414
|
if (min && d < min) return true;
|
|
5394
5415
|
if (max && d > max) return true;
|
|
@@ -5678,10 +5699,10 @@ function TextArea({
|
|
|
5678
5699
|
style,
|
|
5679
5700
|
inputStyle
|
|
5680
5701
|
}) {
|
|
5681
|
-
const errorId =
|
|
5702
|
+
const errorId = React15.useId();
|
|
5682
5703
|
const hasError = errorMessage != null;
|
|
5683
|
-
const ref =
|
|
5684
|
-
|
|
5704
|
+
const ref = React15.useRef(null);
|
|
5705
|
+
React15.useLayoutEffect(() => {
|
|
5685
5706
|
if (!autoGrow) return;
|
|
5686
5707
|
const el = ref.current;
|
|
5687
5708
|
if (!el) return;
|
|
@@ -5728,7 +5749,7 @@ function TextArea({
|
|
|
5728
5749
|
}
|
|
5729
5750
|
);
|
|
5730
5751
|
}
|
|
5731
|
-
var
|
|
5752
|
+
var SIZE4 = {
|
|
5732
5753
|
sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
|
|
5733
5754
|
md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
|
|
5734
5755
|
lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
|
|
@@ -5750,12 +5771,12 @@ function SegmentedControl({
|
|
|
5750
5771
|
errorMessage,
|
|
5751
5772
|
"aria-label": ariaLabel
|
|
5752
5773
|
}) {
|
|
5753
|
-
const sz =
|
|
5754
|
-
const groupId =
|
|
5755
|
-
const errorId =
|
|
5774
|
+
const sz = SIZE4[size];
|
|
5775
|
+
const groupId = React15.useId();
|
|
5776
|
+
const errorId = React15.useId();
|
|
5756
5777
|
const hasError = errorMessage != null;
|
|
5757
5778
|
const isControlled = value !== void 0;
|
|
5758
|
-
const [internal, setInternal] =
|
|
5779
|
+
const [internal, setInternal] = React15.useState(defaultValue);
|
|
5759
5780
|
const current = isControlled ? value : internal;
|
|
5760
5781
|
const handle = (v) => {
|
|
5761
5782
|
if (!v) return;
|
|
@@ -5849,14 +5870,14 @@ function Slider({
|
|
|
5849
5870
|
name,
|
|
5850
5871
|
htmlFor
|
|
5851
5872
|
}) {
|
|
5852
|
-
const errorId =
|
|
5873
|
+
const errorId = React15.useId();
|
|
5853
5874
|
const hasError = errorMessage != null;
|
|
5854
5875
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
5855
|
-
const [internal, setInternal] =
|
|
5876
|
+
const [internal, setInternal] = React15.useState(
|
|
5856
5877
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
5857
5878
|
);
|
|
5858
5879
|
const current = toArray(value) ?? internal;
|
|
5859
|
-
const [dragging, setDragging] =
|
|
5880
|
+
const [dragging, setDragging] = React15.useState(false);
|
|
5860
5881
|
const emit = (arr) => {
|
|
5861
5882
|
setInternal(arr);
|
|
5862
5883
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -5951,11 +5972,11 @@ function TagsInput({
|
|
|
5951
5972
|
validate,
|
|
5952
5973
|
separators = ["Enter", ","]
|
|
5953
5974
|
}) {
|
|
5954
|
-
const errorId =
|
|
5955
|
-
const inputRef =
|
|
5956
|
-
const [internal, setInternal] =
|
|
5957
|
-
const [draft, setDraft] =
|
|
5958
|
-
const [localError, setLocalError] =
|
|
5975
|
+
const errorId = React15.useId();
|
|
5976
|
+
const inputRef = React15.useRef(null);
|
|
5977
|
+
const [internal, setInternal] = React15.useState(defaultValue ?? []);
|
|
5978
|
+
const [draft, setDraft] = React15.useState("");
|
|
5979
|
+
const [localError, setLocalError] = React15.useState(null);
|
|
5959
5980
|
const tags = value ?? internal;
|
|
5960
5981
|
const hasError = errorMessage != null || localError != null;
|
|
5961
5982
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -6086,9 +6107,9 @@ function OtpInput({
|
|
|
6086
6107
|
className,
|
|
6087
6108
|
groupAfter
|
|
6088
6109
|
}) {
|
|
6089
|
-
const errorId =
|
|
6110
|
+
const errorId = React15.useId();
|
|
6090
6111
|
const hasError = errorMessage != null;
|
|
6091
|
-
const refs =
|
|
6112
|
+
const refs = React15.useRef([]);
|
|
6092
6113
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
6093
6114
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
6094
6115
|
const emit = (next) => {
|
|
@@ -6137,7 +6158,7 @@ function OtpInput({
|
|
|
6137
6158
|
emit(valid.join(""));
|
|
6138
6159
|
focusBox(valid.length);
|
|
6139
6160
|
};
|
|
6140
|
-
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(
|
|
6161
|
+
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(React15__default.default.Fragment, { children: [
|
|
6141
6162
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6142
6163
|
"input",
|
|
6143
6164
|
{
|
|
@@ -6195,9 +6216,9 @@ function Rating({
|
|
|
6195
6216
|
className,
|
|
6196
6217
|
required
|
|
6197
6218
|
}) {
|
|
6198
|
-
const errorId =
|
|
6199
|
-
const [internal, setInternal] =
|
|
6200
|
-
const [hover, setHover] =
|
|
6219
|
+
const errorId = React15.useId();
|
|
6220
|
+
const [internal, setInternal] = React15.useState(defaultValue);
|
|
6221
|
+
const [hover, setHover] = React15.useState(null);
|
|
6201
6222
|
const current = value ?? internal;
|
|
6202
6223
|
const display2 = hover ?? current;
|
|
6203
6224
|
const interactive = !readOnly && !disabled;
|
|
@@ -6320,9 +6341,9 @@ function TimePicker({
|
|
|
6320
6341
|
required,
|
|
6321
6342
|
style
|
|
6322
6343
|
}) {
|
|
6323
|
-
const errorId =
|
|
6344
|
+
const errorId = React15.useId();
|
|
6324
6345
|
const hasError = errorMessage != null;
|
|
6325
|
-
const [open, setOpen] =
|
|
6346
|
+
const [open, setOpen] = React15.useState(false);
|
|
6326
6347
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6327
6348
|
const update = (next) => {
|
|
6328
6349
|
const merged = { ...parsed, ...next };
|
|
@@ -6446,13 +6467,13 @@ function DateRangePicker({
|
|
|
6446
6467
|
required,
|
|
6447
6468
|
style
|
|
6448
6469
|
}) {
|
|
6449
|
-
const errorId =
|
|
6470
|
+
const errorId = React15.useId();
|
|
6450
6471
|
const hasError = errorMessage != null;
|
|
6451
|
-
const [open, setOpen] =
|
|
6452
|
-
const [leftMonth, setLeftMonth] =
|
|
6453
|
-
const [pendingStart, setPendingStart] =
|
|
6454
|
-
const [hoverDate, setHoverDate] =
|
|
6455
|
-
const weekdays =
|
|
6472
|
+
const [open, setOpen] = React15.useState(false);
|
|
6473
|
+
const [leftMonth, setLeftMonth] = React15.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
|
|
6474
|
+
const [pendingStart, setPendingStart] = React15.useState(null);
|
|
6475
|
+
const [hoverDate, setHoverDate] = React15.useState(null);
|
|
6476
|
+
const weekdays = React15.useMemo(
|
|
6456
6477
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
6457
6478
|
[weekStartsOn]
|
|
6458
6479
|
);
|
|
@@ -6628,10 +6649,10 @@ function ColorPicker({
|
|
|
6628
6649
|
required,
|
|
6629
6650
|
placeholder = "Pick a colour\u2026"
|
|
6630
6651
|
}) {
|
|
6631
|
-
const errorId =
|
|
6652
|
+
const errorId = React15.useId();
|
|
6632
6653
|
const hasError = errorMessage != null;
|
|
6633
|
-
const [open, setOpen] =
|
|
6634
|
-
const [draft, setDraft] =
|
|
6654
|
+
const [open, setOpen] = React15.useState(false);
|
|
6655
|
+
const [draft, setDraft] = React15.useState(value);
|
|
6635
6656
|
const valid = HEX_RE.test(value);
|
|
6636
6657
|
const pick = (hex) => {
|
|
6637
6658
|
onChange?.(hex);
|
|
@@ -7018,11 +7039,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
7018
7039
|
|
|
7019
7040
|
// src/form/useForm.ts
|
|
7020
7041
|
function useForm(options = {}) {
|
|
7021
|
-
const ref =
|
|
7042
|
+
const ref = React15.useRef(null);
|
|
7022
7043
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
7023
7044
|
const store = ref.current;
|
|
7024
|
-
|
|
7025
|
-
const make =
|
|
7045
|
+
React15.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7046
|
+
const make = React15.useCallback(
|
|
7026
7047
|
(kind) => (name, rules) => {
|
|
7027
7048
|
if (rules !== void 0) store.setRule(name, rules);
|
|
7028
7049
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -7051,9 +7072,9 @@ function useForm(options = {}) {
|
|
|
7051
7072
|
fieldTarget: make("target")
|
|
7052
7073
|
};
|
|
7053
7074
|
}
|
|
7054
|
-
var FormContext =
|
|
7075
|
+
var FormContext = React15.createContext(null);
|
|
7055
7076
|
function useFormStore() {
|
|
7056
|
-
const store =
|
|
7077
|
+
const store = React15.useContext(FormContext);
|
|
7057
7078
|
if (!store) {
|
|
7058
7079
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
7059
7080
|
}
|
|
@@ -7067,8 +7088,8 @@ function Form({
|
|
|
7067
7088
|
children,
|
|
7068
7089
|
...rest
|
|
7069
7090
|
}) {
|
|
7070
|
-
const ref =
|
|
7071
|
-
const bypass =
|
|
7091
|
+
const ref = React15.useRef(null);
|
|
7092
|
+
const bypass = React15.useRef(false);
|
|
7072
7093
|
const handleSubmit = async (e) => {
|
|
7073
7094
|
if (bypass.current) {
|
|
7074
7095
|
bypass.current = false;
|
|
@@ -7120,12 +7141,12 @@ function useFormField(name, options = {}) {
|
|
|
7120
7141
|
const store = useFormStore();
|
|
7121
7142
|
const { kind = "value", rules } = options;
|
|
7122
7143
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
7123
|
-
|
|
7144
|
+
React15.useEffect(() => {
|
|
7124
7145
|
return () => {
|
|
7125
7146
|
if (rules !== void 0) store.removeRule(name);
|
|
7126
7147
|
};
|
|
7127
7148
|
}, [store, name]);
|
|
7128
|
-
const snap =
|
|
7149
|
+
const snap = React15.useSyncExternalStore(
|
|
7129
7150
|
store.subscribe,
|
|
7130
7151
|
() => store.getFieldSnapshot(name)
|
|
7131
7152
|
);
|
|
@@ -7137,7 +7158,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
7137
7158
|
}
|
|
7138
7159
|
function useFieldArray(name) {
|
|
7139
7160
|
const store = useFormStore();
|
|
7140
|
-
|
|
7161
|
+
React15.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7141
7162
|
const arr = store.getValue(name) ?? [];
|
|
7142
7163
|
const keys = store.getKeys(name);
|
|
7143
7164
|
return {
|
|
@@ -7260,7 +7281,7 @@ function CreditCardForm({
|
|
|
7260
7281
|
className = "",
|
|
7261
7282
|
style
|
|
7262
7283
|
}) {
|
|
7263
|
-
const initial =
|
|
7284
|
+
const initial = React15.useRef({
|
|
7264
7285
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7265
7286
|
name: defaultValue?.name ?? "",
|
|
7266
7287
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7269,7 +7290,7 @@ function CreditCardForm({
|
|
|
7269
7290
|
const form = useForm({ initialValues: initial });
|
|
7270
7291
|
const numberStr = String(form.values.number ?? "");
|
|
7271
7292
|
const brand = detectBrand(numberStr);
|
|
7272
|
-
|
|
7293
|
+
React15.useEffect(() => {
|
|
7273
7294
|
onChange?.(toCard(form.values));
|
|
7274
7295
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7275
7296
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7400,6 +7421,7 @@ exports.Grid = Grid2;
|
|
|
7400
7421
|
exports.GridCard = GridCard;
|
|
7401
7422
|
exports.Icon = icons_default;
|
|
7402
7423
|
exports.IconButton = IconButton;
|
|
7424
|
+
exports.Kbd = Kbd;
|
|
7403
7425
|
exports.List = List2;
|
|
7404
7426
|
exports.LoadingSpinner = LoadingSpinner;
|
|
7405
7427
|
exports.MegaMenu = MegaMenu_default;
|