@tensor_1/react 2.15.0 → 2.16.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 +5 -0
- package/dist/ChartCore-Do6gRBN3.d.cts +44 -0
- package/dist/chart-preset.cjs +41 -9
- package/dist/chart-preset.d.cts +2 -2
- package/dist/chart-preset.d.ts +1 -1
- package/dist/chart-preset.js +4 -1
- package/dist/chart.cjs +41 -9
- package/dist/chart.d.cts +2 -2
- package/dist/chart.d.ts +1 -1
- package/dist/chart.js +4 -1
- package/dist/components/Chart.d.ts +1 -1
- package/dist/components/Chart.js +4 -1
- package/dist/components/ChartCore.d.ts +24 -3
- package/dist/components/ChartCore.js +38 -9
- package/dist/components/Flow.d.ts +26 -0
- package/dist/components/Flow.js +48 -0
- package/dist/components/Pipeline.d.ts +25 -0
- package/dist/components/Pipeline.js +65 -0
- package/dist/index.cjs +589 -474
- package/dist/index.d.cts +44 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +6 -0
- package/package.json +1 -1
- package/dist/ChartCore-Bt1C84ty.d.cts +0 -22
package/dist/index.cjs
CHANGED
|
@@ -67,6 +67,8 @@ __export(src_exports, {
|
|
|
67
67
|
Field: () => Field,
|
|
68
68
|
FilterPopover: () => FilterPopover,
|
|
69
69
|
FilteredEmptyState: () => FilteredEmptyState,
|
|
70
|
+
Flow: () => Flow,
|
|
71
|
+
FlowNode: () => FlowNode,
|
|
70
72
|
ForbiddenState: () => ForbiddenState,
|
|
71
73
|
Highlighted: () => Highlighted,
|
|
72
74
|
Inbox: () => Inbox,
|
|
@@ -99,6 +101,8 @@ __export(src_exports, {
|
|
|
99
101
|
PageIntro: () => PageIntro,
|
|
100
102
|
Pagination: () => Pagination,
|
|
101
103
|
Peek: () => Peek,
|
|
104
|
+
Pipeline: () => Pipeline,
|
|
105
|
+
PipelineStage: () => PipelineStage,
|
|
102
106
|
Popover: () => Popover,
|
|
103
107
|
Progress: () => Progress,
|
|
104
108
|
PromptDialog: () => PromptDialog,
|
|
@@ -2449,21 +2453,128 @@ function TimelineItem({ node, meta, children, className, ...props }) {
|
|
|
2449
2453
|
] });
|
|
2450
2454
|
}
|
|
2451
2455
|
|
|
2452
|
-
// src/components/
|
|
2456
|
+
// src/components/Pipeline.tsx
|
|
2457
|
+
var import_react27 = require("react");
|
|
2453
2458
|
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2459
|
+
function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
|
|
2460
|
+
const stages = detailed ? import_react27.Children.map(children, (child) => (0, import_react27.isValidElement)(child) && child.type === PipelineStage ? (0, import_react27.cloneElement)(child, { detailed: child.props.detailed ?? true }) : child) : children;
|
|
2461
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2462
|
+
"ol",
|
|
2463
|
+
{
|
|
2464
|
+
className: cx("uix-pipeline", detailed && "uix-pipeline--detailed", className),
|
|
2465
|
+
tabIndex: tabIndex ?? (detailed ? 0 : void 0),
|
|
2466
|
+
...props,
|
|
2467
|
+
children: stages
|
|
2468
|
+
}
|
|
2469
|
+
);
|
|
2470
|
+
}
|
|
2471
|
+
var DEFAULT_STATE_LABELS = {
|
|
2472
|
+
pending: "Pending",
|
|
2473
|
+
waiting: "Waiting",
|
|
2474
|
+
active: "Active",
|
|
2475
|
+
current: "Current",
|
|
2476
|
+
running: "Running",
|
|
2477
|
+
done: "Done",
|
|
2478
|
+
complete: "Complete",
|
|
2479
|
+
blocked: "Blocked",
|
|
2480
|
+
failed: "Failed",
|
|
2481
|
+
error: "Error"
|
|
2482
|
+
};
|
|
2483
|
+
function PipelineStage({
|
|
2484
|
+
label,
|
|
2485
|
+
state = "pending",
|
|
2486
|
+
stateLabel: stateLabel2,
|
|
2487
|
+
description,
|
|
2488
|
+
meta,
|
|
2489
|
+
marker,
|
|
2490
|
+
detailed = false,
|
|
2491
|
+
current: currentProp,
|
|
2492
|
+
className,
|
|
2493
|
+
...props
|
|
2494
|
+
}) {
|
|
2495
|
+
const current = currentProp ?? (state === "active" || state === "current" || state === "running");
|
|
2496
|
+
const resolvedStateLabel = stateLabel2 ?? DEFAULT_STATE_LABELS[state];
|
|
2497
|
+
const showDetails = detailed || description != null || meta != null || marker != null;
|
|
2498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2499
|
+
"li",
|
|
2500
|
+
{
|
|
2501
|
+
className: cx("uix-pipeline__stage", className),
|
|
2502
|
+
"data-state": state,
|
|
2503
|
+
"aria-current": current ? "step" : void 0,
|
|
2504
|
+
...props,
|
|
2505
|
+
children: showDetails ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
|
|
2506
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
|
|
2507
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-pipeline__content", children: [
|
|
2508
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
|
|
2509
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__title", children: label }),
|
|
2510
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__description", children: description }),
|
|
2511
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__meta", children: meta })
|
|
2512
|
+
] })
|
|
2513
|
+
] }) : label
|
|
2514
|
+
}
|
|
2515
|
+
);
|
|
2516
|
+
}
|
|
2517
|
+
|
|
2518
|
+
// src/components/Flow.tsx
|
|
2519
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2520
|
+
function Flow({ variant = "linear", panel = false, children, className, role = "group", ...props }) {
|
|
2521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2522
|
+
"div",
|
|
2523
|
+
{
|
|
2524
|
+
className: cx("uix-flow", `uix-flow--${variant}`, panel && "uix-flow--panel", className),
|
|
2525
|
+
role,
|
|
2526
|
+
...props,
|
|
2527
|
+
children
|
|
2528
|
+
}
|
|
2529
|
+
);
|
|
2530
|
+
}
|
|
2531
|
+
var FLOW_STATE_LABELS = {
|
|
2532
|
+
pending: "Pending",
|
|
2533
|
+
active: "Active",
|
|
2534
|
+
running: "Running",
|
|
2535
|
+
done: "Done",
|
|
2536
|
+
error: "Error"
|
|
2537
|
+
};
|
|
2538
|
+
function FlowNode({
|
|
2539
|
+
title,
|
|
2540
|
+
state = "pending",
|
|
2541
|
+
stateLabel: stateLabel2,
|
|
2542
|
+
eyebrow,
|
|
2543
|
+
meta,
|
|
2544
|
+
icon,
|
|
2545
|
+
footer,
|
|
2546
|
+
wide = false,
|
|
2547
|
+
className,
|
|
2548
|
+
...props
|
|
2549
|
+
}) {
|
|
2550
|
+
const resolvedStateLabel = stateLabel2 ?? FLOW_STATE_LABELS[state];
|
|
2551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cx("uix-node", `uix-node--${state}`, icon == null && "uix-node--no-icon", wide && "uix-node--wide", className), ...props, children: [
|
|
2552
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "uix-node__icon", "aria-hidden": "true", children: icon }),
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-node__body", children: [
|
|
2554
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__eyebrow", children: eyebrow }),
|
|
2555
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__title", children: title }),
|
|
2556
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__meta", children: meta }),
|
|
2557
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__status", children: resolvedStateLabel })
|
|
2558
|
+
] }),
|
|
2559
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__footer", children: footer })
|
|
2560
|
+
] });
|
|
2561
|
+
}
|
|
2562
|
+
|
|
2563
|
+
// src/components/Prose.tsx
|
|
2564
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2454
2565
|
function Prose({ children, className, ...props }) {
|
|
2455
|
-
return /* @__PURE__ */ (0,
|
|
2566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cx("uix-prose", className), ...props, children });
|
|
2456
2567
|
}
|
|
2457
2568
|
function Note({ tone, icon, children, className, ...props }) {
|
|
2458
|
-
return /* @__PURE__ */ (0,
|
|
2459
|
-
icon != null && /* @__PURE__ */ (0,
|
|
2460
|
-
/* @__PURE__ */ (0,
|
|
2569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
|
|
2570
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-note__icon", children: icon }),
|
|
2571
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-note__body", children })
|
|
2461
2572
|
] });
|
|
2462
2573
|
}
|
|
2463
2574
|
|
|
2464
2575
|
// src/components/Popover.tsx
|
|
2465
|
-
var
|
|
2466
|
-
var
|
|
2576
|
+
var import_react28 = require("react");
|
|
2577
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
2467
2578
|
function Popover({
|
|
2468
2579
|
popover = "auto",
|
|
2469
2580
|
anchor,
|
|
@@ -2473,15 +2584,15 @@ function Popover({
|
|
|
2473
2584
|
children,
|
|
2474
2585
|
...props
|
|
2475
2586
|
}) {
|
|
2476
|
-
const ref = (0,
|
|
2477
|
-
const [open, setOpen] = (0,
|
|
2587
|
+
const ref = (0, import_react28.useRef)(null);
|
|
2588
|
+
const [open, setOpen] = (0, import_react28.useState)(false);
|
|
2478
2589
|
const popoverAttr = { popover };
|
|
2479
2590
|
const reposition = useAnchoredPosition(anchor ?? null, ref, {
|
|
2480
2591
|
open: open && !!anchor,
|
|
2481
2592
|
placement,
|
|
2482
2593
|
offset
|
|
2483
2594
|
});
|
|
2484
|
-
(0,
|
|
2595
|
+
(0, import_react28.useEffect)(() => {
|
|
2485
2596
|
const el = ref.current;
|
|
2486
2597
|
if (!el || !anchor) return;
|
|
2487
2598
|
const sync = () => {
|
|
@@ -2492,38 +2603,38 @@ function Popover({
|
|
|
2492
2603
|
el.addEventListener("toggle", sync);
|
|
2493
2604
|
return () => el.removeEventListener("toggle", sync);
|
|
2494
2605
|
}, [anchor, reposition]);
|
|
2495
|
-
return /* @__PURE__ */ (0,
|
|
2606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
|
|
2496
2607
|
}
|
|
2497
2608
|
|
|
2498
2609
|
// src/components/CommandPalette.tsx
|
|
2499
|
-
var
|
|
2610
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
2500
2611
|
function CommandPalette({ inputProps, children, className, ...props }) {
|
|
2501
|
-
return /* @__PURE__ */ (0,
|
|
2502
|
-
/* @__PURE__ */ (0,
|
|
2503
|
-
/* @__PURE__ */ (0,
|
|
2612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
|
|
2613
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
|
|
2614
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__list", children })
|
|
2504
2615
|
] });
|
|
2505
2616
|
}
|
|
2506
2617
|
function CommandGroup({ label, children }) {
|
|
2507
|
-
return /* @__PURE__ */ (0,
|
|
2508
|
-
label != null && /* @__PURE__ */ (0,
|
|
2618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
|
|
2619
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__group", children: label }),
|
|
2509
2620
|
children
|
|
2510
2621
|
] });
|
|
2511
2622
|
}
|
|
2512
2623
|
function CommandItem({ icon, shortcut, active, children, className, ...props }) {
|
|
2513
|
-
return /* @__PURE__ */ (0,
|
|
2624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
|
|
2514
2625
|
icon,
|
|
2515
|
-
/* @__PURE__ */ (0,
|
|
2626
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children }),
|
|
2516
2627
|
shortcut
|
|
2517
2628
|
] });
|
|
2518
2629
|
}
|
|
2519
2630
|
|
|
2520
2631
|
// src/components/Inbox.tsx
|
|
2521
|
-
var
|
|
2632
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
2522
2633
|
function Inbox({ children, className, ...props }) {
|
|
2523
|
-
return /* @__PURE__ */ (0,
|
|
2634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
|
|
2524
2635
|
}
|
|
2525
2636
|
function InboxList({ children, className, ...props }) {
|
|
2526
|
-
return /* @__PURE__ */ (0,
|
|
2637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
|
|
2527
2638
|
}
|
|
2528
2639
|
function InboxItem({
|
|
2529
2640
|
subject,
|
|
@@ -2535,7 +2646,7 @@ function InboxItem({
|
|
|
2535
2646
|
className,
|
|
2536
2647
|
...props
|
|
2537
2648
|
}) {
|
|
2538
|
-
return /* @__PURE__ */ (0,
|
|
2649
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
2539
2650
|
"div",
|
|
2540
2651
|
{
|
|
2541
2652
|
role: "option",
|
|
@@ -2545,41 +2656,41 @@ function InboxItem({
|
|
|
2545
2656
|
...props,
|
|
2546
2657
|
children: [
|
|
2547
2658
|
leading,
|
|
2548
|
-
subject != null && /* @__PURE__ */ (0,
|
|
2549
|
-
preview != null && /* @__PURE__ */ (0,
|
|
2659
|
+
subject != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-inbox__subject", children: subject }),
|
|
2660
|
+
preview != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-inbox__preview", children: preview }),
|
|
2550
2661
|
children
|
|
2551
2662
|
]
|
|
2552
2663
|
}
|
|
2553
2664
|
);
|
|
2554
2665
|
}
|
|
2555
2666
|
function InboxDetail({ children, className, ...props }) {
|
|
2556
|
-
return /* @__PURE__ */ (0,
|
|
2667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox__detail", className), ...props, children });
|
|
2557
2668
|
}
|
|
2558
2669
|
|
|
2559
2670
|
// src/components/Kanban.tsx
|
|
2560
|
-
var
|
|
2671
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
2561
2672
|
function Kanban({ children, className, ...props }) {
|
|
2562
|
-
return /* @__PURE__ */ (0,
|
|
2673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
|
|
2563
2674
|
}
|
|
2564
2675
|
function KanbanColumn({ title, count, children, className, ...props }) {
|
|
2565
|
-
return /* @__PURE__ */ (0,
|
|
2566
|
-
(title != null || count != null) && /* @__PURE__ */ (0,
|
|
2676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
|
|
2677
|
+
(title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uix-kanban__head", children: [
|
|
2567
2678
|
title,
|
|
2568
|
-
count != null && /* @__PURE__ */ (0,
|
|
2679
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "uix-kanban__count", children: count })
|
|
2569
2680
|
] }),
|
|
2570
|
-
/* @__PURE__ */ (0,
|
|
2681
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__body", children })
|
|
2571
2682
|
] });
|
|
2572
2683
|
}
|
|
2573
2684
|
function KanbanCard({ title, meta, children, className, ...props }) {
|
|
2574
|
-
return /* @__PURE__ */ (0,
|
|
2575
|
-
title && /* @__PURE__ */ (0,
|
|
2576
|
-
meta && /* @__PURE__ */ (0,
|
|
2685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
|
|
2686
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-title", children: title }),
|
|
2687
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
|
|
2577
2688
|
children
|
|
2578
2689
|
] });
|
|
2579
2690
|
}
|
|
2580
2691
|
|
|
2581
2692
|
// src/components/Tree.tsx
|
|
2582
|
-
var
|
|
2693
|
+
var import_react29 = require("react");
|
|
2583
2694
|
|
|
2584
2695
|
// src/tree-model.ts
|
|
2585
2696
|
function flattenTree(nodes, expanded, level = 1) {
|
|
@@ -2629,12 +2740,12 @@ function treeNav(flat, currentId, key) {
|
|
|
2629
2740
|
}
|
|
2630
2741
|
|
|
2631
2742
|
// src/components/Tree.tsx
|
|
2632
|
-
var
|
|
2633
|
-
var ChevronIcon2 = () => /* @__PURE__ */ (0,
|
|
2743
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
2744
|
+
var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
2634
2745
|
function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1 }) {
|
|
2635
2746
|
const hasChildren = Array.isArray(node.children) && node.children.length > 0;
|
|
2636
2747
|
const isExpanded = expanded.has(node.id);
|
|
2637
|
-
return /* @__PURE__ */ (0,
|
|
2748
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
2638
2749
|
"li",
|
|
2639
2750
|
{
|
|
2640
2751
|
role: "treeitem",
|
|
@@ -2654,12 +2765,12 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
|
|
|
2654
2765
|
onFocusNode(node.id);
|
|
2655
2766
|
},
|
|
2656
2767
|
children: [
|
|
2657
|
-
/* @__PURE__ */ (0,
|
|
2658
|
-
/* @__PURE__ */ (0,
|
|
2659
|
-
node.icon && /* @__PURE__ */ (0,
|
|
2660
|
-
/* @__PURE__ */ (0,
|
|
2768
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "uix-tree__row", children: [
|
|
2769
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronIcon2, {}) }),
|
|
2770
|
+
node.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": "true", children: node.icon }),
|
|
2771
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__label", children: node.label })
|
|
2661
2772
|
] }),
|
|
2662
|
-
hasChildren && isExpanded && /* @__PURE__ */ (0,
|
|
2773
|
+
hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { role: "group", className: "uix-tree__group", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2663
2774
|
TreeNode,
|
|
2664
2775
|
{
|
|
2665
2776
|
node: child,
|
|
@@ -2691,12 +2802,12 @@ function Tree({
|
|
|
2691
2802
|
className,
|
|
2692
2803
|
...props
|
|
2693
2804
|
}) {
|
|
2694
|
-
const [internalExpanded, setInternalExpanded] = (0,
|
|
2805
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react29.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
|
|
2695
2806
|
const expanded = controlledExpanded ?? internalExpanded;
|
|
2696
|
-
const rootRef = (0,
|
|
2697
|
-
const [focusedId, setFocusedId] = (0,
|
|
2807
|
+
const rootRef = (0, import_react29.useRef)(null);
|
|
2808
|
+
const [focusedId, setFocusedId] = (0, import_react29.useState)(void 0);
|
|
2698
2809
|
const selectable = selected !== void 0 || onSelect != null;
|
|
2699
|
-
const handleToggle = (0,
|
|
2810
|
+
const handleToggle = (0, import_react29.useCallback)((id) => {
|
|
2700
2811
|
if (!controlledExpanded) {
|
|
2701
2812
|
setInternalExpanded((prev) => {
|
|
2702
2813
|
const next = new Set(prev);
|
|
@@ -2707,11 +2818,11 @@ function Tree({
|
|
|
2707
2818
|
}
|
|
2708
2819
|
onToggle?.(id);
|
|
2709
2820
|
}, [controlledExpanded, onToggle]);
|
|
2710
|
-
const flat = (0,
|
|
2821
|
+
const flat = (0, import_react29.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
|
|
2711
2822
|
const useVirtual = virtualize ?? shouldVirtualize(flat.length);
|
|
2712
2823
|
const tabbableId = focusedId ?? selected ?? nodes[0]?.id;
|
|
2713
2824
|
if (useVirtual) {
|
|
2714
|
-
return /* @__PURE__ */ (0,
|
|
2825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2715
2826
|
VirtualTreeView,
|
|
2716
2827
|
{
|
|
2717
2828
|
flat,
|
|
@@ -2781,7 +2892,7 @@ function Tree({
|
|
|
2781
2892
|
break;
|
|
2782
2893
|
}
|
|
2783
2894
|
};
|
|
2784
|
-
return /* @__PURE__ */ (0,
|
|
2895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { ref: rootRef, className: cx("uix-tree", className), role: "tree", onKeyDown, ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2785
2896
|
TreeNode,
|
|
2786
2897
|
{
|
|
2787
2898
|
node,
|
|
@@ -2811,12 +2922,12 @@ function VirtualTreeView({
|
|
|
2811
2922
|
className,
|
|
2812
2923
|
...props
|
|
2813
2924
|
}) {
|
|
2814
|
-
const scrollRef = (0,
|
|
2815
|
-
const [scrollTop, setScrollTop] = (0,
|
|
2816
|
-
const pendingFocus = (0,
|
|
2925
|
+
const scrollRef = (0, import_react29.useRef)(null);
|
|
2926
|
+
const [scrollTop, setScrollTop] = (0, import_react29.useState)(0);
|
|
2927
|
+
const pendingFocus = (0, import_react29.useRef)(false);
|
|
2817
2928
|
const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
|
|
2818
2929
|
const rows = flat.slice(win.start, win.end);
|
|
2819
|
-
(0,
|
|
2930
|
+
(0, import_react29.useEffect)(() => {
|
|
2820
2931
|
if (!pendingFocus.current || focusedId == null) return;
|
|
2821
2932
|
const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
|
|
2822
2933
|
if (el) {
|
|
@@ -2853,7 +2964,7 @@ function VirtualTreeView({
|
|
|
2853
2964
|
}
|
|
2854
2965
|
if (act.focusId !== void 0) moveTo(act.focusId);
|
|
2855
2966
|
};
|
|
2856
|
-
return /* @__PURE__ */ (0,
|
|
2967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
2857
2968
|
"ul",
|
|
2858
2969
|
{
|
|
2859
2970
|
ref: scrollRef,
|
|
@@ -2864,10 +2975,10 @@ function VirtualTreeView({
|
|
|
2864
2975
|
onKeyDown,
|
|
2865
2976
|
...props,
|
|
2866
2977
|
children: [
|
|
2867
|
-
win.padTop > 0 && /* @__PURE__ */ (0,
|
|
2978
|
+
win.padTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { "aria-hidden": "true", style: { height: win.padTop } }),
|
|
2868
2979
|
rows.map((f) => {
|
|
2869
2980
|
const rowStyle = { height: rowHeight, paddingLeft: `calc(${f.level - 1} * var(--uix-space-5))` };
|
|
2870
|
-
return /* @__PURE__ */ (0,
|
|
2981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2871
2982
|
"li",
|
|
2872
2983
|
{
|
|
2873
2984
|
role: "treeitem",
|
|
@@ -2888,23 +2999,23 @@ function VirtualTreeView({
|
|
|
2888
2999
|
onSelect?.(f.node.id);
|
|
2889
3000
|
setFocusedId(f.node.id);
|
|
2890
3001
|
},
|
|
2891
|
-
children: /* @__PURE__ */ (0,
|
|
2892
|
-
/* @__PURE__ */ (0,
|
|
2893
|
-
f.node.icon && /* @__PURE__ */ (0,
|
|
2894
|
-
/* @__PURE__ */ (0,
|
|
3002
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "uix-tree__row", style: rowStyle, children: [
|
|
3003
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__toggle", children: f.hasChildren && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronIcon2, {}) }),
|
|
3004
|
+
f.node.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": "true", children: f.node.icon }),
|
|
3005
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__label", children: f.node.label })
|
|
2895
3006
|
] })
|
|
2896
3007
|
},
|
|
2897
3008
|
f.node.id
|
|
2898
3009
|
);
|
|
2899
3010
|
}),
|
|
2900
|
-
win.padBottom > 0 && /* @__PURE__ */ (0,
|
|
3011
|
+
win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { "aria-hidden": "true", style: { height: win.padBottom } })
|
|
2901
3012
|
]
|
|
2902
3013
|
}
|
|
2903
3014
|
);
|
|
2904
3015
|
}
|
|
2905
3016
|
|
|
2906
3017
|
// src/components/EditorialHome.tsx
|
|
2907
|
-
var
|
|
3018
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
2908
3019
|
function PageIntro({
|
|
2909
3020
|
kicker,
|
|
2910
3021
|
title,
|
|
@@ -2917,39 +3028,39 @@ function PageIntro({
|
|
|
2917
3028
|
children,
|
|
2918
3029
|
...props
|
|
2919
3030
|
}) {
|
|
2920
|
-
return /* @__PURE__ */ (0,
|
|
2921
|
-
/* @__PURE__ */ (0,
|
|
2922
|
-
kicker != null && /* @__PURE__ */ (0,
|
|
2923
|
-
/* @__PURE__ */ (0,
|
|
2924
|
-
lede != null && /* @__PURE__ */ (0,
|
|
3031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("section", { className: cx("uix-page-intro", className), ...props, children: [
|
|
3032
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3033
|
+
kicker != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-page-kicker", children: kicker }),
|
|
3034
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h1", { className: "uix-page-title", children: title }),
|
|
3035
|
+
lede != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-page-lede", children: lede })
|
|
2925
3036
|
] }),
|
|
2926
|
-
search != null && /* @__PURE__ */ (0,
|
|
2927
|
-
searchLabel != null && /* @__PURE__ */ (0,
|
|
3037
|
+
search != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3038
|
+
searchLabel != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-intro-search__label", children: searchLabel }),
|
|
2928
3039
|
search
|
|
2929
3040
|
] }),
|
|
2930
|
-
shortcuts != null && /* @__PURE__ */ (0,
|
|
3041
|
+
shortcuts != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uix-shortcut-grid", "aria-label": shortcutsLabel, children: shortcuts }),
|
|
2931
3042
|
children
|
|
2932
3043
|
] });
|
|
2933
3044
|
}
|
|
2934
3045
|
function SectionHead({ title, titleId, action, className, ...props }) {
|
|
2935
|
-
return /* @__PURE__ */ (0,
|
|
2936
|
-
/* @__PURE__ */ (0,
|
|
3046
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-section-head", className), ...props, children: [
|
|
3047
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h2", { className: "uix-section-title", id: titleId, children: title }),
|
|
2937
3048
|
action
|
|
2938
3049
|
] });
|
|
2939
3050
|
}
|
|
2940
3051
|
function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }) {
|
|
2941
|
-
return /* @__PURE__ */ (0,
|
|
3052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("section", { className: cx("uix-notice", className), ...props, children: [
|
|
2942
3053
|
icon,
|
|
2943
|
-
/* @__PURE__ */ (0,
|
|
2944
|
-
/* @__PURE__ */ (0,
|
|
2945
|
-
title != null && /* @__PURE__ */ (0,
|
|
3054
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-notice__content", "aria-live": "polite", children: [
|
|
3055
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "uix-notice__copy", children: [
|
|
3056
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("strong", { children: title }),
|
|
2946
3057
|
title != null && summary != null && " ",
|
|
2947
3058
|
summary
|
|
2948
3059
|
] }),
|
|
2949
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3060
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-notice__meta", children: meta })
|
|
2950
3061
|
] }),
|
|
2951
|
-
(position != null || actions != null) && /* @__PURE__ */ (0,
|
|
2952
|
-
position != null && /* @__PURE__ */ (0,
|
|
3062
|
+
(position != null || actions != null) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-notice__actions", children: [
|
|
3063
|
+
position != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-notice__position", children: position }),
|
|
2953
3064
|
actions
|
|
2954
3065
|
] })
|
|
2955
3066
|
] });
|
|
@@ -2967,8 +3078,8 @@ function FeaturedStage({
|
|
|
2967
3078
|
className,
|
|
2968
3079
|
...props
|
|
2969
3080
|
}) {
|
|
2970
|
-
return /* @__PURE__ */ (0,
|
|
2971
|
-
/* @__PURE__ */ (0,
|
|
3081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("article", { className: cx("uix-featured__stage", className), ...props, children: [
|
|
3082
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
2972
3083
|
"div",
|
|
2973
3084
|
{
|
|
2974
3085
|
className: "uix-featured__visual",
|
|
@@ -2978,32 +3089,32 @@ function FeaturedStage({
|
|
|
2978
3089
|
children: visual
|
|
2979
3090
|
}
|
|
2980
3091
|
),
|
|
2981
|
-
/* @__PURE__ */ (0,
|
|
2982
|
-
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0,
|
|
2983
|
-
ordinal != null && /* @__PURE__ */ (0,
|
|
3092
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-featured__content", "aria-live": "polite", children: [
|
|
3093
|
+
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "uix-featured__eyebrow", children: [
|
|
3094
|
+
ordinal != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-featured__now", children: ordinal }),
|
|
2984
3095
|
eyebrow
|
|
2985
3096
|
] }),
|
|
2986
|
-
/* @__PURE__ */ (0,
|
|
2987
|
-
description != null && /* @__PURE__ */ (0,
|
|
2988
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3097
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h2", { className: "uix-featured__title", id: titleId, children: title }),
|
|
3098
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-featured__description", children: description }),
|
|
3099
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-featured__meta", children: meta }),
|
|
2989
3100
|
action
|
|
2990
3101
|
] })
|
|
2991
3102
|
] });
|
|
2992
3103
|
}
|
|
2993
3104
|
function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }) {
|
|
2994
|
-
return /* @__PURE__ */ (0,
|
|
2995
|
-
/* @__PURE__ */ (0,
|
|
2996
|
-
/* @__PURE__ */ (0,
|
|
2997
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
2998
|
-
/* @__PURE__ */ (0,
|
|
3105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("aside", { className: cx("uix-rundown", className), ...props, children: [
|
|
3106
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-rundown__head", children: [
|
|
3107
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3108
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-rundown__eyebrow", children: eyebrow }),
|
|
3109
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h2", { className: "uix-rundown__title", id: titleId, children: title })
|
|
2999
3110
|
] }),
|
|
3000
3111
|
meta
|
|
3001
3112
|
] }),
|
|
3002
|
-
/* @__PURE__ */ (0,
|
|
3113
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uix-rundown__items", children })
|
|
3003
3114
|
] });
|
|
3004
3115
|
}
|
|
3005
3116
|
function FeaturedRundownItem({ number, topic, title, selected = false, className, ...props }) {
|
|
3006
|
-
return /* @__PURE__ */ (0,
|
|
3117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
3007
3118
|
"button",
|
|
3008
3119
|
{
|
|
3009
3120
|
type: "button",
|
|
@@ -3012,63 +3123,63 @@ function FeaturedRundownItem({ number, topic, title, selected = false, className
|
|
|
3012
3123
|
"data-selected": selected ? "true" : "false",
|
|
3013
3124
|
...props,
|
|
3014
3125
|
children: [
|
|
3015
|
-
number != null && /* @__PURE__ */ (0,
|
|
3016
|
-
/* @__PURE__ */ (0,
|
|
3017
|
-
topic != null && /* @__PURE__ */ (0,
|
|
3018
|
-
/* @__PURE__ */ (0,
|
|
3126
|
+
number != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-rundown__number", children: number }),
|
|
3127
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { children: [
|
|
3128
|
+
topic != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-rundown__topic", children: topic }),
|
|
3129
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-rundown__item-title", children: title })
|
|
3019
3130
|
] })
|
|
3020
3131
|
]
|
|
3021
3132
|
}
|
|
3022
3133
|
);
|
|
3023
3134
|
}
|
|
3024
3135
|
function NewsLead({ meta, title, summary, className, ...props }) {
|
|
3025
|
-
return /* @__PURE__ */ (0,
|
|
3026
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3027
|
-
/* @__PURE__ */ (0,
|
|
3028
|
-
summary != null && /* @__PURE__ */ (0,
|
|
3136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("article", { className: cx("uix-news-lead", className), ...props, children: [
|
|
3137
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-news-lead__meta", children: meta }),
|
|
3138
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "uix-news-lead__title", children: title }),
|
|
3139
|
+
summary != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-news-lead__summary", children: summary })
|
|
3029
3140
|
] });
|
|
3030
3141
|
}
|
|
3031
3142
|
function ContentList({ children, className, ...props }) {
|
|
3032
|
-
return /* @__PURE__ */ (0,
|
|
3143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: cx("uix-content-list", className), ...props, children });
|
|
3033
3144
|
}
|
|
3034
3145
|
function ContentListItem({ title, meta, trailing, className, ...props }) {
|
|
3035
|
-
return /* @__PURE__ */ (0,
|
|
3036
|
-
/* @__PURE__ */ (0,
|
|
3037
|
-
/* @__PURE__ */ (0,
|
|
3038
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { className: cx("uix-content-list__item", className), ...props, children: [
|
|
3147
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3148
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-content-list__title", children: title }),
|
|
3149
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-content-list__meta", children: meta })
|
|
3039
3150
|
] }),
|
|
3040
3151
|
trailing
|
|
3041
3152
|
] });
|
|
3042
3153
|
}
|
|
3043
3154
|
function ResourceGrid({ children, className, ...props }) {
|
|
3044
|
-
return /* @__PURE__ */ (0,
|
|
3155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cx("uix-resource-grid", className), ...props, children });
|
|
3045
3156
|
}
|
|
3046
3157
|
function StatLine({ items, children, className, ...props }) {
|
|
3047
|
-
return /* @__PURE__ */ (0,
|
|
3048
|
-
items?.map((item, i) => /* @__PURE__ */ (0,
|
|
3049
|
-
/* @__PURE__ */ (0,
|
|
3050
|
-
/* @__PURE__ */ (0,
|
|
3158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-stat-line", className), ...props, children: [
|
|
3159
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-stat-line__item", children: [
|
|
3160
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-stat-line__value", children: item.value }),
|
|
3161
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-stat-line__label", children: item.label })
|
|
3051
3162
|
] }, item.id ?? i)),
|
|
3052
3163
|
children
|
|
3053
3164
|
] });
|
|
3054
3165
|
}
|
|
3055
3166
|
function EventRow({ month, day, title, meta, className, ...props }) {
|
|
3056
|
-
return /* @__PURE__ */ (0,
|
|
3057
|
-
/* @__PURE__ */ (0,
|
|
3058
|
-
/* @__PURE__ */ (0,
|
|
3059
|
-
/* @__PURE__ */ (0,
|
|
3167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-event-row", className), ...props, children: [
|
|
3168
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-event-date", children: [
|
|
3169
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-event-date__month", children: month }),
|
|
3170
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-event-date__day", children: day })
|
|
3060
3171
|
] }),
|
|
3061
|
-
/* @__PURE__ */ (0,
|
|
3062
|
-
/* @__PURE__ */ (0,
|
|
3063
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3172
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3173
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-event-row__title", children: title }),
|
|
3174
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-event-row__meta", children: meta })
|
|
3064
3175
|
] })
|
|
3065
3176
|
] });
|
|
3066
3177
|
}
|
|
3067
3178
|
function StatusRow({ indicator, name, meta, className, ...props }) {
|
|
3068
|
-
return /* @__PURE__ */ (0,
|
|
3179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-status-row", className), ...props, children: [
|
|
3069
3180
|
indicator,
|
|
3070
|
-
/* @__PURE__ */ (0,
|
|
3071
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3181
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-status-row__name", children: name }),
|
|
3182
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-list-meta", children: meta })
|
|
3072
3183
|
] });
|
|
3073
3184
|
}
|
|
3074
3185
|
|
|
@@ -3165,7 +3276,7 @@ function summarizeRule(value, labels = {}) {
|
|
|
3165
3276
|
}
|
|
3166
3277
|
|
|
3167
3278
|
// src/components/RuleBuilder.tsx
|
|
3168
|
-
var
|
|
3279
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
3169
3280
|
var ruleId = 0;
|
|
3170
3281
|
var nextId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(++ruleId).toString(36)}`;
|
|
3171
3282
|
function defaultCondition(fields, operators) {
|
|
@@ -3181,21 +3292,21 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
3181
3292
|
combinator: "and",
|
|
3182
3293
|
conditions: [defaultCondition(fields, operators)]
|
|
3183
3294
|
}, maxDepth));
|
|
3184
|
-
return /* @__PURE__ */ (0,
|
|
3185
|
-
/* @__PURE__ */ (0,
|
|
3186
|
-
/* @__PURE__ */ (0,
|
|
3187
|
-
/* @__PURE__ */ (0,
|
|
3295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("fieldset", { className: "uix-rule-builder__group", "data-depth": depth, children: [
|
|
3296
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("legend", { className: "uix-rule-builder__group-heading", children: [
|
|
3297
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: depth === 1 ? "When" : "Group" }),
|
|
3298
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { children: [
|
|
3188
3299
|
"Match",
|
|
3189
|
-
/* @__PURE__ */ (0,
|
|
3190
|
-
/* @__PURE__ */ (0,
|
|
3191
|
-
/* @__PURE__ */ (0,
|
|
3300
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("select", { className: "uix-select uix-select--sm", value: group.combinator, disabled, onChange: (event) => updateNode(group.id, (node) => ({ ...node, combinator: event.currentTarget.value })), children: [
|
|
3301
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: "and", children: "all (AND)" }),
|
|
3302
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: "or", children: "any (OR)" })
|
|
3192
3303
|
] })
|
|
3193
3304
|
] })
|
|
3194
3305
|
] }),
|
|
3195
|
-
/* @__PURE__ */ (0,
|
|
3196
|
-
/* @__PURE__ */ (0,
|
|
3197
|
-
/* @__PURE__ */ (0,
|
|
3198
|
-
] }, node.id) : /* @__PURE__ */ (0,
|
|
3306
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uix-rule-builder__rows", children: group.conditions.map((node, index) => isRuleGroup(node) ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__nested", children: [
|
|
3307
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RuleGroupEditor, { ...{ group: node, depth: depth + 1, root, fields, operators, maxDepth, disabled, onRootChange, labels } }),
|
|
3308
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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)) })
|
|
3309
|
+
] }, node.id) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3199
3310
|
ConditionRow,
|
|
3200
3311
|
{
|
|
3201
3312
|
condition: node,
|
|
@@ -3203,13 +3314,13 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
3203
3314
|
operators,
|
|
3204
3315
|
disabled,
|
|
3205
3316
|
onChange: (condition) => updateNode(node.id, () => condition),
|
|
3206
|
-
controls: /* @__PURE__ */ (0,
|
|
3317
|
+
controls: /* @__PURE__ */ (0, import_jsx_runtime58.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)) })
|
|
3207
3318
|
},
|
|
3208
3319
|
node.id
|
|
3209
3320
|
)) }),
|
|
3210
|
-
/* @__PURE__ */ (0,
|
|
3211
|
-
/* @__PURE__ */ (0,
|
|
3212
|
-
/* @__PURE__ */ (0,
|
|
3321
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__add", children: [
|
|
3322
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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 }),
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: addGroup, disabled: disabled || depth >= maxDepth, children: labels.addGroup })
|
|
3213
3324
|
] })
|
|
3214
3325
|
] });
|
|
3215
3326
|
}
|
|
@@ -3222,24 +3333,24 @@ function ConditionRow({ condition, fields, operators, disabled, onChange, contro
|
|
|
3222
3333
|
const nextOperator = operators.find((item) => nextField?.operators?.includes(item.id)) ?? availableOperators[0] ?? operators[0];
|
|
3223
3334
|
onChange({ ...condition, field: id, operator: nextOperator?.id ?? "" });
|
|
3224
3335
|
};
|
|
3225
|
-
return /* @__PURE__ */ (0,
|
|
3226
|
-
/* @__PURE__ */ (0,
|
|
3227
|
-
/* @__PURE__ */ (0,
|
|
3228
|
-
/* @__PURE__ */ (0,
|
|
3336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__condition", children: [
|
|
3337
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { children: [
|
|
3338
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-visually-hidden", children: "Field" }),
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("select", { className: "uix-select", value: condition.field, onChange: (event) => setField(event.currentTarget.value), disabled, children: fields.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
3229
3340
|
] }),
|
|
3230
|
-
/* @__PURE__ */ (0,
|
|
3231
|
-
/* @__PURE__ */ (0,
|
|
3232
|
-
/* @__PURE__ */ (0,
|
|
3341
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { children: [
|
|
3342
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-visually-hidden", children: "Operator" }),
|
|
3343
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
3233
3344
|
] }),
|
|
3234
|
-
operator?.requiresValue !== false && /* @__PURE__ */ (0,
|
|
3345
|
+
operator?.requiresValue !== false && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ (0, import_jsx_runtime58.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"}` }) }),
|
|
3235
3346
|
controls
|
|
3236
3347
|
] });
|
|
3237
3348
|
}
|
|
3238
3349
|
function RowControls({ label, first, last, disabled, onUp, onDown, onRemove }) {
|
|
3239
|
-
return /* @__PURE__ */ (0,
|
|
3240
|
-
/* @__PURE__ */ (0,
|
|
3241
|
-
/* @__PURE__ */ (0,
|
|
3242
|
-
/* @__PURE__ */ (0,
|
|
3350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "uix-rule-builder__row-actions", children: [
|
|
3351
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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" }),
|
|
3352
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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" }),
|
|
3353
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onRemove, disabled, "aria-label": `Remove ${label}`, children: "Remove" })
|
|
3243
3354
|
] });
|
|
3244
3355
|
}
|
|
3245
3356
|
function RuleBuilder({
|
|
@@ -3260,9 +3371,9 @@ function RuleBuilder({
|
|
|
3260
3371
|
const fieldLabels = Object.fromEntries(fields.map((field) => [field.id, field.label]));
|
|
3261
3372
|
const operatorLabels = Object.fromEntries(operators.map((operator) => [operator.id, operator.label]));
|
|
3262
3373
|
const actionLabels = Object.fromEntries(actions.map((action) => [action.id, action.label]));
|
|
3263
|
-
if (readOnly) return /* @__PURE__ */ (0,
|
|
3264
|
-
/* @__PURE__ */ (0,
|
|
3265
|
-
issues.length > 0 && /* @__PURE__ */ (0,
|
|
3374
|
+
if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: cx("uix-rule-builder uix-rule-builder--summary", className), "aria-label": "Rule summary", children: [
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { children: summarizeRule(value, { fields: fieldLabels, operators: operatorLabels, actions: actionLabels }) }),
|
|
3376
|
+
issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("p", { className: "uix-rule-builder__invalid", children: [
|
|
3266
3377
|
"Rule has ",
|
|
3267
3378
|
issues.length,
|
|
3268
3379
|
" validation issue",
|
|
@@ -3271,16 +3382,16 @@ function RuleBuilder({
|
|
|
3271
3382
|
] })
|
|
3272
3383
|
] });
|
|
3273
3384
|
const updateActions = (next) => onChange({ ...value, then: next });
|
|
3274
|
-
return /* @__PURE__ */ (0,
|
|
3275
|
-
/* @__PURE__ */ (0,
|
|
3276
|
-
/* @__PURE__ */ (0,
|
|
3277
|
-
/* @__PURE__ */ (0,
|
|
3385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: cx("uix-rule-builder", className), "aria-label": "Rule builder", children: [
|
|
3386
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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 } }),
|
|
3387
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("fieldset", { className: "uix-rule-builder__actions", children: [
|
|
3388
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("legend", { children: "Then" }),
|
|
3278
3389
|
value.then.map((action, index) => {
|
|
3279
3390
|
const definition = actions.find((item) => item.id === action.type);
|
|
3280
|
-
return /* @__PURE__ */ (0,
|
|
3281
|
-
/* @__PURE__ */ (0,
|
|
3391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__action", children: [
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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_runtime58.jsx)("option", { value: item.id, children: item.label }, item.id)) }),
|
|
3282
3393
|
definition?.renderParameters?.(action, (parameters) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, parameters } : item)), false),
|
|
3283
|
-
/* @__PURE__ */ (0,
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
3284
3395
|
RowControls,
|
|
3285
3396
|
{
|
|
3286
3397
|
label: "action",
|
|
@@ -3302,22 +3413,22 @@ function RuleBuilder({
|
|
|
3302
3413
|
)
|
|
3303
3414
|
] }, action.id);
|
|
3304
3415
|
}),
|
|
3305
|
-
/* @__PURE__ */ (0,
|
|
3416
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.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 })
|
|
3306
3417
|
] }),
|
|
3307
|
-
/* @__PURE__ */ (0,
|
|
3308
|
-
/* @__PURE__ */ (0,
|
|
3418
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uix-rule-builder__validation", "aria-live": "polite", children: issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: "Rule is valid." }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
|
|
3419
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("strong", { children: [
|
|
3309
3420
|
issues.length,
|
|
3310
3421
|
" validation issue",
|
|
3311
3422
|
issues.length === 1 ? "" : "s"
|
|
3312
3423
|
] }),
|
|
3313
|
-
/* @__PURE__ */ (0,
|
|
3424
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { children: issues.map((issue, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("li", { children: issue.message }, `${issue.path}-${index}`)) })
|
|
3314
3425
|
] }) })
|
|
3315
3426
|
] });
|
|
3316
3427
|
}
|
|
3317
3428
|
|
|
3318
3429
|
// src/components/BuilderCanvas.tsx
|
|
3319
|
-
var
|
|
3320
|
-
var
|
|
3430
|
+
var import_react30 = require("react");
|
|
3431
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
3321
3432
|
function BuilderCanvas({
|
|
3322
3433
|
items,
|
|
3323
3434
|
onItemsChange,
|
|
@@ -3332,13 +3443,13 @@ function BuilderCanvas({
|
|
|
3332
3443
|
emptyMessage = "Add an item from the palette to begin.",
|
|
3333
3444
|
className
|
|
3334
3445
|
}) {
|
|
3335
|
-
const [internalSelectedId, setInternalSelectedId] = (0,
|
|
3336
|
-
const [draggedId, setDraggedId] = (0,
|
|
3337
|
-
const propertyHeadingRef = (0,
|
|
3338
|
-
const shouldFocusProperties = (0,
|
|
3446
|
+
const [internalSelectedId, setInternalSelectedId] = (0, import_react30.useState)();
|
|
3447
|
+
const [draggedId, setDraggedId] = (0, import_react30.useState)();
|
|
3448
|
+
const propertyHeadingRef = (0, import_react30.useRef)(null);
|
|
3449
|
+
const shouldFocusProperties = (0, import_react30.useRef)(false);
|
|
3339
3450
|
const selectedId = controlledSelectedId ?? internalSelectedId;
|
|
3340
3451
|
const selected = items.find((item) => item.id === selectedId);
|
|
3341
|
-
(0,
|
|
3452
|
+
(0, import_react30.useEffect)(() => {
|
|
3342
3453
|
if (shouldFocusProperties.current && selected) {
|
|
3343
3454
|
propertyHeadingRef.current?.focus();
|
|
3344
3455
|
shouldFocusProperties.current = false;
|
|
@@ -3372,27 +3483,27 @@ function BuilderCanvas({
|
|
|
3372
3483
|
if (from >= 0 && to >= 0) onItemsChange(reorder(items, from, to));
|
|
3373
3484
|
setDraggedId(void 0);
|
|
3374
3485
|
};
|
|
3375
|
-
return /* @__PURE__ */ (0,
|
|
3376
|
-
/* @__PURE__ */ (0,
|
|
3377
|
-
/* @__PURE__ */ (0,
|
|
3378
|
-
palette.length === 0 ? /* @__PURE__ */ (0,
|
|
3379
|
-
/* @__PURE__ */ (0,
|
|
3380
|
-
item.description && /* @__PURE__ */ (0,
|
|
3381
|
-
/* @__PURE__ */ (0,
|
|
3486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("section", { className: cx("uix-builder-canvas", className), "aria-label": "Builder canvas", children: [
|
|
3487
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("aside", { className: "uix-builder-canvas__palette", "aria-label": "Item palette", children: [
|
|
3488
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { children: "Palette" }),
|
|
3489
|
+
palette.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: "No item types available." }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ul", { children: palette.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", onClick: () => add(item), children: [
|
|
3490
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("strong", { children: item.label }),
|
|
3491
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: item.description }),
|
|
3492
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { "aria-hidden": "true", children: "Add" })
|
|
3382
3493
|
] }) }, item.id)) })
|
|
3383
3494
|
] }),
|
|
3384
|
-
/* @__PURE__ */ (0,
|
|
3385
|
-
/* @__PURE__ */ (0,
|
|
3386
|
-
loading ? /* @__PURE__ */ (0,
|
|
3387
|
-
/* @__PURE__ */ (0,
|
|
3388
|
-
onRetry && /* @__PURE__ */ (0,
|
|
3389
|
-
] }) : items.length === 0 ? /* @__PURE__ */ (0,
|
|
3390
|
-
/* @__PURE__ */ (0,
|
|
3391
|
-
palette[0] && /* @__PURE__ */ (0,
|
|
3495
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-builder-canvas__workspace", children: [
|
|
3496
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { children: "Canvas" }),
|
|
3497
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uix-builder-canvas__state", role: "status", children: "Loading canvas\u2026" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-builder-canvas__state", role: "alert", children: [
|
|
3498
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: error }),
|
|
3499
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
3500
|
+
] }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-builder-canvas__state", children: [
|
|
3501
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: emptyMessage }),
|
|
3502
|
+
palette[0] && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: [
|
|
3392
3503
|
"Add ",
|
|
3393
3504
|
palette[0].label
|
|
3394
3505
|
] })
|
|
3395
|
-
] }) : /* @__PURE__ */ (0,
|
|
3506
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ol", { className: "uix-builder-canvas__items", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
3396
3507
|
"li",
|
|
3397
3508
|
{
|
|
3398
3509
|
draggable: true,
|
|
@@ -3402,34 +3513,34 @@ function BuilderCanvas({
|
|
|
3402
3513
|
onDrop: (event) => drop(event, item.id),
|
|
3403
3514
|
className: cx("uix-builder-canvas__item", selectedId === item.id && "uix-builder-canvas__item--selected"),
|
|
3404
3515
|
children: [
|
|
3405
|
-
/* @__PURE__ */ (0,
|
|
3406
|
-
/* @__PURE__ */ (0,
|
|
3407
|
-
item.description && /* @__PURE__ */ (0,
|
|
3516
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.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_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
|
|
3517
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("strong", { children: item.label }),
|
|
3518
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: item.description })
|
|
3408
3519
|
] }) }),
|
|
3409
|
-
/* @__PURE__ */ (0,
|
|
3410
|
-
/* @__PURE__ */ (0,
|
|
3411
|
-
/* @__PURE__ */ (0,
|
|
3412
|
-
/* @__PURE__ */ (0,
|
|
3520
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "uix-builder-canvas__item-actions", children: [
|
|
3521
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": `Move ${item.label} up`, children: "Up" }),
|
|
3522
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": `Move ${item.label} down`, children: "Down" }),
|
|
3523
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick: () => remove(item.id), "aria-label": `Remove ${item.label}`, children: "Remove" })
|
|
3413
3524
|
] })
|
|
3414
3525
|
]
|
|
3415
3526
|
},
|
|
3416
3527
|
item.id
|
|
3417
3528
|
)) })
|
|
3418
3529
|
] }),
|
|
3419
|
-
/* @__PURE__ */ (0,
|
|
3420
|
-
/* @__PURE__ */ (0,
|
|
3421
|
-
!selected ? /* @__PURE__ */ (0,
|
|
3422
|
-
/* @__PURE__ */ (0,
|
|
3423
|
-
/* @__PURE__ */ (0,
|
|
3424
|
-
/* @__PURE__ */ (0,
|
|
3425
|
-
/* @__PURE__ */ (0,
|
|
3530
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("aside", { className: "uix-builder-canvas__properties", "aria-label": "Item properties", children: [
|
|
3531
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { ref: propertyHeadingRef, tabIndex: -1, children: "Properties" }),
|
|
3532
|
+
!selected ? /* @__PURE__ */ (0, import_jsx_runtime59.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_runtime59.jsxs)("dl", { children: [
|
|
3533
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dt", { children: "Type" }),
|
|
3534
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dd", { children: selected.type }),
|
|
3535
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dt", { children: "Label" }),
|
|
3536
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dd", { children: selected.label })
|
|
3426
3537
|
] })
|
|
3427
3538
|
] })
|
|
3428
3539
|
] });
|
|
3429
3540
|
}
|
|
3430
3541
|
|
|
3431
3542
|
// src/components/SchedulingCalendar.tsx
|
|
3432
|
-
var
|
|
3543
|
+
var import_react31 = require("react");
|
|
3433
3544
|
|
|
3434
3545
|
// src/calendar-model.ts
|
|
3435
3546
|
function fromDateKey(value) {
|
|
@@ -3510,7 +3621,7 @@ function isDateUnavailable(date, options) {
|
|
|
3510
3621
|
}
|
|
3511
3622
|
|
|
3512
3623
|
// src/components/SchedulingCalendar.tsx
|
|
3513
|
-
var
|
|
3624
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
3514
3625
|
var stateLabel = { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" };
|
|
3515
3626
|
var stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
|
|
3516
3627
|
var dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
@@ -3532,19 +3643,19 @@ function SchedulingCalendar({
|
|
|
3532
3643
|
onRetry,
|
|
3533
3644
|
className
|
|
3534
3645
|
}) {
|
|
3535
|
-
const [internalView, setInternalView] = (0,
|
|
3646
|
+
const [internalView, setInternalView] = (0, import_react31.useState)("month");
|
|
3536
3647
|
const view = controlledView ?? internalView;
|
|
3537
|
-
const [activeDate, setActiveDate] = (0,
|
|
3538
|
-
const gridRef = (0,
|
|
3539
|
-
const visibleEntries = (0,
|
|
3540
|
-
const entrySpans = (0,
|
|
3541
|
-
const overlaySpans = (0,
|
|
3542
|
-
const monthDays = (0,
|
|
3648
|
+
const [activeDate, setActiveDate] = (0, import_react31.useState)(anchorDate);
|
|
3649
|
+
const gridRef = (0, import_react31.useRef)(null);
|
|
3650
|
+
const visibleEntries = (0, import_react31.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
|
|
3651
|
+
const entrySpans = (0, import_react31.useMemo)(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
|
|
3652
|
+
const overlaySpans = (0, import_react31.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
|
|
3653
|
+
const monthDays = (0, import_react31.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate)), [anchorDate]);
|
|
3543
3654
|
const weekday = ((/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)).getUTCDay() + 6) % 7;
|
|
3544
3655
|
const weekStart = addCalendarDays(anchorDate, -weekday);
|
|
3545
|
-
const weekDays = (0,
|
|
3546
|
-
const days = (0,
|
|
3547
|
-
(0,
|
|
3656
|
+
const weekDays = (0, import_react31.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
|
|
3657
|
+
const days = (0, import_react31.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
|
|
3658
|
+
(0, import_react31.useEffect)(() => {
|
|
3548
3659
|
if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
|
|
3549
3660
|
}, [activeDate, days, view]);
|
|
3550
3661
|
const setView = (next) => {
|
|
@@ -3578,58 +3689,58 @@ function SchedulingCalendar({
|
|
|
3578
3689
|
return date >= span.start && date <= span.end;
|
|
3579
3690
|
});
|
|
3580
3691
|
const formatInstant = (instant) => new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
|
|
3581
|
-
return /* @__PURE__ */ (0,
|
|
3582
|
-
/* @__PURE__ */ (0,
|
|
3583
|
-
/* @__PURE__ */ (0,
|
|
3584
|
-
/* @__PURE__ */ (0,
|
|
3585
|
-
/* @__PURE__ */ (0,
|
|
3692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("section", { className: cx("uix-scheduling-calendar", className), "aria-label": `Scheduling calendar in ${timeZone}`, children: [
|
|
3693
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-scheduling-calendar__header", children: [
|
|
3694
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { children: [
|
|
3695
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: "Previous" }),
|
|
3696
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: "Next" })
|
|
3586
3697
|
] }),
|
|
3587
|
-
/* @__PURE__ */ (0,
|
|
3588
|
-
/* @__PURE__ */ (0,
|
|
3698
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.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)}` }),
|
|
3699
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-segmented", role: "group", "aria-label": "Calendar view", children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: [
|
|
3589
3700
|
option[0].toUpperCase(),
|
|
3590
3701
|
option.slice(1)
|
|
3591
3702
|
] }, option)) })
|
|
3592
3703
|
] }),
|
|
3593
|
-
loading ? /* @__PURE__ */ (0,
|
|
3594
|
-
/* @__PURE__ */ (0,
|
|
3595
|
-
onRetry && /* @__PURE__ */ (0,
|
|
3596
|
-
] }) : view === "agenda" ? /* @__PURE__ */ (0,
|
|
3704
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-scheduling-calendar__state", role: "status", children: "Loading schedule\u2026" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
|
|
3705
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { children: error }),
|
|
3706
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
3707
|
+
] }) : view === "agenda" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": "Schedule agenda", children: visibleEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { children: "No scheduled entries match the current filters." }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
|
|
3597
3708
|
const state = entry.state ?? "scheduled";
|
|
3598
|
-
return /* @__PURE__ */ (0,
|
|
3599
|
-
/* @__PURE__ */ (0,
|
|
3600
|
-
/* @__PURE__ */ (0,
|
|
3601
|
-
/* @__PURE__ */ (0,
|
|
3709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("button", { type: "button", onClick: () => onSelectEntry?.(entry), children: [
|
|
3710
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { children: [
|
|
3711
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("strong", { children: renderEntry?.(entry) ?? entry.title }),
|
|
3712
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { children: [
|
|
3602
3713
|
formatInstant(entry.start),
|
|
3603
3714
|
" \u2013 ",
|
|
3604
3715
|
formatInstant(entry.end)
|
|
3605
3716
|
] }),
|
|
3606
|
-
entry.meta && /* @__PURE__ */ (0,
|
|
3717
|
+
entry.meta && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: entry.meta })
|
|
3607
3718
|
] }),
|
|
3608
|
-
/* @__PURE__ */ (0,
|
|
3719
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StatusPill, { tone: stateTone(state), children: stateLabel[state] })
|
|
3609
3720
|
] }) }, entry.id);
|
|
3610
|
-
}) }) }) : /* @__PURE__ */ (0,
|
|
3721
|
+
}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.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) => {
|
|
3611
3722
|
const dayEntries = entriesFor(date);
|
|
3612
3723
|
const dayOverlays = overlaysFor(date);
|
|
3613
|
-
return /* @__PURE__ */ (0,
|
|
3614
|
-
/* @__PURE__ */ (0,
|
|
3615
|
-
dayOverlays.map((overlay) => /* @__PURE__ */ (0,
|
|
3616
|
-
/* @__PURE__ */ (0,
|
|
3724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
|
|
3725
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.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)) }),
|
|
3726
|
+
dayOverlays.map((overlay) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "uix-scheduling-calendar__overlay", "data-kind": overlay.kind, children: overlay.label }, overlay.id)),
|
|
3727
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-scheduling-calendar__entries", children: dayEntries.map((entry) => {
|
|
3617
3728
|
const span = entrySpans.get(entry.id);
|
|
3618
3729
|
const state = entry.state ?? "scheduled";
|
|
3619
|
-
return /* @__PURE__ */ (0,
|
|
3620
|
-
/* @__PURE__ */ (0,
|
|
3621
|
-
/* @__PURE__ */ (0,
|
|
3730
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.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: [
|
|
3731
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: renderEntry?.(entry) ?? entry.title }),
|
|
3732
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "uix-visually-hidden", children: stateLabel[state] })
|
|
3622
3733
|
] }, entry.id);
|
|
3623
3734
|
}) })
|
|
3624
3735
|
] }, date);
|
|
3625
3736
|
}) }),
|
|
3626
|
-
/* @__PURE__ */ (0,
|
|
3737
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.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_runtime60.jsx)("span", { "data-state": state, children: stateLabel[state] }, state)) })
|
|
3627
3738
|
] });
|
|
3628
3739
|
}
|
|
3629
3740
|
|
|
3630
3741
|
// src/components/DateRangePicker.tsx
|
|
3631
|
-
var
|
|
3632
|
-
var
|
|
3742
|
+
var import_react32 = require("react");
|
|
3743
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
3633
3744
|
var monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
3634
3745
|
var dateLabel2 = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
3635
3746
|
function DateRangePicker({
|
|
@@ -3648,25 +3759,25 @@ function DateRangePicker({
|
|
|
3648
3759
|
disabled,
|
|
3649
3760
|
className
|
|
3650
3761
|
}) {
|
|
3651
|
-
const id = (0,
|
|
3652
|
-
const [internalMonth, setInternalMonth] = (0,
|
|
3762
|
+
const id = (0, import_react32.useId)();
|
|
3763
|
+
const [internalMonth, setInternalMonth] = (0, import_react32.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
|
|
3653
3764
|
const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
|
|
3654
|
-
const [activeDate, setActiveDate] = (0,
|
|
3655
|
-
const rootRef = (0,
|
|
3656
|
-
const pendingFocus = (0,
|
|
3765
|
+
const [activeDate, setActiveDate] = (0, import_react32.useState)(value.end ?? value.start ?? visibleMonth);
|
|
3766
|
+
const rootRef = (0, import_react32.useRef)(null);
|
|
3767
|
+
const pendingFocus = (0, import_react32.useRef)(false);
|
|
3657
3768
|
const count = Math.max(1, Math.min(3, months));
|
|
3658
|
-
const calendars = (0,
|
|
3769
|
+
const calendars = (0, import_react32.useMemo)(() => Array.from({ length: count }, (_, index) => {
|
|
3659
3770
|
const month = startOfMonth(addCalendarMonths(visibleMonth, index));
|
|
3660
3771
|
return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
|
|
3661
3772
|
}), [visibleMonth, count]);
|
|
3662
3773
|
const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
|
|
3663
|
-
(0,
|
|
3774
|
+
(0, import_react32.useEffect)(() => {
|
|
3664
3775
|
const first = calendars[0]?.days[0]?.date;
|
|
3665
3776
|
const finalDays = calendars[calendars.length - 1]?.days;
|
|
3666
3777
|
const last = finalDays?.[finalDays.length - 1]?.date;
|
|
3667
3778
|
if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
|
|
3668
3779
|
}, [activeDate, calendars]);
|
|
3669
|
-
(0,
|
|
3780
|
+
(0, import_react32.useEffect)(() => {
|
|
3670
3781
|
if (!pendingFocus.current) return;
|
|
3671
3782
|
rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus();
|
|
3672
3783
|
pendingFocus.current = false;
|
|
@@ -3704,23 +3815,23 @@ function DateRangePicker({
|
|
|
3704
3815
|
}
|
|
3705
3816
|
};
|
|
3706
3817
|
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.`;
|
|
3707
|
-
return /* @__PURE__ */ (0,
|
|
3708
|
-
/* @__PURE__ */ (0,
|
|
3709
|
-
/* @__PURE__ */ (0,
|
|
3710
|
-
/* @__PURE__ */ (0,
|
|
3711
|
-
/* @__PURE__ */ (0,
|
|
3712
|
-
/* @__PURE__ */ (0,
|
|
3818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("section", { className: cx("uix-date-range-picker", rangeInvalid && "uix-date-range-picker--invalid", className), "aria-labelledby": `${id}-label`, children: [
|
|
3819
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-date-range-picker__header", children: [
|
|
3820
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { id: `${id}-label`, children: label }),
|
|
3821
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
|
|
3822
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.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" }),
|
|
3823
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.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" })
|
|
3713
3824
|
] })
|
|
3714
3825
|
] }),
|
|
3715
|
-
/* @__PURE__ */ (0,
|
|
3716
|
-
/* @__PURE__ */ (0,
|
|
3717
|
-
/* @__PURE__ */ (0,
|
|
3718
|
-
/* @__PURE__ */ (0,
|
|
3719
|
-
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0,
|
|
3826
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref: rootRef, className: "uix-date-range-picker__months", children: calendars.map(({ month, days }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-date-range-picker__month", children: [
|
|
3827
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h4", { children: monthLabel(month, locale) }),
|
|
3828
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.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_runtime61.jsx)("span", { children: day }, day)) }),
|
|
3829
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
|
|
3830
|
+
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "aria-hidden": "true" }, `blank-${index}`)),
|
|
3720
3831
|
days.map((day) => {
|
|
3721
3832
|
const unavailable = disabled || isDateUnavailable(day.date, { min, max, isDisabled: isDateDisabled });
|
|
3722
3833
|
const edge = day.date === value.start ? "start" : day.date === value.end ? "end" : void 0;
|
|
3723
|
-
return /* @__PURE__ */ (0,
|
|
3834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
3724
3835
|
"button",
|
|
3725
3836
|
{
|
|
3726
3837
|
type: "button",
|
|
@@ -3741,13 +3852,13 @@ function DateRangePicker({
|
|
|
3741
3852
|
})
|
|
3742
3853
|
] })
|
|
3743
3854
|
] }, month)) }),
|
|
3744
|
-
/* @__PURE__ */ (0,
|
|
3745
|
-
rangeInvalid && /* @__PURE__ */ (0,
|
|
3855
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "uix-date-range-picker__selection", "aria-live": "polite", children: announcement }),
|
|
3856
|
+
rangeInvalid && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
|
|
3746
3857
|
] });
|
|
3747
3858
|
}
|
|
3748
3859
|
|
|
3749
3860
|
// src/components/RelationshipGraph.tsx
|
|
3750
|
-
var
|
|
3861
|
+
var import_react33 = require("react");
|
|
3751
3862
|
|
|
3752
3863
|
// src/relationship-graph-model.ts
|
|
3753
3864
|
function boundRelationshipGraph(nodes, edges, maxNodes = 40) {
|
|
@@ -3814,7 +3925,7 @@ function traverseRelationshipNode(nodes, currentId, direction) {
|
|
|
3814
3925
|
}
|
|
3815
3926
|
|
|
3816
3927
|
// src/components/RelationshipGraph.tsx
|
|
3817
|
-
var
|
|
3928
|
+
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
3818
3929
|
var EMPTY_IDS = /* @__PURE__ */ new Set();
|
|
3819
3930
|
var EMPTY_LEGEND = [];
|
|
3820
3931
|
function RelationshipGraph({
|
|
@@ -3836,13 +3947,13 @@ function RelationshipGraph({
|
|
|
3836
3947
|
onRetry,
|
|
3837
3948
|
className
|
|
3838
3949
|
}) {
|
|
3839
|
-
const bounded = (0,
|
|
3840
|
-
const positioned = (0,
|
|
3841
|
-
const positionedById = (0,
|
|
3842
|
-
const [zoom, setZoom] = (0,
|
|
3843
|
-
const [pan, setPan] = (0,
|
|
3844
|
-
const [focusedId, setFocusedId] = (0,
|
|
3845
|
-
const svgRef = (0,
|
|
3950
|
+
const bounded = (0, import_react33.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
3951
|
+
const positioned = (0, import_react33.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
|
|
3952
|
+
const positionedById = (0, import_react33.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
|
|
3953
|
+
const [zoom, setZoom] = (0, import_react33.useState)(1);
|
|
3954
|
+
const [pan, setPan] = (0, import_react33.useState)({ x: 0, y: 0 });
|
|
3955
|
+
const [focusedId, setFocusedId] = (0, import_react33.useState)(selectedId ?? positioned[0]?.id);
|
|
3956
|
+
const svgRef = (0, import_react33.useRef)(null);
|
|
3846
3957
|
const select = (id) => {
|
|
3847
3958
|
const node = bounded.nodes.find((item) => item.id === id);
|
|
3848
3959
|
if (node) onSelect?.(node);
|
|
@@ -3865,44 +3976,44 @@ function RelationshipGraph({
|
|
|
3865
3976
|
setZoom(1);
|
|
3866
3977
|
setPan({ x: 0, y: 0 });
|
|
3867
3978
|
};
|
|
3868
|
-
if (loading) return /* @__PURE__ */ (0,
|
|
3869
|
-
if (error) return /* @__PURE__ */ (0,
|
|
3870
|
-
/* @__PURE__ */ (0,
|
|
3871
|
-
onRetry && /* @__PURE__ */ (0,
|
|
3979
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "status", children: "Loading relationships\u2026" });
|
|
3980
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "alert", children: [
|
|
3981
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: error }),
|
|
3982
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
3872
3983
|
] });
|
|
3873
|
-
if (bounded.nodes.length === 0) return /* @__PURE__ */ (0,
|
|
3874
|
-
/* @__PURE__ */ (0,
|
|
3875
|
-
/* @__PURE__ */ (0,
|
|
3984
|
+
if (bounded.nodes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), children: [
|
|
3985
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: "No relationships to display." }),
|
|
3986
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: "Adjust the neighborhood or filters to include a node." })
|
|
3876
3987
|
] });
|
|
3877
|
-
return /* @__PURE__ */ (0,
|
|
3878
|
-
/* @__PURE__ */ (0,
|
|
3879
|
-
/* @__PURE__ */ (0,
|
|
3880
|
-
/* @__PURE__ */ (0,
|
|
3881
|
-
/* @__PURE__ */ (0,
|
|
3882
|
-
/* @__PURE__ */ (0,
|
|
3883
|
-
/* @__PURE__ */ (0,
|
|
3884
|
-
/* @__PURE__ */ (0,
|
|
3885
|
-
/* @__PURE__ */ (0,
|
|
3886
|
-
/* @__PURE__ */ (0,
|
|
3988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": "Relationship graph", children: [
|
|
3989
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-relationship-graph__toolbar", "aria-label": "Graph view controls", children: [
|
|
3990
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": "Pan left", children: "Left" }),
|
|
3991
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": "Pan up", children: "Up" }),
|
|
3992
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": "Pan down", children: "Down" }),
|
|
3993
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": "Pan right", children: "Right" }),
|
|
3994
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": "Zoom in", children: "Zoom in" }),
|
|
3995
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": "Zoom out", children: "Zoom out" }),
|
|
3996
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: reset, children: "Reset view" }),
|
|
3997
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { "aria-live": "polite", children: [
|
|
3887
3998
|
"Zoom ",
|
|
3888
3999
|
Math.round(zoom * 100),
|
|
3889
4000
|
"%"
|
|
3890
4001
|
] })
|
|
3891
4002
|
] }),
|
|
3892
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
4003
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { className: "uix-relationship-graph__bounded", role: "status", children: [
|
|
3893
4004
|
"Showing ",
|
|
3894
4005
|
bounded.nodes.length,
|
|
3895
4006
|
" nodes; ",
|
|
3896
4007
|
bounded.omittedNodeCount,
|
|
3897
4008
|
" outside this bounded neighborhood."
|
|
3898
4009
|
] }),
|
|
3899
|
-
/* @__PURE__ */ (0,
|
|
4010
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { ref: svgRef, viewBox: "0 0 600 400", role: "group", "aria-label": `Graph with ${bounded.nodes.length} nodes and ${bounded.edges.length} relationships`, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
|
|
3900
4011
|
bounded.edges.map((edge) => {
|
|
3901
4012
|
const source = positionedById.get(edge.source);
|
|
3902
4013
|
const target = positionedById.get(edge.target);
|
|
3903
|
-
return /* @__PURE__ */ (0,
|
|
4014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("line", { x1: source.x * 6, y1: source.y * 4, x2: target.x * 6, y2: target.y * 4, 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_runtime62.jsx)("title", { children: edge.label ?? edge.type ?? "Relationship" }) }, edge.id);
|
|
3904
4015
|
}),
|
|
3905
|
-
positioned.map((node) => /* @__PURE__ */ (0,
|
|
4016
|
+
positioned.map((node) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
3906
4017
|
"g",
|
|
3907
4018
|
{
|
|
3908
4019
|
transform: `translate(${node.x * 6} ${node.y * 4})`,
|
|
@@ -3918,27 +4029,27 @@ function RelationshipGraph({
|
|
|
3918
4029
|
onKeyDown: (event) => onNodeKeyDown(event, node.id),
|
|
3919
4030
|
onClick: () => select(node.id),
|
|
3920
4031
|
children: [
|
|
3921
|
-
/* @__PURE__ */ (0,
|
|
3922
|
-
/* @__PURE__ */ (0,
|
|
4032
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("rect", { x: "-55", y: "-18", width: "110", height: "36", rx: "8" }),
|
|
4033
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
|
|
3923
4034
|
]
|
|
3924
4035
|
},
|
|
3925
4036
|
node.id
|
|
3926
4037
|
))
|
|
3927
4038
|
] }) }) }),
|
|
3928
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
3929
|
-
/* @__PURE__ */ (0,
|
|
3930
|
-
/* @__PURE__ */ (0,
|
|
3931
|
-
/* @__PURE__ */ (0,
|
|
4039
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": "Relationship types", children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { "data-type": item.id, children: item.label }, item.id)) }),
|
|
4040
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": "Accessible relationship list", children: [
|
|
4041
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { children: "Relationship list" }),
|
|
4042
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { children: bounded.nodes.map((node) => {
|
|
3932
4043
|
const neighbors = relationshipNeighbors(node.id, bounded.edges).map((id) => bounded.nodes.find((item) => item.id === id)?.label ?? id);
|
|
3933
|
-
return /* @__PURE__ */ (0,
|
|
3934
|
-
/* @__PURE__ */ (0,
|
|
3935
|
-
/* @__PURE__ */ (0,
|
|
3936
|
-
node.type && /* @__PURE__ */ (0,
|
|
3937
|
-
/* @__PURE__ */ (0,
|
|
4044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { "data-selected": selectedId === node.id || void 0, children: [
|
|
4045
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", onClick: () => select(node.id), "aria-pressed": selectedId === node.id, children: [
|
|
4046
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: node.label }),
|
|
4047
|
+
node.type && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: node.type }),
|
|
4048
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: neighbors.length ? `Connected to ${neighbors.join(", ")}` : "No visible connections" })
|
|
3938
4049
|
] }),
|
|
3939
|
-
/* @__PURE__ */ (0,
|
|
3940
|
-
onExpandNeighbors && /* @__PURE__ */ (0,
|
|
3941
|
-
onOpenDetails && /* @__PURE__ */ (0,
|
|
4050
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "uix-relationship-graph__list-actions", children: [
|
|
4051
|
+
onExpandNeighbors && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onExpandNeighbors(node), children: "Expand neighbors" }),
|
|
4052
|
+
onOpenDetails && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onOpenDetails(node), children: "Open details" })
|
|
3942
4053
|
] })
|
|
3943
4054
|
] }, node.id);
|
|
3944
4055
|
}) })
|
|
@@ -3947,8 +4058,8 @@ function RelationshipGraph({
|
|
|
3947
4058
|
}
|
|
3948
4059
|
|
|
3949
4060
|
// src/components/MatchReview.tsx
|
|
3950
|
-
var
|
|
3951
|
-
var
|
|
4061
|
+
var import_react34 = require("react");
|
|
4062
|
+
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
3952
4063
|
var valueText = (value) => value == null ? "\u2014" : typeof value === "string" ? value : JSON.stringify(value);
|
|
3953
4064
|
function MatchReview({
|
|
3954
4065
|
incoming,
|
|
@@ -3964,11 +4075,11 @@ function MatchReview({
|
|
|
3964
4075
|
onRetry,
|
|
3965
4076
|
className
|
|
3966
4077
|
}) {
|
|
3967
|
-
const [internalSelection, setInternalSelection] = (0,
|
|
3968
|
-
const [announcement, setAnnouncement] = (0,
|
|
3969
|
-
const [bulkPending, setBulkPending] = (0,
|
|
4078
|
+
const [internalSelection, setInternalSelection] = (0, import_react34.useState)(/* @__PURE__ */ new Set());
|
|
4079
|
+
const [announcement, setAnnouncement] = (0, import_react34.useState)("");
|
|
4080
|
+
const [bulkPending, setBulkPending] = (0, import_react34.useState)(false);
|
|
3970
4081
|
const selection = selectedIds ?? internalSelection;
|
|
3971
|
-
const pending = (0,
|
|
4082
|
+
const pending = (0, import_react34.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
|
|
3972
4083
|
const setSelection = (next) => {
|
|
3973
4084
|
if (selectedIds === void 0) setInternalSelection(next);
|
|
3974
4085
|
onSelectionChange?.(next);
|
|
@@ -3996,55 +4107,55 @@ function MatchReview({
|
|
|
3996
4107
|
setBulkPending(false);
|
|
3997
4108
|
}
|
|
3998
4109
|
};
|
|
3999
|
-
if (loading) return /* @__PURE__ */ (0,
|
|
4000
|
-
if (error) return /* @__PURE__ */ (0,
|
|
4001
|
-
/* @__PURE__ */ (0,
|
|
4002
|
-
onRetry && /* @__PURE__ */ (0,
|
|
4110
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: "Loading match candidates\u2026" });
|
|
4111
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
|
|
4112
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: error }),
|
|
4113
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
4003
4114
|
] });
|
|
4004
|
-
if (candidates.length === 0) return /* @__PURE__ */ (0,
|
|
4005
|
-
/* @__PURE__ */ (0,
|
|
4006
|
-
/* @__PURE__ */ (0,
|
|
4115
|
+
if (candidates.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
|
|
4116
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: "No candidate matches found." }),
|
|
4117
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: "Choose another record source or continue without a match." })
|
|
4007
4118
|
] });
|
|
4008
|
-
return /* @__PURE__ */ (0,
|
|
4009
|
-
/* @__PURE__ */ (0,
|
|
4010
|
-
/* @__PURE__ */ (0,
|
|
4011
|
-
/* @__PURE__ */ (0,
|
|
4012
|
-
/* @__PURE__ */ (0,
|
|
4119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("section", { className: cx("uix-match-review", className), "aria-label": "Match review", children: [
|
|
4120
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-match-review__summary", children: [
|
|
4121
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
|
|
4122
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("strong", { children: incomingLabel }),
|
|
4123
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
|
|
4013
4124
|
pending.length,
|
|
4014
4125
|
" pending of ",
|
|
4015
4126
|
candidates.length
|
|
4016
4127
|
] })
|
|
4017
4128
|
] }),
|
|
4018
|
-
/* @__PURE__ */ (0,
|
|
4019
|
-
/* @__PURE__ */ (0,
|
|
4129
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
|
|
4130
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("b", { children: field.label }),
|
|
4020
4131
|
field.render?.(incoming[field.id], incoming) ?? valueText(incoming[field.id])
|
|
4021
4132
|
] }, field.id)) })
|
|
4022
4133
|
] }),
|
|
4023
|
-
onBulkDecision && /* @__PURE__ */ (0,
|
|
4024
|
-
/* @__PURE__ */ (0,
|
|
4134
|
+
onBulkDecision && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-match-review__bulk", "aria-label": "Bulk candidate actions", children: [
|
|
4135
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
|
|
4025
4136
|
selection.size,
|
|
4026
4137
|
" selected"
|
|
4027
4138
|
] }),
|
|
4028
|
-
/* @__PURE__ */ (0,
|
|
4029
|
-
/* @__PURE__ */ (0,
|
|
4139
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.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" }),
|
|
4140
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.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" })
|
|
4030
4141
|
] }),
|
|
4031
|
-
/* @__PURE__ */ (0,
|
|
4032
|
-
/* @__PURE__ */ (0,
|
|
4033
|
-
/* @__PURE__ */ (0,
|
|
4034
|
-
/* @__PURE__ */ (0,
|
|
4035
|
-
/* @__PURE__ */ (0,
|
|
4036
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
4037
|
-
/* @__PURE__ */ (0,
|
|
4038
|
-
/* @__PURE__ */ (0,
|
|
4142
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("table", { className: "uix-table uix-match-review__table", children: [
|
|
4143
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("caption", { className: "uix-visually-hidden", children: "Candidate matches and available decisions" }),
|
|
4144
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("tr", { children: [
|
|
4145
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-visually-hidden", children: "Select" }) }),
|
|
4146
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Confidence" }),
|
|
4147
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: field.label }, field.id)),
|
|
4148
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Status" }),
|
|
4149
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Actions" })
|
|
4039
4150
|
] }) }),
|
|
4040
|
-
/* @__PURE__ */ (0,
|
|
4151
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { children: candidates.map((candidate) => {
|
|
4041
4152
|
const resolved = candidate.status === "resolved";
|
|
4042
|
-
return /* @__PURE__ */ (0,
|
|
4043
|
-
/* @__PURE__ */ (0,
|
|
4044
|
-
/* @__PURE__ */ (0,
|
|
4045
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
4046
|
-
/* @__PURE__ */ (0,
|
|
4047
|
-
/* @__PURE__ */ (0,
|
|
4153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("tr", { "data-status": candidate.status ?? "pending", children: [
|
|
4154
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": `Select candidate ${candidate.id}` }) }),
|
|
4155
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? "Not scored" : `${Math.round(candidate.confidence * 100)}%` }) }),
|
|
4156
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
|
|
4157
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ?? "Resolved" : "Pending" }) }),
|
|
4158
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
4048
4159
|
"button",
|
|
4049
4160
|
{
|
|
4050
4161
|
type: "button",
|
|
@@ -4058,12 +4169,12 @@ function MatchReview({
|
|
|
4058
4169
|
] }, candidate.id);
|
|
4059
4170
|
}) })
|
|
4060
4171
|
] }) }),
|
|
4061
|
-
/* @__PURE__ */ (0,
|
|
4172
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
4062
4173
|
] });
|
|
4063
4174
|
}
|
|
4064
4175
|
|
|
4065
4176
|
// src/components/MetricInput.tsx
|
|
4066
|
-
var
|
|
4177
|
+
var import_react35 = require("react");
|
|
4067
4178
|
|
|
4068
4179
|
// src/metric-model.ts
|
|
4069
4180
|
function decimals(value) {
|
|
@@ -4088,7 +4199,7 @@ function parseMetricValue(value) {
|
|
|
4088
4199
|
}
|
|
4089
4200
|
|
|
4090
4201
|
// src/components/MetricInput.tsx
|
|
4091
|
-
var
|
|
4202
|
+
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
4092
4203
|
var defaultMetricFormat = (input) => input == null ? "" : String(input);
|
|
4093
4204
|
function MetricInput({
|
|
4094
4205
|
value,
|
|
@@ -4107,11 +4218,11 @@ function MetricInput({
|
|
|
4107
4218
|
className,
|
|
4108
4219
|
id: providedId
|
|
4109
4220
|
}) {
|
|
4110
|
-
const generatedId = (0,
|
|
4221
|
+
const generatedId = (0, import_react35.useId)();
|
|
4111
4222
|
const id = providedId ?? generatedId;
|
|
4112
4223
|
const errorId = `${id}-error`;
|
|
4113
|
-
const [text, setText] = (0,
|
|
4114
|
-
(0,
|
|
4224
|
+
const [text, setText] = (0, import_react35.useState)(() => format(value));
|
|
4225
|
+
(0, import_react35.useEffect)(() => setText(format(value)), [value, format]);
|
|
4115
4226
|
const commit = (input) => {
|
|
4116
4227
|
const parsed = parse(input);
|
|
4117
4228
|
if (input.trim() === "" || parsed !== null) {
|
|
@@ -4137,10 +4248,10 @@ function MetricInput({
|
|
|
4137
4248
|
const parsed = parse(event.currentTarget.value);
|
|
4138
4249
|
setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
|
|
4139
4250
|
};
|
|
4140
|
-
return /* @__PURE__ */ (0,
|
|
4141
|
-
/* @__PURE__ */ (0,
|
|
4142
|
-
/* @__PURE__ */ (0,
|
|
4143
|
-
/* @__PURE__ */ (0,
|
|
4251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
|
|
4252
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { className: "uix-field__label", htmlFor: id, children: label }),
|
|
4253
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uix-metric-input__control", children: [
|
|
4254
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
4144
4255
|
Input,
|
|
4145
4256
|
{
|
|
4146
4257
|
id,
|
|
@@ -4159,22 +4270,22 @@ function MetricInput({
|
|
|
4159
4270
|
readOnly
|
|
4160
4271
|
}
|
|
4161
4272
|
),
|
|
4162
|
-
unit && /* @__PURE__ */ (0,
|
|
4163
|
-
/* @__PURE__ */ (0,
|
|
4164
|
-
/* @__PURE__ */ (0,
|
|
4165
|
-
/* @__PURE__ */ (0,
|
|
4273
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
|
|
4274
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uix-metric-input__steps", children: [
|
|
4275
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
|
|
4276
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
|
|
4166
4277
|
] })
|
|
4167
4278
|
] }),
|
|
4168
|
-
unit && /* @__PURE__ */ (0,
|
|
4279
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
4169
4280
|
"Unit: ",
|
|
4170
4281
|
unit
|
|
4171
4282
|
] }),
|
|
4172
|
-
invalid && errorMessage && /* @__PURE__ */ (0,
|
|
4283
|
+
invalid && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
|
|
4173
4284
|
] });
|
|
4174
4285
|
}
|
|
4175
4286
|
|
|
4176
4287
|
// src/components/LicensePositionBar.tsx
|
|
4177
|
-
var
|
|
4288
|
+
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
4178
4289
|
var defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
|
|
4179
4290
|
function LicensePositionBar({
|
|
4180
4291
|
consumed,
|
|
@@ -4195,18 +4306,18 @@ function LicensePositionBar({
|
|
|
4195
4306
|
const percent = safeEntitled === 0 ? safeConsumed > 0 ? 100 : 0 : safeConsumed / safeEntitled * 100;
|
|
4196
4307
|
const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
|
|
4197
4308
|
const summary = `${consumedLabel}: ${format(safeConsumed)}. ${entitledLabel}: ${format(safeEntitled)}. ${over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}`}.`;
|
|
4198
|
-
return /* @__PURE__ */ (0,
|
|
4199
|
-
/* @__PURE__ */ (0,
|
|
4200
|
-
/* @__PURE__ */ (0,
|
|
4309
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
|
|
4310
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-license-position__header", children: [
|
|
4311
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "uix-license-position__value", children: [
|
|
4201
4312
|
format(safeConsumed),
|
|
4202
4313
|
" / ",
|
|
4203
4314
|
format(safeEntitled)
|
|
4204
4315
|
] }),
|
|
4205
|
-
/* @__PURE__ */ (0,
|
|
4316
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
|
|
4206
4317
|
] }),
|
|
4207
|
-
/* @__PURE__ */ (0,
|
|
4208
|
-
/* @__PURE__ */ (0,
|
|
4209
|
-
over > 0 && /* @__PURE__ */ (0,
|
|
4318
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-license-position__track", children: [
|
|
4319
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
|
|
4320
|
+
over > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
4210
4321
|
"span",
|
|
4211
4322
|
{
|
|
4212
4323
|
className: "uix-license-position__overflow",
|
|
@@ -4215,12 +4326,12 @@ function LicensePositionBar({
|
|
|
4215
4326
|
}
|
|
4216
4327
|
)
|
|
4217
4328
|
] }),
|
|
4218
|
-
/* @__PURE__ */ (0,
|
|
4329
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-visually-hidden", children: summary })
|
|
4219
4330
|
] });
|
|
4220
4331
|
}
|
|
4221
4332
|
|
|
4222
4333
|
// src/components/BrandProfiles.tsx
|
|
4223
|
-
var
|
|
4334
|
+
var import_react37 = require("react");
|
|
4224
4335
|
|
|
4225
4336
|
// src/color-model.ts
|
|
4226
4337
|
var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
@@ -4289,8 +4400,8 @@ function meetsContrast(background, foreground, minimum = 4.5) {
|
|
|
4289
4400
|
}
|
|
4290
4401
|
|
|
4291
4402
|
// src/components/ColorPicker.tsx
|
|
4292
|
-
var
|
|
4293
|
-
var
|
|
4403
|
+
var import_react36 = require("react");
|
|
4404
|
+
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
4294
4405
|
var EMPTY_COLORS = [];
|
|
4295
4406
|
function ColorPicker({
|
|
4296
4407
|
value,
|
|
@@ -4303,17 +4414,17 @@ function ColorPicker({
|
|
|
4303
4414
|
disabled,
|
|
4304
4415
|
className
|
|
4305
4416
|
}) {
|
|
4306
|
-
const id = (0,
|
|
4307
|
-
const triggerRef = (0,
|
|
4308
|
-
const dialogRef = (0,
|
|
4309
|
-
const [open, setOpen] = (0,
|
|
4417
|
+
const id = (0, import_react36.useId)();
|
|
4418
|
+
const triggerRef = (0, import_react36.useRef)(null);
|
|
4419
|
+
const dialogRef = (0, import_react36.useRef)(null);
|
|
4420
|
+
const [open, setOpen] = (0, import_react36.useState)(false);
|
|
4310
4421
|
const normalized = normalizeHex(value) ?? "#000000";
|
|
4311
|
-
const [hexText, setHexText] = (0,
|
|
4312
|
-
const hsv = (0,
|
|
4422
|
+
const [hexText, setHexText] = (0, import_react36.useState)(normalized);
|
|
4423
|
+
const hsv = (0, import_react36.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
|
|
4313
4424
|
const ratio = contrastRatio(normalized, foreground) ?? 0;
|
|
4314
4425
|
const passes = ratio >= minimumContrast;
|
|
4315
|
-
(0,
|
|
4316
|
-
(0,
|
|
4426
|
+
(0, import_react36.useEffect)(() => setHexText(normalized), [normalized]);
|
|
4427
|
+
(0, import_react36.useEffect)(() => {
|
|
4317
4428
|
if (!open) return;
|
|
4318
4429
|
const dialog = dialogRef.current;
|
|
4319
4430
|
dialog?.querySelector("input,button")?.focus();
|
|
@@ -4356,8 +4467,8 @@ function ColorPicker({
|
|
|
4356
4467
|
if (next) onChange(next);
|
|
4357
4468
|
};
|
|
4358
4469
|
const sampleStyle = { backgroundColor: normalized };
|
|
4359
|
-
return /* @__PURE__ */ (0,
|
|
4360
|
-
/* @__PURE__ */ (0,
|
|
4470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cx("uix-color-picker", className), children: [
|
|
4471
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
4361
4472
|
"button",
|
|
4362
4473
|
{
|
|
4363
4474
|
ref: triggerRef,
|
|
@@ -4369,12 +4480,12 @@ function ColorPicker({
|
|
|
4369
4480
|
onClick: () => setOpen((current) => !current),
|
|
4370
4481
|
disabled,
|
|
4371
4482
|
children: [
|
|
4372
|
-
/* @__PURE__ */ (0,
|
|
4373
|
-
/* @__PURE__ */ (0,
|
|
4483
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
|
|
4484
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: normalized })
|
|
4374
4485
|
]
|
|
4375
4486
|
}
|
|
4376
4487
|
),
|
|
4377
|
-
open && /* @__PURE__ */ (0,
|
|
4488
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
4378
4489
|
"div",
|
|
4379
4490
|
{
|
|
4380
4491
|
ref: dialogRef,
|
|
@@ -4385,57 +4496,57 @@ function ColorPicker({
|
|
|
4385
4496
|
className: "uix-color-picker__popover",
|
|
4386
4497
|
onKeyDown: onDialogKeyDown,
|
|
4387
4498
|
children: [
|
|
4388
|
-
/* @__PURE__ */ (0,
|
|
4389
|
-
/* @__PURE__ */ (0,
|
|
4499
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { style: { color: foreground }, children: "Aa" }) }),
|
|
4500
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
4390
4501
|
"Hue ",
|
|
4391
|
-
/* @__PURE__ */ (0,
|
|
4502
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
|
|
4392
4503
|
Math.round(hsv.h),
|
|
4393
4504
|
"\xB0"
|
|
4394
4505
|
] }),
|
|
4395
|
-
/* @__PURE__ */ (0,
|
|
4506
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
|
|
4396
4507
|
] }),
|
|
4397
|
-
/* @__PURE__ */ (0,
|
|
4508
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
4398
4509
|
"Saturation ",
|
|
4399
|
-
/* @__PURE__ */ (0,
|
|
4510
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
|
|
4400
4511
|
Math.round(hsv.s * 100),
|
|
4401
4512
|
"%"
|
|
4402
4513
|
] }),
|
|
4403
|
-
/* @__PURE__ */ (0,
|
|
4514
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
|
|
4404
4515
|
] }),
|
|
4405
|
-
/* @__PURE__ */ (0,
|
|
4516
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
4406
4517
|
"Brightness ",
|
|
4407
|
-
/* @__PURE__ */ (0,
|
|
4518
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
|
|
4408
4519
|
Math.round(hsv.v * 100),
|
|
4409
4520
|
"%"
|
|
4410
4521
|
] }),
|
|
4411
|
-
/* @__PURE__ */ (0,
|
|
4522
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
|
|
4412
4523
|
] }),
|
|
4413
|
-
/* @__PURE__ */ (0,
|
|
4524
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__hex", children: [
|
|
4414
4525
|
"Hex",
|
|
4415
|
-
/* @__PURE__ */ (0,
|
|
4416
|
-
/* @__PURE__ */ (0,
|
|
4526
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
|
|
4527
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
|
|
4417
4528
|
if (event.key === "Enter") commitHex();
|
|
4418
4529
|
}, "aria-invalid": !normalizeHex(hexText) }),
|
|
4419
|
-
/* @__PURE__ */ (0,
|
|
4530
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: "Set" })
|
|
4420
4531
|
] })
|
|
4421
4532
|
] }),
|
|
4422
|
-
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0,
|
|
4423
|
-
presets.length > 0 && /* @__PURE__ */ (0,
|
|
4424
|
-
/* @__PURE__ */ (0,
|
|
4425
|
-
/* @__PURE__ */ (0,
|
|
4533
|
+
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uix-color-picker__palettes", children: [
|
|
4534
|
+
presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
|
|
4535
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("legend", { children: "Presets" }),
|
|
4536
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use preset ${color}` }, color)) })
|
|
4426
4537
|
] }),
|
|
4427
|
-
recent.length > 0 && /* @__PURE__ */ (0,
|
|
4428
|
-
/* @__PURE__ */ (0,
|
|
4429
|
-
/* @__PURE__ */ (0,
|
|
4538
|
+
recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
|
|
4539
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("legend", { children: "Recent" }),
|
|
4540
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use recent color ${color}` }, color)) })
|
|
4430
4541
|
] })
|
|
4431
4542
|
] }),
|
|
4432
|
-
/* @__PURE__ */ (0,
|
|
4543
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.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: [
|
|
4433
4544
|
"Contrast ",
|
|
4434
4545
|
ratio.toFixed(2),
|
|
4435
4546
|
":1 \u2014 ",
|
|
4436
4547
|
passes ? `passes WCAG AA (${minimumContrast}:1)` : `does not meet WCAG AA (${minimumContrast}:1)`
|
|
4437
4548
|
] }),
|
|
4438
|
-
/* @__PURE__ */ (0,
|
|
4549
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: "Done" })
|
|
4439
4550
|
]
|
|
4440
4551
|
}
|
|
4441
4552
|
)
|
|
@@ -4443,7 +4554,7 @@ function ColorPicker({
|
|
|
4443
4554
|
}
|
|
4444
4555
|
|
|
4445
4556
|
// src/components/BrandProfiles.tsx
|
|
4446
|
-
var
|
|
4557
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
4447
4558
|
var PROFILE_PROPERTIES = {
|
|
4448
4559
|
brand: "--uix-brand",
|
|
4449
4560
|
brandForeground: "--uix-brand-fg",
|
|
@@ -4512,7 +4623,7 @@ function BrandProfileEditor({
|
|
|
4512
4623
|
colorPresets = EMPTY_COLORS2,
|
|
4513
4624
|
className
|
|
4514
4625
|
}) {
|
|
4515
|
-
const [announcement, setAnnouncement] = (0,
|
|
4626
|
+
const [announcement, setAnnouncement] = (0, import_react37.useState)("");
|
|
4516
4627
|
const update = (patch) => onChange({ ...value, ...patch });
|
|
4517
4628
|
const apply = () => {
|
|
4518
4629
|
if (applyTarget !== null) applyBrandProfile(value, applyTarget);
|
|
@@ -4529,54 +4640,54 @@ function BrandProfileEditor({
|
|
|
4529
4640
|
...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
|
|
4530
4641
|
...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
|
|
4531
4642
|
};
|
|
4532
|
-
return /* @__PURE__ */ (0,
|
|
4533
|
-
/* @__PURE__ */ (0,
|
|
4534
|
-
profiles.length > 0 && /* @__PURE__ */ (0,
|
|
4643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
|
|
4644
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__form", children: [
|
|
4645
|
+
profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4535
4646
|
"Profile",
|
|
4536
|
-
/* @__PURE__ */ (0,
|
|
4647
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("select", { className: "uix-select", value: value.id, onChange: (event) => {
|
|
4537
4648
|
const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
|
|
4538
4649
|
if (selected) onSelectProfile?.(selected);
|
|
4539
|
-
}, children: profiles.map((profile) => /* @__PURE__ */ (0,
|
|
4650
|
+
}, children: profiles.map((profile) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("option", { value: profile.id, children: profile.name }, profile.id)) })
|
|
4540
4651
|
] }),
|
|
4541
|
-
/* @__PURE__ */ (0,
|
|
4652
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4542
4653
|
"Name",
|
|
4543
|
-
/* @__PURE__ */ (0,
|
|
4654
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
|
|
4544
4655
|
] }),
|
|
4545
|
-
/* @__PURE__ */ (0,
|
|
4546
|
-
/* @__PURE__ */ (0,
|
|
4656
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
|
|
4657
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { children: [
|
|
4547
4658
|
"Brand",
|
|
4548
|
-
/* @__PURE__ */ (0,
|
|
4659
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
|
|
4549
4660
|
] }),
|
|
4550
|
-
/* @__PURE__ */ (0,
|
|
4661
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { children: [
|
|
4551
4662
|
"On brand",
|
|
4552
|
-
/* @__PURE__ */ (0,
|
|
4663
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
|
|
4553
4664
|
] })
|
|
4554
4665
|
] }),
|
|
4555
|
-
/* @__PURE__ */ (0,
|
|
4666
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4556
4667
|
"Body font",
|
|
4557
|
-
/* @__PURE__ */ (0,
|
|
4668
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
|
|
4558
4669
|
] }),
|
|
4559
|
-
/* @__PURE__ */ (0,
|
|
4670
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4560
4671
|
"Heading font",
|
|
4561
|
-
/* @__PURE__ */ (0,
|
|
4672
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
|
|
4562
4673
|
] }),
|
|
4563
|
-
/* @__PURE__ */ (0,
|
|
4674
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
|
|
4564
4675
|
"Logo file",
|
|
4565
|
-
/* @__PURE__ */ (0,
|
|
4676
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
|
|
4566
4677
|
] }),
|
|
4567
|
-
/* @__PURE__ */ (0,
|
|
4568
|
-
/* @__PURE__ */ (0,
|
|
4678
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
|
|
4679
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
4569
4680
|
] }),
|
|
4570
|
-
/* @__PURE__ */ (0,
|
|
4571
|
-
/* @__PURE__ */ (0,
|
|
4572
|
-
value.logo ? /* @__PURE__ */ (0,
|
|
4573
|
-
/* @__PURE__ */ (0,
|
|
4681
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
|
|
4682
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
|
|
4683
|
+
value.logo ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
|
|
4684
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("strong", { children: value.name || "Brand preview" })
|
|
4574
4685
|
] }),
|
|
4575
|
-
/* @__PURE__ */ (0,
|
|
4576
|
-
/* @__PURE__ */ (0,
|
|
4577
|
-
/* @__PURE__ */ (0,
|
|
4578
|
-
/* @__PURE__ */ (0,
|
|
4579
|
-
/* @__PURE__ */ (0,
|
|
4686
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
|
|
4687
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { children: "Readable, serializable branding" }),
|
|
4688
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
|
|
4689
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
|
|
4690
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("a", { href: "#brand-profile-preview", children: "Preview link" })
|
|
4580
4691
|
] })
|
|
4581
4692
|
] })
|
|
4582
4693
|
] });
|
|
@@ -4584,7 +4695,7 @@ function BrandProfileEditor({
|
|
|
4584
4695
|
var BrandProfiles = BrandProfileEditor;
|
|
4585
4696
|
|
|
4586
4697
|
// src/components/DiffViewer.tsx
|
|
4587
|
-
var
|
|
4698
|
+
var import_react38 = require("react");
|
|
4588
4699
|
|
|
4589
4700
|
// src/diff-model.ts
|
|
4590
4701
|
function isJsonObject(value) {
|
|
@@ -4635,7 +4746,7 @@ function summarizeDiff(entries, resolutions = {}) {
|
|
|
4635
4746
|
}
|
|
4636
4747
|
|
|
4637
4748
|
// src/components/DiffViewer.tsx
|
|
4638
|
-
var
|
|
4749
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
4639
4750
|
var GROUPS = [
|
|
4640
4751
|
{ kind: "conflicted", label: "Conflicted" },
|
|
4641
4752
|
{ kind: "changed", label: "Changed" },
|
|
@@ -4654,65 +4765,65 @@ function DiffViewer({
|
|
|
4654
4765
|
labels = DEFAULT_LABELS,
|
|
4655
4766
|
className
|
|
4656
4767
|
}) {
|
|
4657
|
-
const id = (0,
|
|
4658
|
-
const entries = (0,
|
|
4659
|
-
const [internalResolutions, setInternalResolutions] = (0,
|
|
4768
|
+
const id = (0, import_react38.useId)();
|
|
4769
|
+
const entries = (0, import_react38.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
|
|
4770
|
+
const [internalResolutions, setInternalResolutions] = (0, import_react38.useState)({});
|
|
4660
4771
|
const resolutions = controlledResolutions ?? internalResolutions;
|
|
4661
4772
|
const summary = summarizeDiff(entries, resolutions);
|
|
4662
4773
|
const resolve2 = (path, resolution) => {
|
|
4663
4774
|
if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
|
|
4664
4775
|
onResolutionChange?.(path, resolution);
|
|
4665
4776
|
};
|
|
4666
|
-
if (entries.length === 0) return /* @__PURE__ */ (0,
|
|
4667
|
-
/* @__PURE__ */ (0,
|
|
4668
|
-
/* @__PURE__ */ (0,
|
|
4777
|
+
if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": "Configuration differences", children: [
|
|
4778
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { children: "No differences" }),
|
|
4779
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { children: "Base, current, and incoming values are aligned." })
|
|
4669
4780
|
] });
|
|
4670
|
-
return /* @__PURE__ */ (0,
|
|
4671
|
-
/* @__PURE__ */ (0,
|
|
4672
|
-
GROUPS.map((group) => /* @__PURE__ */ (0,
|
|
4673
|
-
/* @__PURE__ */ (0,
|
|
4781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": "Configuration differences", children: [
|
|
4782
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-diff-viewer__summary", "aria-label": "Difference summary", children: [
|
|
4783
|
+
GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
|
|
4784
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary[group.kind] }),
|
|
4674
4785
|
" ",
|
|
4675
4786
|
group.label.toLowerCase()
|
|
4676
4787
|
] }, group.kind)),
|
|
4677
|
-
/* @__PURE__ */ (0,
|
|
4678
|
-
/* @__PURE__ */ (0,
|
|
4788
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
|
|
4789
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary.resolved }),
|
|
4679
4790
|
" resolved"
|
|
4680
4791
|
] }),
|
|
4681
|
-
/* @__PURE__ */ (0,
|
|
4682
|
-
/* @__PURE__ */ (0,
|
|
4792
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
|
|
4793
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary.pending }),
|
|
4683
4794
|
" pending"
|
|
4684
4795
|
] })
|
|
4685
4796
|
] }),
|
|
4686
4797
|
GROUPS.map((group) => {
|
|
4687
4798
|
const grouped = entries.filter((entry) => entry.kind === group.kind);
|
|
4688
4799
|
if (!grouped.length) return null;
|
|
4689
|
-
return /* @__PURE__ */ (0,
|
|
4690
|
-
/* @__PURE__ */ (0,
|
|
4800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${group.kind}`, children: [
|
|
4801
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("h3", { id: `${id}-${group.kind}`, children: [
|
|
4691
4802
|
group.label,
|
|
4692
4803
|
" ",
|
|
4693
|
-
/* @__PURE__ */ (0,
|
|
4804
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: grouped.length })
|
|
4694
4805
|
] }),
|
|
4695
4806
|
grouped.map((entry) => {
|
|
4696
4807
|
const resolution = resolutions[entry.path] ?? "pending";
|
|
4697
|
-
return /* @__PURE__ */ (0,
|
|
4698
|
-
/* @__PURE__ */ (0,
|
|
4699
|
-
/* @__PURE__ */ (0,
|
|
4700
|
-
/* @__PURE__ */ (0,
|
|
4808
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
|
|
4809
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("summary", { children: [
|
|
4810
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("code", { children: entry.path }),
|
|
4811
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolution })
|
|
4701
4812
|
] }),
|
|
4702
|
-
/* @__PURE__ */ (0,
|
|
4703
|
-
/* @__PURE__ */ (0,
|
|
4704
|
-
/* @__PURE__ */ (0,
|
|
4813
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { role: "region", "aria-label": `${labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}`} value for ${entry.path}`, children: [
|
|
4814
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("strong", { children: labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}` }),
|
|
4815
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("pre", { children: renderValue(entry[version]) })
|
|
4705
4816
|
] }, version)) }),
|
|
4706
|
-
/* @__PURE__ */ (0,
|
|
4707
|
-
/* @__PURE__ */ (0,
|
|
4708
|
-
/* @__PURE__ */ (0,
|
|
4709
|
-
/* @__PURE__ */ (0,
|
|
4817
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-diff-viewer__actions", "aria-label": `Resolve ${entry.path}`, children: [
|
|
4818
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.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" }),
|
|
4819
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.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" }),
|
|
4820
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.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" })
|
|
4710
4821
|
] })
|
|
4711
4822
|
] }, entry.path);
|
|
4712
4823
|
})
|
|
4713
4824
|
] }, group.kind);
|
|
4714
4825
|
}),
|
|
4715
|
-
/* @__PURE__ */ (0,
|
|
4826
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: [
|
|
4716
4827
|
summary.resolved,
|
|
4717
4828
|
" of ",
|
|
4718
4829
|
entries.length,
|
|
@@ -4769,6 +4880,8 @@ function DiffViewer({
|
|
|
4769
4880
|
Field,
|
|
4770
4881
|
FilterPopover,
|
|
4771
4882
|
FilteredEmptyState,
|
|
4883
|
+
Flow,
|
|
4884
|
+
FlowNode,
|
|
4772
4885
|
ForbiddenState,
|
|
4773
4886
|
Highlighted,
|
|
4774
4887
|
Inbox,
|
|
@@ -4801,6 +4914,8 @@ function DiffViewer({
|
|
|
4801
4914
|
PageIntro,
|
|
4802
4915
|
Pagination,
|
|
4803
4916
|
Peek,
|
|
4917
|
+
Pipeline,
|
|
4918
|
+
PipelineStage,
|
|
4804
4919
|
Popover,
|
|
4805
4920
|
Progress,
|
|
4806
4921
|
PromptDialog,
|