@tensor_1/react 2.19.1 → 2.20.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/README.md +14 -0
- package/dist/components/CopyButton.d.ts +25 -0
- package/dist/components/CopyButton.js +52 -0
- package/dist/components/Stat.d.ts +19 -3
- package/dist/components/Stat.js +50 -9
- package/dist/components/Tabs.d.ts +7 -1
- package/dist/components/Tabs.js +85 -15
- package/dist/copy-model.d.ts +12 -0
- package/dist/copy-model.js +12 -0
- package/dist/index.cjs +1030 -856
- package/dist/index.d.cts +49 -5
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -50,6 +50,7 @@ __export(src_exports, {
|
|
|
50
50
|
ConfirmDialog: () => ConfirmDialog,
|
|
51
51
|
ContentList: () => ContentList,
|
|
52
52
|
ContentListItem: () => ContentListItem,
|
|
53
|
+
CopyButton: () => CopyButton,
|
|
53
54
|
DEFAULT_RELATIONSHIP_GRAPH_LABELS: () => DEFAULT_RELATIONSHIP_GRAPH_LABELS,
|
|
54
55
|
DEFAULT_SAVE_STATUS_LABELS: () => DEFAULT_SAVE_STATUS_LABELS,
|
|
55
56
|
DateRangePicker: () => DateRangePicker,
|
|
@@ -1386,21 +1387,62 @@ function DescriptionItem({ term, children }) {
|
|
|
1386
1387
|
var import_react20 = require("react");
|
|
1387
1388
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1388
1389
|
var TabsCtx = (0, import_react20.createContext)({});
|
|
1389
|
-
|
|
1390
|
+
var Chevron = ({ d }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d }) });
|
|
1391
|
+
var inlineOffset = (el, rtl) => rtl ? -el.scrollLeft : el.scrollLeft;
|
|
1392
|
+
function Tabs({ variant = "line", value, onChange, children, className, overflow = "wrap" }) {
|
|
1390
1393
|
const baseId = (0, import_react20.useId)();
|
|
1391
1394
|
const listRef = (0, import_react20.useRef)(null);
|
|
1392
1395
|
const contextValue = (0, import_react20.useMemo)(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
|
|
1396
|
+
const scroll = overflow === "scroll";
|
|
1397
|
+
const [hidden, setHidden] = (0, import_react20.useState)({ start: false, end: false });
|
|
1393
1398
|
const kids = import_react20.Children.toArray(children);
|
|
1394
1399
|
const panels = kids.filter((k) => (0, import_react20.isValidElement)(k) && k.type === TabPanel);
|
|
1395
1400
|
const tabs = kids.filter((k) => !((0, import_react20.isValidElement)(k) && k.type === TabPanel));
|
|
1396
1401
|
(0, import_react20.useEffect)(() => {
|
|
1397
|
-
const
|
|
1398
|
-
if (!
|
|
1399
|
-
const all = Array.from(
|
|
1402
|
+
const list2 = listRef.current;
|
|
1403
|
+
if (!list2) return;
|
|
1404
|
+
const all = Array.from(list2.querySelectorAll('[role="tab"]'));
|
|
1400
1405
|
const enabled = all.filter((t) => !t.matches(":disabled"));
|
|
1401
1406
|
const active = enabled.find((t) => t.getAttribute("aria-selected") === "true") ?? enabled[0];
|
|
1402
1407
|
for (const t of all) t.tabIndex = t === active ? 0 : -1;
|
|
1403
1408
|
});
|
|
1409
|
+
(0, import_react20.useEffect)(() => {
|
|
1410
|
+
const list2 = listRef.current;
|
|
1411
|
+
if (!scroll || !list2) return;
|
|
1412
|
+
const measure = () => {
|
|
1413
|
+
const rtl = getComputedStyle(list2).direction === "rtl";
|
|
1414
|
+
const pos = inlineOffset(list2, rtl);
|
|
1415
|
+
const max = list2.scrollWidth - list2.clientWidth;
|
|
1416
|
+
const next = { start: pos > 1, end: pos < max - 1 };
|
|
1417
|
+
setHidden((prev) => prev.start === next.start && prev.end === next.end ? prev : next);
|
|
1418
|
+
};
|
|
1419
|
+
measure();
|
|
1420
|
+
list2.addEventListener("scroll", measure, { passive: true });
|
|
1421
|
+
if (typeof ResizeObserver === "undefined") return () => list2.removeEventListener("scroll", measure);
|
|
1422
|
+
const observer = new ResizeObserver(measure);
|
|
1423
|
+
observer.observe(list2);
|
|
1424
|
+
for (const tab of Array.from(list2.children)) observer.observe(tab);
|
|
1425
|
+
return () => {
|
|
1426
|
+
list2.removeEventListener("scroll", measure);
|
|
1427
|
+
observer.disconnect();
|
|
1428
|
+
};
|
|
1429
|
+
});
|
|
1430
|
+
(0, import_react20.useEffect)(() => {
|
|
1431
|
+
const list2 = listRef.current;
|
|
1432
|
+
const tab = list2?.querySelector('[role="tab"][aria-selected="true"]');
|
|
1433
|
+
if (!scroll || !list2 || !tab) return;
|
|
1434
|
+
const outer = list2.getBoundingClientRect();
|
|
1435
|
+
const inner = tab.getBoundingClientRect();
|
|
1436
|
+
const reserve = list2.scrollWidth > list2.clientWidth ? Number.parseFloat(getComputedStyle(list2).getPropertyValue("--uix-control-h")) || 0 : 0;
|
|
1437
|
+
if (inner.left < outer.left + reserve) list2.scrollBy({ left: inner.left - outer.left - reserve });
|
|
1438
|
+
else if (inner.right > outer.right - reserve) list2.scrollBy({ left: inner.right - outer.right + reserve });
|
|
1439
|
+
}, [scroll, value]);
|
|
1440
|
+
const page = (direction) => {
|
|
1441
|
+
const list2 = listRef.current;
|
|
1442
|
+
if (!list2) return;
|
|
1443
|
+
const rtl = getComputedStyle(list2).direction === "rtl";
|
|
1444
|
+
list2.scrollBy({ left: direction * (rtl ? -1 : 1) * list2.clientWidth * 0.8 });
|
|
1445
|
+
};
|
|
1404
1446
|
const onKeyDown = (e) => {
|
|
1405
1447
|
const items = Array.from(
|
|
1406
1448
|
listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []
|
|
@@ -1432,17 +1474,46 @@ function Tabs({ variant = "line", value, onChange, children, className }) {
|
|
|
1432
1474
|
target.click();
|
|
1433
1475
|
}
|
|
1434
1476
|
};
|
|
1477
|
+
const list = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1478
|
+
"div",
|
|
1479
|
+
{
|
|
1480
|
+
ref: listRef,
|
|
1481
|
+
role: "tablist",
|
|
1482
|
+
className: cx("uix-tabs", `uix-tabs--${variant}`, scroll && "uix-tabs--scroll", className),
|
|
1483
|
+
onKeyDown,
|
|
1484
|
+
children: tabs
|
|
1485
|
+
}
|
|
1486
|
+
);
|
|
1435
1487
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TabsCtx.Provider, { value: contextValue, children: [
|
|
1436
|
-
/* @__PURE__ */ (0, import_jsx_runtime24.
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1488
|
+
scroll ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "uix-tabs-scroller", children: [
|
|
1489
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1490
|
+
"button",
|
|
1491
|
+
{
|
|
1492
|
+
type: "button",
|
|
1493
|
+
className: "uix-tabs-scroller__prev",
|
|
1494
|
+
"aria-hidden": "true",
|
|
1495
|
+
tabIndex: -1,
|
|
1496
|
+
hidden: !hidden.start,
|
|
1497
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
1498
|
+
onClick: () => page(-1),
|
|
1499
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chevron, { d: "m15 18-6-6 6-6" })
|
|
1500
|
+
}
|
|
1501
|
+
),
|
|
1502
|
+
list,
|
|
1503
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1504
|
+
"button",
|
|
1505
|
+
{
|
|
1506
|
+
type: "button",
|
|
1507
|
+
className: "uix-tabs-scroller__next",
|
|
1508
|
+
"aria-hidden": "true",
|
|
1509
|
+
tabIndex: -1,
|
|
1510
|
+
hidden: !hidden.end,
|
|
1511
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
1512
|
+
onClick: () => page(1),
|
|
1513
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Chevron, { d: "m9 18 6-6-6-6" })
|
|
1514
|
+
}
|
|
1515
|
+
)
|
|
1516
|
+
] }) : list,
|
|
1446
1517
|
panels
|
|
1447
1518
|
] });
|
|
1448
1519
|
}
|
|
@@ -1670,10 +1741,71 @@ function StarButton({
|
|
|
1670
1741
|
);
|
|
1671
1742
|
}
|
|
1672
1743
|
|
|
1673
|
-
// src/components/
|
|
1744
|
+
// src/components/CopyButton.tsx
|
|
1674
1745
|
var import_react23 = require("react");
|
|
1746
|
+
|
|
1747
|
+
// src/copy-model.ts
|
|
1748
|
+
async function copyText(value, clipboard = globalThis.navigator?.clipboard) {
|
|
1749
|
+
if (!clipboard || typeof clipboard.writeText !== "function") return false;
|
|
1750
|
+
try {
|
|
1751
|
+
await clipboard.writeText(value);
|
|
1752
|
+
return true;
|
|
1753
|
+
} catch {
|
|
1754
|
+
return false;
|
|
1755
|
+
}
|
|
1756
|
+
}
|
|
1757
|
+
|
|
1758
|
+
// src/components/CopyButton.tsx
|
|
1675
1759
|
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1676
|
-
var
|
|
1760
|
+
var CONFIRM_MS = 1500;
|
|
1761
|
+
var CopyGlyph = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
|
|
1762
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2" }),
|
|
1763
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
|
|
1764
|
+
] });
|
|
1765
|
+
var CheckGlyph = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
|
|
1766
|
+
function CopyButton({ value, label, copiedLabel, failedLabel, className }) {
|
|
1767
|
+
const [outcome, setOutcome] = (0, import_react23.useState)("idle");
|
|
1768
|
+
const copied = outcome === "copied";
|
|
1769
|
+
const timer = (0, import_react23.useRef)(void 0);
|
|
1770
|
+
const mounted = (0, import_react23.useRef)(true);
|
|
1771
|
+
(0, import_react23.useEffect)(() => {
|
|
1772
|
+
mounted.current = true;
|
|
1773
|
+
return () => {
|
|
1774
|
+
mounted.current = false;
|
|
1775
|
+
clearTimeout(timer.current);
|
|
1776
|
+
};
|
|
1777
|
+
}, []);
|
|
1778
|
+
const onClick = async () => {
|
|
1779
|
+
const ok = await copyText(value);
|
|
1780
|
+
if (!mounted.current) return;
|
|
1781
|
+
clearTimeout(timer.current);
|
|
1782
|
+
if (!ok && !failedLabel) {
|
|
1783
|
+
setOutcome("idle");
|
|
1784
|
+
return;
|
|
1785
|
+
}
|
|
1786
|
+
setOutcome(ok ? "copied" : "failed");
|
|
1787
|
+
timer.current = setTimeout(() => setOutcome("idle"), CONFIRM_MS);
|
|
1788
|
+
};
|
|
1789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
|
|
1790
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1791
|
+
"button",
|
|
1792
|
+
{
|
|
1793
|
+
type: "button",
|
|
1794
|
+
className: cx("uix-btn", "uix-btn--ghost", "uix-btn--icon", "uix-btn--sm", "uix-copy-button", className),
|
|
1795
|
+
"aria-label": label,
|
|
1796
|
+
"data-copied": copied || void 0,
|
|
1797
|
+
onClick,
|
|
1798
|
+
children: copied ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckGlyph, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CopyGlyph, {})
|
|
1799
|
+
}
|
|
1800
|
+
),
|
|
1801
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { role: "status", className: "uix-visually-hidden", children: outcome === "copied" ? copiedLabel : outcome === "failed" ? failedLabel : "" })
|
|
1802
|
+
] });
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
// src/components/NavFavourites.tsx
|
|
1806
|
+
var import_react24 = require("react");
|
|
1807
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1808
|
+
var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1677
1809
|
"svg",
|
|
1678
1810
|
{
|
|
1679
1811
|
width: "12",
|
|
@@ -1686,10 +1818,10 @@ var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
|
1686
1818
|
strokeLinejoin: "round",
|
|
1687
1819
|
"aria-hidden": "true",
|
|
1688
1820
|
className: "uix-favourites__chevron",
|
|
1689
|
-
children: /* @__PURE__ */ (0,
|
|
1821
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "m6 9 6 6 6-6" })
|
|
1690
1822
|
}
|
|
1691
1823
|
);
|
|
1692
|
-
var ChevronRightIcon = () => /* @__PURE__ */ (0,
|
|
1824
|
+
var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1693
1825
|
"svg",
|
|
1694
1826
|
{
|
|
1695
1827
|
width: "12",
|
|
@@ -1702,10 +1834,10 @@ var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
|
1702
1834
|
strokeLinejoin: "round",
|
|
1703
1835
|
"aria-hidden": "true",
|
|
1704
1836
|
className: "uix-favourites__chevron",
|
|
1705
|
-
children: /* @__PURE__ */ (0,
|
|
1837
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "m9 18 6-6-6-6" })
|
|
1706
1838
|
}
|
|
1707
1839
|
);
|
|
1708
|
-
var MoreIcon = () => /* @__PURE__ */ (0,
|
|
1840
|
+
var MoreIcon = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1709
1841
|
"svg",
|
|
1710
1842
|
{
|
|
1711
1843
|
width: "14",
|
|
@@ -1718,9 +1850,9 @@ var MoreIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
|
1718
1850
|
strokeLinejoin: "round",
|
|
1719
1851
|
"aria-hidden": "true",
|
|
1720
1852
|
children: [
|
|
1721
|
-
/* @__PURE__ */ (0,
|
|
1722
|
-
/* @__PURE__ */ (0,
|
|
1723
|
-
/* @__PURE__ */ (0,
|
|
1853
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
|
|
1854
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
|
|
1855
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { cx: "12", cy: "19", r: "1" })
|
|
1724
1856
|
]
|
|
1725
1857
|
}
|
|
1726
1858
|
);
|
|
@@ -1734,14 +1866,14 @@ function NavFavourites({
|
|
|
1734
1866
|
emptyReason,
|
|
1735
1867
|
className
|
|
1736
1868
|
}) {
|
|
1737
|
-
const regionId = (0,
|
|
1738
|
-
const headerRef = (0,
|
|
1739
|
-
const regionRef = (0,
|
|
1740
|
-
const [announcement, setAnnouncement] = (0,
|
|
1741
|
-
const focusAfterRef = (0,
|
|
1742
|
-
const triggerRefs = (0,
|
|
1743
|
-
const order = (0,
|
|
1744
|
-
(0,
|
|
1869
|
+
const regionId = (0, import_react24.useId)();
|
|
1870
|
+
const headerRef = (0, import_react24.useRef)(null);
|
|
1871
|
+
const regionRef = (0, import_react24.useRef)(null);
|
|
1872
|
+
const [announcement, setAnnouncement] = (0, import_react24.useState)("");
|
|
1873
|
+
const focusAfterRef = (0, import_react24.useRef)(null);
|
|
1874
|
+
const triggerRefs = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
|
|
1875
|
+
const order = (0, import_react24.useMemo)(() => items.map((item) => item.id), [items]);
|
|
1876
|
+
(0, import_react24.useEffect)(() => {
|
|
1745
1877
|
const id = focusAfterRef.current;
|
|
1746
1878
|
if (!id) return;
|
|
1747
1879
|
focusAfterRef.current = null;
|
|
@@ -1758,7 +1890,7 @@ function NavFavourites({
|
|
|
1758
1890
|
}
|
|
1759
1891
|
onToggleCollapsed?.();
|
|
1760
1892
|
};
|
|
1761
|
-
const move = (0,
|
|
1893
|
+
const move = (0, import_react24.useCallback)((id, dir) => {
|
|
1762
1894
|
const idx = order.indexOf(id);
|
|
1763
1895
|
const next = idx + dir;
|
|
1764
1896
|
if (idx < 0 || next < 0 || next >= order.length) return;
|
|
@@ -1771,19 +1903,19 @@ function NavFavourites({
|
|
|
1771
1903
|
if (moved) setAnnouncement(`${moved.label} moved to position ${next + 1} of ${order.length}`);
|
|
1772
1904
|
onReorder(reordered);
|
|
1773
1905
|
}, [onReorder, order]);
|
|
1774
|
-
const remove = (0,
|
|
1906
|
+
const remove = (0, import_react24.useCallback)((id) => {
|
|
1775
1907
|
const idx = order.indexOf(id);
|
|
1776
1908
|
const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
|
|
1777
1909
|
focusAfterRef.current = neighbour;
|
|
1778
1910
|
onRemove(id);
|
|
1779
1911
|
}, [onRemove, order]);
|
|
1780
|
-
const registerTrigger = (0,
|
|
1912
|
+
const registerTrigger = (0, import_react24.useCallback)((id, element) => {
|
|
1781
1913
|
if (element) triggerRefs.current.set(id, element);
|
|
1782
1914
|
else triggerRefs.current.delete(id);
|
|
1783
1915
|
}, []);
|
|
1784
|
-
return /* @__PURE__ */ (0,
|
|
1785
|
-
/* @__PURE__ */ (0,
|
|
1786
|
-
/* @__PURE__ */ (0,
|
|
1916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-favourites", className), children: [
|
|
1917
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
|
|
1918
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1787
1919
|
"button",
|
|
1788
1920
|
{
|
|
1789
1921
|
ref: headerRef,
|
|
@@ -1793,26 +1925,26 @@ function NavFavourites({
|
|
|
1793
1925
|
onClick: handleToggle,
|
|
1794
1926
|
className: "uix-favourites__heading uix-text-eyebrow",
|
|
1795
1927
|
children: [
|
|
1796
|
-
collapsed ? /* @__PURE__ */ (0,
|
|
1928
|
+
collapsed ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronDownIcon, {}),
|
|
1797
1929
|
labels.heading
|
|
1798
1930
|
]
|
|
1799
1931
|
}
|
|
1800
1932
|
),
|
|
1801
|
-
/* @__PURE__ */ (0,
|
|
1933
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1802
1934
|
"ul",
|
|
1803
1935
|
{
|
|
1804
1936
|
ref: regionRef,
|
|
1805
1937
|
id: regionId,
|
|
1806
1938
|
hidden: collapsed,
|
|
1807
1939
|
className: "uix-favourites__list",
|
|
1808
|
-
children: items.length === 0 ? /* @__PURE__ */ (0,
|
|
1940
|
+
children: items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1809
1941
|
"li",
|
|
1810
1942
|
{
|
|
1811
1943
|
className: "uix-favourites__empty uix-text-meta",
|
|
1812
1944
|
"data-empty-reason": emptyReason,
|
|
1813
1945
|
children: labels.empty
|
|
1814
1946
|
}
|
|
1815
|
-
) : items.map((item, idx) => /* @__PURE__ */ (0,
|
|
1947
|
+
) : items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1816
1948
|
FavouriteRow,
|
|
1817
1949
|
{
|
|
1818
1950
|
item,
|
|
@@ -1829,7 +1961,7 @@ function NavFavourites({
|
|
|
1829
1961
|
)
|
|
1830
1962
|
] });
|
|
1831
1963
|
}
|
|
1832
|
-
var FavouriteRow = (0,
|
|
1964
|
+
var FavouriteRow = (0, import_react24.memo)(function FavouriteRow2({
|
|
1833
1965
|
item,
|
|
1834
1966
|
isFirst,
|
|
1835
1967
|
isLast,
|
|
@@ -1838,17 +1970,17 @@ var FavouriteRow = (0, import_react23.memo)(function FavouriteRow2({
|
|
|
1838
1970
|
onRemove,
|
|
1839
1971
|
registerTrigger
|
|
1840
1972
|
}) {
|
|
1841
|
-
const [open, setOpen] = (0,
|
|
1842
|
-
const menuId = (0,
|
|
1843
|
-
const triggerRef = (0,
|
|
1844
|
-
const itemRefs = (0,
|
|
1973
|
+
const [open, setOpen] = (0, import_react24.useState)(false);
|
|
1974
|
+
const menuId = (0, import_react24.useId)();
|
|
1975
|
+
const triggerRef = (0, import_react24.useRef)(null);
|
|
1976
|
+
const itemRefs = (0, import_react24.useRef)([]);
|
|
1845
1977
|
const optionsTemplate = labels.options ?? "{label} favourite options";
|
|
1846
1978
|
const actions = [
|
|
1847
1979
|
...isFirst ? [] : [{ label: labels.moveUp, onSelect: () => onMove(item.id, -1) }],
|
|
1848
1980
|
...isLast ? [] : [{ label: labels.moveDown, onSelect: () => onMove(item.id, 1) }],
|
|
1849
1981
|
{ label: labels.remove.replace("{label}", item.label), onSelect: () => onRemove(item.id) }
|
|
1850
1982
|
];
|
|
1851
|
-
(0,
|
|
1983
|
+
(0, import_react24.useEffect)(() => {
|
|
1852
1984
|
if (open) itemRefs.current[0]?.focus();
|
|
1853
1985
|
}, [open]);
|
|
1854
1986
|
const closeAndReturnFocus = () => {
|
|
@@ -1889,14 +2021,14 @@ var FavouriteRow = (0, import_react23.memo)(function FavouriteRow2({
|
|
|
1889
2021
|
};
|
|
1890
2022
|
return (
|
|
1891
2023
|
// biome-ignore lint/a11y/noStaticElementInteractions: keyboard accelerators on the row; the focusable controls inside carry their own semantics.
|
|
1892
|
-
/* @__PURE__ */ (0,
|
|
2024
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1893
2025
|
"li",
|
|
1894
2026
|
{
|
|
1895
2027
|
className: "uix-favourites__row",
|
|
1896
2028
|
onKeyDown: onRowKeyDown,
|
|
1897
2029
|
children: [
|
|
1898
|
-
/* @__PURE__ */ (0,
|
|
1899
|
-
/* @__PURE__ */ (0,
|
|
2030
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-favourites__link", children: item.link }),
|
|
2031
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1900
2032
|
"button",
|
|
1901
2033
|
{
|
|
1902
2034
|
ref: (el) => {
|
|
@@ -1910,11 +2042,11 @@ var FavouriteRow = (0, import_react23.memo)(function FavouriteRow2({
|
|
|
1910
2042
|
"aria-label": optionsTemplate.replace("{label}", item.label),
|
|
1911
2043
|
onClick: () => setOpen((v) => !v),
|
|
1912
2044
|
className: "uix-favourites__menu-trigger",
|
|
1913
|
-
children: /* @__PURE__ */ (0,
|
|
2045
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MoreIcon, {})
|
|
1914
2046
|
}
|
|
1915
2047
|
),
|
|
1916
|
-
open ? /* @__PURE__ */ (0,
|
|
1917
|
-
/* @__PURE__ */ (0,
|
|
2048
|
+
open ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
2049
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1918
2050
|
"div",
|
|
1919
2051
|
{
|
|
1920
2052
|
"aria-hidden": "true",
|
|
@@ -1923,7 +2055,7 @@ var FavouriteRow = (0, import_react23.memo)(function FavouriteRow2({
|
|
|
1923
2055
|
className: "uix-favourites__backdrop"
|
|
1924
2056
|
}
|
|
1925
2057
|
),
|
|
1926
|
-
/* @__PURE__ */ (0,
|
|
2058
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1927
2059
|
"ul",
|
|
1928
2060
|
{
|
|
1929
2061
|
id: menuId,
|
|
@@ -1931,7 +2063,7 @@ var FavouriteRow = (0, import_react23.memo)(function FavouriteRow2({
|
|
|
1931
2063
|
"aria-label": optionsTemplate.replace("{label}", item.label),
|
|
1932
2064
|
onKeyDown: onMenuKeyDown,
|
|
1933
2065
|
className: "uix-favourites__menu",
|
|
1934
|
-
children: actions.map((action, i) => /* @__PURE__ */ (0,
|
|
2066
|
+
children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1935
2067
|
"button",
|
|
1936
2068
|
{
|
|
1937
2069
|
ref: (el) => {
|
|
@@ -1958,19 +2090,19 @@ var FavouriteRow = (0, import_react23.memo)(function FavouriteRow2({
|
|
|
1958
2090
|
});
|
|
1959
2091
|
|
|
1960
2092
|
// src/components/Alert.tsx
|
|
1961
|
-
var
|
|
2093
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1962
2094
|
function Alert({ tone, title, icon, children, className, ...props }) {
|
|
1963
|
-
return /* @__PURE__ */ (0,
|
|
2095
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1964
2096
|
"div",
|
|
1965
2097
|
{
|
|
1966
2098
|
className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className),
|
|
1967
2099
|
role: tone === "danger" || tone === "warning" ? "alert" : "status",
|
|
1968
2100
|
...props,
|
|
1969
2101
|
children: [
|
|
1970
|
-
icon && /* @__PURE__ */ (0,
|
|
1971
|
-
/* @__PURE__ */ (0,
|
|
1972
|
-
title && /* @__PURE__ */ (0,
|
|
1973
|
-
children && /* @__PURE__ */ (0,
|
|
2102
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "uix-alert__icon", children: icon }),
|
|
2103
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { children: [
|
|
2104
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "uix-alert__title", children: title }),
|
|
2105
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "uix-alert__body", children })
|
|
1974
2106
|
] })
|
|
1975
2107
|
]
|
|
1976
2108
|
}
|
|
@@ -1978,28 +2110,28 @@ function Alert({ tone, title, icon, children, className, ...props }) {
|
|
|
1978
2110
|
}
|
|
1979
2111
|
|
|
1980
2112
|
// src/components/Spinner.tsx
|
|
1981
|
-
var
|
|
2113
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1982
2114
|
function Spinner({ size = "md", accent, label, className, ...props }) {
|
|
1983
|
-
return /* @__PURE__ */ (0,
|
|
2115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1984
2116
|
"span",
|
|
1985
2117
|
{
|
|
1986
2118
|
className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
|
|
1987
2119
|
role: "status",
|
|
1988
2120
|
...props,
|
|
1989
|
-
children: /* @__PURE__ */ (0,
|
|
2121
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-visually-hidden", children: label ?? "Loading\u2026" })
|
|
1990
2122
|
}
|
|
1991
2123
|
);
|
|
1992
2124
|
}
|
|
1993
2125
|
|
|
1994
2126
|
// src/components/Toast.tsx
|
|
1995
|
-
var
|
|
1996
|
-
var
|
|
1997
|
-
var ToasterContext = (0,
|
|
2127
|
+
var import_react25 = require("react");
|
|
2128
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2129
|
+
var ToasterContext = (0, import_react25.createContext)(null);
|
|
1998
2130
|
function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
|
|
1999
2131
|
const assertive = tone === "danger";
|
|
2000
|
-
const toaster = (0,
|
|
2001
|
-
const bodyRef = (0,
|
|
2002
|
-
(0,
|
|
2132
|
+
const toaster = (0, import_react25.useContext)(ToasterContext);
|
|
2133
|
+
const bodyRef = (0, import_react25.useRef)(null);
|
|
2134
|
+
(0, import_react25.useEffect)(() => {
|
|
2003
2135
|
if (assertive || !toaster) return;
|
|
2004
2136
|
const text = bodyRef.current?.textContent?.trim();
|
|
2005
2137
|
if (text) toaster.announce(text);
|
|
@@ -2017,7 +2149,7 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
|
|
|
2017
2149
|
onClose?.();
|
|
2018
2150
|
};
|
|
2019
2151
|
const ownLiveRegion = assertive || !toaster;
|
|
2020
|
-
return /* @__PURE__ */ (0,
|
|
2152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2021
2153
|
"div",
|
|
2022
2154
|
{
|
|
2023
2155
|
className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
|
|
@@ -2026,40 +2158,40 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
|
|
|
2026
2158
|
"aria-live": ownLiveRegion ? assertive ? "assertive" : "polite" : void 0,
|
|
2027
2159
|
...props,
|
|
2028
2160
|
children: [
|
|
2029
|
-
icon && /* @__PURE__ */ (0,
|
|
2030
|
-
/* @__PURE__ */ (0,
|
|
2031
|
-
title && /* @__PURE__ */ (0,
|
|
2032
|
-
message && /* @__PURE__ */ (0,
|
|
2161
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
|
|
2162
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-toast__body", ref: bodyRef, children: [
|
|
2163
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-toast__title", children: title }),
|
|
2164
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "uix-toast__msg", children: message })
|
|
2033
2165
|
] }),
|
|
2034
|
-
onClose && /* @__PURE__ */ (0,
|
|
2166
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": "Dismiss", children: "\xD7" })
|
|
2035
2167
|
]
|
|
2036
2168
|
}
|
|
2037
2169
|
);
|
|
2038
2170
|
}
|
|
2039
2171
|
function Toaster({ children, className, ...props }) {
|
|
2040
|
-
const [announced, setAnnounced] = (0,
|
|
2041
|
-
const clearTimer = (0,
|
|
2042
|
-
const announce = (0,
|
|
2172
|
+
const [announced, setAnnounced] = (0, import_react25.useState)("");
|
|
2173
|
+
const clearTimer = (0, import_react25.useRef)(null);
|
|
2174
|
+
const announce = (0, import_react25.useCallback)((text) => {
|
|
2043
2175
|
setAnnounced((cur) => cur ? `${cur} ${text}` : text);
|
|
2044
2176
|
if (clearTimer.current != null) clearTimeout(clearTimer.current);
|
|
2045
2177
|
clearTimer.current = window.setTimeout(() => setAnnounced(""), 3e3);
|
|
2046
2178
|
}, []);
|
|
2047
|
-
(0,
|
|
2179
|
+
(0, import_react25.useEffect)(() => () => {
|
|
2048
2180
|
if (clearTimer.current != null) clearTimeout(clearTimer.current);
|
|
2049
2181
|
}, []);
|
|
2050
|
-
const ctx = (0,
|
|
2051
|
-
return /* @__PURE__ */ (0,
|
|
2052
|
-
/* @__PURE__ */ (0,
|
|
2182
|
+
const ctx = (0, import_react25.useMemo)(() => ({ announce }), [announce]);
|
|
2183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-toaster", className), role: "region", "aria-label": "Notifications", ...props, children: [
|
|
2184
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
|
|
2053
2185
|
children
|
|
2054
2186
|
] }) });
|
|
2055
2187
|
}
|
|
2056
2188
|
|
|
2057
2189
|
// src/components/Table.tsx
|
|
2058
|
-
var
|
|
2059
|
-
var
|
|
2060
|
-
var TableWrap = (0,
|
|
2061
|
-
return /* @__PURE__ */ (0,
|
|
2062
|
-
announcement != null && /* @__PURE__ */ (0,
|
|
2190
|
+
var import_react26 = require("react");
|
|
2191
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2192
|
+
var TableWrap = (0, import_react26.forwardRef)(function TableWrap2({ announcement, children, className, ...props }, ref) {
|
|
2193
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref, className: cx("uix-table-wrap", className), ...props, children: [
|
|
2194
|
+
announcement != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
|
|
2063
2195
|
children
|
|
2064
2196
|
] });
|
|
2065
2197
|
});
|
|
@@ -2074,7 +2206,7 @@ function Table({
|
|
|
2074
2206
|
children,
|
|
2075
2207
|
...props
|
|
2076
2208
|
}) {
|
|
2077
|
-
return /* @__PURE__ */ (0,
|
|
2209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2078
2210
|
"table",
|
|
2079
2211
|
{
|
|
2080
2212
|
className: cx(
|
|
@@ -2093,7 +2225,7 @@ function Table({
|
|
|
2093
2225
|
);
|
|
2094
2226
|
}
|
|
2095
2227
|
function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }) {
|
|
2096
|
-
return /* @__PURE__ */ (0,
|
|
2228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2097
2229
|
"th",
|
|
2098
2230
|
{
|
|
2099
2231
|
className,
|
|
@@ -2102,15 +2234,15 @@ function Th({ sortable, sortDirection, sortOrder, onSort, className, children, o
|
|
|
2102
2234
|
"aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
|
|
2103
2235
|
onClick: sortable && onSort ? void 0 : onClick,
|
|
2104
2236
|
...props,
|
|
2105
|
-
children: sortable ? /* @__PURE__ */ (0,
|
|
2237
|
+
children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children }) : children
|
|
2106
2238
|
}
|
|
2107
2239
|
);
|
|
2108
2240
|
}
|
|
2109
2241
|
function Td({ pinned, className, children, ...props }) {
|
|
2110
|
-
return /* @__PURE__ */ (0,
|
|
2242
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className, "data-pinned": pinned || void 0, ...props, children });
|
|
2111
2243
|
}
|
|
2112
2244
|
function Tr({ selected, pinned, className, children, ...props }) {
|
|
2113
|
-
return /* @__PURE__ */ (0,
|
|
2245
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2114
2246
|
"tr",
|
|
2115
2247
|
{
|
|
2116
2248
|
className,
|
|
@@ -2122,23 +2254,23 @@ function Tr({ selected, pinned, className, children, ...props }) {
|
|
|
2122
2254
|
);
|
|
2123
2255
|
}
|
|
2124
2256
|
function BulkBar({ count, children, className, ...props }) {
|
|
2125
|
-
return /* @__PURE__ */ (0,
|
|
2126
|
-
count != null && /* @__PURE__ */ (0,
|
|
2257
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": "Bulk actions", ...props, children: [
|
|
2258
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "uix-bulkbar__count", children: [
|
|
2127
2259
|
count,
|
|
2128
2260
|
" selected"
|
|
2129
2261
|
] }),
|
|
2130
|
-
/* @__PURE__ */ (0,
|
|
2262
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-bulkbar__spacer" }),
|
|
2131
2263
|
children
|
|
2132
2264
|
] });
|
|
2133
2265
|
}
|
|
2134
2266
|
function RowActions({ children, className, ...props }) {
|
|
2135
|
-
return /* @__PURE__ */ (0,
|
|
2267
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("td", { className: cx("uix-table__actions", className), ...props, children });
|
|
2136
2268
|
}
|
|
2137
2269
|
function RowAction({ children, className, type = "button", ...props }) {
|
|
2138
|
-
return /* @__PURE__ */ (0,
|
|
2270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type, className: cx("uix-rowact", className), ...props, children });
|
|
2139
2271
|
}
|
|
2140
2272
|
function ExpandToggle({ expanded, controls, className, type = "button", ...props }) {
|
|
2141
|
-
return /* @__PURE__ */ (0,
|
|
2273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2142
2274
|
"button",
|
|
2143
2275
|
{
|
|
2144
2276
|
type,
|
|
@@ -2147,27 +2279,27 @@ function ExpandToggle({ expanded, controls, className, type = "button", ...props
|
|
|
2147
2279
|
"aria-controls": controls,
|
|
2148
2280
|
"aria-label": expanded ? "Collapse row" : "Expand row",
|
|
2149
2281
|
...props,
|
|
2150
|
-
children: /* @__PURE__ */ (0,
|
|
2282
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M6 4l4 4-4 4" }) })
|
|
2151
2283
|
}
|
|
2152
2284
|
);
|
|
2153
2285
|
}
|
|
2154
2286
|
function CellStrong({ children, className, ...props }) {
|
|
2155
|
-
return /* @__PURE__ */ (0,
|
|
2287
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cx("uix-cell-strong", className), ...props, children });
|
|
2156
2288
|
}
|
|
2157
2289
|
function CellSub({ children, className, ...props }) {
|
|
2158
|
-
return /* @__PURE__ */ (0,
|
|
2290
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cx("uix-cell-sub", className), ...props, children });
|
|
2159
2291
|
}
|
|
2160
2292
|
function Mark({ children, className, ...props }) {
|
|
2161
|
-
return /* @__PURE__ */ (0,
|
|
2293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("mark", { className: cx("uix-mark", className), ...props, children });
|
|
2162
2294
|
}
|
|
2163
2295
|
function Highlighted({ text, query }) {
|
|
2164
|
-
return /* @__PURE__ */ (0,
|
|
2165
|
-
(seg, i) => seg.match ? /* @__PURE__ */ (0,
|
|
2296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: highlightSegments(text, query).map(
|
|
2297
|
+
(seg, i) => seg.match ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("mark", { className: "uix-mark", children: seg.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: seg.text }, i)
|
|
2166
2298
|
) });
|
|
2167
2299
|
}
|
|
2168
2300
|
|
|
2169
2301
|
// src/components/Pagination.tsx
|
|
2170
|
-
var
|
|
2302
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2171
2303
|
function getPageNumbers(page, total) {
|
|
2172
2304
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
2173
2305
|
const pages = [1];
|
|
@@ -2181,8 +2313,8 @@ function getPageNumbers(page, total) {
|
|
|
2181
2313
|
}
|
|
2182
2314
|
function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
2183
2315
|
const pages = getPageNumbers(page, pageCount);
|
|
2184
|
-
return /* @__PURE__ */ (0,
|
|
2185
|
-
/* @__PURE__ */ (0,
|
|
2316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
|
|
2317
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2186
2318
|
"button",
|
|
2187
2319
|
{
|
|
2188
2320
|
className: "uix-pagination__btn",
|
|
@@ -2193,7 +2325,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
2193
2325
|
}
|
|
2194
2326
|
),
|
|
2195
2327
|
pages.map(
|
|
2196
|
-
(p, i) => p === "ellipsis" ? /* @__PURE__ */ (0,
|
|
2328
|
+
(p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2197
2329
|
"button",
|
|
2198
2330
|
{
|
|
2199
2331
|
className: "uix-pagination__btn",
|
|
@@ -2204,7 +2336,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
2204
2336
|
p
|
|
2205
2337
|
)
|
|
2206
2338
|
),
|
|
2207
|
-
/* @__PURE__ */ (0,
|
|
2339
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2208
2340
|
"button",
|
|
2209
2341
|
{
|
|
2210
2342
|
className: "uix-pagination__btn",
|
|
@@ -2218,15 +2350,15 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
2218
2350
|
}
|
|
2219
2351
|
|
|
2220
2352
|
// src/components/StatusPill.tsx
|
|
2221
|
-
var
|
|
2353
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2222
2354
|
function StatusPill({ tone = "neutral", treatment = "filled", dot, children, className, ...props }) {
|
|
2223
|
-
return /* @__PURE__ */ (0,
|
|
2355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
2224
2356
|
"span",
|
|
2225
2357
|
{
|
|
2226
2358
|
className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", className),
|
|
2227
2359
|
...props,
|
|
2228
2360
|
children: [
|
|
2229
|
-
dot && /* @__PURE__ */ (0,
|
|
2361
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
|
|
2230
2362
|
children
|
|
2231
2363
|
]
|
|
2232
2364
|
}
|
|
@@ -2234,11 +2366,11 @@ function StatusPill({ tone = "neutral", treatment = "filled", dot, children, cla
|
|
|
2234
2366
|
}
|
|
2235
2367
|
|
|
2236
2368
|
// src/components/Progress.tsx
|
|
2237
|
-
var
|
|
2369
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2238
2370
|
function Progress({ value = 0, max = 100, indeterminate, label, className, ...props }) {
|
|
2239
2371
|
const clamped = Math.max(0, Math.min(max || 100, value));
|
|
2240
2372
|
const pct = clamped / (max || 100) * 100;
|
|
2241
|
-
return /* @__PURE__ */ (0,
|
|
2373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
2242
2374
|
"div",
|
|
2243
2375
|
{
|
|
2244
2376
|
role: "progressbar",
|
|
@@ -2248,13 +2380,13 @@ function Progress({ value = 0, max = 100, indeterminate, label, className, ...pr
|
|
|
2248
2380
|
"aria-label": label,
|
|
2249
2381
|
className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
|
|
2250
2382
|
...props,
|
|
2251
|
-
children: /* @__PURE__ */ (0,
|
|
2383
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
|
|
2252
2384
|
}
|
|
2253
2385
|
);
|
|
2254
2386
|
}
|
|
2255
2387
|
|
|
2256
2388
|
// src/components/Meter.tsx
|
|
2257
|
-
var
|
|
2389
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2258
2390
|
var toneText = {
|
|
2259
2391
|
warning: "warning",
|
|
2260
2392
|
danger: "critical",
|
|
@@ -2263,7 +2395,7 @@ var toneText = {
|
|
|
2263
2395
|
};
|
|
2264
2396
|
function Meter({ value = 0, tone, label, className, ...props }) {
|
|
2265
2397
|
const pct = Math.max(0, Math.min(100, value));
|
|
2266
|
-
return /* @__PURE__ */ (0,
|
|
2398
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2267
2399
|
"div",
|
|
2268
2400
|
{
|
|
2269
2401
|
role: "meter",
|
|
@@ -2274,7 +2406,7 @@ function Meter({ value = 0, tone, label, className, ...props }) {
|
|
|
2274
2406
|
"aria-label": label,
|
|
2275
2407
|
className: cx("uix-meter", className),
|
|
2276
2408
|
...props,
|
|
2277
|
-
children: /* @__PURE__ */ (0,
|
|
2409
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2278
2410
|
"div",
|
|
2279
2411
|
{
|
|
2280
2412
|
className: "uix-meter__fill",
|
|
@@ -2287,34 +2419,75 @@ function Meter({ value = 0, tone, label, className, ...props }) {
|
|
|
2287
2419
|
}
|
|
2288
2420
|
|
|
2289
2421
|
// src/components/Stat.tsx
|
|
2290
|
-
var
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2422
|
+
var import_react27 = require("react");
|
|
2423
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2424
|
+
var Chevron2 = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-stat__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "m6 9 6 6 6-6" }) }) });
|
|
2425
|
+
var Stat = (0, import_react27.forwardRef)(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, className, onClick, ...props }, ref) {
|
|
2426
|
+
const id = (0, import_react27.useId)();
|
|
2427
|
+
const interactive = onActivate != null;
|
|
2428
|
+
const classes = cx(
|
|
2429
|
+
"uix-stat",
|
|
2430
|
+
tone !== "neutral" && `uix-stat--${tone}`,
|
|
2431
|
+
size === "compact" && "uix-stat--compact",
|
|
2432
|
+
interactive && "uix-stat--interactive",
|
|
2433
|
+
className
|
|
2434
|
+
);
|
|
2435
|
+
const Row = interactive ? "span" : "div";
|
|
2436
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
2437
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Row, { className: "uix-stat__label", children: [
|
|
2438
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { id: interactive ? `${id}-label` : void 0, children: label }),
|
|
2439
|
+
icon,
|
|
2440
|
+
interactive && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Chevron2, {})
|
|
2296
2441
|
] }),
|
|
2297
|
-
/* @__PURE__ */ (0,
|
|
2298
|
-
(meta != null || trend != null) && /* @__PURE__ */ (0,
|
|
2299
|
-
trend != null && /* @__PURE__ */ (0,
|
|
2300
|
-
/* @__PURE__ */ (0,
|
|
2301
|
-
/* @__PURE__ */ (0,
|
|
2442
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Row, { className: "uix-stat__value", id: interactive ? `${id}-value` : void 0, children: value }),
|
|
2443
|
+
(meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Row, { className: "uix-stat__meta", id: interactive ? `${id}-meta` : void 0, children: [
|
|
2444
|
+
trend != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: [
|
|
2445
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: trend.direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M12 19V5m-6 6 6-6 6 6" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M12 5v14m6-6-6 6-6-6" }) }),
|
|
2446
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? "up" : "down" }),
|
|
2302
2447
|
trend.label
|
|
2303
2448
|
] }),
|
|
2304
2449
|
meta
|
|
2305
2450
|
] })
|
|
2306
2451
|
] });
|
|
2307
|
-
|
|
2452
|
+
if (!interactive) {
|
|
2453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref, className: classes, onClick, ...props, children: body });
|
|
2454
|
+
}
|
|
2455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2456
|
+
"button",
|
|
2457
|
+
{
|
|
2458
|
+
type: "button",
|
|
2459
|
+
...props,
|
|
2460
|
+
ref,
|
|
2461
|
+
className: classes,
|
|
2462
|
+
"aria-haspopup": "dialog",
|
|
2463
|
+
"aria-expanded": expanded,
|
|
2464
|
+
"aria-labelledby": `${id}-label ${id}-sep ${id}-value${activateLabel ? ` ${id}-action` : ""}`,
|
|
2465
|
+
"aria-describedby": meta != null || trend != null ? `${id}-meta` : void 0,
|
|
2466
|
+
onClick: (e) => {
|
|
2467
|
+
onClick?.(e);
|
|
2468
|
+
if (!e.defaultPrevented) onActivate();
|
|
2469
|
+
},
|
|
2470
|
+
children: [
|
|
2471
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { id: `${id}-sep`, className: "uix-visually-hidden", children: ":" }),
|
|
2472
|
+
activateLabel && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { id: `${id}-action`, className: "uix-visually-hidden", children: [
|
|
2473
|
+
", ",
|
|
2474
|
+
activateLabel
|
|
2475
|
+
] }),
|
|
2476
|
+
body
|
|
2477
|
+
]
|
|
2478
|
+
}
|
|
2479
|
+
);
|
|
2480
|
+
});
|
|
2308
2481
|
|
|
2309
2482
|
// src/components/Tooltip.tsx
|
|
2310
|
-
var
|
|
2311
|
-
var
|
|
2483
|
+
var import_react28 = require("react");
|
|
2484
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2312
2485
|
function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
2313
|
-
const triggerRef = (0,
|
|
2314
|
-
const bubbleRef = (0,
|
|
2315
|
-
const closeTimer = (0,
|
|
2316
|
-
const [open, setOpen] = (0,
|
|
2317
|
-
const id = (0,
|
|
2486
|
+
const triggerRef = (0, import_react28.useRef)(null);
|
|
2487
|
+
const bubbleRef = (0, import_react28.useRef)(null);
|
|
2488
|
+
const closeTimer = (0, import_react28.useRef)(null);
|
|
2489
|
+
const [open, setOpen] = (0, import_react28.useState)(false);
|
|
2490
|
+
const id = (0, import_react28.useId)();
|
|
2318
2491
|
useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
|
|
2319
2492
|
const cancelClose = () => {
|
|
2320
2493
|
if (closeTimer.current != null) {
|
|
@@ -2348,7 +2521,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
2348
2521
|
cancelClose();
|
|
2349
2522
|
closeTimer.current = window.setTimeout(hide, 100);
|
|
2350
2523
|
};
|
|
2351
|
-
(0,
|
|
2524
|
+
(0, import_react28.useEffect)(() => {
|
|
2352
2525
|
if (!open) return;
|
|
2353
2526
|
const onKey = (e) => {
|
|
2354
2527
|
if (e.key === "Escape") hide();
|
|
@@ -2356,7 +2529,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
2356
2529
|
document.addEventListener("keydown", onKey);
|
|
2357
2530
|
return () => document.removeEventListener("keydown", onKey);
|
|
2358
2531
|
}, [open]);
|
|
2359
|
-
(0,
|
|
2532
|
+
(0, import_react28.useEffect)(() => () => {
|
|
2360
2533
|
if (closeTimer.current != null) clearTimeout(closeTimer.current);
|
|
2361
2534
|
const b = bubbleRef.current;
|
|
2362
2535
|
if (b && b.matches(":popover-open")) {
|
|
@@ -2367,11 +2540,11 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
2367
2540
|
}
|
|
2368
2541
|
}, []);
|
|
2369
2542
|
const bubbleAttr = { popover: "manual" };
|
|
2370
|
-
const single = (0,
|
|
2371
|
-
const child = single ? (0,
|
|
2543
|
+
const single = (0, import_react28.isValidElement)(children);
|
|
2544
|
+
const child = single ? (0, import_react28.cloneElement)(children, {
|
|
2372
2545
|
"aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
|
|
2373
2546
|
}) : children;
|
|
2374
|
-
return /* @__PURE__ */ (0,
|
|
2547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2375
2548
|
"span",
|
|
2376
2549
|
{
|
|
2377
2550
|
ref: triggerRef,
|
|
@@ -2388,7 +2561,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
2388
2561
|
...props,
|
|
2389
2562
|
children: [
|
|
2390
2563
|
child,
|
|
2391
|
-
/* @__PURE__ */ (0,
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2392
2565
|
"span",
|
|
2393
2566
|
{
|
|
2394
2567
|
ref: bubbleRef,
|
|
@@ -2407,45 +2580,45 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
2407
2580
|
}
|
|
2408
2581
|
|
|
2409
2582
|
// src/components/States.tsx
|
|
2410
|
-
var
|
|
2583
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2411
2584
|
function EmptyState({ icon, title, children, action, variant = "section", className, ...props }) {
|
|
2412
|
-
return /* @__PURE__ */ (0,
|
|
2413
|
-
icon != null && /* @__PURE__ */ (0,
|
|
2414
|
-
title != null && /* @__PURE__ */ (0,
|
|
2585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx("uix-empty", `uix-empty--${variant}`, className), ...props, children: [
|
|
2586
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__icon", children: icon }),
|
|
2587
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
2415
2588
|
children,
|
|
2416
2589
|
action
|
|
2417
2590
|
] });
|
|
2418
2591
|
}
|
|
2419
2592
|
function ErrorState({ icon, title, detail, action, variant = "section", className, ...props }) {
|
|
2420
|
-
return /* @__PURE__ */ (0,
|
|
2421
|
-
icon != null && /* @__PURE__ */ (0,
|
|
2422
|
-
title != null && /* @__PURE__ */ (0,
|
|
2423
|
-
detail != null && /* @__PURE__ */ (0,
|
|
2593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", `uix-empty--${variant}`, className), role: "alert", ...props, children: [
|
|
2594
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
|
|
2595
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
2596
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: detail }),
|
|
2424
2597
|
action
|
|
2425
2598
|
] });
|
|
2426
2599
|
}
|
|
2427
2600
|
function ForbiddenState({ icon, title, detail, action, variant = "section", className, ...props }) {
|
|
2428
|
-
return /* @__PURE__ */ (0,
|
|
2429
|
-
icon != null && /* @__PURE__ */ (0,
|
|
2430
|
-
title != null && /* @__PURE__ */ (0,
|
|
2431
|
-
detail != null && /* @__PURE__ */ (0,
|
|
2601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx("uix-empty", "uix-empty--warning", `uix-empty--${variant}`, className), ...props, children: [
|
|
2602
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__icon uix-empty__icon--warning", children: icon }),
|
|
2603
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
2604
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: detail }),
|
|
2432
2605
|
action
|
|
2433
2606
|
] });
|
|
2434
2607
|
}
|
|
2435
2608
|
function NotFoundState({ icon, title, detail, action, variant = "section", className, ...props }) {
|
|
2436
|
-
return /* @__PURE__ */ (0,
|
|
2437
|
-
icon != null && /* @__PURE__ */ (0,
|
|
2438
|
-
title != null && /* @__PURE__ */ (0,
|
|
2439
|
-
detail != null && /* @__PURE__ */ (0,
|
|
2609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx("uix-empty", `uix-empty--${variant}`, className), ...props, children: [
|
|
2610
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__icon", children: icon }),
|
|
2611
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
2612
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: detail }),
|
|
2440
2613
|
action
|
|
2441
2614
|
] });
|
|
2442
2615
|
}
|
|
2443
2616
|
function FilteredEmptyState(props) {
|
|
2444
|
-
return /* @__PURE__ */ (0,
|
|
2617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EmptyState, { "data-filtered": "true", ...props });
|
|
2445
2618
|
}
|
|
2446
2619
|
function Skeleton({ variant = "block", width, height, className, style, ...props }) {
|
|
2447
2620
|
const dims = { width, height, ...style };
|
|
2448
|
-
return /* @__PURE__ */ (0,
|
|
2621
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2449
2622
|
"div",
|
|
2450
2623
|
{
|
|
2451
2624
|
className: cx(
|
|
@@ -2462,15 +2635,15 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
|
|
|
2462
2635
|
function LoadingState({ rows = 3, density = "comfortable", label, className, ...props }) {
|
|
2463
2636
|
return (
|
|
2464
2637
|
// no aria-busy: busy=true tells AT the region isn't ready and suppresses the announcement (UIX-A11Y-4)
|
|
2465
|
-
/* @__PURE__ */ (0,
|
|
2466
|
-
/* @__PURE__ */ (0,
|
|
2467
|
-
Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0,
|
|
2638
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", ...props, children: [
|
|
2639
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "uix-visually-hidden", children: label ?? "Loading" }),
|
|
2640
|
+
Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i))
|
|
2468
2641
|
] })
|
|
2469
2642
|
);
|
|
2470
2643
|
}
|
|
2471
2644
|
|
|
2472
2645
|
// src/components/RelativeTime.tsx
|
|
2473
|
-
var
|
|
2646
|
+
var import_react29 = require("react");
|
|
2474
2647
|
|
|
2475
2648
|
// src/relative-time-model.ts
|
|
2476
2649
|
function parseDateValue(value) {
|
|
@@ -2518,7 +2691,7 @@ function subscribeRelativeClock(interval, listener) {
|
|
|
2518
2691
|
}
|
|
2519
2692
|
|
|
2520
2693
|
// src/components/RelativeTime.tsx
|
|
2521
|
-
var
|
|
2694
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2522
2695
|
function RelativeTime({
|
|
2523
2696
|
value,
|
|
2524
2697
|
now,
|
|
@@ -2533,13 +2706,13 @@ function RelativeTime({
|
|
|
2533
2706
|
}) {
|
|
2534
2707
|
const interval = refreshInterval === false ? 0 : Math.max(0, refreshInterval);
|
|
2535
2708
|
const fixedNow = now == null ? void 0 : new Date(now).getTime();
|
|
2536
|
-
const subscribe = (0,
|
|
2709
|
+
const subscribe = (0, import_react29.useCallback)((listener) => fixedNow == null ? subscribeRelativeClock(interval, listener) : () => {
|
|
2537
2710
|
}, [fixedNow, interval]);
|
|
2538
|
-
const getSnapshot = (0,
|
|
2539
|
-
const getServerSnapshot = (0,
|
|
2540
|
-
const clock = (0,
|
|
2541
|
-
const date = (0,
|
|
2542
|
-
if (!date) return /* @__PURE__ */ (0,
|
|
2711
|
+
const getSnapshot = (0, import_react29.useCallback)(() => fixedNow ?? readRelativeClock(interval), [fixedNow, interval]);
|
|
2712
|
+
const getServerSnapshot = (0, import_react29.useCallback)(() => fixedNow ?? Date.now(), [fixedNow]);
|
|
2713
|
+
const clock = (0, import_react29.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
|
|
2714
|
+
const date = (0, import_react29.useMemo)(() => parseDateValue(value), [value]);
|
|
2715
|
+
if (!date) return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("time", { "data-invalid": "true", suppressHydrationWarning: true, ...props, children: invalidLabel });
|
|
2543
2716
|
const current = new Date(clock);
|
|
2544
2717
|
const content = formatter ? formatter({ date, now: current, locale, timeZone }) : (() => {
|
|
2545
2718
|
const relative = relativeTimeValue(date, current);
|
|
@@ -2549,11 +2722,11 @@ function RelativeTime({
|
|
|
2549
2722
|
return new Intl.RelativeTimeFormat(locale, { numeric }).format(relative.value, relative.unit);
|
|
2550
2723
|
})();
|
|
2551
2724
|
const absolute = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }).format(date);
|
|
2552
|
-
return /* @__PURE__ */ (0,
|
|
2725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("time", { dateTime: date.toISOString(), title: title ?? absolute, suppressHydrationWarning: true, ...props, children: content });
|
|
2553
2726
|
}
|
|
2554
2727
|
|
|
2555
2728
|
// src/components/AsyncOperationStatus.tsx
|
|
2556
|
-
var
|
|
2729
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2557
2730
|
var tones = {
|
|
2558
2731
|
queued: "neutral",
|
|
2559
2732
|
running: "info",
|
|
@@ -2561,54 +2734,54 @@ var tones = {
|
|
|
2561
2734
|
failed: "danger"
|
|
2562
2735
|
};
|
|
2563
2736
|
function AsyncOperationStatus({ state, title, statusLabel, description, progress, progressLabel, action, className, ...props }) {
|
|
2564
|
-
return /* @__PURE__ */ (0,
|
|
2565
|
-
/* @__PURE__ */ (0,
|
|
2566
|
-
/* @__PURE__ */ (0,
|
|
2567
|
-
/* @__PURE__ */ (0,
|
|
2737
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx("uix-operation", className), role: state === "failed" ? "alert" : "status", "aria-live": "polite", ...props, children: [
|
|
2738
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "uix-operation__head", children: [
|
|
2739
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("strong", { children: title }),
|
|
2740
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(StatusPill, { tone: tones[state], children: statusLabel })
|
|
2568
2741
|
] }),
|
|
2569
|
-
description != null && /* @__PURE__ */ (0,
|
|
2570
|
-
progress != null && /* @__PURE__ */ (0,
|
|
2571
|
-
action != null && /* @__PURE__ */ (0,
|
|
2742
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "uix-operation__description", children: description }),
|
|
2743
|
+
progress != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Progress, { value: progress, "aria-label": progressLabel }),
|
|
2744
|
+
action != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "uix-operation__action", children: action })
|
|
2572
2745
|
] });
|
|
2573
2746
|
}
|
|
2574
2747
|
|
|
2575
2748
|
// src/components/Label.tsx
|
|
2576
|
-
var
|
|
2749
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2577
2750
|
function Label({ color, dot, children, className, style, ...props }) {
|
|
2578
2751
|
const merged = color ? { "--label-color": color, ...style } : style;
|
|
2579
|
-
return /* @__PURE__ */ (0,
|
|
2580
|
-
dot && /* @__PURE__ */ (0,
|
|
2752
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
|
|
2753
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
|
|
2581
2754
|
children
|
|
2582
2755
|
] });
|
|
2583
2756
|
}
|
|
2584
2757
|
|
|
2585
2758
|
// src/components/Avatar.tsx
|
|
2586
|
-
var
|
|
2759
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2587
2760
|
function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
|
|
2588
|
-
return /* @__PURE__ */ (0,
|
|
2589
|
-
src ? /* @__PURE__ */ (0,
|
|
2590
|
-
status && /* @__PURE__ */ (0,
|
|
2591
|
-
status && /* @__PURE__ */ (0,
|
|
2761
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
|
|
2762
|
+
src ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("img", { src, alt: alt ?? "" }) : children,
|
|
2763
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-avatar__status", "aria-hidden": "true" }),
|
|
2764
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-visually-hidden", children: "online" })
|
|
2592
2765
|
] });
|
|
2593
2766
|
}
|
|
2594
2767
|
function AvatarGroup({ children, className, ...props }) {
|
|
2595
|
-
return /* @__PURE__ */ (0,
|
|
2768
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
|
|
2596
2769
|
}
|
|
2597
2770
|
function UserChip({ avatar, name, sub, className, children, ...props }) {
|
|
2598
|
-
return /* @__PURE__ */ (0,
|
|
2771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
|
|
2599
2772
|
avatar,
|
|
2600
|
-
/* @__PURE__ */ (0,
|
|
2601
|
-
name != null && /* @__PURE__ */ (0,
|
|
2602
|
-
sub != null && /* @__PURE__ */ (0,
|
|
2773
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { children: [
|
|
2774
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-user-chip__name", children: name }),
|
|
2775
|
+
sub != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
|
|
2603
2776
|
] }),
|
|
2604
2777
|
children
|
|
2605
2778
|
] });
|
|
2606
2779
|
}
|
|
2607
2780
|
|
|
2608
2781
|
// src/components/Comments.tsx
|
|
2609
|
-
var
|
|
2782
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2610
2783
|
function Comments({ children, className, ...props }) {
|
|
2611
|
-
return /* @__PURE__ */ (0,
|
|
2784
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "log", className: cx("uix-comments", className), ...props, children });
|
|
2612
2785
|
}
|
|
2613
2786
|
function Comment({
|
|
2614
2787
|
avatar,
|
|
@@ -2624,23 +2797,23 @@ function Comment({
|
|
|
2624
2797
|
}) {
|
|
2625
2798
|
const system = variant === "system";
|
|
2626
2799
|
const byline = author ?? (system ? systemLabel : void 0);
|
|
2627
|
-
return /* @__PURE__ */ (0,
|
|
2800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
2628
2801
|
"div",
|
|
2629
2802
|
{
|
|
2630
2803
|
className: cx("uix-comment", system && "uix-comment--system", className),
|
|
2631
2804
|
"data-variant": system ? "system" : void 0,
|
|
2632
2805
|
...props,
|
|
2633
2806
|
children: [
|
|
2634
|
-
avatar ?? /* @__PURE__ */ (0,
|
|
2635
|
-
/* @__PURE__ */ (0,
|
|
2636
|
-
(byline != null || meta != null) && /* @__PURE__ */ (0,
|
|
2637
|
-
byline != null && /* @__PURE__ */ (0,
|
|
2807
|
+
avatar ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { "aria-hidden": "true" }),
|
|
2808
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-comment__body", children: [
|
|
2809
|
+
(byline != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "uix-comment__meta", children: [
|
|
2810
|
+
byline != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-comment__author", children: byline }),
|
|
2638
2811
|
byline != null && meta != null ? " \xB7 " : null,
|
|
2639
2812
|
meta
|
|
2640
2813
|
] }),
|
|
2641
|
-
replyTo != null && /* @__PURE__ */ (0,
|
|
2642
|
-
/* @__PURE__ */ (0,
|
|
2643
|
-
/* @__PURE__ */ (0,
|
|
2814
|
+
replyTo != null && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("blockquote", { className: "uix-comment__reply", children: [
|
|
2815
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-comment__reply-label", children: replyToLabel }),
|
|
2816
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "uix-comment__reply-body", children: replyTo })
|
|
2644
2817
|
] }),
|
|
2645
2818
|
children
|
|
2646
2819
|
] })
|
|
@@ -2650,7 +2823,7 @@ function Comment({
|
|
|
2650
2823
|
}
|
|
2651
2824
|
|
|
2652
2825
|
// src/components/SaveStatus.tsx
|
|
2653
|
-
var
|
|
2826
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2654
2827
|
var DEFAULT_SAVE_STATUS_LABELS = {
|
|
2655
2828
|
saving: "Saving\u2026",
|
|
2656
2829
|
saved: "Saved",
|
|
@@ -2660,34 +2833,34 @@ var DEFAULT_SAVE_STATUS_LABELS = {
|
|
|
2660
2833
|
function SaveStatus({ state, labels, onRetry, className, ...props }) {
|
|
2661
2834
|
const text = { ...DEFAULT_SAVE_STATUS_LABELS, ...labels };
|
|
2662
2835
|
const message = state === "idle" ? "" : text[state];
|
|
2663
|
-
return /* @__PURE__ */ (0,
|
|
2664
|
-
/* @__PURE__ */ (0,
|
|
2665
|
-
/* @__PURE__ */ (0,
|
|
2666
|
-
state === "failed" && onRetry && /* @__PURE__ */ (0,
|
|
2836
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cx("uix-save-status", className), "data-state": state, ...props, children: [
|
|
2837
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "uix-save-status__icon", "aria-hidden": "true" }),
|
|
2838
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "uix-save-status__text", role: "status", "aria-live": "polite", children: message }),
|
|
2839
|
+
state === "failed" && onRetry && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("button", { type: "button", className: "uix-btn uix-btn--link uix-btn--sm uix-save-status__retry", onClick: onRetry, children: text.retry })
|
|
2667
2840
|
] });
|
|
2668
2841
|
}
|
|
2669
2842
|
|
|
2670
2843
|
// src/components/Composer.tsx
|
|
2671
|
-
var
|
|
2672
|
-
var
|
|
2844
|
+
var import_react30 = require("react");
|
|
2845
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2673
2846
|
function Composer({ children, className, label = "Add a comment", ...props }) {
|
|
2674
|
-
return /* @__PURE__ */ (0,
|
|
2675
|
-
if (!(0,
|
|
2847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cx("uix-composer", className), ...props, children: import_react30.Children.map(children, (child) => {
|
|
2848
|
+
if (!(0, import_react30.isValidElement)(child) || child.type !== "textarea") return child;
|
|
2676
2849
|
const p = child.props;
|
|
2677
|
-
return p["aria-label"] || p["aria-labelledby"] || p.id ? child : (0,
|
|
2850
|
+
return p["aria-label"] || p["aria-labelledby"] || p.id ? child : (0, import_react30.cloneElement)(child, { "aria-label": label });
|
|
2678
2851
|
}) });
|
|
2679
2852
|
}
|
|
2680
2853
|
function ComposerBar({ children, className, ...props }) {
|
|
2681
|
-
return /* @__PURE__ */ (0,
|
|
2854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: cx("uix-composer__bar", className), ...props, children });
|
|
2682
2855
|
}
|
|
2683
2856
|
|
|
2684
2857
|
// src/components/Segmented.tsx
|
|
2685
|
-
var
|
|
2686
|
-
var
|
|
2687
|
-
var SegmentedCtx = (0,
|
|
2858
|
+
var import_react31 = require("react");
|
|
2859
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2860
|
+
var SegmentedCtx = (0, import_react31.createContext)({});
|
|
2688
2861
|
function Segmented({ value, onChange, children, className, ...props }) {
|
|
2689
|
-
const contextValue = (0,
|
|
2690
|
-
return /* @__PURE__ */ (0,
|
|
2862
|
+
const contextValue = (0, import_react31.useMemo)(() => ({ value, onChange }), [value, onChange]);
|
|
2863
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
|
|
2691
2864
|
}
|
|
2692
2865
|
function SegmentedOption({
|
|
2693
2866
|
value,
|
|
@@ -2696,9 +2869,9 @@ function SegmentedOption({
|
|
|
2696
2869
|
onClick,
|
|
2697
2870
|
...props
|
|
2698
2871
|
}) {
|
|
2699
|
-
const ctx = (0,
|
|
2872
|
+
const ctx = (0, import_react31.useContext)(SegmentedCtx);
|
|
2700
2873
|
const selected = ctx.value === value;
|
|
2701
|
-
return /* @__PURE__ */ (0,
|
|
2874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2702
2875
|
"button",
|
|
2703
2876
|
{
|
|
2704
2877
|
type: "button",
|
|
@@ -2715,81 +2888,81 @@ function SegmentedOption({
|
|
|
2715
2888
|
}
|
|
2716
2889
|
|
|
2717
2890
|
// src/components/TableControls.tsx
|
|
2718
|
-
var
|
|
2719
|
-
var
|
|
2891
|
+
var import_react32 = require("react");
|
|
2892
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2720
2893
|
function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }) {
|
|
2721
|
-
const densityLabelId = (0,
|
|
2722
|
-
const zebraLabelId = (0,
|
|
2723
|
-
const freezeLabelId = (0,
|
|
2724
|
-
return /* @__PURE__ */ (0,
|
|
2725
|
-
/* @__PURE__ */ (0,
|
|
2726
|
-
/* @__PURE__ */ (0,
|
|
2727
|
-
/* @__PURE__ */ (0,
|
|
2894
|
+
const densityLabelId = (0, import_react32.useId)();
|
|
2895
|
+
const zebraLabelId = (0, import_react32.useId)();
|
|
2896
|
+
const freezeLabelId = (0, import_react32.useId)();
|
|
2897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-view-menu", children: [
|
|
2898
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-view-menu__group", children: [
|
|
2899
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
|
|
2900
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Segmented, { value: density, onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
|
|
2728
2901
|
] }),
|
|
2729
|
-
(zebra || freeze) && /* @__PURE__ */ (0,
|
|
2730
|
-
zebra && /* @__PURE__ */ (0,
|
|
2731
|
-
/* @__PURE__ */ (0,
|
|
2732
|
-
/* @__PURE__ */ (0,
|
|
2902
|
+
(zebra || freeze) && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-view-menu__group", children: [
|
|
2903
|
+
zebra && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-view-menu__row", children: [
|
|
2904
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { id: zebraLabelId, children: zebra.label }),
|
|
2905
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
|
|
2733
2906
|
] }),
|
|
2734
|
-
freeze && /* @__PURE__ */ (0,
|
|
2735
|
-
/* @__PURE__ */ (0,
|
|
2736
|
-
/* @__PURE__ */ (0,
|
|
2907
|
+
freeze && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-view-menu__row", children: [
|
|
2908
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { id: freezeLabelId, children: freeze.label }),
|
|
2909
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
|
|
2737
2910
|
] })
|
|
2738
2911
|
] }),
|
|
2739
|
-
columns && columns.length > 0 && /* @__PURE__ */ (0,
|
|
2740
|
-
columnsLabel != null && /* @__PURE__ */ (0,
|
|
2741
|
-
/* @__PURE__ */ (0,
|
|
2912
|
+
columns && columns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-view-menu__group", children: [
|
|
2913
|
+
columnsLabel != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-view-menu__label", children: columnsLabel }),
|
|
2914
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-view-menu__cols", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Checkbox, { label: column.label, checked: column.visible, disabled: column.disabled, onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked) }, column.id)) })
|
|
2742
2915
|
] })
|
|
2743
2916
|
] });
|
|
2744
2917
|
}
|
|
2745
2918
|
function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
|
|
2746
|
-
return /* @__PURE__ */ (0,
|
|
2747
|
-
/* @__PURE__ */ (0,
|
|
2748
|
-
/* @__PURE__ */ (0,
|
|
2749
|
-
type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ (0,
|
|
2919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-filter-popover", children: [
|
|
2920
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { className: "uix-label", children: [
|
|
2921
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: label }),
|
|
2922
|
+
type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("select", { className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Input, { type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
|
|
2750
2923
|
] }),
|
|
2751
|
-
/* @__PURE__ */ (0,
|
|
2752
|
-
/* @__PURE__ */ (0,
|
|
2753
|
-
/* @__PURE__ */ (0,
|
|
2924
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-filter-popover__actions", children: [
|
|
2925
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { type: "button", onClick: onClear, children: clearLabel }),
|
|
2926
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Button, { type: "button", variant: "primary", onClick: onApply, children: applyLabel })
|
|
2754
2927
|
] })
|
|
2755
2928
|
] });
|
|
2756
2929
|
}
|
|
2757
2930
|
function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emptyLabel, actions, footer }) {
|
|
2758
|
-
return /* @__PURE__ */ (0,
|
|
2759
|
-
items.length === 0 && emptyLabel != null && /* @__PURE__ */ (0,
|
|
2760
|
-
items.map((item) => /* @__PURE__ */ (0,
|
|
2761
|
-
/* @__PURE__ */ (0,
|
|
2762
|
-
onPinChange && /* @__PURE__ */ (0,
|
|
2931
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("ul", { className: "uix-menu uix-saved-views", children: [
|
|
2932
|
+
items.length === 0 && emptyLabel != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { className: "uix-menu__label", children: emptyLabel }),
|
|
2933
|
+
items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("li", { className: "uix-saved-views__row", children: [
|
|
2934
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { type: "button", className: "uix-menu__item", "data-active": item.active || void 0, onClick: () => onSelect(item.id), children: item.label }),
|
|
2935
|
+
onPinChange && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
|
|
2763
2936
|
actions?.(item)
|
|
2764
2937
|
] }, item.id)),
|
|
2765
|
-
footer != null && /* @__PURE__ */ (0,
|
|
2938
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { className: "uix-saved-views__footer", children: footer })
|
|
2766
2939
|
] });
|
|
2767
2940
|
}
|
|
2768
2941
|
|
|
2769
2942
|
// src/components/Timeline.tsx
|
|
2770
|
-
var
|
|
2943
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2771
2944
|
function Timeline({ children, className, ...props }) {
|
|
2772
|
-
return /* @__PURE__ */ (0,
|
|
2945
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ol", { className: cx("uix-timeline", className), ...props, children });
|
|
2773
2946
|
}
|
|
2774
2947
|
function TimelineItem({ node, meta, children, className, ...props }) {
|
|
2775
|
-
return /* @__PURE__ */ (0,
|
|
2776
|
-
/* @__PURE__ */ (0,
|
|
2777
|
-
node ?? /* @__PURE__ */ (0,
|
|
2778
|
-
/* @__PURE__ */ (0,
|
|
2948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("li", { className: cx("uix-timeline__item", className), ...props, children: [
|
|
2949
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-timeline__rail", "aria-hidden": "true", children: [
|
|
2950
|
+
node ?? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "uix-timeline__node" }),
|
|
2951
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "uix-timeline__line" })
|
|
2779
2952
|
] }),
|
|
2780
|
-
/* @__PURE__ */ (0,
|
|
2781
|
-
meta != null && /* @__PURE__ */ (0,
|
|
2953
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-timeline__body", children: [
|
|
2954
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-timeline__meta", children: meta }),
|
|
2782
2955
|
children
|
|
2783
2956
|
] })
|
|
2784
2957
|
] });
|
|
2785
2958
|
}
|
|
2786
2959
|
|
|
2787
2960
|
// src/components/Pipeline.tsx
|
|
2788
|
-
var
|
|
2789
|
-
var
|
|
2961
|
+
var import_react33 = require("react");
|
|
2962
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2790
2963
|
function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
|
|
2791
|
-
const stages = detailed ?
|
|
2792
|
-
return /* @__PURE__ */ (0,
|
|
2964
|
+
const stages = detailed ? import_react33.Children.map(children, (child) => (0, import_react33.isValidElement)(child) && child.type === PipelineStage ? (0, import_react33.cloneElement)(child, { detailed: child.props.detailed ?? true }) : child) : children;
|
|
2965
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
2793
2966
|
"ol",
|
|
2794
2967
|
{
|
|
2795
2968
|
className: cx("uix-pipeline", detailed && "uix-pipeline--detailed", className),
|
|
@@ -2826,20 +2999,20 @@ function PipelineStage({
|
|
|
2826
2999
|
const current = currentProp ?? (state === "active" || state === "current" || state === "running");
|
|
2827
3000
|
const resolvedStateLabel = stateLabel2 ?? DEFAULT_STATE_LABELS[state];
|
|
2828
3001
|
const showDetails = detailed || description != null || meta != null || marker != null;
|
|
2829
|
-
return /* @__PURE__ */ (0,
|
|
3002
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
2830
3003
|
"li",
|
|
2831
3004
|
{
|
|
2832
3005
|
className: cx("uix-pipeline__stage", className),
|
|
2833
3006
|
"data-state": state,
|
|
2834
3007
|
"aria-current": current ? "step" : void 0,
|
|
2835
3008
|
...props,
|
|
2836
|
-
children: showDetails ? /* @__PURE__ */ (0,
|
|
2837
|
-
/* @__PURE__ */ (0,
|
|
2838
|
-
/* @__PURE__ */ (0,
|
|
2839
|
-
/* @__PURE__ */ (0,
|
|
2840
|
-
/* @__PURE__ */ (0,
|
|
2841
|
-
description != null && /* @__PURE__ */ (0,
|
|
2842
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3009
|
+
children: showDetails ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
|
|
3010
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
|
|
3011
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "uix-pipeline__content", children: [
|
|
3012
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
|
|
3013
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-pipeline__title", children: label }),
|
|
3014
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-pipeline__description", children: description }),
|
|
3015
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-pipeline__meta", children: meta })
|
|
2843
3016
|
] })
|
|
2844
3017
|
] }) : label
|
|
2845
3018
|
}
|
|
@@ -2847,9 +3020,9 @@ function PipelineStage({
|
|
|
2847
3020
|
}
|
|
2848
3021
|
|
|
2849
3022
|
// src/components/Flow.tsx
|
|
2850
|
-
var
|
|
3023
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
2851
3024
|
function Flow({ variant = "linear", panel = false, children, className, role = "group", ...props }) {
|
|
2852
|
-
return /* @__PURE__ */ (0,
|
|
3025
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
2853
3026
|
"div",
|
|
2854
3027
|
{
|
|
2855
3028
|
className: cx("uix-flow", `uix-flow--${variant}`, panel && "uix-flow--panel", className),
|
|
@@ -2879,33 +3052,33 @@ function FlowNode({
|
|
|
2879
3052
|
...props
|
|
2880
3053
|
}) {
|
|
2881
3054
|
const resolvedStateLabel = stateLabel2 ?? FLOW_STATE_LABELS[state];
|
|
2882
|
-
return /* @__PURE__ */ (0,
|
|
2883
|
-
icon != null && /* @__PURE__ */ (0,
|
|
2884
|
-
/* @__PURE__ */ (0,
|
|
2885
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
2886
|
-
/* @__PURE__ */ (0,
|
|
2887
|
-
meta != null && /* @__PURE__ */ (0,
|
|
2888
|
-
/* @__PURE__ */ (0,
|
|
3055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cx("uix-node", `uix-node--${state}`, icon == null && "uix-node--no-icon", wide && "uix-node--wide", className), ...props, children: [
|
|
3056
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uix-node__icon", "aria-hidden": "true", children: icon }),
|
|
3057
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uix-node__body", children: [
|
|
3058
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-node__eyebrow", children: eyebrow }),
|
|
3059
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-node__title", children: title }),
|
|
3060
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-node__meta", children: meta }),
|
|
3061
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-node__status", children: resolvedStateLabel })
|
|
2889
3062
|
] }),
|
|
2890
|
-
footer != null && /* @__PURE__ */ (0,
|
|
3063
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uix-node__footer", children: footer })
|
|
2891
3064
|
] });
|
|
2892
3065
|
}
|
|
2893
3066
|
|
|
2894
3067
|
// src/components/Prose.tsx
|
|
2895
|
-
var
|
|
3068
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
2896
3069
|
function Prose({ children, className, ...props }) {
|
|
2897
|
-
return /* @__PURE__ */ (0,
|
|
3070
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cx("uix-prose", className), ...props, children });
|
|
2898
3071
|
}
|
|
2899
3072
|
function Note({ tone, icon, children, className, ...props }) {
|
|
2900
|
-
return /* @__PURE__ */ (0,
|
|
2901
|
-
icon != null && /* @__PURE__ */ (0,
|
|
2902
|
-
/* @__PURE__ */ (0,
|
|
3073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
|
|
3074
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-note__icon", children: icon }),
|
|
3075
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-note__body", children })
|
|
2903
3076
|
] });
|
|
2904
3077
|
}
|
|
2905
3078
|
|
|
2906
3079
|
// src/components/Popover.tsx
|
|
2907
|
-
var
|
|
2908
|
-
var
|
|
3080
|
+
var import_react34 = require("react");
|
|
3081
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
2909
3082
|
function Popover({
|
|
2910
3083
|
popover = "auto",
|
|
2911
3084
|
anchor,
|
|
@@ -2915,15 +3088,15 @@ function Popover({
|
|
|
2915
3088
|
children,
|
|
2916
3089
|
...props
|
|
2917
3090
|
}) {
|
|
2918
|
-
const ref = (0,
|
|
2919
|
-
const [open, setOpen] = (0,
|
|
3091
|
+
const ref = (0, import_react34.useRef)(null);
|
|
3092
|
+
const [open, setOpen] = (0, import_react34.useState)(false);
|
|
2920
3093
|
const popoverAttr = { popover };
|
|
2921
3094
|
const reposition = useAnchoredPosition(anchor ?? null, ref, {
|
|
2922
3095
|
open: open && !!anchor,
|
|
2923
3096
|
placement,
|
|
2924
3097
|
offset
|
|
2925
3098
|
});
|
|
2926
|
-
(0,
|
|
3099
|
+
(0, import_react34.useEffect)(() => {
|
|
2927
3100
|
const el = ref.current;
|
|
2928
3101
|
if (!el || !anchor) return;
|
|
2929
3102
|
const sync = () => {
|
|
@@ -2934,32 +3107,32 @@ function Popover({
|
|
|
2934
3107
|
el.addEventListener("toggle", sync);
|
|
2935
3108
|
return () => el.removeEventListener("toggle", sync);
|
|
2936
3109
|
}, [anchor, reposition]);
|
|
2937
|
-
return /* @__PURE__ */ (0,
|
|
3110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
|
|
2938
3111
|
}
|
|
2939
3112
|
|
|
2940
3113
|
// src/components/CommandPalette.tsx
|
|
2941
|
-
var
|
|
2942
|
-
var
|
|
2943
|
-
var CmdkContext = (0,
|
|
3114
|
+
var import_react35 = require("react");
|
|
3115
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3116
|
+
var CmdkContext = (0, import_react35.createContext)(null);
|
|
2944
3117
|
function CommandPalette({ inputProps, children, className, ...props }) {
|
|
2945
|
-
const listId = (0,
|
|
2946
|
-
const [activeId, setActiveId] = (0,
|
|
2947
|
-
const [count, setCount] = (0,
|
|
2948
|
-
const [announced, setAnnounced] = (0,
|
|
2949
|
-
const setActive = (0,
|
|
3118
|
+
const listId = (0, import_react35.useId)();
|
|
3119
|
+
const [activeId, setActiveId] = (0, import_react35.useState)(null);
|
|
3120
|
+
const [count, setCount] = (0, import_react35.useState)(0);
|
|
3121
|
+
const [announced, setAnnounced] = (0, import_react35.useState)("");
|
|
3122
|
+
const setActive = (0, import_react35.useCallback)((id, active) => {
|
|
2950
3123
|
setActiveId((cur) => active ? id : cur === id ? null : cur);
|
|
2951
3124
|
}, []);
|
|
2952
|
-
const registerItem = (0,
|
|
3125
|
+
const registerItem = (0, import_react35.useCallback)(() => {
|
|
2953
3126
|
setCount((c) => c + 1);
|
|
2954
3127
|
return () => setCount((c) => c - 1);
|
|
2955
3128
|
}, []);
|
|
2956
|
-
(0,
|
|
3129
|
+
(0, import_react35.useEffect)(() => {
|
|
2957
3130
|
const t = window.setTimeout(() => setAnnounced(`${count} result${count === 1 ? "" : "s"}`), 150);
|
|
2958
3131
|
return () => clearTimeout(t);
|
|
2959
3132
|
}, [count]);
|
|
2960
|
-
const ctx = (0,
|
|
2961
|
-
return /* @__PURE__ */ (0,
|
|
2962
|
-
/* @__PURE__ */ (0,
|
|
3133
|
+
const ctx = (0, import_react35.useMemo)(() => ({ listId, setActive, registerItem }), [listId, setActive, registerItem]);
|
|
3134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CmdkContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
|
|
3135
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
2963
3136
|
"input",
|
|
2964
3137
|
{
|
|
2965
3138
|
className: "uix-cmdk__input",
|
|
@@ -2972,28 +3145,28 @@ function CommandPalette({ inputProps, children, className, ...props }) {
|
|
|
2972
3145
|
...inputProps
|
|
2973
3146
|
}
|
|
2974
3147
|
),
|
|
2975
|
-
/* @__PURE__ */ (0,
|
|
2976
|
-
/* @__PURE__ */ (0,
|
|
3148
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-cmdk__list", role: "listbox", id: listId, children }),
|
|
3149
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "uix-visually-hidden", role: "status", children: announced })
|
|
2977
3150
|
] }) });
|
|
2978
3151
|
}
|
|
2979
3152
|
function CommandGroup({ label, children }) {
|
|
2980
|
-
const labelId = (0,
|
|
2981
|
-
return /* @__PURE__ */ (0,
|
|
2982
|
-
label != null && /* @__PURE__ */ (0,
|
|
3153
|
+
const labelId = (0, import_react35.useId)();
|
|
3154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { role: "group", "aria-labelledby": label != null ? labelId : void 0, children: [
|
|
3155
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-cmdk__group", id: labelId, children: label }),
|
|
2983
3156
|
children
|
|
2984
3157
|
] });
|
|
2985
3158
|
}
|
|
2986
3159
|
function CommandItem({ icon, shortcut, active, children, className, id, ...props }) {
|
|
2987
|
-
const ctx = (0,
|
|
2988
|
-
const autoId = (0,
|
|
3160
|
+
const ctx = (0, import_react35.useContext)(CmdkContext);
|
|
3161
|
+
const autoId = (0, import_react35.useId)();
|
|
2989
3162
|
const itemId = id ?? autoId;
|
|
2990
|
-
(0,
|
|
2991
|
-
(0,
|
|
3163
|
+
(0, import_react35.useEffect)(() => ctx?.registerItem(), [ctx]);
|
|
3164
|
+
(0, import_react35.useEffect)(() => {
|
|
2992
3165
|
if (!ctx || !active) return;
|
|
2993
3166
|
ctx.setActive(itemId, true);
|
|
2994
3167
|
return () => ctx.setActive(itemId, false);
|
|
2995
3168
|
}, [ctx, itemId, active]);
|
|
2996
|
-
return /* @__PURE__ */ (0,
|
|
3169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
2997
3170
|
"div",
|
|
2998
3171
|
{
|
|
2999
3172
|
className: cx("uix-cmdk__item", className),
|
|
@@ -3004,7 +3177,7 @@ function CommandItem({ icon, shortcut, active, children, className, id, ...props
|
|
|
3004
3177
|
...props,
|
|
3005
3178
|
children: [
|
|
3006
3179
|
icon,
|
|
3007
|
-
/* @__PURE__ */ (0,
|
|
3180
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { children }),
|
|
3008
3181
|
shortcut
|
|
3009
3182
|
]
|
|
3010
3183
|
}
|
|
@@ -3012,16 +3185,16 @@ function CommandItem({ icon, shortcut, active, children, className, id, ...props
|
|
|
3012
3185
|
}
|
|
3013
3186
|
|
|
3014
3187
|
// src/components/Inbox.tsx
|
|
3015
|
-
var
|
|
3016
|
-
var
|
|
3188
|
+
var import_react36 = require("react");
|
|
3189
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
3017
3190
|
function Inbox({ view, children, className, ...props }) {
|
|
3018
|
-
return /* @__PURE__ */ (0,
|
|
3191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: cx("uix-inbox", className), "data-view": view, ...props, children });
|
|
3019
3192
|
}
|
|
3020
|
-
var InboxListCtx = (0,
|
|
3193
|
+
var InboxListCtx = (0, import_react36.createContext)({});
|
|
3021
3194
|
function InboxList({ children, className, ...props }) {
|
|
3022
|
-
const listRef = (0,
|
|
3023
|
-
const [activeId, setActiveId] = (0,
|
|
3024
|
-
const ctx = (0,
|
|
3195
|
+
const listRef = (0, import_react36.useRef)(null);
|
|
3196
|
+
const [activeId, setActiveId] = (0, import_react36.useState)(void 0);
|
|
3197
|
+
const ctx = (0, import_react36.useMemo)(() => ({ activeId }), [activeId]);
|
|
3025
3198
|
const onKeyDown = (e) => {
|
|
3026
3199
|
const opts = Array.from(listRef.current?.querySelectorAll('[role="option"]') ?? []);
|
|
3027
3200
|
if (opts.length === 0) return;
|
|
@@ -3056,7 +3229,7 @@ function InboxList({ children, className, ...props }) {
|
|
|
3056
3229
|
setActiveId(el.id);
|
|
3057
3230
|
el.scrollIntoView({ block: "nearest" });
|
|
3058
3231
|
};
|
|
3059
|
-
return /* @__PURE__ */ (0,
|
|
3232
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(InboxListCtx.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
3060
3233
|
"div",
|
|
3061
3234
|
{
|
|
3062
3235
|
ref: listRef,
|
|
@@ -3082,10 +3255,10 @@ function InboxItem({
|
|
|
3082
3255
|
id,
|
|
3083
3256
|
...props
|
|
3084
3257
|
}) {
|
|
3085
|
-
const autoId = (0,
|
|
3258
|
+
const autoId = (0, import_react36.useId)();
|
|
3086
3259
|
const itemId = id ?? autoId;
|
|
3087
|
-
const { activeId } = (0,
|
|
3088
|
-
return /* @__PURE__ */ (0,
|
|
3260
|
+
const { activeId } = (0, import_react36.useContext)(InboxListCtx);
|
|
3261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
3089
3262
|
"div",
|
|
3090
3263
|
{
|
|
3091
3264
|
role: "option",
|
|
@@ -3097,35 +3270,35 @@ function InboxItem({
|
|
|
3097
3270
|
...props,
|
|
3098
3271
|
children: [
|
|
3099
3272
|
leading,
|
|
3100
|
-
subject != null && /* @__PURE__ */ (0,
|
|
3101
|
-
preview != null && /* @__PURE__ */ (0,
|
|
3273
|
+
subject != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uix-inbox__subject", children: subject }),
|
|
3274
|
+
preview != null && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uix-inbox__preview", children: preview }),
|
|
3102
3275
|
children
|
|
3103
3276
|
]
|
|
3104
3277
|
}
|
|
3105
3278
|
);
|
|
3106
3279
|
}
|
|
3107
3280
|
function InboxDetail({ children, className, ...props }) {
|
|
3108
|
-
return /* @__PURE__ */ (0,
|
|
3281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: cx("uix-inbox__detail", className), ...props, children });
|
|
3109
3282
|
}
|
|
3110
3283
|
|
|
3111
3284
|
// src/components/Kanban.tsx
|
|
3112
|
-
var
|
|
3113
|
-
var
|
|
3285
|
+
var import_react37 = require("react");
|
|
3286
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
3114
3287
|
function Kanban({ announcement, children, className, ...props }) {
|
|
3115
|
-
return /* @__PURE__ */ (0,
|
|
3116
|
-
announcement != null && /* @__PURE__ */ (0,
|
|
3288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-kanban", className), ...props, children: [
|
|
3289
|
+
announcement != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { role: "status", className: "uix-visually-hidden", children: announcement }),
|
|
3117
3290
|
children
|
|
3118
3291
|
] });
|
|
3119
3292
|
}
|
|
3120
3293
|
function KanbanColumn({ title, count, children, className, ...props }) {
|
|
3121
|
-
const headId = (0,
|
|
3294
|
+
const headId = (0, import_react37.useId)();
|
|
3122
3295
|
const hasHead = title != null || count != null;
|
|
3123
|
-
return /* @__PURE__ */ (0,
|
|
3124
|
-
hasHead && /* @__PURE__ */ (0,
|
|
3296
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
|
|
3297
|
+
hasHead && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-kanban__head", id: headId, children: [
|
|
3125
3298
|
title,
|
|
3126
|
-
count != null && /* @__PURE__ */ (0,
|
|
3299
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-kanban__count", children: count })
|
|
3127
3300
|
] }),
|
|
3128
|
-
/* @__PURE__ */ (0,
|
|
3301
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, children })
|
|
3129
3302
|
] });
|
|
3130
3303
|
}
|
|
3131
3304
|
var MOVE_KEYS = {
|
|
@@ -3144,7 +3317,7 @@ function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...pr
|
|
|
3144
3317
|
onMove(dir);
|
|
3145
3318
|
}
|
|
3146
3319
|
};
|
|
3147
|
-
return /* @__PURE__ */ (0,
|
|
3320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
3148
3321
|
"div",
|
|
3149
3322
|
{
|
|
3150
3323
|
role: "listitem",
|
|
@@ -3153,8 +3326,8 @@ function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...pr
|
|
|
3153
3326
|
onKeyDown: handleKeyDown,
|
|
3154
3327
|
...props,
|
|
3155
3328
|
children: [
|
|
3156
|
-
title && /* @__PURE__ */ (0,
|
|
3157
|
-
meta && /* @__PURE__ */ (0,
|
|
3329
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uix-kanban__card-title", children: title }),
|
|
3330
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
|
|
3158
3331
|
children
|
|
3159
3332
|
]
|
|
3160
3333
|
}
|
|
@@ -3162,7 +3335,7 @@ function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...pr
|
|
|
3162
3335
|
}
|
|
3163
3336
|
|
|
3164
3337
|
// src/components/Tree.tsx
|
|
3165
|
-
var
|
|
3338
|
+
var import_react38 = require("react");
|
|
3166
3339
|
|
|
3167
3340
|
// src/tree-model.ts
|
|
3168
3341
|
function flattenTree(nodes, expanded, level = 1) {
|
|
@@ -3220,12 +3393,12 @@ function treeNav(flat, currentId, key) {
|
|
|
3220
3393
|
}
|
|
3221
3394
|
|
|
3222
3395
|
// src/components/Tree.tsx
|
|
3223
|
-
var
|
|
3224
|
-
var ChevronIcon2 = () => /* @__PURE__ */ (0,
|
|
3396
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
3397
|
+
var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
3225
3398
|
function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1 }) {
|
|
3226
3399
|
const hasChildren = Array.isArray(node.children) && node.children.length > 0;
|
|
3227
3400
|
const isExpanded = expanded.has(node.id);
|
|
3228
|
-
return /* @__PURE__ */ (0,
|
|
3401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
3229
3402
|
"li",
|
|
3230
3403
|
{
|
|
3231
3404
|
role: "treeitem",
|
|
@@ -3245,12 +3418,12 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
|
|
|
3245
3418
|
onFocusNode(node.id);
|
|
3246
3419
|
},
|
|
3247
3420
|
children: [
|
|
3248
|
-
/* @__PURE__ */ (0,
|
|
3249
|
-
/* @__PURE__ */ (0,
|
|
3250
|
-
node.icon && /* @__PURE__ */ (0,
|
|
3251
|
-
/* @__PURE__ */ (0,
|
|
3421
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "uix-tree__row", children: [
|
|
3422
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChevronIcon2, {}) }),
|
|
3423
|
+
node.icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": "true", children: node.icon }),
|
|
3424
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-tree__label", children: node.label })
|
|
3252
3425
|
] }),
|
|
3253
|
-
hasChildren && isExpanded && /* @__PURE__ */ (0,
|
|
3426
|
+
hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { role: "group", className: "uix-tree__group", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3254
3427
|
TreeNode,
|
|
3255
3428
|
{
|
|
3256
3429
|
node: child,
|
|
@@ -3282,12 +3455,12 @@ function Tree({
|
|
|
3282
3455
|
className,
|
|
3283
3456
|
...props
|
|
3284
3457
|
}) {
|
|
3285
|
-
const [internalExpanded, setInternalExpanded] = (0,
|
|
3458
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react38.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
|
|
3286
3459
|
const expanded = controlledExpanded ?? internalExpanded;
|
|
3287
|
-
const rootRef = (0,
|
|
3288
|
-
const [focusedId, setFocusedId] = (0,
|
|
3460
|
+
const rootRef = (0, import_react38.useRef)(null);
|
|
3461
|
+
const [focusedId, setFocusedId] = (0, import_react38.useState)(void 0);
|
|
3289
3462
|
const selectable = selected !== void 0 || onSelect != null;
|
|
3290
|
-
const handleToggle = (0,
|
|
3463
|
+
const handleToggle = (0, import_react38.useCallback)((id) => {
|
|
3291
3464
|
if (!controlledExpanded) {
|
|
3292
3465
|
setInternalExpanded((prev) => {
|
|
3293
3466
|
const next = new Set(prev);
|
|
@@ -3298,11 +3471,11 @@ function Tree({
|
|
|
3298
3471
|
}
|
|
3299
3472
|
onToggle?.(id);
|
|
3300
3473
|
}, [controlledExpanded, onToggle]);
|
|
3301
|
-
const flat = (0,
|
|
3474
|
+
const flat = (0, import_react38.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
|
|
3302
3475
|
const useVirtual = virtualize ?? shouldVirtualize(flat.length);
|
|
3303
3476
|
const tabbableId = focusedId ?? selected ?? nodes[0]?.id;
|
|
3304
3477
|
if (useVirtual) {
|
|
3305
|
-
return /* @__PURE__ */ (0,
|
|
3478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3306
3479
|
VirtualTreeView,
|
|
3307
3480
|
{
|
|
3308
3481
|
flat,
|
|
@@ -3379,7 +3552,7 @@ function Tree({
|
|
|
3379
3552
|
break;
|
|
3380
3553
|
}
|
|
3381
3554
|
};
|
|
3382
|
-
return /* @__PURE__ */ (0,
|
|
3555
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { ref: rootRef, className: cx("uix-tree", className), role: "tree", onKeyDown, ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3383
3556
|
TreeNode,
|
|
3384
3557
|
{
|
|
3385
3558
|
node,
|
|
@@ -3409,14 +3582,14 @@ function VirtualTreeView({
|
|
|
3409
3582
|
className,
|
|
3410
3583
|
...props
|
|
3411
3584
|
}) {
|
|
3412
|
-
const scrollRef = (0,
|
|
3413
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3414
|
-
const pendingFocus = (0,
|
|
3415
|
-
const hadFocus = (0,
|
|
3585
|
+
const scrollRef = (0, import_react38.useRef)(null);
|
|
3586
|
+
const [scrollTop, setScrollTop] = (0, import_react38.useState)(0);
|
|
3587
|
+
const pendingFocus = (0, import_react38.useRef)(false);
|
|
3588
|
+
const hadFocus = (0, import_react38.useRef)(false);
|
|
3416
3589
|
const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
|
|
3417
3590
|
const rows = flat.slice(win.start, win.end);
|
|
3418
3591
|
const windowHasTabbable = tabbableId != null && rows.some((f) => f.node.id === tabbableId);
|
|
3419
|
-
(0,
|
|
3592
|
+
(0, import_react38.useEffect)(() => {
|
|
3420
3593
|
if (!pendingFocus.current || focusedId == null) return;
|
|
3421
3594
|
const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
|
|
3422
3595
|
if (el) {
|
|
@@ -3424,7 +3597,7 @@ function VirtualTreeView({
|
|
|
3424
3597
|
pendingFocus.current = false;
|
|
3425
3598
|
}
|
|
3426
3599
|
}, [focusedId, win.start, win.end]);
|
|
3427
|
-
(0,
|
|
3600
|
+
(0, import_react38.useEffect)(() => {
|
|
3428
3601
|
if (!hadFocus.current || pendingFocus.current) return;
|
|
3429
3602
|
const active = document.activeElement;
|
|
3430
3603
|
if (active === document.body || active == null) scrollRef.current?.focus({ preventScroll: true });
|
|
@@ -3459,7 +3632,7 @@ function VirtualTreeView({
|
|
|
3459
3632
|
}
|
|
3460
3633
|
if (act.focusId !== void 0) moveTo(act.focusId);
|
|
3461
3634
|
};
|
|
3462
|
-
return /* @__PURE__ */ (0,
|
|
3635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
3463
3636
|
"ul",
|
|
3464
3637
|
{
|
|
3465
3638
|
ref: scrollRef,
|
|
@@ -3477,10 +3650,10 @@ function VirtualTreeView({
|
|
|
3477
3650
|
},
|
|
3478
3651
|
...props,
|
|
3479
3652
|
children: [
|
|
3480
|
-
win.padTop > 0 && /* @__PURE__ */ (0,
|
|
3653
|
+
win.padTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padTop } }),
|
|
3481
3654
|
rows.map((f, i) => {
|
|
3482
3655
|
const rowStyle = { height: rowHeight, paddingLeft: `calc(${f.level - 1} * var(--uix-space-5))` };
|
|
3483
|
-
return /* @__PURE__ */ (0,
|
|
3656
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3484
3657
|
"li",
|
|
3485
3658
|
{
|
|
3486
3659
|
role: "treeitem",
|
|
@@ -3501,23 +3674,23 @@ function VirtualTreeView({
|
|
|
3501
3674
|
onSelect?.(f.node.id);
|
|
3502
3675
|
setFocusedId(f.node.id);
|
|
3503
3676
|
},
|
|
3504
|
-
children: /* @__PURE__ */ (0,
|
|
3505
|
-
/* @__PURE__ */ (0,
|
|
3506
|
-
f.node.icon && /* @__PURE__ */ (0,
|
|
3507
|
-
/* @__PURE__ */ (0,
|
|
3677
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "uix-tree__row", style: rowStyle, children: [
|
|
3678
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-tree__toggle", children: f.hasChildren && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ChevronIcon2, {}) }),
|
|
3679
|
+
f.node.icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { "aria-hidden": "true", children: f.node.icon }),
|
|
3680
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-tree__label", children: f.node.label })
|
|
3508
3681
|
] })
|
|
3509
3682
|
},
|
|
3510
3683
|
f.node.id
|
|
3511
3684
|
);
|
|
3512
3685
|
}),
|
|
3513
|
-
win.padBottom > 0 && /* @__PURE__ */ (0,
|
|
3686
|
+
win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padBottom } })
|
|
3514
3687
|
]
|
|
3515
3688
|
}
|
|
3516
3689
|
);
|
|
3517
3690
|
}
|
|
3518
3691
|
|
|
3519
3692
|
// src/components/EditorialHome.tsx
|
|
3520
|
-
var
|
|
3693
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
3521
3694
|
function PageIntro({
|
|
3522
3695
|
kicker,
|
|
3523
3696
|
title,
|
|
@@ -3530,39 +3703,39 @@ function PageIntro({
|
|
|
3530
3703
|
children,
|
|
3531
3704
|
...props
|
|
3532
3705
|
}) {
|
|
3533
|
-
return /* @__PURE__ */ (0,
|
|
3534
|
-
/* @__PURE__ */ (0,
|
|
3535
|
-
kicker != null && /* @__PURE__ */ (0,
|
|
3536
|
-
/* @__PURE__ */ (0,
|
|
3537
|
-
lede != null && /* @__PURE__ */ (0,
|
|
3706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("section", { className: cx("uix-page-intro", className), ...props, children: [
|
|
3707
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
|
|
3708
|
+
kicker != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-page-kicker", children: kicker }),
|
|
3709
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h1", { className: "uix-page-title", children: title }),
|
|
3710
|
+
lede != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-page-lede", children: lede })
|
|
3538
3711
|
] }),
|
|
3539
|
-
search != null && /* @__PURE__ */ (0,
|
|
3540
|
-
searchLabel != null && /* @__PURE__ */ (0,
|
|
3712
|
+
search != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
|
|
3713
|
+
searchLabel != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-intro-search__label", children: searchLabel }),
|
|
3541
3714
|
search
|
|
3542
3715
|
] }),
|
|
3543
|
-
shortcuts != null && /* @__PURE__ */ (0,
|
|
3716
|
+
shortcuts != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uix-shortcut-grid", "aria-label": shortcutsLabel, children: shortcuts }),
|
|
3544
3717
|
children
|
|
3545
3718
|
] });
|
|
3546
3719
|
}
|
|
3547
3720
|
function SectionHead({ title, titleId, action, className, ...props }) {
|
|
3548
|
-
return /* @__PURE__ */ (0,
|
|
3549
|
-
/* @__PURE__ */ (0,
|
|
3721
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cx("uix-section-head", className), ...props, children: [
|
|
3722
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h2", { className: "uix-section-title", id: titleId, children: title }),
|
|
3550
3723
|
action
|
|
3551
3724
|
] });
|
|
3552
3725
|
}
|
|
3553
3726
|
function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }) {
|
|
3554
|
-
return /* @__PURE__ */ (0,
|
|
3727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("section", { className: cx("uix-notice", className), ...props, children: [
|
|
3555
3728
|
icon,
|
|
3556
|
-
/* @__PURE__ */ (0,
|
|
3557
|
-
/* @__PURE__ */ (0,
|
|
3558
|
-
title != null && /* @__PURE__ */ (0,
|
|
3729
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-notice__content", "aria-live": "polite", children: [
|
|
3730
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "uix-notice__copy", children: [
|
|
3731
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("strong", { children: title }),
|
|
3559
3732
|
title != null && summary != null && " ",
|
|
3560
3733
|
summary
|
|
3561
3734
|
] }),
|
|
3562
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3735
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-notice__meta", children: meta })
|
|
3563
3736
|
] }),
|
|
3564
|
-
(position != null || actions != null) && /* @__PURE__ */ (0,
|
|
3565
|
-
position != null && /* @__PURE__ */ (0,
|
|
3737
|
+
(position != null || actions != null) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-notice__actions", children: [
|
|
3738
|
+
position != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-notice__position", children: position }),
|
|
3566
3739
|
actions
|
|
3567
3740
|
] })
|
|
3568
3741
|
] });
|
|
@@ -3580,8 +3753,8 @@ function FeaturedStage({
|
|
|
3580
3753
|
className,
|
|
3581
3754
|
...props
|
|
3582
3755
|
}) {
|
|
3583
|
-
return /* @__PURE__ */ (0,
|
|
3584
|
-
/* @__PURE__ */ (0,
|
|
3756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("article", { className: cx("uix-featured__stage", className), ...props, children: [
|
|
3757
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
3585
3758
|
"div",
|
|
3586
3759
|
{
|
|
3587
3760
|
className: "uix-featured__visual",
|
|
@@ -3591,32 +3764,32 @@ function FeaturedStage({
|
|
|
3591
3764
|
children: visual
|
|
3592
3765
|
}
|
|
3593
3766
|
),
|
|
3594
|
-
/* @__PURE__ */ (0,
|
|
3595
|
-
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0,
|
|
3596
|
-
ordinal != null && /* @__PURE__ */ (0,
|
|
3767
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-featured__content", "aria-live": "polite", children: [
|
|
3768
|
+
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("p", { className: "uix-featured__eyebrow", children: [
|
|
3769
|
+
ordinal != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-featured__now", children: ordinal }),
|
|
3597
3770
|
eyebrow
|
|
3598
3771
|
] }),
|
|
3599
|
-
/* @__PURE__ */ (0,
|
|
3600
|
-
description != null && /* @__PURE__ */ (0,
|
|
3601
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3772
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h2", { className: "uix-featured__title", id: titleId, children: title }),
|
|
3773
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-featured__description", children: description }),
|
|
3774
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-featured__meta", children: meta }),
|
|
3602
3775
|
action
|
|
3603
3776
|
] })
|
|
3604
3777
|
] });
|
|
3605
3778
|
}
|
|
3606
3779
|
function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }) {
|
|
3607
|
-
return /* @__PURE__ */ (0,
|
|
3608
|
-
/* @__PURE__ */ (0,
|
|
3609
|
-
/* @__PURE__ */ (0,
|
|
3610
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
3611
|
-
/* @__PURE__ */ (0,
|
|
3780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("aside", { className: cx("uix-rundown", className), ...props, children: [
|
|
3781
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-rundown__head", children: [
|
|
3782
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
|
|
3783
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-rundown__eyebrow", children: eyebrow }),
|
|
3784
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h2", { className: "uix-rundown__title", id: titleId, children: title })
|
|
3612
3785
|
] }),
|
|
3613
3786
|
meta
|
|
3614
3787
|
] }),
|
|
3615
|
-
/* @__PURE__ */ (0,
|
|
3788
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uix-rundown__items", children })
|
|
3616
3789
|
] });
|
|
3617
3790
|
}
|
|
3618
3791
|
function FeaturedRundownItem({ number, topic, title, selected = false, className, ...props }) {
|
|
3619
|
-
return /* @__PURE__ */ (0,
|
|
3792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
3620
3793
|
"button",
|
|
3621
3794
|
{
|
|
3622
3795
|
type: "button",
|
|
@@ -3625,63 +3798,63 @@ function FeaturedRundownItem({ number, topic, title, selected = false, className
|
|
|
3625
3798
|
"data-selected": selected ? "true" : "false",
|
|
3626
3799
|
...props,
|
|
3627
3800
|
children: [
|
|
3628
|
-
number != null && /* @__PURE__ */ (0,
|
|
3629
|
-
/* @__PURE__ */ (0,
|
|
3630
|
-
topic != null && /* @__PURE__ */ (0,
|
|
3631
|
-
/* @__PURE__ */ (0,
|
|
3801
|
+
number != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-rundown__number", children: number }),
|
|
3802
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { children: [
|
|
3803
|
+
topic != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-rundown__topic", children: topic }),
|
|
3804
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-rundown__item-title", children: title })
|
|
3632
3805
|
] })
|
|
3633
3806
|
]
|
|
3634
3807
|
}
|
|
3635
3808
|
);
|
|
3636
3809
|
}
|
|
3637
3810
|
function NewsLead({ meta, title, summary, className, ...props }) {
|
|
3638
|
-
return /* @__PURE__ */ (0,
|
|
3639
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3640
|
-
/* @__PURE__ */ (0,
|
|
3641
|
-
summary != null && /* @__PURE__ */ (0,
|
|
3811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("article", { className: cx("uix-news-lead", className), ...props, children: [
|
|
3812
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-news-lead__meta", children: meta }),
|
|
3813
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { className: "uix-news-lead__title", children: title }),
|
|
3814
|
+
summary != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-news-lead__summary", children: summary })
|
|
3642
3815
|
] });
|
|
3643
3816
|
}
|
|
3644
3817
|
function ContentList({ children, className, ...props }) {
|
|
3645
|
-
return /* @__PURE__ */ (0,
|
|
3818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ul", { className: cx("uix-content-list", className), ...props, children });
|
|
3646
3819
|
}
|
|
3647
3820
|
function ContentListItem({ title, meta, trailing, className, ...props }) {
|
|
3648
|
-
return /* @__PURE__ */ (0,
|
|
3649
|
-
/* @__PURE__ */ (0,
|
|
3650
|
-
/* @__PURE__ */ (0,
|
|
3651
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3821
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("li", { className: cx("uix-content-list__item", className), ...props, children: [
|
|
3822
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
|
|
3823
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-content-list__title", children: title }),
|
|
3824
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-content-list__meta", children: meta })
|
|
3652
3825
|
] }),
|
|
3653
3826
|
trailing
|
|
3654
3827
|
] });
|
|
3655
3828
|
}
|
|
3656
3829
|
function ResourceGrid({ children, className, ...props }) {
|
|
3657
|
-
return /* @__PURE__ */ (0,
|
|
3830
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cx("uix-resource-grid", className), ...props, children });
|
|
3658
3831
|
}
|
|
3659
3832
|
function StatLine({ items, children, className, ...props }) {
|
|
3660
|
-
return /* @__PURE__ */ (0,
|
|
3661
|
-
items?.map((item, i) => /* @__PURE__ */ (0,
|
|
3662
|
-
/* @__PURE__ */ (0,
|
|
3663
|
-
/* @__PURE__ */ (0,
|
|
3833
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cx("uix-stat-line", className), ...props, children: [
|
|
3834
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-stat-line__item", children: [
|
|
3835
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-stat-line__value", children: item.value }),
|
|
3836
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-stat-line__label", children: item.label })
|
|
3664
3837
|
] }, item.id ?? i)),
|
|
3665
3838
|
children
|
|
3666
3839
|
] });
|
|
3667
3840
|
}
|
|
3668
3841
|
function EventRow({ month, day, title, meta, className, ...props }) {
|
|
3669
|
-
return /* @__PURE__ */ (0,
|
|
3670
|
-
/* @__PURE__ */ (0,
|
|
3671
|
-
/* @__PURE__ */ (0,
|
|
3672
|
-
/* @__PURE__ */ (0,
|
|
3842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cx("uix-event-row", className), ...props, children: [
|
|
3843
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-event-date", children: [
|
|
3844
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-event-date__month", children: month }),
|
|
3845
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-event-date__day", children: day })
|
|
3673
3846
|
] }),
|
|
3674
|
-
/* @__PURE__ */ (0,
|
|
3675
|
-
/* @__PURE__ */ (0,
|
|
3676
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3847
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
|
|
3848
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-event-row__title", children: title }),
|
|
3849
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "uix-event-row__meta", children: meta })
|
|
3677
3850
|
] })
|
|
3678
3851
|
] });
|
|
3679
3852
|
}
|
|
3680
3853
|
function StatusRow({ indicator, name, meta, className, ...props }) {
|
|
3681
|
-
return /* @__PURE__ */ (0,
|
|
3854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cx("uix-status-row", className), ...props, children: [
|
|
3682
3855
|
indicator,
|
|
3683
|
-
/* @__PURE__ */ (0,
|
|
3684
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3856
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-status-row__name", children: name }),
|
|
3857
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uix-list-meta", children: meta })
|
|
3685
3858
|
] });
|
|
3686
3859
|
}
|
|
3687
3860
|
|
|
@@ -3778,7 +3951,7 @@ function summarizeRule(value, labels = {}) {
|
|
|
3778
3951
|
}
|
|
3779
3952
|
|
|
3780
3953
|
// src/components/RuleBuilder.tsx
|
|
3781
|
-
var
|
|
3954
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
3782
3955
|
var ruleId = 0;
|
|
3783
3956
|
var nextId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(++ruleId).toString(36)}`;
|
|
3784
3957
|
function defaultCondition(fields, operators) {
|
|
@@ -3794,21 +3967,21 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
3794
3967
|
combinator: "and",
|
|
3795
3968
|
conditions: [defaultCondition(fields, operators)]
|
|
3796
3969
|
}, maxDepth));
|
|
3797
|
-
return /* @__PURE__ */ (0,
|
|
3798
|
-
/* @__PURE__ */ (0,
|
|
3799
|
-
/* @__PURE__ */ (0,
|
|
3800
|
-
/* @__PURE__ */ (0,
|
|
3970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("fieldset", { className: "uix-rule-builder__group", "data-depth": depth, children: [
|
|
3971
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("legend", { className: "uix-rule-builder__group-heading", children: [
|
|
3972
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: depth === 1 ? "When" : "Group" }),
|
|
3973
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("label", { children: [
|
|
3801
3974
|
"Match",
|
|
3802
|
-
/* @__PURE__ */ (0,
|
|
3803
|
-
/* @__PURE__ */ (0,
|
|
3804
|
-
/* @__PURE__ */ (0,
|
|
3975
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("select", { className: "uix-select uix-select--sm", value: group.combinator, disabled, onChange: (event) => updateNode(group.id, (node) => ({ ...node, combinator: event.currentTarget.value })), children: [
|
|
3976
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: "and", children: "all (AND)" }),
|
|
3977
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: "or", children: "any (OR)" })
|
|
3805
3978
|
] })
|
|
3806
3979
|
] })
|
|
3807
3980
|
] }),
|
|
3808
|
-
/* @__PURE__ */ (0,
|
|
3809
|
-
/* @__PURE__ */ (0,
|
|
3810
|
-
/* @__PURE__ */ (0,
|
|
3811
|
-
] }, node.id) : /* @__PURE__ */ (0,
|
|
3981
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-rule-builder__rows", children: group.conditions.map((node, index) => isRuleGroup(node) ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-rule-builder__nested", children: [
|
|
3982
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RuleGroupEditor, { ...{ group: node, depth: depth + 1, root, fields, operators, maxDepth, disabled, onRootChange, labels } }),
|
|
3983
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RowControls, { label: "group", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
|
|
3984
|
+
] }, node.id) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
3812
3985
|
ConditionRow,
|
|
3813
3986
|
{
|
|
3814
3987
|
condition: node,
|
|
@@ -3816,13 +3989,13 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
3816
3989
|
operators,
|
|
3817
3990
|
disabled,
|
|
3818
3991
|
onChange: (condition) => updateNode(node.id, () => condition),
|
|
3819
|
-
controls: /* @__PURE__ */ (0,
|
|
3992
|
+
controls: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RowControls, { label: "condition", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
|
|
3820
3993
|
},
|
|
3821
3994
|
node.id
|
|
3822
3995
|
)) }),
|
|
3823
|
-
/* @__PURE__ */ (0,
|
|
3824
|
-
/* @__PURE__ */ (0,
|
|
3825
|
-
/* @__PURE__ */ (0,
|
|
3996
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-rule-builder__add", children: [
|
|
3997
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: addCondition, disabled: disabled || fields.length === 0 || operators.length === 0, children: labels.addCondition }),
|
|
3998
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: addGroup, disabled: disabled || depth >= maxDepth, children: labels.addGroup })
|
|
3826
3999
|
] })
|
|
3827
4000
|
] });
|
|
3828
4001
|
}
|
|
@@ -3835,24 +4008,24 @@ function ConditionRow({ condition, fields, operators, disabled, onChange, contro
|
|
|
3835
4008
|
const nextOperator = operators.find((item) => nextField?.operators?.includes(item.id)) ?? availableOperators[0] ?? operators[0];
|
|
3836
4009
|
onChange({ ...condition, field: id, operator: nextOperator?.id ?? "" });
|
|
3837
4010
|
};
|
|
3838
|
-
return /* @__PURE__ */ (0,
|
|
3839
|
-
/* @__PURE__ */ (0,
|
|
3840
|
-
/* @__PURE__ */ (0,
|
|
3841
|
-
/* @__PURE__ */ (0,
|
|
4011
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-rule-builder__condition", children: [
|
|
4012
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("label", { children: [
|
|
4013
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "uix-visually-hidden", children: "Field" }),
|
|
4014
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("select", { className: "uix-select", value: condition.field, onChange: (event) => setField(event.currentTarget.value), disabled, children: fields.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
3842
4015
|
] }),
|
|
3843
|
-
/* @__PURE__ */ (0,
|
|
3844
|
-
/* @__PURE__ */ (0,
|
|
3845
|
-
/* @__PURE__ */ (0,
|
|
4016
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("label", { children: [
|
|
4017
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "uix-visually-hidden", children: "Operator" }),
|
|
4018
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("select", { className: "uix-select", value: condition.operator, onChange: (event) => onChange({ ...condition, operator: event.currentTarget.value }), disabled, children: availableOperators.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
3846
4019
|
] }),
|
|
3847
|
-
operator?.requiresValue !== false && /* @__PURE__ */ (0,
|
|
4020
|
+
operator?.requiresValue !== false && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("input", { className: "uix-input", value: typeof condition.value === "string" || typeof condition.value === "number" ? condition.value : condition.value == null ? "" : JSON.stringify(condition.value), onChange: (event) => onChange({ ...condition, value: event.currentTarget.value }), disabled, "aria-label": `Value for ${field?.label ?? "condition"}` }) }),
|
|
3848
4021
|
controls
|
|
3849
4022
|
] });
|
|
3850
4023
|
}
|
|
3851
4024
|
function RowControls({ label, first, last, disabled, onUp, onDown, onRemove }) {
|
|
3852
|
-
return /* @__PURE__ */ (0,
|
|
3853
|
-
/* @__PURE__ */ (0,
|
|
3854
|
-
/* @__PURE__ */ (0,
|
|
3855
|
-
/* @__PURE__ */ (0,
|
|
4025
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "uix-rule-builder__row-actions", children: [
|
|
4026
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onUp, disabled: disabled || first, "aria-label": `Move ${label} up`, children: "Up" }),
|
|
4027
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onDown, disabled: disabled || last, "aria-label": `Move ${label} down`, children: "Down" }),
|
|
4028
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onRemove, disabled, "aria-label": `Remove ${label}`, children: "Remove" })
|
|
3856
4029
|
] });
|
|
3857
4030
|
}
|
|
3858
4031
|
function RuleBuilder({
|
|
@@ -3873,9 +4046,9 @@ function RuleBuilder({
|
|
|
3873
4046
|
const fieldLabels = Object.fromEntries(fields.map((field) => [field.id, field.label]));
|
|
3874
4047
|
const operatorLabels = Object.fromEntries(operators.map((operator) => [operator.id, operator.label]));
|
|
3875
4048
|
const actionLabels = Object.fromEntries(actions.map((action) => [action.id, action.label]));
|
|
3876
|
-
if (readOnly) return /* @__PURE__ */ (0,
|
|
3877
|
-
/* @__PURE__ */ (0,
|
|
3878
|
-
issues.length > 0 && /* @__PURE__ */ (0,
|
|
4049
|
+
if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("section", { className: cx("uix-rule-builder uix-rule-builder--summary", className), "aria-label": "Rule summary", children: [
|
|
4050
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { children: summarizeRule(value, { fields: fieldLabels, operators: operatorLabels, actions: actionLabels }) }),
|
|
4051
|
+
issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("p", { className: "uix-rule-builder__invalid", children: [
|
|
3879
4052
|
"Rule has ",
|
|
3880
4053
|
issues.length,
|
|
3881
4054
|
" validation issue",
|
|
@@ -3884,16 +4057,16 @@ function RuleBuilder({
|
|
|
3884
4057
|
] })
|
|
3885
4058
|
] });
|
|
3886
4059
|
const updateActions = (next) => onChange({ ...value, then: next });
|
|
3887
|
-
return /* @__PURE__ */ (0,
|
|
3888
|
-
/* @__PURE__ */ (0,
|
|
3889
|
-
/* @__PURE__ */ (0,
|
|
3890
|
-
/* @__PURE__ */ (0,
|
|
4060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("section", { className: cx("uix-rule-builder", className), "aria-label": "Rule builder", children: [
|
|
4061
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(RuleGroupEditor, { group: value.when, depth: 1, root: value.when, fields, operators, maxDepth, disabled: readOnly, onRootChange: (when) => onChange({ ...value, when }), labels: { addCondition: addConditionLabel, addGroup: addGroupLabel } }),
|
|
4062
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("fieldset", { className: "uix-rule-builder__actions", children: [
|
|
4063
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("legend", { children: "Then" }),
|
|
3891
4064
|
value.then.map((action, index) => {
|
|
3892
4065
|
const definition = actions.find((item) => item.id === action.type);
|
|
3893
|
-
return /* @__PURE__ */ (0,
|
|
3894
|
-
/* @__PURE__ */ (0,
|
|
4066
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-rule-builder__action", children: [
|
|
4067
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("select", { className: "uix-select", value: action.type, onChange: (event) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: event.currentTarget.value } : item)), "aria-label": "Action type", children: actions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("option", { value: item.id, children: item.label }, item.id)) }),
|
|
3895
4068
|
definition?.renderParameters?.(action, (parameters) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, parameters } : item)), false),
|
|
3896
|
-
/* @__PURE__ */ (0,
|
|
4069
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
|
|
3897
4070
|
RowControls,
|
|
3898
4071
|
{
|
|
3899
4072
|
label: "action",
|
|
@@ -3915,22 +4088,22 @@ function RuleBuilder({
|
|
|
3915
4088
|
)
|
|
3916
4089
|
] }, action.id);
|
|
3917
4090
|
}),
|
|
3918
|
-
/* @__PURE__ */ (0,
|
|
4091
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: actions.length === 0, onClick: () => updateActions([...value.then, { id: nextId("action"), type: actions[0]?.id ?? "", parameters: {} }]), children: addActionLabel })
|
|
3919
4092
|
] }),
|
|
3920
|
-
/* @__PURE__ */ (0,
|
|
3921
|
-
/* @__PURE__ */ (0,
|
|
4093
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-rule-builder__validation", "aria-live": "polite", children: issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: "Rule is valid." }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
|
|
4094
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("strong", { children: [
|
|
3922
4095
|
issues.length,
|
|
3923
4096
|
" validation issue",
|
|
3924
4097
|
issues.length === 1 ? "" : "s"
|
|
3925
4098
|
] }),
|
|
3926
|
-
/* @__PURE__ */ (0,
|
|
4099
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ul", { children: issues.map((issue, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("li", { children: issue.message }, `${issue.path}-${index}`)) })
|
|
3927
4100
|
] }) })
|
|
3928
4101
|
] });
|
|
3929
4102
|
}
|
|
3930
4103
|
|
|
3931
4104
|
// src/components/BuilderCanvas.tsx
|
|
3932
|
-
var
|
|
3933
|
-
var
|
|
4105
|
+
var import_react39 = require("react");
|
|
4106
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
3934
4107
|
function BuilderCanvas({
|
|
3935
4108
|
items,
|
|
3936
4109
|
onItemsChange,
|
|
@@ -3945,13 +4118,13 @@ function BuilderCanvas({
|
|
|
3945
4118
|
emptyMessage = "Add an item from the palette to begin.",
|
|
3946
4119
|
className
|
|
3947
4120
|
}) {
|
|
3948
|
-
const [internalSelectedId, setInternalSelectedId] = (0,
|
|
3949
|
-
const [draggedId, setDraggedId] = (0,
|
|
3950
|
-
const propertyHeadingRef = (0,
|
|
3951
|
-
const shouldFocusProperties = (0,
|
|
4121
|
+
const [internalSelectedId, setInternalSelectedId] = (0, import_react39.useState)();
|
|
4122
|
+
const [draggedId, setDraggedId] = (0, import_react39.useState)();
|
|
4123
|
+
const propertyHeadingRef = (0, import_react39.useRef)(null);
|
|
4124
|
+
const shouldFocusProperties = (0, import_react39.useRef)(false);
|
|
3952
4125
|
const selectedId = controlledSelectedId ?? internalSelectedId;
|
|
3953
4126
|
const selected = items.find((item) => item.id === selectedId);
|
|
3954
|
-
(0,
|
|
4127
|
+
(0, import_react39.useEffect)(() => {
|
|
3955
4128
|
if (shouldFocusProperties.current && selected) {
|
|
3956
4129
|
propertyHeadingRef.current?.focus();
|
|
3957
4130
|
shouldFocusProperties.current = false;
|
|
@@ -3985,27 +4158,27 @@ function BuilderCanvas({
|
|
|
3985
4158
|
if (from >= 0 && to >= 0) onItemsChange(reorder(items, from, to));
|
|
3986
4159
|
setDraggedId(void 0);
|
|
3987
4160
|
};
|
|
3988
|
-
return /* @__PURE__ */ (0,
|
|
3989
|
-
/* @__PURE__ */ (0,
|
|
3990
|
-
/* @__PURE__ */ (0,
|
|
3991
|
-
palette.length === 0 ? /* @__PURE__ */ (0,
|
|
3992
|
-
/* @__PURE__ */ (0,
|
|
3993
|
-
item.description && /* @__PURE__ */ (0,
|
|
3994
|
-
/* @__PURE__ */ (0,
|
|
4161
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("section", { className: cx("uix-builder-canvas", className), "aria-label": "Builder canvas", children: [
|
|
4162
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("aside", { className: "uix-builder-canvas__palette", "aria-label": "Item palette", children: [
|
|
4163
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { children: "Palette" }),
|
|
4164
|
+
palette.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: "No item types available." }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ul", { children: palette.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("button", { type: "button", onClick: () => add(item), children: [
|
|
4165
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("strong", { children: item.label }),
|
|
4166
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: item.description }),
|
|
4167
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "aria-hidden": "true", children: "Add" })
|
|
3995
4168
|
] }) }, item.id)) })
|
|
3996
4169
|
] }),
|
|
3997
|
-
/* @__PURE__ */ (0,
|
|
3998
|
-
/* @__PURE__ */ (0,
|
|
3999
|
-
loading ? /* @__PURE__ */ (0,
|
|
4000
|
-
/* @__PURE__ */ (0,
|
|
4001
|
-
onRetry && /* @__PURE__ */ (0,
|
|
4002
|
-
] }) : items.length === 0 ? /* @__PURE__ */ (0,
|
|
4003
|
-
/* @__PURE__ */ (0,
|
|
4004
|
-
palette[0] && /* @__PURE__ */ (0,
|
|
4170
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-builder-canvas__workspace", children: [
|
|
4171
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { children: "Canvas" }),
|
|
4172
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "uix-builder-canvas__state", role: "status", children: "Loading canvas\u2026" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-builder-canvas__state", role: "alert", children: [
|
|
4173
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: error }),
|
|
4174
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
4175
|
+
] }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-builder-canvas__state", children: [
|
|
4176
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: emptyMessage }),
|
|
4177
|
+
palette[0] && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: [
|
|
4005
4178
|
"Add ",
|
|
4006
4179
|
palette[0].label
|
|
4007
4180
|
] })
|
|
4008
|
-
] }) : /* @__PURE__ */ (0,
|
|
4181
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ol", { className: "uix-builder-canvas__items", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
|
|
4009
4182
|
"li",
|
|
4010
4183
|
{
|
|
4011
4184
|
draggable: true,
|
|
@@ -4015,34 +4188,34 @@ function BuilderCanvas({
|
|
|
4015
4188
|
onDrop: (event) => drop(event, item.id),
|
|
4016
4189
|
className: cx("uix-builder-canvas__item", selectedId === item.id && "uix-builder-canvas__item--selected"),
|
|
4017
4190
|
children: [
|
|
4018
|
-
/* @__PURE__ */ (0,
|
|
4019
|
-
/* @__PURE__ */ (0,
|
|
4020
|
-
item.description && /* @__PURE__ */ (0,
|
|
4191
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { type: "button", className: "uix-builder-canvas__item-main", "aria-pressed": selectedId === item.id, onClick: () => select(item.id), children: renderItem?.(item, selectedId === item.id) ?? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
|
|
4192
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("strong", { children: item.label }),
|
|
4193
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: item.description })
|
|
4021
4194
|
] }) }),
|
|
4022
|
-
/* @__PURE__ */ (0,
|
|
4023
|
-
/* @__PURE__ */ (0,
|
|
4024
|
-
/* @__PURE__ */ (0,
|
|
4025
|
-
/* @__PURE__ */ (0,
|
|
4195
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: "uix-builder-canvas__item-actions", children: [
|
|
4196
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": `Move ${item.label} up`, children: "Up" }),
|
|
4197
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": `Move ${item.label} down`, children: "Down" }),
|
|
4198
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { type: "button", onClick: () => remove(item.id), "aria-label": `Remove ${item.label}`, children: "Remove" })
|
|
4026
4199
|
] })
|
|
4027
4200
|
]
|
|
4028
4201
|
},
|
|
4029
4202
|
item.id
|
|
4030
4203
|
)) })
|
|
4031
4204
|
] }),
|
|
4032
|
-
/* @__PURE__ */ (0,
|
|
4033
|
-
/* @__PURE__ */ (0,
|
|
4034
|
-
!selected ? /* @__PURE__ */ (0,
|
|
4035
|
-
/* @__PURE__ */ (0,
|
|
4036
|
-
/* @__PURE__ */ (0,
|
|
4037
|
-
/* @__PURE__ */ (0,
|
|
4038
|
-
/* @__PURE__ */ (0,
|
|
4205
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("aside", { className: "uix-builder-canvas__properties", "aria-label": "Item properties", children: [
|
|
4206
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { ref: propertyHeadingRef, tabIndex: -1, children: "Properties" }),
|
|
4207
|
+
!selected ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: "Select a canvas item to edit its properties." }) : renderProperties?.(selected, (updated) => onItemsChange(items.map((item) => item.id === updated.id ? updated : item))) ?? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("dl", { children: [
|
|
4208
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("dt", { children: "Type" }),
|
|
4209
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("dd", { children: selected.type }),
|
|
4210
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("dt", { children: "Label" }),
|
|
4211
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("dd", { children: selected.label })
|
|
4039
4212
|
] })
|
|
4040
4213
|
] })
|
|
4041
4214
|
] });
|
|
4042
4215
|
}
|
|
4043
4216
|
|
|
4044
4217
|
// src/components/SchedulingCalendar.tsx
|
|
4045
|
-
var
|
|
4218
|
+
var import_react40 = require("react");
|
|
4046
4219
|
|
|
4047
4220
|
// src/calendar-model.ts
|
|
4048
4221
|
function fromDateKey(value) {
|
|
@@ -4123,7 +4296,7 @@ function isDateUnavailable(date, options) {
|
|
|
4123
4296
|
}
|
|
4124
4297
|
|
|
4125
4298
|
// src/components/SchedulingCalendar.tsx
|
|
4126
|
-
var
|
|
4299
|
+
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
4127
4300
|
var stateLabel = { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" };
|
|
4128
4301
|
var stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
|
|
4129
4302
|
var dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
@@ -4145,19 +4318,19 @@ function SchedulingCalendar({
|
|
|
4145
4318
|
onRetry,
|
|
4146
4319
|
className
|
|
4147
4320
|
}) {
|
|
4148
|
-
const [internalView, setInternalView] = (0,
|
|
4321
|
+
const [internalView, setInternalView] = (0, import_react40.useState)("month");
|
|
4149
4322
|
const view = controlledView ?? internalView;
|
|
4150
|
-
const [activeDate, setActiveDate] = (0,
|
|
4151
|
-
const gridRef = (0,
|
|
4152
|
-
const visibleEntries = (0,
|
|
4153
|
-
const entrySpans = (0,
|
|
4154
|
-
const overlaySpans = (0,
|
|
4155
|
-
const monthDays = (0,
|
|
4323
|
+
const [activeDate, setActiveDate] = (0, import_react40.useState)(anchorDate);
|
|
4324
|
+
const gridRef = (0, import_react40.useRef)(null);
|
|
4325
|
+
const visibleEntries = (0, import_react40.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
|
|
4326
|
+
const entrySpans = (0, import_react40.useMemo)(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
|
|
4327
|
+
const overlaySpans = (0, import_react40.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
|
|
4328
|
+
const monthDays = (0, import_react40.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate)), [anchorDate]);
|
|
4156
4329
|
const weekday = ((/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)).getUTCDay() + 6) % 7;
|
|
4157
4330
|
const weekStart = addCalendarDays(anchorDate, -weekday);
|
|
4158
|
-
const weekDays = (0,
|
|
4159
|
-
const days = (0,
|
|
4160
|
-
(0,
|
|
4331
|
+
const weekDays = (0, import_react40.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
|
|
4332
|
+
const days = (0, import_react40.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
|
|
4333
|
+
(0, import_react40.useEffect)(() => {
|
|
4161
4334
|
if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
|
|
4162
4335
|
}, [activeDate, days, view]);
|
|
4163
4336
|
const setView = (next) => {
|
|
@@ -4191,58 +4364,58 @@ function SchedulingCalendar({
|
|
|
4191
4364
|
return date >= span.start && date <= span.end;
|
|
4192
4365
|
});
|
|
4193
4366
|
const formatInstant = (instant) => new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
|
|
4194
|
-
return /* @__PURE__ */ (0,
|
|
4195
|
-
/* @__PURE__ */ (0,
|
|
4196
|
-
/* @__PURE__ */ (0,
|
|
4197
|
-
/* @__PURE__ */ (0,
|
|
4198
|
-
/* @__PURE__ */ (0,
|
|
4367
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: cx("uix-scheduling-calendar", className), "aria-label": `Scheduling calendar in ${timeZone}`, children: [
|
|
4368
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-scheduling-calendar__header", children: [
|
|
4369
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
|
|
4370
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: "Previous" }),
|
|
4371
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: "Next" })
|
|
4199
4372
|
] }),
|
|
4200
|
-
/* @__PURE__ */ (0,
|
|
4201
|
-
/* @__PURE__ */ (0,
|
|
4373
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: view === "month" ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)) : `${dateLabel(weekStart, locale)} \u2013 ${dateLabel(weekDays[weekDays.length - 1], locale)}` }),
|
|
4374
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-segmented", role: "group", "aria-label": "Calendar view", children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: [
|
|
4202
4375
|
option[0].toUpperCase(),
|
|
4203
4376
|
option.slice(1)
|
|
4204
4377
|
] }, option)) })
|
|
4205
4378
|
] }),
|
|
4206
|
-
loading ? /* @__PURE__ */ (0,
|
|
4207
|
-
/* @__PURE__ */ (0,
|
|
4208
|
-
onRetry && /* @__PURE__ */ (0,
|
|
4209
|
-
] }) : view === "agenda" ? /* @__PURE__ */ (0,
|
|
4379
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-scheduling-calendar__state", role: "status", children: "Loading schedule\u2026" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
|
|
4380
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: error }),
|
|
4381
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
4382
|
+
] }) : view === "agenda" ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": "Schedule agenda", children: visibleEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: "No scheduled entries match the current filters." }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
|
|
4210
4383
|
const state = entry.state ?? "scheduled";
|
|
4211
|
-
return /* @__PURE__ */ (0,
|
|
4212
|
-
/* @__PURE__ */ (0,
|
|
4213
|
-
/* @__PURE__ */ (0,
|
|
4214
|
-
/* @__PURE__ */ (0,
|
|
4384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", onClick: () => onSelectEntry?.(entry), children: [
|
|
4385
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { children: [
|
|
4386
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: renderEntry?.(entry) ?? entry.title }),
|
|
4387
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { children: [
|
|
4215
4388
|
formatInstant(entry.start),
|
|
4216
4389
|
" \u2013 ",
|
|
4217
4390
|
formatInstant(entry.end)
|
|
4218
4391
|
] }),
|
|
4219
|
-
entry.meta && /* @__PURE__ */ (0,
|
|
4392
|
+
entry.meta && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: entry.meta })
|
|
4220
4393
|
] }),
|
|
4221
|
-
/* @__PURE__ */ (0,
|
|
4394
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StatusPill, { tone: stateTone(state), children: stateLabel[state] })
|
|
4222
4395
|
] }) }, entry.id);
|
|
4223
|
-
}) }) }) : /* @__PURE__ */ (0,
|
|
4396
|
+
}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), role: "group", "aria-label": `${view} schedule`, children: days.map((date, index) => {
|
|
4224
4397
|
const dayEntries = entriesFor(date);
|
|
4225
4398
|
const dayOverlays = overlaysFor(date);
|
|
4226
|
-
return /* @__PURE__ */ (0,
|
|
4227
|
-
/* @__PURE__ */ (0,
|
|
4228
|
-
dayOverlays.map((overlay) => /* @__PURE__ */ (0,
|
|
4229
|
-
/* @__PURE__ */ (0,
|
|
4399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
|
|
4400
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), "aria-label": dateLabel(date, locale), children: Number(date.slice(-2)) }),
|
|
4401
|
+
dayOverlays.map((overlay) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "uix-scheduling-calendar__overlay", "data-kind": overlay.kind, children: overlay.label }, overlay.id)),
|
|
4402
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-scheduling-calendar__entries", children: dayEntries.map((entry) => {
|
|
4230
4403
|
const span = entrySpans.get(entry.id);
|
|
4231
4404
|
const state = entry.state ?? "scheduled";
|
|
4232
|
-
return /* @__PURE__ */ (0,
|
|
4233
|
-
/* @__PURE__ */ (0,
|
|
4234
|
-
/* @__PURE__ */ (0,
|
|
4405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", className: "uix-scheduling-calendar__entry", "data-state": state, "data-range-start": date === span.start || void 0, "data-range-end": date === span.end || void 0, onClick: () => onSelectEntry?.(entry), "aria-label": `${entry.title}, ${stateLabel[state]}, ${formatInstant(entry.start)} to ${formatInstant(entry.end)}`, children: [
|
|
4406
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: renderEntry?.(entry) ?? entry.title }),
|
|
4407
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "uix-visually-hidden", children: stateLabel[state] })
|
|
4235
4408
|
] }, entry.id);
|
|
4236
4409
|
}) })
|
|
4237
4410
|
] }, date);
|
|
4238
4411
|
}) }),
|
|
4239
|
-
/* @__PURE__ */ (0,
|
|
4412
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-scheduling-calendar__legend", "aria-label": "Schedule state legend", children: ["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { "data-state": state, children: stateLabel[state] }, state)) })
|
|
4240
4413
|
] });
|
|
4241
4414
|
}
|
|
4242
4415
|
|
|
4243
4416
|
// src/components/DateRangePicker.tsx
|
|
4244
|
-
var
|
|
4245
|
-
var
|
|
4417
|
+
var import_react41 = require("react");
|
|
4418
|
+
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
4246
4419
|
var monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
4247
4420
|
var dateLabel2 = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
4248
4421
|
function DateRangePicker({
|
|
@@ -4261,25 +4434,25 @@ function DateRangePicker({
|
|
|
4261
4434
|
disabled,
|
|
4262
4435
|
className
|
|
4263
4436
|
}) {
|
|
4264
|
-
const id = (0,
|
|
4265
|
-
const [internalMonth, setInternalMonth] = (0,
|
|
4437
|
+
const id = (0, import_react41.useId)();
|
|
4438
|
+
const [internalMonth, setInternalMonth] = (0, import_react41.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
|
|
4266
4439
|
const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
|
|
4267
|
-
const [activeDate, setActiveDate] = (0,
|
|
4268
|
-
const rootRef = (0,
|
|
4269
|
-
const pendingFocus = (0,
|
|
4440
|
+
const [activeDate, setActiveDate] = (0, import_react41.useState)(value.end ?? value.start ?? visibleMonth);
|
|
4441
|
+
const rootRef = (0, import_react41.useRef)(null);
|
|
4442
|
+
const pendingFocus = (0, import_react41.useRef)(false);
|
|
4270
4443
|
const count = Math.max(1, Math.min(3, months));
|
|
4271
|
-
const calendars = (0,
|
|
4444
|
+
const calendars = (0, import_react41.useMemo)(() => Array.from({ length: count }, (_, index) => {
|
|
4272
4445
|
const month = startOfMonth(addCalendarMonths(visibleMonth, index));
|
|
4273
4446
|
return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
|
|
4274
4447
|
}), [visibleMonth, count]);
|
|
4275
4448
|
const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
|
|
4276
|
-
(0,
|
|
4449
|
+
(0, import_react41.useEffect)(() => {
|
|
4277
4450
|
const first = calendars[0]?.days[0]?.date;
|
|
4278
4451
|
const finalDays = calendars[calendars.length - 1]?.days;
|
|
4279
4452
|
const last = finalDays?.[finalDays.length - 1]?.date;
|
|
4280
4453
|
if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
|
|
4281
4454
|
}, [activeDate, calendars]);
|
|
4282
|
-
(0,
|
|
4455
|
+
(0, import_react41.useEffect)(() => {
|
|
4283
4456
|
if (!pendingFocus.current) return;
|
|
4284
4457
|
rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus();
|
|
4285
4458
|
pendingFocus.current = false;
|
|
@@ -4317,23 +4490,23 @@ function DateRangePicker({
|
|
|
4317
4490
|
}
|
|
4318
4491
|
};
|
|
4319
4492
|
const announcement = !value.start ? "No date range selected." : !value.end ? `Start date ${dateLabel2(value.start, locale)} selected. Choose an end date.` : `${dateLabel2(value.start, locale)} to ${dateLabel2(value.end, locale)} selected.`;
|
|
4320
|
-
return /* @__PURE__ */ (0,
|
|
4321
|
-
/* @__PURE__ */ (0,
|
|
4322
|
-
/* @__PURE__ */ (0,
|
|
4323
|
-
/* @__PURE__ */ (0,
|
|
4324
|
-
/* @__PURE__ */ (0,
|
|
4325
|
-
/* @__PURE__ */ (0,
|
|
4493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("section", { className: cx("uix-date-range-picker", rangeInvalid && "uix-date-range-picker--invalid", className), "aria-labelledby": `${id}-label`, children: [
|
|
4494
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-date-range-picker__header", children: [
|
|
4495
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h3", { id: `${id}-label`, children: label }),
|
|
4496
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
|
|
4497
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, -1)), "aria-label": "Show previous month", children: "Previous" }),
|
|
4498
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, 1)), "aria-label": "Show next month", children: "Next" })
|
|
4326
4499
|
] })
|
|
4327
4500
|
] }),
|
|
4328
|
-
/* @__PURE__ */ (0,
|
|
4329
|
-
/* @__PURE__ */ (0,
|
|
4330
|
-
/* @__PURE__ */ (0,
|
|
4331
|
-
/* @__PURE__ */ (0,
|
|
4332
|
-
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0,
|
|
4501
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ref: rootRef, className: "uix-date-range-picker__months", children: calendars.map(({ month, days }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-date-range-picker__month", children: [
|
|
4502
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h4", { children: monthLabel(month, locale) }),
|
|
4503
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: day }, day)) }),
|
|
4504
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
|
|
4505
|
+
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { "aria-hidden": "true" }, `blank-${index}`)),
|
|
4333
4506
|
days.map((day) => {
|
|
4334
4507
|
const unavailable = disabled || isDateUnavailable(day.date, { min, max, isDisabled: isDateDisabled });
|
|
4335
4508
|
const edge = day.date === value.start ? "start" : day.date === value.end ? "end" : void 0;
|
|
4336
|
-
return /* @__PURE__ */ (0,
|
|
4509
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4337
4510
|
"button",
|
|
4338
4511
|
{
|
|
4339
4512
|
type: "button",
|
|
@@ -4354,13 +4527,13 @@ function DateRangePicker({
|
|
|
4354
4527
|
})
|
|
4355
4528
|
] })
|
|
4356
4529
|
] }, month)) }),
|
|
4357
|
-
/* @__PURE__ */ (0,
|
|
4358
|
-
rangeInvalid && /* @__PURE__ */ (0,
|
|
4530
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "uix-date-range-picker__selection", "aria-live": "polite", children: announcement }),
|
|
4531
|
+
rangeInvalid && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
|
|
4359
4532
|
] });
|
|
4360
4533
|
}
|
|
4361
4534
|
|
|
4362
4535
|
// src/components/RelationshipGraph.tsx
|
|
4363
|
-
var
|
|
4536
|
+
var import_react43 = require("react");
|
|
4364
4537
|
|
|
4365
4538
|
// src/relationship-graph-model.ts
|
|
4366
4539
|
function boundRelationshipGraph(nodes, edges, maxNodes = 40) {
|
|
@@ -4841,10 +5014,10 @@ function layeredNeighbor(layout, currentId, key) {
|
|
|
4841
5014
|
}
|
|
4842
5015
|
|
|
4843
5016
|
// src/components/RelationshipGraphLayered.tsx
|
|
4844
|
-
var
|
|
5017
|
+
var import_react42 = require("react");
|
|
4845
5018
|
|
|
4846
5019
|
// src/components/RelationshipGraphList.tsx
|
|
4847
|
-
var
|
|
5020
|
+
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
4848
5021
|
function EquivalentRelationshipList({
|
|
4849
5022
|
nodes,
|
|
4850
5023
|
edges,
|
|
@@ -4855,19 +5028,19 @@ function EquivalentRelationshipList({
|
|
|
4855
5028
|
onOpenDetails
|
|
4856
5029
|
}) {
|
|
4857
5030
|
const labelById = new Map(nodes.map((node) => [node.id, node.label]));
|
|
4858
|
-
return /* @__PURE__ */ (0,
|
|
4859
|
-
/* @__PURE__ */ (0,
|
|
4860
|
-
/* @__PURE__ */ (0,
|
|
5031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": labels.list, children: [
|
|
5032
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("h3", { children: labels.listHeading }),
|
|
5033
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("ul", { children: nodes.map((node) => {
|
|
4861
5034
|
const neighbors = relationshipNeighbors(node.id, edges).map((id) => labelById.get(id) ?? id);
|
|
4862
|
-
return /* @__PURE__ */ (0,
|
|
4863
|
-
/* @__PURE__ */ (0,
|
|
4864
|
-
/* @__PURE__ */ (0,
|
|
4865
|
-
node.type && /* @__PURE__ */ (0,
|
|
4866
|
-
/* @__PURE__ */ (0,
|
|
5035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("li", { "data-selected": selectedId === node.id || void 0, children: [
|
|
5036
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { type: "button", onClick: () => onSelect(node.id), "aria-pressed": selectedId === node.id, children: [
|
|
5037
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("strong", { children: node.label }),
|
|
5038
|
+
node.type && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: node.type }),
|
|
5039
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children: neighbors.length ? labels.connectedTo(neighbors.join(", ")) : labels.noConnections })
|
|
4867
5040
|
] }),
|
|
4868
|
-
/* @__PURE__ */ (0,
|
|
4869
|
-
onExpandNeighbors && /* @__PURE__ */ (0,
|
|
4870
|
-
onOpenDetails && /* @__PURE__ */ (0,
|
|
5041
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uix-relationship-graph__list-actions", children: [
|
|
5042
|
+
onExpandNeighbors && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: () => onExpandNeighbors(node), children: labels.expandNeighbors }),
|
|
5043
|
+
onOpenDetails && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", onClick: () => onOpenDetails(node), children: labels.openDetails })
|
|
4871
5044
|
] })
|
|
4872
5045
|
] }, node.id);
|
|
4873
5046
|
}) })
|
|
@@ -4875,7 +5048,7 @@ function EquivalentRelationshipList({
|
|
|
4875
5048
|
}
|
|
4876
5049
|
|
|
4877
5050
|
// src/components/RelationshipGraphLayered.tsx
|
|
4878
|
-
var
|
|
5051
|
+
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
4879
5052
|
var EMPTY_IDS = /* @__PURE__ */ new Set();
|
|
4880
5053
|
var MIN_ZOOM = 0.4;
|
|
4881
5054
|
var MAX_ZOOM = 1.5;
|
|
@@ -4928,11 +5101,11 @@ function LayeredRelationshipGraph({
|
|
|
4928
5101
|
focusId,
|
|
4929
5102
|
onFocusChange
|
|
4930
5103
|
}) {
|
|
4931
|
-
const hintId = (0,
|
|
4932
|
-
const bounded = (0,
|
|
4933
|
-
const [localExpanded, setLocalExpanded] = (0,
|
|
5104
|
+
const hintId = (0, import_react42.useId)();
|
|
5105
|
+
const bounded = (0, import_react42.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
5106
|
+
const [localExpanded, setLocalExpanded] = (0, import_react42.useState)(EMPTY_IDS);
|
|
4934
5107
|
const expanded = expandedClusterIds ?? localExpanded;
|
|
4935
|
-
const layout = (0,
|
|
5108
|
+
const layout = (0, import_react42.useMemo)(
|
|
4936
5109
|
() => layoutLayeredGraph(bounded.nodes, bounded.edges, {
|
|
4937
5110
|
...rootId !== void 0 ? { rootId } : {},
|
|
4938
5111
|
...clusterThreshold !== void 0 ? { clusterThreshold } : {},
|
|
@@ -4941,29 +5114,29 @@ function LayeredRelationshipGraph({
|
|
|
4941
5114
|
}),
|
|
4942
5115
|
[bounded, rootId, clusterThreshold, expanded, density]
|
|
4943
5116
|
);
|
|
4944
|
-
const itemById = (0,
|
|
4945
|
-
const viewportRef = (0,
|
|
4946
|
-
const itemRefs = (0,
|
|
4947
|
-
const [size, setSize] = (0,
|
|
4948
|
-
const [view, setView] = (0,
|
|
4949
|
-
const [animate, setAnimate] = (0,
|
|
4950
|
-
const [localFocus, setLocalFocus] = (0,
|
|
4951
|
-
const [hoverId, setHoverId] = (0,
|
|
4952
|
-
const viewRef = (0,
|
|
5117
|
+
const itemById = (0, import_react42.useMemo)(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
|
|
5118
|
+
const viewportRef = (0, import_react42.useRef)(null);
|
|
5119
|
+
const itemRefs = (0, import_react42.useRef)(/* @__PURE__ */ new Map());
|
|
5120
|
+
const [size, setSize] = (0, import_react42.useState)({ width: 0, height: 0 });
|
|
5121
|
+
const [view, setView] = (0, import_react42.useState)({ x: 0, y: 0, zoom: 1 });
|
|
5122
|
+
const [animate, setAnimate] = (0, import_react42.useState)(false);
|
|
5123
|
+
const [localFocus, setLocalFocus] = (0, import_react42.useState)(void 0);
|
|
5124
|
+
const [hoverId, setHoverId] = (0, import_react42.useState)(void 0);
|
|
5125
|
+
const viewRef = (0, import_react42.useRef)(view);
|
|
4953
5126
|
viewRef.current = view;
|
|
4954
|
-
const layoutRef = (0,
|
|
5127
|
+
const layoutRef = (0, import_react42.useRef)(layout);
|
|
4955
5128
|
layoutRef.current = layout;
|
|
4956
|
-
const pendingFocus = (0,
|
|
4957
|
-
const initialisedFor = (0,
|
|
5129
|
+
const pendingFocus = (0, import_react42.useRef)(void 0);
|
|
5130
|
+
const initialisedFor = (0, import_react42.useRef)(void 0);
|
|
4958
5131
|
const rootItemId = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
|
|
4959
5132
|
const requestedFocus = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : localFocus;
|
|
4960
5133
|
const focusedId = requestedFocus !== void 0 && itemById.has(requestedFocus) ? requestedFocus : rootItemId;
|
|
4961
5134
|
const selectedItemId = selectedId !== void 0 ? layout.itemOf[selectedId] : void 0;
|
|
4962
|
-
const activeIds = (0,
|
|
5135
|
+
const activeIds = (0, import_react42.useMemo)(
|
|
4963
5136
|
() => new Set([hoverId, selectedItemId].filter((id) => id !== void 0)),
|
|
4964
5137
|
[hoverId, selectedItemId]
|
|
4965
5138
|
);
|
|
4966
|
-
(0,
|
|
5139
|
+
(0, import_react42.useEffect)(() => {
|
|
4967
5140
|
const element = viewportRef.current;
|
|
4968
5141
|
if (!element) return;
|
|
4969
5142
|
const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
|
|
@@ -4973,18 +5146,18 @@ function LayeredRelationshipGraph({
|
|
|
4973
5146
|
observer.observe(element);
|
|
4974
5147
|
return () => observer.disconnect();
|
|
4975
5148
|
}, []);
|
|
4976
|
-
(0,
|
|
5149
|
+
(0, import_react42.useEffect)(() => {
|
|
4977
5150
|
if (size.width === 0) return;
|
|
4978
5151
|
const key = `${layout.rootId ?? ""}`;
|
|
4979
5152
|
if (initialisedFor.current === key) return;
|
|
4980
5153
|
initialisedFor.current = key;
|
|
4981
5154
|
setView(initialView(layout, size));
|
|
4982
5155
|
}, [layout, size]);
|
|
4983
|
-
const moveView = (0,
|
|
5156
|
+
const moveView = (0, import_react42.useCallback)((next, smooth) => {
|
|
4984
5157
|
setAnimate(smooth);
|
|
4985
5158
|
setView(next);
|
|
4986
5159
|
}, []);
|
|
4987
|
-
const ensureVisible = (0,
|
|
5160
|
+
const ensureVisible = (0, import_react42.useCallback)((id, smooth) => {
|
|
4988
5161
|
const element = viewportRef.current;
|
|
4989
5162
|
const item = layoutRef.current.items.find((candidate) => candidate.id === id);
|
|
4990
5163
|
if (!element || !item) return;
|
|
@@ -5003,7 +5176,7 @@ function LayeredRelationshipGraph({
|
|
|
5003
5176
|
else if (bottom > heightPx - FOCUS_MARGIN) nextY -= bottom - (heightPx - FOCUS_MARGIN);
|
|
5004
5177
|
if (nextX !== x || nextY !== y) moveView({ x: nextX, y: nextY, zoom }, smooth);
|
|
5005
5178
|
}, [moveView]);
|
|
5006
|
-
const focusItem = (0,
|
|
5179
|
+
const focusItem = (0, import_react42.useCallback)((id) => {
|
|
5007
5180
|
setLocalFocus(id);
|
|
5008
5181
|
onFocusChange?.(id);
|
|
5009
5182
|
requestAnimationFrame(() => {
|
|
@@ -5011,7 +5184,7 @@ function LayeredRelationshipGraph({
|
|
|
5011
5184
|
ensureVisible(id, true);
|
|
5012
5185
|
});
|
|
5013
5186
|
}, [ensureVisible, onFocusChange]);
|
|
5014
|
-
(0,
|
|
5187
|
+
(0, import_react42.useEffect)(() => {
|
|
5015
5188
|
const wanted = pendingFocus.current;
|
|
5016
5189
|
if (wanted !== void 0 && itemById.has(wanted)) {
|
|
5017
5190
|
pendingFocus.current = void 0;
|
|
@@ -5021,8 +5194,8 @@ function LayeredRelationshipGraph({
|
|
|
5021
5194
|
const controlledTarget = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : void 0;
|
|
5022
5195
|
const controlledPresent = controlledTarget !== void 0 && itemById.has(controlledTarget);
|
|
5023
5196
|
const controlledKey = `${controlledTarget ?? ""}|${controlledPresent}`;
|
|
5024
|
-
const lastControlledKey = (0,
|
|
5025
|
-
(0,
|
|
5197
|
+
const lastControlledKey = (0, import_react42.useRef)(controlledKey);
|
|
5198
|
+
(0, import_react42.useEffect)(() => {
|
|
5026
5199
|
if (lastControlledKey.current === controlledKey) return;
|
|
5027
5200
|
lastControlledKey.current = controlledKey;
|
|
5028
5201
|
if (!controlledPresent || controlledTarget === void 0) return;
|
|
@@ -5031,7 +5204,7 @@ function LayeredRelationshipGraph({
|
|
|
5031
5204
|
ensureVisible(controlledTarget, true);
|
|
5032
5205
|
});
|
|
5033
5206
|
}, [controlledKey, controlledTarget, controlledPresent, ensureVisible]);
|
|
5034
|
-
(0,
|
|
5207
|
+
(0, import_react42.useEffect)(() => {
|
|
5035
5208
|
const element = viewportRef.current;
|
|
5036
5209
|
if (!element) return;
|
|
5037
5210
|
const onWheel = (event) => {
|
|
@@ -5049,8 +5222,8 @@ function LayeredRelationshipGraph({
|
|
|
5049
5222
|
element.addEventListener("wheel", onWheel, { passive: false });
|
|
5050
5223
|
return () => element.removeEventListener("wheel", onWheel);
|
|
5051
5224
|
}, []);
|
|
5052
|
-
const pointers = (0,
|
|
5053
|
-
const pinchDistance = (0,
|
|
5225
|
+
const pointers = (0, import_react42.useRef)(/* @__PURE__ */ new Map());
|
|
5226
|
+
const pinchDistance = (0, import_react42.useRef)(void 0);
|
|
5054
5227
|
const onPointerDown = (event) => {
|
|
5055
5228
|
if (event.target.closest("button")) return;
|
|
5056
5229
|
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
@@ -5148,21 +5321,21 @@ function LayeredRelationshipGraph({
|
|
|
5148
5321
|
height: layout.height,
|
|
5149
5322
|
transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
|
|
5150
5323
|
};
|
|
5151
|
-
return /* @__PURE__ */ (0,
|
|
5152
|
-
/* @__PURE__ */ (0,
|
|
5153
|
-
/* @__PURE__ */ (0,
|
|
5154
|
-
/* @__PURE__ */ (0,
|
|
5155
|
-
/* @__PURE__ */ (0,
|
|
5156
|
-
/* @__PURE__ */ (0,
|
|
5157
|
-
/* @__PURE__ */ (0,
|
|
5158
|
-
/* @__PURE__ */ (0,
|
|
5159
|
-
/* @__PURE__ */ (0,
|
|
5160
|
-
/* @__PURE__ */ (0,
|
|
5161
|
-
/* @__PURE__ */ (0,
|
|
5324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("section", { className: cx("uix-relationship-graph", "uix-relationship-graph--layered", density === "compact" && "uix-relationship-graph--compact", className), "aria-label": labels.graph, children: [
|
|
5325
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
|
|
5326
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM, children: labels.zoomIn }),
|
|
5327
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM, children: labels.zoomOut }),
|
|
5328
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
|
|
5329
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => moveView(initialView(layout, size), true), children: labels.reset }),
|
|
5330
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
|
|
5331
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
|
|
5332
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
|
|
5333
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
|
|
5334
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(view.zoom * 100)) })
|
|
5162
5335
|
] }),
|
|
5163
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
5164
|
-
/* @__PURE__ */ (0,
|
|
5165
|
-
/* @__PURE__ */ (0,
|
|
5336
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
|
|
5337
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
|
|
5338
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5166
5339
|
"div",
|
|
5167
5340
|
{
|
|
5168
5341
|
ref: viewportRef,
|
|
@@ -5172,11 +5345,11 @@ function LayeredRelationshipGraph({
|
|
|
5172
5345
|
onPointerMove,
|
|
5173
5346
|
onPointerUp: onPointerEnd,
|
|
5174
5347
|
onPointerCancel: onPointerEnd,
|
|
5175
|
-
children: /* @__PURE__ */ (0,
|
|
5176
|
-
/* @__PURE__ */ (0,
|
|
5348
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
|
|
5349
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("svg", { className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: layout.edges.map((edge) => {
|
|
5177
5350
|
const active = activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id));
|
|
5178
5351
|
const angle = edge.arrowAngle * 180 / Math.PI;
|
|
5179
|
-
return /* @__PURE__ */ (0,
|
|
5352
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
5180
5353
|
"g",
|
|
5181
5354
|
{
|
|
5182
5355
|
className: "uix-relationship-graph__link",
|
|
@@ -5186,15 +5359,15 @@ function LayeredRelationshipGraph({
|
|
|
5186
5359
|
"data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
|
|
5187
5360
|
"data-dimmed": dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0,
|
|
5188
5361
|
children: [
|
|
5189
|
-
/* @__PURE__ */ (0,
|
|
5190
|
-
edge.arrow !== "none" && /* @__PURE__ */ (0,
|
|
5191
|
-
showLabel(edge) && /* @__PURE__ */ (0,
|
|
5362
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { d: edge.path }),
|
|
5363
|
+
edge.arrow !== "none" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
|
|
5364
|
+
showLabel(edge) && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("text", { x: edge.labelX, y: edge.labelY, textAnchor: "middle", dominantBaseline: "middle", children: (edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines).map((line, index, lines) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tspan", { x: edge.labelX, dy: index === 0 ? `${-(lines.length - 1) * 0.55}em` : "1.1em", children: line }, index)) })
|
|
5192
5365
|
]
|
|
5193
5366
|
},
|
|
5194
5367
|
edge.id
|
|
5195
5368
|
);
|
|
5196
5369
|
}) }),
|
|
5197
|
-
layout.columns.map((column) => /* @__PURE__ */ (0,
|
|
5370
|
+
layout.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5198
5371
|
"div",
|
|
5199
5372
|
{
|
|
5200
5373
|
className: "uix-relationship-graph__column",
|
|
@@ -5204,17 +5377,17 @@ function LayeredRelationshipGraph({
|
|
|
5204
5377
|
},
|
|
5205
5378
|
column.depth
|
|
5206
5379
|
)),
|
|
5207
|
-
/* @__PURE__ */ (0,
|
|
5380
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { role: "group", "aria-roledescription": labels.roleDescription, "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), "aria-describedby": hintId, children: layout.items.map((item) => {
|
|
5208
5381
|
const selected = item.id === selectedItemId;
|
|
5209
5382
|
const dimmed = item.node ? dimmedNodeIds.has(item.node.id) : item.cluster.members.every((member) => dimmedNodeIds.has(member.id));
|
|
5210
|
-
const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ (0,
|
|
5211
|
-
/* @__PURE__ */ (0,
|
|
5212
|
-
/* @__PURE__ */ (0,
|
|
5213
|
-
] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0,
|
|
5214
|
-
/* @__PURE__ */ (0,
|
|
5215
|
-
(item.node.type || item.node.description) && /* @__PURE__ */ (0,
|
|
5383
|
+
const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
5384
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
|
|
5385
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
|
|
5386
|
+
] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
5387
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
|
|
5388
|
+
(item.node.type || item.node.description) && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
|
|
5216
5389
|
] });
|
|
5217
|
-
return /* @__PURE__ */ (0,
|
|
5390
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
5218
5391
|
"button",
|
|
5219
5392
|
{
|
|
5220
5393
|
ref: (element) => {
|
|
@@ -5245,7 +5418,7 @@ function LayeredRelationshipGraph({
|
|
|
5245
5418
|
onPointerLeave: () => setHoverId((current) => current === item.id ? void 0 : current),
|
|
5246
5419
|
children: [
|
|
5247
5420
|
body,
|
|
5248
|
-
item.inCycle && /* @__PURE__ */ (0,
|
|
5421
|
+
item.inCycle && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-relationship-graph__item-flag", "aria-hidden": "true", children: labels.cycle })
|
|
5249
5422
|
]
|
|
5250
5423
|
},
|
|
5251
5424
|
item.id
|
|
@@ -5253,7 +5426,7 @@ function LayeredRelationshipGraph({
|
|
|
5253
5426
|
}) }),
|
|
5254
5427
|
layout.items.filter((item) => item.expandedGroup).map((item) => {
|
|
5255
5428
|
const group = item.expandedGroup;
|
|
5256
|
-
return /* @__PURE__ */ (0,
|
|
5429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5257
5430
|
"button",
|
|
5258
5431
|
{
|
|
5259
5432
|
type: "button",
|
|
@@ -5269,8 +5442,8 @@ function LayeredRelationshipGraph({
|
|
|
5269
5442
|
] })
|
|
5270
5443
|
}
|
|
5271
5444
|
),
|
|
5272
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
5273
|
-
showList && /* @__PURE__ */ (0,
|
|
5445
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
|
|
5446
|
+
showList && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
5274
5447
|
EquivalentRelationshipList,
|
|
5275
5448
|
{
|
|
5276
5449
|
nodes: bounded.nodes,
|
|
@@ -5289,7 +5462,7 @@ function LayeredRelationshipGraph({
|
|
|
5289
5462
|
}
|
|
5290
5463
|
|
|
5291
5464
|
// src/components/RelationshipGraph.tsx
|
|
5292
|
-
var
|
|
5465
|
+
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
5293
5466
|
var DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
|
|
5294
5467
|
graph: "Relationship graph",
|
|
5295
5468
|
controls: "Graph view controls",
|
|
@@ -5351,21 +5524,21 @@ function radialViewBox(nodes) {
|
|
|
5351
5524
|
return `${round(minX)} ${round(minY)} ${width} ${height}`;
|
|
5352
5525
|
}
|
|
5353
5526
|
function RelationshipGraph(props) {
|
|
5354
|
-
const labels = (0,
|
|
5527
|
+
const labels = (0, import_react43.useMemo)(() => ({ ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels }), [props.labels]);
|
|
5355
5528
|
const stateClass = cx("uix-relationship-graph uix-relationship-graph--state", props.className);
|
|
5356
|
-
if (props.loading) return /* @__PURE__ */ (0,
|
|
5529
|
+
if (props.loading) return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: stateClass, role: "status", children: labels.loading });
|
|
5357
5530
|
if (props.error) {
|
|
5358
|
-
return /* @__PURE__ */ (0,
|
|
5359
|
-
/* @__PURE__ */ (0,
|
|
5360
|
-
props.onRetry && /* @__PURE__ */ (0,
|
|
5531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: stateClass, role: "alert", children: [
|
|
5532
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { children: props.error }),
|
|
5533
|
+
props.onRetry && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: props.onRetry, children: labels.retry })
|
|
5361
5534
|
] });
|
|
5362
5535
|
}
|
|
5363
|
-
if (props.nodes.length === 0) return /* @__PURE__ */ (0,
|
|
5364
|
-
/* @__PURE__ */ (0,
|
|
5365
|
-
/* @__PURE__ */ (0,
|
|
5536
|
+
if (props.nodes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: stateClass, children: [
|
|
5537
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { children: labels.emptyTitle }),
|
|
5538
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { children: labels.emptyHint })
|
|
5366
5539
|
] });
|
|
5367
|
-
if (props.layout === "layered") return /* @__PURE__ */ (0,
|
|
5368
|
-
return /* @__PURE__ */ (0,
|
|
5540
|
+
if (props.layout === "layered") return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LayeredRelationshipGraph, { ...props, labels });
|
|
5541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadialRelationshipGraph, { ...props, labels });
|
|
5369
5542
|
}
|
|
5370
5543
|
function RadialRelationshipGraph({
|
|
5371
5544
|
nodes,
|
|
@@ -5385,13 +5558,13 @@ function RadialRelationshipGraph({
|
|
|
5385
5558
|
labels,
|
|
5386
5559
|
showList = true
|
|
5387
5560
|
}) {
|
|
5388
|
-
const bounded = (0,
|
|
5389
|
-
const positioned = (0,
|
|
5390
|
-
const positionedById = (0,
|
|
5391
|
-
const [zoom, setZoom] = (0,
|
|
5392
|
-
const [pan, setPan] = (0,
|
|
5393
|
-
const [focusedId, setFocusedId] = (0,
|
|
5394
|
-
const svgRef = (0,
|
|
5561
|
+
const bounded = (0, import_react43.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
5562
|
+
const positioned = (0, import_react43.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
|
|
5563
|
+
const positionedById = (0, import_react43.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
|
|
5564
|
+
const [zoom, setZoom] = (0, import_react43.useState)(1);
|
|
5565
|
+
const [pan, setPan] = (0, import_react43.useState)({ x: 0, y: 0 });
|
|
5566
|
+
const [focusedId, setFocusedId] = (0, import_react43.useState)(selectedId ?? positioned[0]?.id);
|
|
5567
|
+
const svgRef = (0, import_react43.useRef)(null);
|
|
5395
5568
|
const select = (id) => {
|
|
5396
5569
|
const node = bounded.nodes.find((item) => item.id === id);
|
|
5397
5570
|
if (node) onSelect?.(node);
|
|
@@ -5414,25 +5587,25 @@ function RadialRelationshipGraph({
|
|
|
5414
5587
|
setZoom(1);
|
|
5415
5588
|
setPan({ x: 0, y: 0 });
|
|
5416
5589
|
};
|
|
5417
|
-
return /* @__PURE__ */ (0,
|
|
5418
|
-
/* @__PURE__ */ (0,
|
|
5419
|
-
/* @__PURE__ */ (0,
|
|
5420
|
-
/* @__PURE__ */ (0,
|
|
5421
|
-
/* @__PURE__ */ (0,
|
|
5422
|
-
/* @__PURE__ */ (0,
|
|
5423
|
-
/* @__PURE__ */ (0,
|
|
5424
|
-
/* @__PURE__ */ (0,
|
|
5425
|
-
/* @__PURE__ */ (0,
|
|
5426
|
-
/* @__PURE__ */ (0,
|
|
5590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": labels.graph, children: [
|
|
5591
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uix-relationship-graph__toolbar", "aria-label": labels.controls, children: [
|
|
5592
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": labels.panLeft, children: labels.left }),
|
|
5593
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": labels.panUp, children: labels.up }),
|
|
5594
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": labels.panDown, children: labels.down }),
|
|
5595
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": labels.panRight, children: labels.right }),
|
|
5596
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": labels.zoomIn, children: labels.zoomIn }),
|
|
5597
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": labels.zoomOut, children: labels.zoomOut }),
|
|
5598
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", onClick: reset, children: labels.reset }),
|
|
5599
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(zoom * 100)) })
|
|
5427
5600
|
] }),
|
|
5428
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
5429
|
-
/* @__PURE__ */ (0,
|
|
5601
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
|
|
5602
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { ref: svgRef, viewBox: radialViewBox(positioned), role: "group", "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
|
|
5430
5603
|
bounded.edges.map((edge) => {
|
|
5431
5604
|
const source = positionedById.get(edge.source);
|
|
5432
5605
|
const target = positionedById.get(edge.target);
|
|
5433
|
-
return /* @__PURE__ */ (0,
|
|
5606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
|
|
5434
5607
|
}),
|
|
5435
|
-
positioned.map((node) => /* @__PURE__ */ (0,
|
|
5608
|
+
positioned.map((node) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
5436
5609
|
"g",
|
|
5437
5610
|
{
|
|
5438
5611
|
transform: `translate(${node.x * RADIAL_SCALE_X} ${node.y * RADIAL_SCALE_Y})`,
|
|
@@ -5448,22 +5621,22 @@ function RadialRelationshipGraph({
|
|
|
5448
5621
|
onKeyDown: (event) => onNodeKeyDown(event, node.id),
|
|
5449
5622
|
onClick: () => select(node.id),
|
|
5450
5623
|
children: [
|
|
5451
|
-
/* @__PURE__ */ (0,
|
|
5452
|
-
/* @__PURE__ */ (0,
|
|
5453
|
-
/* @__PURE__ */ (0,
|
|
5624
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("title", { children: node.label }),
|
|
5625
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("rect", { x: -RADIAL_NODE_HALF_W, y: -RADIAL_NODE_HALF_H, width: RADIAL_NODE_HALF_W * 2, height: RADIAL_NODE_HALF_H * 2, rx: "8" }),
|
|
5626
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
|
|
5454
5627
|
]
|
|
5455
5628
|
},
|
|
5456
5629
|
node.id
|
|
5457
5630
|
))
|
|
5458
5631
|
] }) }) }),
|
|
5459
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
5460
|
-
showList && /* @__PURE__ */ (0,
|
|
5632
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("li", { "data-type": item.id, children: item.label }, item.id)) }),
|
|
5633
|
+
showList && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(EquivalentRelationshipList, { nodes: bounded.nodes, edges: bounded.edges, selectedId, labels, onSelect: select, onExpandNeighbors, onOpenDetails })
|
|
5461
5634
|
] });
|
|
5462
5635
|
}
|
|
5463
5636
|
|
|
5464
5637
|
// src/components/MatchReview.tsx
|
|
5465
|
-
var
|
|
5466
|
-
var
|
|
5638
|
+
var import_react44 = require("react");
|
|
5639
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
5467
5640
|
var valueText = (value) => value == null ? "\u2014" : typeof value === "string" ? value : JSON.stringify(value);
|
|
5468
5641
|
function MatchReview({
|
|
5469
5642
|
incoming,
|
|
@@ -5479,11 +5652,11 @@ function MatchReview({
|
|
|
5479
5652
|
onRetry,
|
|
5480
5653
|
className
|
|
5481
5654
|
}) {
|
|
5482
|
-
const [internalSelection, setInternalSelection] = (0,
|
|
5483
|
-
const [announcement, setAnnouncement] = (0,
|
|
5484
|
-
const [bulkPending, setBulkPending] = (0,
|
|
5655
|
+
const [internalSelection, setInternalSelection] = (0, import_react44.useState)(/* @__PURE__ */ new Set());
|
|
5656
|
+
const [announcement, setAnnouncement] = (0, import_react44.useState)("");
|
|
5657
|
+
const [bulkPending, setBulkPending] = (0, import_react44.useState)(false);
|
|
5485
5658
|
const selection = selectedIds ?? internalSelection;
|
|
5486
|
-
const pending = (0,
|
|
5659
|
+
const pending = (0, import_react44.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
|
|
5487
5660
|
const setSelection = (next) => {
|
|
5488
5661
|
if (selectedIds === void 0) setInternalSelection(next);
|
|
5489
5662
|
onSelectionChange?.(next);
|
|
@@ -5511,55 +5684,55 @@ function MatchReview({
|
|
|
5511
5684
|
setBulkPending(false);
|
|
5512
5685
|
}
|
|
5513
5686
|
};
|
|
5514
|
-
if (loading) return /* @__PURE__ */ (0,
|
|
5515
|
-
if (error) return /* @__PURE__ */ (0,
|
|
5516
|
-
/* @__PURE__ */ (0,
|
|
5517
|
-
onRetry && /* @__PURE__ */ (0,
|
|
5687
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: "Loading match candidates\u2026" });
|
|
5688
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
|
|
5689
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { children: error }),
|
|
5690
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
5518
5691
|
] });
|
|
5519
|
-
if (candidates.length === 0) return /* @__PURE__ */ (0,
|
|
5520
|
-
/* @__PURE__ */ (0,
|
|
5521
|
-
/* @__PURE__ */ (0,
|
|
5692
|
+
if (candidates.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
|
|
5693
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { children: "No candidate matches found." }),
|
|
5694
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { children: "Choose another record source or continue without a match." })
|
|
5522
5695
|
] });
|
|
5523
|
-
return /* @__PURE__ */ (0,
|
|
5524
|
-
/* @__PURE__ */ (0,
|
|
5525
|
-
/* @__PURE__ */ (0,
|
|
5526
|
-
/* @__PURE__ */ (0,
|
|
5527
|
-
/* @__PURE__ */ (0,
|
|
5696
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("section", { className: cx("uix-match-review", className), "aria-label": "Match review", children: [
|
|
5697
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-match-review__summary", children: [
|
|
5698
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
|
|
5699
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("strong", { children: incomingLabel }),
|
|
5700
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { children: [
|
|
5528
5701
|
pending.length,
|
|
5529
5702
|
" pending of ",
|
|
5530
5703
|
candidates.length
|
|
5531
5704
|
] })
|
|
5532
5705
|
] }),
|
|
5533
|
-
/* @__PURE__ */ (0,
|
|
5534
|
-
/* @__PURE__ */ (0,
|
|
5706
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { children: [
|
|
5707
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("b", { children: field.label }),
|
|
5535
5708
|
field.render?.(incoming[field.id], incoming) ?? valueText(incoming[field.id])
|
|
5536
5709
|
] }, field.id)) })
|
|
5537
5710
|
] }),
|
|
5538
|
-
onBulkDecision && /* @__PURE__ */ (0,
|
|
5539
|
-
/* @__PURE__ */ (0,
|
|
5711
|
+
onBulkDecision && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-match-review__bulk", "aria-label": "Bulk candidate actions", children: [
|
|
5712
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { children: [
|
|
5540
5713
|
selection.size,
|
|
5541
5714
|
" selected"
|
|
5542
5715
|
] }),
|
|
5543
|
-
/* @__PURE__ */ (0,
|
|
5544
|
-
/* @__PURE__ */ (0,
|
|
5716
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("accept"), children: bulkPending ? "Applying\u2026" : "Accept selected" }),
|
|
5717
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("dismiss"), children: bulkPending ? "Applying\u2026" : "Dismiss selected" })
|
|
5545
5718
|
] }),
|
|
5546
|
-
/* @__PURE__ */ (0,
|
|
5547
|
-
/* @__PURE__ */ (0,
|
|
5548
|
-
/* @__PURE__ */ (0,
|
|
5549
|
-
/* @__PURE__ */ (0,
|
|
5550
|
-
/* @__PURE__ */ (0,
|
|
5551
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
5552
|
-
/* @__PURE__ */ (0,
|
|
5553
|
-
/* @__PURE__ */ (0,
|
|
5719
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("table", { className: "uix-table uix-match-review__table", children: [
|
|
5720
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("caption", { className: "uix-visually-hidden", children: "Candidate matches and available decisions" }),
|
|
5721
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("tr", { children: [
|
|
5722
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-visually-hidden", children: "Select" }) }),
|
|
5723
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { scope: "col", children: "Confidence" }),
|
|
5724
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { scope: "col", children: field.label }, field.id)),
|
|
5725
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { scope: "col", children: "Status" }),
|
|
5726
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("th", { scope: "col", children: "Actions" })
|
|
5554
5727
|
] }) }),
|
|
5555
|
-
/* @__PURE__ */ (0,
|
|
5728
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("tbody", { children: candidates.map((candidate) => {
|
|
5556
5729
|
const resolved = candidate.status === "resolved";
|
|
5557
|
-
return /* @__PURE__ */ (0,
|
|
5558
|
-
/* @__PURE__ */ (0,
|
|
5559
|
-
/* @__PURE__ */ (0,
|
|
5560
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
5561
|
-
/* @__PURE__ */ (0,
|
|
5562
|
-
/* @__PURE__ */ (0,
|
|
5730
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("tr", { "data-status": candidate.status ?? "pending", children: [
|
|
5731
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": `Select candidate ${candidate.id}` }) }),
|
|
5732
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? "Not scored" : `${Math.round(candidate.confidence * 100)}%` }) }),
|
|
5733
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
|
|
5734
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ?? "Resolved" : "Pending" }) }),
|
|
5735
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
5563
5736
|
"button",
|
|
5564
5737
|
{
|
|
5565
5738
|
type: "button",
|
|
@@ -5573,12 +5746,12 @@ function MatchReview({
|
|
|
5573
5746
|
] }, candidate.id);
|
|
5574
5747
|
}) })
|
|
5575
5748
|
] }) }),
|
|
5576
|
-
/* @__PURE__ */ (0,
|
|
5749
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
5577
5750
|
] });
|
|
5578
5751
|
}
|
|
5579
5752
|
|
|
5580
5753
|
// src/components/MetricInput.tsx
|
|
5581
|
-
var
|
|
5754
|
+
var import_react45 = require("react");
|
|
5582
5755
|
|
|
5583
5756
|
// src/metric-model.ts
|
|
5584
5757
|
function decimals(value) {
|
|
@@ -5603,7 +5776,7 @@ function parseMetricValue(value) {
|
|
|
5603
5776
|
}
|
|
5604
5777
|
|
|
5605
5778
|
// src/components/MetricInput.tsx
|
|
5606
|
-
var
|
|
5779
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
5607
5780
|
var defaultMetricFormat = (input) => input == null ? "" : String(input);
|
|
5608
5781
|
function MetricInput({
|
|
5609
5782
|
value,
|
|
@@ -5622,11 +5795,11 @@ function MetricInput({
|
|
|
5622
5795
|
className,
|
|
5623
5796
|
id: providedId
|
|
5624
5797
|
}) {
|
|
5625
|
-
const generatedId = (0,
|
|
5798
|
+
const generatedId = (0, import_react45.useId)();
|
|
5626
5799
|
const id = providedId ?? generatedId;
|
|
5627
5800
|
const errorId = `${id}-error`;
|
|
5628
|
-
const [text, setText] = (0,
|
|
5629
|
-
(0,
|
|
5801
|
+
const [text, setText] = (0, import_react45.useState)(() => format(value));
|
|
5802
|
+
(0, import_react45.useEffect)(() => setText(format(value)), [value, format]);
|
|
5630
5803
|
const commit = (input) => {
|
|
5631
5804
|
const parsed = parse(input);
|
|
5632
5805
|
if (input.trim() === "" || parsed !== null) {
|
|
@@ -5652,10 +5825,10 @@ function MetricInput({
|
|
|
5652
5825
|
const parsed = parse(event.currentTarget.value);
|
|
5653
5826
|
setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
|
|
5654
5827
|
};
|
|
5655
|
-
return /* @__PURE__ */ (0,
|
|
5656
|
-
/* @__PURE__ */ (0,
|
|
5657
|
-
/* @__PURE__ */ (0,
|
|
5658
|
-
/* @__PURE__ */ (0,
|
|
5828
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
|
|
5829
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("label", { className: "uix-field__label", htmlFor: id, children: label }),
|
|
5830
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-metric-input__control", children: [
|
|
5831
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
5659
5832
|
Input,
|
|
5660
5833
|
{
|
|
5661
5834
|
id,
|
|
@@ -5674,22 +5847,22 @@ function MetricInput({
|
|
|
5674
5847
|
readOnly
|
|
5675
5848
|
}
|
|
5676
5849
|
),
|
|
5677
|
-
unit && /* @__PURE__ */ (0,
|
|
5678
|
-
/* @__PURE__ */ (0,
|
|
5679
|
-
/* @__PURE__ */ (0,
|
|
5680
|
-
/* @__PURE__ */ (0,
|
|
5850
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
|
|
5851
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "uix-metric-input__steps", children: [
|
|
5852
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
|
|
5853
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
|
|
5681
5854
|
] })
|
|
5682
5855
|
] }),
|
|
5683
|
-
unit && /* @__PURE__ */ (0,
|
|
5856
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
5684
5857
|
"Unit: ",
|
|
5685
5858
|
unit
|
|
5686
5859
|
] }),
|
|
5687
|
-
invalid && errorMessage && /* @__PURE__ */ (0,
|
|
5860
|
+
invalid && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
|
|
5688
5861
|
] });
|
|
5689
5862
|
}
|
|
5690
5863
|
|
|
5691
5864
|
// src/components/LicensePositionBar.tsx
|
|
5692
|
-
var
|
|
5865
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
5693
5866
|
var defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
|
|
5694
5867
|
function LicensePositionBar({
|
|
5695
5868
|
consumed,
|
|
@@ -5710,18 +5883,18 @@ function LicensePositionBar({
|
|
|
5710
5883
|
const percent = safeEntitled === 0 ? safeConsumed > 0 ? 100 : 0 : safeConsumed / safeEntitled * 100;
|
|
5711
5884
|
const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
|
|
5712
5885
|
const summary = `${consumedLabel}: ${format(safeConsumed)}. ${entitledLabel}: ${format(safeEntitled)}. ${over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}`}.`;
|
|
5713
|
-
return /* @__PURE__ */ (0,
|
|
5714
|
-
/* @__PURE__ */ (0,
|
|
5715
|
-
/* @__PURE__ */ (0,
|
|
5886
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
|
|
5887
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uix-license-position__header", children: [
|
|
5888
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "uix-license-position__value", children: [
|
|
5716
5889
|
format(safeConsumed),
|
|
5717
5890
|
" / ",
|
|
5718
5891
|
format(safeEntitled)
|
|
5719
5892
|
] }),
|
|
5720
|
-
/* @__PURE__ */ (0,
|
|
5893
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
|
|
5721
5894
|
] }),
|
|
5722
|
-
/* @__PURE__ */ (0,
|
|
5723
|
-
/* @__PURE__ */ (0,
|
|
5724
|
-
over > 0 && /* @__PURE__ */ (0,
|
|
5895
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uix-license-position__track", children: [
|
|
5896
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
|
|
5897
|
+
over > 0 && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
5725
5898
|
"span",
|
|
5726
5899
|
{
|
|
5727
5900
|
className: "uix-license-position__overflow",
|
|
@@ -5730,12 +5903,12 @@ function LicensePositionBar({
|
|
|
5730
5903
|
}
|
|
5731
5904
|
)
|
|
5732
5905
|
] }),
|
|
5733
|
-
/* @__PURE__ */ (0,
|
|
5906
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uix-visually-hidden", children: summary })
|
|
5734
5907
|
] });
|
|
5735
5908
|
}
|
|
5736
5909
|
|
|
5737
5910
|
// src/components/BrandProfiles.tsx
|
|
5738
|
-
var
|
|
5911
|
+
var import_react47 = require("react");
|
|
5739
5912
|
|
|
5740
5913
|
// src/color-model.ts
|
|
5741
5914
|
var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
@@ -5804,8 +5977,8 @@ function meetsContrast(background, foreground, minimum = 4.5) {
|
|
|
5804
5977
|
}
|
|
5805
5978
|
|
|
5806
5979
|
// src/components/ColorPicker.tsx
|
|
5807
|
-
var
|
|
5808
|
-
var
|
|
5980
|
+
var import_react46 = require("react");
|
|
5981
|
+
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
5809
5982
|
var EMPTY_COLORS = [];
|
|
5810
5983
|
function ColorPicker({
|
|
5811
5984
|
value,
|
|
@@ -5818,17 +5991,17 @@ function ColorPicker({
|
|
|
5818
5991
|
disabled,
|
|
5819
5992
|
className
|
|
5820
5993
|
}) {
|
|
5821
|
-
const id = (0,
|
|
5822
|
-
const triggerRef = (0,
|
|
5823
|
-
const dialogRef = (0,
|
|
5824
|
-
const [open, setOpen] = (0,
|
|
5994
|
+
const id = (0, import_react46.useId)();
|
|
5995
|
+
const triggerRef = (0, import_react46.useRef)(null);
|
|
5996
|
+
const dialogRef = (0, import_react46.useRef)(null);
|
|
5997
|
+
const [open, setOpen] = (0, import_react46.useState)(false);
|
|
5825
5998
|
const normalized = normalizeHex(value) ?? "#000000";
|
|
5826
|
-
const [hexText, setHexText] = (0,
|
|
5827
|
-
const hsv = (0,
|
|
5999
|
+
const [hexText, setHexText] = (0, import_react46.useState)(normalized);
|
|
6000
|
+
const hsv = (0, import_react46.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
|
|
5828
6001
|
const ratio = contrastRatio(normalized, foreground) ?? 0;
|
|
5829
6002
|
const passes = ratio >= minimumContrast;
|
|
5830
|
-
(0,
|
|
5831
|
-
(0,
|
|
6003
|
+
(0, import_react46.useEffect)(() => setHexText(normalized), [normalized]);
|
|
6004
|
+
(0, import_react46.useEffect)(() => {
|
|
5832
6005
|
if (!open) return;
|
|
5833
6006
|
const dialog = dialogRef.current;
|
|
5834
6007
|
dialog?.querySelector("input,button")?.focus();
|
|
@@ -5871,8 +6044,8 @@ function ColorPicker({
|
|
|
5871
6044
|
if (next) onChange(next);
|
|
5872
6045
|
};
|
|
5873
6046
|
const sampleStyle = { backgroundColor: normalized };
|
|
5874
|
-
return /* @__PURE__ */ (0,
|
|
5875
|
-
/* @__PURE__ */ (0,
|
|
6047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cx("uix-color-picker", className), children: [
|
|
6048
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
|
|
5876
6049
|
"button",
|
|
5877
6050
|
{
|
|
5878
6051
|
ref: triggerRef,
|
|
@@ -5884,12 +6057,12 @@ function ColorPicker({
|
|
|
5884
6057
|
onClick: () => setOpen((current) => !current),
|
|
5885
6058
|
disabled,
|
|
5886
6059
|
children: [
|
|
5887
|
-
/* @__PURE__ */ (0,
|
|
5888
|
-
/* @__PURE__ */ (0,
|
|
6060
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
|
|
6061
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { children: normalized })
|
|
5889
6062
|
]
|
|
5890
6063
|
}
|
|
5891
6064
|
),
|
|
5892
|
-
open && /* @__PURE__ */ (0,
|
|
6065
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
|
|
5893
6066
|
"div",
|
|
5894
6067
|
{
|
|
5895
6068
|
ref: dialogRef,
|
|
@@ -5900,57 +6073,57 @@ function ColorPicker({
|
|
|
5900
6073
|
className: "uix-color-picker__popover",
|
|
5901
6074
|
onKeyDown: onDialogKeyDown,
|
|
5902
6075
|
children: [
|
|
5903
|
-
/* @__PURE__ */ (0,
|
|
5904
|
-
/* @__PURE__ */ (0,
|
|
6076
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { style: { color: foreground }, children: "Aa" }) }),
|
|
6077
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
5905
6078
|
"Hue ",
|
|
5906
|
-
/* @__PURE__ */ (0,
|
|
6079
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
|
|
5907
6080
|
Math.round(hsv.h),
|
|
5908
6081
|
"\xB0"
|
|
5909
6082
|
] }),
|
|
5910
|
-
/* @__PURE__ */ (0,
|
|
6083
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
|
|
5911
6084
|
] }),
|
|
5912
|
-
/* @__PURE__ */ (0,
|
|
6085
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
5913
6086
|
"Saturation ",
|
|
5914
|
-
/* @__PURE__ */ (0,
|
|
6087
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
|
|
5915
6088
|
Math.round(hsv.s * 100),
|
|
5916
6089
|
"%"
|
|
5917
6090
|
] }),
|
|
5918
|
-
/* @__PURE__ */ (0,
|
|
6091
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
|
|
5919
6092
|
] }),
|
|
5920
|
-
/* @__PURE__ */ (0,
|
|
6093
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
5921
6094
|
"Brightness ",
|
|
5922
|
-
/* @__PURE__ */ (0,
|
|
6095
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { children: [
|
|
5923
6096
|
Math.round(hsv.v * 100),
|
|
5924
6097
|
"%"
|
|
5925
6098
|
] }),
|
|
5926
|
-
/* @__PURE__ */ (0,
|
|
6099
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
|
|
5927
6100
|
] }),
|
|
5928
|
-
/* @__PURE__ */ (0,
|
|
6101
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("label", { className: "uix-color-picker__hex", children: [
|
|
5929
6102
|
"Hex",
|
|
5930
|
-
/* @__PURE__ */ (0,
|
|
5931
|
-
/* @__PURE__ */ (0,
|
|
6103
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
|
|
6104
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
|
|
5932
6105
|
if (event.key === "Enter") commitHex();
|
|
5933
6106
|
}, "aria-invalid": !normalizeHex(hexText) }),
|
|
5934
|
-
/* @__PURE__ */ (0,
|
|
6107
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: "Set" })
|
|
5935
6108
|
] })
|
|
5936
6109
|
] }),
|
|
5937
|
-
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0,
|
|
5938
|
-
presets.length > 0 && /* @__PURE__ */ (0,
|
|
5939
|
-
/* @__PURE__ */ (0,
|
|
5940
|
-
/* @__PURE__ */ (0,
|
|
6110
|
+
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uix-color-picker__palettes", children: [
|
|
6111
|
+
presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("fieldset", { children: [
|
|
6112
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("legend", { children: "Presets" }),
|
|
6113
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use preset ${color}` }, color)) })
|
|
5941
6114
|
] }),
|
|
5942
|
-
recent.length > 0 && /* @__PURE__ */ (0,
|
|
5943
|
-
/* @__PURE__ */ (0,
|
|
5944
|
-
/* @__PURE__ */ (0,
|
|
6115
|
+
recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("fieldset", { children: [
|
|
6116
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("legend", { children: "Recent" }),
|
|
6117
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use recent color ${color}` }, color)) })
|
|
5945
6118
|
] })
|
|
5946
6119
|
] }),
|
|
5947
|
-
/* @__PURE__ */ (0,
|
|
6120
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: [
|
|
5948
6121
|
"Contrast ",
|
|
5949
6122
|
ratio.toFixed(2),
|
|
5950
6123
|
":1 \u2014 ",
|
|
5951
6124
|
passes ? `passes WCAG AA (${minimumContrast}:1)` : `does not meet WCAG AA (${minimumContrast}:1)`
|
|
5952
6125
|
] }),
|
|
5953
|
-
/* @__PURE__ */ (0,
|
|
6126
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: "Done" })
|
|
5954
6127
|
]
|
|
5955
6128
|
}
|
|
5956
6129
|
)
|
|
@@ -5958,7 +6131,7 @@ function ColorPicker({
|
|
|
5958
6131
|
}
|
|
5959
6132
|
|
|
5960
6133
|
// src/components/BrandProfiles.tsx
|
|
5961
|
-
var
|
|
6134
|
+
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
5962
6135
|
var PROFILE_PROPERTIES = {
|
|
5963
6136
|
brand: "--uix-brand",
|
|
5964
6137
|
brandForeground: "--uix-brand-fg",
|
|
@@ -6027,7 +6200,7 @@ function BrandProfileEditor({
|
|
|
6027
6200
|
colorPresets = EMPTY_COLORS2,
|
|
6028
6201
|
className
|
|
6029
6202
|
}) {
|
|
6030
|
-
const [announcement, setAnnouncement] = (0,
|
|
6203
|
+
const [announcement, setAnnouncement] = (0, import_react47.useState)("");
|
|
6031
6204
|
const update = (patch) => onChange({ ...value, ...patch });
|
|
6032
6205
|
const apply = () => {
|
|
6033
6206
|
if (applyTarget !== null) applyBrandProfile(value, applyTarget);
|
|
@@ -6044,54 +6217,54 @@ function BrandProfileEditor({
|
|
|
6044
6217
|
...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
|
|
6045
6218
|
...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
|
|
6046
6219
|
};
|
|
6047
|
-
return /* @__PURE__ */ (0,
|
|
6048
|
-
/* @__PURE__ */ (0,
|
|
6049
|
-
profiles.length > 0 && /* @__PURE__ */ (0,
|
|
6220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
|
|
6221
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uix-brand-profiles__form", children: [
|
|
6222
|
+
profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { className: "uix-field__label", children: [
|
|
6050
6223
|
"Profile",
|
|
6051
|
-
/* @__PURE__ */ (0,
|
|
6224
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("select", { className: "uix-select", value: value.id, onChange: (event) => {
|
|
6052
6225
|
const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
|
|
6053
6226
|
if (selected) onSelectProfile?.(selected);
|
|
6054
|
-
}, children: profiles.map((profile) => /* @__PURE__ */ (0,
|
|
6227
|
+
}, children: profiles.map((profile) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("option", { value: profile.id, children: profile.name }, profile.id)) })
|
|
6055
6228
|
] }),
|
|
6056
|
-
/* @__PURE__ */ (0,
|
|
6229
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { className: "uix-field__label", children: [
|
|
6057
6230
|
"Name",
|
|
6058
|
-
/* @__PURE__ */ (0,
|
|
6231
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
|
|
6059
6232
|
] }),
|
|
6060
|
-
/* @__PURE__ */ (0,
|
|
6061
|
-
/* @__PURE__ */ (0,
|
|
6233
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
|
|
6234
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { children: [
|
|
6062
6235
|
"Brand",
|
|
6063
|
-
/* @__PURE__ */ (0,
|
|
6236
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
|
|
6064
6237
|
] }),
|
|
6065
|
-
/* @__PURE__ */ (0,
|
|
6238
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { children: [
|
|
6066
6239
|
"On brand",
|
|
6067
|
-
/* @__PURE__ */ (0,
|
|
6240
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
|
|
6068
6241
|
] })
|
|
6069
6242
|
] }),
|
|
6070
|
-
/* @__PURE__ */ (0,
|
|
6243
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { className: "uix-field__label", children: [
|
|
6071
6244
|
"Body font",
|
|
6072
|
-
/* @__PURE__ */ (0,
|
|
6245
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
|
|
6073
6246
|
] }),
|
|
6074
|
-
/* @__PURE__ */ (0,
|
|
6247
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { className: "uix-field__label", children: [
|
|
6075
6248
|
"Heading font",
|
|
6076
|
-
/* @__PURE__ */ (0,
|
|
6249
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
|
|
6077
6250
|
] }),
|
|
6078
|
-
/* @__PURE__ */ (0,
|
|
6251
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
|
|
6079
6252
|
"Logo file",
|
|
6080
|
-
/* @__PURE__ */ (0,
|
|
6253
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
|
|
6081
6254
|
] }),
|
|
6082
|
-
/* @__PURE__ */ (0,
|
|
6083
|
-
/* @__PURE__ */ (0,
|
|
6255
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
|
|
6256
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
6084
6257
|
] }),
|
|
6085
|
-
/* @__PURE__ */ (0,
|
|
6086
|
-
/* @__PURE__ */ (0,
|
|
6087
|
-
value.logo ? /* @__PURE__ */ (0,
|
|
6088
|
-
/* @__PURE__ */ (0,
|
|
6258
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
|
|
6259
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
|
|
6260
|
+
value.logo ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
|
|
6261
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("strong", { children: value.name || "Brand preview" })
|
|
6089
6262
|
] }),
|
|
6090
|
-
/* @__PURE__ */ (0,
|
|
6091
|
-
/* @__PURE__ */ (0,
|
|
6092
|
-
/* @__PURE__ */ (0,
|
|
6093
|
-
/* @__PURE__ */ (0,
|
|
6094
|
-
/* @__PURE__ */ (0,
|
|
6263
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
|
|
6264
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("h3", { children: "Readable, serializable branding" }),
|
|
6265
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
|
|
6266
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
|
|
6267
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("a", { href: "#brand-profile-preview", children: "Preview link" })
|
|
6095
6268
|
] })
|
|
6096
6269
|
] })
|
|
6097
6270
|
] });
|
|
@@ -6099,7 +6272,7 @@ function BrandProfileEditor({
|
|
|
6099
6272
|
var BrandProfiles = BrandProfileEditor;
|
|
6100
6273
|
|
|
6101
6274
|
// src/components/DiffViewer.tsx
|
|
6102
|
-
var
|
|
6275
|
+
var import_react48 = require("react");
|
|
6103
6276
|
|
|
6104
6277
|
// src/diff-model.ts
|
|
6105
6278
|
function isJsonObject(value) {
|
|
@@ -6150,7 +6323,7 @@ function summarizeDiff(entries, resolutions = {}) {
|
|
|
6150
6323
|
}
|
|
6151
6324
|
|
|
6152
6325
|
// src/components/DiffViewer.tsx
|
|
6153
|
-
var
|
|
6326
|
+
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
6154
6327
|
var GROUPS = [
|
|
6155
6328
|
{ kind: "conflicted", label: "Conflicted" },
|
|
6156
6329
|
{ kind: "changed", label: "Changed" },
|
|
@@ -6169,65 +6342,65 @@ function DiffViewer({
|
|
|
6169
6342
|
labels = DEFAULT_LABELS,
|
|
6170
6343
|
className
|
|
6171
6344
|
}) {
|
|
6172
|
-
const id = (0,
|
|
6173
|
-
const entries = (0,
|
|
6174
|
-
const [internalResolutions, setInternalResolutions] = (0,
|
|
6345
|
+
const id = (0, import_react48.useId)();
|
|
6346
|
+
const entries = (0, import_react48.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
|
|
6347
|
+
const [internalResolutions, setInternalResolutions] = (0, import_react48.useState)({});
|
|
6175
6348
|
const resolutions = controlledResolutions ?? internalResolutions;
|
|
6176
6349
|
const summary = summarizeDiff(entries, resolutions);
|
|
6177
6350
|
const resolve2 = (path, resolution) => {
|
|
6178
6351
|
if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
|
|
6179
6352
|
onResolutionChange?.(path, resolution);
|
|
6180
6353
|
};
|
|
6181
|
-
if (entries.length === 0) return /* @__PURE__ */ (0,
|
|
6182
|
-
/* @__PURE__ */ (0,
|
|
6183
|
-
/* @__PURE__ */ (0,
|
|
6354
|
+
if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": "Configuration differences", children: [
|
|
6355
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("h3", { children: "No differences" }),
|
|
6356
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("p", { children: "Base, current, and incoming values are aligned." })
|
|
6184
6357
|
] });
|
|
6185
|
-
return /* @__PURE__ */ (0,
|
|
6186
|
-
/* @__PURE__ */ (0,
|
|
6187
|
-
GROUPS.map((group) => /* @__PURE__ */ (0,
|
|
6188
|
-
/* @__PURE__ */ (0,
|
|
6358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": "Configuration differences", children: [
|
|
6359
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uix-diff-viewer__summary", "aria-label": "Difference summary", children: [
|
|
6360
|
+
GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { children: [
|
|
6361
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("b", { children: summary[group.kind] }),
|
|
6189
6362
|
" ",
|
|
6190
6363
|
group.label.toLowerCase()
|
|
6191
6364
|
] }, group.kind)),
|
|
6192
|
-
/* @__PURE__ */ (0,
|
|
6193
|
-
/* @__PURE__ */ (0,
|
|
6365
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { children: [
|
|
6366
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("b", { children: summary.resolved }),
|
|
6194
6367
|
" resolved"
|
|
6195
6368
|
] }),
|
|
6196
|
-
/* @__PURE__ */ (0,
|
|
6197
|
-
/* @__PURE__ */ (0,
|
|
6369
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { children: [
|
|
6370
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("b", { children: summary.pending }),
|
|
6198
6371
|
" pending"
|
|
6199
6372
|
] })
|
|
6200
6373
|
] }),
|
|
6201
6374
|
GROUPS.map((group) => {
|
|
6202
6375
|
const grouped = entries.filter((entry) => entry.kind === group.kind);
|
|
6203
6376
|
if (!grouped.length) return null;
|
|
6204
|
-
return /* @__PURE__ */ (0,
|
|
6205
|
-
/* @__PURE__ */ (0,
|
|
6377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${group.kind}`, children: [
|
|
6378
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("h3", { id: `${id}-${group.kind}`, children: [
|
|
6206
6379
|
group.label,
|
|
6207
6380
|
" ",
|
|
6208
|
-
/* @__PURE__ */ (0,
|
|
6381
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { children: grouped.length })
|
|
6209
6382
|
] }),
|
|
6210
6383
|
grouped.map((entry) => {
|
|
6211
6384
|
const resolution = resolutions[entry.path] ?? "pending";
|
|
6212
|
-
return /* @__PURE__ */ (0,
|
|
6213
|
-
/* @__PURE__ */ (0,
|
|
6214
|
-
/* @__PURE__ */ (0,
|
|
6215
|
-
/* @__PURE__ */ (0,
|
|
6385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
|
|
6386
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("summary", { children: [
|
|
6387
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("code", { children: entry.path }),
|
|
6388
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolution })
|
|
6216
6389
|
] }),
|
|
6217
|
-
/* @__PURE__ */ (0,
|
|
6218
|
-
/* @__PURE__ */ (0,
|
|
6219
|
-
/* @__PURE__ */ (0,
|
|
6390
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { role: "region", "aria-label": `${labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}`} value for ${entry.path}`, children: [
|
|
6391
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("strong", { children: labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}` }),
|
|
6392
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("pre", { children: renderValue(entry[version]) })
|
|
6220
6393
|
] }, version)) }),
|
|
6221
|
-
/* @__PURE__ */ (0,
|
|
6222
|
-
/* @__PURE__ */ (0,
|
|
6223
|
-
/* @__PURE__ */ (0,
|
|
6224
|
-
/* @__PURE__ */ (0,
|
|
6394
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uix-diff-viewer__actions", "aria-label": `Resolve ${entry.path}`, children: [
|
|
6395
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", "aria-pressed": resolution === "accept", onClick: () => resolve2(entry.path, "accept"), children: "Accept incoming" }),
|
|
6396
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", "aria-pressed": resolution === "skip", onClick: () => resolve2(entry.path, "skip"), children: "Keep current" }),
|
|
6397
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", "aria-pressed": resolution === "pending", onClick: () => resolve2(entry.path, "pending"), children: "Mark pending" })
|
|
6225
6398
|
] })
|
|
6226
6399
|
] }, entry.path);
|
|
6227
6400
|
})
|
|
6228
6401
|
] }, group.kind);
|
|
6229
6402
|
}),
|
|
6230
|
-
/* @__PURE__ */ (0,
|
|
6403
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: [
|
|
6231
6404
|
summary.resolved,
|
|
6232
6405
|
" of ",
|
|
6233
6406
|
entries.length,
|
|
@@ -6267,6 +6440,7 @@ function DiffViewer({
|
|
|
6267
6440
|
ConfirmDialog,
|
|
6268
6441
|
ContentList,
|
|
6269
6442
|
ContentListItem,
|
|
6443
|
+
CopyButton,
|
|
6270
6444
|
DEFAULT_RELATIONSHIP_GRAPH_LABELS,
|
|
6271
6445
|
DEFAULT_SAVE_STATUS_LABELS,
|
|
6272
6446
|
DateRangePicker,
|