@tensor_1/react 2.42.0 → 2.43.1
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 +24 -0
- package/dist/components/DiscardPrompt.d.ts +10 -4
- package/dist/components/DiscardPrompt.js +5 -5
- package/dist/components/Drawer.d.ts +6 -2
- package/dist/components/Drawer.js +6 -3
- package/dist/components/Modal.d.ts +6 -2
- package/dist/components/Modal.js +1 -1
- package/dist/components/OrgChart.d.ts +126 -0
- package/dist/components/OrgChart.js +686 -0
- package/dist/index.cjs +1583 -896
- package/dist/index.d.cts +142 -4
- package/dist/index.d.ts +2 -1
- package/dist/index.js +5 -0
- package/dist/labels-context.d.ts +3 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -74,6 +74,7 @@ __export(src_exports, {
|
|
|
74
74
|
DEFAULT_INSIGHT_CARD_LABELS: () => DEFAULT_INSIGHT_CARD_LABELS,
|
|
75
75
|
DEFAULT_LIGHTBOX_LABELS: () => DEFAULT_LIGHTBOX_LABELS,
|
|
76
76
|
DEFAULT_MATCH_REVIEW_LABELS: () => DEFAULT_MATCH_REVIEW_LABELS,
|
|
77
|
+
DEFAULT_ORG_CHART_LABELS: () => DEFAULT_ORG_CHART_LABELS,
|
|
77
78
|
DEFAULT_PAGINATION_LABELS: () => DEFAULT_PAGINATION_LABELS,
|
|
78
79
|
DEFAULT_PRESENCE_LABELS: () => DEFAULT_PRESENCE_LABELS,
|
|
79
80
|
DEFAULT_RELATIONSHIP_GRAPH_LABELS: () => DEFAULT_RELATIONSHIP_GRAPH_LABELS,
|
|
@@ -158,6 +159,7 @@ __export(src_exports, {
|
|
|
158
159
|
NotFoundState: () => NotFoundState,
|
|
159
160
|
Note: () => Note,
|
|
160
161
|
NoticeQueue: () => NoticeQueue,
|
|
162
|
+
OrgChart: () => OrgChart,
|
|
161
163
|
PageHeader: () => PageHeader,
|
|
162
164
|
PageIntro: () => PageIntro,
|
|
163
165
|
Pagination: () => Pagination,
|
|
@@ -293,6 +295,8 @@ __export(src_exports, {
|
|
|
293
295
|
nextSortDir: () => nextSortDir,
|
|
294
296
|
normalQuantile: () => normalQuantile,
|
|
295
297
|
normalizeHex: () => normalizeHex,
|
|
298
|
+
orgChartInitials: () => orgChartInitials,
|
|
299
|
+
orgChartZoomStep: () => orgChartZoomStep,
|
|
296
300
|
packLanes: () => packLanes,
|
|
297
301
|
parseDateInput: () => parseDateInput,
|
|
298
302
|
parseDateValue: () => parseDateValue,
|
|
@@ -2748,7 +2752,7 @@ var DialogClose = (0, import_react18.forwardRef)(({ onClick, type = "button", ..
|
|
|
2748
2752
|
}
|
|
2749
2753
|
onClick?.(event);
|
|
2750
2754
|
if (event.defaultPrevented) return;
|
|
2751
|
-
dialog?.requestClose(event.currentTarget);
|
|
2755
|
+
dialog?.requestClose(event.currentTarget, event);
|
|
2752
2756
|
}
|
|
2753
2757
|
}
|
|
2754
2758
|
);
|
|
@@ -2768,11 +2772,11 @@ function useGuardedDialog({ open, onClose, dirty = false, pending = false, label
|
|
|
2768
2772
|
setPromptState(next);
|
|
2769
2773
|
}, []);
|
|
2770
2774
|
const guarded = () => !!latest.current.onClose && (latest.current.dirty || latest.current.pending);
|
|
2771
|
-
const requestClose = (0, import_react18.useCallback)((anchor) => {
|
|
2775
|
+
const requestClose = (0, import_react18.useCallback)((anchor, event) => {
|
|
2772
2776
|
const { open: isOpen2, onClose: close, dirty: isDirty, pending: isPending, prompt: asking } = latest.current;
|
|
2773
2777
|
if (!isOpen2 || !close || isPending || asking) return;
|
|
2774
2778
|
if (!isDirty) {
|
|
2775
|
-
close();
|
|
2779
|
+
close(event);
|
|
2776
2780
|
return;
|
|
2777
2781
|
}
|
|
2778
2782
|
const active = document.activeElement;
|
|
@@ -2800,9 +2804,9 @@ function useGuardedDialog({ open, onClose, dirty = false, pending = false, label
|
|
|
2800
2804
|
return true;
|
|
2801
2805
|
});
|
|
2802
2806
|
dialogRef.current = ref.current;
|
|
2803
|
-
const discard = (0, import_react18.useCallback)(() => {
|
|
2807
|
+
const discard = (0, import_react18.useCallback)((event) => {
|
|
2804
2808
|
setPrompt(null);
|
|
2805
|
-
latest.current.onClose?.();
|
|
2809
|
+
latest.current.onClose?.(event);
|
|
2806
2810
|
}, [setPrompt]);
|
|
2807
2811
|
(0, import_react18.useEffect)(() => {
|
|
2808
2812
|
if (open && dirty && !pending) return;
|
|
@@ -2983,7 +2987,10 @@ function Drawer({
|
|
|
2983
2987
|
className: cx("uix-drawer", side !== "end" && `uix-drawer--${side}`, className),
|
|
2984
2988
|
"aria-labelledby": title ? titleId : void 0,
|
|
2985
2989
|
...rest,
|
|
2986
|
-
onClick:
|
|
2990
|
+
onClick: (event) => {
|
|
2991
|
+
onClick?.(event);
|
|
2992
|
+
if (dismissOnBackdrop && onClose && isBackdropClick(event)) guard.requestClose(null, event);
|
|
2993
|
+
},
|
|
2987
2994
|
onKeyDown: (event) => {
|
|
2988
2995
|
onKeyDown?.(event);
|
|
2989
2996
|
guard.onKeyDown(event);
|
|
@@ -2999,7 +3006,7 @@ function Drawer({
|
|
|
2999
3006
|
ref: closeRef,
|
|
3000
3007
|
type: "button",
|
|
3001
3008
|
className: "uix-drawer__close",
|
|
3002
|
-
onClick: () => guard.requestClose(),
|
|
3009
|
+
onClick: (event) => guard.requestClose(event.currentTarget, event),
|
|
3003
3010
|
"aria-label": closeLabel,
|
|
3004
3011
|
"aria-disabled": pending || void 0,
|
|
3005
3012
|
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CloseIcon, {})
|
|
@@ -4240,7 +4247,7 @@ function Modal({
|
|
|
4240
4247
|
ref: closeRef,
|
|
4241
4248
|
type: "button",
|
|
4242
4249
|
className: "uix-dialog__close",
|
|
4243
|
-
onClick: () => guard.requestClose(),
|
|
4250
|
+
onClick: (event) => guard.requestClose(event.currentTarget, event),
|
|
4244
4251
|
"aria-label": closeLabel,
|
|
4245
4252
|
"aria-disabled": pending || void 0,
|
|
4246
4253
|
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseIcon2, {})
|
|
@@ -9561,8 +9568,684 @@ function VirtualTreeView({
|
|
|
9561
9568
|
);
|
|
9562
9569
|
}
|
|
9563
9570
|
|
|
9564
|
-
// src/components/
|
|
9571
|
+
// src/components/OrgChart.tsx
|
|
9572
|
+
var import_react63 = require("react");
|
|
9565
9573
|
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
9574
|
+
var DEFAULT_ORG_CHART_LABELS = {
|
|
9575
|
+
chart: "Org chart",
|
|
9576
|
+
loading: "Loading\u2026",
|
|
9577
|
+
error: "Could not load.",
|
|
9578
|
+
retry: "Retry",
|
|
9579
|
+
reportsOne: "{count} direct report",
|
|
9580
|
+
reportsMany: "{count} direct reports",
|
|
9581
|
+
expand: "Show reports",
|
|
9582
|
+
collapse: "Hide reports",
|
|
9583
|
+
toolbar: "Zoom",
|
|
9584
|
+
zoomIn: "Zoom in",
|
|
9585
|
+
zoomOut: "Zoom out",
|
|
9586
|
+
fit: "Fit",
|
|
9587
|
+
zoomLevel: "{percent}%",
|
|
9588
|
+
resetZoom: "{percent}, reset to 100%"
|
|
9589
|
+
};
|
|
9590
|
+
var ZOOM_STEPS = [0.25, 0.33, 0.5, 0.67, 0.8, 0.9, 1, 1.1, 1.25, 1.5];
|
|
9591
|
+
var MIN_ZOOM = ZOOM_STEPS[0];
|
|
9592
|
+
var MAX_ZOOM = ZOOM_STEPS[ZOOM_STEPS.length - 1];
|
|
9593
|
+
var clampZoom = (z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z));
|
|
9594
|
+
var orgChartZoomStep = (zoom, dir) => {
|
|
9595
|
+
if (dir > 0) return ZOOM_STEPS.find((s) => s > zoom + 1e-3) ?? MAX_ZOOM;
|
|
9596
|
+
return [...ZOOM_STEPS].reverse().find((s) => s < zoom - 1e-3) ?? MIN_ZOOM;
|
|
9597
|
+
};
|
|
9598
|
+
var orgChartInitials = (name) => {
|
|
9599
|
+
const letterOf = (word) => /\p{L}/u.exec(word)?.[0] ?? "";
|
|
9600
|
+
const words = name.replace(/[([{][^)\]}]*[)\]}]/g, " ").trim().split(/\s+/).filter((word) => letterOf(word) !== "");
|
|
9601
|
+
const named = words.length > 1 ? words.filter((word, i) => !(word.endsWith(".") && i < words.length - 1)) : words;
|
|
9602
|
+
const parts = named.length > 0 ? named : words;
|
|
9603
|
+
if (parts.length === 0) return "";
|
|
9604
|
+
const first = letterOf(parts[0]);
|
|
9605
|
+
const last = parts.length > 1 ? letterOf(parts[parts.length - 1]) : "";
|
|
9606
|
+
return `${first}${last}`.toLocaleUpperCase();
|
|
9607
|
+
};
|
|
9608
|
+
var LOADING2 = "::uix-loading";
|
|
9609
|
+
var FAILED2 = "::uix-error";
|
|
9610
|
+
var syntheticOf2 = (id) => id.endsWith(LOADING2) ? { parent: id.slice(0, -LOADING2.length), kind: "loading" } : id.endsWith(FAILED2) ? { parent: id.slice(0, -FAILED2.length), kind: "error" } : null;
|
|
9611
|
+
var idRef = (chartId, nodeId, part) => {
|
|
9612
|
+
let hash = 5381;
|
|
9613
|
+
for (let i = 0; i < nodeId.length; i += 1) hash = (hash * 33 ^ nodeId.charCodeAt(i)) >>> 0;
|
|
9614
|
+
return `${chartId}-${nodeId.replace(/[^A-Za-z0-9_-]/g, "_").slice(0, 40)}-${hash.toString(36)}-${part}`;
|
|
9615
|
+
};
|
|
9616
|
+
var isExpandable = (node, known, lazy) => known ? known.length > 0 : lazy && (node.reportCount ?? 0) > 0;
|
|
9617
|
+
var ChevronIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime87.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_runtime87.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
9618
|
+
var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M8 3v10M3 8h10" }) });
|
|
9619
|
+
var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M3 8h10" }) });
|
|
9620
|
+
var FitIcon = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4" }) });
|
|
9621
|
+
var useIsoLayoutEffect = typeof window === "undefined" ? import_react63.useEffect : import_react63.useLayoutEffect;
|
|
9622
|
+
var Ring2 = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-spinner uix-spinner--sm", "aria-hidden": "true" });
|
|
9623
|
+
function StatusItem({ parent, kind, level, ctx }) {
|
|
9624
|
+
const id = parent + (kind === "error" ? FAILED2 : LOADING2);
|
|
9625
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
9626
|
+
"li",
|
|
9627
|
+
{
|
|
9628
|
+
role: "treeitem",
|
|
9629
|
+
"aria-level": level,
|
|
9630
|
+
"aria-setsize": 1,
|
|
9631
|
+
"aria-posinset": 1,
|
|
9632
|
+
"data-id": id,
|
|
9633
|
+
tabIndex: ctx.tabbableId === id ? 0 : -1,
|
|
9634
|
+
className: "uix-org-chart__item uix-org-chart__item--status",
|
|
9635
|
+
onFocus: (e) => {
|
|
9636
|
+
if (e.target === e.currentTarget) ctx.onFocusItem(id);
|
|
9637
|
+
},
|
|
9638
|
+
children: kind === "error" ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "uix-org-chart__status uix-org-chart__status--error", onClick: () => ctx.onActivate(id), children: [
|
|
9639
|
+
ctx.labels.error,
|
|
9640
|
+
" ",
|
|
9641
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-org-chart__retry", children: ctx.labels.retry })
|
|
9642
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "uix-org-chart__status", children: [
|
|
9643
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Ring2, {}),
|
|
9644
|
+
ctx.labels.loading
|
|
9645
|
+
] })
|
|
9646
|
+
}
|
|
9647
|
+
);
|
|
9648
|
+
}
|
|
9649
|
+
function OrgChartItem({ node, level, size, pos, ctx }) {
|
|
9650
|
+
const known = node.children ?? ctx.loaded.get(node.id);
|
|
9651
|
+
const expandable = isExpandable(node, known, ctx.lazy);
|
|
9652
|
+
const open = expandable && ctx.expanded.has(node.id);
|
|
9653
|
+
const count2 = known ? known.length : node.reportCount ?? 0;
|
|
9654
|
+
const nameId = idRef(ctx.chartId, node.id, "name");
|
|
9655
|
+
const descId = idRef(ctx.chartId, node.id, "desc");
|
|
9656
|
+
const reportsText = count2 > 0 ? fillLabel(count2 === 1 ? ctx.labels.reportsOne : ctx.labels.reportsMany, { count: count2 }) : "";
|
|
9657
|
+
const waiting = open && !known;
|
|
9658
|
+
const status = waiting ? ctx.failed.has(node.id) ? "error" : "loading" : null;
|
|
9659
|
+
const children = open && known && known.length > 0 ? known : null;
|
|
9660
|
+
const stack = ctx.stackLeaves && children !== null && children.every((c) => !isExpandable(c, c.children ?? ctx.loaded.get(c.id), ctx.lazy));
|
|
9661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
|
|
9662
|
+
"li",
|
|
9663
|
+
{
|
|
9664
|
+
role: "treeitem",
|
|
9665
|
+
"aria-level": level,
|
|
9666
|
+
"aria-setsize": size,
|
|
9667
|
+
"aria-posinset": pos,
|
|
9668
|
+
"aria-expanded": expandable ? open : void 0,
|
|
9669
|
+
"aria-selected": ctx.selectable ? ctx.selected === node.id : void 0,
|
|
9670
|
+
"aria-busy": ctx.loading.has(node.id) || void 0,
|
|
9671
|
+
"aria-labelledby": nameId,
|
|
9672
|
+
"aria-describedby": descId,
|
|
9673
|
+
"data-id": node.id,
|
|
9674
|
+
tabIndex: ctx.tabbableId === node.id ? 0 : -1,
|
|
9675
|
+
className: "uix-org-chart__item",
|
|
9676
|
+
onFocus: (e) => {
|
|
9677
|
+
if (e.target === e.currentTarget) ctx.onFocusItem(node.id);
|
|
9678
|
+
},
|
|
9679
|
+
children: [
|
|
9680
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-org-chart__node", onClick: () => ctx.onActivate(node.id), children: [
|
|
9681
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Avatar, { size: "lg", src: node.photo, children: node.initials ?? orgChartInitials(node.name) }),
|
|
9682
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "uix-org-chart__body", children: [
|
|
9683
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-org-chart__name", id: nameId, children: node.name }),
|
|
9684
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { id: descId, className: "uix-org-chart__desc", children: [
|
|
9685
|
+
node.title ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-org-chart__title", children: node.title }) : null,
|
|
9686
|
+
node.team || node.location ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { className: "uix-org-chart__meta", children: [
|
|
9687
|
+
node.team ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: node.team }) : null,
|
|
9688
|
+
node.location ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: node.location }) : null
|
|
9689
|
+
] }) : null,
|
|
9690
|
+
node.badge ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-org-chart__badge", children: node.badge }) : null,
|
|
9691
|
+
reportsText ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-visually-hidden", children: reportsText }) : null
|
|
9692
|
+
] })
|
|
9693
|
+
] }),
|
|
9694
|
+
expandable ? (
|
|
9695
|
+
// A pointer target for showing the reports without opening the person. Keyboard users
|
|
9696
|
+
// toggle with Space or the arrow keys on the item, so it stays out of the tab order and
|
|
9697
|
+
// never takes focus (the item keeps it), and the item's aria-expanded carries its state.
|
|
9698
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
|
|
9699
|
+
"button",
|
|
9700
|
+
{
|
|
9701
|
+
type: "button",
|
|
9702
|
+
tabIndex: -1,
|
|
9703
|
+
"aria-hidden": "true",
|
|
9704
|
+
title: open ? ctx.labels.collapse : ctx.labels.expand,
|
|
9705
|
+
className: "uix-org-chart__toggle",
|
|
9706
|
+
onMouseDown: (e) => e.preventDefault(),
|
|
9707
|
+
onClick: (e) => {
|
|
9708
|
+
e.stopPropagation();
|
|
9709
|
+
ctx.onToggle(node.id);
|
|
9710
|
+
},
|
|
9711
|
+
children: [
|
|
9712
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ChevronIcon3, {}),
|
|
9713
|
+
count2 > 0 ? count2 : null
|
|
9714
|
+
]
|
|
9715
|
+
}
|
|
9716
|
+
)
|
|
9717
|
+
) : null
|
|
9718
|
+
] }),
|
|
9719
|
+
status ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("ul", { role: "group", className: "uix-org-chart__group", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(StatusItem, { parent: node.id, kind: status, level: level + 1, ctx }) }) : children ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("ul", { role: "group", className: "uix-org-chart__group", "data-stack": stack ? "" : void 0, children: children.map((child, i) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(OrgChartItem, { node: child, level: level + 1, size: children.length, pos: i + 1, ctx }, child.id)) }) : null
|
|
9720
|
+
]
|
|
9721
|
+
}
|
|
9722
|
+
);
|
|
9723
|
+
}
|
|
9724
|
+
function OrgChart({
|
|
9725
|
+
nodes,
|
|
9726
|
+
expanded: controlledExpanded,
|
|
9727
|
+
defaultExpanded,
|
|
9728
|
+
onToggle,
|
|
9729
|
+
selected,
|
|
9730
|
+
onSelect,
|
|
9731
|
+
loadChildren,
|
|
9732
|
+
revealId,
|
|
9733
|
+
onReveal,
|
|
9734
|
+
stackLeaves = true,
|
|
9735
|
+
defaultZoom = 1,
|
|
9736
|
+
labels: labelOverrides,
|
|
9737
|
+
className,
|
|
9738
|
+
"aria-label": ariaLabel,
|
|
9739
|
+
"aria-labelledby": ariaLabelledby,
|
|
9740
|
+
...props
|
|
9741
|
+
}) {
|
|
9742
|
+
const labels = { ...DEFAULT_ORG_CHART_LABELS, ...useUixLabels().orgChart, ...labelOverrides };
|
|
9743
|
+
const chartId = (0, import_react63.useId)().replace(/[^A-Za-z0-9_-]/g, "");
|
|
9744
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react63.useState)(() => defaultExpanded ?? /* @__PURE__ */ new Set());
|
|
9745
|
+
const expanded = controlledExpanded ?? internalExpanded;
|
|
9746
|
+
const treeRef = (0, import_react63.useRef)(null);
|
|
9747
|
+
const viewportRef = (0, import_react63.useRef)(null);
|
|
9748
|
+
const [focusedId, setFocusedId] = (0, import_react63.useState)(void 0);
|
|
9749
|
+
const selectable = selected !== void 0 || onSelect != null;
|
|
9750
|
+
const lazy = Boolean(loadChildren);
|
|
9751
|
+
const userMoved = (0, import_react63.useRef)(false);
|
|
9752
|
+
const placed = (0, import_react63.useRef)(null);
|
|
9753
|
+
const scrollFrame = (left, top) => {
|
|
9754
|
+
const viewport = viewportRef.current;
|
|
9755
|
+
if (!viewport) return;
|
|
9756
|
+
viewport.scrollLeft = left;
|
|
9757
|
+
viewport.scrollTop = top;
|
|
9758
|
+
placed.current = { left: viewport.scrollLeft, top: viewport.scrollTop };
|
|
9759
|
+
};
|
|
9760
|
+
const [loaded, setLoaded] = (0, import_react63.useState)(() => /* @__PURE__ */ new Map());
|
|
9761
|
+
const [failed, setFailed] = (0, import_react63.useState)(() => /* @__PURE__ */ new Set());
|
|
9762
|
+
const [loading, setLoading] = (0, import_react63.useState)(() => /* @__PURE__ */ new Set());
|
|
9763
|
+
const [announcement, setAnnouncement] = (0, import_react63.useState)("");
|
|
9764
|
+
const inFlight = (0, import_react63.useRef)(/* @__PURE__ */ new Set());
|
|
9765
|
+
const loadRef = (0, import_react63.useRef)(loadChildren);
|
|
9766
|
+
loadRef.current = loadChildren;
|
|
9767
|
+
const errorWord = (0, import_react63.useRef)(labels.error);
|
|
9768
|
+
errorWord.current = labels.error;
|
|
9769
|
+
const refocus = (0, import_react63.useRef)(null);
|
|
9770
|
+
const load = (0, import_react63.useCallback)((node) => {
|
|
9771
|
+
const run = loadRef.current;
|
|
9772
|
+
if (!run || inFlight.current.has(node.id)) return;
|
|
9773
|
+
inFlight.current.add(node.id);
|
|
9774
|
+
setFailed((prev) => {
|
|
9775
|
+
if (!prev.has(node.id)) return prev;
|
|
9776
|
+
const next = new Set(prev);
|
|
9777
|
+
next.delete(node.id);
|
|
9778
|
+
return next;
|
|
9779
|
+
});
|
|
9780
|
+
setLoading((prev) => new Set(prev).add(node.id));
|
|
9781
|
+
setAnnouncement("");
|
|
9782
|
+
const settle2 = (apply, focusNext) => {
|
|
9783
|
+
inFlight.current.delete(node.id);
|
|
9784
|
+
const active = typeof document !== "undefined" ? document.activeElement : null;
|
|
9785
|
+
if (active?.dataset?.id === node.id + LOADING2 || active?.dataset?.id === node.id + FAILED2) refocus.current = focusNext;
|
|
9786
|
+
setLoading((prev) => {
|
|
9787
|
+
const next = new Set(prev);
|
|
9788
|
+
next.delete(node.id);
|
|
9789
|
+
return next;
|
|
9790
|
+
});
|
|
9791
|
+
apply();
|
|
9792
|
+
};
|
|
9793
|
+
run(node).then(
|
|
9794
|
+
// Focus that waited on the loading row moves on to the first report, the key's intent.
|
|
9795
|
+
(children) => settle2(() => setLoaded((prev) => new Map(prev).set(node.id, children)), children[0]?.id ?? node.id),
|
|
9796
|
+
() => settle2(() => {
|
|
9797
|
+
setFailed((prev) => new Set(prev).add(node.id));
|
|
9798
|
+
setAnnouncement(errorWord.current);
|
|
9799
|
+
}, node.id + FAILED2)
|
|
9800
|
+
);
|
|
9801
|
+
}, []);
|
|
9802
|
+
(0, import_react63.useEffect)(() => {
|
|
9803
|
+
if (!loadChildren) return;
|
|
9804
|
+
const visit = (list) => {
|
|
9805
|
+
for (const node of list) {
|
|
9806
|
+
if (!expanded.has(node.id)) continue;
|
|
9807
|
+
const known = node.children ?? loaded.get(node.id);
|
|
9808
|
+
if (known) visit(known);
|
|
9809
|
+
else if ((node.reportCount ?? 0) > 0 && !failed.has(node.id)) load(node);
|
|
9810
|
+
}
|
|
9811
|
+
};
|
|
9812
|
+
visit(nodes);
|
|
9813
|
+
}, [nodes, expanded, loaded, failed, loadChildren, load]);
|
|
9814
|
+
const itemEl = (0, import_react63.useCallback)((id) => treeRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(id)}"]`) ?? null, []);
|
|
9815
|
+
const cardOf = (el) => el?.querySelector(":scope > .uix-org-chart__node, :scope > .uix-org-chart__status") ?? el;
|
|
9816
|
+
(0, import_react63.useEffect)(() => {
|
|
9817
|
+
const id = refocus.current;
|
|
9818
|
+
if (id == null) return;
|
|
9819
|
+
refocus.current = null;
|
|
9820
|
+
setFocusedId(id);
|
|
9821
|
+
itemEl(id)?.focus();
|
|
9822
|
+
}, [loaded, failed, loading, itemEl]);
|
|
9823
|
+
const findPath = (0, import_react63.useCallback)((id, list = nodes, path = []) => {
|
|
9824
|
+
for (const node of list) {
|
|
9825
|
+
if (node.id === id) return [...path, node];
|
|
9826
|
+
const inside = findPath(id, node.children ?? loaded.get(node.id) ?? [], [...path, node]);
|
|
9827
|
+
if (inside) return inside;
|
|
9828
|
+
}
|
|
9829
|
+
return null;
|
|
9830
|
+
}, [nodes, loaded]);
|
|
9831
|
+
const anchor = (0, import_react63.useRef)(null);
|
|
9832
|
+
const viewportBox = () => viewportRef.current?.getBoundingClientRect();
|
|
9833
|
+
const holdInPlace = (id) => {
|
|
9834
|
+
const card = cardOf(itemEl(id));
|
|
9835
|
+
const frame = viewportBox();
|
|
9836
|
+
if (!card || !frame || !viewportRef.current || layoutOf(viewportRef.current) === "list") {
|
|
9837
|
+
anchor.current = null;
|
|
9838
|
+
return;
|
|
9839
|
+
}
|
|
9840
|
+
const box = card.getBoundingClientRect();
|
|
9841
|
+
anchor.current = { id, x: box.left - frame.left, y: box.top - frame.top };
|
|
9842
|
+
};
|
|
9843
|
+
useIsoLayoutEffect(() => {
|
|
9844
|
+
const a = anchor.current;
|
|
9845
|
+
const viewport = viewportRef.current;
|
|
9846
|
+
if (!a || !viewport) return;
|
|
9847
|
+
const card = cardOf(itemEl(a.id));
|
|
9848
|
+
const frame = viewport.getBoundingClientRect();
|
|
9849
|
+
if (card) {
|
|
9850
|
+
const box = card.getBoundingClientRect();
|
|
9851
|
+
scrollFrame(viewport.scrollLeft + box.left - frame.left - a.x, viewport.scrollTop + box.top - frame.top - a.y);
|
|
9852
|
+
}
|
|
9853
|
+
if (!card || !inFlight.current.has(a.id) && !itemEl(a.id + LOADING2)) anchor.current = null;
|
|
9854
|
+
});
|
|
9855
|
+
const toggle = (0, import_react63.useCallback)((id) => {
|
|
9856
|
+
const opening = !expanded.has(id);
|
|
9857
|
+
userMoved.current = true;
|
|
9858
|
+
holdInPlace(id);
|
|
9859
|
+
const el = itemEl(id);
|
|
9860
|
+
const active = typeof document !== "undefined" ? document.activeElement : null;
|
|
9861
|
+
if (!opening && el && active && active !== el && el.contains(active)) {
|
|
9862
|
+
el.focus();
|
|
9863
|
+
setFocusedId(id);
|
|
9864
|
+
}
|
|
9865
|
+
if (!controlledExpanded) {
|
|
9866
|
+
setInternalExpanded((prev) => {
|
|
9867
|
+
const next = new Set(prev);
|
|
9868
|
+
if (next.has(id)) next.delete(id);
|
|
9869
|
+
else next.add(id);
|
|
9870
|
+
return next;
|
|
9871
|
+
});
|
|
9872
|
+
}
|
|
9873
|
+
onToggle?.(id, opening);
|
|
9874
|
+
}, [expanded, controlledExpanded, onToggle, itemEl]);
|
|
9875
|
+
const retry = (0, import_react63.useCallback)((parentId) => {
|
|
9876
|
+
const path = findPath(parentId);
|
|
9877
|
+
const parent = path ? path[path.length - 1] : void 0;
|
|
9878
|
+
if (!parent) return;
|
|
9879
|
+
refocus.current = parent.id + LOADING2;
|
|
9880
|
+
setFailed((prev) => {
|
|
9881
|
+
const next = new Set(prev);
|
|
9882
|
+
next.delete(parent.id);
|
|
9883
|
+
return next;
|
|
9884
|
+
});
|
|
9885
|
+
load(parent);
|
|
9886
|
+
}, [findPath, load]);
|
|
9887
|
+
const select = (0, import_react63.useCallback)((id) => {
|
|
9888
|
+
const synthetic = syntheticOf2(id);
|
|
9889
|
+
if (!synthetic) {
|
|
9890
|
+
onSelect?.(id);
|
|
9891
|
+
return;
|
|
9892
|
+
}
|
|
9893
|
+
if (synthetic.kind === "error") retry(synthetic.parent);
|
|
9894
|
+
}, [onSelect, retry]);
|
|
9895
|
+
const rendered = (0, import_react63.useMemo)(() => {
|
|
9896
|
+
const ids = /* @__PURE__ */ new Set();
|
|
9897
|
+
const visit = (list) => {
|
|
9898
|
+
for (const node of list) {
|
|
9899
|
+
ids.add(node.id);
|
|
9900
|
+
if (!expanded.has(node.id)) continue;
|
|
9901
|
+
const known = node.children ?? loaded.get(node.id);
|
|
9902
|
+
if (known) visit(known);
|
|
9903
|
+
else if (lazy && (node.reportCount ?? 0) > 0) ids.add(node.id + (failed.has(node.id) ? FAILED2 : LOADING2));
|
|
9904
|
+
}
|
|
9905
|
+
};
|
|
9906
|
+
visit(nodes);
|
|
9907
|
+
return ids;
|
|
9908
|
+
}, [nodes, expanded, loaded, failed, lazy]);
|
|
9909
|
+
const tabbableId = (focusedId && rendered.has(focusedId) ? focusedId : void 0) ?? (selected && rendered.has(selected) ? selected : void 0) ?? nodes[0]?.id;
|
|
9910
|
+
useIsoLayoutEffect(() => {
|
|
9911
|
+
if (!focusedId || rendered.has(focusedId) || typeof document === "undefined") return;
|
|
9912
|
+
const active = document.activeElement;
|
|
9913
|
+
if (active && active !== document.body) return;
|
|
9914
|
+
const target = syntheticOf2(focusedId)?.parent ?? focusedId;
|
|
9915
|
+
const line = findPath(target) ?? [];
|
|
9916
|
+
const visible = [...line].reverse().find((n) => rendered.has(n.id));
|
|
9917
|
+
if (visible) {
|
|
9918
|
+
setFocusedId(visible.id);
|
|
9919
|
+
itemEl(visible.id)?.focus();
|
|
9920
|
+
}
|
|
9921
|
+
}, [rendered]);
|
|
9922
|
+
const activate = (0, import_react63.useCallback)((id) => {
|
|
9923
|
+
setFocusedId(id);
|
|
9924
|
+
itemEl(id)?.focus({ preventScroll: true });
|
|
9925
|
+
select(id);
|
|
9926
|
+
}, [itemEl, select]);
|
|
9927
|
+
const revealed = (0, import_react63.useRef)(null);
|
|
9928
|
+
(0, import_react63.useEffect)(() => {
|
|
9929
|
+
if (!revealId) {
|
|
9930
|
+
revealed.current = null;
|
|
9931
|
+
return;
|
|
9932
|
+
}
|
|
9933
|
+
if (revealed.current === revealId) return;
|
|
9934
|
+
const el = itemEl(revealId);
|
|
9935
|
+
if (!el) return;
|
|
9936
|
+
revealed.current = revealId;
|
|
9937
|
+
userMoved.current = true;
|
|
9938
|
+
cardOf(el)?.scrollIntoView?.({ block: "center", inline: "center" });
|
|
9939
|
+
el.focus({ preventScroll: true });
|
|
9940
|
+
setFocusedId(revealId);
|
|
9941
|
+
onReveal?.(revealId);
|
|
9942
|
+
});
|
|
9943
|
+
const [zoom, setZoom] = (0, import_react63.useState)(() => typeof defaultZoom === "number" ? clampZoom(defaultZoom) : 1);
|
|
9944
|
+
const zoomCentre = (0, import_react63.useRef)(null);
|
|
9945
|
+
const zoomTo = (next) => {
|
|
9946
|
+
const viewport = viewportRef.current;
|
|
9947
|
+
if (viewport) {
|
|
9948
|
+
zoomCentre.current = {
|
|
9949
|
+
x: (viewport.scrollLeft + viewport.clientWidth / 2) / zoom,
|
|
9950
|
+
y: (viewport.scrollTop + viewport.clientHeight / 2) / zoom,
|
|
9951
|
+
from: zoom
|
|
9952
|
+
};
|
|
9953
|
+
}
|
|
9954
|
+
setZoom(clampZoom(next));
|
|
9955
|
+
};
|
|
9956
|
+
useIsoLayoutEffect(() => {
|
|
9957
|
+
const c = zoomCentre.current;
|
|
9958
|
+
const viewport = viewportRef.current;
|
|
9959
|
+
if (!c || !viewport || c.from === zoom) return;
|
|
9960
|
+
zoomCentre.current = null;
|
|
9961
|
+
scrollFrame(c.x * zoom - viewport.clientWidth / 2, c.y * zoom - viewport.clientHeight / 2);
|
|
9962
|
+
}, [zoom]);
|
|
9963
|
+
const fitZoom = (0, import_react63.useCallback)((current) => {
|
|
9964
|
+
const viewport = viewportRef.current;
|
|
9965
|
+
const tree = treeRef.current;
|
|
9966
|
+
if (!viewport || !tree) return null;
|
|
9967
|
+
const cs = getComputedStyle(viewport);
|
|
9968
|
+
const room = viewport.clientWidth - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
|
|
9969
|
+
const width = tree.getBoundingClientRect().width / current;
|
|
9970
|
+
if (!(room > 0) || !(width > 0)) return null;
|
|
9971
|
+
return clampZoom(Math.min(1, room / width));
|
|
9972
|
+
}, []);
|
|
9973
|
+
const settledWidth = (0, import_react63.useRef)(-1);
|
|
9974
|
+
useIsoLayoutEffect(() => {
|
|
9975
|
+
const viewport = viewportRef.current;
|
|
9976
|
+
const tree = treeRef.current;
|
|
9977
|
+
if (userMoved.current || !viewport || !tree || nodes.length === 0) return;
|
|
9978
|
+
const width = Math.round(tree.getBoundingClientRect().width);
|
|
9979
|
+
if (width === settledWidth.current) return;
|
|
9980
|
+
if (defaultZoom === "fit") {
|
|
9981
|
+
const next = fitZoom(zoom);
|
|
9982
|
+
if (next !== null && Math.abs(next - zoom) > 5e-3) {
|
|
9983
|
+
setZoom(next);
|
|
9984
|
+
return;
|
|
9985
|
+
}
|
|
9986
|
+
}
|
|
9987
|
+
settledWidth.current = width;
|
|
9988
|
+
if (viewport.scrollWidth > viewport.clientWidth) scrollFrame((viewport.scrollWidth - viewport.clientWidth) / 2, viewport.scrollTop);
|
|
9989
|
+
});
|
|
9990
|
+
const onScroll = () => {
|
|
9991
|
+
const viewport = viewportRef.current;
|
|
9992
|
+
const at = placed.current;
|
|
9993
|
+
if (!viewport) return;
|
|
9994
|
+
if (at && Math.abs(viewport.scrollLeft - at.left) <= 1 && Math.abs(viewport.scrollTop - at.top) <= 1) return;
|
|
9995
|
+
userMoved.current = true;
|
|
9996
|
+
};
|
|
9997
|
+
const pan = (0, import_react63.useRef)(null);
|
|
9998
|
+
const [panning, setPanning] = (0, import_react63.useState)(false);
|
|
9999
|
+
const onPointerDown = (e) => {
|
|
10000
|
+
if (e.button !== 0 || e.pointerType === "touch") return;
|
|
10001
|
+
if (e.target.closest(".uix-org-chart__node, .uix-org-chart__status")) return;
|
|
10002
|
+
const viewport = viewportRef.current;
|
|
10003
|
+
if (!viewport || layoutOf(viewport) === "list") return;
|
|
10004
|
+
const frame = viewport.getBoundingClientRect();
|
|
10005
|
+
const x = e.clientX - frame.left - viewport.clientLeft;
|
|
10006
|
+
const y = e.clientY - frame.top - viewport.clientTop;
|
|
10007
|
+
if (x > viewport.clientWidth || y > viewport.clientHeight) return;
|
|
10008
|
+
pan.current = { x: e.clientX, y: e.clientY, left: viewport.scrollLeft, top: viewport.scrollTop, id: e.pointerId };
|
|
10009
|
+
userMoved.current = true;
|
|
10010
|
+
viewport.setPointerCapture?.(e.pointerId);
|
|
10011
|
+
setPanning(true);
|
|
10012
|
+
};
|
|
10013
|
+
const onMouseDown = (e) => {
|
|
10014
|
+
if (pan.current) e.preventDefault();
|
|
10015
|
+
};
|
|
10016
|
+
const onPointerMove = (e) => {
|
|
10017
|
+
const p = pan.current;
|
|
10018
|
+
const viewport = viewportRef.current;
|
|
10019
|
+
if (!p || !viewport || e.pointerId !== p.id) return;
|
|
10020
|
+
scrollFrame(p.left - (e.clientX - p.x), p.top - (e.clientY - p.y));
|
|
10021
|
+
};
|
|
10022
|
+
const endPan = (e) => {
|
|
10023
|
+
if (!pan.current || e.pointerId !== pan.current.id) return;
|
|
10024
|
+
viewportRef.current?.releasePointerCapture?.(e.pointerId);
|
|
10025
|
+
pan.current = null;
|
|
10026
|
+
setPanning(false);
|
|
10027
|
+
};
|
|
10028
|
+
const focusItem = (el) => {
|
|
10029
|
+
if (el) {
|
|
10030
|
+
el.focus();
|
|
10031
|
+
setFocusedId(el.dataset.id);
|
|
10032
|
+
}
|
|
10033
|
+
};
|
|
10034
|
+
const onKeyDown = (e) => {
|
|
10035
|
+
const cur = e.target.closest('[role="treeitem"]');
|
|
10036
|
+
const tree = treeRef.current;
|
|
10037
|
+
if (!cur || !tree?.contains(cur) || e.altKey || e.ctrlKey || e.metaKey) return;
|
|
10038
|
+
const items = Array.from(tree.querySelectorAll('[role="treeitem"]'));
|
|
10039
|
+
const idx = items.indexOf(cur);
|
|
10040
|
+
const id = cur.dataset.id;
|
|
10041
|
+
const state = cur.getAttribute("aria-expanded");
|
|
10042
|
+
const parent = cur.parentElement?.closest('[role="treeitem"]') ?? null;
|
|
10043
|
+
const firstChild = cur.querySelector(':scope > [role="group"] > [role="treeitem"]');
|
|
10044
|
+
const column = cur.parentElement;
|
|
10045
|
+
const stacked = column?.hasAttribute("data-stack") ?? false;
|
|
10046
|
+
const sameLevel = (dir) => {
|
|
10047
|
+
const level = cur.getAttribute("aria-level");
|
|
10048
|
+
const row = items.filter((el) => el.getAttribute("aria-level") === level);
|
|
10049
|
+
const edge = stacked && column ? dir > 0 ? column.lastElementChild : column.firstElementChild : cur;
|
|
10050
|
+
return row[row.indexOf(edge ?? cur) + dir];
|
|
10051
|
+
};
|
|
10052
|
+
const sibling = (dir) => dir > 0 ? cur.nextElementSibling : cur.previousElementSibling;
|
|
10053
|
+
const list = viewportRef.current ? layoutOf(viewportRef.current) === "list" : false;
|
|
10054
|
+
const synthetic = syntheticOf2(id);
|
|
10055
|
+
let handled = true;
|
|
10056
|
+
switch (e.key) {
|
|
10057
|
+
case "Home":
|
|
10058
|
+
focusItem(items[0]);
|
|
10059
|
+
break;
|
|
10060
|
+
case "End":
|
|
10061
|
+
focusItem(items[items.length - 1]);
|
|
10062
|
+
break;
|
|
10063
|
+
case "Enter":
|
|
10064
|
+
select(id);
|
|
10065
|
+
setFocusedId(id);
|
|
10066
|
+
break;
|
|
10067
|
+
case " ":
|
|
10068
|
+
if (synthetic) select(id);
|
|
10069
|
+
else if (state !== null) toggle(id);
|
|
10070
|
+
else select(id);
|
|
10071
|
+
setFocusedId(id);
|
|
10072
|
+
break;
|
|
10073
|
+
default:
|
|
10074
|
+
if (list) {
|
|
10075
|
+
switch (e.key) {
|
|
10076
|
+
case "ArrowDown":
|
|
10077
|
+
focusItem(items[Math.min(idx + 1, items.length - 1)]);
|
|
10078
|
+
break;
|
|
10079
|
+
case "ArrowUp":
|
|
10080
|
+
focusItem(items[Math.max(idx - 1, 0)]);
|
|
10081
|
+
break;
|
|
10082
|
+
case "ArrowRight":
|
|
10083
|
+
if (state === "false") toggle(id);
|
|
10084
|
+
else if (state === "true") focusItem(firstChild);
|
|
10085
|
+
break;
|
|
10086
|
+
case "ArrowLeft":
|
|
10087
|
+
if (state === "true") toggle(id);
|
|
10088
|
+
else focusItem(parent);
|
|
10089
|
+
break;
|
|
10090
|
+
default:
|
|
10091
|
+
handled = false;
|
|
10092
|
+
}
|
|
10093
|
+
} else {
|
|
10094
|
+
switch (e.key) {
|
|
10095
|
+
case "ArrowUp":
|
|
10096
|
+
focusItem(stacked ? sibling(-1) ?? parent : parent);
|
|
10097
|
+
break;
|
|
10098
|
+
case "ArrowDown":
|
|
10099
|
+
if (stacked && sibling(1) && state !== "true") focusItem(sibling(1));
|
|
10100
|
+
else if (state === "false") toggle(id);
|
|
10101
|
+
else if (state === "true") focusItem(firstChild);
|
|
10102
|
+
break;
|
|
10103
|
+
case "ArrowRight":
|
|
10104
|
+
focusItem(sameLevel(1));
|
|
10105
|
+
break;
|
|
10106
|
+
case "ArrowLeft":
|
|
10107
|
+
focusItem(sameLevel(-1));
|
|
10108
|
+
break;
|
|
10109
|
+
default:
|
|
10110
|
+
handled = false;
|
|
10111
|
+
}
|
|
10112
|
+
}
|
|
10113
|
+
if (!handled && e.key.length === 1 && e.key.trim() !== "") {
|
|
10114
|
+
const ch = e.key.toLocaleLowerCase();
|
|
10115
|
+
const nameOf = (el) => document.getElementById(el.getAttribute("aria-labelledby") ?? "")?.textContent?.trim().toLocaleLowerCase() ?? "";
|
|
10116
|
+
const people = items.filter((el) => !syntheticOf2(el.dataset.id ?? ""));
|
|
10117
|
+
const start = people.indexOf(cur);
|
|
10118
|
+
const next = [...people.slice(start + 1), ...people.slice(0, start + 1)].find((el) => nameOf(el).startsWith(ch));
|
|
10119
|
+
if (next) {
|
|
10120
|
+
focusItem(next);
|
|
10121
|
+
handled = true;
|
|
10122
|
+
}
|
|
10123
|
+
}
|
|
10124
|
+
}
|
|
10125
|
+
if (handled) e.preventDefault();
|
|
10126
|
+
};
|
|
10127
|
+
const ctx = {
|
|
10128
|
+
expanded,
|
|
10129
|
+
loaded,
|
|
10130
|
+
failed,
|
|
10131
|
+
loading,
|
|
10132
|
+
lazy,
|
|
10133
|
+
selectable,
|
|
10134
|
+
selected,
|
|
10135
|
+
tabbableId,
|
|
10136
|
+
stackLeaves,
|
|
10137
|
+
labels,
|
|
10138
|
+
chartId,
|
|
10139
|
+
onToggle: toggle,
|
|
10140
|
+
onActivate: activate,
|
|
10141
|
+
onFocusItem: setFocusedId
|
|
10142
|
+
};
|
|
10143
|
+
const percent = fillLabel(labels.zoomLevel, { percent: Math.round(zoom * 100) });
|
|
10144
|
+
const atMin = zoom <= MIN_ZOOM + 1e-3;
|
|
10145
|
+
const atMax = zoom >= MAX_ZOOM - 1e-3;
|
|
10146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: cx("uix-org-chart", className), ...props, children: [
|
|
10147
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-org-chart__toolbar", role: "group", "aria-label": labels.toolbar, children: [
|
|
10148
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
10149
|
+
Button,
|
|
10150
|
+
{
|
|
10151
|
+
type: "button",
|
|
10152
|
+
variant: "ghost",
|
|
10153
|
+
size: "sm",
|
|
10154
|
+
icon: true,
|
|
10155
|
+
"aria-label": labels.zoomOut,
|
|
10156
|
+
title: labels.zoomOut,
|
|
10157
|
+
"aria-disabled": atMin || void 0,
|
|
10158
|
+
onClick: () => {
|
|
10159
|
+
if (!atMin) {
|
|
10160
|
+
userMoved.current = true;
|
|
10161
|
+
zoomTo(orgChartZoomStep(zoom, -1));
|
|
10162
|
+
}
|
|
10163
|
+
},
|
|
10164
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(MinusIcon, {})
|
|
10165
|
+
}
|
|
10166
|
+
),
|
|
10167
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
10168
|
+
Button,
|
|
10169
|
+
{
|
|
10170
|
+
type: "button",
|
|
10171
|
+
variant: "ghost",
|
|
10172
|
+
size: "sm",
|
|
10173
|
+
className: "uix-org-chart__level",
|
|
10174
|
+
"aria-label": fillLabel(labels.resetZoom, { percent }),
|
|
10175
|
+
onClick: () => {
|
|
10176
|
+
userMoved.current = true;
|
|
10177
|
+
zoomTo(1);
|
|
10178
|
+
},
|
|
10179
|
+
children: percent
|
|
10180
|
+
}
|
|
10181
|
+
),
|
|
10182
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
10183
|
+
Button,
|
|
10184
|
+
{
|
|
10185
|
+
type: "button",
|
|
10186
|
+
variant: "ghost",
|
|
10187
|
+
size: "sm",
|
|
10188
|
+
icon: true,
|
|
10189
|
+
"aria-label": labels.zoomIn,
|
|
10190
|
+
title: labels.zoomIn,
|
|
10191
|
+
"aria-disabled": atMax || void 0,
|
|
10192
|
+
onClick: () => {
|
|
10193
|
+
if (!atMax) {
|
|
10194
|
+
userMoved.current = true;
|
|
10195
|
+
zoomTo(orgChartZoomStep(zoom, 1));
|
|
10196
|
+
}
|
|
10197
|
+
},
|
|
10198
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(PlusIcon, {})
|
|
10199
|
+
}
|
|
10200
|
+
),
|
|
10201
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
|
|
10202
|
+
userMoved.current = true;
|
|
10203
|
+
const next = fitZoom(zoom);
|
|
10204
|
+
if (next !== null) zoomTo(next);
|
|
10205
|
+
}, children: [
|
|
10206
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FitIcon, {}),
|
|
10207
|
+
labels.fit
|
|
10208
|
+
] })
|
|
10209
|
+
] }),
|
|
10210
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
10211
|
+
"div",
|
|
10212
|
+
{
|
|
10213
|
+
ref: viewportRef,
|
|
10214
|
+
className: "uix-org-chart__viewport",
|
|
10215
|
+
"data-panning": panning ? "" : void 0,
|
|
10216
|
+
onPointerDown,
|
|
10217
|
+
onMouseDown,
|
|
10218
|
+
onPointerMove,
|
|
10219
|
+
onPointerUp: endPan,
|
|
10220
|
+
onPointerCancel: endPan,
|
|
10221
|
+
onWheel: () => {
|
|
10222
|
+
userMoved.current = true;
|
|
10223
|
+
},
|
|
10224
|
+
onScroll,
|
|
10225
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "uix-org-chart__canvas", style: { "--org-chart-zoom": zoom }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
|
|
10226
|
+
"ul",
|
|
10227
|
+
{
|
|
10228
|
+
ref: treeRef,
|
|
10229
|
+
role: "tree",
|
|
10230
|
+
"aria-label": ariaLabel ?? (ariaLabelledby ? void 0 : labels.chart),
|
|
10231
|
+
"aria-labelledby": ariaLabelledby,
|
|
10232
|
+
className: "uix-org-chart__tree",
|
|
10233
|
+
onKeyDown,
|
|
10234
|
+
children: nodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(OrgChartItem, { node, level: 1, size: nodes.length, pos: i + 1, ctx }, node.id))
|
|
10235
|
+
}
|
|
10236
|
+
) })
|
|
10237
|
+
}
|
|
10238
|
+
),
|
|
10239
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-visually-hidden", role: "status", children: announcement })
|
|
10240
|
+
] });
|
|
10241
|
+
}
|
|
10242
|
+
function layoutOf(viewport) {
|
|
10243
|
+
if (typeof getComputedStyle !== "function") return "chart";
|
|
10244
|
+
return getComputedStyle(viewport).getPropertyValue("--org-chart-layout").trim() === "list" ? "list" : "chart";
|
|
10245
|
+
}
|
|
10246
|
+
|
|
10247
|
+
// src/components/EditorialHome.tsx
|
|
10248
|
+
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
9566
10249
|
function PageIntro({
|
|
9567
10250
|
kicker,
|
|
9568
10251
|
title,
|
|
@@ -9575,43 +10258,43 @@ function PageIntro({
|
|
|
9575
10258
|
children,
|
|
9576
10259
|
...props
|
|
9577
10260
|
}) {
|
|
9578
|
-
return /* @__PURE__ */ (0,
|
|
9579
|
-
/* @__PURE__ */ (0,
|
|
9580
|
-
kicker != null && /* @__PURE__ */ (0,
|
|
9581
|
-
/* @__PURE__ */ (0,
|
|
9582
|
-
lede != null && /* @__PURE__ */ (0,
|
|
10261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: cx("uix-page-intro", className), ...props, children: [
|
|
10262
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
|
|
10263
|
+
kicker != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-page-kicker", children: kicker }),
|
|
10264
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h1", { className: "uix-page-title", children: title }),
|
|
10265
|
+
lede != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-page-lede", children: lede })
|
|
9583
10266
|
] }),
|
|
9584
|
-
search != null && /* @__PURE__ */ (0,
|
|
9585
|
-
searchLabel != null && /* @__PURE__ */ (0,
|
|
10267
|
+
search != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
|
|
10268
|
+
searchLabel != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-intro-search__label", children: searchLabel }),
|
|
9586
10269
|
search
|
|
9587
10270
|
] }),
|
|
9588
|
-
shortcuts != null && /* @__PURE__ */ (0,
|
|
10271
|
+
shortcuts != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "uix-shortcut-grid", "aria-label": shortcutsLabel, children: shortcuts }),
|
|
9589
10272
|
children
|
|
9590
10273
|
] });
|
|
9591
10274
|
}
|
|
9592
10275
|
function SectionHead({ title, titleId, help, helpLabel, action, className, ...props }) {
|
|
9593
|
-
const heading = /* @__PURE__ */ (0,
|
|
9594
|
-
return /* @__PURE__ */ (0,
|
|
9595
|
-
hasHelp(help) ? /* @__PURE__ */ (0,
|
|
10276
|
+
const heading = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "uix-section-title", id: titleId, children: title });
|
|
10277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: cx("uix-section-head", className), ...props, children: [
|
|
10278
|
+
hasHelp(help) ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-section-head__title-row", children: [
|
|
9596
10279
|
heading,
|
|
9597
|
-
/* @__PURE__ */ (0,
|
|
10280
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InfoTip, { content: help, label: helpLabel ?? helpLabelFor(title) })
|
|
9598
10281
|
] }) : heading,
|
|
9599
10282
|
action
|
|
9600
10283
|
] });
|
|
9601
10284
|
}
|
|
9602
10285
|
function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }) {
|
|
9603
|
-
return /* @__PURE__ */ (0,
|
|
10286
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: cx("uix-notice", className), ...props, children: [
|
|
9604
10287
|
icon,
|
|
9605
|
-
/* @__PURE__ */ (0,
|
|
9606
|
-
/* @__PURE__ */ (0,
|
|
9607
|
-
title != null && /* @__PURE__ */ (0,
|
|
10288
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-notice__content", "aria-live": "polite", children: [
|
|
10289
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("p", { className: "uix-notice__copy", children: [
|
|
10290
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("strong", { children: title }),
|
|
9608
10291
|
title != null && summary != null && " ",
|
|
9609
10292
|
summary
|
|
9610
10293
|
] }),
|
|
9611
|
-
meta != null && /* @__PURE__ */ (0,
|
|
10294
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-notice__meta", children: meta })
|
|
9612
10295
|
] }),
|
|
9613
|
-
(position != null || actions != null) && /* @__PURE__ */ (0,
|
|
9614
|
-
position != null && /* @__PURE__ */ (0,
|
|
10296
|
+
(position != null || actions != null) && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-notice__actions", children: [
|
|
10297
|
+
position != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-notice__position", children: position }),
|
|
9615
10298
|
actions
|
|
9616
10299
|
] })
|
|
9617
10300
|
] });
|
|
@@ -9629,8 +10312,8 @@ function FeaturedStage({
|
|
|
9629
10312
|
className,
|
|
9630
10313
|
...props
|
|
9631
10314
|
}) {
|
|
9632
|
-
return /* @__PURE__ */ (0,
|
|
9633
|
-
/* @__PURE__ */ (0,
|
|
10315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("article", { className: cx("uix-featured__stage", className), ...props, children: [
|
|
10316
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
|
|
9634
10317
|
"div",
|
|
9635
10318
|
{
|
|
9636
10319
|
className: "uix-featured__visual",
|
|
@@ -9640,32 +10323,32 @@ function FeaturedStage({
|
|
|
9640
10323
|
children: visual
|
|
9641
10324
|
}
|
|
9642
10325
|
),
|
|
9643
|
-
/* @__PURE__ */ (0,
|
|
9644
|
-
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0,
|
|
9645
|
-
ordinal != null && /* @__PURE__ */ (0,
|
|
10326
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-featured__content", "aria-live": "polite", children: [
|
|
10327
|
+
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("p", { className: "uix-featured__eyebrow", children: [
|
|
10328
|
+
ordinal != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-featured__now", children: ordinal }),
|
|
9646
10329
|
eyebrow
|
|
9647
10330
|
] }),
|
|
9648
|
-
/* @__PURE__ */ (0,
|
|
9649
|
-
description != null && /* @__PURE__ */ (0,
|
|
9650
|
-
meta != null && /* @__PURE__ */ (0,
|
|
10331
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "uix-featured__title", id: titleId, children: title }),
|
|
10332
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-featured__description", children: description }),
|
|
10333
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-featured__meta", children: meta }),
|
|
9651
10334
|
action
|
|
9652
10335
|
] })
|
|
9653
10336
|
] });
|
|
9654
10337
|
}
|
|
9655
10338
|
function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }) {
|
|
9656
|
-
return /* @__PURE__ */ (0,
|
|
9657
|
-
/* @__PURE__ */ (0,
|
|
9658
|
-
/* @__PURE__ */ (0,
|
|
9659
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
9660
|
-
/* @__PURE__ */ (0,
|
|
10339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("aside", { className: cx("uix-rundown", className), ...props, children: [
|
|
10340
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-rundown__head", children: [
|
|
10341
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
|
|
10342
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-rundown__eyebrow", children: eyebrow }),
|
|
10343
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "uix-rundown__title", id: titleId, children: title })
|
|
9661
10344
|
] }),
|
|
9662
10345
|
meta
|
|
9663
10346
|
] }),
|
|
9664
|
-
/* @__PURE__ */ (0,
|
|
10347
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "uix-rundown__items", children })
|
|
9665
10348
|
] });
|
|
9666
10349
|
}
|
|
9667
10350
|
function FeaturedRundownItem({ number, topic, title, selected = false, className, ...props }) {
|
|
9668
|
-
return /* @__PURE__ */ (0,
|
|
10351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
|
|
9669
10352
|
"button",
|
|
9670
10353
|
{
|
|
9671
10354
|
type: "button",
|
|
@@ -9674,63 +10357,63 @@ function FeaturedRundownItem({ number, topic, title, selected = false, className
|
|
|
9674
10357
|
"data-selected": selected ? "true" : "false",
|
|
9675
10358
|
...props,
|
|
9676
10359
|
children: [
|
|
9677
|
-
number != null && /* @__PURE__ */ (0,
|
|
9678
|
-
/* @__PURE__ */ (0,
|
|
9679
|
-
topic != null && /* @__PURE__ */ (0,
|
|
9680
|
-
/* @__PURE__ */ (0,
|
|
10360
|
+
number != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-rundown__number", children: number }),
|
|
10361
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("span", { children: [
|
|
10362
|
+
topic != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-rundown__topic", children: topic }),
|
|
10363
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-rundown__item-title", children: title })
|
|
9681
10364
|
] })
|
|
9682
10365
|
]
|
|
9683
10366
|
}
|
|
9684
10367
|
);
|
|
9685
10368
|
}
|
|
9686
10369
|
function NewsLead({ meta, title, summary, className, ...props }) {
|
|
9687
|
-
return /* @__PURE__ */ (0,
|
|
9688
|
-
meta != null && /* @__PURE__ */ (0,
|
|
9689
|
-
/* @__PURE__ */ (0,
|
|
9690
|
-
summary != null && /* @__PURE__ */ (0,
|
|
10370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("article", { className: cx("uix-news-lead", className), ...props, children: [
|
|
10371
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-news-lead__meta", children: meta }),
|
|
10372
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h3", { className: "uix-news-lead__title", children: title }),
|
|
10373
|
+
summary != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-news-lead__summary", children: summary })
|
|
9691
10374
|
] });
|
|
9692
10375
|
}
|
|
9693
10376
|
function ContentList({ children, className, ...props }) {
|
|
9694
|
-
return /* @__PURE__ */ (0,
|
|
10377
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("ul", { className: cx("uix-content-list", className), ...props, children });
|
|
9695
10378
|
}
|
|
9696
10379
|
function ContentListItem({ title, meta, trailing, className, ...props }) {
|
|
9697
|
-
return /* @__PURE__ */ (0,
|
|
9698
|
-
/* @__PURE__ */ (0,
|
|
9699
|
-
/* @__PURE__ */ (0,
|
|
9700
|
-
meta != null && /* @__PURE__ */ (0,
|
|
10380
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("li", { className: cx("uix-content-list__item", className), ...props, children: [
|
|
10381
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
|
|
10382
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-content-list__title", children: title }),
|
|
10383
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-content-list__meta", children: meta })
|
|
9701
10384
|
] }),
|
|
9702
10385
|
trailing
|
|
9703
10386
|
] });
|
|
9704
10387
|
}
|
|
9705
10388
|
function ResourceGrid({ children, className, ...props }) {
|
|
9706
|
-
return /* @__PURE__ */ (0,
|
|
10389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: cx("uix-resource-grid", className), ...props, children });
|
|
9707
10390
|
}
|
|
9708
10391
|
function StatLine({ items, children, className, ...props }) {
|
|
9709
|
-
return /* @__PURE__ */ (0,
|
|
9710
|
-
items?.map((item, i) => /* @__PURE__ */ (0,
|
|
9711
|
-
/* @__PURE__ */ (0,
|
|
9712
|
-
/* @__PURE__ */ (0,
|
|
10392
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: cx("uix-stat-line", className), ...props, children: [
|
|
10393
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-stat-line__item", children: [
|
|
10394
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-stat-line__value", children: item.value }),
|
|
10395
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-stat-line__label", children: item.label })
|
|
9713
10396
|
] }, item.id ?? i)),
|
|
9714
10397
|
children
|
|
9715
10398
|
] });
|
|
9716
10399
|
}
|
|
9717
10400
|
function EventRow({ month, day, title, meta, className, ...props }) {
|
|
9718
|
-
return /* @__PURE__ */ (0,
|
|
9719
|
-
/* @__PURE__ */ (0,
|
|
9720
|
-
/* @__PURE__ */ (0,
|
|
9721
|
-
/* @__PURE__ */ (0,
|
|
10401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: cx("uix-event-row", className), ...props, children: [
|
|
10402
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-event-date", children: [
|
|
10403
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-event-date__month", children: month }),
|
|
10404
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-event-date__day", children: day })
|
|
9722
10405
|
] }),
|
|
9723
|
-
/* @__PURE__ */ (0,
|
|
9724
|
-
/* @__PURE__ */ (0,
|
|
9725
|
-
meta != null && /* @__PURE__ */ (0,
|
|
10406
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
|
|
10407
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-event-row__title", children: title }),
|
|
10408
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-event-row__meta", children: meta })
|
|
9726
10409
|
] })
|
|
9727
10410
|
] });
|
|
9728
10411
|
}
|
|
9729
10412
|
function StatusRow({ indicator, name, meta, className, ...props }) {
|
|
9730
|
-
return /* @__PURE__ */ (0,
|
|
10413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: cx("uix-status-row", className), ...props, children: [
|
|
9731
10414
|
indicator,
|
|
9732
|
-
/* @__PURE__ */ (0,
|
|
9733
|
-
meta != null && /* @__PURE__ */ (0,
|
|
10415
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-status-row__name", children: name }),
|
|
10416
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "uix-list-meta", children: meta })
|
|
9734
10417
|
] });
|
|
9735
10418
|
}
|
|
9736
10419
|
|
|
@@ -9860,7 +10543,7 @@ function summarizeRule(value, labels = {}) {
|
|
|
9860
10543
|
}
|
|
9861
10544
|
|
|
9862
10545
|
// src/components/RuleBuilder.tsx
|
|
9863
|
-
var
|
|
10546
|
+
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
9864
10547
|
var DEFAULT_RULE_BUILDER_LABELS = {
|
|
9865
10548
|
region: "Rule builder",
|
|
9866
10549
|
summary: "Rule summary",
|
|
@@ -9920,7 +10603,7 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
9920
10603
|
combinator: combinator ?? "and",
|
|
9921
10604
|
conditions: [defaultCondition(fields, operators)]
|
|
9922
10605
|
}, maxDepth));
|
|
9923
|
-
const rowControls = (node, index, label) => disabled ? null : /* @__PURE__ */ (0,
|
|
10606
|
+
const rowControls = (node, index, label) => disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
9924
10607
|
RowControls,
|
|
9925
10608
|
{
|
|
9926
10609
|
labels,
|
|
@@ -9933,25 +10616,25 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
9933
10616
|
onRemove: () => onRootChange(removeRuleNode(root, node.id))
|
|
9934
10617
|
}
|
|
9935
10618
|
);
|
|
9936
|
-
return /* @__PURE__ */ (0,
|
|
9937
|
-
/* @__PURE__ */ (0,
|
|
9938
|
-
/* @__PURE__ */ (0,
|
|
9939
|
-
!hideCombinator && (combinator ? /* @__PURE__ */ (0,
|
|
10619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("fieldset", { className: "uix-rule-builder__group", "data-depth": depth, children: [
|
|
10620
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("legend", { className: "uix-rule-builder__group-heading", children: [
|
|
10621
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: depth === 1 ? labels.when : labels.group }),
|
|
10622
|
+
!hideCombinator && (combinator ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "uix-rule-builder__match", children: [
|
|
9940
10623
|
labels.match,
|
|
9941
10624
|
" ",
|
|
9942
10625
|
combinator === "or" ? labels.any : labels.all
|
|
9943
|
-
] }) : /* @__PURE__ */ (0,
|
|
10626
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("label", { children: [
|
|
9944
10627
|
labels.match,
|
|
9945
|
-
/* @__PURE__ */ (0,
|
|
9946
|
-
/* @__PURE__ */ (0,
|
|
9947
|
-
/* @__PURE__ */ (0,
|
|
10628
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("select", { className: "uix-select uix-select--sm", value: group.combinator, disabled, onChange: (event) => updateNode(group.id, (node) => ({ ...node, combinator: event.currentTarget.value })), children: [
|
|
10629
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("option", { value: "and", children: labels.all }),
|
|
10630
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("option", { value: "or", children: labels.any })
|
|
9948
10631
|
] })
|
|
9949
10632
|
] }))
|
|
9950
10633
|
] }),
|
|
9951
|
-
/* @__PURE__ */ (0,
|
|
9952
|
-
/* @__PURE__ */ (0,
|
|
10634
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "uix-rule-builder__rows", children: group.conditions.map((node, index) => isRuleGroup(node) ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "uix-rule-builder__nested", children: [
|
|
10635
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)(RuleGroupEditor, { ...{ group: node, depth: depth + 1, root, fields, operators, maxDepth, disabled, onRootChange, labels, combinator, hideCombinator, allowGroups } }),
|
|
9953
10636
|
rowControls(node, index, labels.itemGroup)
|
|
9954
|
-
] }, node.id) : /* @__PURE__ */ (0,
|
|
10637
|
+
] }, node.id) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
9955
10638
|
ConditionRow,
|
|
9956
10639
|
{
|
|
9957
10640
|
labels,
|
|
@@ -9964,9 +10647,9 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
9964
10647
|
},
|
|
9965
10648
|
node.id
|
|
9966
10649
|
)) }),
|
|
9967
|
-
!disabled && /* @__PURE__ */ (0,
|
|
9968
|
-
/* @__PURE__ */ (0,
|
|
9969
|
-
allowGroups && /* @__PURE__ */ (0,
|
|
10650
|
+
!disabled && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "uix-rule-builder__add", children: [
|
|
10651
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: addCondition, disabled: fields.length === 0 || operators.length === 0, children: labels.addCondition }),
|
|
10652
|
+
allowGroups && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: addGroup, disabled: depth >= maxDepth, children: labels.addGroup })
|
|
9970
10653
|
] })
|
|
9971
10654
|
] });
|
|
9972
10655
|
}
|
|
@@ -9979,24 +10662,24 @@ function ConditionRow({ labels, condition, fields, operators, disabled, onChange
|
|
|
9979
10662
|
const nextOperator = operators.find((item) => nextField?.operators?.includes(item.id)) ?? availableOperators[0] ?? operators[0];
|
|
9980
10663
|
onChange({ ...condition, field: id, operator: nextOperator?.id ?? "" });
|
|
9981
10664
|
};
|
|
9982
|
-
return /* @__PURE__ */ (0,
|
|
9983
|
-
/* @__PURE__ */ (0,
|
|
9984
|
-
/* @__PURE__ */ (0,
|
|
9985
|
-
/* @__PURE__ */ (0,
|
|
10665
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "uix-rule-builder__condition", children: [
|
|
10666
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("label", { children: [
|
|
10667
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "uix-visually-hidden", children: labels.field }),
|
|
10668
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("select", { className: "uix-select", value: condition.field, onChange: (event) => setField(event.currentTarget.value), disabled, children: fields.map((item) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
9986
10669
|
] }),
|
|
9987
|
-
/* @__PURE__ */ (0,
|
|
9988
|
-
/* @__PURE__ */ (0,
|
|
9989
|
-
/* @__PURE__ */ (0,
|
|
10670
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("label", { children: [
|
|
10671
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "uix-visually-hidden", children: labels.operator }),
|
|
10672
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.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_runtime89.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
9990
10673
|
] }),
|
|
9991
|
-
operator?.requiresValue !== false && /* @__PURE__ */ (0,
|
|
10674
|
+
operator?.requiresValue !== false && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ (0, import_jsx_runtime89.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": fillLabel(labels.valueFor, { field: field?.label ?? labels.itemCondition }) }) }),
|
|
9992
10675
|
controls
|
|
9993
10676
|
] });
|
|
9994
10677
|
}
|
|
9995
10678
|
function RowControls({ labels, label, first, last, disabled, onUp, onDown, onRemove }) {
|
|
9996
|
-
return /* @__PURE__ */ (0,
|
|
9997
|
-
/* @__PURE__ */ (0,
|
|
9998
|
-
/* @__PURE__ */ (0,
|
|
9999
|
-
/* @__PURE__ */ (0,
|
|
10679
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "uix-rule-builder__row-actions", children: [
|
|
10680
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onUp, disabled: disabled || first, "aria-label": fillLabel(labels.moveUpNamed, { item: label }), children: labels.moveUp }),
|
|
10681
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onDown, disabled: disabled || last, "aria-label": fillLabel(labels.moveDownNamed, { item: label }), children: labels.moveDown }),
|
|
10682
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onRemove, disabled, "aria-label": fillLabel(labels.removeNamed, { item: label }), children: labels.remove })
|
|
10000
10683
|
] });
|
|
10001
10684
|
}
|
|
10002
10685
|
function RuleBuilder({
|
|
@@ -10060,16 +10743,16 @@ function RuleBuilder({
|
|
|
10060
10743
|
or: labels.or
|
|
10061
10744
|
}
|
|
10062
10745
|
});
|
|
10063
|
-
return /* @__PURE__ */ (0,
|
|
10064
|
-
/* @__PURE__ */ (0,
|
|
10065
|
-
issues.length > 0 && /* @__PURE__ */ (0,
|
|
10746
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("section", { className: cx("uix-rule-builder uix-rule-builder--summary", className), "aria-label": labels.summary, children: [
|
|
10747
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { children: sentence }),
|
|
10748
|
+
issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "uix-rule-builder__invalid", children: issuesText(labels.summaryIssuesOne, labels.summaryIssuesMany) })
|
|
10066
10749
|
] });
|
|
10067
10750
|
}
|
|
10068
10751
|
const disabled = readOnly === true;
|
|
10069
10752
|
const emitWhen = (when) => onChange({ ...value, when: combinator ? setRuleCombinator(when, combinator) : when });
|
|
10070
10753
|
const updateActions = (next) => onChange({ ...value, then: next });
|
|
10071
|
-
return /* @__PURE__ */ (0,
|
|
10072
|
-
/* @__PURE__ */ (0,
|
|
10754
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("section", { className: cx("uix-rule-builder", disabled && "uix-rule-builder--readonly", className), "aria-label": labels.region, children: [
|
|
10755
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
10073
10756
|
RuleGroupEditor,
|
|
10074
10757
|
{
|
|
10075
10758
|
group: value.when,
|
|
@@ -10086,14 +10769,14 @@ function RuleBuilder({
|
|
|
10086
10769
|
allowGroups: allowGroups && maxDepth > 1
|
|
10087
10770
|
}
|
|
10088
10771
|
),
|
|
10089
|
-
!conditionsOnly && /* @__PURE__ */ (0,
|
|
10090
|
-
/* @__PURE__ */ (0,
|
|
10772
|
+
!conditionsOnly && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("fieldset", { className: "uix-rule-builder__actions", children: [
|
|
10773
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("legend", { children: labels.then }),
|
|
10091
10774
|
value.then.map((action, index) => {
|
|
10092
10775
|
const definition = actions.find((item) => item.id === action.type);
|
|
10093
|
-
return /* @__PURE__ */ (0,
|
|
10094
|
-
/* @__PURE__ */ (0,
|
|
10776
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "uix-rule-builder__action", children: [
|
|
10777
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("select", { className: "uix-select", value: action.type, disabled, onChange: (event) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: event.currentTarget.value } : item)), "aria-label": labels.actionType, children: actions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("option", { value: item.id, children: item.label }, item.id)) }),
|
|
10095
10778
|
definition?.renderParameters?.(action, (parameters) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, parameters } : item)), disabled),
|
|
10096
|
-
!disabled && /* @__PURE__ */ (0,
|
|
10779
|
+
!disabled && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
|
|
10097
10780
|
RowControls,
|
|
10098
10781
|
{
|
|
10099
10782
|
labels,
|
|
@@ -10116,18 +10799,18 @@ function RuleBuilder({
|
|
|
10116
10799
|
)
|
|
10117
10800
|
] }, action.id);
|
|
10118
10801
|
}),
|
|
10119
|
-
!disabled && /* @__PURE__ */ (0,
|
|
10802
|
+
!disabled && /* @__PURE__ */ (0, import_jsx_runtime89.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: labels.addAction })
|
|
10120
10803
|
] }),
|
|
10121
|
-
/* @__PURE__ */ (0,
|
|
10122
|
-
/* @__PURE__ */ (0,
|
|
10123
|
-
/* @__PURE__ */ (0,
|
|
10804
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "uix-rule-builder__validation", "aria-live": "polite", children: issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: labels.valid }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
|
|
10805
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("strong", { children: issuesText(labels.issuesOne, labels.issuesMany) }),
|
|
10806
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("ul", { children: issues.map((issue, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("li", { children: issue.message }, `${issue.path}-${index}`)) })
|
|
10124
10807
|
] }) })
|
|
10125
10808
|
] });
|
|
10126
10809
|
}
|
|
10127
10810
|
|
|
10128
10811
|
// src/components/BuilderCanvas.tsx
|
|
10129
|
-
var
|
|
10130
|
-
var
|
|
10812
|
+
var import_react64 = require("react");
|
|
10813
|
+
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
10131
10814
|
var DEFAULT_BUILDER_CANVAS_LABELS = {
|
|
10132
10815
|
region: "Builder canvas",
|
|
10133
10816
|
palette: "Item palette",
|
|
@@ -10166,13 +10849,13 @@ function BuilderCanvas({
|
|
|
10166
10849
|
labels: labelOverrides
|
|
10167
10850
|
}) {
|
|
10168
10851
|
const labels = { ...DEFAULT_BUILDER_CANVAS_LABELS, ...labelOverrides };
|
|
10169
|
-
const [internalSelectedId, setInternalSelectedId] = (0,
|
|
10170
|
-
const [draggedId, setDraggedId] = (0,
|
|
10171
|
-
const propertyHeadingRef = (0,
|
|
10172
|
-
const shouldFocusProperties = (0,
|
|
10852
|
+
const [internalSelectedId, setInternalSelectedId] = (0, import_react64.useState)();
|
|
10853
|
+
const [draggedId, setDraggedId] = (0, import_react64.useState)();
|
|
10854
|
+
const propertyHeadingRef = (0, import_react64.useRef)(null);
|
|
10855
|
+
const shouldFocusProperties = (0, import_react64.useRef)(false);
|
|
10173
10856
|
const selectedId = controlledSelectedId ?? internalSelectedId;
|
|
10174
10857
|
const selected = items.find((item) => item.id === selectedId);
|
|
10175
|
-
(0,
|
|
10858
|
+
(0, import_react64.useEffect)(() => {
|
|
10176
10859
|
if (shouldFocusProperties.current && selected) {
|
|
10177
10860
|
propertyHeadingRef.current?.focus();
|
|
10178
10861
|
shouldFocusProperties.current = false;
|
|
@@ -10206,24 +10889,24 @@ function BuilderCanvas({
|
|
|
10206
10889
|
if (from >= 0 && to >= 0) onItemsChange(reorder(items, from, to));
|
|
10207
10890
|
setDraggedId(void 0);
|
|
10208
10891
|
};
|
|
10209
|
-
return /* @__PURE__ */ (0,
|
|
10210
|
-
/* @__PURE__ */ (0,
|
|
10211
|
-
/* @__PURE__ */ (0,
|
|
10212
|
-
palette.length === 0 ? /* @__PURE__ */ (0,
|
|
10213
|
-
/* @__PURE__ */ (0,
|
|
10214
|
-
item.description && /* @__PURE__ */ (0,
|
|
10215
|
-
/* @__PURE__ */ (0,
|
|
10892
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: cx("uix-builder-canvas", className), "aria-label": labels.region, children: [
|
|
10893
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("aside", { className: "uix-builder-canvas__palette", "aria-label": labels.palette, children: [
|
|
10894
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("h3", { children: labels.paletteHeading }),
|
|
10895
|
+
palette.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { children: labels.paletteEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("ul", { children: palette.map((item) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("button", { type: "button", onClick: () => add(item), children: [
|
|
10896
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("strong", { children: item.label }),
|
|
10897
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { children: item.description }),
|
|
10898
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { "aria-hidden": "true", children: labels.add })
|
|
10216
10899
|
] }) }, item.id)) })
|
|
10217
10900
|
] }),
|
|
10218
|
-
/* @__PURE__ */ (0,
|
|
10219
|
-
/* @__PURE__ */ (0,
|
|
10220
|
-
loading ? /* @__PURE__ */ (0,
|
|
10221
|
-
/* @__PURE__ */ (0,
|
|
10222
|
-
onRetry && /* @__PURE__ */ (0,
|
|
10223
|
-
] }) : items.length === 0 ? /* @__PURE__ */ (0,
|
|
10224
|
-
/* @__PURE__ */ (0,
|
|
10225
|
-
palette[0] && /* @__PURE__ */ (0,
|
|
10226
|
-
] }) : /* @__PURE__ */ (0,
|
|
10901
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "uix-builder-canvas__workspace", children: [
|
|
10902
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("h3", { children: labels.canvasHeading }),
|
|
10903
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "uix-builder-canvas__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "uix-builder-canvas__state", role: "alert", children: [
|
|
10904
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { children: error }),
|
|
10905
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
|
|
10906
|
+
] }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "uix-builder-canvas__state", children: [
|
|
10907
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { children: emptyMessage }),
|
|
10908
|
+
palette[0] && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: fillLabel(labels.addFirst, { label: palette[0].label }) })
|
|
10909
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("ol", { className: "uix-builder-canvas__items", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
|
|
10227
10910
|
"li",
|
|
10228
10911
|
{
|
|
10229
10912
|
draggable: true,
|
|
@@ -10233,34 +10916,34 @@ function BuilderCanvas({
|
|
|
10233
10916
|
onDrop: (event) => drop(event, item.id),
|
|
10234
10917
|
className: cx("uix-builder-canvas__item", selectedId === item.id && "uix-builder-canvas__item--selected"),
|
|
10235
10918
|
children: [
|
|
10236
|
-
/* @__PURE__ */ (0,
|
|
10237
|
-
/* @__PURE__ */ (0,
|
|
10238
|
-
item.description && /* @__PURE__ */ (0,
|
|
10919
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.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_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
|
|
10920
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("strong", { children: item.label }),
|
|
10921
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { children: item.description })
|
|
10239
10922
|
] }) }),
|
|
10240
|
-
/* @__PURE__ */ (0,
|
|
10241
|
-
/* @__PURE__ */ (0,
|
|
10242
|
-
/* @__PURE__ */ (0,
|
|
10243
|
-
/* @__PURE__ */ (0,
|
|
10923
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("span", { className: "uix-builder-canvas__item-actions", children: [
|
|
10924
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": fillLabel(labels.moveUpNamed, { label: item.label }), children: labels.moveUp }),
|
|
10925
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": fillLabel(labels.moveDownNamed, { label: item.label }), children: labels.moveDown }),
|
|
10926
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => remove(item.id), "aria-label": fillLabel(labels.removeNamed, { label: item.label }), children: labels.remove })
|
|
10244
10927
|
] })
|
|
10245
10928
|
]
|
|
10246
10929
|
},
|
|
10247
10930
|
item.id
|
|
10248
10931
|
)) })
|
|
10249
10932
|
] }),
|
|
10250
|
-
/* @__PURE__ */ (0,
|
|
10251
|
-
/* @__PURE__ */ (0,
|
|
10252
|
-
!selected ? /* @__PURE__ */ (0,
|
|
10253
|
-
/* @__PURE__ */ (0,
|
|
10254
|
-
/* @__PURE__ */ (0,
|
|
10255
|
-
/* @__PURE__ */ (0,
|
|
10256
|
-
/* @__PURE__ */ (0,
|
|
10933
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("aside", { className: "uix-builder-canvas__properties", "aria-label": labels.properties, children: [
|
|
10934
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("h3", { ref: propertyHeadingRef, tabIndex: -1, children: labels.propertiesHeading }),
|
|
10935
|
+
!selected ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { children: labels.propertiesEmpty }) : renderProperties?.(selected, (updated) => onItemsChange(items.map((item) => item.id === updated.id ? updated : item))) ?? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("dl", { children: [
|
|
10936
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("dt", { children: labels.type }),
|
|
10937
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("dd", { children: selected.type }),
|
|
10938
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("dt", { children: labels.label }),
|
|
10939
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("dd", { children: selected.label })
|
|
10257
10940
|
] })
|
|
10258
10941
|
] })
|
|
10259
10942
|
] });
|
|
10260
10943
|
}
|
|
10261
10944
|
|
|
10262
10945
|
// src/components/SchedulingCalendar.tsx
|
|
10263
|
-
var
|
|
10946
|
+
var import_react68 = require("react");
|
|
10264
10947
|
|
|
10265
10948
|
// src/calendar-model.ts
|
|
10266
10949
|
function fromDateKey(value) {
|
|
@@ -10688,14 +11371,14 @@ function proposeMove(span, delta, timeZone) {
|
|
|
10688
11371
|
}
|
|
10689
11372
|
|
|
10690
11373
|
// src/components/SchedulingAgenda.tsx
|
|
10691
|
-
var
|
|
11374
|
+
var import_react66 = require("react");
|
|
10692
11375
|
|
|
10693
11376
|
// src/hooks/usePrinting.ts
|
|
10694
|
-
var
|
|
11377
|
+
var import_react65 = require("react");
|
|
10695
11378
|
var import_react_dom2 = require("react-dom");
|
|
10696
11379
|
function usePrinting(enabled = true) {
|
|
10697
|
-
const [printing, setPrinting] = (0,
|
|
10698
|
-
(0,
|
|
11380
|
+
const [printing, setPrinting] = (0, import_react65.useState)(false);
|
|
11381
|
+
(0, import_react65.useEffect)(() => {
|
|
10699
11382
|
if (!enabled || typeof window === "undefined") return void 0;
|
|
10700
11383
|
const set = (next) => {
|
|
10701
11384
|
(0, import_react_dom2.flushSync)(() => setPrinting(next));
|
|
@@ -10718,7 +11401,7 @@ function usePrinting(enabled = true) {
|
|
|
10718
11401
|
}
|
|
10719
11402
|
|
|
10720
11403
|
// src/components/SchedulingAgenda.tsx
|
|
10721
|
-
var
|
|
11404
|
+
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
10722
11405
|
var AGENDA_VIRTUAL_ROW = 44;
|
|
10723
11406
|
var AGENDA_NARROW_WIDTH = 576;
|
|
10724
11407
|
var AGENDA_NARROW_ROW = 64;
|
|
@@ -10735,7 +11418,7 @@ function uniqueKeys(ids) {
|
|
|
10735
11418
|
function SchedulingAgenda(props) {
|
|
10736
11419
|
const rowCount = props.groups.reduce((sum, group) => sum + group.rows.length, 0);
|
|
10737
11420
|
const flat = rowCount > props.virtualizeAbove;
|
|
10738
|
-
return /* @__PURE__ */ (0,
|
|
11421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(AgendaBody, { ...props, flat }, flat ? "flat" : "grouped");
|
|
10739
11422
|
}
|
|
10740
11423
|
function AgendaBody({
|
|
10741
11424
|
groups,
|
|
@@ -10770,11 +11453,11 @@ function AgendaBody({
|
|
|
10770
11453
|
if ((group.continuesCount ?? 0) > 0) flatRows.push({ kind: "continues", key: `c-${groupKey}`, group });
|
|
10771
11454
|
});
|
|
10772
11455
|
}
|
|
10773
|
-
const [narrow, setNarrow] = (0,
|
|
11456
|
+
const [narrow, setNarrow] = (0, import_react66.useState)(false);
|
|
10774
11457
|
const printing = usePrinting(flat);
|
|
10775
11458
|
const virtual = useVirtualRows(flatRows, { rowHeight: narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW, threshold: 0, estimatedViewportHeight: AGENDA_VIRTUAL_VIEWPORT, enabled: !printing });
|
|
10776
11459
|
const scroller = virtual.containerRef;
|
|
10777
|
-
(0,
|
|
11460
|
+
(0, import_react66.useLayoutEffect)(() => {
|
|
10778
11461
|
const box = scroller.current;
|
|
10779
11462
|
if (!box) return;
|
|
10780
11463
|
const measure = () => setNarrow(box.clientWidth > 0 && box.clientWidth <= AGENDA_NARROW_WIDTH);
|
|
@@ -10783,8 +11466,8 @@ function AgendaBody({
|
|
|
10783
11466
|
observer.observe(box);
|
|
10784
11467
|
return () => observer.disconnect();
|
|
10785
11468
|
}, [scroller]);
|
|
10786
|
-
const grouped = (0,
|
|
10787
|
-
(0,
|
|
11469
|
+
const grouped = (0, import_react66.useRef)(null);
|
|
11470
|
+
(0, import_react66.useLayoutEffect)(() => {
|
|
10788
11471
|
const box = grouped.current;
|
|
10789
11472
|
if (!box) return;
|
|
10790
11473
|
const observer = new ResizeObserver((entries) => {
|
|
@@ -10796,7 +11479,7 @@ function AgendaBody({
|
|
|
10796
11479
|
box.querySelectorAll(":scope > section > .uix-scheduling-calendar__agenda-head").forEach((head) => observer.observe(head));
|
|
10797
11480
|
return () => observer.disconnect();
|
|
10798
11481
|
}, [groups]);
|
|
10799
|
-
const stop2 = (0,
|
|
11482
|
+
const stop2 = (0, import_react66.useRef)({ node: null, index: 0 });
|
|
10800
11483
|
const container = () => flat ? scroller.current : grouped.current;
|
|
10801
11484
|
const controls = () => Array.from(container()?.querySelectorAll("button") ?? []);
|
|
10802
11485
|
const focusStop = (target) => {
|
|
@@ -10821,7 +11504,7 @@ function AgendaBody({
|
|
|
10821
11504
|
const scrollToRow = (box, index) => {
|
|
10822
11505
|
box.scrollTop = Math.max(0, index * rowHeight - (box.clientHeight - rowHeight) / 2);
|
|
10823
11506
|
};
|
|
10824
|
-
const landing = (0,
|
|
11507
|
+
const landing = (0, import_react66.useRef)(null);
|
|
10825
11508
|
const land = () => {
|
|
10826
11509
|
const wanted = landing.current;
|
|
10827
11510
|
if (!wanted) return;
|
|
@@ -10842,7 +11525,7 @@ function AgendaBody({
|
|
|
10842
11525
|
scrollToRow(box, index);
|
|
10843
11526
|
}
|
|
10844
11527
|
};
|
|
10845
|
-
(0,
|
|
11528
|
+
(0, import_react66.useEffect)(() => {
|
|
10846
11529
|
const all = controls();
|
|
10847
11530
|
stop2.current = syncRovingStop(all, stop2.current);
|
|
10848
11531
|
const box = flat ? scroller.current : null;
|
|
@@ -10892,18 +11575,18 @@ function AgendaBody({
|
|
|
10892
11575
|
landing.current = { key: flatRows[target].key, index: target };
|
|
10893
11576
|
scrollToRow(box, target);
|
|
10894
11577
|
};
|
|
10895
|
-
const note = (overlay) => /* @__PURE__ */ (0,
|
|
10896
|
-
overlay.kindLabel && /* @__PURE__ */ (0,
|
|
10897
|
-
/* @__PURE__ */ (0,
|
|
10898
|
-
overlay.scopeLabel && /* @__PURE__ */ (0,
|
|
11578
|
+
const note = (overlay) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", className: "uix-scheduling-calendar__window", "data-overlay-id": overlay.id, "data-pattern": overlay.pattern ?? "solid", "data-global": overlay.global || void 0, onClick: () => onSelectOverlay?.(overlay), "aria-label": overlayName(overlay), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("span", { className: "uix-scheduling-calendar__window-text", children: [
|
|
11579
|
+
overlay.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
|
|
11580
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
|
|
11581
|
+
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
|
|
10899
11582
|
] }) });
|
|
10900
|
-
const heading = (group, withNotes) => /* @__PURE__ */ (0,
|
|
10901
|
-
(0,
|
|
10902
|
-
withNotes && group.annotations && group.annotations.length > 0 && /* @__PURE__ */ (0,
|
|
11583
|
+
const heading = (group, withNotes) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "uix-scheduling-calendar__agenda-head", children: [
|
|
11584
|
+
(0, import_react66.createElement)(`h${headingLevel}`, { className: "uix-scheduling-calendar__agenda-heading" }, group.heading ?? dateText(group.date, "day")),
|
|
11585
|
+
withNotes && group.annotations && group.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("ul", { className: "uix-scheduling-calendar__agenda-notes", children: uniqueKeys(group.annotations.map((overlay) => overlay.id)).map((key, at) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("li", { children: note(group.annotations[at]) }, key)) })
|
|
10903
11586
|
] });
|
|
10904
11587
|
const timeText = (entry, date) => {
|
|
10905
|
-
const part = (text) => /* @__PURE__ */ (0,
|
|
10906
|
-
const dash = /* @__PURE__ */ (0,
|
|
11588
|
+
const part = (text) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__agenda-time-part", children: text });
|
|
11589
|
+
const dash = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { "aria-hidden": "true", children: " \u2013 " });
|
|
10907
11590
|
if (entry.allDay) {
|
|
10908
11591
|
let span;
|
|
10909
11592
|
try {
|
|
@@ -10913,7 +11596,7 @@ function AgendaBody({
|
|
|
10913
11596
|
}
|
|
10914
11597
|
const last = addCalendarDays(span.end, -1);
|
|
10915
11598
|
if (span.start === date && last === date) return labels.allDay;
|
|
10916
|
-
return span.start === last ? part(dateText(last, "day")) : /* @__PURE__ */ (0,
|
|
11599
|
+
return span.start === last ? part(dateText(last, "day")) : /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
|
|
10917
11600
|
part(dateText(span.start, "day")),
|
|
10918
11601
|
dash,
|
|
10919
11602
|
part(dateText(last, "day"))
|
|
@@ -10923,11 +11606,11 @@ function AgendaBody({
|
|
|
10923
11606
|
const endTime = zonedTimeOfDay(entry.end, timeZone);
|
|
10924
11607
|
const endDay = zonedDateKey(entry.end, timeZone);
|
|
10925
11608
|
const underItsDay = zonedDateKey(entry.start, timeZone) === date && (endDay === date || endDay === addCalendarDays(date, 1) && endTime < startTime);
|
|
10926
|
-
return underItsDay ? /* @__PURE__ */ (0,
|
|
11609
|
+
return underItsDay ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
|
|
10927
11610
|
startTime,
|
|
10928
11611
|
dash,
|
|
10929
11612
|
endTime
|
|
10930
|
-
] }) : /* @__PURE__ */ (0,
|
|
11613
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
|
|
10931
11614
|
part(formatInstant(entry.start)),
|
|
10932
11615
|
dash,
|
|
10933
11616
|
part(formatInstant(entry.end))
|
|
@@ -10936,31 +11619,31 @@ function AgendaBody({
|
|
|
10936
11619
|
const row = (entry, date) => {
|
|
10937
11620
|
const markers = entryMarkers(entry);
|
|
10938
11621
|
const name = entry.accessibleName ?? (entry.meta ? `${entryName(entry)}, ${entry.meta}` : entryName(entry));
|
|
10939
|
-
return /* @__PURE__ */ (0,
|
|
10940
|
-
/* @__PURE__ */ (0,
|
|
10941
|
-
/* @__PURE__ */ (0,
|
|
10942
|
-
/* @__PURE__ */ (0,
|
|
10943
|
-
renderEntry?.(entry) ?? /* @__PURE__ */ (0,
|
|
10944
|
-
entry.meta && /* @__PURE__ */ (0,
|
|
11622
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("button", { type: "button", className: "uix-scheduling-calendar__agenda-row", "data-item-id": entry.id, "data-highlight": entry.emphasis === "highlight" || void 0, "data-dim": entry.emphasis === "dim" || void 0, "data-band": entry.band ?? "none", "data-status": entryStatus(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), "aria-label": name, children: [
|
|
11623
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__swatch", "aria-hidden": "true", "data-band": entry.band ?? "none", "data-status": entryStatus(entry) }),
|
|
11624
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__agenda-time", children: timeText(entry, date) }),
|
|
11625
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("span", { className: "uix-scheduling-calendar__agenda-main", children: [
|
|
11626
|
+
renderEntry?.(entry) ?? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title }),
|
|
11627
|
+
entry.meta && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__agenda-meta", children: entry.meta })
|
|
10945
11628
|
] }),
|
|
10946
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
10947
|
-
/* @__PURE__ */ (0,
|
|
11629
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { children: renderMarker2(marker, true) }, marker.id)) }),
|
|
11630
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "uix-scheduling-calendar__status", children: entryStatusText(entry) })
|
|
10948
11631
|
] });
|
|
10949
11632
|
};
|
|
10950
11633
|
const hidden = (group) => {
|
|
10951
11634
|
const text = fillLabel(labels.hiddenInDay, { count: group.hiddenCount ?? 0 });
|
|
10952
|
-
return onShowMore ? /* @__PURE__ */ (0,
|
|
11635
|
+
return onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", className: "uix-scheduling-calendar__agenda-more", onClick: () => onShowMore(group.date, group.rows), children: text }) : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "uix-scheduling-calendar__agenda-more", children: text });
|
|
10953
11636
|
};
|
|
10954
|
-
const continues = (group) => /* @__PURE__ */ (0,
|
|
10955
|
-
if (groups.length === 0) return /* @__PURE__ */ (0,
|
|
11637
|
+
const continues = (group) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "uix-scheduling-calendar__agenda-continues", children: fillLabel(labels.continuesInDay, { count: group.continuesCount ?? 0 }) });
|
|
11638
|
+
if (groups.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { children: labels.agendaEmpty }) });
|
|
10956
11639
|
if (flat) {
|
|
10957
|
-
return /* @__PURE__ */ (0,
|
|
11640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ref: virtual.containerRef, className: "uix-scheduling-calendar__agenda uix-scheduling-calendar__agenda--virtual", "data-narrow": narrow || void 0, role: "region", "aria-label": labels.agenda, onKeyDown, onFocus, onBlur, onWheel: dropLanding, onPointerDown: dropLanding, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "uix-scheduling-calendar__agenda-window", style: { paddingTop: virtual.padTop, paddingBottom: virtual.padBottom }, children: virtual.rows.map((item, at) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "uix-scheduling-calendar__agenda-vrow", "data-kind": item.kind, "data-flat-index": virtual.startIndex + at, children: item.kind === "heading" ? heading(item.group, false) : item.kind === "note" ? note(item.overlay) : item.kind === "entry" ? row(item.entry, item.group.date) : item.kind === "hidden" ? hidden(item.group) : continues(item.group) }, item.key)) }) });
|
|
10958
11641
|
}
|
|
10959
|
-
return /* @__PURE__ */ (0,
|
|
11642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ref: grouped, className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, onKeyDown, onFocus, children: groups.map((group, index) => {
|
|
10960
11643
|
const rowKeys = uniqueKeys(group.rows.map((entry) => entry.id));
|
|
10961
|
-
return /* @__PURE__ */ (0,
|
|
11644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("section", { className: "uix-scheduling-calendar__agenda-group", "data-date": group.date, children: [
|
|
10962
11645
|
heading(group, true),
|
|
10963
|
-
group.rows.length > 0 && /* @__PURE__ */ (0,
|
|
11646
|
+
group.rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("ol", { className: "uix-scheduling-calendar__agenda-rows", children: group.rows.map((entry, at) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("li", { children: row(entry, group.date) }, rowKeys[at])) }),
|
|
10964
11647
|
(group.hiddenCount ?? 0) > 0 && hidden(group),
|
|
10965
11648
|
(group.continuesCount ?? 0) > 0 && continues(group)
|
|
10966
11649
|
] }, groupKeys[index]);
|
|
@@ -10968,8 +11651,8 @@ function AgendaBody({
|
|
|
10968
11651
|
}
|
|
10969
11652
|
|
|
10970
11653
|
// src/components/SchedulingTimeGrid.tsx
|
|
10971
|
-
var
|
|
10972
|
-
var
|
|
11654
|
+
var import_react67 = require("react");
|
|
11655
|
+
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
10973
11656
|
var HOUR_MS2 = 36e5;
|
|
10974
11657
|
var MINUTES_PER_HOUR = 60;
|
|
10975
11658
|
var LINES_PER_HOUR = 3;
|
|
@@ -10982,7 +11665,7 @@ function uniqueById(items) {
|
|
|
10982
11665
|
const seen = /* @__PURE__ */ new Set();
|
|
10983
11666
|
return items.filter((item) => seen.has(item.id) ? false : (seen.add(item.id), true));
|
|
10984
11667
|
}
|
|
10985
|
-
var GridItem = (0,
|
|
11668
|
+
var GridItem = (0, import_react67.memo)(function GridItem2({ entry, segment, column, alone, name, status, movable, hintId, timeZone, continuesFrom, markers, renderEntry, renderMarker: renderMarker2, handlers }) {
|
|
10986
11669
|
const lines = linesFor(segment);
|
|
10987
11670
|
const continuation = segment.part === "continuation";
|
|
10988
11671
|
const style = vars({
|
|
@@ -10992,18 +11675,18 @@ var GridItem = (0, import_react66.memo)(function GridItem2({ entry, segment, col
|
|
|
10992
11675
|
"--uix-scheduling-calendar-lanes": segment.laneCount
|
|
10993
11676
|
});
|
|
10994
11677
|
const custom = renderEntry?.(entry, { availableLines: lines });
|
|
10995
|
-
const text = custom ?? /* @__PURE__ */ (0,
|
|
10996
|
-
!continuation && /* @__PURE__ */ (0,
|
|
10997
|
-
/* @__PURE__ */ (0,
|
|
11678
|
+
const text = custom ?? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
|
|
11679
|
+
!continuation && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
|
|
11680
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
|
|
10998
11681
|
" "
|
|
10999
11682
|
] }),
|
|
11000
|
-
/* @__PURE__ */ (0,
|
|
11683
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title })
|
|
11001
11684
|
] });
|
|
11002
11685
|
const noRoom = lines === 0 && (custom === void 0 || custom === null) ? "none" : void 0;
|
|
11003
|
-
const body = /* @__PURE__ */ (0,
|
|
11004
|
-
continuation && /* @__PURE__ */ (0,
|
|
11005
|
-
(!continuation || alone) && text != null && text !== false && /* @__PURE__ */ (0,
|
|
11006
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
11686
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
|
|
11687
|
+
continuation && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__tg-from", "data-room": lines === 0 ? "none" : void 0, children: continuesFrom }),
|
|
11688
|
+
(!continuation || alone) && text != null && text !== false && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__entry-text", "data-room": noRoom, children: text }),
|
|
11689
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: renderMarker2(marker) }, marker.id)) })
|
|
11007
11690
|
] });
|
|
11008
11691
|
const shared = {
|
|
11009
11692
|
className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-item",
|
|
@@ -11019,8 +11702,8 @@ var GridItem = (0, import_react66.memo)(function GridItem2({ entry, segment, col
|
|
|
11019
11702
|
onClick: () => handlers.click(entry),
|
|
11020
11703
|
onPointerDown: movable ? (event) => handlers.pointerDown(event, entry, column, false) : void 0
|
|
11021
11704
|
};
|
|
11022
|
-
if (continuation && !alone) return /* @__PURE__ */ (0,
|
|
11023
|
-
return /* @__PURE__ */ (0,
|
|
11705
|
+
if (continuation && !alone) return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { ...shared, "data-continuation-of": entry.id, "aria-hidden": "true", children: body });
|
|
11706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
|
|
11024
11707
|
"button",
|
|
11025
11708
|
{
|
|
11026
11709
|
type: "button",
|
|
@@ -11067,20 +11750,20 @@ function SchedulingTimeGrid({
|
|
|
11067
11750
|
emptyNote,
|
|
11068
11751
|
nothingToShow
|
|
11069
11752
|
}) {
|
|
11070
|
-
const rootRef = (0,
|
|
11071
|
-
const hintId = (0,
|
|
11072
|
-
const [widthCap, setWidthCap] = (0,
|
|
11073
|
-
const [ghost, setGhost] = (0,
|
|
11074
|
-
const [announcement, setAnnouncement] = (0,
|
|
11075
|
-
const [activeDay, setActiveDay] = (0,
|
|
11076
|
-
const enteredFrom = (0,
|
|
11753
|
+
const rootRef = (0, import_react67.useRef)(null);
|
|
11754
|
+
const hintId = (0, import_react67.useId)();
|
|
11755
|
+
const [widthCap, setWidthCap] = (0, import_react67.useState)(Infinity);
|
|
11756
|
+
const [ghost, setGhost] = (0, import_react67.useState)(null);
|
|
11757
|
+
const [announcement, setAnnouncement] = (0, import_react67.useState)("");
|
|
11758
|
+
const [activeDay, setActiveDay] = (0, import_react67.useState)(days[0]);
|
|
11759
|
+
const enteredFrom = (0, import_react67.useRef)(null);
|
|
11077
11760
|
const tabStop = days.includes(activeDay) ? activeDay : days[0];
|
|
11078
11761
|
const moving = canMove && onProposeMove !== void 0;
|
|
11079
11762
|
const step = Number.isFinite(givenStep) && givenStep > 0 ? givenStep : DEFAULT_STEP;
|
|
11080
|
-
const laneOptions = (0,
|
|
11081
|
-
const entries = (0,
|
|
11082
|
-
const overlays = (0,
|
|
11083
|
-
(0,
|
|
11763
|
+
const laneOptions = (0, import_react67.useMemo)(() => ({ crossMidnightMinutes: topLaneCrossMidnightMinutes }), [topLaneCrossMidnightMinutes]);
|
|
11764
|
+
const entries = (0, import_react67.useMemo)(() => uniqueById(givenEntries), [givenEntries]);
|
|
11765
|
+
const overlays = (0, import_react67.useMemo)(() => uniqueById(givenOverlays), [givenOverlays]);
|
|
11766
|
+
(0, import_react67.useEffect)(() => {
|
|
11084
11767
|
const root = rootRef.current;
|
|
11085
11768
|
if (!root || typeof ResizeObserver === "undefined") return void 0;
|
|
11086
11769
|
const column = root.querySelector("[data-tg-column]");
|
|
@@ -11105,17 +11788,17 @@ function SchedulingTimeGrid({
|
|
|
11105
11788
|
};
|
|
11106
11789
|
}, [days]);
|
|
11107
11790
|
const lanes = Math.max(1, Math.min(maxLanes, widthCap));
|
|
11108
|
-
const entryById = (0,
|
|
11109
|
-
const overlayById = (0,
|
|
11110
|
-
const columns = (0,
|
|
11111
|
-
const slots = (0,
|
|
11112
|
-
const top = (0,
|
|
11113
|
-
const drawable = (0,
|
|
11114
|
-
const strip = (0,
|
|
11115
|
-
const shades = (0,
|
|
11791
|
+
const entryById = (0, import_react67.useMemo)(() => new Map(entries.map((entry) => [entry.id, entry])), [entries]);
|
|
11792
|
+
const overlayById = (0, import_react67.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, overlay])), [overlays]);
|
|
11793
|
+
const columns = (0, import_react67.useMemo)(() => days.map((date) => layoutTimeGridDay(entries, date, timeZone, { ...laneOptions, maxLanes: lanes })), [days, entries, timeZone, laneOptions, lanes]);
|
|
11794
|
+
const slots = (0, import_react67.useMemo)(() => days.map((date) => zonedHourSlots(date, timeZone)), [days, timeZone]);
|
|
11795
|
+
const top = (0, import_react67.useMemo)(() => layoutDaySpans(entries.filter((entry) => placesInTopLane(entry, timeZone, laneOptions)), days, { timeZone, laneCap: Math.max(0, topLaneCap) }), [entries, days, timeZone, laneOptions, topLaneCap]);
|
|
11796
|
+
const drawable = (0, import_react67.useMemo)(() => overlays.filter((overlay) => new Date(overlay.end).getTime() >= new Date(overlay.start).getTime()), [overlays]);
|
|
11797
|
+
const strip = (0, import_react67.useMemo)(() => layoutDaySpans(drawable, days, { timeZone, laneCap: Math.max(0, windowLaneCap) }), [drawable, days, timeZone, windowLaneCap]);
|
|
11798
|
+
const shades = (0, import_react67.useMemo)(() => layoutDaySpans(drawable.filter((overlay) => overlay.global), days, { timeZone }).placed, [drawable, days, timeZone]);
|
|
11116
11799
|
const lanesIn = (placed) => placed.reduce((max, span) => Math.max(max, span.lane + 1), 0);
|
|
11117
11800
|
const maxHours = Math.max(...columns.map((column) => column.dayHours));
|
|
11118
|
-
const gutterIndex = (0,
|
|
11801
|
+
const gutterIndex = (0, import_react67.useMemo)(() => {
|
|
11119
11802
|
const signatures = slots.map(slotSignature);
|
|
11120
11803
|
const count2 = /* @__PURE__ */ new Map();
|
|
11121
11804
|
for (const signature of signatures) count2.set(signature, (count2.get(signature) ?? 0) + 1);
|
|
@@ -11126,7 +11809,7 @@ function SchedulingTimeGrid({
|
|
|
11126
11809
|
return best;
|
|
11127
11810
|
}, [slots]);
|
|
11128
11811
|
const gutterSignature = slotSignature(slots[gutterIndex]);
|
|
11129
|
-
const hourLabels = (index, inline) => slots[index].map((slot) => /* @__PURE__ */ (0,
|
|
11812
|
+
const hourLabels = (index, inline) => slots[index].map((slot) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
|
|
11130
11813
|
"div",
|
|
11131
11814
|
{
|
|
11132
11815
|
className: inline ? "uix-scheduling-calendar__tg-hour uix-scheduling-calendar__tg-hour--inline" : "uix-scheduling-calendar__tg-hour",
|
|
@@ -11134,21 +11817,21 @@ function SchedulingTimeGrid({
|
|
|
11134
11817
|
style: vars({ "--uix-scheduling-calendar-offset": (slot.instant.getTime() - columns[index].dayStart) / HOUR_MS2 }),
|
|
11135
11818
|
children: [
|
|
11136
11819
|
slot.label,
|
|
11137
|
-
slot.offsetLabel && /* @__PURE__ */ (0,
|
|
11820
|
+
slot.offsetLabel && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__tg-offset", children: slot.offsetLabel })
|
|
11138
11821
|
]
|
|
11139
11822
|
},
|
|
11140
11823
|
slot.instant.getTime()
|
|
11141
11824
|
));
|
|
11142
11825
|
const movable = (entry) => moving && entry.movable !== false;
|
|
11143
|
-
const live = (0,
|
|
11826
|
+
const live = (0, import_react67.useRef)({ ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable });
|
|
11144
11827
|
live.current = { ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable };
|
|
11145
|
-
const dragRef = (0,
|
|
11146
|
-
const suppressClick = (0,
|
|
11147
|
-
const refocus = (0,
|
|
11148
|
-
(0,
|
|
11828
|
+
const dragRef = (0, import_react67.useRef)(null);
|
|
11829
|
+
const suppressClick = (0, import_react67.useRef)(false);
|
|
11830
|
+
const refocus = (0, import_react67.useRef)(null);
|
|
11831
|
+
(0, import_react67.useEffect)(() => {
|
|
11149
11832
|
if (ghost && !entryById.has(ghost.id)) setGhost(null);
|
|
11150
11833
|
}, [ghost, entryById]);
|
|
11151
|
-
(0,
|
|
11834
|
+
(0, import_react67.useEffect)(() => {
|
|
11152
11835
|
const id = refocus.current;
|
|
11153
11836
|
const root = rootRef.current;
|
|
11154
11837
|
if (!id || !root) return;
|
|
@@ -11165,7 +11848,7 @@ function SchedulingTimeGrid({
|
|
|
11165
11848
|
}
|
|
11166
11849
|
}
|
|
11167
11850
|
});
|
|
11168
|
-
const send = (0,
|
|
11851
|
+
const send = (0, import_react67.useCallback)((id, delta) => {
|
|
11169
11852
|
const state = live.current;
|
|
11170
11853
|
const entry = state.entryById.get(id);
|
|
11171
11854
|
if (!entry || !state.onProposeMove || !state.movable(entry) || delta.days === 0 && delta.minutes === 0) {
|
|
@@ -11180,7 +11863,7 @@ function SchedulingTimeGrid({
|
|
|
11180
11863
|
result.then(clear, clear);
|
|
11181
11864
|
} else setGhost(null);
|
|
11182
11865
|
}, []);
|
|
11183
|
-
const handlers = (0,
|
|
11866
|
+
const handlers = (0, import_react67.useMemo)(() => ({
|
|
11184
11867
|
click: (entry) => {
|
|
11185
11868
|
live.current.onSelectEntry?.(entry);
|
|
11186
11869
|
},
|
|
@@ -11303,7 +11986,7 @@ function SchedulingTimeGrid({
|
|
|
11303
11986
|
};
|
|
11304
11987
|
}
|
|
11305
11988
|
}), [send]);
|
|
11306
|
-
(0,
|
|
11989
|
+
(0, import_react67.useEffect)(() => () => {
|
|
11307
11990
|
dragRef.current?.stop();
|
|
11308
11991
|
dragRef.current = null;
|
|
11309
11992
|
}, []);
|
|
@@ -11395,7 +12078,7 @@ function SchedulingTimeGrid({
|
|
|
11395
12078
|
const ghostParts = ghost && ghostEntry && !ghostTop ? days.map((date) => layoutTimeGridDay([{ id: "ghost", start: ghost.proposal.start, end: ghost.proposal.end }], date, timeZone, { crossMidnightMinutes: Infinity }).segments) : null;
|
|
11396
12079
|
const ghostSpan = ghost && ghostEntry && ghostTop ? layoutDaySpans([{ id: "ghost", start: ghost.proposal.start, end: ghost.proposal.end }], days, { timeZone }).placed[0] : void 0;
|
|
11397
12080
|
const ghostLane = ghost ? top.placed.find((span) => span.id === ghost.id)?.lane ?? 0 : 0;
|
|
11398
|
-
return /* @__PURE__ */ (0,
|
|
12081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
|
|
11399
12082
|
"div",
|
|
11400
12083
|
{
|
|
11401
12084
|
ref: rootRef,
|
|
@@ -11414,8 +12097,8 @@ function SchedulingTimeGrid({
|
|
|
11414
12097
|
}
|
|
11415
12098
|
},
|
|
11416
12099
|
children: [
|
|
11417
|
-
/* @__PURE__ */ (0,
|
|
11418
|
-
/* @__PURE__ */ (0,
|
|
12100
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-scheduling-calendar__tg-head", children: [
|
|
12101
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-scheduling-calendar__tg-zone", children: fillLabel(labels.timeZone, { timeZone }) }),
|
|
11419
12102
|
days.map((date, index) => {
|
|
11420
12103
|
const info = dayInfo?.[date];
|
|
11421
12104
|
const hiddenIds = dayInfo ? [] : [...columns[index].hidden, ...topHiddenOn(date)];
|
|
@@ -11423,8 +12106,8 @@ function SchedulingTimeGrid({
|
|
|
11423
12106
|
const moreText = fillLabel(labels.moreSpans, { count: more });
|
|
11424
12107
|
const moreName = fillLabel(labels.moreEntriesLabel, { count: more, date: dateText(date, "day") });
|
|
11425
12108
|
const headName = !info ? dateText(date, "day") : info.label ? fillLabel(labels.dayName, { date: dateText(date, "day"), label: info.label }) : `${dateText(date, "day")}, ${fillLabel(labels.dayCount, { count: info.count })}`;
|
|
11426
|
-
return /* @__PURE__ */ (0,
|
|
11427
|
-
/* @__PURE__ */ (0,
|
|
12109
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-scheduling-calendar__tg-dayhead", role: "group", "aria-label": headName, "data-date": date, children: [
|
|
12110
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
|
|
11428
12111
|
"button",
|
|
11429
12112
|
{
|
|
11430
12113
|
type: "button",
|
|
@@ -11438,20 +12121,20 @@ function SchedulingTimeGrid({
|
|
|
11438
12121
|
children: dateText(date, "column")
|
|
11439
12122
|
}
|
|
11440
12123
|
),
|
|
11441
|
-
info && /* @__PURE__ */ (0,
|
|
11442
|
-
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0,
|
|
11443
|
-
more > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
11444
|
-
/* @__PURE__ */ (0,
|
|
11445
|
-
/* @__PURE__ */ (0,
|
|
12124
|
+
info && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__count", "aria-hidden": "true", children: info.count }),
|
|
12125
|
+
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: renderMarker2(marker, true) }, marker.id)) }),
|
|
12126
|
+
more > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, hiddenIds.map((id) => entryById.get(id)).filter(Boolean)), children: moreText }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("span", { className: "uix-scheduling-calendar__more", children: [
|
|
12127
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { "aria-hidden": "true", children: moreText }),
|
|
12128
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-visually-hidden", children: moreName })
|
|
11446
12129
|
] }))
|
|
11447
12130
|
] }, date);
|
|
11448
12131
|
})
|
|
11449
12132
|
] }),
|
|
11450
|
-
(windowLanes > 0 || moreWindows > 0) && /* @__PURE__ */ (0,
|
|
12133
|
+
(windowLanes > 0 || moreWindows > 0) && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-scheduling-calendar__tg-strip", role: "group", "aria-label": labels.windows, style: vars({ "--uix-scheduling-calendar-lanes": Math.max(windowLanes, 1) }), children: [
|
|
11451
12134
|
strip.placed.map((placed) => {
|
|
11452
12135
|
const overlay = overlayById.get(placed.id);
|
|
11453
12136
|
if (!overlay) return null;
|
|
11454
|
-
return /* @__PURE__ */ (0,
|
|
12137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
|
|
11455
12138
|
"button",
|
|
11456
12139
|
{
|
|
11457
12140
|
type: "button",
|
|
@@ -11466,24 +12149,24 @@ function SchedulingTimeGrid({
|
|
|
11466
12149
|
style: { gridColumn: gridColumns(placed), ...vars({ "--uix-scheduling-calendar-lane": placed.lane }) },
|
|
11467
12150
|
onClick: () => onSelectOverlay?.(overlay),
|
|
11468
12151
|
"aria-label": overlayName(overlay),
|
|
11469
|
-
children: /* @__PURE__ */ (0,
|
|
11470
|
-
overlay.kindLabel && /* @__PURE__ */ (0,
|
|
11471
|
-
/* @__PURE__ */ (0,
|
|
11472
|
-
overlay.scopeLabel && /* @__PURE__ */ (0,
|
|
12152
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("span", { className: "uix-scheduling-calendar__window-text", children: [
|
|
12153
|
+
overlay.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
|
|
12154
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
|
|
12155
|
+
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
|
|
11473
12156
|
] })
|
|
11474
12157
|
},
|
|
11475
12158
|
placed.id
|
|
11476
12159
|
);
|
|
11477
12160
|
}),
|
|
11478
|
-
moreWindows > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
12161
|
+
moreWindows > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__rowmore", "data-more-date": firstHiddenWindowDay, "aria-label": fillLabel(labels.moreWindowsLabel, { count: moreWindows, date: dateText(firstHiddenWindowDay, "day") }), onClick: () => onShowMore(firstHiddenWindowDay, []), children: fillLabel(labels.moreWindows, { count: moreWindows }) }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__rowmore", children: fillLabel(labels.moreWindows, { count: moreWindows }) }))
|
|
11479
12162
|
] }),
|
|
11480
|
-
(topLanes > 0 || ghostSpan) && /* @__PURE__ */ (0,
|
|
12163
|
+
(topLanes > 0 || ghostSpan) && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-scheduling-calendar__tg-strip uix-scheduling-calendar__tg-top", role: "group", "aria-label": labels.topLane, style: vars({ "--uix-scheduling-calendar-lanes": Math.max(topLanes, 1) }), children: [
|
|
11481
12164
|
top.placed.map((placed) => {
|
|
11482
12165
|
const entry = entryById.get(placed.id);
|
|
11483
12166
|
if (!entry) return null;
|
|
11484
12167
|
const canDrag = movable(entry);
|
|
11485
12168
|
const markers = entryMarkers(entry);
|
|
11486
|
-
return /* @__PURE__ */ (0,
|
|
12169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
|
|
11487
12170
|
"button",
|
|
11488
12171
|
{
|
|
11489
12172
|
type: "button",
|
|
@@ -11506,23 +12189,23 @@ function SchedulingTimeGrid({
|
|
|
11506
12189
|
onBlur: canDrag ? () => handlers.blur(entry) : void 0,
|
|
11507
12190
|
onPointerDown: canDrag ? (event) => handlers.pointerDown(event, entry, placed.startCol, true) : void 0,
|
|
11508
12191
|
children: [
|
|
11509
|
-
/* @__PURE__ */ (0,
|
|
11510
|
-
!placed.continuesBefore && !entry.allDay && /* @__PURE__ */ (0,
|
|
11511
|
-
/* @__PURE__ */ (0,
|
|
12192
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__entry-text", children: renderEntry?.(entry, { availableLines: 1 }) ?? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
|
|
12193
|
+
!placed.continuesBefore && !entry.allDay && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
|
|
12194
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
|
|
11512
12195
|
" "
|
|
11513
12196
|
] }),
|
|
11514
|
-
/* @__PURE__ */ (0,
|
|
12197
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title })
|
|
11515
12198
|
] }) }),
|
|
11516
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
12199
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: renderMarker2(marker) }, marker.id)) })
|
|
11517
12200
|
]
|
|
11518
12201
|
},
|
|
11519
12202
|
placed.id
|
|
11520
12203
|
);
|
|
11521
12204
|
}),
|
|
11522
|
-
ghostSpan && /* @__PURE__ */ (0,
|
|
12205
|
+
ghostSpan && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-scheduling-calendar__tg-ghost", "aria-hidden": "true", "data-sent": ghost?.source === "sent" || void 0, style: { gridColumn: gridColumns(ghostSpan), ...vars({ "--uix-scheduling-calendar-lane": ghostLane }) } })
|
|
11523
12206
|
] }),
|
|
11524
|
-
/* @__PURE__ */ (0,
|
|
11525
|
-
/* @__PURE__ */ (0,
|
|
12207
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-scheduling-calendar__tg-body", children: [
|
|
12208
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-scheduling-calendar__tg-gutter", "aria-hidden": "true", children: hourLabels(gutterIndex, false) }),
|
|
11526
12209
|
shades.map((placed) => {
|
|
11527
12210
|
const overlay = overlayById.get(placed.id);
|
|
11528
12211
|
const first = columns[placed.startCol];
|
|
@@ -11532,14 +12215,14 @@ function SchedulingTimeGrid({
|
|
|
11532
12215
|
const width = 100 / (placed.endCol - placed.startCol + 1);
|
|
11533
12216
|
const percent = (value) => `${Math.round(value * 1e4) / 100}%`;
|
|
11534
12217
|
const clipPath = placed.startCol === placed.endCol ? `polygon(0 ${percent(from)}, 100% ${percent(from)}, 100% ${percent(to)}, 0 ${percent(to)})` : `polygon(0 ${percent(from)}, ${width}% ${percent(from)}, ${width}% 0, 100% 0, 100% ${percent(to)}, ${100 - width}% ${percent(to)}, ${100 - width}% 100%, 0 100%)`;
|
|
11535
|
-
return /* @__PURE__ */ (0,
|
|
12218
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-scheduling-calendar__tg-shade", "aria-hidden": "true", "data-pattern": overlay.pattern ?? "solid", style: { gridColumn: gridColumns(placed), clipPath } }, `shade-${placed.id}`);
|
|
11536
12219
|
}),
|
|
11537
|
-
columns.map((column, index) => /* @__PURE__ */ (0,
|
|
12220
|
+
columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-scheduling-calendar__tg-column", "data-tg-column": column.date, style: { gridColumn: `${index + 2}`, ...vars({ "--uix-scheduling-calendar-hours": column.dayHours }) }, children: [
|
|
11538
12221
|
slotSignature(slots[index]) !== gutterSignature && hourLabels(index, true),
|
|
11539
12222
|
column.segments.map((segment) => {
|
|
11540
12223
|
const entry = entryById.get(segment.id);
|
|
11541
12224
|
const alone = segment.part === "continuation" && index === 0;
|
|
11542
|
-
return /* @__PURE__ */ (0,
|
|
12225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
|
|
11543
12226
|
GridItem,
|
|
11544
12227
|
{
|
|
11545
12228
|
entry,
|
|
@@ -11560,7 +12243,7 @@ function SchedulingTimeGrid({
|
|
|
11560
12243
|
`${segment.id}-${segment.part}`
|
|
11561
12244
|
);
|
|
11562
12245
|
}),
|
|
11563
|
-
ghostParts?.[index].map((segment) => /* @__PURE__ */ (0,
|
|
12246
|
+
ghostParts?.[index].map((segment) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
|
|
11564
12247
|
"div",
|
|
11565
12248
|
{
|
|
11566
12249
|
className: "uix-scheduling-calendar__tg-ghost",
|
|
@@ -11570,20 +12253,20 @@ function SchedulingTimeGrid({
|
|
|
11570
12253
|
},
|
|
11571
12254
|
`ghost-${segment.part}`
|
|
11572
12255
|
)),
|
|
11573
|
-
index === nowColumn && nowAt !== null && /* @__PURE__ */ (0,
|
|
12256
|
+
index === nowColumn && nowAt !== null && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-scheduling-calendar__tg-now", "aria-hidden": "true", style: vars({ "--uix-scheduling-calendar-offset": (nowAt - column.dayStart) / HOUR_MS2 }) })
|
|
11574
12257
|
] }, column.date))
|
|
11575
12258
|
] }),
|
|
11576
|
-
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0,
|
|
11577
|
-
moving && /* @__PURE__ */ (0,
|
|
11578
|
-
/* @__PURE__ */ (0,
|
|
11579
|
-
/* @__PURE__ */ (0,
|
|
12259
|
+
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-scheduling-calendar__empty", children: emptyNote }),
|
|
12260
|
+
moving && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.moveHint }),
|
|
12261
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-scheduling-calendar__tg-probe", "aria-hidden": "true", children: "00:00 abcdef" }),
|
|
12262
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
11580
12263
|
]
|
|
11581
12264
|
}
|
|
11582
12265
|
);
|
|
11583
12266
|
}
|
|
11584
12267
|
|
|
11585
12268
|
// src/components/SchedulingCalendar.tsx
|
|
11586
|
-
var
|
|
12269
|
+
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
11587
12270
|
var DEFAULT_SCHEDULING_CALENDAR_LABELS = {
|
|
11588
12271
|
region: "Scheduling calendar in {timeZone}",
|
|
11589
12272
|
previous: "Previous",
|
|
@@ -11652,12 +12335,12 @@ function coveredDays(start, end, timeZone) {
|
|
|
11652
12335
|
}
|
|
11653
12336
|
function Marker({ marker, showLabel }) {
|
|
11654
12337
|
const emphasis = marker.emphasis ?? "neutral";
|
|
11655
|
-
return /* @__PURE__ */ (0,
|
|
11656
|
-
marker.icon != null && /* @__PURE__ */ (0,
|
|
11657
|
-
/* @__PURE__ */ (0,
|
|
12338
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "uix-scheduling-calendar__marker", "data-emphasis": emphasis, "data-glyph": marker.icon == null ? emphasis : void 0, children: [
|
|
12339
|
+
marker.icon != null && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__marker-icon", "aria-hidden": "true", children: marker.icon }),
|
|
12340
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: showLabel ? "uix-scheduling-calendar__marker-label" : "uix-visually-hidden", children: marker.label })
|
|
11658
12341
|
] });
|
|
11659
12342
|
}
|
|
11660
|
-
var renderMarker = (marker, showLabel) => /* @__PURE__ */ (0,
|
|
12343
|
+
var renderMarker = (marker, showLabel) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Marker, { marker, showLabel });
|
|
11661
12344
|
function SchedulingCalendar({
|
|
11662
12345
|
entries,
|
|
11663
12346
|
anchorDate,
|
|
@@ -11716,27 +12399,27 @@ function SchedulingCalendar({
|
|
|
11716
12399
|
};
|
|
11717
12400
|
const stateLabel = labels.states;
|
|
11718
12401
|
const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, day: labels.viewDay, agenda: labels.viewAgenda };
|
|
11719
|
-
const [internalView, setInternalView] = (0,
|
|
12402
|
+
const [internalView, setInternalView] = (0, import_react68.useState)("month");
|
|
11720
12403
|
const view = controlledView ?? internalView;
|
|
11721
|
-
const [activeDate, setActiveDate] = (0,
|
|
11722
|
-
const [expandedDates, setExpandedDates] = (0,
|
|
12404
|
+
const [activeDate, setActiveDate] = (0, import_react68.useState)(anchorDate);
|
|
12405
|
+
const [expandedDates, setExpandedDates] = (0, import_react68.useState)(() => /* @__PURE__ */ new Set());
|
|
11723
12406
|
const dateText = (date, part) => formatDate?.(date, part) ?? cachedDateTimeFormat(locale, INTL_PARTS[part]).format(utcDate(date));
|
|
11724
12407
|
const formatInstant = (instant) => formatInstantProp?.(instant) ?? `${dateText(zonedDateKey(instant, timeZone), "day")} ${zonedTimeOfDay(instant, timeZone)}`;
|
|
11725
|
-
const gridRef = (0,
|
|
12408
|
+
const gridRef = (0, import_react68.useRef)(null);
|
|
11726
12409
|
const picksGiven = dayEntries !== void 0;
|
|
11727
12410
|
const controlled = picksGiven || dayInfo !== void 0;
|
|
11728
12411
|
const countsOnly = monthDensity === "counts" && view === "month";
|
|
11729
12412
|
const fixed = controlled || maxEntriesPerDay !== void 0 && onShowMore !== void 0 || countsOnly;
|
|
11730
12413
|
const windowCap = Math.max(0, windowLaneCap ?? (fixed ? DEFAULT_LANE_CAP2 : Infinity));
|
|
11731
12414
|
const spanCap = Math.max(0, spanLaneCap ?? (fixed ? DEFAULT_LANE_CAP2 : Infinity));
|
|
11732
|
-
const visibleEntries = (0,
|
|
11733
|
-
const monthDays = (0,
|
|
12415
|
+
const visibleEntries = (0, import_react68.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
|
|
12416
|
+
const monthDays = (0, import_react68.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate), weekStartsOn), [anchorDate, weekStartsOn]);
|
|
11734
12417
|
const weekday = (utcDate(anchorDate).getUTCDay() - weekStartsOn + 7) % 7;
|
|
11735
12418
|
const weekStart = addCalendarDays(anchorDate, -weekday);
|
|
11736
|
-
const weekDays = (0,
|
|
11737
|
-
const days = (0,
|
|
12419
|
+
const weekDays = (0, import_react68.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
|
|
12420
|
+
const days = (0, import_react68.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : view === "day" ? [anchorDate] : weekDays, [view, monthDays, weekDays, anchorDate]);
|
|
11738
12421
|
const timeGridView = view === "day" || view === "week" && timeGrid;
|
|
11739
|
-
const { singles, multiDay, coverage } = (0,
|
|
12422
|
+
const { singles, multiDay, coverage } = (0, import_react68.useMemo)(() => {
|
|
11740
12423
|
const byDay = /* @__PURE__ */ new Map();
|
|
11741
12424
|
const spans = [];
|
|
11742
12425
|
const every = [];
|
|
@@ -11751,9 +12434,9 @@ function SchedulingCalendar({
|
|
|
11751
12434
|
}
|
|
11752
12435
|
return { singles: byDay, multiDay: spans, coverage: every };
|
|
11753
12436
|
}, [visibleEntries, timeZone]);
|
|
11754
|
-
const entryById = (0,
|
|
11755
|
-
const overlayById = (0,
|
|
11756
|
-
const layout = (0,
|
|
12437
|
+
const entryById = (0, import_react68.useMemo)(() => new Map([...multiDay].reverse().map(({ entry }) => [entry.id, entry])), [multiDay]);
|
|
12438
|
+
const overlayById = (0, import_react68.useMemo)(() => new Map([...overlays].reverse().map((overlay) => [overlay.id, overlay])), [overlays]);
|
|
12439
|
+
const layout = (0, import_react68.useMemo)(() => {
|
|
11757
12440
|
if (spanLayout) return spanLayout;
|
|
11758
12441
|
if (view === "agenda" || timeGridView) return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
|
|
11759
12442
|
const inputs = [];
|
|
@@ -11771,7 +12454,7 @@ function SchedulingCalendar({
|
|
|
11771
12454
|
}
|
|
11772
12455
|
return layoutMonthSpans(inputs, days, { timeZone, laneCap: { window: windowCap, item: spanCap } });
|
|
11773
12456
|
}, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap, countsOnly]);
|
|
11774
|
-
const placedByRow = (0,
|
|
12457
|
+
const placedByRow = (0, import_react68.useMemo)(() => {
|
|
11775
12458
|
const rows = /* @__PURE__ */ new Map();
|
|
11776
12459
|
for (const placed of layout.placed) {
|
|
11777
12460
|
const row = rows.get(placed.weekRow);
|
|
@@ -11782,7 +12465,7 @@ function SchedulingCalendar({
|
|
|
11782
12465
|
}, [layout]);
|
|
11783
12466
|
const lanesUsed = (row, group) => (placedByRow.get(row) ?? []).reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
|
|
11784
12467
|
const lanesUsedAnywhere = (group) => layout.placed.reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
|
|
11785
|
-
(0,
|
|
12468
|
+
(0, import_react68.useEffect)(() => {
|
|
11786
12469
|
if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
|
|
11787
12470
|
}, [activeDate, days, view]);
|
|
11788
12471
|
const setView = (next) => {
|
|
@@ -11798,7 +12481,7 @@ function SchedulingCalendar({
|
|
|
11798
12481
|
setActiveDate(date);
|
|
11799
12482
|
requestAnimationFrame(() => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.focus());
|
|
11800
12483
|
};
|
|
11801
|
-
const enteredFrom = (0,
|
|
12484
|
+
const enteredFrom = (0, import_react68.useRef)(null);
|
|
11802
12485
|
const cellOf = (date) => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.closest(".uix-scheduling-calendar__day") ?? null;
|
|
11803
12486
|
const dayRing = (date) => {
|
|
11804
12487
|
const cell = cellOf(date);
|
|
@@ -11868,10 +12551,10 @@ function SchedulingCalendar({
|
|
|
11868
12551
|
const date = dayOfItem(item);
|
|
11869
12552
|
if (date && dayRing(date).includes(item)) setActiveDate(date);
|
|
11870
12553
|
};
|
|
11871
|
-
const flatAgendaRef = (0,
|
|
11872
|
-
const flatAgendaStop = (0,
|
|
12554
|
+
const flatAgendaRef = (0, import_react68.useRef)(null);
|
|
12555
|
+
const flatAgendaStop = (0, import_react68.useRef)({ node: null, index: 0 });
|
|
11873
12556
|
const flatAgendaRows = () => Array.from(flatAgendaRef.current?.querySelectorAll(":scope > ol > li > button") ?? []);
|
|
11874
|
-
(0,
|
|
12557
|
+
(0, import_react68.useEffect)(() => {
|
|
11875
12558
|
flatAgendaStop.current = syncRovingStop(flatAgendaRows(), flatAgendaStop.current);
|
|
11876
12559
|
});
|
|
11877
12560
|
const onFlatAgendaFocus = (event) => {
|
|
@@ -11921,15 +12604,15 @@ function SchedulingCalendar({
|
|
|
11921
12604
|
});
|
|
11922
12605
|
const entryContent = (entry, withTime = true) => {
|
|
11923
12606
|
const markers = markersOf(entry);
|
|
11924
|
-
return /* @__PURE__ */ (0,
|
|
11925
|
-
/* @__PURE__ */ (0,
|
|
11926
|
-
withTime && /* @__PURE__ */ (0,
|
|
11927
|
-
/* @__PURE__ */ (0,
|
|
12607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
|
|
12608
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__entry-text", children: renderEntry?.(entry) ?? /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
|
|
12609
|
+
withTime && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
|
|
12610
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
|
|
11928
12611
|
" "
|
|
11929
12612
|
] }),
|
|
11930
|
-
/* @__PURE__ */ (0,
|
|
12613
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title })
|
|
11931
12614
|
] }) }),
|
|
11932
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
12615
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Marker, { marker }, marker.id)) })
|
|
11933
12616
|
] });
|
|
11934
12617
|
};
|
|
11935
12618
|
const laneStyle = (placed, windowLanes) => ({
|
|
@@ -11948,25 +12631,25 @@ function SchedulingCalendar({
|
|
|
11948
12631
|
const onDay = picksGiven ? all : entriesOn(date);
|
|
11949
12632
|
const badge = renderDayBadge?.(date, onDay);
|
|
11950
12633
|
const hasBadge = badge != null && badge !== false;
|
|
11951
|
-
const dateButton = /* @__PURE__ */ (0,
|
|
12634
|
+
const dateButton = /* @__PURE__ */ (0, import_jsx_runtime93.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), onClick: onSelectDate ? () => onSelectDate(date) : void 0, "aria-label": info?.label ? fillLabel(labels.dayName, { date: dateText(date, "day"), label: info.label }) : dateText(date, "day"), children: Number(date.slice(-2)) });
|
|
11952
12635
|
const moreText = fillLabel(labels.moreEntries, { count: hiddenCount });
|
|
11953
12636
|
const moreName = fillLabel(labels.moreEntriesLabel, { count: hiddenCount, date: dateText(date, "day") });
|
|
11954
|
-
return /* @__PURE__ */ (0,
|
|
11955
|
-
hasBadge || info ? /* @__PURE__ */ (0,
|
|
11956
|
-
hasBadge && /* @__PURE__ */ (0,
|
|
11957
|
-
info && /* @__PURE__ */ (0,
|
|
11958
|
-
/* @__PURE__ */ (0,
|
|
11959
|
-
/* @__PURE__ */ (0,
|
|
12637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
|
|
12638
|
+
hasBadge || info ? /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__dayhead", children: [
|
|
12639
|
+
hasBadge && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__badge", children: badge }),
|
|
12640
|
+
info && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "uix-scheduling-calendar__count", "aria-hidden": info.label ? true : void 0, children: [
|
|
12641
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { "aria-hidden": "true", children: info.count }),
|
|
12642
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-visually-hidden", children: info.label ?? fillLabel(labels.dayCount, { count: info.count }) })
|
|
11960
12643
|
] }),
|
|
11961
|
-
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0,
|
|
12644
|
+
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Marker, { marker }, marker.id)) }),
|
|
11962
12645
|
dateButton
|
|
11963
12646
|
] }) : dateButton,
|
|
11964
|
-
/* @__PURE__ */ (0,
|
|
11965
|
-
shown.map((entry) => /* @__PURE__ */ (0,
|
|
11966
|
-
countsOnly ? null : controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
11967
|
-
/* @__PURE__ */ (0,
|
|
11968
|
-
/* @__PURE__ */ (0,
|
|
11969
|
-
] })) : overflowing && /* @__PURE__ */ (0,
|
|
12647
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__entries", children: [
|
|
12648
|
+
shown.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { className: "uix-scheduling-calendar__entry", ...entryProps(entry), children: entryContent(entry) }, entry.id)),
|
|
12649
|
+
countsOnly ? null : controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, onDay), children: moreText }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "uix-scheduling-calendar__more", children: [
|
|
12650
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { "aria-hidden": "true", children: moreText }),
|
|
12651
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-visually-hidden", children: moreName })
|
|
12652
|
+
] })) : overflowing && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__more", "aria-expanded": onShowMore ? void 0 : !collapsed, "aria-label": collapsed ? moreName : void 0, onClick: () => toggleMore(date, onDay), children: collapsed ? moreText : labels.fewerEntries })
|
|
11970
12653
|
] })
|
|
11971
12654
|
] }, date);
|
|
11972
12655
|
};
|
|
@@ -11981,26 +12664,26 @@ function SchedulingCalendar({
|
|
|
11981
12664
|
const moreText = fillLabel(labels.moreSpans, { count: hidden });
|
|
11982
12665
|
const moreName = fillLabel(labels.moreSpansLabel, { count: hidden, date: dateText(firstHiddenDay, "day") });
|
|
11983
12666
|
const style = { ["--uix-scheduling-calendar-lanes"]: Math.max(windowLanes + spanLanes, hidden > 0 ? 1 : 0) };
|
|
11984
|
-
return /* @__PURE__ */ (0,
|
|
12667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__week", style, children: [
|
|
11985
12668
|
rowDays.map((date, column) => renderDay(date, row * 7 + column)),
|
|
11986
12669
|
(placedByRow.get(row) ?? []).map((placed) => {
|
|
11987
12670
|
const continues = { "data-continues-before": placed.continuesBefore || void 0, "data-continues-after": placed.continuesAfter || void 0 };
|
|
11988
12671
|
if (placed.group === "window") {
|
|
11989
12672
|
const overlay = overlayById.get(placed.id);
|
|
11990
12673
|
if (!overlay) return null;
|
|
11991
|
-
return /* @__PURE__ */ (0,
|
|
11992
|
-
overlay.kindLabel && /* @__PURE__ */ (0,
|
|
11993
|
-
/* @__PURE__ */ (0,
|
|
11994
|
-
overlay.scopeLabel && /* @__PURE__ */ (0,
|
|
12674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__window", "data-overlay-id": overlay.id, "data-pattern": overlay.pattern ?? "solid", "data-global": overlay.global || void 0, "data-kind": overlay.kind, ...continues, style: laneStyle(placed, windowLanes), onClick: () => onSelectOverlay?.(overlay), "aria-label": overlayName(overlay), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "uix-scheduling-calendar__window-text", children: [
|
|
12675
|
+
overlay.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
|
|
12676
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
|
|
12677
|
+
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
|
|
11995
12678
|
] }) }, `window-${placed.id}`);
|
|
11996
12679
|
}
|
|
11997
12680
|
const entry = entryById.get(placed.id);
|
|
11998
12681
|
if (!entry || countsOnly) return null;
|
|
11999
|
-
return /* @__PURE__ */ (0,
|
|
12682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { className: "uix-scheduling-calendar__entry uix-scheduling-calendar__span", ...entryProps(entry), ...continues, style: laneStyle(placed, windowLanes), children: entryContent(entry, !placed.continuesBefore) }, `span-${placed.id}`);
|
|
12000
12683
|
}),
|
|
12001
|
-
hidden > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
12002
|
-
/* @__PURE__ */ (0,
|
|
12003
|
-
/* @__PURE__ */ (0,
|
|
12684
|
+
hidden > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", tabIndex: -1, className: "uix-scheduling-calendar__rowmore", "data-more-date": rowDays.includes(firstHiddenDay) ? firstHiddenDay : rowDays[0], "aria-label": moreName, onClick: () => onShowMore(firstHiddenDay, picksGiven ? dayEntries[firstHiddenDay] ?? EMPTY_ENTRIES : entriesOn(firstHiddenDay)), children: moreText }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "uix-scheduling-calendar__rowmore", children: [
|
|
12685
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { "aria-hidden": "true", children: moreText }),
|
|
12686
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-visually-hidden", children: moreName })
|
|
12004
12687
|
] }))
|
|
12005
12688
|
] }, rowDays[0]);
|
|
12006
12689
|
};
|
|
@@ -12011,20 +12694,20 @@ function SchedulingCalendar({
|
|
|
12011
12694
|
Object.keys(layout.hiddenByRow ?? {}).length > 0 ? 1 : 0
|
|
12012
12695
|
)
|
|
12013
12696
|
} : void 0;
|
|
12014
|
-
return /* @__PURE__ */ (0,
|
|
12015
|
-
showHeader && /* @__PURE__ */ (0,
|
|
12016
|
-
/* @__PURE__ */ (0,
|
|
12017
|
-
/* @__PURE__ */ (0,
|
|
12018
|
-
/* @__PURE__ */ (0,
|
|
12697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("section", { className: cx("uix-scheduling-calendar", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
|
|
12698
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__header", children: [
|
|
12699
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { children: [
|
|
12700
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: periodLabel("previous") }),
|
|
12701
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: periodLabel("next") })
|
|
12019
12702
|
] }),
|
|
12020
|
-
/* @__PURE__ */ (0,
|
|
12021
|
-
/* @__PURE__ */ (0,
|
|
12703
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("strong", { children: view === "month" ? dateText(startOfMonth(anchorDate), "month") : view === "day" ? dateText(anchorDate, "day") : `${dateText(weekStart, "day")} \u2013 ${dateText(weekDays[weekDays.length - 1], "day")}` }),
|
|
12704
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "uix-segmented", role: "group", "aria-label": labels.viewGroup, children: (timeGrid || view === "day" ? ["month", "week", "day", "agenda"] : ["month", "week", "agenda"]).map((option) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: viewLabel[option] }, option)) })
|
|
12022
12705
|
] }),
|
|
12023
|
-
notice != null && notice !== false && /* @__PURE__ */ (0,
|
|
12024
|
-
loading ? /* @__PURE__ */ (0,
|
|
12025
|
-
/* @__PURE__ */ (0,
|
|
12026
|
-
onRetry && /* @__PURE__ */ (0,
|
|
12027
|
-
] }) : view === "agenda" && agendaGroups ? /* @__PURE__ */ (0,
|
|
12706
|
+
notice != null && notice !== false && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "uix-scheduling-calendar__notice", children: notice }),
|
|
12707
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "uix-scheduling-calendar__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
|
|
12708
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { children: error }),
|
|
12709
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
|
|
12710
|
+
] }) : view === "agenda" && agendaGroups ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
|
|
12028
12711
|
SchedulingAgenda,
|
|
12029
12712
|
{
|
|
12030
12713
|
groups: agendaGroups,
|
|
@@ -12045,22 +12728,22 @@ function SchedulingCalendar({
|
|
|
12045
12728
|
onSelectOverlay,
|
|
12046
12729
|
onShowMore
|
|
12047
12730
|
}
|
|
12048
|
-
) : view === "agenda" ? /* @__PURE__ */ (0,
|
|
12731
|
+
) : view === "agenda" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ref: flatAgendaRef, className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, onKeyDown: onFlatAgendaKeyDown, onFocus: onFlatAgendaFocus, children: visibleEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { children: labels.agendaEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
|
|
12049
12732
|
const markers = markersOf(entry);
|
|
12050
|
-
return /* @__PURE__ */ (0,
|
|
12051
|
-
/* @__PURE__ */ (0,
|
|
12052
|
-
/* @__PURE__ */ (0,
|
|
12053
|
-
/* @__PURE__ */ (0,
|
|
12733
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("button", { type: "button", "data-item-id": entry.id, "data-highlight": entry.emphasis === "highlight" || void 0, "data-dim": entry.emphasis === "dim" || void 0, "data-band": entry.band ?? "none", "data-status": statusOf(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), children: [
|
|
12734
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { children: [
|
|
12735
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("strong", { children: renderEntry?.(entry) ?? entry.title }),
|
|
12736
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { children: [
|
|
12054
12737
|
formatInstant(entry.start),
|
|
12055
12738
|
" \u2013 ",
|
|
12056
12739
|
formatInstant(entry.end)
|
|
12057
12740
|
] }),
|
|
12058
|
-
entry.meta && /* @__PURE__ */ (0,
|
|
12741
|
+
entry.meta && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { children: entry.meta })
|
|
12059
12742
|
] }),
|
|
12060
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
12061
|
-
entry.state ? /* @__PURE__ */ (0,
|
|
12743
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Marker, { marker }, marker.id)) }),
|
|
12744
|
+
entry.state ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(StatusPill, { tone: stateTone(entry.state), children: stateLabel[entry.state] }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__status", children: stateText(entry) })
|
|
12062
12745
|
] }) }, entry.id);
|
|
12063
|
-
}) }) }) : timeGridView ? /* @__PURE__ */ (0,
|
|
12746
|
+
}) }) }) : timeGridView ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
|
|
12064
12747
|
SchedulingTimeGrid,
|
|
12065
12748
|
{
|
|
12066
12749
|
view: view === "day" ? "day" : "week",
|
|
@@ -12094,26 +12777,26 @@ function SchedulingCalendar({
|
|
|
12094
12777
|
emptyNote,
|
|
12095
12778
|
nothingToShow
|
|
12096
12779
|
}
|
|
12097
|
-
) : /* @__PURE__ */ (0,
|
|
12098
|
-
days.slice(0, 7).map((date) => /* @__PURE__ */ (0,
|
|
12780
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), "data-fixed": fixed || void 0, "data-density": countsOnly ? "counts" : void 0, style: gridStyle, onKeyDown: onGridKeyDown, onFocus: onGridFocus, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
|
|
12781
|
+
days.slice(0, 7).map((date) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "uix-scheduling-calendar__weekday", "aria-hidden": "true", children: dateText(date, "weekday") }, `weekday-${date}`)),
|
|
12099
12782
|
Array.from({ length: days.length / 7 }, (_, row) => renderWeek(row)),
|
|
12100
|
-
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0,
|
|
12783
|
+
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "uix-scheduling-calendar__empty", children: emptyNote })
|
|
12101
12784
|
] }),
|
|
12102
|
-
legend ? (legend.length > 0 || legendCaption != null && legendCaption !== false) && /* @__PURE__ */ (0,
|
|
12103
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
12104
|
-
/* @__PURE__ */ (0,
|
|
12785
|
+
legend ? (legend.length > 0 || legendCaption != null && legendCaption !== false) && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__legend", role: "group", "aria-label": labels.legend, children: [
|
|
12786
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("ul", { className: "uix-scheduling-calendar__legend-list", children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("li", { "data-legend-id": item.id, children: [
|
|
12787
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-scheduling-calendar__swatch", "aria-hidden": "true", "data-band": item.swatch.band, "data-status": item.swatch.status, "data-pattern": item.swatch.pattern, children: item.swatch.icon }),
|
|
12105
12788
|
item.label
|
|
12106
12789
|
] }, item.id)) }),
|
|
12107
|
-
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0,
|
|
12108
|
-
] }) : /* @__PURE__ */ (0,
|
|
12109
|
-
["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ (0,
|
|
12110
|
-
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0,
|
|
12790
|
+
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: "uix-scheduling-calendar__legend-caption", children: legendCaption })
|
|
12791
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-scheduling-calendar__legend", role: "group", "aria-label": labels.legend, children: [
|
|
12792
|
+
["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { "data-state": state, children: stateLabel[state] }, state)),
|
|
12793
|
+
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("p", { className: "uix-scheduling-calendar__legend-caption", children: legendCaption })
|
|
12111
12794
|
] })
|
|
12112
12795
|
] });
|
|
12113
12796
|
}
|
|
12114
12797
|
|
|
12115
12798
|
// src/components/SchedulingTimeline.tsx
|
|
12116
|
-
var
|
|
12799
|
+
var import_react69 = require("react");
|
|
12117
12800
|
|
|
12118
12801
|
// src/scheduling-timeline-model.ts
|
|
12119
12802
|
var HOUR = 36e5;
|
|
@@ -12299,7 +12982,7 @@ function timelineWindow(offsets, top, bottom, options = {}) {
|
|
|
12299
12982
|
}
|
|
12300
12983
|
|
|
12301
12984
|
// src/components/SchedulingTimeline.tsx
|
|
12302
|
-
var
|
|
12985
|
+
var import_jsx_runtime94 = require("react/jsx-runtime");
|
|
12303
12986
|
var DEFAULT_SCHEDULING_TIMELINE_LABELS = {
|
|
12304
12987
|
region: "Schedule timeline in {timeZone}",
|
|
12305
12988
|
lanes: "Lanes",
|
|
@@ -12341,7 +13024,7 @@ var DEFAULT_UNITS = { row: 36, pad: 16, head: 40 };
|
|
|
12341
13024
|
var ESTIMATED_VIEWPORT = 720;
|
|
12342
13025
|
var OVERSCAN_ROWS = 4;
|
|
12343
13026
|
var BAR_MIN_FALLBACK = 1.5 * 16;
|
|
12344
|
-
var useIsomorphicLayoutEffect8 = typeof document !== "undefined" ?
|
|
13027
|
+
var useIsomorphicLayoutEffect8 = typeof document !== "undefined" ? import_react69.useLayoutEffect : import_react69.useEffect;
|
|
12345
13028
|
var sameExtent = (a, b) => a.subRows === b.subRows && a.lanes === b.lanes && a.heads === b.heads;
|
|
12346
13029
|
var IN_LANE = { scope: "lane", labelTops: ["0%"] };
|
|
12347
13030
|
var vars2 = (values) => values;
|
|
@@ -12358,9 +13041,9 @@ function uniqueKeys2(ids) {
|
|
|
12358
13041
|
var lanesOf = (target) => target.laneIds !== void 0 ? new Set(target.laneIds) : target.laneId ? /* @__PURE__ */ new Set([target.laneId]) : null;
|
|
12359
13042
|
function ItemMarker({ marker, showLabel }) {
|
|
12360
13043
|
const emphasis = marker.emphasis ?? "neutral";
|
|
12361
|
-
return /* @__PURE__ */ (0,
|
|
12362
|
-
marker.icon != null && /* @__PURE__ */ (0,
|
|
12363
|
-
/* @__PURE__ */ (0,
|
|
13044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "uix-scheduling-timeline__item-marker", "data-emphasis": emphasis, "data-glyph": marker.icon == null ? emphasis : void 0, children: [
|
|
13045
|
+
marker.icon != null && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__item-marker-icon", "aria-hidden": "true", children: marker.icon }),
|
|
13046
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: showLabel ? "uix-scheduling-timeline__item-marker-label" : "uix-visually-hidden", children: marker.label })
|
|
12364
13047
|
] });
|
|
12365
13048
|
}
|
|
12366
13049
|
function SchedulingTimeline({
|
|
@@ -12407,29 +13090,29 @@ function SchedulingTimeline({
|
|
|
12407
13090
|
overlays: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.overlays, ...uixLabels.schedulingTimeline?.overlays, ...labelOverrides?.overlays },
|
|
12408
13091
|
statuses: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.statuses, ...uixLabels.schedulingTimeline?.statuses, ...labelOverrides?.statuses }
|
|
12409
13092
|
};
|
|
12410
|
-
const id = (0,
|
|
13093
|
+
const id = (0, import_react69.useId)();
|
|
12411
13094
|
const hintId = `${id}-hint`;
|
|
12412
13095
|
const step = stepProp !== void 0 && Number.isFinite(stepProp) && stepProp > 0 ? stepProp : defaultTimelineStep(scale);
|
|
12413
|
-
const rootRef = (0,
|
|
12414
|
-
const [scroller, setScroller] = (0,
|
|
12415
|
-
const [layerTrack, setLayerTrack] = (0,
|
|
12416
|
-
const probeRef = (0,
|
|
12417
|
-
const bodyRef = (0,
|
|
12418
|
-
const barMinRef = (0,
|
|
12419
|
-
const [barShare, setBarShare] = (0,
|
|
12420
|
-
const barShareRef = (0,
|
|
12421
|
-
const anchorRef = (0,
|
|
12422
|
-
const [anchorKey, setAnchorKey] = (0,
|
|
12423
|
-
const [focusRowKey, setFocusRowKey] = (0,
|
|
12424
|
-
const [activeId, setActiveId] = (0,
|
|
12425
|
-
const [focusRequest, setFocusRequest] = (0,
|
|
12426
|
-
const [stepDrag, setStepDrag] = (0,
|
|
12427
|
-
const [ghost, setGhost] = (0,
|
|
12428
|
-
const [announcement, setAnnouncement] = (0,
|
|
12429
|
-
const [selfCollapsed, setSelfCollapsed] = (0,
|
|
12430
|
-
const [units, setUnits] = (0,
|
|
12431
|
-
const [view, setView] = (0,
|
|
12432
|
-
const measureViewRef = (0,
|
|
13096
|
+
const rootRef = (0, import_react69.useRef)(null);
|
|
13097
|
+
const [scroller, setScroller] = (0, import_react69.useState)(null);
|
|
13098
|
+
const [layerTrack, setLayerTrack] = (0, import_react69.useState)(null);
|
|
13099
|
+
const probeRef = (0, import_react69.useRef)(null);
|
|
13100
|
+
const bodyRef = (0, import_react69.useRef)(null);
|
|
13101
|
+
const barMinRef = (0, import_react69.useRef)(null);
|
|
13102
|
+
const [barShare, setBarShare] = (0, import_react69.useState)(0);
|
|
13103
|
+
const barShareRef = (0, import_react69.useRef)(0);
|
|
13104
|
+
const anchorRef = (0, import_react69.useRef)(null);
|
|
13105
|
+
const [anchorKey, setAnchorKey] = (0, import_react69.useState)(null);
|
|
13106
|
+
const [focusRowKey, setFocusRowKey] = (0, import_react69.useState)(null);
|
|
13107
|
+
const [activeId, setActiveId] = (0, import_react69.useState)();
|
|
13108
|
+
const [focusRequest, setFocusRequest] = (0, import_react69.useState)(null);
|
|
13109
|
+
const [stepDrag, setStepDrag] = (0, import_react69.useState)(null);
|
|
13110
|
+
const [ghost, setGhost] = (0, import_react69.useState)(null);
|
|
13111
|
+
const [announcement, setAnnouncement] = (0, import_react69.useState)("");
|
|
13112
|
+
const [selfCollapsed, setSelfCollapsed] = (0, import_react69.useState)({});
|
|
13113
|
+
const [units, setUnits] = (0, import_react69.useState)(DEFAULT_UNITS);
|
|
13114
|
+
const [view, setView] = (0, import_react69.useState)({ top: 0, height: ESTIMATED_VIEWPORT });
|
|
13115
|
+
const measureViewRef = (0, import_react69.useRef)(null);
|
|
12433
13116
|
const proposing = onProposeMove !== void 0;
|
|
12434
13117
|
const stepping = !proposing && onMoveItem !== void 0;
|
|
12435
13118
|
const resizing = onResizeItem !== void 0;
|
|
@@ -12444,8 +13127,8 @@ function SchedulingTimeline({
|
|
|
12444
13127
|
return offset ? `${text} ${offset}` : text;
|
|
12445
13128
|
};
|
|
12446
13129
|
const fmtTick = (at) => formatTick?.(new Date(at), scale) ?? cachedDateTimeFormat(locale, { timeZone, ...TICK_FORMAT[scale] }).format(new Date(at));
|
|
12447
|
-
const ticks = (0,
|
|
12448
|
-
const minorTicks = (0,
|
|
13130
|
+
const ticks = (0, import_react69.useMemo)(() => timelineTicks(range, scale, timeZone, weekStartsOn), [range.start, range.end, scale, timeZone, weekStartsOn]);
|
|
13131
|
+
const minorTicks = (0, import_react69.useMemo)(
|
|
12449
13132
|
() => scale === "day" && subTicks && subTicks.length > 0 ? timelineSubTicks(range, subTicks, timeZone) : [],
|
|
12450
13133
|
[range.start, range.end, scale, timeZone, subTicks]
|
|
12451
13134
|
// eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -12474,7 +13157,7 @@ function SchedulingTimeline({
|
|
|
12474
13157
|
const minSpan = Math.max(0, (Date.parse(range.end) - Date.parse(range.start)) * barShare) || 0;
|
|
12475
13158
|
const isCollapsed = (group) => onToggleGroup ? !!group.collapsed : selfCollapsed[group.id] ?? !!group.collapsed;
|
|
12476
13159
|
const collapsedSignature = groups?.map((group) => isCollapsed(group) ? "1" : "0").join("") ?? "";
|
|
12477
|
-
const itemsByLane = (0,
|
|
13160
|
+
const itemsByLane = (0, import_react69.useMemo)(() => {
|
|
12478
13161
|
const byLane = /* @__PURE__ */ new Map();
|
|
12479
13162
|
for (const item of items) {
|
|
12480
13163
|
const list = byLane.get(item.laneId);
|
|
@@ -12483,7 +13166,7 @@ function SchedulingTimeline({
|
|
|
12483
13166
|
}
|
|
12484
13167
|
return byLane;
|
|
12485
13168
|
}, [items]);
|
|
12486
|
-
const rows = (0,
|
|
13169
|
+
const rows = (0, import_react69.useMemo)(() => {
|
|
12487
13170
|
const laneRow = (lane, laneIndex, groupIndex) => {
|
|
12488
13171
|
const placed = layoutLane(itemsByLane.get(lane.id) ?? EMPTY_ITEMS, range, { flagOverlaps, minSpan });
|
|
12489
13172
|
return { kind: "lane", key: `lane-${laneIndex}`, lane, laneIndex, groupIndex, placed, keys: uniqueKeys2(placed.map((p) => p.item.id)), subRows: placed.reduce((max, p) => Math.max(max, p.row + 1), 1) };
|
|
@@ -12515,8 +13198,8 @@ function SchedulingTimeline({
|
|
|
12515
13198
|
});
|
|
12516
13199
|
return list;
|
|
12517
13200
|
}, [lanes, groups, collapsedSignature, itemsByLane, range.start, range.end, flagOverlaps, minSpan]);
|
|
12518
|
-
const laneRows = (0,
|
|
12519
|
-
const { ordered, rowOfItem } = (0,
|
|
13201
|
+
const laneRows = (0, import_react69.useMemo)(() => rows.filter((row) => row.kind === "lane"), [rows]);
|
|
13202
|
+
const { ordered, rowOfItem } = (0, import_react69.useMemo)(() => {
|
|
12520
13203
|
const ids = [];
|
|
12521
13204
|
const rowOf = /* @__PURE__ */ new Map();
|
|
12522
13205
|
rows.forEach((row, rowIndex) => {
|
|
@@ -12528,13 +13211,13 @@ function SchedulingTimeline({
|
|
|
12528
13211
|
});
|
|
12529
13212
|
return { ordered: ids, rowOfItem: rowOf };
|
|
12530
13213
|
}, [rows]);
|
|
12531
|
-
const nothingToShow = (0,
|
|
13214
|
+
const nothingToShow = (0, import_react69.useMemo)(() => {
|
|
12532
13215
|
if (ordered.length > 0) return false;
|
|
12533
13216
|
const laneIds = new Set(lanes.map((lane) => lane.id));
|
|
12534
13217
|
return !items.some((item) => laneIds.has(item.laneId) && placeSpan(item, range) !== null);
|
|
12535
13218
|
}, [ordered, lanes, items, range.start, range.end]);
|
|
12536
13219
|
const focusId = activeId !== void 0 && rowOfItem.has(activeId) ? activeId : ordered[0];
|
|
12537
|
-
const strips = (0,
|
|
13220
|
+
const strips = (0, import_react69.useMemo)(() => {
|
|
12538
13221
|
const set = /* @__PURE__ */ new Set();
|
|
12539
13222
|
const shown = overlays.filter((overlay) => placeSpan(overlay, range) !== null).map(lanesOf);
|
|
12540
13223
|
if (shown.length === 0) return set;
|
|
@@ -12544,12 +13227,12 @@ function SchedulingTimeline({
|
|
|
12544
13227
|
});
|
|
12545
13228
|
return set;
|
|
12546
13229
|
}, [rows, overlays, range.start, range.end]);
|
|
12547
|
-
const extents = (0,
|
|
13230
|
+
const extents = (0, import_react69.useMemo)(() => timelineRowExtents(rows.map((row, index) => row.kind === "head" ? { kind: "head", subRows: strips.has(index) ? 1 : 0 } : { kind: "lane", subRows: row.subRows })), [rows, strips]);
|
|
12548
13231
|
const windowed = lanes.length + (groups?.length ?? 0) > virtualizeAbove;
|
|
12549
13232
|
const printing = usePrinting(windowed);
|
|
12550
13233
|
const virtual = windowed && !printing;
|
|
12551
13234
|
const fixed = windowed || groups !== void 0 || overlays.some((overlay) => overlay.laneIds !== void 0) || markers.some((marker) => marker.laneIds !== void 0);
|
|
12552
|
-
(0,
|
|
13235
|
+
(0, import_react69.useEffect)(() => {
|
|
12553
13236
|
if (!virtual || !scroller) return void 0;
|
|
12554
13237
|
let frame = 0;
|
|
12555
13238
|
const measure = () => {
|
|
@@ -12589,12 +13272,12 @@ function SchedulingTimeline({
|
|
|
12589
13272
|
};
|
|
12590
13273
|
}, [virtual, scroller]);
|
|
12591
13274
|
const px = (extent) => extent.subRows * units.row + extent.lanes * units.pad + extent.heads * units.head;
|
|
12592
|
-
const offsets = (0,
|
|
13275
|
+
const offsets = (0, import_react69.useMemo)(() => virtual ? extents.map(px) : [], [virtual, extents, units]);
|
|
12593
13276
|
const overscan = OVERSCAN_ROWS * units.row;
|
|
12594
13277
|
const pinned = focusId === void 0 ? -1 : rowOfItem.get(focusId) ?? -1;
|
|
12595
|
-
const focusedRow = (0,
|
|
12596
|
-
const anchorRow = (0,
|
|
12597
|
-
const { mounted, windowStart } = (0,
|
|
13278
|
+
const focusedRow = (0, import_react69.useMemo)(() => focusRowKey === null ? -1 : rows.findIndex((row) => row.key === focusRowKey), [rows, focusRowKey]);
|
|
13279
|
+
const anchorRow = (0, import_react69.useMemo)(() => anchorKey === null ? -1 : rows.findIndex((row) => row.key === anchorKey), [rows, anchorKey]);
|
|
13280
|
+
const { mounted, windowStart } = (0, import_react69.useMemo)(() => {
|
|
12598
13281
|
if (!virtual) return { mounted: rows.map((_, index) => index), windowStart: 0 };
|
|
12599
13282
|
const window_ = timelineWindow(offsets, view.top, view.top + view.height, { overscan });
|
|
12600
13283
|
const list = [];
|
|
@@ -12642,10 +13325,10 @@ function SchedulingTimeline({
|
|
|
12642
13325
|
setActiveId(itemId);
|
|
12643
13326
|
setFocusRequest({ id: itemId });
|
|
12644
13327
|
};
|
|
12645
|
-
(0,
|
|
13328
|
+
(0, import_react69.useEffect)(() => {
|
|
12646
13329
|
if (focusRequest) findBar(focusRequest.id)?.focus();
|
|
12647
13330
|
}, [focusRequest]);
|
|
12648
|
-
const itemById = (0,
|
|
13331
|
+
const itemById = (0, import_react69.useMemo)(() => {
|
|
12649
13332
|
const map = /* @__PURE__ */ new Map();
|
|
12650
13333
|
for (const row of laneRows) for (const p of row.placed) if (!map.has(p.item.id)) map.set(p.item.id, p.item);
|
|
12651
13334
|
return map;
|
|
@@ -12655,15 +13338,15 @@ function SchedulingTimeline({
|
|
|
12655
13338
|
const steps = Math.round(ms / step);
|
|
12656
13339
|
return { days: steps * stepDelta.days, minutes: steps * stepDelta.minutes };
|
|
12657
13340
|
};
|
|
12658
|
-
const live = (0,
|
|
13341
|
+
const live = (0, import_react69.useRef)({ itemById, timeZone, range, step, onProposeMove, canMove, deltaFor, labels, fmtInstant });
|
|
12659
13342
|
live.current = { itemById, timeZone, range, step, onProposeMove, canMove, deltaFor, labels, fmtInstant };
|
|
12660
|
-
const dragRef = (0,
|
|
12661
|
-
const suppressClick = (0,
|
|
12662
|
-
const refocus = (0,
|
|
12663
|
-
(0,
|
|
13343
|
+
const dragRef = (0, import_react69.useRef)(null);
|
|
13344
|
+
const suppressClick = (0, import_react69.useRef)(false);
|
|
13345
|
+
const refocus = (0, import_react69.useRef)(null);
|
|
13346
|
+
(0, import_react69.useEffect)(() => {
|
|
12664
13347
|
if (ghost && !itemById.has(ghost.id)) setGhost(null);
|
|
12665
13348
|
}, [ghost, itemById]);
|
|
12666
|
-
(0,
|
|
13349
|
+
(0, import_react69.useEffect)(() => {
|
|
12667
13350
|
const wanted = refocus.current;
|
|
12668
13351
|
if (!wanted || !rootRef.current) return;
|
|
12669
13352
|
const active = document.activeElement;
|
|
@@ -12674,11 +13357,11 @@ function SchedulingTimeline({
|
|
|
12674
13357
|
}
|
|
12675
13358
|
findBar(wanted)?.focus();
|
|
12676
13359
|
});
|
|
12677
|
-
(0,
|
|
13360
|
+
(0, import_react69.useEffect)(() => () => {
|
|
12678
13361
|
dragRef.current?.stop();
|
|
12679
13362
|
dragRef.current = null;
|
|
12680
13363
|
}, []);
|
|
12681
|
-
(0,
|
|
13364
|
+
(0, import_react69.useEffect)(() => {
|
|
12682
13365
|
if (proposing) return;
|
|
12683
13366
|
dragRef.current?.stop();
|
|
12684
13367
|
dragRef.current = null;
|
|
@@ -12939,17 +13622,17 @@ function SchedulingTimeline({
|
|
|
12939
13622
|
"data-scope": scope.scope,
|
|
12940
13623
|
style: { left: `${pos.left}%`, width: `${pos.width}%`, ...vars2({ "--uix-timeline-clip": scope.clip }) }
|
|
12941
13624
|
};
|
|
12942
|
-
const text = scope.labelTops.map((top) => /* @__PURE__ */ (0,
|
|
12943
|
-
overlay.kindLabel && /* @__PURE__ */ (0,
|
|
12944
|
-
/* @__PURE__ */ (0,
|
|
12945
|
-
overlay.scopeLabel && /* @__PURE__ */ (0,
|
|
13625
|
+
const text = scope.labelTops.map((top) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "uix-scheduling-timeline__overlay-label", style: vars2({ "--uix-timeline-label-top": top }), children: [
|
|
13626
|
+
overlay.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__overlay-kind", children: overlay.kindLabel }),
|
|
13627
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__overlay-name", children: overlay.label }),
|
|
13628
|
+
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__overlay-scope", children: overlay.scopeLabel })
|
|
12946
13629
|
] }, top));
|
|
12947
|
-
return onSelectOverlay ? /* @__PURE__ */ (0,
|
|
13630
|
+
return onSelectOverlay ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("button", { type: "button", ...shared, "aria-label": overlayName(overlay), onClick: () => onSelectOverlay(overlay), children: text }, key) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { ...shared, "aria-hidden": "true", children: text }, key);
|
|
12948
13631
|
};
|
|
12949
13632
|
const renderMarker2 = (marker, key, scope) => {
|
|
12950
13633
|
const pos = placeSpan({ start: marker.at, end: marker.at }, range);
|
|
12951
13634
|
if (!pos || !scope) return null;
|
|
12952
|
-
return /* @__PURE__ */ (0,
|
|
13635
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__marker", "data-marker-id": marker.id, "data-scope": scope.scope, style: { left: `${pos.left}%`, ...vars2({ "--uix-timeline-clip": scope.clip }) }, title: marker.label, "aria-hidden": "true" }, key);
|
|
12953
13636
|
};
|
|
12954
13637
|
const overlayKeys = uniqueKeys2(overlays.map((overlay) => overlay.id));
|
|
12955
13638
|
const markerKeys = uniqueKeys2(markers.map((marker) => marker.id));
|
|
@@ -12974,7 +13657,7 @@ function SchedulingTimeline({
|
|
|
12974
13657
|
const movable = canMove(item);
|
|
12975
13658
|
const described = movable || canResize(item);
|
|
12976
13659
|
const itemMarkers = markersOf(item);
|
|
12977
|
-
return /* @__PURE__ */ (0,
|
|
13660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("li", { className: "uix-scheduling-timeline__slot", style: { left: `${shown.left}%`, width: `${shown.width}%`, ...vars2({ "--uix-timeline-row": p.row }) }, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
|
|
12978
13661
|
"button",
|
|
12979
13662
|
{
|
|
12980
13663
|
type: "button",
|
|
@@ -13012,9 +13695,9 @@ function SchedulingTimeline({
|
|
|
13012
13695
|
onSelectItem?.(item);
|
|
13013
13696
|
},
|
|
13014
13697
|
children: [
|
|
13015
|
-
/* @__PURE__ */ (0,
|
|
13016
|
-
item.meta && /* @__PURE__ */ (0,
|
|
13017
|
-
itemMarkers.length > 0 && /* @__PURE__ */ (0,
|
|
13698
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__item-title", children: renderItem?.(item) ?? item.title }),
|
|
13699
|
+
item.meta && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__item-meta", children: item.meta }),
|
|
13700
|
+
itemMarkers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__item-markers", children: itemMarkers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ItemMarker, { marker }, marker.id)) })
|
|
13018
13701
|
]
|
|
13019
13702
|
}
|
|
13020
13703
|
) }, row.keys[index]);
|
|
@@ -13022,41 +13705,41 @@ function SchedulingTimeline({
|
|
|
13022
13705
|
const renderRow = (row, rowIndex) => {
|
|
13023
13706
|
if (row.kind === "head") {
|
|
13024
13707
|
const { group, collapsed } = row;
|
|
13025
|
-
return /* @__PURE__ */ (0,
|
|
13026
|
-
/* @__PURE__ */ (0,
|
|
13027
|
-
/* @__PURE__ */ (0,
|
|
13028
|
-
/* @__PURE__ */ (0,
|
|
13029
|
-
/* @__PURE__ */ (0,
|
|
13708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: cx("uix-scheduling-timeline__row", "uix-scheduling-timeline__row--group", collapsed && "uix-scheduling-timeline__row--summary"), "data-row-key": row.key, "data-group-id": group.id, "data-collapsed": collapsed || void 0, "data-strip": strips.has(rowIndex) || void 0, children: [
|
|
13709
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__group-head", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__group-label", children: [
|
|
13710
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("button", { type: "button", className: "uix-scheduling-timeline__group-toggle", "aria-expanded": !collapsed, onClick: () => toggleGroup(group), children: [
|
|
13711
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__group-chevron", "aria-hidden": "true" }),
|
|
13712
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__group-name", id: `${id}-group-${row.groupIndex}`, children: group.label })
|
|
13030
13713
|
] }),
|
|
13031
|
-
group.meta != null && /* @__PURE__ */ (0,
|
|
13032
|
-
collapsed && group.summary && /* @__PURE__ */ (0,
|
|
13033
|
-
/* @__PURE__ */ (0,
|
|
13034
|
-
group.summary.markers && group.summary.markers.length > 0 && /* @__PURE__ */ (0,
|
|
13714
|
+
group.meta != null && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__group-meta", children: group.meta }),
|
|
13715
|
+
collapsed && group.summary && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "uix-scheduling-timeline__group-summary", children: [
|
|
13716
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__group-count", children: fillLabel(labels.groupSummary, { count: group.summary.count }) }),
|
|
13717
|
+
group.summary.markers && group.summary.markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__item-markers", children: group.summary.markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ItemMarker, { marker, showLabel: true }, marker.id)) })
|
|
13035
13718
|
] })
|
|
13036
13719
|
] }) }),
|
|
13037
|
-
strips.has(rowIndex) && /* @__PURE__ */ (0,
|
|
13720
|
+
strips.has(rowIndex) && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__group-strip", "aria-hidden": "true" })
|
|
13038
13721
|
] }, row.key);
|
|
13039
13722
|
}
|
|
13040
13723
|
const { lane } = row;
|
|
13041
13724
|
const laneLabelId = `${id}-lane-${row.laneIndex}`;
|
|
13042
13725
|
const ghostPlaced = ghost ? row.placed.find((p) => p.item.id === ghost.id) : void 0;
|
|
13043
13726
|
const ghostPos = ghost && ghostPlaced && rowOfItem.get(ghost.id) === rowIndex ? placeSpan(ghost.proposal, range) : null;
|
|
13044
|
-
return /* @__PURE__ */ (0,
|
|
13045
|
-
/* @__PURE__ */ (0,
|
|
13046
|
-
/* @__PURE__ */ (0,
|
|
13047
|
-
lane.meta != null && /* @__PURE__ */ (0,
|
|
13727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__row", "data-row-key": row.key, "data-lane-id": lane.id, style: vars2({ "--uix-timeline-rows": row.subRows }), children: [
|
|
13728
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__lane-label", id: laneLabelId, children: [
|
|
13729
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__lane-name", children: lane.label }),
|
|
13730
|
+
lane.meta != null && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__lane-meta", children: lane.meta })
|
|
13048
13731
|
] }),
|
|
13049
|
-
/* @__PURE__ */ (0,
|
|
13732
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: [
|
|
13050
13733
|
overlays.map((overlay, index) => !inLayer(overlay) && lanesOf(overlay).has(lane.id) ? renderOverlay(overlay, overlayKeys[index], IN_LANE) : null),
|
|
13051
13734
|
markers.map((marker, index) => !inLayer(marker) && lanesOf(marker).has(lane.id) ? renderMarker2(marker, markerKeys[index], IN_LANE) : null),
|
|
13052
|
-
/* @__PURE__ */ (0,
|
|
13053
|
-
ghostPos && /* @__PURE__ */ (0,
|
|
13735
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("ul", { className: "uix-scheduling-timeline__items", "aria-labelledby": row.groupIndex === void 0 ? laneLabelId : `${id}-group-${row.groupIndex} ${laneLabelId}`, children: renderItems(row, rowIndex) }),
|
|
13736
|
+
ghostPos && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__ghost", "aria-hidden": "true", "data-sent": ghost?.source === "sent" || void 0, style: { left: `${ghostPos.left}%`, width: `${ghostPos.width}%`, ...vars2({ "--uix-timeline-row": ghostPlaced.row }) } })
|
|
13054
13737
|
] })
|
|
13055
13738
|
] }, row.key);
|
|
13056
13739
|
};
|
|
13057
13740
|
const body = [];
|
|
13058
13741
|
let cursor = 0;
|
|
13059
|
-
const spacer = (from, to) => /* @__PURE__ */ (0,
|
|
13742
|
+
const spacer = (from, to) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__spacer", "aria-hidden": "true", style: { height: extentCss(between(extents[from], extents[to])) } }, `spacer-${from}`);
|
|
13060
13743
|
for (const index of mounted) {
|
|
13061
13744
|
if (index > cursor) body.push(spacer(cursor, index));
|
|
13062
13745
|
body.push(renderRow(rows[index], index));
|
|
@@ -13064,7 +13747,7 @@ function SchedulingTimeline({
|
|
|
13064
13747
|
}
|
|
13065
13748
|
if (cursor < rows.length) body.push(spacer(cursor, rows.length));
|
|
13066
13749
|
const listed = onSelectOverlay ? EMPTY_OVERLAYS2 : overlays;
|
|
13067
|
-
return /* @__PURE__ */ (0,
|
|
13750
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
|
|
13068
13751
|
"section",
|
|
13069
13752
|
{
|
|
13070
13753
|
ref: rootRef,
|
|
@@ -13079,45 +13762,45 @@ function SchedulingTimeline({
|
|
|
13079
13762
|
}
|
|
13080
13763
|
},
|
|
13081
13764
|
children: [
|
|
13082
|
-
notice != null && notice !== false && /* @__PURE__ */ (0,
|
|
13083
|
-
loading ? /* @__PURE__ */ (0,
|
|
13084
|
-
/* @__PURE__ */ (0,
|
|
13085
|
-
onRetry && /* @__PURE__ */ (0,
|
|
13086
|
-
] }) : /* @__PURE__ */ (0,
|
|
13087
|
-
(listed.length > 0 || markers.length > 0) && /* @__PURE__ */ (0,
|
|
13088
|
-
/* @__PURE__ */ (0,
|
|
13089
|
-
/* @__PURE__ */ (0,
|
|
13090
|
-
listed.map((o, index) => /* @__PURE__ */ (0,
|
|
13765
|
+
notice != null && notice !== false && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__notice", children: notice }),
|
|
13766
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__state", role: "alert", children: [
|
|
13767
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { children: error }),
|
|
13768
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
|
|
13769
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
|
|
13770
|
+
(listed.length > 0 || markers.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-visually-hidden", children: [
|
|
13771
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { id: `${id}-windows`, children: labels.windows }),
|
|
13772
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("ul", { "aria-labelledby": `${id}-windows`, children: [
|
|
13773
|
+
listed.map((o, index) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("li", { children: o.accessibleName ?? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
|
|
13091
13774
|
o.kindLabel === void 0 && o.kind ? `${labels.overlays[o.kind]}: ${o.label}${o.scopeLabel ? `, ${o.scopeLabel}` : ""}` : overlayWords(o),
|
|
13092
13775
|
", ",
|
|
13093
13776
|
fmtInstant(o.start),
|
|
13094
13777
|
" \u2013 ",
|
|
13095
13778
|
fmtInstant(o.end)
|
|
13096
13779
|
] }) }, overlayKeys[index])),
|
|
13097
|
-
markers.map((m, index) => /* @__PURE__ */ (0,
|
|
13780
|
+
markers.map((m, index) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("li", { children: [
|
|
13098
13781
|
m.label,
|
|
13099
13782
|
", ",
|
|
13100
13783
|
fmtInstant(m.at)
|
|
13101
13784
|
] }, markerKeys[index]))
|
|
13102
13785
|
] })
|
|
13103
13786
|
] }),
|
|
13104
|
-
/* @__PURE__ */ (0,
|
|
13105
|
-
/* @__PURE__ */ (0,
|
|
13106
|
-
/* @__PURE__ */ (0,
|
|
13107
|
-
/* @__PURE__ */ (0,
|
|
13108
|
-
/* @__PURE__ */ (0,
|
|
13109
|
-
ticks.map((tick) => /* @__PURE__ */ (0,
|
|
13787
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { ref: setScroller, className: "uix-scheduling-timeline__scroller", "data-virtual": virtual || void 0, "data-scroll-y": maxHeight !== void 0 || void 0, style: maxHeight !== void 0 ? { maxHeight } : void 0, children: [
|
|
13788
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__grid", "data-sub-ticks": minorTicks.length > 0 || void 0, children: [
|
|
13789
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--axis", "aria-hidden": "true", children: [
|
|
13790
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__lane-label", children: labels.lanes }),
|
|
13791
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__track uix-scheduling-timeline__axis", style: trackStyle, children: [
|
|
13792
|
+
ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__tick", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, children: tick.offset < 100 && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "uix-scheduling-timeline__tick-label", children: [
|
|
13110
13793
|
fmtTick(tick.at),
|
|
13111
|
-
tick.offsetLabel && /* @__PURE__ */ (0,
|
|
13794
|
+
tick.offsetLabel && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__tick-offset", children: tick.offsetLabel })
|
|
13112
13795
|
] }) }, tick.at)),
|
|
13113
|
-
minorTicks.map((tick) => /* @__PURE__ */ (0,
|
|
13796
|
+
minorTicks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__tick", "data-minor": "true", style: { left: `${tick.offset}%` }, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__tick-label", children: formatTick?.(new Date(tick.at), "hour") ?? tick.label }) }, `minor-${tick.at}`))
|
|
13114
13797
|
] })
|
|
13115
13798
|
] }),
|
|
13116
|
-
columnNoteList.length > 0 && /* @__PURE__ */ (0,
|
|
13117
|
-
/* @__PURE__ */ (0,
|
|
13118
|
-
/* @__PURE__ */ (0,
|
|
13799
|
+
columnNoteList.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--notes", children: [
|
|
13800
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__lane-label" }),
|
|
13801
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: columnNoteList.map(({ date, node, pos }) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__column-note", "data-date": date, style: { left: `${pos.left}%`, width: `${pos.width}%` }, children: node }, date)) })
|
|
13119
13802
|
] }),
|
|
13120
|
-
/* @__PURE__ */ (0,
|
|
13803
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
|
|
13121
13804
|
"div",
|
|
13122
13805
|
{
|
|
13123
13806
|
ref: bodyRef,
|
|
@@ -13127,15 +13810,15 @@ function SchedulingTimeline({
|
|
|
13127
13810
|
if (!event.currentTarget.contains(event.relatedTarget)) setFocusRowKey(null);
|
|
13128
13811
|
},
|
|
13129
13812
|
children: [
|
|
13130
|
-
/* @__PURE__ */ (0,
|
|
13131
|
-
/* @__PURE__ */ (0,
|
|
13132
|
-
/* @__PURE__ */ (0,
|
|
13133
|
-
/* @__PURE__ */ (0,
|
|
13134
|
-
ticks.map((tick) => /* @__PURE__ */ (0,
|
|
13135
|
-
minorTicks.map((tick) => /* @__PURE__ */ (0,
|
|
13813
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-scheduling-timeline__layer", children: [
|
|
13814
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "uix-scheduling-timeline__lane-label", "aria-hidden": "true" }),
|
|
13815
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { ref: setLayerTrack, className: "uix-scheduling-timeline__track", style: trackStyle, children: [
|
|
13816
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { ref: barMinRef, className: "uix-scheduling-timeline__bar-min", "aria-hidden": "true" }),
|
|
13817
|
+
ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__gridline", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, tick.at)),
|
|
13818
|
+
minorTicks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__gridline", "data-minor": "true", style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, `minor-${tick.at}`)),
|
|
13136
13819
|
overlays.map((overlay, index) => inLayer(overlay) ? renderOverlay(overlay, overlayKeys[index], scopeOf(lanesOf(overlay))) : null),
|
|
13137
13820
|
markers.map((marker, index) => inLayer(marker) ? renderMarker2(marker, markerKeys[index], scopeOf(lanesOf(marker))) : null),
|
|
13138
|
-
nowPos && /* @__PURE__ */ (0,
|
|
13821
|
+
nowPos && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__now", style: { left: `${nowPos.left}%` }, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-scheduling-timeline__now-label", children: labels.now }) })
|
|
13139
13822
|
] })
|
|
13140
13823
|
] }),
|
|
13141
13824
|
body
|
|
@@ -13143,23 +13826,23 @@ function SchedulingTimeline({
|
|
|
13143
13826
|
}
|
|
13144
13827
|
)
|
|
13145
13828
|
] }),
|
|
13146
|
-
virtual && /* @__PURE__ */ (0,
|
|
13147
|
-
/* @__PURE__ */ (0,
|
|
13148
|
-
/* @__PURE__ */ (0,
|
|
13149
|
-
/* @__PURE__ */ (0,
|
|
13829
|
+
virtual && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { ref: probeRef, className: "uix-scheduling-timeline__probe", "aria-hidden": "true", children: [
|
|
13830
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", {}),
|
|
13831
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", {}),
|
|
13832
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", {})
|
|
13150
13833
|
] })
|
|
13151
13834
|
] }),
|
|
13152
|
-
nothingToShow && /* @__PURE__ */ (0,
|
|
13835
|
+
nothingToShow && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("p", { className: "uix-scheduling-timeline__empty", children: labels.empty })
|
|
13153
13836
|
] }),
|
|
13154
|
-
hint && /* @__PURE__ */ (0,
|
|
13155
|
-
/* @__PURE__ */ (0,
|
|
13837
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { id: hintId, className: "uix-visually-hidden", children: hint }),
|
|
13838
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
|
|
13156
13839
|
]
|
|
13157
13840
|
}
|
|
13158
13841
|
);
|
|
13159
13842
|
}
|
|
13160
13843
|
|
|
13161
13844
|
// src/components/DateRangePicker.tsx
|
|
13162
|
-
var
|
|
13845
|
+
var import_react71 = require("react");
|
|
13163
13846
|
|
|
13164
13847
|
// src/date-field-model.ts
|
|
13165
13848
|
var pad = (n, width = 2) => String(n).padStart(width, "0");
|
|
@@ -13233,8 +13916,8 @@ function timeZoneName(timeZone, date, locale) {
|
|
|
13233
13916
|
}
|
|
13234
13917
|
|
|
13235
13918
|
// src/components/DateFieldParts.tsx
|
|
13236
|
-
var
|
|
13237
|
-
var
|
|
13919
|
+
var import_react70 = require("react");
|
|
13920
|
+
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
13238
13921
|
var localDateKey = (now = /* @__PURE__ */ new Date()) => `${now.getFullYear().toString().padStart(4, "0")}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")}`;
|
|
13239
13922
|
var utc = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
|
|
13240
13923
|
var monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(utc(date));
|
|
@@ -13251,15 +13934,15 @@ var isOpen = (el) => {
|
|
|
13251
13934
|
}
|
|
13252
13935
|
};
|
|
13253
13936
|
function useFieldPopover(popoverId, restoreFocus, onOpenChange) {
|
|
13254
|
-
const [open, setOpen] = (0,
|
|
13255
|
-
const pointerWasOpen = (0,
|
|
13256
|
-
const restoreRef = (0,
|
|
13937
|
+
const [open, setOpen] = (0, import_react70.useState)(false);
|
|
13938
|
+
const pointerWasOpen = (0, import_react70.useRef)(null);
|
|
13939
|
+
const restoreRef = (0, import_react70.useRef)(restoreFocus);
|
|
13257
13940
|
restoreRef.current = restoreFocus;
|
|
13258
|
-
const onOpenChangeRef = (0,
|
|
13941
|
+
const onOpenChangeRef = (0, import_react70.useRef)(onOpenChange);
|
|
13259
13942
|
onOpenChangeRef.current = onOpenChange;
|
|
13260
|
-
const skipRestore = (0,
|
|
13943
|
+
const skipRestore = (0, import_react70.useRef)(false);
|
|
13261
13944
|
const popoverEl = () => typeof document === "undefined" ? null : document.getElementById(popoverId);
|
|
13262
|
-
(0,
|
|
13945
|
+
(0, import_react70.useEffect)(() => {
|
|
13263
13946
|
const el = popoverEl();
|
|
13264
13947
|
if (!el) return;
|
|
13265
13948
|
const onToggle = (event) => {
|
|
@@ -13343,14 +14026,14 @@ function MonthCalendar({
|
|
|
13343
14026
|
autoFocus = false
|
|
13344
14027
|
}) {
|
|
13345
14028
|
const clamp3 = (date) => min && date < min ? min : max && date > max ? max : date;
|
|
13346
|
-
const [active, setActive] = (0,
|
|
13347
|
-
const gridRef = (0,
|
|
13348
|
-
const pendingFocus = (0,
|
|
14029
|
+
const [active, setActive] = (0, import_react70.useState)(() => clamp3(initialDate));
|
|
14030
|
+
const gridRef = (0, import_react70.useRef)(null);
|
|
14031
|
+
const pendingFocus = (0, import_react70.useRef)(autoFocus);
|
|
13349
14032
|
const month = startOfMonth(active);
|
|
13350
|
-
const days = (0,
|
|
14033
|
+
const days = (0, import_react70.useMemo)(() => buildMonthGrid(month, weekStartsOn).filter((day) => day.inMonth), [month, weekStartsOn]);
|
|
13351
14034
|
const blanks = (utc(month).getUTCDay() - weekStartsOn + 7) % 7;
|
|
13352
|
-
const weekdays = (0,
|
|
13353
|
-
(0,
|
|
14035
|
+
const weekdays = (0, import_react70.useMemo)(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
|
|
14036
|
+
(0, import_react70.useEffect)(() => {
|
|
13354
14037
|
if (!pendingFocus.current) return;
|
|
13355
14038
|
pendingFocus.current = false;
|
|
13356
14039
|
gridRef.current?.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
|
|
@@ -13378,22 +14061,22 @@ function MonthCalendar({
|
|
|
13378
14061
|
};
|
|
13379
14062
|
const atMin = !!min && month <= startOfMonth(min);
|
|
13380
14063
|
const atMax = !!max && month >= startOfMonth(max);
|
|
13381
|
-
return /* @__PURE__ */ (0,
|
|
13382
|
-
/* @__PURE__ */ (0,
|
|
13383
|
-
/* @__PURE__ */ (0,
|
|
14064
|
+
return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "uix-date-picker__calendar", children: [
|
|
14065
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "uix-date-picker__nav", children: [
|
|
14066
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("button", { type: "button", className: "uix-date-picker__nav-btn", "aria-label": labels.previousMonth, "aria-disabled": atMin || void 0, onClick: () => {
|
|
13384
14067
|
if (!atMin) showMonth(-1);
|
|
13385
|
-
}, children: /* @__PURE__ */ (0,
|
|
13386
|
-
/* @__PURE__ */ (0,
|
|
13387
|
-
/* @__PURE__ */ (0,
|
|
14068
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ChevronLeftIcon, { size: "sm" }) }),
|
|
14069
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "uix-date-picker__month", "aria-live": "polite", children: monthLabel(month, locale) }),
|
|
14070
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("button", { type: "button", className: "uix-date-picker__nav-btn", "aria-label": labels.nextMonth, "aria-disabled": atMax || void 0, onClick: () => {
|
|
13388
14071
|
if (!atMax) showMonth(1);
|
|
13389
|
-
}, children: /* @__PURE__ */ (0,
|
|
14072
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ChevronRightIcon, { size: "sm" }) })
|
|
13390
14073
|
] }),
|
|
13391
|
-
/* @__PURE__ */ (0,
|
|
13392
|
-
/* @__PURE__ */ (0,
|
|
13393
|
-
Array.from({ length: blanks }, (_, index) => /* @__PURE__ */ (0,
|
|
14074
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: weekdays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { children: day }, index)) }),
|
|
14075
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { ref: gridRef, className: "uix-date-range-picker__grid uix-date-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
|
|
14076
|
+
Array.from({ length: blanks }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { "aria-hidden": "true" }, `blank-${index}`)),
|
|
13394
14077
|
days.map((day) => {
|
|
13395
14078
|
const off = unavailable(day.date);
|
|
13396
|
-
return /* @__PURE__ */ (0,
|
|
14079
|
+
return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
|
|
13397
14080
|
"button",
|
|
13398
14081
|
{
|
|
13399
14082
|
type: "button",
|
|
@@ -13419,7 +14102,7 @@ function MonthCalendar({
|
|
|
13419
14102
|
}
|
|
13420
14103
|
|
|
13421
14104
|
// src/components/DateRangePicker.tsx
|
|
13422
|
-
var
|
|
14105
|
+
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
13423
14106
|
var DEFAULT_DATE_RANGE_PICKER_LABELS = {
|
|
13424
14107
|
previous: "Previous",
|
|
13425
14108
|
previousMonth: "Show previous month",
|
|
@@ -13457,27 +14140,27 @@ function RangeCalendar({
|
|
|
13457
14140
|
weekStartsOn = 1,
|
|
13458
14141
|
autoFocus = false
|
|
13459
14142
|
}) {
|
|
13460
|
-
const id = (0,
|
|
13461
|
-
const weekdays = (0,
|
|
13462
|
-
const [internalMonth, setInternalMonth] = (0,
|
|
14143
|
+
const id = (0, import_react71.useId)();
|
|
14144
|
+
const weekdays = (0, import_react71.useMemo)(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
|
|
14145
|
+
const [internalMonth, setInternalMonth] = (0, import_react71.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
|
|
13463
14146
|
const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
|
|
13464
|
-
const [activeDate, setActiveDate] = (0,
|
|
13465
|
-
const rootRef = (0,
|
|
13466
|
-
const pendingFocus = (0,
|
|
14147
|
+
const [activeDate, setActiveDate] = (0, import_react71.useState)(value.end ?? value.start ?? visibleMonth);
|
|
14148
|
+
const rootRef = (0, import_react71.useRef)(null);
|
|
14149
|
+
const pendingFocus = (0, import_react71.useRef)(autoFocus);
|
|
13467
14150
|
const count2 = Math.max(1, Math.min(3, months));
|
|
13468
|
-
const calendars = (0,
|
|
14151
|
+
const calendars = (0, import_react71.useMemo)(() => Array.from({ length: count2 }, (_, index) => {
|
|
13469
14152
|
const month = startOfMonth(addCalendarMonths(visibleMonth, index));
|
|
13470
14153
|
return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
|
|
13471
14154
|
}), [visibleMonth, count2]);
|
|
13472
14155
|
const todayDate = today === void 0 ? localDateKey() : today;
|
|
13473
14156
|
const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
|
|
13474
|
-
(0,
|
|
14157
|
+
(0, import_react71.useEffect)(() => {
|
|
13475
14158
|
const first = calendars[0]?.days[0]?.date;
|
|
13476
14159
|
const finalDays = calendars[calendars.length - 1]?.days;
|
|
13477
14160
|
const last = finalDays?.[finalDays.length - 1]?.date;
|
|
13478
14161
|
if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
|
|
13479
14162
|
}, [activeDate, calendars]);
|
|
13480
|
-
(0,
|
|
14163
|
+
(0, import_react71.useEffect)(() => {
|
|
13481
14164
|
if (!pendingFocus.current) return;
|
|
13482
14165
|
rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus({ preventScroll: autoFocus });
|
|
13483
14166
|
pendingFocus.current = false;
|
|
@@ -13515,23 +14198,23 @@ function RangeCalendar({
|
|
|
13515
14198
|
}
|
|
13516
14199
|
};
|
|
13517
14200
|
const announcement = !value.start ? labels.noneSelected : !value.end ? labels.startSelected.replace("{start}", dateLabel(value.start, locale)) : labels.rangeSelected.replace("{start}", dateLabel(value.start, locale)).replace("{end}", dateLabel(value.end, locale));
|
|
13518
|
-
return /* @__PURE__ */ (0,
|
|
13519
|
-
/* @__PURE__ */ (0,
|
|
13520
|
-
/* @__PURE__ */ (0,
|
|
13521
|
-
/* @__PURE__ */ (0,
|
|
13522
|
-
/* @__PURE__ */ (0,
|
|
13523
|
-
/* @__PURE__ */ (0,
|
|
14201
|
+
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("section", { className: cx("uix-date-range-picker", rangeInvalid && "uix-date-range-picker--invalid", className), "aria-labelledby": `${id}-label`, children: [
|
|
14202
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-date-range-picker__header", children: [
|
|
14203
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("h3", { id: `${id}-label`, children: label }),
|
|
14204
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { children: [
|
|
14205
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, -1)), "aria-label": labels.previousMonth, children: labels.previous }),
|
|
14206
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, 1)), "aria-label": labels.nextMonth, children: labels.next })
|
|
13524
14207
|
] })
|
|
13525
14208
|
] }),
|
|
13526
|
-
/* @__PURE__ */ (0,
|
|
13527
|
-
/* @__PURE__ */ (0,
|
|
13528
|
-
/* @__PURE__ */ (0,
|
|
13529
|
-
/* @__PURE__ */ (0,
|
|
13530
|
-
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() - weekStartsOn + 7) % 7 }, (_, index) => /* @__PURE__ */ (0,
|
|
14209
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { ref: rootRef, className: "uix-date-range-picker__months", children: calendars.map(({ month, days }) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-date-range-picker__month", children: [
|
|
14210
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("h4", { children: monthLabel2(month, locale) }),
|
|
14211
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: weekdays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { children: day }, index)) }),
|
|
14212
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel2(month, locale), children: [
|
|
14213
|
+
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() - weekStartsOn + 7) % 7 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { "aria-hidden": "true" }, `blank-${index}`)),
|
|
13531
14214
|
days.map((day) => {
|
|
13532
14215
|
const unavailable = disabled || isDateUnavailable(day.date, { min, max, isDisabled: isDateDisabled });
|
|
13533
14216
|
const edge = day.date === value.start ? "start" : day.date === value.end ? "end" : void 0;
|
|
13534
|
-
return /* @__PURE__ */ (0,
|
|
14217
|
+
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
13535
14218
|
"button",
|
|
13536
14219
|
{
|
|
13537
14220
|
type: "button",
|
|
@@ -13553,15 +14236,15 @@ function RangeCalendar({
|
|
|
13553
14236
|
})
|
|
13554
14237
|
] })
|
|
13555
14238
|
] }, month)) }),
|
|
13556
|
-
/* @__PURE__ */ (0,
|
|
13557
|
-
rangeInvalid && /* @__PURE__ */ (0,
|
|
14239
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "uix-date-range-picker__selection", "aria-live": "polite", children: announcement }),
|
|
14240
|
+
rangeInvalid && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
|
|
13558
14241
|
] });
|
|
13559
14242
|
}
|
|
13560
14243
|
function DateRangePicker({ labels: labelOverrides, ...props }) {
|
|
13561
14244
|
const uixLabels = useUixLabels();
|
|
13562
14245
|
const words = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...uixLabels.dateRangePicker, ...labelOverrides };
|
|
13563
|
-
if (props.mode === "field") return /* @__PURE__ */ (0,
|
|
13564
|
-
return /* @__PURE__ */ (0,
|
|
14246
|
+
if (props.mode === "field") return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(DateRangeField, { ...props, words });
|
|
14247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(RangeCalendar, { ...props, words });
|
|
13565
14248
|
}
|
|
13566
14249
|
function DateRangeField(props) {
|
|
13567
14250
|
const {
|
|
@@ -13581,22 +14264,22 @@ function DateRangeField(props) {
|
|
|
13581
14264
|
"aria-describedby": ariaDescribedBy,
|
|
13582
14265
|
"aria-invalid": ariaInvalid
|
|
13583
14266
|
} = props;
|
|
13584
|
-
const uid = (0,
|
|
14267
|
+
const uid = (0, import_react71.useId)();
|
|
13585
14268
|
const id = idProp ?? `${uid}-trigger`;
|
|
13586
14269
|
const popoverId = `${uid}-months`;
|
|
13587
14270
|
const valueId = `${uid}-value`;
|
|
13588
|
-
const anchorRef = (0,
|
|
13589
|
-
const triggerRef = (0,
|
|
14271
|
+
const anchorRef = (0, import_react71.useRef)(null);
|
|
14272
|
+
const triggerRef = (0, import_react71.useRef)(null);
|
|
13590
14273
|
const { open, hide, triggerProps } = useFieldPopover(popoverId, () => triggerRef.current?.focus({ preventScroll: true }), onOpenChange);
|
|
13591
|
-
const [labelled, setLabelled] = (0,
|
|
13592
|
-
(0,
|
|
14274
|
+
const [labelled, setLabelled] = (0, import_react71.useState)(false);
|
|
14275
|
+
(0, import_react71.useEffect)(() => {
|
|
13593
14276
|
setLabelled((triggerRef.current?.labels?.length ?? 0) > 0);
|
|
13594
14277
|
}, [id]);
|
|
13595
14278
|
const format = (date) => formatDate?.(date) ?? formatDateKey(date, locale);
|
|
13596
14279
|
const text = !value.start ? null : !value.end ? words.fieldStart.replace("{start}", format(value.start)) : words.fieldRange.replace("{start}", format(value.start)).replace("{end}", format(value.end));
|
|
13597
14280
|
const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
|
|
13598
14281
|
const describedBy = [ariaDescribedBy, labelled && text ? valueId : void 0].filter(Boolean).join(" ") || void 0;
|
|
13599
|
-
return /* @__PURE__ */ (0,
|
|
14282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
|
|
13600
14283
|
"div",
|
|
13601
14284
|
{
|
|
13602
14285
|
ref: anchorRef,
|
|
@@ -13608,7 +14291,7 @@ function DateRangeField(props) {
|
|
|
13608
14291
|
hide();
|
|
13609
14292
|
},
|
|
13610
14293
|
children: [
|
|
13611
|
-
/* @__PURE__ */ (0,
|
|
14294
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
|
|
13612
14295
|
"button",
|
|
13613
14296
|
{
|
|
13614
14297
|
ref: triggerRef,
|
|
@@ -13620,16 +14303,16 @@ function DateRangeField(props) {
|
|
|
13620
14303
|
"aria-invalid": rangeInvalid || ariaInvalid === true || ariaInvalid === "true" || void 0,
|
|
13621
14304
|
...triggerProps,
|
|
13622
14305
|
children: [
|
|
13623
|
-
/* @__PURE__ */ (0,
|
|
13624
|
-
/* @__PURE__ */ (0,
|
|
14306
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "uix-date-range-field__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(CalendarIcon, { size: "sm" }) }),
|
|
14307
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
13625
14308
|
label,
|
|
13626
14309
|
": "
|
|
13627
14310
|
] }),
|
|
13628
|
-
/* @__PURE__ */ (0,
|
|
14311
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { id: valueId, className: cx("uix-date-range-field__value", !text && "uix-date-range-field__value--empty"), children: text ?? words.placeholder })
|
|
13629
14312
|
]
|
|
13630
14313
|
}
|
|
13631
14314
|
),
|
|
13632
|
-
/* @__PURE__ */ (0,
|
|
14315
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
13633
14316
|
Popover,
|
|
13634
14317
|
{
|
|
13635
14318
|
id: popoverId,
|
|
@@ -13640,7 +14323,7 @@ function DateRangeField(props) {
|
|
|
13640
14323
|
"aria-label": label,
|
|
13641
14324
|
capHeight: true,
|
|
13642
14325
|
closeWhenAnchorHidden: true,
|
|
13643
|
-
children: open && /* @__PURE__ */ (0,
|
|
14326
|
+
children: open && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
|
|
13644
14327
|
RangeCalendar,
|
|
13645
14328
|
{
|
|
13646
14329
|
...props,
|
|
@@ -13660,8 +14343,8 @@ function DateRangeField(props) {
|
|
|
13660
14343
|
}
|
|
13661
14344
|
|
|
13662
14345
|
// src/components/DatePicker.tsx
|
|
13663
|
-
var
|
|
13664
|
-
var
|
|
14346
|
+
var import_react72 = require("react");
|
|
14347
|
+
var import_jsx_runtime97 = require("react/jsx-runtime");
|
|
13665
14348
|
var DEFAULT_DATE_PICKER_LABELS = {
|
|
13666
14349
|
open: "Choose date",
|
|
13667
14350
|
openSelected: "Change date, {date}",
|
|
@@ -13672,7 +14355,7 @@ var DEFAULT_DATE_PICKER_LABELS = {
|
|
|
13672
14355
|
notADate: "That is not a date.",
|
|
13673
14356
|
unavailable: "That date is not available."
|
|
13674
14357
|
};
|
|
13675
|
-
var DatePicker = (0,
|
|
14358
|
+
var DatePicker = (0, import_react72.forwardRef)(function DatePicker2({
|
|
13676
14359
|
value,
|
|
13677
14360
|
onValueChange,
|
|
13678
14361
|
min,
|
|
@@ -13703,18 +14386,18 @@ var DatePicker = (0, import_react71.forwardRef)(function DatePicker2({
|
|
|
13703
14386
|
className,
|
|
13704
14387
|
style
|
|
13705
14388
|
}, forwardedRef) {
|
|
13706
|
-
const uid = (0,
|
|
14389
|
+
const uid = (0, import_react72.useId)();
|
|
13707
14390
|
const id = idProp ?? `${uid}-input`;
|
|
13708
14391
|
const popoverId = `${uid}-calendar`;
|
|
13709
14392
|
const errorId = `${uid}-error`;
|
|
13710
14393
|
const labels = { ...DEFAULT_DATE_PICKER_LABELS, ...useUixLabels().datePicker, ...labelOverrides };
|
|
13711
|
-
const anchorRef = (0,
|
|
13712
|
-
const inputRef = (0,
|
|
13713
|
-
(0,
|
|
14394
|
+
const anchorRef = (0, import_react72.useRef)(null);
|
|
14395
|
+
const inputRef = (0, import_react72.useRef)(null);
|
|
14396
|
+
(0, import_react72.useImperativeHandle)(forwardedRef, () => inputRef.current);
|
|
13714
14397
|
const format = (date) => formatDate?.(date) ?? formatDateKey(date, locale);
|
|
13715
|
-
const [text, setText] = (0,
|
|
13716
|
-
const [problem, setProblemState] = (0,
|
|
13717
|
-
const reported = (0,
|
|
14398
|
+
const [text, setText] = (0, import_react72.useState)(() => value ? format(value) : "");
|
|
14399
|
+
const [problem, setProblemState] = (0, import_react72.useState)(null);
|
|
14400
|
+
const reported = (0, import_react72.useRef)(null);
|
|
13718
14401
|
const setProblem = (next) => {
|
|
13719
14402
|
if (next !== reported.current) {
|
|
13720
14403
|
reported.current = next;
|
|
@@ -13722,7 +14405,7 @@ var DatePicker = (0, import_react71.forwardRef)(function DatePicker2({
|
|
|
13722
14405
|
}
|
|
13723
14406
|
setProblemState(next);
|
|
13724
14407
|
};
|
|
13725
|
-
(0,
|
|
14408
|
+
(0, import_react72.useEffect)(() => {
|
|
13726
14409
|
setText(value ? format(value) : "");
|
|
13727
14410
|
setProblem(null);
|
|
13728
14411
|
}, [value, locale]);
|
|
@@ -13776,7 +14459,7 @@ var DatePicker = (0, import_react71.forwardRef)(function DatePicker2({
|
|
|
13776
14459
|
const expected = placeholder ?? (parseDate ? null : pattern);
|
|
13777
14460
|
const describedBy = [ariaDescribedBy, problem ? errorId : void 0].filter(Boolean).join(" ") || void 0;
|
|
13778
14461
|
const isInvalid = !!invalid || !!problem || ariaInvalid === true || ariaInvalid === "true";
|
|
13779
|
-
return /* @__PURE__ */ (0,
|
|
14462
|
+
return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
|
|
13780
14463
|
"div",
|
|
13781
14464
|
{
|
|
13782
14465
|
ref: anchorRef,
|
|
@@ -13789,8 +14472,8 @@ var DatePicker = (0, import_react71.forwardRef)(function DatePicker2({
|
|
|
13789
14472
|
hide();
|
|
13790
14473
|
},
|
|
13791
14474
|
children: [
|
|
13792
|
-
/* @__PURE__ */ (0,
|
|
13793
|
-
/* @__PURE__ */ (0,
|
|
14475
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "uix-date-picker__control", children: [
|
|
14476
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
|
|
13794
14477
|
"input",
|
|
13795
14478
|
{
|
|
13796
14479
|
ref: inputRef,
|
|
@@ -13819,7 +14502,7 @@ var DatePicker = (0, import_react71.forwardRef)(function DatePicker2({
|
|
|
13819
14502
|
onKeyDown: onInputKeyDown
|
|
13820
14503
|
}
|
|
13821
14504
|
),
|
|
13822
|
-
/* @__PURE__ */ (0,
|
|
14505
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
|
|
13823
14506
|
"button",
|
|
13824
14507
|
{
|
|
13825
14508
|
type: "button",
|
|
@@ -13827,13 +14510,13 @@ var DatePicker = (0, import_react71.forwardRef)(function DatePicker2({
|
|
|
13827
14510
|
disabled: locked,
|
|
13828
14511
|
"aria-label": value && isValidDateKey(value) ? fillLabel(labels.openSelected, { date: fullDateLabel(value, locale) }) : labels.open,
|
|
13829
14512
|
...triggerProps,
|
|
13830
|
-
children: /* @__PURE__ */ (0,
|
|
14513
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(CalendarIcon, { size: "sm" })
|
|
13831
14514
|
}
|
|
13832
14515
|
)
|
|
13833
14516
|
] }),
|
|
13834
|
-
name && /* @__PURE__ */ (0,
|
|
13835
|
-
problem && /* @__PURE__ */ (0,
|
|
13836
|
-
/* @__PURE__ */ (0,
|
|
14517
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("input", { type: "hidden", name, value: value ?? "", disabled }),
|
|
14518
|
+
problem && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { id: errorId, className: "uix-field__error uix-date-picker__error", role: "alert", children: problem !== "format" ? labels.unavailable : expected ? fillLabel(labels.invalidDate, { pattern: expected }) : labels.notADate }),
|
|
14519
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
|
|
13837
14520
|
Popover,
|
|
13838
14521
|
{
|
|
13839
14522
|
id: popoverId,
|
|
@@ -13843,7 +14526,7 @@ var DatePicker = (0, import_react71.forwardRef)(function DatePicker2({
|
|
|
13843
14526
|
role: "dialog",
|
|
13844
14527
|
"aria-label": labels.calendar,
|
|
13845
14528
|
closeWhenAnchorHidden: true,
|
|
13846
|
-
children: open && /* @__PURE__ */ (0,
|
|
14529
|
+
children: open && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
|
|
13847
14530
|
MonthCalendar,
|
|
13848
14531
|
{
|
|
13849
14532
|
value,
|
|
@@ -13872,7 +14555,7 @@ var DEFAULT_DATE_TIME_PICKER_LABELS = {
|
|
|
13872
14555
|
timeOf: "{label}, time",
|
|
13873
14556
|
timeZone: "Time zone: {zone}"
|
|
13874
14557
|
};
|
|
13875
|
-
var DateTimePicker = (0,
|
|
14558
|
+
var DateTimePicker = (0, import_react72.forwardRef)(function DateTimePicker2({
|
|
13876
14559
|
value,
|
|
13877
14560
|
onValueChange,
|
|
13878
14561
|
timeZone,
|
|
@@ -13896,19 +14579,19 @@ var DateTimePicker = (0, import_react71.forwardRef)(function DateTimePicker2({
|
|
|
13896
14579
|
style,
|
|
13897
14580
|
...dateProps
|
|
13898
14581
|
}, forwardedRef) {
|
|
13899
|
-
const uid = (0,
|
|
14582
|
+
const uid = (0, import_react72.useId)();
|
|
13900
14583
|
const id = idProp ?? `${uid}-date`;
|
|
13901
14584
|
const zoneId = `${uid}-zone`;
|
|
13902
14585
|
const labels = { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...useUixLabels().dateTimePicker, ...labelOverrides };
|
|
13903
14586
|
const { date, time } = splitDateTime(value);
|
|
13904
|
-
const dateRef = (0,
|
|
13905
|
-
(0,
|
|
13906
|
-
const [pendingTime, setPendingTime] = (0,
|
|
14587
|
+
const dateRef = (0, import_react72.useRef)(null);
|
|
14588
|
+
(0, import_react72.useImperativeHandle)(forwardedRef, () => dateRef.current);
|
|
14589
|
+
const [pendingTime, setPendingTime] = (0, import_react72.useState)("");
|
|
13907
14590
|
const shownTime = date ? time : pendingTime;
|
|
13908
|
-
const [fieldLabel, setFieldLabel] = (0,
|
|
13909
|
-
const [viewerZone, setViewerZone] = (0,
|
|
14591
|
+
const [fieldLabel, setFieldLabel] = (0, import_react72.useState)("");
|
|
14592
|
+
const [viewerZone, setViewerZone] = (0, import_react72.useState)(null);
|
|
13910
14593
|
const grouped = !!ariaLabel || !!ariaLabelledBy;
|
|
13911
|
-
(0,
|
|
14594
|
+
(0, import_react72.useEffect)(() => {
|
|
13912
14595
|
if (!grouped) setFieldLabel(dateRef.current?.labels?.[0]?.textContent?.trim() ?? "");
|
|
13913
14596
|
if (!timeZone) {
|
|
13914
14597
|
try {
|
|
@@ -13921,7 +14604,7 @@ var DateTimePicker = (0, import_react71.forwardRef)(function DateTimePicker2({
|
|
|
13921
14604
|
const zoneText = timeZoneLabel === null ? null : timeZoneLabel ?? (zone ? timeZoneName(zone, date, locale) : null);
|
|
13922
14605
|
const timeName = grouped ? labels.time : fieldLabel ? fillLabel(labels.timeOf, { label: fieldLabel }) : labels.time;
|
|
13923
14606
|
const step = Math.max(1, Math.round(minuteStep)) * 60;
|
|
13924
|
-
return /* @__PURE__ */ (0,
|
|
14607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
|
|
13925
14608
|
"div",
|
|
13926
14609
|
{
|
|
13927
14610
|
className: cx("uix-date-time-picker", size === "sm" && "uix-date-time-picker--sm", className),
|
|
@@ -13930,7 +14613,7 @@ var DateTimePicker = (0, import_react71.forwardRef)(function DateTimePicker2({
|
|
|
13930
14613
|
"aria-label": ariaLabel,
|
|
13931
14614
|
"aria-labelledby": ariaLabelledBy,
|
|
13932
14615
|
children: [
|
|
13933
|
-
/* @__PURE__ */ (0,
|
|
14616
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
|
|
13934
14617
|
DatePicker,
|
|
13935
14618
|
{
|
|
13936
14619
|
...dateProps,
|
|
@@ -13957,7 +14640,7 @@ var DateTimePicker = (0, import_react71.forwardRef)(function DateTimePicker2({
|
|
|
13957
14640
|
}
|
|
13958
14641
|
}
|
|
13959
14642
|
),
|
|
13960
|
-
/* @__PURE__ */ (0,
|
|
14643
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
|
|
13961
14644
|
"input",
|
|
13962
14645
|
{
|
|
13963
14646
|
type: "time",
|
|
@@ -13976,18 +14659,18 @@ var DateTimePicker = (0, import_react71.forwardRef)(function DateTimePicker2({
|
|
|
13976
14659
|
}
|
|
13977
14660
|
}
|
|
13978
14661
|
),
|
|
13979
|
-
zoneText && /* @__PURE__ */ (0,
|
|
13980
|
-
/* @__PURE__ */ (0,
|
|
13981
|
-
/* @__PURE__ */ (0,
|
|
14662
|
+
zoneText && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { className: "uix-date-time-picker__zone", children: [
|
|
14663
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { "aria-hidden": "true", children: zoneText }),
|
|
14664
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { id: zoneId, className: "uix-visually-hidden", children: fillLabel(labels.timeZone, { zone: zoneText }) })
|
|
13982
14665
|
] }),
|
|
13983
|
-
name && /* @__PURE__ */ (0,
|
|
14666
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("input", { type: "hidden", name, value: value ?? "", disabled })
|
|
13984
14667
|
]
|
|
13985
14668
|
}
|
|
13986
14669
|
);
|
|
13987
14670
|
});
|
|
13988
14671
|
|
|
13989
14672
|
// src/components/RelationshipGraph.tsx
|
|
13990
|
-
var
|
|
14673
|
+
var import_react74 = require("react");
|
|
13991
14674
|
|
|
13992
14675
|
// src/relationship-graph-model.ts
|
|
13993
14676
|
function boundRelationshipGraph(nodes, edges, maxNodes = 40) {
|
|
@@ -14468,10 +15151,10 @@ function layeredNeighbor(layout, currentId, key) {
|
|
|
14468
15151
|
}
|
|
14469
15152
|
|
|
14470
15153
|
// src/components/RelationshipGraphLayered.tsx
|
|
14471
|
-
var
|
|
15154
|
+
var import_react73 = require("react");
|
|
14472
15155
|
|
|
14473
15156
|
// src/components/RelationshipGraphList.tsx
|
|
14474
|
-
var
|
|
15157
|
+
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
14475
15158
|
function EquivalentRelationshipList({
|
|
14476
15159
|
nodes,
|
|
14477
15160
|
edges,
|
|
@@ -14482,19 +15165,19 @@ function EquivalentRelationshipList({
|
|
|
14482
15165
|
onOpenDetails
|
|
14483
15166
|
}) {
|
|
14484
15167
|
const labelById = new Map(nodes.map((node) => [node.id, node.label]));
|
|
14485
|
-
return /* @__PURE__ */ (0,
|
|
14486
|
-
/* @__PURE__ */ (0,
|
|
14487
|
-
/* @__PURE__ */ (0,
|
|
15168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": labels.list, children: [
|
|
15169
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("h3", { children: labels.listHeading }),
|
|
15170
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("ul", { children: nodes.map((node) => {
|
|
14488
15171
|
const neighbors = relationshipNeighbors(node.id, edges).map((id) => labelById.get(id) ?? id);
|
|
14489
|
-
return /* @__PURE__ */ (0,
|
|
14490
|
-
/* @__PURE__ */ (0,
|
|
14491
|
-
/* @__PURE__ */ (0,
|
|
14492
|
-
node.type && /* @__PURE__ */ (0,
|
|
14493
|
-
/* @__PURE__ */ (0,
|
|
15172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("li", { "data-selected": selectedId === node.id || void 0, children: [
|
|
15173
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("button", { type: "button", onClick: () => onSelect(node.id), "aria-pressed": selectedId === node.id, children: [
|
|
15174
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("strong", { children: node.label }),
|
|
15175
|
+
node.type && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: node.type }),
|
|
15176
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { children: neighbors.length ? labels.connectedTo(neighbors.join(", ")) : labels.noConnections })
|
|
14494
15177
|
] }),
|
|
14495
|
-
/* @__PURE__ */ (0,
|
|
14496
|
-
onExpandNeighbors && /* @__PURE__ */ (0,
|
|
14497
|
-
onOpenDetails && /* @__PURE__ */ (0,
|
|
15178
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "uix-relationship-graph__list-actions", children: [
|
|
15179
|
+
onExpandNeighbors && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("button", { type: "button", onClick: () => onExpandNeighbors(node), children: labels.expandNeighbors }),
|
|
15180
|
+
onOpenDetails && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("button", { type: "button", onClick: () => onOpenDetails(node), children: labels.openDetails })
|
|
14498
15181
|
] })
|
|
14499
15182
|
] }, node.id);
|
|
14500
15183
|
}) })
|
|
@@ -14502,16 +15185,16 @@ function EquivalentRelationshipList({
|
|
|
14502
15185
|
}
|
|
14503
15186
|
|
|
14504
15187
|
// src/components/RelationshipGraphLayered.tsx
|
|
14505
|
-
var
|
|
15188
|
+
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
14506
15189
|
var EMPTY_IDS2 = /* @__PURE__ */ new Set();
|
|
14507
|
-
var
|
|
14508
|
-
var
|
|
15190
|
+
var MIN_ZOOM2 = 0.4;
|
|
15191
|
+
var MAX_ZOOM2 = 1.5;
|
|
14509
15192
|
var READABLE_ZOOM = 0.75;
|
|
14510
15193
|
var ZOOM_STEP = 1.2;
|
|
14511
15194
|
var PAN_STEP = 64;
|
|
14512
15195
|
var FOCUS_MARGIN = 24;
|
|
14513
15196
|
var NAV_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"];
|
|
14514
|
-
var
|
|
15197
|
+
var clampZoom2 = (zoom) => Math.min(MAX_ZOOM2, Math.max(MIN_ZOOM2, zoom));
|
|
14515
15198
|
function initialView(layout, size) {
|
|
14516
15199
|
if (size.width === 0 || size.height === 0 || layout.width === 0) return { x: 0, y: 0, zoom: 1 };
|
|
14517
15200
|
const fit = Math.min(size.width / layout.width, size.height / layout.height);
|
|
@@ -14521,7 +15204,7 @@ function initialView(layout, size) {
|
|
|
14521
15204
|
}
|
|
14522
15205
|
function fitView(layout, size) {
|
|
14523
15206
|
if (size.width === 0 || layout.width === 0) return { x: 0, y: 0, zoom: 1 };
|
|
14524
|
-
const zoom =
|
|
15207
|
+
const zoom = clampZoom2(Math.min(size.width / layout.width, size.height / layout.height, 1));
|
|
14525
15208
|
return { x: (size.width - layout.width * zoom) / 2, y: Math.max(0, (size.height - layout.height * zoom) / 2), zoom };
|
|
14526
15209
|
}
|
|
14527
15210
|
var arrowPoints = "0,0 -8,-4.5 -8,4.5";
|
|
@@ -14555,11 +15238,11 @@ function LayeredRelationshipGraph({
|
|
|
14555
15238
|
focusId,
|
|
14556
15239
|
onFocusChange
|
|
14557
15240
|
}) {
|
|
14558
|
-
const hintId = (0,
|
|
14559
|
-
const bounded = (0,
|
|
14560
|
-
const [localExpanded, setLocalExpanded] = (0,
|
|
15241
|
+
const hintId = (0, import_react73.useId)();
|
|
15242
|
+
const bounded = (0, import_react73.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
15243
|
+
const [localExpanded, setLocalExpanded] = (0, import_react73.useState)(EMPTY_IDS2);
|
|
14561
15244
|
const expanded = expandedClusterIds ?? localExpanded;
|
|
14562
|
-
const layout = (0,
|
|
15245
|
+
const layout = (0, import_react73.useMemo)(
|
|
14563
15246
|
() => layoutLayeredGraph(bounded.nodes, bounded.edges, {
|
|
14564
15247
|
...rootId !== void 0 ? { rootId } : {},
|
|
14565
15248
|
...clusterThreshold !== void 0 ? { clusterThreshold } : {},
|
|
@@ -14568,29 +15251,29 @@ function LayeredRelationshipGraph({
|
|
|
14568
15251
|
}),
|
|
14569
15252
|
[bounded, rootId, clusterThreshold, expanded, density]
|
|
14570
15253
|
);
|
|
14571
|
-
const itemById = (0,
|
|
14572
|
-
const viewportRef = (0,
|
|
14573
|
-
const itemRefs = (0,
|
|
14574
|
-
const [size, setSize] = (0,
|
|
14575
|
-
const [view, setView] = (0,
|
|
14576
|
-
const [animate, setAnimate] = (0,
|
|
14577
|
-
const [localFocus, setLocalFocus] = (0,
|
|
14578
|
-
const [hoverId, setHoverId] = (0,
|
|
14579
|
-
const viewRef = (0,
|
|
15254
|
+
const itemById = (0, import_react73.useMemo)(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
|
|
15255
|
+
const viewportRef = (0, import_react73.useRef)(null);
|
|
15256
|
+
const itemRefs = (0, import_react73.useRef)(/* @__PURE__ */ new Map());
|
|
15257
|
+
const [size, setSize] = (0, import_react73.useState)({ width: 0, height: 0 });
|
|
15258
|
+
const [view, setView] = (0, import_react73.useState)({ x: 0, y: 0, zoom: 1 });
|
|
15259
|
+
const [animate, setAnimate] = (0, import_react73.useState)(false);
|
|
15260
|
+
const [localFocus, setLocalFocus] = (0, import_react73.useState)(void 0);
|
|
15261
|
+
const [hoverId, setHoverId] = (0, import_react73.useState)(void 0);
|
|
15262
|
+
const viewRef = (0, import_react73.useRef)(view);
|
|
14580
15263
|
viewRef.current = view;
|
|
14581
|
-
const layoutRef = (0,
|
|
15264
|
+
const layoutRef = (0, import_react73.useRef)(layout);
|
|
14582
15265
|
layoutRef.current = layout;
|
|
14583
|
-
const pendingFocus = (0,
|
|
14584
|
-
const initialisedFor = (0,
|
|
15266
|
+
const pendingFocus = (0, import_react73.useRef)(void 0);
|
|
15267
|
+
const initialisedFor = (0, import_react73.useRef)(void 0);
|
|
14585
15268
|
const rootItemId = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
|
|
14586
15269
|
const requestedFocus = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : localFocus;
|
|
14587
15270
|
const focusedId = requestedFocus !== void 0 && itemById.has(requestedFocus) ? requestedFocus : rootItemId;
|
|
14588
15271
|
const selectedItemId = selectedId !== void 0 ? layout.itemOf[selectedId] : void 0;
|
|
14589
|
-
const activeIds = (0,
|
|
15272
|
+
const activeIds = (0, import_react73.useMemo)(
|
|
14590
15273
|
() => new Set([hoverId, selectedItemId].filter((id) => id !== void 0)),
|
|
14591
15274
|
[hoverId, selectedItemId]
|
|
14592
15275
|
);
|
|
14593
|
-
(0,
|
|
15276
|
+
(0, import_react73.useEffect)(() => {
|
|
14594
15277
|
const element = viewportRef.current;
|
|
14595
15278
|
if (!element) return;
|
|
14596
15279
|
const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
|
|
@@ -14600,18 +15283,18 @@ function LayeredRelationshipGraph({
|
|
|
14600
15283
|
observer.observe(element);
|
|
14601
15284
|
return () => observer.disconnect();
|
|
14602
15285
|
}, []);
|
|
14603
|
-
(0,
|
|
15286
|
+
(0, import_react73.useEffect)(() => {
|
|
14604
15287
|
if (size.width === 0) return;
|
|
14605
15288
|
const key = `${layout.rootId ?? ""}`;
|
|
14606
15289
|
if (initialisedFor.current === key) return;
|
|
14607
15290
|
initialisedFor.current = key;
|
|
14608
15291
|
setView(initialView(layout, size));
|
|
14609
15292
|
}, [layout, size]);
|
|
14610
|
-
const moveView = (0,
|
|
15293
|
+
const moveView = (0, import_react73.useCallback)((next, smooth) => {
|
|
14611
15294
|
setAnimate(smooth);
|
|
14612
15295
|
setView(next);
|
|
14613
15296
|
}, []);
|
|
14614
|
-
const ensureVisible = (0,
|
|
15297
|
+
const ensureVisible = (0, import_react73.useCallback)((id, smooth) => {
|
|
14615
15298
|
const element = viewportRef.current;
|
|
14616
15299
|
const item = layoutRef.current.items.find((candidate) => candidate.id === id);
|
|
14617
15300
|
if (!element || !item) return;
|
|
@@ -14630,7 +15313,7 @@ function LayeredRelationshipGraph({
|
|
|
14630
15313
|
else if (bottom > heightPx - FOCUS_MARGIN) nextY -= bottom - (heightPx - FOCUS_MARGIN);
|
|
14631
15314
|
if (nextX !== x || nextY !== y) moveView({ x: nextX, y: nextY, zoom }, smooth);
|
|
14632
15315
|
}, [moveView]);
|
|
14633
|
-
const focusItem = (0,
|
|
15316
|
+
const focusItem = (0, import_react73.useCallback)((id) => {
|
|
14634
15317
|
setLocalFocus(id);
|
|
14635
15318
|
onFocusChange?.(id);
|
|
14636
15319
|
requestAnimationFrame(() => {
|
|
@@ -14638,7 +15321,7 @@ function LayeredRelationshipGraph({
|
|
|
14638
15321
|
ensureVisible(id, true);
|
|
14639
15322
|
});
|
|
14640
15323
|
}, [ensureVisible, onFocusChange]);
|
|
14641
|
-
(0,
|
|
15324
|
+
(0, import_react73.useEffect)(() => {
|
|
14642
15325
|
const wanted = pendingFocus.current;
|
|
14643
15326
|
if (wanted !== void 0 && itemById.has(wanted)) {
|
|
14644
15327
|
pendingFocus.current = void 0;
|
|
@@ -14648,8 +15331,8 @@ function LayeredRelationshipGraph({
|
|
|
14648
15331
|
const controlledTarget = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : void 0;
|
|
14649
15332
|
const controlledPresent = controlledTarget !== void 0 && itemById.has(controlledTarget);
|
|
14650
15333
|
const controlledKey = `${controlledTarget ?? ""}|${controlledPresent}`;
|
|
14651
|
-
const lastControlledKey = (0,
|
|
14652
|
-
(0,
|
|
15334
|
+
const lastControlledKey = (0, import_react73.useRef)(controlledKey);
|
|
15335
|
+
(0, import_react73.useEffect)(() => {
|
|
14653
15336
|
if (lastControlledKey.current === controlledKey) return;
|
|
14654
15337
|
lastControlledKey.current = controlledKey;
|
|
14655
15338
|
if (!controlledPresent || controlledTarget === void 0) return;
|
|
@@ -14658,7 +15341,7 @@ function LayeredRelationshipGraph({
|
|
|
14658
15341
|
ensureVisible(controlledTarget, true);
|
|
14659
15342
|
});
|
|
14660
15343
|
}, [controlledKey, controlledTarget, controlledPresent, ensureVisible]);
|
|
14661
|
-
(0,
|
|
15344
|
+
(0, import_react73.useEffect)(() => {
|
|
14662
15345
|
const element = viewportRef.current;
|
|
14663
15346
|
if (!element) return;
|
|
14664
15347
|
const onWheel = (event) => {
|
|
@@ -14668,7 +15351,7 @@ function LayeredRelationshipGraph({
|
|
|
14668
15351
|
const px = event.clientX - rect.left;
|
|
14669
15352
|
const py = event.clientY - rect.top;
|
|
14670
15353
|
const current = viewRef.current;
|
|
14671
|
-
const zoom =
|
|
15354
|
+
const zoom = clampZoom2(current.zoom * Math.exp(-event.deltaY * 2e-3));
|
|
14672
15355
|
const ratio = zoom / current.zoom;
|
|
14673
15356
|
setAnimate(false);
|
|
14674
15357
|
setView({ zoom, x: px - (px - current.x) * ratio, y: py - (py - current.y) * ratio });
|
|
@@ -14676,8 +15359,8 @@ function LayeredRelationshipGraph({
|
|
|
14676
15359
|
element.addEventListener("wheel", onWheel, { passive: false });
|
|
14677
15360
|
return () => element.removeEventListener("wheel", onWheel);
|
|
14678
15361
|
}, []);
|
|
14679
|
-
const pointers = (0,
|
|
14680
|
-
const pinchDistance = (0,
|
|
15362
|
+
const pointers = (0, import_react73.useRef)(/* @__PURE__ */ new Map());
|
|
15363
|
+
const pinchDistance = (0, import_react73.useRef)(void 0);
|
|
14681
15364
|
const onPointerDown = (event) => {
|
|
14682
15365
|
if (event.target.closest("button")) return;
|
|
14683
15366
|
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
@@ -14699,7 +15382,7 @@ function LayeredRelationshipGraph({
|
|
|
14699
15382
|
const my = (a.y + b.y) / 2 - rect.top;
|
|
14700
15383
|
if (pinchDistance.current !== void 0 && pinchDistance.current > 0) {
|
|
14701
15384
|
const base = viewRef.current;
|
|
14702
|
-
const zoom =
|
|
15385
|
+
const zoom = clampZoom2(base.zoom * (distance / pinchDistance.current));
|
|
14703
15386
|
const ratio = zoom / base.zoom;
|
|
14704
15387
|
setView({ zoom, x: mx - (mx - base.x) * ratio, y: my - (my - base.y) * ratio });
|
|
14705
15388
|
}
|
|
@@ -14716,7 +15399,7 @@ function LayeredRelationshipGraph({
|
|
|
14716
15399
|
};
|
|
14717
15400
|
const zoomBy = (factor) => {
|
|
14718
15401
|
const current = viewRef.current;
|
|
14719
|
-
const zoom =
|
|
15402
|
+
const zoom = clampZoom2(current.zoom * factor);
|
|
14720
15403
|
const ratio = zoom / current.zoom;
|
|
14721
15404
|
const cx0 = size.width / 2;
|
|
14722
15405
|
const cy0 = size.height / 2;
|
|
@@ -14775,21 +15458,21 @@ function LayeredRelationshipGraph({
|
|
|
14775
15458
|
height: layout.height,
|
|
14776
15459
|
transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
|
|
14777
15460
|
};
|
|
14778
|
-
return /* @__PURE__ */ (0,
|
|
14779
|
-
/* @__PURE__ */ (0,
|
|
14780
|
-
/* @__PURE__ */ (0,
|
|
14781
|
-
/* @__PURE__ */ (0,
|
|
14782
|
-
/* @__PURE__ */ (0,
|
|
14783
|
-
/* @__PURE__ */ (0,
|
|
14784
|
-
/* @__PURE__ */ (0,
|
|
14785
|
-
/* @__PURE__ */ (0,
|
|
14786
|
-
/* @__PURE__ */ (0,
|
|
14787
|
-
/* @__PURE__ */ (0,
|
|
14788
|
-
/* @__PURE__ */ (0,
|
|
15461
|
+
return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("section", { className: cx("uix-relationship-graph", "uix-relationship-graph--layered", density === "compact" && "uix-relationship-graph--compact", className), "aria-label": labels.graph, children: [
|
|
15462
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
|
|
15463
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM2, children: labels.zoomIn }),
|
|
15464
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM2, children: labels.zoomOut }),
|
|
15465
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
|
|
15466
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => moveView(initialView(layout, size), true), children: labels.reset }),
|
|
15467
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
|
|
15468
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
|
|
15469
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
|
|
15470
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
|
|
15471
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(view.zoom * 100)) })
|
|
14789
15472
|
] }),
|
|
14790
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
14791
|
-
/* @__PURE__ */ (0,
|
|
14792
|
-
/* @__PURE__ */ (0,
|
|
15473
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
|
|
15474
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
|
|
15475
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
|
|
14793
15476
|
"div",
|
|
14794
15477
|
{
|
|
14795
15478
|
ref: viewportRef,
|
|
@@ -14799,11 +15482,11 @@ function LayeredRelationshipGraph({
|
|
|
14799
15482
|
onPointerMove,
|
|
14800
15483
|
onPointerUp: onPointerEnd,
|
|
14801
15484
|
onPointerCancel: onPointerEnd,
|
|
14802
|
-
children: /* @__PURE__ */ (0,
|
|
14803
|
-
/* @__PURE__ */ (0,
|
|
15485
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
|
|
15486
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("svg", { className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: layout.edges.map((edge) => {
|
|
14804
15487
|
const active = activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id));
|
|
14805
15488
|
const angle = edge.arrowAngle * 180 / Math.PI;
|
|
14806
|
-
return /* @__PURE__ */ (0,
|
|
15489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
|
|
14807
15490
|
"g",
|
|
14808
15491
|
{
|
|
14809
15492
|
className: "uix-relationship-graph__link",
|
|
@@ -14813,15 +15496,15 @@ function LayeredRelationshipGraph({
|
|
|
14813
15496
|
"data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
|
|
14814
15497
|
"data-dimmed": dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0,
|
|
14815
15498
|
children: [
|
|
14816
|
-
/* @__PURE__ */ (0,
|
|
14817
|
-
edge.arrow !== "none" && /* @__PURE__ */ (0,
|
|
14818
|
-
showLabel(edge) && /* @__PURE__ */ (0,
|
|
15499
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("path", { d: edge.path }),
|
|
15500
|
+
edge.arrow !== "none" && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
|
|
15501
|
+
showLabel(edge) && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("text", { x: edge.labelX, y: edge.labelY, textAnchor: "middle", dominantBaseline: "middle", children: (edge.kind === "cycle" ? [...edge.labelLines, labels.cycle] : edge.labelLines).map((line, index, lines) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tspan", { x: edge.labelX, dy: index === 0 ? `${-(lines.length - 1) * 0.55}em` : "1.1em", children: line }, index)) })
|
|
14819
15502
|
]
|
|
14820
15503
|
},
|
|
14821
15504
|
edge.id
|
|
14822
15505
|
);
|
|
14823
15506
|
}) }),
|
|
14824
|
-
layout.columns.map((column) => /* @__PURE__ */ (0,
|
|
15507
|
+
layout.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
|
|
14825
15508
|
"div",
|
|
14826
15509
|
{
|
|
14827
15510
|
className: "uix-relationship-graph__column",
|
|
@@ -14831,17 +15514,17 @@ function LayeredRelationshipGraph({
|
|
|
14831
15514
|
},
|
|
14832
15515
|
column.depth
|
|
14833
15516
|
)),
|
|
14834
|
-
/* @__PURE__ */ (0,
|
|
15517
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { role: "group", "aria-roledescription": labels.roleDescription, "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), "aria-describedby": hintId, children: layout.items.map((item) => {
|
|
14835
15518
|
const selected = item.id === selectedItemId;
|
|
14836
15519
|
const dimmed = item.node ? dimmedNodeIds.has(item.node.id) : item.cluster.members.every((member) => dimmedNodeIds.has(member.id));
|
|
14837
|
-
const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ (0,
|
|
14838
|
-
/* @__PURE__ */ (0,
|
|
14839
|
-
/* @__PURE__ */ (0,
|
|
14840
|
-
] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0,
|
|
14841
|
-
/* @__PURE__ */ (0,
|
|
14842
|
-
(item.node.type || item.node.description) && /* @__PURE__ */ (0,
|
|
15520
|
+
const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
|
|
15521
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
|
|
15522
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
|
|
15523
|
+
] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
|
|
15524
|
+
/* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
|
|
15525
|
+
(item.node.type || item.node.description) && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
|
|
14843
15526
|
] });
|
|
14844
|
-
return /* @__PURE__ */ (0,
|
|
15527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
|
|
14845
15528
|
"button",
|
|
14846
15529
|
{
|
|
14847
15530
|
ref: (element) => {
|
|
@@ -14872,7 +15555,7 @@ function LayeredRelationshipGraph({
|
|
|
14872
15555
|
onPointerLeave: () => setHoverId((current) => current === item.id ? void 0 : current),
|
|
14873
15556
|
children: [
|
|
14874
15557
|
body,
|
|
14875
|
-
item.inCycle && /* @__PURE__ */ (0,
|
|
15558
|
+
item.inCycle && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("span", { className: "uix-relationship-graph__item-flag", "aria-hidden": "true", children: labels.cycle })
|
|
14876
15559
|
]
|
|
14877
15560
|
},
|
|
14878
15561
|
item.id
|
|
@@ -14880,7 +15563,7 @@ function LayeredRelationshipGraph({
|
|
|
14880
15563
|
}) }),
|
|
14881
15564
|
layout.items.filter((item) => item.expandedGroup).map((item) => {
|
|
14882
15565
|
const group = item.expandedGroup;
|
|
14883
|
-
return /* @__PURE__ */ (0,
|
|
15566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
|
|
14884
15567
|
"button",
|
|
14885
15568
|
{
|
|
14886
15569
|
type: "button",
|
|
@@ -14896,8 +15579,8 @@ function LayeredRelationshipGraph({
|
|
|
14896
15579
|
] })
|
|
14897
15580
|
}
|
|
14898
15581
|
),
|
|
14899
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
14900
|
-
showList && /* @__PURE__ */ (0,
|
|
15582
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
|
|
15583
|
+
showList && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
|
|
14901
15584
|
EquivalentRelationshipList,
|
|
14902
15585
|
{
|
|
14903
15586
|
nodes: bounded.nodes,
|
|
@@ -14916,7 +15599,7 @@ function LayeredRelationshipGraph({
|
|
|
14916
15599
|
}
|
|
14917
15600
|
|
|
14918
15601
|
// src/components/RelationshipGraph.tsx
|
|
14919
|
-
var
|
|
15602
|
+
var import_jsx_runtime100 = require("react/jsx-runtime");
|
|
14920
15603
|
var DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
|
|
14921
15604
|
graph: "Relationship graph",
|
|
14922
15605
|
controls: "Graph view controls",
|
|
@@ -14978,21 +15661,21 @@ function radialViewBox(nodes) {
|
|
|
14978
15661
|
return `${round(minX)} ${round(minY)} ${width} ${height}`;
|
|
14979
15662
|
}
|
|
14980
15663
|
function RelationshipGraph(props) {
|
|
14981
|
-
const labels = (0,
|
|
15664
|
+
const labels = (0, import_react74.useMemo)(() => ({ ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels }), [props.labels]);
|
|
14982
15665
|
const stateClass = cx("uix-relationship-graph uix-relationship-graph--state", props.className);
|
|
14983
|
-
if (props.loading) return /* @__PURE__ */ (0,
|
|
15666
|
+
if (props.loading) return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: stateClass, role: "status", children: labels.loading });
|
|
14984
15667
|
if (props.error) {
|
|
14985
|
-
return /* @__PURE__ */ (0,
|
|
14986
|
-
/* @__PURE__ */ (0,
|
|
14987
|
-
props.onRetry && /* @__PURE__ */ (0,
|
|
15668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: stateClass, role: "alert", children: [
|
|
15669
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { children: props.error }),
|
|
15670
|
+
props.onRetry && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: props.onRetry, children: labels.retry })
|
|
14988
15671
|
] });
|
|
14989
15672
|
}
|
|
14990
|
-
if (props.nodes.length === 0) return /* @__PURE__ */ (0,
|
|
14991
|
-
/* @__PURE__ */ (0,
|
|
14992
|
-
/* @__PURE__ */ (0,
|
|
15673
|
+
if (props.nodes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: stateClass, children: [
|
|
15674
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { children: labels.emptyTitle }),
|
|
15675
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { children: labels.emptyHint })
|
|
14993
15676
|
] });
|
|
14994
|
-
if (props.layout === "layered") return /* @__PURE__ */ (0,
|
|
14995
|
-
return /* @__PURE__ */ (0,
|
|
15677
|
+
if (props.layout === "layered") return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(LayeredRelationshipGraph, { ...props, labels });
|
|
15678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(RadialRelationshipGraph, { ...props, labels });
|
|
14996
15679
|
}
|
|
14997
15680
|
function RadialRelationshipGraph({
|
|
14998
15681
|
nodes,
|
|
@@ -15012,17 +15695,17 @@ function RadialRelationshipGraph({
|
|
|
15012
15695
|
labels,
|
|
15013
15696
|
showList = true
|
|
15014
15697
|
}) {
|
|
15015
|
-
const bounded = (0,
|
|
15016
|
-
const positioned = (0,
|
|
15017
|
-
const typeColor = (0,
|
|
15698
|
+
const bounded = (0, import_react74.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
15699
|
+
const positioned = (0, import_react74.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
|
|
15700
|
+
const typeColor = (0, import_react74.useMemo)(
|
|
15018
15701
|
() => new Map(legend.map((item, index) => [item.id, `var(--uix-chart-${index % 8 + 1})`])),
|
|
15019
15702
|
[legend]
|
|
15020
15703
|
);
|
|
15021
|
-
const positionedById = (0,
|
|
15022
|
-
const [zoom, setZoom] = (0,
|
|
15023
|
-
const [pan, setPan] = (0,
|
|
15024
|
-
const [focusedId, setFocusedId] = (0,
|
|
15025
|
-
const svgRef = (0,
|
|
15704
|
+
const positionedById = (0, import_react74.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
|
|
15705
|
+
const [zoom, setZoom] = (0, import_react74.useState)(1);
|
|
15706
|
+
const [pan, setPan] = (0, import_react74.useState)({ x: 0, y: 0 });
|
|
15707
|
+
const [focusedId, setFocusedId] = (0, import_react74.useState)(selectedId ?? positioned[0]?.id);
|
|
15708
|
+
const svgRef = (0, import_react74.useRef)(null);
|
|
15026
15709
|
const select = (id) => {
|
|
15027
15710
|
const node = bounded.nodes.find((item) => item.id === id);
|
|
15028
15711
|
if (node) onSelect?.(node);
|
|
@@ -15045,25 +15728,25 @@ function RadialRelationshipGraph({
|
|
|
15045
15728
|
setZoom(1);
|
|
15046
15729
|
setPan({ x: 0, y: 0 });
|
|
15047
15730
|
};
|
|
15048
|
-
return /* @__PURE__ */ (0,
|
|
15049
|
-
/* @__PURE__ */ (0,
|
|
15050
|
-
/* @__PURE__ */ (0,
|
|
15051
|
-
/* @__PURE__ */ (0,
|
|
15052
|
-
/* @__PURE__ */ (0,
|
|
15053
|
-
/* @__PURE__ */ (0,
|
|
15054
|
-
/* @__PURE__ */ (0,
|
|
15055
|
-
/* @__PURE__ */ (0,
|
|
15056
|
-
/* @__PURE__ */ (0,
|
|
15057
|
-
/* @__PURE__ */ (0,
|
|
15731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": labels.graph, children: [
|
|
15732
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "uix-relationship-graph__toolbar", "aria-label": labels.controls, children: [
|
|
15733
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": labels.panLeft, children: labels.left }),
|
|
15734
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": labels.panUp, children: labels.up }),
|
|
15735
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": labels.panDown, children: labels.down }),
|
|
15736
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": labels.panRight, children: labels.right }),
|
|
15737
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": labels.zoomIn, children: labels.zoomIn }),
|
|
15738
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": labels.zoomOut, children: labels.zoomOut }),
|
|
15739
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("button", { type: "button", onClick: reset, children: labels.reset }),
|
|
15740
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(zoom * 100)) })
|
|
15058
15741
|
] }),
|
|
15059
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
15060
|
-
/* @__PURE__ */ (0,
|
|
15742
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
|
|
15743
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("svg", { ref: svgRef, viewBox: radialViewBox(positioned), role: "group", "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
|
|
15061
15744
|
bounded.edges.map((edge) => {
|
|
15062
15745
|
const source = positionedById.get(edge.source);
|
|
15063
15746
|
const target = positionedById.get(edge.target);
|
|
15064
|
-
return /* @__PURE__ */ (0,
|
|
15747
|
+
return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("line", { x1: source.x * RADIAL_SCALE_X, y1: source.y * RADIAL_SCALE_Y, x2: target.x * RADIAL_SCALE_X, y2: target.y * RADIAL_SCALE_Y, className: "uix-relationship-graph__edge", "data-typed": edge.type != null && typeColor.has(edge.type) || void 0, style: edge.type != null && typeColor.has(edge.type) ? { "--uix-graph-type-color": typeColor.get(edge.type) } : void 0, "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
|
|
15065
15748
|
}),
|
|
15066
|
-
positioned.map((node) => /* @__PURE__ */ (0,
|
|
15749
|
+
positioned.map((node) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
|
|
15067
15750
|
"g",
|
|
15068
15751
|
{
|
|
15069
15752
|
transform: `translate(${node.x * RADIAL_SCALE_X} ${node.y * RADIAL_SCALE_Y})`,
|
|
@@ -15079,22 +15762,22 @@ function RadialRelationshipGraph({
|
|
|
15079
15762
|
onKeyDown: (event) => onNodeKeyDown(event, node.id),
|
|
15080
15763
|
onClick: () => select(node.id),
|
|
15081
15764
|
children: [
|
|
15082
|
-
/* @__PURE__ */ (0,
|
|
15083
|
-
/* @__PURE__ */ (0,
|
|
15084
|
-
/* @__PURE__ */ (0,
|
|
15765
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("title", { children: node.label }),
|
|
15766
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("rect", { x: -RADIAL_NODE_HALF_W, y: -RADIAL_NODE_HALF_H, width: RADIAL_NODE_HALF_W * 2, height: RADIAL_NODE_HALF_H * 2, rx: "8" }),
|
|
15767
|
+
/* @__PURE__ */ (0, import_jsx_runtime100.jsx)("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
|
|
15085
15768
|
]
|
|
15086
15769
|
},
|
|
15087
15770
|
node.id
|
|
15088
15771
|
))
|
|
15089
15772
|
] }) }) }),
|
|
15090
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
15091
|
-
showList && /* @__PURE__ */ (0,
|
|
15773
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("li", { "data-type": item.id, style: { "--uix-graph-type-color": typeColor.get(item.id) }, children: item.label }, item.id)) }),
|
|
15774
|
+
showList && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(EquivalentRelationshipList, { nodes: bounded.nodes, edges: bounded.edges, selectedId, labels, onSelect: select, onExpandNeighbors, onOpenDetails })
|
|
15092
15775
|
] });
|
|
15093
15776
|
}
|
|
15094
15777
|
|
|
15095
15778
|
// src/components/MatchReview.tsx
|
|
15096
|
-
var
|
|
15097
|
-
var
|
|
15779
|
+
var import_react75 = require("react");
|
|
15780
|
+
var import_jsx_runtime101 = require("react/jsx-runtime");
|
|
15098
15781
|
var DEFAULT_MATCH_REVIEW_LABELS = {
|
|
15099
15782
|
region: "Match review",
|
|
15100
15783
|
loading: "Loading match candidates\u2026",
|
|
@@ -15156,11 +15839,11 @@ function MatchReview({
|
|
|
15156
15839
|
const plural = (n, one, many) => fillLabel(n === 1 ? one : many, { count: n });
|
|
15157
15840
|
const decisionLabel = { accepted: labels.decisionAccepted, dismissed: labels.decisionDismissed, split: labels.decisionSplit, other: labels.decisionOther };
|
|
15158
15841
|
const actionLabel = { accept: labels.accept, dismiss: labels.dismiss, split: labels.split, "pick-other": labels.pickOther };
|
|
15159
|
-
const [internalSelection, setInternalSelection] = (0,
|
|
15160
|
-
const [announcement, setAnnouncement] = (0,
|
|
15161
|
-
const [bulkPending, setBulkPending] = (0,
|
|
15842
|
+
const [internalSelection, setInternalSelection] = (0, import_react75.useState)(/* @__PURE__ */ new Set());
|
|
15843
|
+
const [announcement, setAnnouncement] = (0, import_react75.useState)("");
|
|
15844
|
+
const [bulkPending, setBulkPending] = (0, import_react75.useState)(false);
|
|
15162
15845
|
const selection = selectedIds ?? internalSelection;
|
|
15163
|
-
const pending = (0,
|
|
15846
|
+
const pending = (0, import_react75.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
|
|
15164
15847
|
const setSelection = (next) => {
|
|
15165
15848
|
if (selectedIds === void 0) setInternalSelection(next);
|
|
15166
15849
|
onSelectionChange?.(next);
|
|
@@ -15189,48 +15872,48 @@ function MatchReview({
|
|
|
15189
15872
|
setBulkPending(false);
|
|
15190
15873
|
}
|
|
15191
15874
|
};
|
|
15192
|
-
if (loading) return /* @__PURE__ */ (0,
|
|
15193
|
-
if (error) return /* @__PURE__ */ (0,
|
|
15194
|
-
/* @__PURE__ */ (0,
|
|
15195
|
-
onRetry && /* @__PURE__ */ (0,
|
|
15875
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: labels.loading });
|
|
15876
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
|
|
15877
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { children: error }),
|
|
15878
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
|
|
15196
15879
|
] });
|
|
15197
|
-
if (candidates.length === 0) return /* @__PURE__ */ (0,
|
|
15198
|
-
/* @__PURE__ */ (0,
|
|
15199
|
-
/* @__PURE__ */ (0,
|
|
15880
|
+
if (candidates.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
|
|
15881
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { children: labels.empty }),
|
|
15882
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { children: labels.emptyDetail })
|
|
15200
15883
|
] });
|
|
15201
|
-
return /* @__PURE__ */ (0,
|
|
15202
|
-
/* @__PURE__ */ (0,
|
|
15203
|
-
/* @__PURE__ */ (0,
|
|
15204
|
-
/* @__PURE__ */ (0,
|
|
15205
|
-
/* @__PURE__ */ (0,
|
|
15884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("section", { className: cx("uix-match-review", className), "aria-label": labels.region, children: [
|
|
15885
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "uix-match-review__summary", children: [
|
|
15886
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { children: [
|
|
15887
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("strong", { children: incomingLabel }),
|
|
15888
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { children: fillLabel(labels.pendingOf, { pending: pending.length, total: candidates.length }) })
|
|
15206
15889
|
] }),
|
|
15207
|
-
/* @__PURE__ */ (0,
|
|
15208
|
-
/* @__PURE__ */ (0,
|
|
15890
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("span", { children: [
|
|
15891
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("b", { children: field.label }),
|
|
15209
15892
|
field.render?.(incoming[field.id], incoming) ?? valueText(incoming[field.id])
|
|
15210
15893
|
] }, field.id)) })
|
|
15211
15894
|
] }),
|
|
15212
|
-
onBulkDecision && /* @__PURE__ */ (0,
|
|
15213
|
-
/* @__PURE__ */ (0,
|
|
15214
|
-
/* @__PURE__ */ (0,
|
|
15215
|
-
/* @__PURE__ */ (0,
|
|
15895
|
+
onBulkDecision && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "uix-match-review__bulk", "aria-label": labels.bulk, children: [
|
|
15896
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { children: fillLabel(labels.selectedCount, { count: selection.size }) }),
|
|
15897
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("accept"), children: bulkPending ? labels.applying : labels.acceptSelected }),
|
|
15898
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("dismiss"), children: bulkPending ? labels.applying : labels.dismissSelected })
|
|
15216
15899
|
] }),
|
|
15217
|
-
/* @__PURE__ */ (0,
|
|
15218
|
-
/* @__PURE__ */ (0,
|
|
15219
|
-
/* @__PURE__ */ (0,
|
|
15220
|
-
/* @__PURE__ */ (0,
|
|
15221
|
-
/* @__PURE__ */ (0,
|
|
15222
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
15223
|
-
/* @__PURE__ */ (0,
|
|
15224
|
-
/* @__PURE__ */ (0,
|
|
15900
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("table", { className: "uix-table uix-match-review__table", children: [
|
|
15901
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("caption", { className: "uix-visually-hidden", children: labels.caption }),
|
|
15902
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("tr", { children: [
|
|
15903
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("th", { scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "uix-visually-hidden", children: labels.select }) }),
|
|
15904
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("th", { scope: "col", children: labels.confidence }),
|
|
15905
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("th", { scope: "col", children: field.label }, field.id)),
|
|
15906
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("th", { scope: "col", children: labels.status }),
|
|
15907
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("th", { scope: "col", children: labels.actions })
|
|
15225
15908
|
] }) }),
|
|
15226
|
-
/* @__PURE__ */ (0,
|
|
15909
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("tbody", { children: candidates.map((candidate) => {
|
|
15227
15910
|
const resolved = candidate.status === "resolved";
|
|
15228
|
-
return /* @__PURE__ */ (0,
|
|
15229
|
-
/* @__PURE__ */ (0,
|
|
15230
|
-
/* @__PURE__ */ (0,
|
|
15231
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
15232
|
-
/* @__PURE__ */ (0,
|
|
15233
|
-
/* @__PURE__ */ (0,
|
|
15911
|
+
return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("tr", { "data-status": candidate.status ?? "pending", children: [
|
|
15912
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": fillLabel(labels.selectCandidate, { id: candidate.id }) }) }),
|
|
15913
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? labels.notScored : `${Math.round(candidate.confidence * 100)}%` }) }),
|
|
15914
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
|
|
15915
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ? decisionLabel[candidate.decision] : labels.resolved : labels.pending }) }),
|
|
15916
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
|
|
15234
15917
|
"button",
|
|
15235
15918
|
{
|
|
15236
15919
|
type: "button",
|
|
@@ -15244,12 +15927,12 @@ function MatchReview({
|
|
|
15244
15927
|
] }, candidate.id);
|
|
15245
15928
|
}) })
|
|
15246
15929
|
] }) }),
|
|
15247
|
-
/* @__PURE__ */ (0,
|
|
15930
|
+
/* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
15248
15931
|
] });
|
|
15249
15932
|
}
|
|
15250
15933
|
|
|
15251
15934
|
// src/components/MetricInput.tsx
|
|
15252
|
-
var
|
|
15935
|
+
var import_react76 = require("react");
|
|
15253
15936
|
|
|
15254
15937
|
// src/metric-model.ts
|
|
15255
15938
|
function decimals(value) {
|
|
@@ -15274,7 +15957,7 @@ function parseMetricValue(value) {
|
|
|
15274
15957
|
}
|
|
15275
15958
|
|
|
15276
15959
|
// src/components/MetricInput.tsx
|
|
15277
|
-
var
|
|
15960
|
+
var import_jsx_runtime102 = require("react/jsx-runtime");
|
|
15278
15961
|
var defaultMetricFormat = (input) => input == null ? "" : String(input);
|
|
15279
15962
|
function MetricInput({
|
|
15280
15963
|
value,
|
|
@@ -15295,14 +15978,14 @@ function MetricInput({
|
|
|
15295
15978
|
className,
|
|
15296
15979
|
id: providedId
|
|
15297
15980
|
}) {
|
|
15298
|
-
const generatedId = (0,
|
|
15981
|
+
const generatedId = (0, import_react76.useId)();
|
|
15299
15982
|
const id = providedId ?? generatedId;
|
|
15300
15983
|
const errorId = `${id}-error`;
|
|
15301
15984
|
const hintId = `${id}-hint`;
|
|
15302
15985
|
const showError = Boolean(invalid && errorMessage);
|
|
15303
15986
|
const describedBy = [hint ? hintId : null, showError ? errorId : null].filter(Boolean).join(" ") || void 0;
|
|
15304
|
-
const [text, setText] = (0,
|
|
15305
|
-
(0,
|
|
15987
|
+
const [text, setText] = (0, import_react76.useState)(() => format(value));
|
|
15988
|
+
(0, import_react76.useEffect)(() => setText(format(value)), [value, format]);
|
|
15306
15989
|
const commit = (input) => {
|
|
15307
15990
|
const parsed = parse(input);
|
|
15308
15991
|
if (input.trim() === "" || parsed !== null) {
|
|
@@ -15328,10 +16011,10 @@ function MetricInput({
|
|
|
15328
16011
|
const parsed = parse(event.currentTarget.value);
|
|
15329
16012
|
setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
|
|
15330
16013
|
};
|
|
15331
|
-
return /* @__PURE__ */ (0,
|
|
15332
|
-
/* @__PURE__ */ (0,
|
|
15333
|
-
/* @__PURE__ */ (0,
|
|
15334
|
-
/* @__PURE__ */ (0,
|
|
16014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
|
|
16015
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)("label", { className: "uix-field__label", htmlFor: id, "data-required": required || void 0, children: label }),
|
|
16016
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "uix-metric-input__control", children: [
|
|
16017
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
15335
16018
|
Input,
|
|
15336
16019
|
{
|
|
15337
16020
|
id,
|
|
@@ -15352,23 +16035,23 @@ function MetricInput({
|
|
|
15352
16035
|
readOnly
|
|
15353
16036
|
}
|
|
15354
16037
|
),
|
|
15355
|
-
unit && /* @__PURE__ */ (0,
|
|
15356
|
-
/* @__PURE__ */ (0,
|
|
15357
|
-
/* @__PURE__ */ (0,
|
|
15358
|
-
/* @__PURE__ */ (0,
|
|
16038
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
|
|
16039
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "uix-metric-input__steps", children: [
|
|
16040
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
|
|
16041
|
+
/* @__PURE__ */ (0, import_jsx_runtime102.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
|
|
15359
16042
|
] })
|
|
15360
16043
|
] }),
|
|
15361
|
-
unit && /* @__PURE__ */ (0,
|
|
16044
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
15362
16045
|
"Unit: ",
|
|
15363
16046
|
unit
|
|
15364
16047
|
] }),
|
|
15365
|
-
hint && /* @__PURE__ */ (0,
|
|
15366
|
-
showError && /* @__PURE__ */ (0,
|
|
16048
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { id: hintId, className: "uix-field__hint", children: hint }),
|
|
16049
|
+
showError && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
|
|
15367
16050
|
] });
|
|
15368
16051
|
}
|
|
15369
16052
|
|
|
15370
16053
|
// src/components/LicensePositionBar.tsx
|
|
15371
|
-
var
|
|
16054
|
+
var import_jsx_runtime103 = require("react/jsx-runtime");
|
|
15372
16055
|
var defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
|
|
15373
16056
|
function LicensePositionBar({
|
|
15374
16057
|
consumed,
|
|
@@ -15389,18 +16072,18 @@ function LicensePositionBar({
|
|
|
15389
16072
|
const percent = safeEntitled === 0 ? safeConsumed > 0 ? 100 : 0 : safeConsumed / safeEntitled * 100;
|
|
15390
16073
|
const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
|
|
15391
16074
|
const summary = `${consumedLabel}: ${format(safeConsumed)}. ${entitledLabel}: ${format(safeEntitled)}. ${over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}`}.`;
|
|
15392
|
-
return /* @__PURE__ */ (0,
|
|
15393
|
-
/* @__PURE__ */ (0,
|
|
15394
|
-
/* @__PURE__ */ (0,
|
|
16075
|
+
return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
|
|
16076
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "uix-license-position__header", children: [
|
|
16077
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("span", { className: "uix-license-position__value", children: [
|
|
15395
16078
|
format(safeConsumed),
|
|
15396
16079
|
" / ",
|
|
15397
16080
|
format(safeEntitled)
|
|
15398
16081
|
] }),
|
|
15399
|
-
/* @__PURE__ */ (0,
|
|
16082
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
|
|
15400
16083
|
] }),
|
|
15401
|
-
/* @__PURE__ */ (0,
|
|
15402
|
-
/* @__PURE__ */ (0,
|
|
15403
|
-
over > 0 && /* @__PURE__ */ (0,
|
|
16084
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "uix-license-position__track", children: [
|
|
16085
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
|
|
16086
|
+
over > 0 && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
|
|
15404
16087
|
"span",
|
|
15405
16088
|
{
|
|
15406
16089
|
className: "uix-license-position__overflow",
|
|
@@ -15409,12 +16092,12 @@ function LicensePositionBar({
|
|
|
15409
16092
|
}
|
|
15410
16093
|
)
|
|
15411
16094
|
] }),
|
|
15412
|
-
/* @__PURE__ */ (0,
|
|
16095
|
+
/* @__PURE__ */ (0, import_jsx_runtime103.jsx)("span", { className: "uix-visually-hidden", children: summary })
|
|
15413
16096
|
] });
|
|
15414
16097
|
}
|
|
15415
16098
|
|
|
15416
16099
|
// src/components/BrandProfiles.tsx
|
|
15417
|
-
var
|
|
16100
|
+
var import_react78 = require("react");
|
|
15418
16101
|
|
|
15419
16102
|
// src/color-model.ts
|
|
15420
16103
|
var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
@@ -15483,8 +16166,8 @@ function meetsContrast(background, foreground, minimum = 4.5) {
|
|
|
15483
16166
|
}
|
|
15484
16167
|
|
|
15485
16168
|
// src/components/ColorPicker.tsx
|
|
15486
|
-
var
|
|
15487
|
-
var
|
|
16169
|
+
var import_react77 = require("react");
|
|
16170
|
+
var import_jsx_runtime104 = require("react/jsx-runtime");
|
|
15488
16171
|
var DEFAULT_COLOR_PICKER_LABELS = {
|
|
15489
16172
|
trigger: "{label}: {color}",
|
|
15490
16173
|
sample: "Aa",
|
|
@@ -15515,17 +16198,17 @@ function ColorPicker({
|
|
|
15515
16198
|
labels: labelOverrides
|
|
15516
16199
|
}) {
|
|
15517
16200
|
const labels = { ...DEFAULT_COLOR_PICKER_LABELS, ...labelOverrides };
|
|
15518
|
-
const id = (0,
|
|
15519
|
-
const triggerRef = (0,
|
|
15520
|
-
const dialogRef = (0,
|
|
15521
|
-
const [open, setOpen] = (0,
|
|
16201
|
+
const id = (0, import_react77.useId)();
|
|
16202
|
+
const triggerRef = (0, import_react77.useRef)(null);
|
|
16203
|
+
const dialogRef = (0, import_react77.useRef)(null);
|
|
16204
|
+
const [open, setOpen] = (0, import_react77.useState)(false);
|
|
15522
16205
|
const normalized = normalizeHex(value) ?? "#000000";
|
|
15523
|
-
const [hexText, setHexText] = (0,
|
|
15524
|
-
const hsv = (0,
|
|
16206
|
+
const [hexText, setHexText] = (0, import_react77.useState)(normalized);
|
|
16207
|
+
const hsv = (0, import_react77.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
|
|
15525
16208
|
const ratio = contrastRatio(normalized, foreground) ?? 0;
|
|
15526
16209
|
const passes = ratio >= minimumContrast;
|
|
15527
|
-
(0,
|
|
15528
|
-
(0,
|
|
16210
|
+
(0, import_react77.useEffect)(() => setHexText(normalized), [normalized]);
|
|
16211
|
+
(0, import_react77.useEffect)(() => {
|
|
15529
16212
|
if (!open) return;
|
|
15530
16213
|
const dialog = dialogRef.current;
|
|
15531
16214
|
dialog?.querySelector("input,button")?.focus();
|
|
@@ -15568,8 +16251,8 @@ function ColorPicker({
|
|
|
15568
16251
|
if (next) onChange(next);
|
|
15569
16252
|
};
|
|
15570
16253
|
const sampleStyle = { backgroundColor: normalized };
|
|
15571
|
-
return /* @__PURE__ */ (0,
|
|
15572
|
-
/* @__PURE__ */ (0,
|
|
16254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: cx("uix-color-picker", className), children: [
|
|
16255
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
|
|
15573
16256
|
"button",
|
|
15574
16257
|
{
|
|
15575
16258
|
ref: triggerRef,
|
|
@@ -15581,12 +16264,12 @@ function ColorPicker({
|
|
|
15581
16264
|
onClick: () => setOpen((current) => !current),
|
|
15582
16265
|
disabled,
|
|
15583
16266
|
children: [
|
|
15584
|
-
/* @__PURE__ */ (0,
|
|
15585
|
-
/* @__PURE__ */ (0,
|
|
16267
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
|
|
16268
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { children: normalized })
|
|
15586
16269
|
]
|
|
15587
16270
|
}
|
|
15588
16271
|
),
|
|
15589
|
-
open && /* @__PURE__ */ (0,
|
|
16272
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
|
|
15590
16273
|
"div",
|
|
15591
16274
|
{
|
|
15592
16275
|
ref: dialogRef,
|
|
@@ -15597,55 +16280,55 @@ function ColorPicker({
|
|
|
15597
16280
|
className: "uix-color-picker__popover",
|
|
15598
16281
|
onKeyDown: onDialogKeyDown,
|
|
15599
16282
|
children: [
|
|
15600
|
-
/* @__PURE__ */ (0,
|
|
15601
|
-
/* @__PURE__ */ (0,
|
|
16283
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { style: { color: foreground }, children: labels.sample }) }),
|
|
16284
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
15602
16285
|
labels.hue,
|
|
15603
16286
|
" ",
|
|
15604
|
-
/* @__PURE__ */ (0,
|
|
16287
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("span", { children: [
|
|
15605
16288
|
Math.round(hsv.h),
|
|
15606
16289
|
"\xB0"
|
|
15607
16290
|
] }),
|
|
15608
|
-
/* @__PURE__ */ (0,
|
|
16291
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
|
|
15609
16292
|
] }),
|
|
15610
|
-
/* @__PURE__ */ (0,
|
|
16293
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
15611
16294
|
labels.saturation,
|
|
15612
16295
|
" ",
|
|
15613
|
-
/* @__PURE__ */ (0,
|
|
16296
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("span", { children: [
|
|
15614
16297
|
Math.round(hsv.s * 100),
|
|
15615
16298
|
"%"
|
|
15616
16299
|
] }),
|
|
15617
|
-
/* @__PURE__ */ (0,
|
|
16300
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
|
|
15618
16301
|
] }),
|
|
15619
|
-
/* @__PURE__ */ (0,
|
|
16302
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
15620
16303
|
labels.brightness,
|
|
15621
16304
|
" ",
|
|
15622
|
-
/* @__PURE__ */ (0,
|
|
16305
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("span", { children: [
|
|
15623
16306
|
Math.round(hsv.v * 100),
|
|
15624
16307
|
"%"
|
|
15625
16308
|
] }),
|
|
15626
|
-
/* @__PURE__ */ (0,
|
|
16309
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
|
|
15627
16310
|
] }),
|
|
15628
|
-
/* @__PURE__ */ (0,
|
|
16311
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("label", { className: "uix-color-picker__hex", children: [
|
|
15629
16312
|
labels.hex,
|
|
15630
|
-
/* @__PURE__ */ (0,
|
|
15631
|
-
/* @__PURE__ */ (0,
|
|
16313
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
|
|
16314
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
|
|
15632
16315
|
if (event.key === "Enter") commitHex();
|
|
15633
16316
|
}, "aria-invalid": !normalizeHex(hexText) }),
|
|
15634
|
-
/* @__PURE__ */ (0,
|
|
16317
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: labels.set })
|
|
15635
16318
|
] })
|
|
15636
16319
|
] }),
|
|
15637
|
-
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0,
|
|
15638
|
-
presets.length > 0 && /* @__PURE__ */ (0,
|
|
15639
|
-
/* @__PURE__ */ (0,
|
|
15640
|
-
/* @__PURE__ */ (0,
|
|
16320
|
+
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "uix-color-picker__palettes", children: [
|
|
16321
|
+
presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("fieldset", { children: [
|
|
16322
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("legend", { children: labels.presets }),
|
|
16323
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.usePreset, { color }) }, color)) })
|
|
15641
16324
|
] }),
|
|
15642
|
-
recent.length > 0 && /* @__PURE__ */ (0,
|
|
15643
|
-
/* @__PURE__ */ (0,
|
|
15644
|
-
/* @__PURE__ */ (0,
|
|
16325
|
+
recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("fieldset", { children: [
|
|
16326
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("legend", { children: labels.recent }),
|
|
16327
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.useRecent, { color }) }, color)) })
|
|
15645
16328
|
] })
|
|
15646
16329
|
] }),
|
|
15647
|
-
/* @__PURE__ */ (0,
|
|
15648
|
-
/* @__PURE__ */ (0,
|
|
16330
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: fillLabel(passes ? labels.contrastPasses : labels.contrastFails, { ratio: ratio.toFixed(2), minimum: minimumContrast }) }),
|
|
16331
|
+
/* @__PURE__ */ (0, import_jsx_runtime104.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: labels.done })
|
|
15649
16332
|
]
|
|
15650
16333
|
}
|
|
15651
16334
|
)
|
|
@@ -15653,7 +16336,7 @@ function ColorPicker({
|
|
|
15653
16336
|
}
|
|
15654
16337
|
|
|
15655
16338
|
// src/components/BrandProfiles.tsx
|
|
15656
|
-
var
|
|
16339
|
+
var import_jsx_runtime105 = require("react/jsx-runtime");
|
|
15657
16340
|
var PROFILE_PROPERTIES = {
|
|
15658
16341
|
brand: "--uix-brand",
|
|
15659
16342
|
brandForeground: "--uix-brand-fg",
|
|
@@ -15745,7 +16428,7 @@ function BrandProfileEditor({
|
|
|
15745
16428
|
labels: labelOverrides
|
|
15746
16429
|
}) {
|
|
15747
16430
|
const labels = { ...DEFAULT_BRAND_PROFILE_EDITOR_LABELS, ...labelOverrides };
|
|
15748
|
-
const [announcement, setAnnouncement] = (0,
|
|
16431
|
+
const [announcement, setAnnouncement] = (0, import_react78.useState)("");
|
|
15749
16432
|
const update = (patch) => onChange({ ...value, ...patch });
|
|
15750
16433
|
const apply = () => {
|
|
15751
16434
|
if (applyTarget !== null) applyBrandProfile(value, applyTarget);
|
|
@@ -15762,54 +16445,54 @@ function BrandProfileEditor({
|
|
|
15762
16445
|
...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
|
|
15763
16446
|
...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
|
|
15764
16447
|
};
|
|
15765
|
-
return /* @__PURE__ */ (0,
|
|
15766
|
-
/* @__PURE__ */ (0,
|
|
15767
|
-
profiles.length > 0 && /* @__PURE__ */ (0,
|
|
16448
|
+
return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": labels.region, children: [
|
|
16449
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "uix-brand-profiles__form", children: [
|
|
16450
|
+
profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("label", { className: "uix-field__label", children: [
|
|
15768
16451
|
labels.profile,
|
|
15769
|
-
/* @__PURE__ */ (0,
|
|
16452
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("select", { className: "uix-select", value: value.id, onChange: (event) => {
|
|
15770
16453
|
const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
|
|
15771
16454
|
if (selected) onSelectProfile?.(selected);
|
|
15772
|
-
}, children: profiles.map((profile) => /* @__PURE__ */ (0,
|
|
16455
|
+
}, children: profiles.map((profile) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("option", { value: profile.id, children: profile.name }, profile.id)) })
|
|
15773
16456
|
] }),
|
|
15774
|
-
/* @__PURE__ */ (0,
|
|
16457
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("label", { className: "uix-field__label", children: [
|
|
15775
16458
|
labels.name,
|
|
15776
|
-
/* @__PURE__ */ (0,
|
|
16459
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
|
|
15777
16460
|
] }),
|
|
15778
|
-
/* @__PURE__ */ (0,
|
|
15779
|
-
/* @__PURE__ */ (0,
|
|
16461
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
|
|
16462
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("label", { children: [
|
|
15780
16463
|
labels.brand,
|
|
15781
|
-
/* @__PURE__ */ (0,
|
|
16464
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ColorPicker, { label: labels.brandColor, value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
|
|
15782
16465
|
] }),
|
|
15783
|
-
/* @__PURE__ */ (0,
|
|
16466
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("label", { children: [
|
|
15784
16467
|
labels.onBrand,
|
|
15785
|
-
/* @__PURE__ */ (0,
|
|
16468
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)(ColorPicker, { label: labels.onBrandColor, value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
|
|
15786
16469
|
] })
|
|
15787
16470
|
] }),
|
|
15788
|
-
/* @__PURE__ */ (0,
|
|
16471
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("label", { className: "uix-field__label", children: [
|
|
15789
16472
|
labels.bodyFont,
|
|
15790
|
-
/* @__PURE__ */ (0,
|
|
16473
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
|
|
15791
16474
|
] }),
|
|
15792
|
-
/* @__PURE__ */ (0,
|
|
16475
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("label", { className: "uix-field__label", children: [
|
|
15793
16476
|
labels.headingFont,
|
|
15794
|
-
/* @__PURE__ */ (0,
|
|
16477
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
|
|
15795
16478
|
] }),
|
|
15796
|
-
/* @__PURE__ */ (0,
|
|
16479
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
|
|
15797
16480
|
labels.logoFile,
|
|
15798
|
-
/* @__PURE__ */ (0,
|
|
16481
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
|
|
15799
16482
|
] }),
|
|
15800
|
-
/* @__PURE__ */ (0,
|
|
15801
|
-
/* @__PURE__ */ (0,
|
|
16483
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: labels.apply }),
|
|
16484
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
15802
16485
|
] }),
|
|
15803
|
-
/* @__PURE__ */ (0,
|
|
15804
|
-
/* @__PURE__ */ (0,
|
|
15805
|
-
value.logo ? /* @__PURE__ */ (0,
|
|
15806
|
-
/* @__PURE__ */ (0,
|
|
16486
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": fillLabel(labels.preview, { name: value.name }), children: [
|
|
16487
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
|
|
16488
|
+
value.logo ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: labels.logoPlaceholder }),
|
|
16489
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("strong", { children: value.name || labels.previewTitleFallback })
|
|
15807
16490
|
] }),
|
|
15808
|
-
/* @__PURE__ */ (0,
|
|
15809
|
-
/* @__PURE__ */ (0,
|
|
15810
|
-
/* @__PURE__ */ (0,
|
|
15811
|
-
/* @__PURE__ */ (0,
|
|
15812
|
-
/* @__PURE__ */ (0,
|
|
16491
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
|
|
16492
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("h3", { children: labels.previewHeading }),
|
|
16493
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { children: labels.previewBody }),
|
|
16494
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: labels.previewPrimary }),
|
|
16495
|
+
/* @__PURE__ */ (0, import_jsx_runtime105.jsx)("a", { href: "#brand-profile-preview", children: labels.previewLink })
|
|
15813
16496
|
] })
|
|
15814
16497
|
] })
|
|
15815
16498
|
] });
|
|
@@ -15817,7 +16500,7 @@ function BrandProfileEditor({
|
|
|
15817
16500
|
var BrandProfiles = BrandProfileEditor;
|
|
15818
16501
|
|
|
15819
16502
|
// src/components/DiffViewer.tsx
|
|
15820
|
-
var
|
|
16503
|
+
var import_react79 = require("react");
|
|
15821
16504
|
|
|
15822
16505
|
// src/diff-model.ts
|
|
15823
16506
|
function isJsonObject(value) {
|
|
@@ -15868,7 +16551,7 @@ function summarizeDiff(entries, resolutions = {}) {
|
|
|
15868
16551
|
}
|
|
15869
16552
|
|
|
15870
16553
|
// src/components/DiffViewer.tsx
|
|
15871
|
-
var
|
|
16554
|
+
var import_jsx_runtime106 = require("react/jsx-runtime");
|
|
15872
16555
|
var DEFAULT_DIFF_VIEWER_LABELS = {
|
|
15873
16556
|
base: "Base",
|
|
15874
16557
|
current: "Current",
|
|
@@ -15913,33 +16596,33 @@ function DiffViewer({
|
|
|
15913
16596
|
const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...labelOverrides };
|
|
15914
16597
|
const resolutionLabel = { accept: labels.resolutionAccept, skip: labels.resolutionSkip, pending: labels.resolutionPending };
|
|
15915
16598
|
const buttonSize = controlSize === "md" ? void 0 : `uix-btn--${controlSize}`;
|
|
15916
|
-
const id = (0,
|
|
15917
|
-
const entries = (0,
|
|
15918
|
-
const [internalResolutions, setInternalResolutions] = (0,
|
|
16599
|
+
const id = (0, import_react79.useId)();
|
|
16600
|
+
const entries = (0, import_react79.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
|
|
16601
|
+
const [internalResolutions, setInternalResolutions] = (0, import_react79.useState)({});
|
|
15919
16602
|
const resolutions = controlledResolutions ?? internalResolutions;
|
|
15920
16603
|
const summary = summarizeDiff(entries, resolutions);
|
|
15921
16604
|
const resolve = (path, resolution) => {
|
|
15922
16605
|
if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
|
|
15923
16606
|
onResolutionChange?.(path, resolution);
|
|
15924
16607
|
};
|
|
15925
|
-
if (entries.length === 0) return /* @__PURE__ */ (0,
|
|
15926
|
-
/* @__PURE__ */ (0,
|
|
15927
|
-
/* @__PURE__ */ (0,
|
|
16608
|
+
if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": labels.region, children: [
|
|
16609
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("h3", { children: labels.noDifferences }),
|
|
16610
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { children: labels.noDifferencesDetail })
|
|
15928
16611
|
] });
|
|
15929
|
-
return /* @__PURE__ */ (0,
|
|
15930
|
-
/* @__PURE__ */ (0,
|
|
15931
|
-
GROUPS.map((kind) => /* @__PURE__ */ (0,
|
|
15932
|
-
/* @__PURE__ */ (0,
|
|
16612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, "data-control-size": controlSize, children: [
|
|
16613
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "uix-diff-viewer__summary", role: "group", "aria-label": labels.summary, children: [
|
|
16614
|
+
GROUPS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("span", { children: [
|
|
16615
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("b", { children: summary[kind] }),
|
|
15933
16616
|
" ",
|
|
15934
16617
|
labels[kind].toLowerCase()
|
|
15935
16618
|
] }, kind)),
|
|
15936
|
-
/* @__PURE__ */ (0,
|
|
15937
|
-
/* @__PURE__ */ (0,
|
|
16619
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("span", { children: [
|
|
16620
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("b", { children: summary.resolved }),
|
|
15938
16621
|
" ",
|
|
15939
16622
|
labels.resolved
|
|
15940
16623
|
] }),
|
|
15941
|
-
/* @__PURE__ */ (0,
|
|
15942
|
-
/* @__PURE__ */ (0,
|
|
16624
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("span", { children: [
|
|
16625
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("b", { children: summary.pending }),
|
|
15943
16626
|
" ",
|
|
15944
16627
|
labels.pending
|
|
15945
16628
|
] })
|
|
@@ -15947,38 +16630,38 @@ function DiffViewer({
|
|
|
15947
16630
|
GROUPS.map((kind) => {
|
|
15948
16631
|
const grouped = entries.filter((entry) => entry.kind === kind);
|
|
15949
16632
|
if (!grouped.length) return null;
|
|
15950
|
-
return /* @__PURE__ */ (0,
|
|
15951
|
-
/* @__PURE__ */ (0,
|
|
16633
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${kind}`, children: [
|
|
16634
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("h3", { id: `${id}-${kind}`, children: [
|
|
15952
16635
|
labels[kind],
|
|
15953
16636
|
" ",
|
|
15954
|
-
/* @__PURE__ */ (0,
|
|
16637
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: grouped.length })
|
|
15955
16638
|
] }),
|
|
15956
16639
|
grouped.map((entry) => {
|
|
15957
16640
|
const resolution = resolutions[entry.path] ?? "pending";
|
|
15958
|
-
return /* @__PURE__ */ (0,
|
|
15959
|
-
/* @__PURE__ */ (0,
|
|
15960
|
-
/* @__PURE__ */ (0,
|
|
15961
|
-
/* @__PURE__ */ (0,
|
|
16641
|
+
return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
|
|
16642
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("summary", { children: [
|
|
16643
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("code", { children: entry.path }),
|
|
16644
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolutionLabel[resolution] })
|
|
15962
16645
|
] }),
|
|
15963
|
-
/* @__PURE__ */ (0,
|
|
15964
|
-
/* @__PURE__ */ (0,
|
|
15965
|
-
/* @__PURE__ */ (0,
|
|
16646
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { role: "region", "aria-label": fillLabel(labels.valueFor, { version: labels[version], path: entry.path }), children: [
|
|
16647
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("strong", { children: labels[version] }),
|
|
16648
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("pre", { children: renderValue(entry[version], labels.notPresent) })
|
|
15966
16649
|
] }, version)) }),
|
|
15967
|
-
/* @__PURE__ */ (0,
|
|
15968
|
-
/* @__PURE__ */ (0,
|
|
15969
|
-
/* @__PURE__ */ (0,
|
|
15970
|
-
/* @__PURE__ */ (0,
|
|
16650
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
|
|
16651
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--primary", buttonSize), "aria-label": fillLabel(labels.acceptIncomingFor, { path: entry.path }), "aria-pressed": resolution === "accept", onClick: () => resolve(entry.path, "accept"), children: labels.acceptIncoming }),
|
|
16652
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--secondary", buttonSize), "aria-label": fillLabel(labels.keepCurrentFor, { path: entry.path }), "aria-pressed": resolution === "skip", onClick: () => resolve(entry.path, "skip"), children: labels.keepCurrent }),
|
|
16653
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("button", { type: "button", className: cx("uix-btn uix-btn--ghost", buttonSize), "aria-label": fillLabel(labels.markPendingFor, { path: entry.path }), "aria-pressed": resolution === "pending", onClick: () => resolve(entry.path, "pending"), children: labels.markPending })
|
|
15971
16654
|
] })
|
|
15972
16655
|
] }, entry.path);
|
|
15973
16656
|
})
|
|
15974
16657
|
] }, kind);
|
|
15975
16658
|
}),
|
|
15976
|
-
/* @__PURE__ */ (0,
|
|
16659
|
+
/* @__PURE__ */ (0, import_jsx_runtime106.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: fillLabel(labels.progress, { resolved: summary.resolved, total: entries.length }) })
|
|
15977
16660
|
] });
|
|
15978
16661
|
}
|
|
15979
16662
|
|
|
15980
16663
|
// src/components/TextDiff.tsx
|
|
15981
|
-
var
|
|
16664
|
+
var import_react80 = require("react");
|
|
15982
16665
|
|
|
15983
16666
|
// src/text-diff-model.ts
|
|
15984
16667
|
var WORD_TOKENS = /\s+|[\p{L}\p{M}\p{N}_]+|[^\s\p{L}\p{M}\p{N}_]/gu;
|
|
@@ -16238,7 +16921,7 @@ function textDiffRows(result, { context } = {}) {
|
|
|
16238
16921
|
}
|
|
16239
16922
|
|
|
16240
16923
|
// src/components/TextDiff.tsx
|
|
16241
|
-
var
|
|
16924
|
+
var import_jsx_runtime107 = require("react/jsx-runtime");
|
|
16242
16925
|
var DEFAULT_TEXT_DIFF_LABELS = {
|
|
16243
16926
|
before: "Before",
|
|
16244
16927
|
after: "After",
|
|
@@ -16251,47 +16934,47 @@ var DEFAULT_TEXT_DIFF_LABELS = {
|
|
|
16251
16934
|
};
|
|
16252
16935
|
function Marked({ segments, side, labels, whole }) {
|
|
16253
16936
|
const Tag = side === "before" ? "del" : "ins";
|
|
16254
|
-
return /* @__PURE__ */ (0,
|
|
16255
|
-
/* @__PURE__ */ (0,
|
|
16937
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_jsx_runtime107.Fragment, { children: segments.map((segment, i) => segment.changed ? /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(Tag, { "data-whole": whole || void 0, children: [
|
|
16938
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
16256
16939
|
side === "before" ? labels.removed : labels.added,
|
|
16257
16940
|
": "
|
|
16258
16941
|
] }),
|
|
16259
16942
|
segment.text
|
|
16260
|
-
] }, i) : /* @__PURE__ */ (0,
|
|
16943
|
+
] }, i) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react80.Fragment, { children: segment.text }, i)) });
|
|
16261
16944
|
}
|
|
16262
16945
|
function Cell({ line, side, kind, labels }) {
|
|
16263
|
-
if (!line) return /* @__PURE__ */ (0,
|
|
16946
|
+
if (!line) return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__cell", "data-side": side, "data-empty": "", "aria-hidden": "true" });
|
|
16264
16947
|
const changed = kind !== "equal";
|
|
16265
|
-
return /* @__PURE__ */ (0,
|
|
16266
|
-
/* @__PURE__ */ (0,
|
|
16267
|
-
/* @__PURE__ */ (0,
|
|
16268
|
-
/* @__PURE__ */ (0,
|
|
16948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "uix-text-diff__cell", "data-side": side, "data-kind": changed ? side === "before" ? "delete" : "insert" : "equal", children: [
|
|
16949
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "uix-text-diff__num", "aria-hidden": "true", children: line.number }),
|
|
16950
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "uix-text-diff__sign", "aria-hidden": "true", children: changed ? side === "before" ? "\u2212" : "+" : "" }),
|
|
16951
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "uix-text-diff__text", children: line.segments.length === 1 && line.segments[0].text === "" ? "\u200B" : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Marked, { segments: line.segments, side, labels, whole: line.segments.length === 1 }) })
|
|
16269
16952
|
] });
|
|
16270
16953
|
}
|
|
16271
16954
|
function Rows({ rows, view, labels, focusFirst }) {
|
|
16272
|
-
const [open, setOpen] = (0,
|
|
16273
|
-
const first = (0,
|
|
16274
|
-
(0,
|
|
16955
|
+
const [open, setOpen] = (0, import_react80.useState)(() => /* @__PURE__ */ new Set());
|
|
16956
|
+
const first = (0, import_react80.useRef)(null);
|
|
16957
|
+
(0, import_react80.useEffect)(() => {
|
|
16275
16958
|
if (focusFirst) first.current?.focus();
|
|
16276
16959
|
}, [focusFirst]);
|
|
16277
16960
|
const firstProps = (index) => focusFirst && index === 0 ? { ref: first, tabIndex: -1 } : {};
|
|
16278
|
-
return /* @__PURE__ */ (0,
|
|
16961
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_jsx_runtime107.Fragment, { children: rows.map((row, index) => {
|
|
16279
16962
|
if (row.kind === "fold") {
|
|
16280
|
-
if (open.has(index)) return /* @__PURE__ */ (0,
|
|
16281
|
-
return /* @__PURE__ */ (0,
|
|
16963
|
+
if (open.has(index)) return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Rows, { rows: row.rows, view, labels, focusFirst: true }, index);
|
|
16964
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__row", "data-kind": "fold", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("button", { type: "button", className: "uix-text-diff__fold", onClick: () => setOpen((s) => new Set(s).add(index)), children: fillLabel(labels.showUnchanged, { count: row.count }) }) }, index);
|
|
16282
16965
|
}
|
|
16283
16966
|
const before = row.kind === "insert" ? void 0 : row.before;
|
|
16284
16967
|
const after = row.kind === "delete" ? void 0 : row.after;
|
|
16285
16968
|
if (view === "unified") {
|
|
16286
|
-
if (row.kind === "equal") return /* @__PURE__ */ (0,
|
|
16287
|
-
return /* @__PURE__ */ (0,
|
|
16288
|
-
before && /* @__PURE__ */ (0,
|
|
16289
|
-
after && /* @__PURE__ */ (0,
|
|
16969
|
+
if (row.kind === "equal") return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__row", "data-kind": "equal", ...firstProps(index), children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Cell, { line: after, side: "after", kind: "equal", labels }) }, index);
|
|
16970
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(import_react80.Fragment, { children: [
|
|
16971
|
+
before && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__row", "data-kind": "delete", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Cell, { line: before, side: "before", kind: row.kind, labels }) }),
|
|
16972
|
+
after && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__row", "data-kind": "insert", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Cell, { line: after, side: "after", kind: row.kind, labels }) })
|
|
16290
16973
|
] }, index);
|
|
16291
16974
|
}
|
|
16292
|
-
return /* @__PURE__ */ (0,
|
|
16293
|
-
/* @__PURE__ */ (0,
|
|
16294
|
-
/* @__PURE__ */ (0,
|
|
16975
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "uix-text-diff__row", "data-kind": row.kind, ...firstProps(index), children: [
|
|
16976
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Cell, { line: before, side: "before", kind: row.kind, labels }),
|
|
16977
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Cell, { line: after, side: "after", kind: row.kind, labels })
|
|
16295
16978
|
] }, index);
|
|
16296
16979
|
}) });
|
|
16297
16980
|
}
|
|
@@ -16313,41 +16996,41 @@ function TextDiff({
|
|
|
16313
16996
|
}) {
|
|
16314
16997
|
const uixLabels = useUixLabels();
|
|
16315
16998
|
const labels = { ...DEFAULT_TEXT_DIFF_LABELS, ...uixLabels.textDiff, ...labelOverrides };
|
|
16316
|
-
const result = (0,
|
|
16317
|
-
const rows = (0,
|
|
16318
|
-
const heads = /* @__PURE__ */ (0,
|
|
16319
|
-
/* @__PURE__ */ (0,
|
|
16320
|
-
view === "unified" && /* @__PURE__ */ (0,
|
|
16999
|
+
const result = (0, import_react80.useMemo)(() => diffText(before, after, { granularity, maxTokens, maxEdits }), [before, after, granularity, maxTokens, maxEdits]);
|
|
17000
|
+
const rows = (0, import_react80.useMemo)(() => granularity === "line" && result.status === "ok" ? textDiffRows(result, { context }) : [], [result, granularity, context]);
|
|
17001
|
+
const heads = /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "uix-text-diff__heads", "aria-hidden": view === "unified" || void 0, children: [
|
|
17002
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("span", { className: "uix-text-diff__head", "data-side": "before", children: [
|
|
17003
|
+
view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { "aria-hidden": "true", children: "\u2212 " }),
|
|
16321
17004
|
beforeLabel ?? labels.before
|
|
16322
17005
|
] }),
|
|
16323
|
-
/* @__PURE__ */ (0,
|
|
16324
|
-
view === "unified" && /* @__PURE__ */ (0,
|
|
17006
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("span", { className: "uix-text-diff__head", "data-side": "after", children: [
|
|
17007
|
+
view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { "aria-hidden": "true", children: "+ " }),
|
|
16325
17008
|
afterLabel ?? labels.after
|
|
16326
17009
|
] })
|
|
16327
17010
|
] });
|
|
16328
17011
|
const unchanged = result.status === "ok" && result.added === 0 && result.removed === 0 && result.ops.every((op) => op.type === "equal");
|
|
16329
17012
|
let body;
|
|
16330
|
-
if (result.status === "too-large") body = /* @__PURE__ */ (0,
|
|
16331
|
-
else if (granularity === "line") body = /* @__PURE__ */ (0,
|
|
17013
|
+
if (result.status === "too-large") body = /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__note", children: labels.tooLarge });
|
|
17014
|
+
else if (granularity === "line") body = /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__body", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Rows, { rows, view, labels }) });
|
|
16332
17015
|
else {
|
|
16333
|
-
const prose = (side2) => /* @__PURE__ */ (0,
|
|
17016
|
+
const prose = (side2) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__prose", "data-side": side2, children: result.ops.map((op, i) => {
|
|
16334
17017
|
const text = op.tokens.join("");
|
|
16335
|
-
if (op.type === "equal") return /* @__PURE__ */ (0,
|
|
17018
|
+
if (op.type === "equal") return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react80.Fragment, { children: text }, i);
|
|
16336
17019
|
if (op.type === "delete" && side2 === "after") return null;
|
|
16337
17020
|
if (op.type === "insert" && side2 === "before") return null;
|
|
16338
|
-
return /* @__PURE__ */ (0,
|
|
17021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Marked, { segments: [{ text, changed: true }], side: op.type === "delete" ? "before" : "after", labels }, i);
|
|
16339
17022
|
}) });
|
|
16340
|
-
const side = (which) => /* @__PURE__ */ (0,
|
|
16341
|
-
/* @__PURE__ */ (0,
|
|
17023
|
+
const side = (which) => /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "uix-text-diff__side", children: [
|
|
17024
|
+
/* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__head", children: which === "before" ? beforeLabel ?? labels.before : afterLabel ?? labels.after }),
|
|
16342
17025
|
prose(which)
|
|
16343
17026
|
] });
|
|
16344
|
-
body = /* @__PURE__ */ (0,
|
|
17027
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__body", children: view === "unified" ? prose("both") : /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "uix-text-diff__row", "data-kind": "prose", children: [
|
|
16345
17028
|
side("before"),
|
|
16346
17029
|
side("after")
|
|
16347
17030
|
] }) });
|
|
16348
17031
|
}
|
|
16349
|
-
return /* @__PURE__ */ (0,
|
|
16350
|
-
!hideSummary && result.status === "ok" && /* @__PURE__ */ (0,
|
|
17032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { role: "group", "aria-label": label, className: cx("uix-text-diff", className), "data-view": view, "data-granularity": granularity, ...props, children: [
|
|
17033
|
+
!hideSummary && result.status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "uix-text-diff__summary", children: unchanged ? labels.noChanges : fillLabel(labels.summary, { added: result.added, removed: result.removed }) }),
|
|
16351
17034
|
!(granularity === "word" && view === "split" && result.status === "ok") && heads,
|
|
16352
17035
|
body
|
|
16353
17036
|
] });
|
|
@@ -16408,6 +17091,7 @@ function TextDiff({
|
|
|
16408
17091
|
DEFAULT_INSIGHT_CARD_LABELS,
|
|
16409
17092
|
DEFAULT_LIGHTBOX_LABELS,
|
|
16410
17093
|
DEFAULT_MATCH_REVIEW_LABELS,
|
|
17094
|
+
DEFAULT_ORG_CHART_LABELS,
|
|
16411
17095
|
DEFAULT_PAGINATION_LABELS,
|
|
16412
17096
|
DEFAULT_PRESENCE_LABELS,
|
|
16413
17097
|
DEFAULT_RELATIONSHIP_GRAPH_LABELS,
|
|
@@ -16492,6 +17176,7 @@ function TextDiff({
|
|
|
16492
17176
|
NotFoundState,
|
|
16493
17177
|
Note,
|
|
16494
17178
|
NoticeQueue,
|
|
17179
|
+
OrgChart,
|
|
16495
17180
|
PageHeader,
|
|
16496
17181
|
PageIntro,
|
|
16497
17182
|
Pagination,
|
|
@@ -16627,6 +17312,8 @@ function TextDiff({
|
|
|
16627
17312
|
nextSortDir,
|
|
16628
17313
|
normalQuantile,
|
|
16629
17314
|
normalizeHex,
|
|
17315
|
+
orgChartInitials,
|
|
17316
|
+
orgChartZoomStep,
|
|
16630
17317
|
packLanes,
|
|
16631
17318
|
parseDateInput,
|
|
16632
17319
|
parseDateValue,
|