@tensor_1/react 2.33.0 → 2.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -0
- package/dist/{SchedulingCalendar-C4XVbqZr.d.ts → SchedulingCalendar-DSLQ6AY5.d.ts} +39 -2
- package/dist/components/SchedulingAgenda.d.ts +31 -0
- package/dist/components/SchedulingAgenda.js +161 -0
- package/dist/components/SchedulingCalendar.d.ts +1 -1
- package/dist/components/SchedulingCalendar.js +45 -12
- package/dist/components/SchedulingTimeGrid.d.ts +1 -1
- package/dist/components/SchedulingTimeline.d.ts +1 -1
- package/dist/index.cjs +748 -562
- package/dist/index.d.cts +39 -2
- package/dist/index.d.ts +1 -1
- package/dist/labels-context.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -8935,7 +8935,7 @@ function BuilderCanvas({
|
|
|
8935
8935
|
}
|
|
8936
8936
|
|
|
8937
8937
|
// src/components/SchedulingCalendar.tsx
|
|
8938
|
-
var
|
|
8938
|
+
var import_react60 = require("react");
|
|
8939
8939
|
|
|
8940
8940
|
// src/calendar-model.ts
|
|
8941
8941
|
function fromDateKey(value) {
|
|
@@ -9362,9 +9362,163 @@ function proposeMove(span, delta, timeZone) {
|
|
|
9362
9362
|
return { start: movedStart.instant.toISOString(), end: proposedEnd.toISOString(), adjusted: movedStart.adjusted ?? movedEnd.adjusted };
|
|
9363
9363
|
}
|
|
9364
9364
|
|
|
9365
|
-
// src/components/
|
|
9365
|
+
// src/components/SchedulingAgenda.tsx
|
|
9366
9366
|
var import_react58 = require("react");
|
|
9367
9367
|
var import_jsx_runtime84 = require("react/jsx-runtime");
|
|
9368
|
+
var AGENDA_VIRTUAL_ROW = 44;
|
|
9369
|
+
var AGENDA_NARROW_WIDTH = 576;
|
|
9370
|
+
var AGENDA_NARROW_ROW = 64;
|
|
9371
|
+
var AGENDA_VIRTUAL_VIEWPORT = 640;
|
|
9372
|
+
function uniqueKeys(ids) {
|
|
9373
|
+
const used = /* @__PURE__ */ new Set();
|
|
9374
|
+
return ids.map((id) => {
|
|
9375
|
+
let key = id;
|
|
9376
|
+
for (let times = 1; used.has(key); times++) key = `${id}#${times}`;
|
|
9377
|
+
used.add(key);
|
|
9378
|
+
return key;
|
|
9379
|
+
});
|
|
9380
|
+
}
|
|
9381
|
+
function SchedulingAgenda(props) {
|
|
9382
|
+
const rowCount = props.groups.reduce((sum, group) => sum + group.rows.length, 0);
|
|
9383
|
+
const flat = rowCount > props.virtualizeAbove;
|
|
9384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(AgendaBody, { ...props, flat }, flat ? "flat" : "grouped");
|
|
9385
|
+
}
|
|
9386
|
+
function AgendaBody({
|
|
9387
|
+
groups,
|
|
9388
|
+
flat,
|
|
9389
|
+
timeZone,
|
|
9390
|
+
labels,
|
|
9391
|
+
headingLevel,
|
|
9392
|
+
dateText,
|
|
9393
|
+
formatInstant,
|
|
9394
|
+
entryName,
|
|
9395
|
+
entryStatus,
|
|
9396
|
+
entryStatusText,
|
|
9397
|
+
entryMarkers,
|
|
9398
|
+
overlayName,
|
|
9399
|
+
renderEntry,
|
|
9400
|
+
renderMarker: renderMarker2,
|
|
9401
|
+
onSelectEntry,
|
|
9402
|
+
onSelectOverlay,
|
|
9403
|
+
onShowMore
|
|
9404
|
+
}) {
|
|
9405
|
+
const groupKeys = uniqueKeys(groups.map((group) => group.date));
|
|
9406
|
+
const flatRows = [];
|
|
9407
|
+
if (flat) {
|
|
9408
|
+
groups.forEach((group, index) => {
|
|
9409
|
+
const groupKey = groupKeys[index];
|
|
9410
|
+
flatRows.push({ kind: "heading", key: `h-${groupKey}`, group });
|
|
9411
|
+
const noteKeys = uniqueKeys((group.annotations ?? []).map((overlay) => overlay.id));
|
|
9412
|
+
(group.annotations ?? []).forEach((overlay, at) => flatRows.push({ kind: "note", key: `n-${groupKey}-${noteKeys[at]}`, group, overlay }));
|
|
9413
|
+
const rowKeys = uniqueKeys(group.rows.map((entry) => entry.id));
|
|
9414
|
+
group.rows.forEach((entry, at) => flatRows.push({ kind: "entry", key: `e-${groupKey}-${rowKeys[at]}`, group, entry }));
|
|
9415
|
+
if ((group.hiddenCount ?? 0) > 0) flatRows.push({ kind: "hidden", key: `m-${groupKey}`, group });
|
|
9416
|
+
if ((group.continuesCount ?? 0) > 0) flatRows.push({ kind: "continues", key: `c-${groupKey}`, group });
|
|
9417
|
+
});
|
|
9418
|
+
}
|
|
9419
|
+
const [narrow, setNarrow] = (0, import_react58.useState)(false);
|
|
9420
|
+
const virtual = useVirtualRows(flatRows, { rowHeight: narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW, threshold: 0, estimatedViewportHeight: AGENDA_VIRTUAL_VIEWPORT });
|
|
9421
|
+
const scroller = virtual.containerRef;
|
|
9422
|
+
(0, import_react58.useLayoutEffect)(() => {
|
|
9423
|
+
const box = scroller.current;
|
|
9424
|
+
if (!box) return;
|
|
9425
|
+
const measure = () => setNarrow(box.clientWidth > 0 && box.clientWidth <= AGENDA_NARROW_WIDTH);
|
|
9426
|
+
measure();
|
|
9427
|
+
const observer = new ResizeObserver(measure);
|
|
9428
|
+
observer.observe(box);
|
|
9429
|
+
return () => observer.disconnect();
|
|
9430
|
+
}, [scroller]);
|
|
9431
|
+
const grouped = (0, import_react58.useRef)(null);
|
|
9432
|
+
(0, import_react58.useLayoutEffect)(() => {
|
|
9433
|
+
const box = grouped.current;
|
|
9434
|
+
if (!box) return;
|
|
9435
|
+
const observer = new ResizeObserver((entries) => {
|
|
9436
|
+
for (const entry of entries) {
|
|
9437
|
+
const head = entry.target;
|
|
9438
|
+
head.parentElement?.style.setProperty("--uix-scheduling-calendar-agenda-head", `${Math.ceil(head.getBoundingClientRect().height)}px`);
|
|
9439
|
+
}
|
|
9440
|
+
});
|
|
9441
|
+
box.querySelectorAll(":scope > section > .uix-scheduling-calendar__agenda-head").forEach((head) => observer.observe(head));
|
|
9442
|
+
return () => observer.disconnect();
|
|
9443
|
+
}, [groups]);
|
|
9444
|
+
const note = (overlay) => /* @__PURE__ */ (0, import_jsx_runtime84.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_runtime84.jsxs)("span", { className: "uix-scheduling-calendar__window-text", children: [
|
|
9445
|
+
overlay.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
|
|
9446
|
+
/* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
|
|
9447
|
+
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
|
|
9448
|
+
] }) });
|
|
9449
|
+
const heading = (group, withNotes) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "uix-scheduling-calendar__agenda-head", children: [
|
|
9450
|
+
(0, import_react58.createElement)(`h${headingLevel}`, { className: "uix-scheduling-calendar__agenda-heading" }, group.heading ?? dateText(group.date, "day")),
|
|
9451
|
+
withNotes && group.annotations && group.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("ul", { className: "uix-scheduling-calendar__agenda-notes", children: uniqueKeys(group.annotations.map((overlay) => overlay.id)).map((key, at) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("li", { children: note(group.annotations[at]) }, key)) })
|
|
9452
|
+
] });
|
|
9453
|
+
const timeText = (entry, date) => {
|
|
9454
|
+
const part = (text) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__agenda-time-part", children: text });
|
|
9455
|
+
const dash = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { "aria-hidden": "true", children: " \u2013 " });
|
|
9456
|
+
if (entry.allDay) {
|
|
9457
|
+
let span;
|
|
9458
|
+
try {
|
|
9459
|
+
span = itemDaySpan(entry.start, entry.end, timeZone);
|
|
9460
|
+
} catch {
|
|
9461
|
+
span = itemDaySpan(entry.start, entry.start, timeZone);
|
|
9462
|
+
}
|
|
9463
|
+
const last = addCalendarDays(span.end, -1);
|
|
9464
|
+
if (span.start === date && last === date) return labels.allDay;
|
|
9465
|
+
return span.start === last ? part(dateText(last, "day")) : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
|
|
9466
|
+
part(dateText(span.start, "day")),
|
|
9467
|
+
dash,
|
|
9468
|
+
part(dateText(last, "day"))
|
|
9469
|
+
] });
|
|
9470
|
+
}
|
|
9471
|
+
const startTime = zonedTimeOfDay(entry.start, timeZone);
|
|
9472
|
+
const endTime = zonedTimeOfDay(entry.end, timeZone);
|
|
9473
|
+
const endDay = zonedDateKey(entry.end, timeZone);
|
|
9474
|
+
const underItsDay = zonedDateKey(entry.start, timeZone) === date && (endDay === date || endDay === addCalendarDays(date, 1) && endTime < startTime);
|
|
9475
|
+
return underItsDay ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
|
|
9476
|
+
startTime,
|
|
9477
|
+
dash,
|
|
9478
|
+
endTime
|
|
9479
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
|
|
9480
|
+
part(formatInstant(entry.start)),
|
|
9481
|
+
dash,
|
|
9482
|
+
part(formatInstant(entry.end))
|
|
9483
|
+
] });
|
|
9484
|
+
};
|
|
9485
|
+
const row = (entry, date) => {
|
|
9486
|
+
const markers = entryMarkers(entry);
|
|
9487
|
+
const name = entry.accessibleName ?? (entry.meta ? `${entryName(entry)}, ${entry.meta}` : entryName(entry));
|
|
9488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("button", { type: "button", className: "uix-scheduling-calendar__agenda-row", "data-item-id": entry.id, "data-band": entry.band ?? "none", "data-status": entryStatus(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), "aria-label": name, children: [
|
|
9489
|
+
/* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__swatch", "aria-hidden": "true", "data-band": entry.band ?? "none", "data-status": entryStatus(entry) }),
|
|
9490
|
+
/* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__agenda-time", children: timeText(entry, date) }),
|
|
9491
|
+
/* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("span", { className: "uix-scheduling-calendar__agenda-main", children: [
|
|
9492
|
+
renderEntry?.(entry) ?? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title }),
|
|
9493
|
+
entry.meta && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__agenda-meta", children: entry.meta })
|
|
9494
|
+
] }),
|
|
9495
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { children: renderMarker2(marker, true) }, marker.id)) }),
|
|
9496
|
+
/* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "uix-scheduling-calendar__status", children: entryStatusText(entry) })
|
|
9497
|
+
] });
|
|
9498
|
+
};
|
|
9499
|
+
const hidden = (group) => {
|
|
9500
|
+
const text = fillLabel(labels.hiddenInDay, { count: group.hiddenCount ?? 0 });
|
|
9501
|
+
return onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("button", { type: "button", className: "uix-scheduling-calendar__agenda-more", onClick: () => onShowMore(group.date, group.rows), children: text }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: "uix-scheduling-calendar__agenda-more", children: text });
|
|
9502
|
+
};
|
|
9503
|
+
const continues = (group) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: "uix-scheduling-calendar__agenda-continues", children: fillLabel(labels.continuesInDay, { count: group.continuesCount ?? 0 }) });
|
|
9504
|
+
if (groups.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { children: labels.agendaEmpty }) });
|
|
9505
|
+
if (flat) {
|
|
9506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime84.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, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "uix-scheduling-calendar__agenda-window", style: { paddingTop: virtual.padTop, paddingBottom: virtual.padBottom }, children: virtual.rows.map((item) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "uix-scheduling-calendar__agenda-vrow", "data-kind": item.kind, 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)) }) });
|
|
9507
|
+
}
|
|
9508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { ref: grouped, className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: groups.map((group, index) => {
|
|
9509
|
+
const rowKeys = uniqueKeys(group.rows.map((entry) => entry.id));
|
|
9510
|
+
return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("section", { className: "uix-scheduling-calendar__agenda-group", "data-date": group.date, children: [
|
|
9511
|
+
heading(group, true),
|
|
9512
|
+
group.rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("ol", { className: "uix-scheduling-calendar__agenda-rows", children: group.rows.map((entry, at) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("li", { children: row(entry, group.date) }, rowKeys[at])) }),
|
|
9513
|
+
(group.hiddenCount ?? 0) > 0 && hidden(group),
|
|
9514
|
+
(group.continuesCount ?? 0) > 0 && continues(group)
|
|
9515
|
+
] }, groupKeys[index]);
|
|
9516
|
+
}) });
|
|
9517
|
+
}
|
|
9518
|
+
|
|
9519
|
+
// src/components/SchedulingTimeGrid.tsx
|
|
9520
|
+
var import_react59 = require("react");
|
|
9521
|
+
var import_jsx_runtime85 = require("react/jsx-runtime");
|
|
9368
9522
|
var HOUR_MS2 = 36e5;
|
|
9369
9523
|
var MINUTES_PER_HOUR = 60;
|
|
9370
9524
|
var LINES_PER_HOUR = 3;
|
|
@@ -9377,7 +9531,7 @@ function uniqueById(items) {
|
|
|
9377
9531
|
const seen = /* @__PURE__ */ new Set();
|
|
9378
9532
|
return items.filter((item) => seen.has(item.id) ? false : (seen.add(item.id), true));
|
|
9379
9533
|
}
|
|
9380
|
-
var GridItem = (0,
|
|
9534
|
+
var GridItem = (0, import_react59.memo)(function GridItem2({ entry, segment, column, alone, name, status, movable, hintId, timeZone, continuesFrom, markers, renderEntry, renderMarker: renderMarker2, handlers }) {
|
|
9381
9535
|
const lines = linesFor(segment);
|
|
9382
9536
|
const continuation = segment.part === "continuation";
|
|
9383
9537
|
const style = vars({
|
|
@@ -9386,17 +9540,17 @@ var GridItem = (0, import_react58.memo)(function GridItem2({ entry, segment, col
|
|
|
9386
9540
|
"--uix-scheduling-calendar-lane": segment.lane,
|
|
9387
9541
|
"--uix-scheduling-calendar-lanes": segment.laneCount
|
|
9388
9542
|
});
|
|
9389
|
-
const text = renderEntry?.(entry, { availableLines: lines }) ?? (lines > 0 ? /* @__PURE__ */ (0,
|
|
9390
|
-
!continuation && /* @__PURE__ */ (0,
|
|
9391
|
-
/* @__PURE__ */ (0,
|
|
9543
|
+
const text = renderEntry?.(entry, { availableLines: lines }) ?? (lines > 0 ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
|
|
9544
|
+
!continuation && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
|
|
9545
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
|
|
9392
9546
|
" "
|
|
9393
9547
|
] }),
|
|
9394
|
-
/* @__PURE__ */ (0,
|
|
9548
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title })
|
|
9395
9549
|
] }) : null);
|
|
9396
|
-
const body = /* @__PURE__ */ (0,
|
|
9397
|
-
continuation && lines > 0 && /* @__PURE__ */ (0,
|
|
9398
|
-
(!continuation || alone) && text != null && text !== false && /* @__PURE__ */ (0,
|
|
9399
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
9550
|
+
const body = /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
|
|
9551
|
+
continuation && lines > 0 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__tg-from", children: continuesFrom }),
|
|
9552
|
+
(!continuation || alone) && text != null && text !== false && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__entry-text", children: text }),
|
|
9553
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: renderMarker2(marker) }, marker.id)) })
|
|
9400
9554
|
] });
|
|
9401
9555
|
const shared = {
|
|
9402
9556
|
className: "uix-scheduling-calendar__entry uix-scheduling-calendar__tg-item",
|
|
@@ -9410,8 +9564,8 @@ var GridItem = (0, import_react58.memo)(function GridItem2({ entry, segment, col
|
|
|
9410
9564
|
onClick: () => handlers.click(entry),
|
|
9411
9565
|
onPointerDown: movable ? (event) => handlers.pointerDown(event, entry, column, false) : void 0
|
|
9412
9566
|
};
|
|
9413
|
-
if (continuation && !alone) return /* @__PURE__ */ (0,
|
|
9414
|
-
return /* @__PURE__ */ (0,
|
|
9567
|
+
if (continuation && !alone) return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { ...shared, "data-continuation-of": entry.id, "aria-hidden": "true", children: body });
|
|
9568
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
9415
9569
|
"button",
|
|
9416
9570
|
{
|
|
9417
9571
|
type: "button",
|
|
@@ -9457,17 +9611,17 @@ function SchedulingTimeGrid({
|
|
|
9457
9611
|
emptyNote,
|
|
9458
9612
|
nothingToShow
|
|
9459
9613
|
}) {
|
|
9460
|
-
const rootRef = (0,
|
|
9461
|
-
const hintId = (0,
|
|
9462
|
-
const [widthCap, setWidthCap] = (0,
|
|
9463
|
-
const [ghost, setGhost] = (0,
|
|
9464
|
-
const [announcement, setAnnouncement] = (0,
|
|
9614
|
+
const rootRef = (0, import_react59.useRef)(null);
|
|
9615
|
+
const hintId = (0, import_react59.useId)();
|
|
9616
|
+
const [widthCap, setWidthCap] = (0, import_react59.useState)(Infinity);
|
|
9617
|
+
const [ghost, setGhost] = (0, import_react59.useState)(null);
|
|
9618
|
+
const [announcement, setAnnouncement] = (0, import_react59.useState)("");
|
|
9465
9619
|
const moving = canMove && onProposeMove !== void 0;
|
|
9466
9620
|
const step = Number.isFinite(givenStep) && givenStep > 0 ? givenStep : DEFAULT_STEP;
|
|
9467
|
-
const laneOptions = (0,
|
|
9468
|
-
const entries = (0,
|
|
9469
|
-
const overlays = (0,
|
|
9470
|
-
(0,
|
|
9621
|
+
const laneOptions = (0, import_react59.useMemo)(() => ({ crossMidnightMinutes: topLaneCrossMidnightMinutes }), [topLaneCrossMidnightMinutes]);
|
|
9622
|
+
const entries = (0, import_react59.useMemo)(() => uniqueById(givenEntries), [givenEntries]);
|
|
9623
|
+
const overlays = (0, import_react59.useMemo)(() => uniqueById(givenOverlays), [givenOverlays]);
|
|
9624
|
+
(0, import_react59.useEffect)(() => {
|
|
9471
9625
|
const root = rootRef.current;
|
|
9472
9626
|
if (!root || typeof ResizeObserver === "undefined") return void 0;
|
|
9473
9627
|
const column = root.querySelector("[data-tg-column]");
|
|
@@ -9492,17 +9646,17 @@ function SchedulingTimeGrid({
|
|
|
9492
9646
|
};
|
|
9493
9647
|
}, [days]);
|
|
9494
9648
|
const lanes = Math.max(1, Math.min(maxLanes, widthCap));
|
|
9495
|
-
const entryById = (0,
|
|
9496
|
-
const overlayById = (0,
|
|
9497
|
-
const columns = (0,
|
|
9498
|
-
const slots = (0,
|
|
9499
|
-
const top = (0,
|
|
9500
|
-
const drawable = (0,
|
|
9501
|
-
const strip = (0,
|
|
9502
|
-
const shades = (0,
|
|
9649
|
+
const entryById = (0, import_react59.useMemo)(() => new Map(entries.map((entry) => [entry.id, entry])), [entries]);
|
|
9650
|
+
const overlayById = (0, import_react59.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, overlay])), [overlays]);
|
|
9651
|
+
const columns = (0, import_react59.useMemo)(() => days.map((date) => layoutTimeGridDay(entries, date, timeZone, { ...laneOptions, maxLanes: lanes })), [days, entries, timeZone, laneOptions, lanes]);
|
|
9652
|
+
const slots = (0, import_react59.useMemo)(() => days.map((date) => zonedHourSlots(date, timeZone)), [days, timeZone]);
|
|
9653
|
+
const top = (0, import_react59.useMemo)(() => layoutDaySpans(entries.filter((entry) => placesInTopLane(entry, timeZone, laneOptions)), days, { timeZone, laneCap: Math.max(0, topLaneCap) }), [entries, days, timeZone, laneOptions, topLaneCap]);
|
|
9654
|
+
const drawable = (0, import_react59.useMemo)(() => overlays.filter((overlay) => new Date(overlay.end).getTime() >= new Date(overlay.start).getTime()), [overlays]);
|
|
9655
|
+
const strip = (0, import_react59.useMemo)(() => layoutDaySpans(drawable, days, { timeZone, laneCap: Math.max(0, windowLaneCap) }), [drawable, days, timeZone, windowLaneCap]);
|
|
9656
|
+
const shades = (0, import_react59.useMemo)(() => layoutDaySpans(drawable.filter((overlay) => overlay.global), days, { timeZone }).placed, [drawable, days, timeZone]);
|
|
9503
9657
|
const lanesIn = (placed) => placed.reduce((max, span) => Math.max(max, span.lane + 1), 0);
|
|
9504
9658
|
const maxHours = Math.max(...columns.map((column) => column.dayHours));
|
|
9505
|
-
const gutterIndex = (0,
|
|
9659
|
+
const gutterIndex = (0, import_react59.useMemo)(() => {
|
|
9506
9660
|
const signatures = slots.map(slotSignature);
|
|
9507
9661
|
const count2 = /* @__PURE__ */ new Map();
|
|
9508
9662
|
for (const signature of signatures) count2.set(signature, (count2.get(signature) ?? 0) + 1);
|
|
@@ -9513,7 +9667,7 @@ function SchedulingTimeGrid({
|
|
|
9513
9667
|
return best;
|
|
9514
9668
|
}, [slots]);
|
|
9515
9669
|
const gutterSignature = slotSignature(slots[gutterIndex]);
|
|
9516
|
-
const hourLabels = (index, inline) => slots[index].map((slot) => /* @__PURE__ */ (0,
|
|
9670
|
+
const hourLabels = (index, inline) => slots[index].map((slot) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
9517
9671
|
"div",
|
|
9518
9672
|
{
|
|
9519
9673
|
className: inline ? "uix-scheduling-calendar__tg-hour uix-scheduling-calendar__tg-hour--inline" : "uix-scheduling-calendar__tg-hour",
|
|
@@ -9521,21 +9675,21 @@ function SchedulingTimeGrid({
|
|
|
9521
9675
|
style: vars({ "--uix-scheduling-calendar-offset": (slot.instant.getTime() - columns[index].dayStart) / HOUR_MS2 }),
|
|
9522
9676
|
children: [
|
|
9523
9677
|
slot.label,
|
|
9524
|
-
slot.offsetLabel && /* @__PURE__ */ (0,
|
|
9678
|
+
slot.offsetLabel && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__tg-offset", children: slot.offsetLabel })
|
|
9525
9679
|
]
|
|
9526
9680
|
},
|
|
9527
9681
|
slot.instant.getTime()
|
|
9528
9682
|
));
|
|
9529
9683
|
const movable = (entry) => moving && entry.movable !== false;
|
|
9530
|
-
const live = (0,
|
|
9684
|
+
const live = (0, import_react59.useRef)({ ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable });
|
|
9531
9685
|
live.current = { ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable };
|
|
9532
|
-
const dragRef = (0,
|
|
9533
|
-
const suppressClick = (0,
|
|
9534
|
-
const refocus = (0,
|
|
9535
|
-
(0,
|
|
9686
|
+
const dragRef = (0, import_react59.useRef)(null);
|
|
9687
|
+
const suppressClick = (0, import_react59.useRef)(false);
|
|
9688
|
+
const refocus = (0, import_react59.useRef)(null);
|
|
9689
|
+
(0, import_react59.useEffect)(() => {
|
|
9536
9690
|
if (ghost && !entryById.has(ghost.id)) setGhost(null);
|
|
9537
9691
|
}, [ghost, entryById]);
|
|
9538
|
-
(0,
|
|
9692
|
+
(0, import_react59.useEffect)(() => {
|
|
9539
9693
|
const id = refocus.current;
|
|
9540
9694
|
const root = rootRef.current;
|
|
9541
9695
|
if (!id || !root) return;
|
|
@@ -9552,7 +9706,7 @@ function SchedulingTimeGrid({
|
|
|
9552
9706
|
}
|
|
9553
9707
|
}
|
|
9554
9708
|
});
|
|
9555
|
-
const send = (0,
|
|
9709
|
+
const send = (0, import_react59.useCallback)((id, delta) => {
|
|
9556
9710
|
const state = live.current;
|
|
9557
9711
|
const entry = state.entryById.get(id);
|
|
9558
9712
|
if (!entry || !state.onProposeMove || !state.movable(entry) || delta.days === 0 && delta.minutes === 0) {
|
|
@@ -9567,7 +9721,7 @@ function SchedulingTimeGrid({
|
|
|
9567
9721
|
result.then(clear, clear);
|
|
9568
9722
|
} else setGhost(null);
|
|
9569
9723
|
}, []);
|
|
9570
|
-
const handlers = (0,
|
|
9724
|
+
const handlers = (0, import_react59.useMemo)(() => ({
|
|
9571
9725
|
click: (entry) => {
|
|
9572
9726
|
live.current.onSelectEntry?.(entry);
|
|
9573
9727
|
},
|
|
@@ -9690,7 +9844,7 @@ function SchedulingTimeGrid({
|
|
|
9690
9844
|
};
|
|
9691
9845
|
}
|
|
9692
9846
|
}), [send]);
|
|
9693
|
-
(0,
|
|
9847
|
+
(0, import_react59.useEffect)(() => () => {
|
|
9694
9848
|
dragRef.current?.stop();
|
|
9695
9849
|
dragRef.current = null;
|
|
9696
9850
|
}, []);
|
|
@@ -9710,7 +9864,7 @@ function SchedulingTimeGrid({
|
|
|
9710
9864
|
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;
|
|
9711
9865
|
const ghostSpan = ghost && ghostEntry && ghostTop ? layoutDaySpans([{ id: "ghost", start: ghost.proposal.start, end: ghost.proposal.end }], days, { timeZone }).placed[0] : void 0;
|
|
9712
9866
|
const ghostLane = ghost ? top.placed.find((span) => span.id === ghost.id)?.lane ?? 0 : 0;
|
|
9713
|
-
return /* @__PURE__ */ (0,
|
|
9867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
9714
9868
|
"div",
|
|
9715
9869
|
{
|
|
9716
9870
|
ref: rootRef,
|
|
@@ -9727,8 +9881,8 @@ function SchedulingTimeGrid({
|
|
|
9727
9881
|
}
|
|
9728
9882
|
},
|
|
9729
9883
|
children: [
|
|
9730
|
-
/* @__PURE__ */ (0,
|
|
9731
|
-
/* @__PURE__ */ (0,
|
|
9884
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "uix-scheduling-calendar__tg-head", children: [
|
|
9885
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "uix-scheduling-calendar__tg-zone", children: fillLabel(labels.timeZone, { timeZone }) }),
|
|
9732
9886
|
days.map((date, index) => {
|
|
9733
9887
|
const info = dayInfo?.[date];
|
|
9734
9888
|
const hiddenIds = dayInfo ? [] : [...columns[index].hidden, ...topHiddenOn(date)];
|
|
@@ -9736,22 +9890,22 @@ function SchedulingTimeGrid({
|
|
|
9736
9890
|
const moreText = fillLabel(labels.moreSpans, { count: more });
|
|
9737
9891
|
const moreName = fillLabel(labels.moreEntriesLabel, { count: more, date: dateText(date, "day") });
|
|
9738
9892
|
const headName = info ? info.label ?? `${dateText(date, "day")}, ${fillLabel(labels.dayCount, { count: info.count })}` : dateText(date, "day");
|
|
9739
|
-
return /* @__PURE__ */ (0,
|
|
9740
|
-
/* @__PURE__ */ (0,
|
|
9741
|
-
info && /* @__PURE__ */ (0,
|
|
9742
|
-
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0,
|
|
9743
|
-
more > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
9744
|
-
/* @__PURE__ */ (0,
|
|
9745
|
-
/* @__PURE__ */ (0,
|
|
9893
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "uix-scheduling-calendar__tg-dayhead", role: "group", "aria-label": headName, "data-date": date, children: [
|
|
9894
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, "aria-label": dateText(date, "day"), onClick: onSelectDate ? () => onSelectDate(date) : void 0, children: dateText(date, "column") }),
|
|
9895
|
+
info && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__count", "aria-hidden": "true", children: info.count }),
|
|
9896
|
+
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: renderMarker2(marker, true) }, marker.id)) }),
|
|
9897
|
+
more > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("button", { type: "button", 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_runtime85.jsxs)("span", { className: "uix-scheduling-calendar__more", children: [
|
|
9898
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { "aria-hidden": "true", children: moreText }),
|
|
9899
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-visually-hidden", children: moreName })
|
|
9746
9900
|
] }))
|
|
9747
9901
|
] }, date);
|
|
9748
9902
|
})
|
|
9749
9903
|
] }),
|
|
9750
|
-
(windowLanes > 0 || moreWindows > 0) && /* @__PURE__ */ (0,
|
|
9904
|
+
(windowLanes > 0 || moreWindows > 0) && /* @__PURE__ */ (0, import_jsx_runtime85.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: [
|
|
9751
9905
|
strip.placed.map((placed) => {
|
|
9752
9906
|
const overlay = overlayById.get(placed.id);
|
|
9753
9907
|
if (!overlay) return null;
|
|
9754
|
-
return /* @__PURE__ */ (0,
|
|
9908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
9755
9909
|
"button",
|
|
9756
9910
|
{
|
|
9757
9911
|
type: "button",
|
|
@@ -9765,24 +9919,24 @@ function SchedulingTimeGrid({
|
|
|
9765
9919
|
style: { gridColumn: gridColumns(placed), ...vars({ "--uix-scheduling-calendar-lane": placed.lane }) },
|
|
9766
9920
|
onClick: () => onSelectOverlay?.(overlay),
|
|
9767
9921
|
"aria-label": overlayName(overlay),
|
|
9768
|
-
children: /* @__PURE__ */ (0,
|
|
9769
|
-
overlay.kindLabel && /* @__PURE__ */ (0,
|
|
9770
|
-
/* @__PURE__ */ (0,
|
|
9771
|
-
overlay.scopeLabel && /* @__PURE__ */ (0,
|
|
9922
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("span", { className: "uix-scheduling-calendar__window-text", children: [
|
|
9923
|
+
overlay.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
|
|
9924
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
|
|
9925
|
+
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
|
|
9772
9926
|
] })
|
|
9773
9927
|
},
|
|
9774
9928
|
placed.id
|
|
9775
9929
|
);
|
|
9776
9930
|
}),
|
|
9777
|
-
moreWindows > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
9931
|
+
moreWindows > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("button", { type: "button", className: "uix-scheduling-calendar__rowmore", "aria-label": fillLabel(labels.moreWindowsLabel, { count: moreWindows, date: dateText(firstHiddenWindowDay, "day") }), onClick: () => onShowMore(firstHiddenWindowDay, []), children: fillLabel(labels.moreWindows, { count: moreWindows }) }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__rowmore", children: fillLabel(labels.moreWindows, { count: moreWindows }) }))
|
|
9778
9932
|
] }),
|
|
9779
|
-
(topLanes > 0 || ghostSpan) && /* @__PURE__ */ (0,
|
|
9933
|
+
(topLanes > 0 || ghostSpan) && /* @__PURE__ */ (0, import_jsx_runtime85.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: [
|
|
9780
9934
|
top.placed.map((placed) => {
|
|
9781
9935
|
const entry = entryById.get(placed.id);
|
|
9782
9936
|
if (!entry) return null;
|
|
9783
9937
|
const canDrag = movable(entry);
|
|
9784
9938
|
const markers = entryMarkers(entry);
|
|
9785
|
-
return /* @__PURE__ */ (0,
|
|
9939
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
|
|
9786
9940
|
"button",
|
|
9787
9941
|
{
|
|
9788
9942
|
type: "button",
|
|
@@ -9802,23 +9956,23 @@ function SchedulingTimeGrid({
|
|
|
9802
9956
|
onBlur: canDrag ? () => handlers.blur(entry) : void 0,
|
|
9803
9957
|
onPointerDown: canDrag ? (event) => handlers.pointerDown(event, entry, placed.startCol, true) : void 0,
|
|
9804
9958
|
children: [
|
|
9805
|
-
/* @__PURE__ */ (0,
|
|
9806
|
-
!placed.continuesBefore && !entry.allDay && /* @__PURE__ */ (0,
|
|
9807
|
-
/* @__PURE__ */ (0,
|
|
9959
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__entry-text", children: renderEntry?.(entry, { availableLines: 1 }) ?? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
|
|
9960
|
+
!placed.continuesBefore && !entry.allDay && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
|
|
9961
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
|
|
9808
9962
|
" "
|
|
9809
9963
|
] }),
|
|
9810
|
-
/* @__PURE__ */ (0,
|
|
9964
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title })
|
|
9811
9965
|
] }) }),
|
|
9812
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
9966
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: renderMarker2(marker) }, marker.id)) })
|
|
9813
9967
|
]
|
|
9814
9968
|
},
|
|
9815
9969
|
placed.id
|
|
9816
9970
|
);
|
|
9817
9971
|
}),
|
|
9818
|
-
ghostSpan && /* @__PURE__ */ (0,
|
|
9972
|
+
ghostSpan && /* @__PURE__ */ (0, import_jsx_runtime85.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 }) } })
|
|
9819
9973
|
] }),
|
|
9820
|
-
/* @__PURE__ */ (0,
|
|
9821
|
-
/* @__PURE__ */ (0,
|
|
9974
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "uix-scheduling-calendar__tg-body", children: [
|
|
9975
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "uix-scheduling-calendar__tg-gutter", "aria-hidden": "true", children: hourLabels(gutterIndex, false) }),
|
|
9822
9976
|
shades.map((placed) => {
|
|
9823
9977
|
const overlay = overlayById.get(placed.id);
|
|
9824
9978
|
const first = columns[placed.startCol];
|
|
@@ -9828,14 +9982,14 @@ function SchedulingTimeGrid({
|
|
|
9828
9982
|
const width = 100 / (placed.endCol - placed.startCol + 1);
|
|
9829
9983
|
const percent = (value) => `${Math.round(value * 1e4) / 100}%`;
|
|
9830
9984
|
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%)`;
|
|
9831
|
-
return /* @__PURE__ */ (0,
|
|
9985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "uix-scheduling-calendar__tg-shade", "aria-hidden": "true", "data-pattern": overlay.pattern ?? "solid", style: { gridColumn: gridColumns(placed), clipPath } }, `shade-${placed.id}`);
|
|
9832
9986
|
}),
|
|
9833
|
-
columns.map((column, index) => /* @__PURE__ */ (0,
|
|
9987
|
+
columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime85.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: [
|
|
9834
9988
|
slotSignature(slots[index]) !== gutterSignature && hourLabels(index, true),
|
|
9835
9989
|
column.segments.map((segment) => {
|
|
9836
9990
|
const entry = entryById.get(segment.id);
|
|
9837
9991
|
const alone = segment.part === "continuation" && index === 0;
|
|
9838
|
-
return /* @__PURE__ */ (0,
|
|
9992
|
+
return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
9839
9993
|
GridItem,
|
|
9840
9994
|
{
|
|
9841
9995
|
entry,
|
|
@@ -9856,7 +10010,7 @@ function SchedulingTimeGrid({
|
|
|
9856
10010
|
`${segment.id}-${segment.part}`
|
|
9857
10011
|
);
|
|
9858
10012
|
}),
|
|
9859
|
-
ghostParts?.[index].map((segment) => /* @__PURE__ */ (0,
|
|
10013
|
+
ghostParts?.[index].map((segment) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
|
|
9860
10014
|
"div",
|
|
9861
10015
|
{
|
|
9862
10016
|
className: "uix-scheduling-calendar__tg-ghost",
|
|
@@ -9866,20 +10020,20 @@ function SchedulingTimeGrid({
|
|
|
9866
10020
|
},
|
|
9867
10021
|
`ghost-${segment.part}`
|
|
9868
10022
|
)),
|
|
9869
|
-
index === nowColumn && nowAt !== null && /* @__PURE__ */ (0,
|
|
10023
|
+
index === nowColumn && nowAt !== null && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "uix-scheduling-calendar__tg-now", "aria-hidden": "true", style: vars({ "--uix-scheduling-calendar-offset": (nowAt - column.dayStart) / HOUR_MS2 }) })
|
|
9870
10024
|
] }, column.date))
|
|
9871
10025
|
] }),
|
|
9872
|
-
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0,
|
|
9873
|
-
moving && /* @__PURE__ */ (0,
|
|
9874
|
-
/* @__PURE__ */ (0,
|
|
9875
|
-
/* @__PURE__ */ (0,
|
|
10026
|
+
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "uix-scheduling-calendar__empty", children: emptyNote }),
|
|
10027
|
+
moving && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.moveHint }),
|
|
10028
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "uix-scheduling-calendar__tg-probe", "aria-hidden": "true", children: "00:00 abcdef" }),
|
|
10029
|
+
/* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
9876
10030
|
]
|
|
9877
10031
|
}
|
|
9878
10032
|
);
|
|
9879
10033
|
}
|
|
9880
10034
|
|
|
9881
10035
|
// src/components/SchedulingCalendar.tsx
|
|
9882
|
-
var
|
|
10036
|
+
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
9883
10037
|
var DEFAULT_SCHEDULING_CALENDAR_LABELS = {
|
|
9884
10038
|
region: "Scheduling calendar in {timeZone}",
|
|
9885
10039
|
previous: "Previous",
|
|
@@ -9917,6 +10071,9 @@ var DEFAULT_SCHEDULING_CALENDAR_LABELS = {
|
|
|
9917
10071
|
moreWindowsLabel: "{count} more windows, from {date}",
|
|
9918
10072
|
topLane: "All-day and longer entries",
|
|
9919
10073
|
continuesFrom: "from {time}",
|
|
10074
|
+
allDay: "All day",
|
|
10075
|
+
hiddenInDay: "{count} not shown \u2014 open day",
|
|
10076
|
+
continuesInDay: "Continues: {count} listed under an earlier day",
|
|
9920
10077
|
moveHint: "Hold Shift and press an arrow key to move it. Enter confirms, Escape cancels.",
|
|
9921
10078
|
moveProposed: "Move to {start} \u2013 {end}. Enter confirms, Escape cancels.",
|
|
9922
10079
|
moveCancelled: "Move cancelled.",
|
|
@@ -9932,6 +10089,7 @@ var INTL_PARTS = {
|
|
|
9932
10089
|
};
|
|
9933
10090
|
var EMPTY_OVERLAYS = [];
|
|
9934
10091
|
var EMPTY_ENTRIES = [];
|
|
10092
|
+
var EMPTY_IDS = [];
|
|
9935
10093
|
var DEFAULT_LANE_CAP2 = 2;
|
|
9936
10094
|
var DEFAULT_CHIP_ROWS = 3;
|
|
9937
10095
|
function coveredDays(start, end, timeZone) {
|
|
@@ -9943,12 +10101,12 @@ function coveredDays(start, end, timeZone) {
|
|
|
9943
10101
|
}
|
|
9944
10102
|
function Marker({ marker, showLabel }) {
|
|
9945
10103
|
const emphasis = marker.emphasis ?? "neutral";
|
|
9946
|
-
return /* @__PURE__ */ (0,
|
|
9947
|
-
marker.icon != null && /* @__PURE__ */ (0,
|
|
9948
|
-
/* @__PURE__ */ (0,
|
|
10104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: "uix-scheduling-calendar__marker", "data-emphasis": emphasis, "data-glyph": marker.icon == null ? emphasis : void 0, children: [
|
|
10105
|
+
marker.icon != null && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__marker-icon", "aria-hidden": "true", children: marker.icon }),
|
|
10106
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: showLabel ? "uix-scheduling-calendar__marker-label" : "uix-visually-hidden", children: marker.label })
|
|
9949
10107
|
] });
|
|
9950
10108
|
}
|
|
9951
|
-
var renderMarker = (marker, showLabel) => /* @__PURE__ */ (0,
|
|
10109
|
+
var renderMarker = (marker, showLabel) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Marker, { marker, showLabel });
|
|
9952
10110
|
function SchedulingCalendar({
|
|
9953
10111
|
entries,
|
|
9954
10112
|
anchorDate,
|
|
@@ -9979,6 +10137,10 @@ function SchedulingCalendar({
|
|
|
9979
10137
|
notice,
|
|
9980
10138
|
emptyNote,
|
|
9981
10139
|
onSelectDate,
|
|
10140
|
+
agendaGroups,
|
|
10141
|
+
agendaHeadingLevel = 3,
|
|
10142
|
+
virtualizeAbove = 200,
|
|
10143
|
+
monthDensity = "full",
|
|
9982
10144
|
timeGrid = false,
|
|
9983
10145
|
now,
|
|
9984
10146
|
canMove = false,
|
|
@@ -10003,26 +10165,27 @@ function SchedulingCalendar({
|
|
|
10003
10165
|
};
|
|
10004
10166
|
const stateLabel = labels.states;
|
|
10005
10167
|
const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, day: labels.viewDay, agenda: labels.viewAgenda };
|
|
10006
|
-
const [internalView, setInternalView] = (0,
|
|
10168
|
+
const [internalView, setInternalView] = (0, import_react60.useState)("month");
|
|
10007
10169
|
const view = controlledView ?? internalView;
|
|
10008
|
-
const [activeDate, setActiveDate] = (0,
|
|
10009
|
-
const [expandedDates, setExpandedDates] = (0,
|
|
10170
|
+
const [activeDate, setActiveDate] = (0, import_react60.useState)(anchorDate);
|
|
10171
|
+
const [expandedDates, setExpandedDates] = (0, import_react60.useState)(() => /* @__PURE__ */ new Set());
|
|
10010
10172
|
const dateText = (date, part) => formatDate?.(date, part) ?? cachedDateTimeFormat(locale, INTL_PARTS[part]).format(utcDate(date));
|
|
10011
10173
|
const formatInstant = (instant) => formatInstantProp?.(instant) ?? `${dateText(zonedDateKey(instant, timeZone), "day")} ${zonedTimeOfDay(instant, timeZone)}`;
|
|
10012
|
-
const gridRef = (0,
|
|
10174
|
+
const gridRef = (0, import_react60.useRef)(null);
|
|
10013
10175
|
const picksGiven = dayEntries !== void 0;
|
|
10014
10176
|
const controlled = picksGiven || dayInfo !== void 0;
|
|
10015
|
-
const
|
|
10177
|
+
const countsOnly = monthDensity === "counts" && view === "month";
|
|
10178
|
+
const fixed = controlled || maxEntriesPerDay !== void 0 && onShowMore !== void 0 || countsOnly;
|
|
10016
10179
|
const windowCap = Math.max(0, windowLaneCap ?? (fixed ? DEFAULT_LANE_CAP2 : Infinity));
|
|
10017
10180
|
const spanCap = Math.max(0, spanLaneCap ?? (fixed ? DEFAULT_LANE_CAP2 : Infinity));
|
|
10018
|
-
const visibleEntries = (0,
|
|
10019
|
-
const monthDays = (0,
|
|
10181
|
+
const visibleEntries = (0, import_react60.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
|
|
10182
|
+
const monthDays = (0, import_react60.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate), weekStartsOn), [anchorDate, weekStartsOn]);
|
|
10020
10183
|
const weekday = (utcDate(anchorDate).getUTCDay() - weekStartsOn + 7) % 7;
|
|
10021
10184
|
const weekStart = addCalendarDays(anchorDate, -weekday);
|
|
10022
|
-
const weekDays = (0,
|
|
10023
|
-
const days = (0,
|
|
10185
|
+
const weekDays = (0, import_react60.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
|
|
10186
|
+
const days = (0, import_react60.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : view === "day" ? [anchorDate] : weekDays, [view, monthDays, weekDays, anchorDate]);
|
|
10024
10187
|
const timeGridView = view === "day" || view === "week" && timeGrid;
|
|
10025
|
-
const { singles, multiDay, coverage } = (0,
|
|
10188
|
+
const { singles, multiDay, coverage } = (0, import_react60.useMemo)(() => {
|
|
10026
10189
|
const byDay = /* @__PURE__ */ new Map();
|
|
10027
10190
|
const spans = [];
|
|
10028
10191
|
const every = [];
|
|
@@ -10037,9 +10200,9 @@ function SchedulingCalendar({
|
|
|
10037
10200
|
}
|
|
10038
10201
|
return { singles: byDay, multiDay: spans, coverage: every };
|
|
10039
10202
|
}, [visibleEntries, timeZone]);
|
|
10040
|
-
const entryById = (0,
|
|
10041
|
-
const overlayById = (0,
|
|
10042
|
-
const layout = (0,
|
|
10203
|
+
const entryById = (0, import_react60.useMemo)(() => new Map([...multiDay].reverse().map(({ entry }) => [entry.id, entry])), [multiDay]);
|
|
10204
|
+
const overlayById = (0, import_react60.useMemo)(() => new Map([...overlays].reverse().map((overlay) => [overlay.id, overlay])), [overlays]);
|
|
10205
|
+
const layout = (0, import_react60.useMemo)(() => {
|
|
10043
10206
|
if (spanLayout) return spanLayout;
|
|
10044
10207
|
if (view === "agenda" || timeGridView) return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
|
|
10045
10208
|
const inputs = [];
|
|
@@ -10050,14 +10213,14 @@ function SchedulingCalendar({
|
|
|
10050
10213
|
windowIds.add(overlay.id);
|
|
10051
10214
|
inputs.push({ id: overlay.id, start: overlay.start, end: overlay.end, group: "window" });
|
|
10052
10215
|
}
|
|
10053
|
-
for (const { entry } of multiDay) {
|
|
10216
|
+
for (const { entry } of countsOnly ? [] : multiDay) {
|
|
10054
10217
|
if (itemIds.has(entry.id)) continue;
|
|
10055
10218
|
itemIds.add(entry.id);
|
|
10056
10219
|
inputs.push({ id: entry.id, start: entry.start, end: entry.end, group: "item" });
|
|
10057
10220
|
}
|
|
10058
10221
|
return layoutMonthSpans(inputs, days, { timeZone, laneCap: { window: windowCap, item: spanCap } });
|
|
10059
|
-
}, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap]);
|
|
10060
|
-
const placedByRow = (0,
|
|
10222
|
+
}, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap, countsOnly]);
|
|
10223
|
+
const placedByRow = (0, import_react60.useMemo)(() => {
|
|
10061
10224
|
const rows = /* @__PURE__ */ new Map();
|
|
10062
10225
|
for (const placed of layout.placed) {
|
|
10063
10226
|
const row = rows.get(placed.weekRow);
|
|
@@ -10068,7 +10231,7 @@ function SchedulingCalendar({
|
|
|
10068
10231
|
}, [layout]);
|
|
10069
10232
|
const lanesUsed = (row, group) => (placedByRow.get(row) ?? []).reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
|
|
10070
10233
|
const lanesUsedAnywhere = (group) => layout.placed.reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
|
|
10071
|
-
(0,
|
|
10234
|
+
(0, import_react60.useEffect)(() => {
|
|
10072
10235
|
if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
|
|
10073
10236
|
}, [activeDate, days, view]);
|
|
10074
10237
|
const setView = (next) => {
|
|
@@ -10129,15 +10292,15 @@ function SchedulingCalendar({
|
|
|
10129
10292
|
});
|
|
10130
10293
|
const entryContent = (entry, withTime = true) => {
|
|
10131
10294
|
const markers = markersOf(entry);
|
|
10132
|
-
return /* @__PURE__ */ (0,
|
|
10133
|
-
/* @__PURE__ */ (0,
|
|
10134
|
-
withTime && /* @__PURE__ */ (0,
|
|
10135
|
-
/* @__PURE__ */ (0,
|
|
10295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
|
|
10296
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__entry-text", children: renderEntry?.(entry) ?? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
|
|
10297
|
+
withTime && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
|
|
10298
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
|
|
10136
10299
|
" "
|
|
10137
10300
|
] }),
|
|
10138
|
-
/* @__PURE__ */ (0,
|
|
10301
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title })
|
|
10139
10302
|
] }) }),
|
|
10140
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
10303
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Marker, { marker }, marker.id)) })
|
|
10141
10304
|
] });
|
|
10142
10305
|
};
|
|
10143
10306
|
const laneStyle = (placed, windowLanes) => ({
|
|
@@ -10145,107 +10308,130 @@ function SchedulingCalendar({
|
|
|
10145
10308
|
["--uix-scheduling-calendar-lane"]: placed.group === "window" ? placed.lane : windowLanes + placed.lane
|
|
10146
10309
|
});
|
|
10147
10310
|
const nothingToShow = visibleEntries.length === 0 && !Object.values(dayEntries ?? {}).some((list) => list.length > 0) && !Object.values(dayInfo ?? {}).some((day) => day.count > 0);
|
|
10148
|
-
const chipRows = Math.max(0, maxEntriesPerDay ?? DEFAULT_CHIP_ROWS, ...Object.values(dayEntries ?? {}).map((list) => list.length));
|
|
10311
|
+
const chipRows = countsOnly ? -1 : Math.max(0, maxEntriesPerDay ?? DEFAULT_CHIP_ROWS, ...Object.values(dayEntries ?? {}).map((list) => list.length));
|
|
10149
10312
|
const renderDay = (date, index) => {
|
|
10150
10313
|
const info = dayInfo?.[date];
|
|
10151
10314
|
const all = picksGiven ? dayEntries[date] ?? EMPTY_ENTRIES : singles.get(date) ?? EMPTY_ENTRIES;
|
|
10152
10315
|
const overflowing = !picksGiven && maxEntriesPerDay !== void 0 && all.length > maxEntriesPerDay;
|
|
10153
10316
|
const collapsed = overflowing && (controlled || onShowMore !== void 0 || !expandedDates.has(date));
|
|
10154
|
-
const shown = collapsed ? all.slice(0, Math.max(0, maxEntriesPerDay)) : all;
|
|
10317
|
+
const shown = countsOnly ? EMPTY_ENTRIES : collapsed ? all.slice(0, Math.max(0, maxEntriesPerDay)) : all;
|
|
10155
10318
|
const hiddenCount = info ? info.overflowCount : picksGiven ? 0 : all.length - shown.length;
|
|
10156
10319
|
const onDay = picksGiven ? all : entriesOn(date);
|
|
10157
10320
|
const badge = renderDayBadge?.(date, onDay);
|
|
10158
10321
|
const hasBadge = badge != null && badge !== false;
|
|
10159
|
-
const dateButton = /* @__PURE__ */ (0,
|
|
10322
|
+
const dateButton = /* @__PURE__ */ (0, import_jsx_runtime86.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": dateText(date, "day"), children: Number(date.slice(-2)) });
|
|
10160
10323
|
const moreText = fillLabel(labels.moreEntries, { count: hiddenCount });
|
|
10161
10324
|
const moreName = fillLabel(labels.moreEntriesLabel, { count: hiddenCount, date: dateText(date, "day") });
|
|
10162
|
-
return /* @__PURE__ */ (0,
|
|
10163
|
-
hasBadge || info ? /* @__PURE__ */ (0,
|
|
10164
|
-
hasBadge && /* @__PURE__ */ (0,
|
|
10165
|
-
info && /* @__PURE__ */ (0,
|
|
10166
|
-
/* @__PURE__ */ (0,
|
|
10167
|
-
/* @__PURE__ */ (0,
|
|
10325
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
|
|
10326
|
+
hasBadge || info ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__dayhead", children: [
|
|
10327
|
+
hasBadge && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__badge", children: badge }),
|
|
10328
|
+
info && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: "uix-scheduling-calendar__count", children: [
|
|
10329
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { "aria-hidden": "true", children: info.count }),
|
|
10330
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-visually-hidden", children: info.label ?? fillLabel(labels.dayCount, { count: info.count }) })
|
|
10168
10331
|
] }),
|
|
10169
|
-
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0,
|
|
10332
|
+
info?.markers && info.markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__markers", children: info.markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Marker, { marker }, marker.id)) }),
|
|
10170
10333
|
dateButton
|
|
10171
10334
|
] }) : dateButton,
|
|
10172
|
-
/* @__PURE__ */ (0,
|
|
10173
|
-
shown.map((entry) => /* @__PURE__ */ (0,
|
|
10174
|
-
controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
10175
|
-
/* @__PURE__ */ (0,
|
|
10176
|
-
/* @__PURE__ */ (0,
|
|
10177
|
-
] })) : overflowing && /* @__PURE__ */ (0,
|
|
10335
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__entries", children: [
|
|
10336
|
+
shown.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { className: "uix-scheduling-calendar__entry", ...entryProps(entry), children: entryContent(entry) }, entry.id)),
|
|
10337
|
+
countsOnly ? null : controlled ? hiddenCount > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { type: "button", className: "uix-scheduling-calendar__more", "aria-label": moreName, onClick: () => onShowMore(date, onDay), children: moreText }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: "uix-scheduling-calendar__more", children: [
|
|
10338
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { "aria-hidden": "true", children: moreText }),
|
|
10339
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-visually-hidden", children: moreName })
|
|
10340
|
+
] })) : overflowing && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { type: "button", 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 })
|
|
10178
10341
|
] })
|
|
10179
10342
|
] }, date);
|
|
10180
10343
|
};
|
|
10181
10344
|
const renderWeek = (row) => {
|
|
10182
10345
|
const rowDays = days.slice(row * 7, row * 7 + 7);
|
|
10183
10346
|
const windowLanes = lanesUsed(row, "window");
|
|
10184
|
-
const spanLanes = lanesUsed(row, "item");
|
|
10185
|
-
const
|
|
10347
|
+
const spanLanes = countsOnly ? 0 : lanesUsed(row, "item");
|
|
10348
|
+
const hiddenIds = layout.hiddenByRow?.[row] ?? EMPTY_IDS;
|
|
10349
|
+
const drawnWindows = countsOnly ? new Set((placedByRow.get(row) ?? []).filter((placed) => placed.group === "window").map((placed) => placed.id)) : void 0;
|
|
10350
|
+
const hidden = countsOnly ? hiddenIds.filter((id) => overlayById.has(id) && !drawnWindows.has(id)).length : hiddenIds.length;
|
|
10186
10351
|
const firstHiddenDay = layout.firstHiddenDayByRow?.[row] ?? rowDays[0];
|
|
10187
10352
|
const moreText = fillLabel(labels.moreSpans, { count: hidden });
|
|
10188
10353
|
const moreName = fillLabel(labels.moreSpansLabel, { count: hidden, date: dateText(firstHiddenDay, "day") });
|
|
10189
10354
|
const style = { ["--uix-scheduling-calendar-lanes"]: Math.max(windowLanes + spanLanes, hidden > 0 ? 1 : 0) };
|
|
10190
|
-
return /* @__PURE__ */ (0,
|
|
10355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__week", style, children: [
|
|
10191
10356
|
rowDays.map((date, column) => renderDay(date, row * 7 + column)),
|
|
10192
10357
|
(placedByRow.get(row) ?? []).map((placed) => {
|
|
10193
10358
|
const continues = { "data-continues-before": placed.continuesBefore || void 0, "data-continues-after": placed.continuesAfter || void 0 };
|
|
10194
10359
|
if (placed.group === "window") {
|
|
10195
10360
|
const overlay = overlayById.get(placed.id);
|
|
10196
10361
|
if (!overlay) return null;
|
|
10197
|
-
return /* @__PURE__ */ (0,
|
|
10198
|
-
overlay.kindLabel && /* @__PURE__ */ (0,
|
|
10199
|
-
/* @__PURE__ */ (0,
|
|
10200
|
-
overlay.scopeLabel && /* @__PURE__ */ (0,
|
|
10362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.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, "data-kind": overlay.kind, ...continues, style: laneStyle(placed, windowLanes), onClick: () => onSelectOverlay?.(overlay), "aria-label": overlayName(overlay), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: "uix-scheduling-calendar__window-text", children: [
|
|
10363
|
+
overlay.kindLabel && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__window-kind", children: overlay.kindLabel }),
|
|
10364
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__window-name", children: overlay.label }),
|
|
10365
|
+
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
|
|
10201
10366
|
] }) }, `window-${placed.id}`);
|
|
10202
10367
|
}
|
|
10203
10368
|
const entry = entryById.get(placed.id);
|
|
10204
|
-
if (!entry) return null;
|
|
10205
|
-
return /* @__PURE__ */ (0,
|
|
10369
|
+
if (!entry || countsOnly) return null;
|
|
10370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.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}`);
|
|
10206
10371
|
}),
|
|
10207
|
-
hidden > 0 && (onShowMore ? /* @__PURE__ */ (0,
|
|
10208
|
-
/* @__PURE__ */ (0,
|
|
10209
|
-
/* @__PURE__ */ (0,
|
|
10372
|
+
hidden > 0 && (onShowMore ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { type: "button", className: "uix-scheduling-calendar__rowmore", "aria-label": moreName, onClick: () => onShowMore(firstHiddenDay, picksGiven ? dayEntries[firstHiddenDay] ?? EMPTY_ENTRIES : entriesOn(firstHiddenDay)), children: moreText }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { className: "uix-scheduling-calendar__rowmore", children: [
|
|
10373
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { "aria-hidden": "true", children: moreText }),
|
|
10374
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-visually-hidden", children: moreName })
|
|
10210
10375
|
] }))
|
|
10211
10376
|
] }, rowDays[0]);
|
|
10212
10377
|
};
|
|
10213
10378
|
const gridStyle = fixed ? {
|
|
10214
10379
|
["--uix-scheduling-calendar-chips"]: chipRows,
|
|
10215
10380
|
["--uix-scheduling-calendar-lane-cap"]: Math.max(
|
|
10216
|
-
Math.max(Number.isFinite(windowCap) ? windowCap : 0, lanesUsedAnywhere("window")) + Math.max(Number.isFinite(spanCap) ? spanCap : 0, lanesUsedAnywhere("item")),
|
|
10381
|
+
Math.max(Number.isFinite(windowCap) ? windowCap : 0, lanesUsedAnywhere("window")) + (countsOnly ? 0 : Math.max(Number.isFinite(spanCap) ? spanCap : 0, lanesUsedAnywhere("item"))),
|
|
10217
10382
|
Object.keys(layout.hiddenByRow ?? {}).length > 0 ? 1 : 0
|
|
10218
10383
|
)
|
|
10219
10384
|
} : void 0;
|
|
10220
|
-
return /* @__PURE__ */ (0,
|
|
10221
|
-
showHeader && /* @__PURE__ */ (0,
|
|
10222
|
-
/* @__PURE__ */ (0,
|
|
10223
|
-
/* @__PURE__ */ (0,
|
|
10224
|
-
/* @__PURE__ */ (0,
|
|
10385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("section", { className: cx("uix-scheduling-calendar", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
|
|
10386
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__header", children: [
|
|
10387
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { children: [
|
|
10388
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: periodLabel("previous") }),
|
|
10389
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: periodLabel("next") })
|
|
10225
10390
|
] }),
|
|
10226
|
-
/* @__PURE__ */ (0,
|
|
10227
|
-
/* @__PURE__ */ (0,
|
|
10391
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("strong", { children: view === "month" ? dateText(startOfMonth(anchorDate), "month") : view === "day" ? dateText(anchorDate, "day") : `${dateText(weekStart, "day")} \u2013 ${dateText(weekDays[weekDays.length - 1], "day")}` }),
|
|
10392
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.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_runtime86.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)) })
|
|
10228
10393
|
] }),
|
|
10229
|
-
notice != null && notice !== false && /* @__PURE__ */ (0,
|
|
10230
|
-
loading ? /* @__PURE__ */ (0,
|
|
10231
|
-
/* @__PURE__ */ (0,
|
|
10232
|
-
onRetry && /* @__PURE__ */ (0,
|
|
10233
|
-
] }) : view === "agenda"
|
|
10394
|
+
notice != null && notice !== false && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "uix-scheduling-calendar__notice", children: notice }),
|
|
10395
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "uix-scheduling-calendar__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
|
|
10396
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { children: error }),
|
|
10397
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
|
|
10398
|
+
] }) : view === "agenda" && agendaGroups ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
10399
|
+
SchedulingAgenda,
|
|
10400
|
+
{
|
|
10401
|
+
groups: agendaGroups,
|
|
10402
|
+
timeZone,
|
|
10403
|
+
labels,
|
|
10404
|
+
headingLevel: agendaHeadingLevel,
|
|
10405
|
+
virtualizeAbove,
|
|
10406
|
+
dateText,
|
|
10407
|
+
formatInstant,
|
|
10408
|
+
entryName,
|
|
10409
|
+
entryStatus: statusOf,
|
|
10410
|
+
entryStatusText: stateText,
|
|
10411
|
+
entryMarkers: markersOf,
|
|
10412
|
+
overlayName,
|
|
10413
|
+
renderEntry,
|
|
10414
|
+
renderMarker,
|
|
10415
|
+
onSelectEntry,
|
|
10416
|
+
onSelectOverlay,
|
|
10417
|
+
onShowMore
|
|
10418
|
+
}
|
|
10419
|
+
) : view === "agenda" ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": labels.agenda, children: visibleEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { children: labels.agendaEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
|
|
10234
10420
|
const markers = markersOf(entry);
|
|
10235
|
-
return /* @__PURE__ */ (0,
|
|
10236
|
-
/* @__PURE__ */ (0,
|
|
10237
|
-
/* @__PURE__ */ (0,
|
|
10238
|
-
/* @__PURE__ */ (0,
|
|
10421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("button", { type: "button", "data-item-id": entry.id, "data-band": entry.band ?? "none", "data-status": statusOf(entry), "data-state": entry.state, onClick: () => onSelectEntry?.(entry), children: [
|
|
10422
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { children: [
|
|
10423
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsx)("strong", { children: renderEntry?.(entry) ?? entry.title }),
|
|
10424
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { children: [
|
|
10239
10425
|
formatInstant(entry.start),
|
|
10240
10426
|
" \u2013 ",
|
|
10241
10427
|
formatInstant(entry.end)
|
|
10242
10428
|
] }),
|
|
10243
|
-
entry.meta && /* @__PURE__ */ (0,
|
|
10429
|
+
entry.meta && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: entry.meta })
|
|
10244
10430
|
] }),
|
|
10245
|
-
markers.length > 0 && /* @__PURE__ */ (0,
|
|
10246
|
-
entry.state ? /* @__PURE__ */ (0,
|
|
10431
|
+
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Marker, { marker }, marker.id)) }),
|
|
10432
|
+
entry.state ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(StatusPill, { tone: stateTone(entry.state), children: stateLabel[entry.state] }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__status", children: stateText(entry) })
|
|
10247
10433
|
] }) }, entry.id);
|
|
10248
|
-
}) }) }) : timeGridView ? /* @__PURE__ */ (0,
|
|
10434
|
+
}) }) }) : timeGridView ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
|
|
10249
10435
|
SchedulingTimeGrid,
|
|
10250
10436
|
{
|
|
10251
10437
|
view: view === "day" ? "day" : "week",
|
|
@@ -10279,26 +10465,26 @@ function SchedulingCalendar({
|
|
|
10279
10465
|
emptyNote,
|
|
10280
10466
|
nothingToShow
|
|
10281
10467
|
}
|
|
10282
|
-
) : /* @__PURE__ */ (0,
|
|
10283
|
-
days.slice(0, 7).map((date) => /* @__PURE__ */ (0,
|
|
10468
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime86.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, role: "group", "aria-label": fillLabel(labels.grid, { view: viewLabel[view] }), children: [
|
|
10469
|
+
days.slice(0, 7).map((date) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "uix-scheduling-calendar__weekday", "aria-hidden": "true", children: dateText(date, "weekday") }, `weekday-${date}`)),
|
|
10284
10470
|
Array.from({ length: days.length / 7 }, (_, row) => renderWeek(row)),
|
|
10285
|
-
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0,
|
|
10471
|
+
emptyNote != null && emptyNote !== false && nothingToShow && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "uix-scheduling-calendar__empty", children: emptyNote })
|
|
10286
10472
|
] }),
|
|
10287
|
-
legend ? (legend.length > 0 || legendCaption != null && legendCaption !== false) && /* @__PURE__ */ (0,
|
|
10288
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
10289
|
-
/* @__PURE__ */ (0,
|
|
10473
|
+
legend ? (legend.length > 0 || legendCaption != null && legendCaption !== false) && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__legend", role: "group", "aria-label": labels.legend, children: [
|
|
10474
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("ul", { className: "uix-scheduling-calendar__legend-list", children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("li", { "data-legend-id": item.id, children: [
|
|
10475
|
+
/* @__PURE__ */ (0, import_jsx_runtime86.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 }),
|
|
10290
10476
|
item.label
|
|
10291
10477
|
] }, item.id)) }),
|
|
10292
|
-
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0,
|
|
10293
|
-
] }) : /* @__PURE__ */ (0,
|
|
10294
|
-
["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ (0,
|
|
10295
|
-
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0,
|
|
10478
|
+
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "uix-scheduling-calendar__legend-caption", children: legendCaption })
|
|
10479
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__legend", role: "group", "aria-label": labels.legend, children: [
|
|
10480
|
+
["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { "data-state": state, children: stateLabel[state] }, state)),
|
|
10481
|
+
legendCaption != null && legendCaption !== false && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "uix-scheduling-calendar__legend-caption", children: legendCaption })
|
|
10296
10482
|
] })
|
|
10297
10483
|
] });
|
|
10298
10484
|
}
|
|
10299
10485
|
|
|
10300
10486
|
// src/components/SchedulingTimeline.tsx
|
|
10301
|
-
var
|
|
10487
|
+
var import_react61 = require("react");
|
|
10302
10488
|
|
|
10303
10489
|
// src/scheduling-timeline-model.ts
|
|
10304
10490
|
var HOUR = 36e5;
|
|
@@ -10400,7 +10586,7 @@ function pixelsToMs(px, trackWidth, range, step) {
|
|
|
10400
10586
|
}
|
|
10401
10587
|
|
|
10402
10588
|
// src/components/SchedulingTimeline.tsx
|
|
10403
|
-
var
|
|
10589
|
+
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
10404
10590
|
var DEFAULT_SCHEDULING_TIMELINE_LABELS = {
|
|
10405
10591
|
region: "Schedule timeline in {timeZone}",
|
|
10406
10592
|
lanes: "Lanes",
|
|
@@ -10456,20 +10642,20 @@ function SchedulingTimeline({
|
|
|
10456
10642
|
states: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.states, ...uixLabels.schedulingTimeline?.states, ...labelOverrides?.states },
|
|
10457
10643
|
overlays: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.overlays, ...uixLabels.schedulingTimeline?.overlays, ...labelOverrides?.overlays }
|
|
10458
10644
|
};
|
|
10459
|
-
const id = (0,
|
|
10645
|
+
const id = (0, import_react61.useId)();
|
|
10460
10646
|
const step = stepProp ?? defaultTimelineStep(scale);
|
|
10461
|
-
const ticks = (0,
|
|
10462
|
-
const laneLayouts = (0,
|
|
10647
|
+
const ticks = (0, import_react61.useMemo)(() => timelineTicks(range, scale, timeZone, weekStartsOn), [range.start, range.end, scale, timeZone, weekStartsOn]);
|
|
10648
|
+
const laneLayouts = (0, import_react61.useMemo)(
|
|
10463
10649
|
() => lanes.map((lane) => ({ lane, placed: layoutLane(items.filter((item) => item.laneId === lane.id), range) })),
|
|
10464
10650
|
[lanes, items, range.start, range.end]
|
|
10465
10651
|
// eslint-disable-line react-hooks/exhaustive-deps
|
|
10466
10652
|
);
|
|
10467
|
-
const ordered = (0,
|
|
10468
|
-
const [activeId, setActiveId] = (0,
|
|
10653
|
+
const ordered = (0, import_react61.useMemo)(() => laneLayouts.flatMap((l) => l.placed.map((p) => p.item.id)), [laneLayouts]);
|
|
10654
|
+
const [activeId, setActiveId] = (0, import_react61.useState)();
|
|
10469
10655
|
const focusId = activeId && ordered.includes(activeId) ? activeId : ordered[0];
|
|
10470
|
-
const [drag, setDrag] = (0,
|
|
10471
|
-
const [announcement, setAnnouncement] = (0,
|
|
10472
|
-
const rootRef = (0,
|
|
10656
|
+
const [drag, setDrag] = (0, import_react61.useState)(null);
|
|
10657
|
+
const [announcement, setAnnouncement] = (0, import_react61.useState)("");
|
|
10658
|
+
const rootRef = (0, import_react61.useRef)(null);
|
|
10473
10659
|
const fmtInstant = (instant) => formatInstantProp?.(instant) ?? new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
|
|
10474
10660
|
const fmtTick = (at) => formatTick?.(new Date(at), scale) ?? new Intl.DateTimeFormat(locale, { timeZone, ...TICK_FORMAT[scale] }).format(new Date(at));
|
|
10475
10661
|
const movable = (item) => !!onMoveItem && item.movable !== false;
|
|
@@ -10540,17 +10726,17 @@ function SchedulingTimeline({
|
|
|
10540
10726
|
const trackStyle = { minWidth: `calc(${Math.max(ticks.length - 1, 1)} * ${tickWidth ?? TICK_WIDTH[scale]})` };
|
|
10541
10727
|
const band = (o, showLabel) => {
|
|
10542
10728
|
const pos = placeSpan(o, range);
|
|
10543
|
-
return pos && /* @__PURE__ */ (0,
|
|
10544
|
-
};
|
|
10545
|
-
return /* @__PURE__ */ (0,
|
|
10546
|
-
loading ? /* @__PURE__ */ (0,
|
|
10547
|
-
/* @__PURE__ */ (0,
|
|
10548
|
-
onRetry && /* @__PURE__ */ (0,
|
|
10549
|
-
] }) : /* @__PURE__ */ (0,
|
|
10550
|
-
(overlays.length > 0 || markers.length > 0) && /* @__PURE__ */ (0,
|
|
10551
|
-
/* @__PURE__ */ (0,
|
|
10552
|
-
/* @__PURE__ */ (0,
|
|
10553
|
-
overlays.map((o) => /* @__PURE__ */ (0,
|
|
10729
|
+
return pos && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__overlay", "data-kind": o.kind, style: { left: `${pos.left}%`, width: `${pos.width}%` }, children: showLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__overlay-label", children: o.label }) }, o.id);
|
|
10730
|
+
};
|
|
10731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("section", { ref: rootRef, className: cx("uix-scheduling-timeline", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
|
|
10732
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "uix-scheduling-timeline__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-scheduling-timeline__state", role: "alert", children: [
|
|
10733
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { children: error }),
|
|
10734
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
|
|
10735
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
|
|
10736
|
+
(overlays.length > 0 || markers.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-visually-hidden", children: [
|
|
10737
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { id: `${id}-windows`, children: labels.windows }),
|
|
10738
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("ul", { "aria-labelledby": `${id}-windows`, children: [
|
|
10739
|
+
overlays.map((o) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("li", { children: [
|
|
10554
10740
|
labels.overlays[o.kind],
|
|
10555
10741
|
": ",
|
|
10556
10742
|
o.label,
|
|
@@ -10559,40 +10745,40 @@ function SchedulingTimeline({
|
|
|
10559
10745
|
" \u2013 ",
|
|
10560
10746
|
fmtInstant(o.end)
|
|
10561
10747
|
] }, o.id)),
|
|
10562
|
-
markers.map((m) => /* @__PURE__ */ (0,
|
|
10748
|
+
markers.map((m) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("li", { children: [
|
|
10563
10749
|
m.label,
|
|
10564
10750
|
", ",
|
|
10565
10751
|
fmtInstant(m.at)
|
|
10566
10752
|
] }, m.id))
|
|
10567
10753
|
] })
|
|
10568
10754
|
] }),
|
|
10569
|
-
/* @__PURE__ */ (0,
|
|
10570
|
-
/* @__PURE__ */ (0,
|
|
10571
|
-
/* @__PURE__ */ (0,
|
|
10572
|
-
/* @__PURE__ */ (0,
|
|
10755
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "uix-scheduling-timeline__scroller", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-scheduling-timeline__grid", children: [
|
|
10756
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--axis", "aria-hidden": "true", children: [
|
|
10757
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "uix-scheduling-timeline__lane-label", children: labels.lanes }),
|
|
10758
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "uix-scheduling-timeline__track uix-scheduling-timeline__axis", style: trackStyle, children: ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime87.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_runtime87.jsx)("span", { className: "uix-scheduling-timeline__tick-label", children: fmtTick(tick.at) }) }, tick.at)) })
|
|
10573
10759
|
] }),
|
|
10574
10760
|
laneLayouts.map(({ lane, placed }, laneIndex) => {
|
|
10575
10761
|
const rows = placed.reduce((max, p) => Math.max(max, p.row + 1), 1);
|
|
10576
10762
|
const laneLabelId = `${id}-lane-${laneIndex}`;
|
|
10577
|
-
return /* @__PURE__ */ (0,
|
|
10578
|
-
/* @__PURE__ */ (0,
|
|
10579
|
-
/* @__PURE__ */ (0,
|
|
10580
|
-
lane.meta != null && /* @__PURE__ */ (0,
|
|
10763
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-scheduling-timeline__row", style: { "--uix-timeline-rows": rows }, children: [
|
|
10764
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-scheduling-timeline__lane-label", id: laneLabelId, children: [
|
|
10765
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__lane-name", children: lane.label }),
|
|
10766
|
+
lane.meta != null && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__lane-meta", children: lane.meta })
|
|
10581
10767
|
] }),
|
|
10582
|
-
/* @__PURE__ */ (0,
|
|
10583
|
-
ticks.map((tick) => /* @__PURE__ */ (0,
|
|
10584
|
-
/* @__PURE__ */ (0,
|
|
10585
|
-
nowPos && /* @__PURE__ */ (0,
|
|
10768
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: [
|
|
10769
|
+
ticks.map((tick) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__gridline", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, tick.at)),
|
|
10770
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { "aria-hidden": "true", children: overlaysFor(lane.id).map((o) => band(o, laneIndex === 0 || !!o.laneId)) }),
|
|
10771
|
+
nowPos && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__now", style: { left: `${nowPos.left}%` }, "aria-hidden": "true", children: laneIndex === 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__now-label", children: labels.now }) }),
|
|
10586
10772
|
markersFor(lane.id).map((m) => {
|
|
10587
10773
|
const pos = placeSpan({ start: m.at, end: m.at }, range);
|
|
10588
|
-
return pos && /* @__PURE__ */ (0,
|
|
10774
|
+
return pos && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__marker", style: { left: `${pos.left}%` }, title: m.label, "aria-hidden": "true" }, m.id);
|
|
10589
10775
|
}),
|
|
10590
|
-
/* @__PURE__ */ (0,
|
|
10776
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("ul", { className: "uix-scheduling-timeline__items", "aria-labelledby": laneLabelId, children: placed.map((p, index) => {
|
|
10591
10777
|
const item = p.item;
|
|
10592
10778
|
const state = item.state ?? "scheduled";
|
|
10593
10779
|
const dragging = drag?.id === item.id && drag.moved;
|
|
10594
10780
|
const shown = dragging && drag ? placeSpan(shiftSpan(item, drag.delta, "move", step), range) ?? p : p;
|
|
10595
|
-
return /* @__PURE__ */ (0,
|
|
10781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("li", { className: "uix-scheduling-timeline__slot", style: { left: `${shown.left}%`, width: `${shown.width}%`, "--uix-timeline-row": p.row }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
|
|
10596
10782
|
"button",
|
|
10597
10783
|
{
|
|
10598
10784
|
type: "button",
|
|
@@ -10619,8 +10805,8 @@ function SchedulingTimeline({
|
|
|
10619
10805
|
onSelectItem?.(item);
|
|
10620
10806
|
},
|
|
10621
10807
|
children: [
|
|
10622
|
-
/* @__PURE__ */ (0,
|
|
10623
|
-
item.meta && /* @__PURE__ */ (0,
|
|
10808
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__item-title", children: renderItem?.(item) ?? item.title }),
|
|
10809
|
+
item.meta && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-timeline__item-meta", children: item.meta })
|
|
10624
10810
|
]
|
|
10625
10811
|
}
|
|
10626
10812
|
) }, item.id);
|
|
@@ -10629,16 +10815,16 @@ function SchedulingTimeline({
|
|
|
10629
10815
|
] }, lane.id);
|
|
10630
10816
|
})
|
|
10631
10817
|
] }) }),
|
|
10632
|
-
ordered.length === 0 && /* @__PURE__ */ (0,
|
|
10818
|
+
ordered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "uix-scheduling-timeline__empty", children: labels.empty })
|
|
10633
10819
|
] }),
|
|
10634
|
-
onMoveItem && /* @__PURE__ */ (0,
|
|
10635
|
-
/* @__PURE__ */ (0,
|
|
10820
|
+
onMoveItem && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { id: `${id}-hint`, className: "uix-visually-hidden", children: labels.moveHint }),
|
|
10821
|
+
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
|
|
10636
10822
|
] });
|
|
10637
10823
|
}
|
|
10638
10824
|
|
|
10639
10825
|
// src/components/DateRangePicker.tsx
|
|
10640
|
-
var
|
|
10641
|
-
var
|
|
10826
|
+
var import_react62 = require("react");
|
|
10827
|
+
var import_jsx_runtime88 = require("react/jsx-runtime");
|
|
10642
10828
|
var DEFAULT_DATE_RANGE_PICKER_LABELS = {
|
|
10643
10829
|
previous: "Previous",
|
|
10644
10830
|
previousMonth: "Show previous month",
|
|
@@ -10676,29 +10862,29 @@ function DateRangePicker({
|
|
|
10676
10862
|
labels: labelOverrides,
|
|
10677
10863
|
today
|
|
10678
10864
|
}) {
|
|
10679
|
-
const id = (0,
|
|
10865
|
+
const id = (0, import_react62.useId)();
|
|
10680
10866
|
const uixLabels = useUixLabels();
|
|
10681
10867
|
const labels = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...uixLabels.dateRangePicker, ...labelOverrides };
|
|
10682
|
-
const weekdays = (0,
|
|
10683
|
-
const [internalMonth, setInternalMonth] = (0,
|
|
10868
|
+
const weekdays = (0, import_react62.useMemo)(() => weekdayNames(locale), [locale]);
|
|
10869
|
+
const [internalMonth, setInternalMonth] = (0, import_react62.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
|
|
10684
10870
|
const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
|
|
10685
|
-
const [activeDate, setActiveDate] = (0,
|
|
10686
|
-
const rootRef = (0,
|
|
10687
|
-
const pendingFocus = (0,
|
|
10871
|
+
const [activeDate, setActiveDate] = (0, import_react62.useState)(value.end ?? value.start ?? visibleMonth);
|
|
10872
|
+
const rootRef = (0, import_react62.useRef)(null);
|
|
10873
|
+
const pendingFocus = (0, import_react62.useRef)(false);
|
|
10688
10874
|
const count2 = Math.max(1, Math.min(3, months));
|
|
10689
|
-
const calendars = (0,
|
|
10875
|
+
const calendars = (0, import_react62.useMemo)(() => Array.from({ length: count2 }, (_, index) => {
|
|
10690
10876
|
const month = startOfMonth(addCalendarMonths(visibleMonth, index));
|
|
10691
10877
|
return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
|
|
10692
10878
|
}), [visibleMonth, count2]);
|
|
10693
10879
|
const todayDate = today === void 0 ? localDateKey() : today;
|
|
10694
10880
|
const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
|
|
10695
|
-
(0,
|
|
10881
|
+
(0, import_react62.useEffect)(() => {
|
|
10696
10882
|
const first = calendars[0]?.days[0]?.date;
|
|
10697
10883
|
const finalDays = calendars[calendars.length - 1]?.days;
|
|
10698
10884
|
const last = finalDays?.[finalDays.length - 1]?.date;
|
|
10699
10885
|
if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
|
|
10700
10886
|
}, [activeDate, calendars]);
|
|
10701
|
-
(0,
|
|
10887
|
+
(0, import_react62.useEffect)(() => {
|
|
10702
10888
|
if (!pendingFocus.current) return;
|
|
10703
10889
|
rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus();
|
|
10704
10890
|
pendingFocus.current = false;
|
|
@@ -10736,23 +10922,23 @@ function DateRangePicker({
|
|
|
10736
10922
|
}
|
|
10737
10923
|
};
|
|
10738
10924
|
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));
|
|
10739
|
-
return /* @__PURE__ */ (0,
|
|
10740
|
-
/* @__PURE__ */ (0,
|
|
10741
|
-
/* @__PURE__ */ (0,
|
|
10742
|
-
/* @__PURE__ */ (0,
|
|
10743
|
-
/* @__PURE__ */ (0,
|
|
10744
|
-
/* @__PURE__ */ (0,
|
|
10925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: cx("uix-date-range-picker", rangeInvalid && "uix-date-range-picker--invalid", className), "aria-labelledby": `${id}-label`, children: [
|
|
10926
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-date-range-picker__header", children: [
|
|
10927
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h3", { id: `${id}-label`, children: label }),
|
|
10928
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
|
|
10929
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.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 }),
|
|
10930
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.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 })
|
|
10745
10931
|
] })
|
|
10746
10932
|
] }),
|
|
10747
|
-
/* @__PURE__ */ (0,
|
|
10748
|
-
/* @__PURE__ */ (0,
|
|
10749
|
-
/* @__PURE__ */ (0,
|
|
10750
|
-
/* @__PURE__ */ (0,
|
|
10751
|
-
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0,
|
|
10933
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ref: rootRef, className: "uix-date-range-picker__months", children: calendars.map(({ month, days }) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-date-range-picker__month", children: [
|
|
10934
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h4", { children: monthLabel(month, locale) }),
|
|
10935
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: weekdays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { children: day }, index)) }),
|
|
10936
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
|
|
10937
|
+
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { "aria-hidden": "true" }, `blank-${index}`)),
|
|
10752
10938
|
days.map((day) => {
|
|
10753
10939
|
const unavailable = disabled || isDateUnavailable(day.date, { min, max, isDisabled: isDateDisabled });
|
|
10754
10940
|
const edge = day.date === value.start ? "start" : day.date === value.end ? "end" : void 0;
|
|
10755
|
-
return /* @__PURE__ */ (0,
|
|
10941
|
+
return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
|
|
10756
10942
|
"button",
|
|
10757
10943
|
{
|
|
10758
10944
|
type: "button",
|
|
@@ -10774,13 +10960,13 @@ function DateRangePicker({
|
|
|
10774
10960
|
})
|
|
10775
10961
|
] })
|
|
10776
10962
|
] }, month)) }),
|
|
10777
|
-
/* @__PURE__ */ (0,
|
|
10778
|
-
rangeInvalid && /* @__PURE__ */ (0,
|
|
10963
|
+
/* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-date-range-picker__selection", "aria-live": "polite", children: announcement }),
|
|
10964
|
+
rangeInvalid && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
|
|
10779
10965
|
] });
|
|
10780
10966
|
}
|
|
10781
10967
|
|
|
10782
10968
|
// src/components/RelationshipGraph.tsx
|
|
10783
|
-
var
|
|
10969
|
+
var import_react64 = require("react");
|
|
10784
10970
|
|
|
10785
10971
|
// src/relationship-graph-model.ts
|
|
10786
10972
|
function boundRelationshipGraph(nodes, edges, maxNodes = 40) {
|
|
@@ -11261,10 +11447,10 @@ function layeredNeighbor(layout, currentId, key) {
|
|
|
11261
11447
|
}
|
|
11262
11448
|
|
|
11263
11449
|
// src/components/RelationshipGraphLayered.tsx
|
|
11264
|
-
var
|
|
11450
|
+
var import_react63 = require("react");
|
|
11265
11451
|
|
|
11266
11452
|
// src/components/RelationshipGraphList.tsx
|
|
11267
|
-
var
|
|
11453
|
+
var import_jsx_runtime89 = require("react/jsx-runtime");
|
|
11268
11454
|
function EquivalentRelationshipList({
|
|
11269
11455
|
nodes,
|
|
11270
11456
|
edges,
|
|
@@ -11275,19 +11461,19 @@ function EquivalentRelationshipList({
|
|
|
11275
11461
|
onOpenDetails
|
|
11276
11462
|
}) {
|
|
11277
11463
|
const labelById = new Map(nodes.map((node) => [node.id, node.label]));
|
|
11278
|
-
return /* @__PURE__ */ (0,
|
|
11279
|
-
/* @__PURE__ */ (0,
|
|
11280
|
-
/* @__PURE__ */ (0,
|
|
11464
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": labels.list, children: [
|
|
11465
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("h3", { children: labels.listHeading }),
|
|
11466
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("ul", { children: nodes.map((node) => {
|
|
11281
11467
|
const neighbors = relationshipNeighbors(node.id, edges).map((id) => labelById.get(id) ?? id);
|
|
11282
|
-
return /* @__PURE__ */ (0,
|
|
11283
|
-
/* @__PURE__ */ (0,
|
|
11284
|
-
/* @__PURE__ */ (0,
|
|
11285
|
-
node.type && /* @__PURE__ */ (0,
|
|
11286
|
-
/* @__PURE__ */ (0,
|
|
11468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("li", { "data-selected": selectedId === node.id || void 0, children: [
|
|
11469
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("button", { type: "button", onClick: () => onSelect(node.id), "aria-pressed": selectedId === node.id, children: [
|
|
11470
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("strong", { children: node.label }),
|
|
11471
|
+
node.type && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: node.type }),
|
|
11472
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { children: neighbors.length ? labels.connectedTo(neighbors.join(", ")) : labels.noConnections })
|
|
11287
11473
|
] }),
|
|
11288
|
-
/* @__PURE__ */ (0,
|
|
11289
|
-
onExpandNeighbors && /* @__PURE__ */ (0,
|
|
11290
|
-
onOpenDetails && /* @__PURE__ */ (0,
|
|
11474
|
+
/* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("span", { className: "uix-relationship-graph__list-actions", children: [
|
|
11475
|
+
onExpandNeighbors && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { type: "button", onClick: () => onExpandNeighbors(node), children: labels.expandNeighbors }),
|
|
11476
|
+
onOpenDetails && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { type: "button", onClick: () => onOpenDetails(node), children: labels.openDetails })
|
|
11291
11477
|
] })
|
|
11292
11478
|
] }, node.id);
|
|
11293
11479
|
}) })
|
|
@@ -11295,8 +11481,8 @@ function EquivalentRelationshipList({
|
|
|
11295
11481
|
}
|
|
11296
11482
|
|
|
11297
11483
|
// src/components/RelationshipGraphLayered.tsx
|
|
11298
|
-
var
|
|
11299
|
-
var
|
|
11484
|
+
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
11485
|
+
var EMPTY_IDS2 = /* @__PURE__ */ new Set();
|
|
11300
11486
|
var MIN_ZOOM = 0.4;
|
|
11301
11487
|
var MAX_ZOOM = 1.5;
|
|
11302
11488
|
var READABLE_ZOOM = 0.75;
|
|
@@ -11327,10 +11513,10 @@ function LayeredRelationshipGraph({
|
|
|
11327
11513
|
onOpenDetails,
|
|
11328
11514
|
maxNodes = 400,
|
|
11329
11515
|
density = "standard",
|
|
11330
|
-
highlightedNodeIds =
|
|
11331
|
-
conflictedNodeIds =
|
|
11332
|
-
highlightedEdgeIds =
|
|
11333
|
-
conflictedEdgeIds =
|
|
11516
|
+
highlightedNodeIds = EMPTY_IDS2,
|
|
11517
|
+
conflictedNodeIds = EMPTY_IDS2,
|
|
11518
|
+
highlightedEdgeIds = EMPTY_IDS2,
|
|
11519
|
+
conflictedEdgeIds = EMPTY_IDS2,
|
|
11334
11520
|
legend = [],
|
|
11335
11521
|
className,
|
|
11336
11522
|
labels,
|
|
@@ -11341,18 +11527,18 @@ function LayeredRelationshipGraph({
|
|
|
11341
11527
|
clusterThreshold,
|
|
11342
11528
|
expandedClusterIds,
|
|
11343
11529
|
onToggleCluster,
|
|
11344
|
-
dimmedNodeIds =
|
|
11530
|
+
dimmedNodeIds = EMPTY_IDS2,
|
|
11345
11531
|
edgeLabels = "auto",
|
|
11346
11532
|
showList = true,
|
|
11347
11533
|
height,
|
|
11348
11534
|
focusId,
|
|
11349
11535
|
onFocusChange
|
|
11350
11536
|
}) {
|
|
11351
|
-
const hintId = (0,
|
|
11352
|
-
const bounded = (0,
|
|
11353
|
-
const [localExpanded, setLocalExpanded] = (0,
|
|
11537
|
+
const hintId = (0, import_react63.useId)();
|
|
11538
|
+
const bounded = (0, import_react63.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
11539
|
+
const [localExpanded, setLocalExpanded] = (0, import_react63.useState)(EMPTY_IDS2);
|
|
11354
11540
|
const expanded = expandedClusterIds ?? localExpanded;
|
|
11355
|
-
const layout = (0,
|
|
11541
|
+
const layout = (0, import_react63.useMemo)(
|
|
11356
11542
|
() => layoutLayeredGraph(bounded.nodes, bounded.edges, {
|
|
11357
11543
|
...rootId !== void 0 ? { rootId } : {},
|
|
11358
11544
|
...clusterThreshold !== void 0 ? { clusterThreshold } : {},
|
|
@@ -11361,29 +11547,29 @@ function LayeredRelationshipGraph({
|
|
|
11361
11547
|
}),
|
|
11362
11548
|
[bounded, rootId, clusterThreshold, expanded, density]
|
|
11363
11549
|
);
|
|
11364
|
-
const itemById = (0,
|
|
11365
|
-
const viewportRef = (0,
|
|
11366
|
-
const itemRefs = (0,
|
|
11367
|
-
const [size, setSize] = (0,
|
|
11368
|
-
const [view, setView] = (0,
|
|
11369
|
-
const [animate, setAnimate] = (0,
|
|
11370
|
-
const [localFocus, setLocalFocus] = (0,
|
|
11371
|
-
const [hoverId, setHoverId] = (0,
|
|
11372
|
-
const viewRef = (0,
|
|
11550
|
+
const itemById = (0, import_react63.useMemo)(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
|
|
11551
|
+
const viewportRef = (0, import_react63.useRef)(null);
|
|
11552
|
+
const itemRefs = (0, import_react63.useRef)(/* @__PURE__ */ new Map());
|
|
11553
|
+
const [size, setSize] = (0, import_react63.useState)({ width: 0, height: 0 });
|
|
11554
|
+
const [view, setView] = (0, import_react63.useState)({ x: 0, y: 0, zoom: 1 });
|
|
11555
|
+
const [animate, setAnimate] = (0, import_react63.useState)(false);
|
|
11556
|
+
const [localFocus, setLocalFocus] = (0, import_react63.useState)(void 0);
|
|
11557
|
+
const [hoverId, setHoverId] = (0, import_react63.useState)(void 0);
|
|
11558
|
+
const viewRef = (0, import_react63.useRef)(view);
|
|
11373
11559
|
viewRef.current = view;
|
|
11374
|
-
const layoutRef = (0,
|
|
11560
|
+
const layoutRef = (0, import_react63.useRef)(layout);
|
|
11375
11561
|
layoutRef.current = layout;
|
|
11376
|
-
const pendingFocus = (0,
|
|
11377
|
-
const initialisedFor = (0,
|
|
11562
|
+
const pendingFocus = (0, import_react63.useRef)(void 0);
|
|
11563
|
+
const initialisedFor = (0, import_react63.useRef)(void 0);
|
|
11378
11564
|
const rootItemId = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
|
|
11379
11565
|
const requestedFocus = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : localFocus;
|
|
11380
11566
|
const focusedId = requestedFocus !== void 0 && itemById.has(requestedFocus) ? requestedFocus : rootItemId;
|
|
11381
11567
|
const selectedItemId = selectedId !== void 0 ? layout.itemOf[selectedId] : void 0;
|
|
11382
|
-
const activeIds = (0,
|
|
11568
|
+
const activeIds = (0, import_react63.useMemo)(
|
|
11383
11569
|
() => new Set([hoverId, selectedItemId].filter((id) => id !== void 0)),
|
|
11384
11570
|
[hoverId, selectedItemId]
|
|
11385
11571
|
);
|
|
11386
|
-
(0,
|
|
11572
|
+
(0, import_react63.useEffect)(() => {
|
|
11387
11573
|
const element = viewportRef.current;
|
|
11388
11574
|
if (!element) return;
|
|
11389
11575
|
const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
|
|
@@ -11393,18 +11579,18 @@ function LayeredRelationshipGraph({
|
|
|
11393
11579
|
observer.observe(element);
|
|
11394
11580
|
return () => observer.disconnect();
|
|
11395
11581
|
}, []);
|
|
11396
|
-
(0,
|
|
11582
|
+
(0, import_react63.useEffect)(() => {
|
|
11397
11583
|
if (size.width === 0) return;
|
|
11398
11584
|
const key = `${layout.rootId ?? ""}`;
|
|
11399
11585
|
if (initialisedFor.current === key) return;
|
|
11400
11586
|
initialisedFor.current = key;
|
|
11401
11587
|
setView(initialView(layout, size));
|
|
11402
11588
|
}, [layout, size]);
|
|
11403
|
-
const moveView = (0,
|
|
11589
|
+
const moveView = (0, import_react63.useCallback)((next, smooth) => {
|
|
11404
11590
|
setAnimate(smooth);
|
|
11405
11591
|
setView(next);
|
|
11406
11592
|
}, []);
|
|
11407
|
-
const ensureVisible = (0,
|
|
11593
|
+
const ensureVisible = (0, import_react63.useCallback)((id, smooth) => {
|
|
11408
11594
|
const element = viewportRef.current;
|
|
11409
11595
|
const item = layoutRef.current.items.find((candidate) => candidate.id === id);
|
|
11410
11596
|
if (!element || !item) return;
|
|
@@ -11423,7 +11609,7 @@ function LayeredRelationshipGraph({
|
|
|
11423
11609
|
else if (bottom > heightPx - FOCUS_MARGIN) nextY -= bottom - (heightPx - FOCUS_MARGIN);
|
|
11424
11610
|
if (nextX !== x || nextY !== y) moveView({ x: nextX, y: nextY, zoom }, smooth);
|
|
11425
11611
|
}, [moveView]);
|
|
11426
|
-
const focusItem = (0,
|
|
11612
|
+
const focusItem = (0, import_react63.useCallback)((id) => {
|
|
11427
11613
|
setLocalFocus(id);
|
|
11428
11614
|
onFocusChange?.(id);
|
|
11429
11615
|
requestAnimationFrame(() => {
|
|
@@ -11431,7 +11617,7 @@ function LayeredRelationshipGraph({
|
|
|
11431
11617
|
ensureVisible(id, true);
|
|
11432
11618
|
});
|
|
11433
11619
|
}, [ensureVisible, onFocusChange]);
|
|
11434
|
-
(0,
|
|
11620
|
+
(0, import_react63.useEffect)(() => {
|
|
11435
11621
|
const wanted = pendingFocus.current;
|
|
11436
11622
|
if (wanted !== void 0 && itemById.has(wanted)) {
|
|
11437
11623
|
pendingFocus.current = void 0;
|
|
@@ -11441,8 +11627,8 @@ function LayeredRelationshipGraph({
|
|
|
11441
11627
|
const controlledTarget = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : void 0;
|
|
11442
11628
|
const controlledPresent = controlledTarget !== void 0 && itemById.has(controlledTarget);
|
|
11443
11629
|
const controlledKey = `${controlledTarget ?? ""}|${controlledPresent}`;
|
|
11444
|
-
const lastControlledKey = (0,
|
|
11445
|
-
(0,
|
|
11630
|
+
const lastControlledKey = (0, import_react63.useRef)(controlledKey);
|
|
11631
|
+
(0, import_react63.useEffect)(() => {
|
|
11446
11632
|
if (lastControlledKey.current === controlledKey) return;
|
|
11447
11633
|
lastControlledKey.current = controlledKey;
|
|
11448
11634
|
if (!controlledPresent || controlledTarget === void 0) return;
|
|
@@ -11451,7 +11637,7 @@ function LayeredRelationshipGraph({
|
|
|
11451
11637
|
ensureVisible(controlledTarget, true);
|
|
11452
11638
|
});
|
|
11453
11639
|
}, [controlledKey, controlledTarget, controlledPresent, ensureVisible]);
|
|
11454
|
-
(0,
|
|
11640
|
+
(0, import_react63.useEffect)(() => {
|
|
11455
11641
|
const element = viewportRef.current;
|
|
11456
11642
|
if (!element) return;
|
|
11457
11643
|
const onWheel = (event) => {
|
|
@@ -11469,8 +11655,8 @@ function LayeredRelationshipGraph({
|
|
|
11469
11655
|
element.addEventListener("wheel", onWheel, { passive: false });
|
|
11470
11656
|
return () => element.removeEventListener("wheel", onWheel);
|
|
11471
11657
|
}, []);
|
|
11472
|
-
const pointers = (0,
|
|
11473
|
-
const pinchDistance = (0,
|
|
11658
|
+
const pointers = (0, import_react63.useRef)(/* @__PURE__ */ new Map());
|
|
11659
|
+
const pinchDistance = (0, import_react63.useRef)(void 0);
|
|
11474
11660
|
const onPointerDown = (event) => {
|
|
11475
11661
|
if (event.target.closest("button")) return;
|
|
11476
11662
|
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
@@ -11568,21 +11754,21 @@ function LayeredRelationshipGraph({
|
|
|
11568
11754
|
height: layout.height,
|
|
11569
11755
|
transform: `translate(${view.x}px, ${view.y}px) scale(${view.zoom})`
|
|
11570
11756
|
};
|
|
11571
|
-
return /* @__PURE__ */ (0,
|
|
11572
|
-
/* @__PURE__ */ (0,
|
|
11573
|
-
/* @__PURE__ */ (0,
|
|
11574
|
-
/* @__PURE__ */ (0,
|
|
11575
|
-
/* @__PURE__ */ (0,
|
|
11576
|
-
/* @__PURE__ */ (0,
|
|
11577
|
-
/* @__PURE__ */ (0,
|
|
11578
|
-
/* @__PURE__ */ (0,
|
|
11579
|
-
/* @__PURE__ */ (0,
|
|
11580
|
-
/* @__PURE__ */ (0,
|
|
11581
|
-
/* @__PURE__ */ (0,
|
|
11757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("section", { className: cx("uix-relationship-graph", "uix-relationship-graph--layered", density === "compact" && "uix-relationship-graph--compact", className), "aria-label": labels.graph, children: [
|
|
11758
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "uix-relationship-graph__toolbar", role: "group", "aria-label": labels.controls, children: [
|
|
11759
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => zoomBy(ZOOM_STEP), disabled: view.zoom >= MAX_ZOOM, children: labels.zoomIn }),
|
|
11760
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => zoomBy(1 / ZOOM_STEP), disabled: view.zoom <= MIN_ZOOM, children: labels.zoomOut }),
|
|
11761
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => moveView(fitView(layout, size), true), children: labels.fit }),
|
|
11762
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => moveView(initialView(layout, size), true), children: labels.reset }),
|
|
11763
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => panBy(PAN_STEP, 0), "aria-label": labels.panLeft, children: labels.left }),
|
|
11764
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => panBy(0, PAN_STEP), "aria-label": labels.panUp, children: labels.up }),
|
|
11765
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => panBy(0, -PAN_STEP), "aria-label": labels.panDown, children: labels.down }),
|
|
11766
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("button", { type: "button", onClick: () => panBy(-PAN_STEP, 0), "aria-label": labels.panRight, children: labels.right }),
|
|
11767
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(view.zoom * 100)) })
|
|
11582
11768
|
] }),
|
|
11583
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
11584
|
-
/* @__PURE__ */ (0,
|
|
11585
|
-
/* @__PURE__ */ (0,
|
|
11769
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
|
|
11770
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { id: hintId, className: "uix-visually-hidden", children: labels.keyboardHint }),
|
|
11771
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
11586
11772
|
"div",
|
|
11587
11773
|
{
|
|
11588
11774
|
ref: viewportRef,
|
|
@@ -11592,11 +11778,11 @@ function LayeredRelationshipGraph({
|
|
|
11592
11778
|
onPointerMove,
|
|
11593
11779
|
onPointerUp: onPointerEnd,
|
|
11594
11780
|
onPointerCancel: onPointerEnd,
|
|
11595
|
-
children: /* @__PURE__ */ (0,
|
|
11596
|
-
/* @__PURE__ */ (0,
|
|
11781
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "uix-relationship-graph__stage", style: stageStyle, "data-animate": animate || void 0, onTransitionEnd: () => setAnimate(false), children: [
|
|
11782
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "uix-relationship-graph__edges", width: layout.width, height: layout.height, "aria-hidden": "true", focusable: "false", children: layout.edges.map((edge) => {
|
|
11597
11783
|
const active = activeIds.has(edge.source) || activeIds.has(edge.target) || edge.edgeIds.some((id) => highlightedEdgeIds.has(id));
|
|
11598
11784
|
const angle = edge.arrowAngle * 180 / Math.PI;
|
|
11599
|
-
return /* @__PURE__ */ (0,
|
|
11785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
|
|
11600
11786
|
"g",
|
|
11601
11787
|
{
|
|
11602
11788
|
className: "uix-relationship-graph__link",
|
|
@@ -11606,15 +11792,15 @@ function LayeredRelationshipGraph({
|
|
|
11606
11792
|
"data-conflicted": edge.edgeIds.some((id) => conflictedEdgeIds.has(id)) || void 0,
|
|
11607
11793
|
"data-dimmed": dimmedNodeIds.has(edge.source) && dimmedNodeIds.has(edge.target) || void 0,
|
|
11608
11794
|
children: [
|
|
11609
|
-
/* @__PURE__ */ (0,
|
|
11610
|
-
edge.arrow !== "none" && /* @__PURE__ */ (0,
|
|
11611
|
-
showLabel(edge) && /* @__PURE__ */ (0,
|
|
11795
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: edge.path }),
|
|
11796
|
+
edge.arrow !== "none" && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("polygon", { points: arrowPoints, transform: `translate(${edge.arrowX} ${edge.arrowY}) rotate(${angle})` }),
|
|
11797
|
+
showLabel(edge) && /* @__PURE__ */ (0, import_jsx_runtime90.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_runtime90.jsx)("tspan", { x: edge.labelX, dy: index === 0 ? `${-(lines.length - 1) * 0.55}em` : "1.1em", children: line }, index)) })
|
|
11612
11798
|
]
|
|
11613
11799
|
},
|
|
11614
11800
|
edge.id
|
|
11615
11801
|
);
|
|
11616
11802
|
}) }),
|
|
11617
|
-
layout.columns.map((column) => /* @__PURE__ */ (0,
|
|
11803
|
+
layout.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
11618
11804
|
"div",
|
|
11619
11805
|
{
|
|
11620
11806
|
className: "uix-relationship-graph__column",
|
|
@@ -11624,17 +11810,17 @@ function LayeredRelationshipGraph({
|
|
|
11624
11810
|
},
|
|
11625
11811
|
column.depth
|
|
11626
11812
|
)),
|
|
11627
|
-
/* @__PURE__ */ (0,
|
|
11813
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.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) => {
|
|
11628
11814
|
const selected = item.id === selectedItemId;
|
|
11629
11815
|
const dimmed = item.node ? dimmedNodeIds.has(item.node.id) : item.cluster.members.every((member) => dimmedNodeIds.has(member.id));
|
|
11630
|
-
const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ (0,
|
|
11631
|
-
/* @__PURE__ */ (0,
|
|
11632
|
-
/* @__PURE__ */ (0,
|
|
11633
|
-
] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0,
|
|
11634
|
-
/* @__PURE__ */ (0,
|
|
11635
|
-
(item.node.type || item.node.description) && /* @__PURE__ */ (0,
|
|
11816
|
+
const body = item.cluster ? renderCluster?.(item.cluster) ?? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
|
|
11817
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "uix-relationship-graph__item-label", children: labels.cluster(item.cluster.members.length, item.cluster.type, item.cluster.edgeLabel) }),
|
|
11818
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "uix-relationship-graph__item-meta", children: labels.expandCluster })
|
|
11819
|
+
] }) : renderNode?.(item.node, { selected, dimmed }) ?? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
|
|
11820
|
+
/* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "uix-relationship-graph__item-label", children: item.node.label }),
|
|
11821
|
+
(item.node.type || item.node.description) && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "uix-relationship-graph__item-meta", children: [item.node.type, item.node.description].filter(Boolean).join(" \xB7 ") })
|
|
11636
11822
|
] });
|
|
11637
|
-
return /* @__PURE__ */ (0,
|
|
11823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
|
|
11638
11824
|
"button",
|
|
11639
11825
|
{
|
|
11640
11826
|
ref: (element) => {
|
|
@@ -11665,7 +11851,7 @@ function LayeredRelationshipGraph({
|
|
|
11665
11851
|
onPointerLeave: () => setHoverId((current) => current === item.id ? void 0 : current),
|
|
11666
11852
|
children: [
|
|
11667
11853
|
body,
|
|
11668
|
-
item.inCycle && /* @__PURE__ */ (0,
|
|
11854
|
+
item.inCycle && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "uix-relationship-graph__item-flag", "aria-hidden": "true", children: labels.cycle })
|
|
11669
11855
|
]
|
|
11670
11856
|
},
|
|
11671
11857
|
item.id
|
|
@@ -11673,7 +11859,7 @@ function LayeredRelationshipGraph({
|
|
|
11673
11859
|
}) }),
|
|
11674
11860
|
layout.items.filter((item) => item.expandedGroup).map((item) => {
|
|
11675
11861
|
const group = item.expandedGroup;
|
|
11676
|
-
return /* @__PURE__ */ (0,
|
|
11862
|
+
return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
11677
11863
|
"button",
|
|
11678
11864
|
{
|
|
11679
11865
|
type: "button",
|
|
@@ -11689,8 +11875,8 @@ function LayeredRelationshipGraph({
|
|
|
11689
11875
|
] })
|
|
11690
11876
|
}
|
|
11691
11877
|
),
|
|
11692
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
11693
|
-
showList && /* @__PURE__ */ (0,
|
|
11878
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("li", { "data-type": entry.id, children: entry.label }, entry.id)) }),
|
|
11879
|
+
showList && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
|
|
11694
11880
|
EquivalentRelationshipList,
|
|
11695
11881
|
{
|
|
11696
11882
|
nodes: bounded.nodes,
|
|
@@ -11709,7 +11895,7 @@ function LayeredRelationshipGraph({
|
|
|
11709
11895
|
}
|
|
11710
11896
|
|
|
11711
11897
|
// src/components/RelationshipGraph.tsx
|
|
11712
|
-
var
|
|
11898
|
+
var import_jsx_runtime91 = require("react/jsx-runtime");
|
|
11713
11899
|
var DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
|
|
11714
11900
|
graph: "Relationship graph",
|
|
11715
11901
|
controls: "Graph view controls",
|
|
@@ -11750,7 +11936,7 @@ var DEFAULT_RELATIONSHIP_GRAPH_LABELS = {
|
|
|
11750
11936
|
emptyTitle: "No relationships to display.",
|
|
11751
11937
|
emptyHint: "Adjust the neighborhood or filters to include a node."
|
|
11752
11938
|
};
|
|
11753
|
-
var
|
|
11939
|
+
var EMPTY_IDS3 = /* @__PURE__ */ new Set();
|
|
11754
11940
|
var EMPTY_LEGEND = [];
|
|
11755
11941
|
var RADIAL_SCALE_X = 6;
|
|
11756
11942
|
var RADIAL_SCALE_Y = 4;
|
|
@@ -11771,21 +11957,21 @@ function radialViewBox(nodes) {
|
|
|
11771
11957
|
return `${round(minX)} ${round(minY)} ${width} ${height}`;
|
|
11772
11958
|
}
|
|
11773
11959
|
function RelationshipGraph(props) {
|
|
11774
|
-
const labels = (0,
|
|
11960
|
+
const labels = (0, import_react64.useMemo)(() => ({ ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels }), [props.labels]);
|
|
11775
11961
|
const stateClass = cx("uix-relationship-graph uix-relationship-graph--state", props.className);
|
|
11776
|
-
if (props.loading) return /* @__PURE__ */ (0,
|
|
11962
|
+
if (props.loading) return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: stateClass, role: "status", children: labels.loading });
|
|
11777
11963
|
if (props.error) {
|
|
11778
|
-
return /* @__PURE__ */ (0,
|
|
11779
|
-
/* @__PURE__ */ (0,
|
|
11780
|
-
props.onRetry && /* @__PURE__ */ (0,
|
|
11964
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: stateClass, role: "alert", children: [
|
|
11965
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { children: props.error }),
|
|
11966
|
+
props.onRetry && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: props.onRetry, children: labels.retry })
|
|
11781
11967
|
] });
|
|
11782
11968
|
}
|
|
11783
|
-
if (props.nodes.length === 0) return /* @__PURE__ */ (0,
|
|
11784
|
-
/* @__PURE__ */ (0,
|
|
11785
|
-
/* @__PURE__ */ (0,
|
|
11969
|
+
if (props.nodes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: stateClass, children: [
|
|
11970
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { children: labels.emptyTitle }),
|
|
11971
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { children: labels.emptyHint })
|
|
11786
11972
|
] });
|
|
11787
|
-
if (props.layout === "layered") return /* @__PURE__ */ (0,
|
|
11788
|
-
return /* @__PURE__ */ (0,
|
|
11973
|
+
if (props.layout === "layered") return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(LayeredRelationshipGraph, { ...props, labels });
|
|
11974
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(RadialRelationshipGraph, { ...props, labels });
|
|
11789
11975
|
}
|
|
11790
11976
|
function RadialRelationshipGraph({
|
|
11791
11977
|
nodes,
|
|
@@ -11796,26 +11982,26 @@ function RadialRelationshipGraph({
|
|
|
11796
11982
|
onOpenDetails,
|
|
11797
11983
|
maxNodes = 40,
|
|
11798
11984
|
density = "standard",
|
|
11799
|
-
highlightedNodeIds =
|
|
11800
|
-
conflictedNodeIds =
|
|
11801
|
-
highlightedEdgeIds =
|
|
11802
|
-
conflictedEdgeIds =
|
|
11985
|
+
highlightedNodeIds = EMPTY_IDS3,
|
|
11986
|
+
conflictedNodeIds = EMPTY_IDS3,
|
|
11987
|
+
highlightedEdgeIds = EMPTY_IDS3,
|
|
11988
|
+
conflictedEdgeIds = EMPTY_IDS3,
|
|
11803
11989
|
legend = EMPTY_LEGEND,
|
|
11804
11990
|
className,
|
|
11805
11991
|
labels,
|
|
11806
11992
|
showList = true
|
|
11807
11993
|
}) {
|
|
11808
|
-
const bounded = (0,
|
|
11809
|
-
const positioned = (0,
|
|
11810
|
-
const typeColor = (0,
|
|
11994
|
+
const bounded = (0, import_react64.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
11995
|
+
const positioned = (0, import_react64.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
|
|
11996
|
+
const typeColor = (0, import_react64.useMemo)(
|
|
11811
11997
|
() => new Map(legend.map((item, index) => [item.id, `var(--uix-chart-${index % 8 + 1})`])),
|
|
11812
11998
|
[legend]
|
|
11813
11999
|
);
|
|
11814
|
-
const positionedById = (0,
|
|
11815
|
-
const [zoom, setZoom] = (0,
|
|
11816
|
-
const [pan, setPan] = (0,
|
|
11817
|
-
const [focusedId, setFocusedId] = (0,
|
|
11818
|
-
const svgRef = (0,
|
|
12000
|
+
const positionedById = (0, import_react64.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
|
|
12001
|
+
const [zoom, setZoom] = (0, import_react64.useState)(1);
|
|
12002
|
+
const [pan, setPan] = (0, import_react64.useState)({ x: 0, y: 0 });
|
|
12003
|
+
const [focusedId, setFocusedId] = (0, import_react64.useState)(selectedId ?? positioned[0]?.id);
|
|
12004
|
+
const svgRef = (0, import_react64.useRef)(null);
|
|
11819
12005
|
const select = (id) => {
|
|
11820
12006
|
const node = bounded.nodes.find((item) => item.id === id);
|
|
11821
12007
|
if (node) onSelect?.(node);
|
|
@@ -11838,25 +12024,25 @@ function RadialRelationshipGraph({
|
|
|
11838
12024
|
setZoom(1);
|
|
11839
12025
|
setPan({ x: 0, y: 0 });
|
|
11840
12026
|
};
|
|
11841
|
-
return /* @__PURE__ */ (0,
|
|
11842
|
-
/* @__PURE__ */ (0,
|
|
11843
|
-
/* @__PURE__ */ (0,
|
|
11844
|
-
/* @__PURE__ */ (0,
|
|
11845
|
-
/* @__PURE__ */ (0,
|
|
11846
|
-
/* @__PURE__ */ (0,
|
|
11847
|
-
/* @__PURE__ */ (0,
|
|
11848
|
-
/* @__PURE__ */ (0,
|
|
11849
|
-
/* @__PURE__ */ (0,
|
|
11850
|
-
/* @__PURE__ */ (0,
|
|
12027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": labels.graph, children: [
|
|
12028
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "uix-relationship-graph__toolbar", "aria-label": labels.controls, children: [
|
|
12029
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": labels.panLeft, children: labels.left }),
|
|
12030
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": labels.panUp, children: labels.up }),
|
|
12031
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": labels.panDown, children: labels.down }),
|
|
12032
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": labels.panRight, children: labels.right }),
|
|
12033
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": labels.zoomIn, children: labels.zoomIn }),
|
|
12034
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": labels.zoomOut, children: labels.zoomOut }),
|
|
12035
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { type: "button", onClick: reset, children: labels.reset }),
|
|
12036
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { "aria-live": "polite", children: labels.zoomLevel(Math.round(zoom * 100)) })
|
|
11851
12037
|
] }),
|
|
11852
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
11853
|
-
/* @__PURE__ */ (0,
|
|
12038
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "uix-relationship-graph__bounded", role: "status", children: labels.bounded(bounded.nodes.length, bounded.omittedNodeCount) }),
|
|
12039
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("svg", { ref: svgRef, viewBox: radialViewBox(positioned), role: "group", "aria-label": labels.graphSummary(bounded.nodes.length, bounded.edges.length), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
|
|
11854
12040
|
bounded.edges.map((edge) => {
|
|
11855
12041
|
const source = positionedById.get(edge.source);
|
|
11856
12042
|
const target = positionedById.get(edge.target);
|
|
11857
|
-
return /* @__PURE__ */ (0,
|
|
12043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime91.jsx)("title", { children: edge.label ?? edge.type ?? labels.relationship }) }, edge.id);
|
|
11858
12044
|
}),
|
|
11859
|
-
positioned.map((node) => /* @__PURE__ */ (0,
|
|
12045
|
+
positioned.map((node) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
|
|
11860
12046
|
"g",
|
|
11861
12047
|
{
|
|
11862
12048
|
transform: `translate(${node.x * RADIAL_SCALE_X} ${node.y * RADIAL_SCALE_Y})`,
|
|
@@ -11872,22 +12058,22 @@ function RadialRelationshipGraph({
|
|
|
11872
12058
|
onKeyDown: (event) => onNodeKeyDown(event, node.id),
|
|
11873
12059
|
onClick: () => select(node.id),
|
|
11874
12060
|
children: [
|
|
11875
|
-
/* @__PURE__ */ (0,
|
|
11876
|
-
/* @__PURE__ */ (0,
|
|
11877
|
-
/* @__PURE__ */ (0,
|
|
12061
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("title", { children: node.label }),
|
|
12062
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.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" }),
|
|
12063
|
+
/* @__PURE__ */ (0, import_jsx_runtime91.jsx)("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
|
|
11878
12064
|
]
|
|
11879
12065
|
},
|
|
11880
12066
|
node.id
|
|
11881
12067
|
))
|
|
11882
12068
|
] }) }) }),
|
|
11883
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
11884
|
-
showList && /* @__PURE__ */ (0,
|
|
12069
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": labels.legend, children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("li", { "data-type": item.id, style: { "--uix-graph-type-color": typeColor.get(item.id) }, children: item.label }, item.id)) }),
|
|
12070
|
+
showList && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(EquivalentRelationshipList, { nodes: bounded.nodes, edges: bounded.edges, selectedId, labels, onSelect: select, onExpandNeighbors, onOpenDetails })
|
|
11885
12071
|
] });
|
|
11886
12072
|
}
|
|
11887
12073
|
|
|
11888
12074
|
// src/components/MatchReview.tsx
|
|
11889
|
-
var
|
|
11890
|
-
var
|
|
12075
|
+
var import_react65 = require("react");
|
|
12076
|
+
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
11891
12077
|
var DEFAULT_MATCH_REVIEW_LABELS = {
|
|
11892
12078
|
region: "Match review",
|
|
11893
12079
|
loading: "Loading match candidates\u2026",
|
|
@@ -11949,11 +12135,11 @@ function MatchReview({
|
|
|
11949
12135
|
const plural = (n, one, many) => fillLabel(n === 1 ? one : many, { count: n });
|
|
11950
12136
|
const decisionLabel = { accepted: labels.decisionAccepted, dismissed: labels.decisionDismissed, split: labels.decisionSplit, other: labels.decisionOther };
|
|
11951
12137
|
const actionLabel = { accept: labels.accept, dismiss: labels.dismiss, split: labels.split, "pick-other": labels.pickOther };
|
|
11952
|
-
const [internalSelection, setInternalSelection] = (0,
|
|
11953
|
-
const [announcement, setAnnouncement] = (0,
|
|
11954
|
-
const [bulkPending, setBulkPending] = (0,
|
|
12138
|
+
const [internalSelection, setInternalSelection] = (0, import_react65.useState)(/* @__PURE__ */ new Set());
|
|
12139
|
+
const [announcement, setAnnouncement] = (0, import_react65.useState)("");
|
|
12140
|
+
const [bulkPending, setBulkPending] = (0, import_react65.useState)(false);
|
|
11955
12141
|
const selection = selectedIds ?? internalSelection;
|
|
11956
|
-
const pending = (0,
|
|
12142
|
+
const pending = (0, import_react65.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
|
|
11957
12143
|
const setSelection = (next) => {
|
|
11958
12144
|
if (selectedIds === void 0) setInternalSelection(next);
|
|
11959
12145
|
onSelectionChange?.(next);
|
|
@@ -11982,48 +12168,48 @@ function MatchReview({
|
|
|
11982
12168
|
setBulkPending(false);
|
|
11983
12169
|
}
|
|
11984
12170
|
};
|
|
11985
|
-
if (loading) return /* @__PURE__ */ (0,
|
|
11986
|
-
if (error) return /* @__PURE__ */ (0,
|
|
11987
|
-
/* @__PURE__ */ (0,
|
|
11988
|
-
onRetry && /* @__PURE__ */ (0,
|
|
12171
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: labels.loading });
|
|
12172
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
|
|
12173
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { children: error }),
|
|
12174
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
|
|
11989
12175
|
] });
|
|
11990
|
-
if (candidates.length === 0) return /* @__PURE__ */ (0,
|
|
11991
|
-
/* @__PURE__ */ (0,
|
|
11992
|
-
/* @__PURE__ */ (0,
|
|
12176
|
+
if (candidates.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
|
|
12177
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { children: labels.empty }),
|
|
12178
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { children: labels.emptyDetail })
|
|
11993
12179
|
] });
|
|
11994
|
-
return /* @__PURE__ */ (0,
|
|
11995
|
-
/* @__PURE__ */ (0,
|
|
11996
|
-
/* @__PURE__ */ (0,
|
|
11997
|
-
/* @__PURE__ */ (0,
|
|
11998
|
-
/* @__PURE__ */ (0,
|
|
12180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("section", { className: cx("uix-match-review", className), "aria-label": labels.region, children: [
|
|
12181
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-match-review__summary", children: [
|
|
12182
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { children: [
|
|
12183
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("strong", { children: incomingLabel }),
|
|
12184
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: fillLabel(labels.pendingOf, { pending: pending.length, total: candidates.length }) })
|
|
11999
12185
|
] }),
|
|
12000
|
-
/* @__PURE__ */ (0,
|
|
12001
|
-
/* @__PURE__ */ (0,
|
|
12186
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("span", { children: [
|
|
12187
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("b", { children: field.label }),
|
|
12002
12188
|
field.render?.(incoming[field.id], incoming) ?? valueText(incoming[field.id])
|
|
12003
12189
|
] }, field.id)) })
|
|
12004
12190
|
] }),
|
|
12005
|
-
onBulkDecision && /* @__PURE__ */ (0,
|
|
12006
|
-
/* @__PURE__ */ (0,
|
|
12007
|
-
/* @__PURE__ */ (0,
|
|
12008
|
-
/* @__PURE__ */ (0,
|
|
12191
|
+
onBulkDecision && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "uix-match-review__bulk", "aria-label": labels.bulk, children: [
|
|
12192
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { children: fillLabel(labels.selectedCount, { count: selection.size }) }),
|
|
12193
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.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 }),
|
|
12194
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.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 })
|
|
12009
12195
|
] }),
|
|
12010
|
-
/* @__PURE__ */ (0,
|
|
12011
|
-
/* @__PURE__ */ (0,
|
|
12012
|
-
/* @__PURE__ */ (0,
|
|
12013
|
-
/* @__PURE__ */ (0,
|
|
12014
|
-
/* @__PURE__ */ (0,
|
|
12015
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
12016
|
-
/* @__PURE__ */ (0,
|
|
12017
|
-
/* @__PURE__ */ (0,
|
|
12196
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("table", { className: "uix-table uix-match-review__table", children: [
|
|
12197
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("caption", { className: "uix-visually-hidden", children: labels.caption }),
|
|
12198
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("tr", { children: [
|
|
12199
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("th", { scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-visually-hidden", children: labels.select }) }),
|
|
12200
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("th", { scope: "col", children: labels.confidence }),
|
|
12201
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("th", { scope: "col", children: field.label }, field.id)),
|
|
12202
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("th", { scope: "col", children: labels.status }),
|
|
12203
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("th", { scope: "col", children: labels.actions })
|
|
12018
12204
|
] }) }),
|
|
12019
|
-
/* @__PURE__ */ (0,
|
|
12205
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("tbody", { children: candidates.map((candidate) => {
|
|
12020
12206
|
const resolved = candidate.status === "resolved";
|
|
12021
|
-
return /* @__PURE__ */ (0,
|
|
12022
|
-
/* @__PURE__ */ (0,
|
|
12023
|
-
/* @__PURE__ */ (0,
|
|
12024
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
12025
|
-
/* @__PURE__ */ (0,
|
|
12026
|
-
/* @__PURE__ */ (0,
|
|
12207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("tr", { "data-status": candidate.status ?? "pending", children: [
|
|
12208
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": fillLabel(labels.selectCandidate, { id: candidate.id }) }) }),
|
|
12209
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? labels.notScored : `${Math.round(candidate.confidence * 100)}%` }) }),
|
|
12210
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
|
|
12211
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ? decisionLabel[candidate.decision] : labels.resolved : labels.pending }) }),
|
|
12212
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
|
|
12027
12213
|
"button",
|
|
12028
12214
|
{
|
|
12029
12215
|
type: "button",
|
|
@@ -12037,12 +12223,12 @@ function MatchReview({
|
|
|
12037
12223
|
] }, candidate.id);
|
|
12038
12224
|
}) })
|
|
12039
12225
|
] }) }),
|
|
12040
|
-
/* @__PURE__ */ (0,
|
|
12226
|
+
/* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
12041
12227
|
] });
|
|
12042
12228
|
}
|
|
12043
12229
|
|
|
12044
12230
|
// src/components/MetricInput.tsx
|
|
12045
|
-
var
|
|
12231
|
+
var import_react66 = require("react");
|
|
12046
12232
|
|
|
12047
12233
|
// src/metric-model.ts
|
|
12048
12234
|
function decimals(value) {
|
|
@@ -12067,7 +12253,7 @@ function parseMetricValue(value) {
|
|
|
12067
12253
|
}
|
|
12068
12254
|
|
|
12069
12255
|
// src/components/MetricInput.tsx
|
|
12070
|
-
var
|
|
12256
|
+
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
12071
12257
|
var defaultMetricFormat = (input) => input == null ? "" : String(input);
|
|
12072
12258
|
function MetricInput({
|
|
12073
12259
|
value,
|
|
@@ -12086,11 +12272,11 @@ function MetricInput({
|
|
|
12086
12272
|
className,
|
|
12087
12273
|
id: providedId
|
|
12088
12274
|
}) {
|
|
12089
|
-
const generatedId = (0,
|
|
12275
|
+
const generatedId = (0, import_react66.useId)();
|
|
12090
12276
|
const id = providedId ?? generatedId;
|
|
12091
12277
|
const errorId = `${id}-error`;
|
|
12092
|
-
const [text, setText] = (0,
|
|
12093
|
-
(0,
|
|
12278
|
+
const [text, setText] = (0, import_react66.useState)(() => format(value));
|
|
12279
|
+
(0, import_react66.useEffect)(() => setText(format(value)), [value, format]);
|
|
12094
12280
|
const commit = (input) => {
|
|
12095
12281
|
const parsed = parse(input);
|
|
12096
12282
|
if (input.trim() === "" || parsed !== null) {
|
|
@@ -12116,10 +12302,10 @@ function MetricInput({
|
|
|
12116
12302
|
const parsed = parse(event.currentTarget.value);
|
|
12117
12303
|
setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
|
|
12118
12304
|
};
|
|
12119
|
-
return /* @__PURE__ */ (0,
|
|
12120
|
-
/* @__PURE__ */ (0,
|
|
12121
|
-
/* @__PURE__ */ (0,
|
|
12122
|
-
/* @__PURE__ */ (0,
|
|
12305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
|
|
12306
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("label", { className: "uix-field__label", htmlFor: id, children: label }),
|
|
12307
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "uix-metric-input__control", children: [
|
|
12308
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
|
|
12123
12309
|
Input,
|
|
12124
12310
|
{
|
|
12125
12311
|
id,
|
|
@@ -12138,22 +12324,22 @@ function MetricInput({
|
|
|
12138
12324
|
readOnly
|
|
12139
12325
|
}
|
|
12140
12326
|
),
|
|
12141
|
-
unit && /* @__PURE__ */ (0,
|
|
12142
|
-
/* @__PURE__ */ (0,
|
|
12143
|
-
/* @__PURE__ */ (0,
|
|
12144
|
-
/* @__PURE__ */ (0,
|
|
12327
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
|
|
12328
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "uix-metric-input__steps", children: [
|
|
12329
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
|
|
12330
|
+
/* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
|
|
12145
12331
|
] })
|
|
12146
12332
|
] }),
|
|
12147
|
-
unit && /* @__PURE__ */ (0,
|
|
12333
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
12148
12334
|
"Unit: ",
|
|
12149
12335
|
unit
|
|
12150
12336
|
] }),
|
|
12151
|
-
invalid && errorMessage && /* @__PURE__ */ (0,
|
|
12337
|
+
invalid && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
|
|
12152
12338
|
] });
|
|
12153
12339
|
}
|
|
12154
12340
|
|
|
12155
12341
|
// src/components/LicensePositionBar.tsx
|
|
12156
|
-
var
|
|
12342
|
+
var import_jsx_runtime94 = require("react/jsx-runtime");
|
|
12157
12343
|
var defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
|
|
12158
12344
|
function LicensePositionBar({
|
|
12159
12345
|
consumed,
|
|
@@ -12174,18 +12360,18 @@ function LicensePositionBar({
|
|
|
12174
12360
|
const percent = safeEntitled === 0 ? safeConsumed > 0 ? 100 : 0 : safeConsumed / safeEntitled * 100;
|
|
12175
12361
|
const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
|
|
12176
12362
|
const summary = `${consumedLabel}: ${format(safeConsumed)}. ${entitledLabel}: ${format(safeEntitled)}. ${over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}`}.`;
|
|
12177
|
-
return /* @__PURE__ */ (0,
|
|
12178
|
-
/* @__PURE__ */ (0,
|
|
12179
|
-
/* @__PURE__ */ (0,
|
|
12363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
|
|
12364
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-license-position__header", children: [
|
|
12365
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "uix-license-position__value", children: [
|
|
12180
12366
|
format(safeConsumed),
|
|
12181
12367
|
" / ",
|
|
12182
12368
|
format(safeEntitled)
|
|
12183
12369
|
] }),
|
|
12184
|
-
/* @__PURE__ */ (0,
|
|
12370
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
|
|
12185
12371
|
] }),
|
|
12186
|
-
/* @__PURE__ */ (0,
|
|
12187
|
-
/* @__PURE__ */ (0,
|
|
12188
|
-
over > 0 && /* @__PURE__ */ (0,
|
|
12372
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "uix-license-position__track", children: [
|
|
12373
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
|
|
12374
|
+
over > 0 && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
|
|
12189
12375
|
"span",
|
|
12190
12376
|
{
|
|
12191
12377
|
className: "uix-license-position__overflow",
|
|
@@ -12194,12 +12380,12 @@ function LicensePositionBar({
|
|
|
12194
12380
|
}
|
|
12195
12381
|
)
|
|
12196
12382
|
] }),
|
|
12197
|
-
/* @__PURE__ */ (0,
|
|
12383
|
+
/* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "uix-visually-hidden", children: summary })
|
|
12198
12384
|
] });
|
|
12199
12385
|
}
|
|
12200
12386
|
|
|
12201
12387
|
// src/components/BrandProfiles.tsx
|
|
12202
|
-
var
|
|
12388
|
+
var import_react68 = require("react");
|
|
12203
12389
|
|
|
12204
12390
|
// src/color-model.ts
|
|
12205
12391
|
var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
@@ -12268,8 +12454,8 @@ function meetsContrast(background, foreground, minimum = 4.5) {
|
|
|
12268
12454
|
}
|
|
12269
12455
|
|
|
12270
12456
|
// src/components/ColorPicker.tsx
|
|
12271
|
-
var
|
|
12272
|
-
var
|
|
12457
|
+
var import_react67 = require("react");
|
|
12458
|
+
var import_jsx_runtime95 = require("react/jsx-runtime");
|
|
12273
12459
|
var DEFAULT_COLOR_PICKER_LABELS = {
|
|
12274
12460
|
trigger: "{label}: {color}",
|
|
12275
12461
|
sample: "Aa",
|
|
@@ -12300,17 +12486,17 @@ function ColorPicker({
|
|
|
12300
12486
|
labels: labelOverrides
|
|
12301
12487
|
}) {
|
|
12302
12488
|
const labels = { ...DEFAULT_COLOR_PICKER_LABELS, ...labelOverrides };
|
|
12303
|
-
const id = (0,
|
|
12304
|
-
const triggerRef = (0,
|
|
12305
|
-
const dialogRef = (0,
|
|
12306
|
-
const [open, setOpen] = (0,
|
|
12489
|
+
const id = (0, import_react67.useId)();
|
|
12490
|
+
const triggerRef = (0, import_react67.useRef)(null);
|
|
12491
|
+
const dialogRef = (0, import_react67.useRef)(null);
|
|
12492
|
+
const [open, setOpen] = (0, import_react67.useState)(false);
|
|
12307
12493
|
const normalized = normalizeHex(value) ?? "#000000";
|
|
12308
|
-
const [hexText, setHexText] = (0,
|
|
12309
|
-
const hsv = (0,
|
|
12494
|
+
const [hexText, setHexText] = (0, import_react67.useState)(normalized);
|
|
12495
|
+
const hsv = (0, import_react67.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
|
|
12310
12496
|
const ratio = contrastRatio(normalized, foreground) ?? 0;
|
|
12311
12497
|
const passes = ratio >= minimumContrast;
|
|
12312
|
-
(0,
|
|
12313
|
-
(0,
|
|
12498
|
+
(0, import_react67.useEffect)(() => setHexText(normalized), [normalized]);
|
|
12499
|
+
(0, import_react67.useEffect)(() => {
|
|
12314
12500
|
if (!open) return;
|
|
12315
12501
|
const dialog = dialogRef.current;
|
|
12316
12502
|
dialog?.querySelector("input,button")?.focus();
|
|
@@ -12353,8 +12539,8 @@ function ColorPicker({
|
|
|
12353
12539
|
if (next) onChange(next);
|
|
12354
12540
|
};
|
|
12355
12541
|
const sampleStyle = { backgroundColor: normalized };
|
|
12356
|
-
return /* @__PURE__ */ (0,
|
|
12357
|
-
/* @__PURE__ */ (0,
|
|
12542
|
+
return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: cx("uix-color-picker", className), children: [
|
|
12543
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
|
|
12358
12544
|
"button",
|
|
12359
12545
|
{
|
|
12360
12546
|
ref: triggerRef,
|
|
@@ -12366,12 +12552,12 @@ function ColorPicker({
|
|
|
12366
12552
|
onClick: () => setOpen((current) => !current),
|
|
12367
12553
|
disabled,
|
|
12368
12554
|
children: [
|
|
12369
|
-
/* @__PURE__ */ (0,
|
|
12370
|
-
/* @__PURE__ */ (0,
|
|
12555
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
|
|
12556
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { children: normalized })
|
|
12371
12557
|
]
|
|
12372
12558
|
}
|
|
12373
12559
|
),
|
|
12374
|
-
open && /* @__PURE__ */ (0,
|
|
12560
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
|
|
12375
12561
|
"div",
|
|
12376
12562
|
{
|
|
12377
12563
|
ref: dialogRef,
|
|
@@ -12382,55 +12568,55 @@ function ColorPicker({
|
|
|
12382
12568
|
className: "uix-color-picker__popover",
|
|
12383
12569
|
onKeyDown: onDialogKeyDown,
|
|
12384
12570
|
children: [
|
|
12385
|
-
/* @__PURE__ */ (0,
|
|
12386
|
-
/* @__PURE__ */ (0,
|
|
12571
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { style: { color: foreground }, children: labels.sample }) }),
|
|
12572
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
12387
12573
|
labels.hue,
|
|
12388
12574
|
" ",
|
|
12389
|
-
/* @__PURE__ */ (0,
|
|
12575
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("span", { children: [
|
|
12390
12576
|
Math.round(hsv.h),
|
|
12391
12577
|
"\xB0"
|
|
12392
12578
|
] }),
|
|
12393
|
-
/* @__PURE__ */ (0,
|
|
12579
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
|
|
12394
12580
|
] }),
|
|
12395
|
-
/* @__PURE__ */ (0,
|
|
12581
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
12396
12582
|
labels.saturation,
|
|
12397
12583
|
" ",
|
|
12398
|
-
/* @__PURE__ */ (0,
|
|
12584
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("span", { children: [
|
|
12399
12585
|
Math.round(hsv.s * 100),
|
|
12400
12586
|
"%"
|
|
12401
12587
|
] }),
|
|
12402
|
-
/* @__PURE__ */ (0,
|
|
12588
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
|
|
12403
12589
|
] }),
|
|
12404
|
-
/* @__PURE__ */ (0,
|
|
12590
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
12405
12591
|
labels.brightness,
|
|
12406
12592
|
" ",
|
|
12407
|
-
/* @__PURE__ */ (0,
|
|
12593
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("span", { children: [
|
|
12408
12594
|
Math.round(hsv.v * 100),
|
|
12409
12595
|
"%"
|
|
12410
12596
|
] }),
|
|
12411
|
-
/* @__PURE__ */ (0,
|
|
12597
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
|
|
12412
12598
|
] }),
|
|
12413
|
-
/* @__PURE__ */ (0,
|
|
12599
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("label", { className: "uix-color-picker__hex", children: [
|
|
12414
12600
|
labels.hex,
|
|
12415
|
-
/* @__PURE__ */ (0,
|
|
12416
|
-
/* @__PURE__ */ (0,
|
|
12601
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
|
|
12602
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
|
|
12417
12603
|
if (event.key === "Enter") commitHex();
|
|
12418
12604
|
}, "aria-invalid": !normalizeHex(hexText) }),
|
|
12419
|
-
/* @__PURE__ */ (0,
|
|
12605
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: labels.set })
|
|
12420
12606
|
] })
|
|
12421
12607
|
] }),
|
|
12422
|
-
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0,
|
|
12423
|
-
presets.length > 0 && /* @__PURE__ */ (0,
|
|
12424
|
-
/* @__PURE__ */ (0,
|
|
12425
|
-
/* @__PURE__ */ (0,
|
|
12608
|
+
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "uix-color-picker__palettes", children: [
|
|
12609
|
+
presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("fieldset", { children: [
|
|
12610
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("legend", { children: labels.presets }),
|
|
12611
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.usePreset, { color }) }, color)) })
|
|
12426
12612
|
] }),
|
|
12427
|
-
recent.length > 0 && /* @__PURE__ */ (0,
|
|
12428
|
-
/* @__PURE__ */ (0,
|
|
12429
|
-
/* @__PURE__ */ (0,
|
|
12613
|
+
recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("fieldset", { children: [
|
|
12614
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("legend", { children: labels.recent }),
|
|
12615
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": fillLabel(labels.useRecent, { color }) }, color)) })
|
|
12430
12616
|
] })
|
|
12431
12617
|
] }),
|
|
12432
|
-
/* @__PURE__ */ (0,
|
|
12433
|
-
/* @__PURE__ */ (0,
|
|
12618
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.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 }) }),
|
|
12619
|
+
/* @__PURE__ */ (0, import_jsx_runtime95.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: labels.done })
|
|
12434
12620
|
]
|
|
12435
12621
|
}
|
|
12436
12622
|
)
|
|
@@ -12438,7 +12624,7 @@ function ColorPicker({
|
|
|
12438
12624
|
}
|
|
12439
12625
|
|
|
12440
12626
|
// src/components/BrandProfiles.tsx
|
|
12441
|
-
var
|
|
12627
|
+
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
12442
12628
|
var PROFILE_PROPERTIES = {
|
|
12443
12629
|
brand: "--uix-brand",
|
|
12444
12630
|
brandForeground: "--uix-brand-fg",
|
|
@@ -12530,7 +12716,7 @@ function BrandProfileEditor({
|
|
|
12530
12716
|
labels: labelOverrides
|
|
12531
12717
|
}) {
|
|
12532
12718
|
const labels = { ...DEFAULT_BRAND_PROFILE_EDITOR_LABELS, ...labelOverrides };
|
|
12533
|
-
const [announcement, setAnnouncement] = (0,
|
|
12719
|
+
const [announcement, setAnnouncement] = (0, import_react68.useState)("");
|
|
12534
12720
|
const update = (patch) => onChange({ ...value, ...patch });
|
|
12535
12721
|
const apply = () => {
|
|
12536
12722
|
if (applyTarget !== null) applyBrandProfile(value, applyTarget);
|
|
@@ -12547,54 +12733,54 @@ function BrandProfileEditor({
|
|
|
12547
12733
|
...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
|
|
12548
12734
|
...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
|
|
12549
12735
|
};
|
|
12550
|
-
return /* @__PURE__ */ (0,
|
|
12551
|
-
/* @__PURE__ */ (0,
|
|
12552
|
-
profiles.length > 0 && /* @__PURE__ */ (0,
|
|
12736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": labels.region, children: [
|
|
12737
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-brand-profiles__form", children: [
|
|
12738
|
+
profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { className: "uix-field__label", children: [
|
|
12553
12739
|
labels.profile,
|
|
12554
|
-
/* @__PURE__ */ (0,
|
|
12740
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("select", { className: "uix-select", value: value.id, onChange: (event) => {
|
|
12555
12741
|
const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
|
|
12556
12742
|
if (selected) onSelectProfile?.(selected);
|
|
12557
|
-
}, children: profiles.map((profile) => /* @__PURE__ */ (0,
|
|
12743
|
+
}, children: profiles.map((profile) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("option", { value: profile.id, children: profile.name }, profile.id)) })
|
|
12558
12744
|
] }),
|
|
12559
|
-
/* @__PURE__ */ (0,
|
|
12745
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { className: "uix-field__label", children: [
|
|
12560
12746
|
labels.name,
|
|
12561
|
-
/* @__PURE__ */ (0,
|
|
12747
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
|
|
12562
12748
|
] }),
|
|
12563
|
-
/* @__PURE__ */ (0,
|
|
12564
|
-
/* @__PURE__ */ (0,
|
|
12749
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
|
|
12750
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { children: [
|
|
12565
12751
|
labels.brand,
|
|
12566
|
-
/* @__PURE__ */ (0,
|
|
12752
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ColorPicker, { label: labels.brandColor, value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
|
|
12567
12753
|
] }),
|
|
12568
|
-
/* @__PURE__ */ (0,
|
|
12754
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { children: [
|
|
12569
12755
|
labels.onBrand,
|
|
12570
|
-
/* @__PURE__ */ (0,
|
|
12756
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ColorPicker, { label: labels.onBrandColor, value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
|
|
12571
12757
|
] })
|
|
12572
12758
|
] }),
|
|
12573
|
-
/* @__PURE__ */ (0,
|
|
12759
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { className: "uix-field__label", children: [
|
|
12574
12760
|
labels.bodyFont,
|
|
12575
|
-
/* @__PURE__ */ (0,
|
|
12761
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
|
|
12576
12762
|
] }),
|
|
12577
|
-
/* @__PURE__ */ (0,
|
|
12763
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { className: "uix-field__label", children: [
|
|
12578
12764
|
labels.headingFont,
|
|
12579
|
-
/* @__PURE__ */ (0,
|
|
12765
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
|
|
12580
12766
|
] }),
|
|
12581
|
-
/* @__PURE__ */ (0,
|
|
12767
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
|
|
12582
12768
|
labels.logoFile,
|
|
12583
|
-
/* @__PURE__ */ (0,
|
|
12769
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
|
|
12584
12770
|
] }),
|
|
12585
|
-
/* @__PURE__ */ (0,
|
|
12586
|
-
/* @__PURE__ */ (0,
|
|
12771
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: labels.apply }),
|
|
12772
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
12587
12773
|
] }),
|
|
12588
|
-
/* @__PURE__ */ (0,
|
|
12589
|
-
/* @__PURE__ */ (0,
|
|
12590
|
-
value.logo ? /* @__PURE__ */ (0,
|
|
12591
|
-
/* @__PURE__ */ (0,
|
|
12774
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": fillLabel(labels.preview, { name: value.name }), children: [
|
|
12775
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
|
|
12776
|
+
value.logo ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: labels.logoPlaceholder }),
|
|
12777
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("strong", { children: value.name || labels.previewTitleFallback })
|
|
12592
12778
|
] }),
|
|
12593
|
-
/* @__PURE__ */ (0,
|
|
12594
|
-
/* @__PURE__ */ (0,
|
|
12595
|
-
/* @__PURE__ */ (0,
|
|
12596
|
-
/* @__PURE__ */ (0,
|
|
12597
|
-
/* @__PURE__ */ (0,
|
|
12779
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
|
|
12780
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("h3", { children: labels.previewHeading }),
|
|
12781
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { children: labels.previewBody }),
|
|
12782
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: labels.previewPrimary }),
|
|
12783
|
+
/* @__PURE__ */ (0, import_jsx_runtime96.jsx)("a", { href: "#brand-profile-preview", children: labels.previewLink })
|
|
12598
12784
|
] })
|
|
12599
12785
|
] })
|
|
12600
12786
|
] });
|
|
@@ -12602,7 +12788,7 @@ function BrandProfileEditor({
|
|
|
12602
12788
|
var BrandProfiles = BrandProfileEditor;
|
|
12603
12789
|
|
|
12604
12790
|
// src/components/DiffViewer.tsx
|
|
12605
|
-
var
|
|
12791
|
+
var import_react69 = require("react");
|
|
12606
12792
|
|
|
12607
12793
|
// src/diff-model.ts
|
|
12608
12794
|
function isJsonObject(value) {
|
|
@@ -12653,7 +12839,7 @@ function summarizeDiff(entries, resolutions = {}) {
|
|
|
12653
12839
|
}
|
|
12654
12840
|
|
|
12655
12841
|
// src/components/DiffViewer.tsx
|
|
12656
|
-
var
|
|
12842
|
+
var import_jsx_runtime97 = require("react/jsx-runtime");
|
|
12657
12843
|
var DEFAULT_DIFF_VIEWER_LABELS = {
|
|
12658
12844
|
base: "Base",
|
|
12659
12845
|
current: "Current",
|
|
@@ -12698,33 +12884,33 @@ function DiffViewer({
|
|
|
12698
12884
|
const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...labelOverrides };
|
|
12699
12885
|
const resolutionLabel = { accept: labels.resolutionAccept, skip: labels.resolutionSkip, pending: labels.resolutionPending };
|
|
12700
12886
|
const buttonSize = controlSize === "md" ? void 0 : `uix-btn--${controlSize}`;
|
|
12701
|
-
const id = (0,
|
|
12702
|
-
const entries = (0,
|
|
12703
|
-
const [internalResolutions, setInternalResolutions] = (0,
|
|
12887
|
+
const id = (0, import_react69.useId)();
|
|
12888
|
+
const entries = (0, import_react69.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
|
|
12889
|
+
const [internalResolutions, setInternalResolutions] = (0, import_react69.useState)({});
|
|
12704
12890
|
const resolutions = controlledResolutions ?? internalResolutions;
|
|
12705
12891
|
const summary = summarizeDiff(entries, resolutions);
|
|
12706
12892
|
const resolve = (path, resolution) => {
|
|
12707
12893
|
if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
|
|
12708
12894
|
onResolutionChange?.(path, resolution);
|
|
12709
12895
|
};
|
|
12710
|
-
if (entries.length === 0) return /* @__PURE__ */ (0,
|
|
12711
|
-
/* @__PURE__ */ (0,
|
|
12712
|
-
/* @__PURE__ */ (0,
|
|
12896
|
+
if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": labels.region, children: [
|
|
12897
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("h3", { children: labels.noDifferences }),
|
|
12898
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { children: labels.noDifferencesDetail })
|
|
12713
12899
|
] });
|
|
12714
|
-
return /* @__PURE__ */ (0,
|
|
12715
|
-
/* @__PURE__ */ (0,
|
|
12716
|
-
GROUPS.map((kind) => /* @__PURE__ */ (0,
|
|
12717
|
-
/* @__PURE__ */ (0,
|
|
12900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": labels.region, "data-control-size": controlSize, children: [
|
|
12901
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "uix-diff-viewer__summary", role: "group", "aria-label": labels.summary, children: [
|
|
12902
|
+
GROUPS.map((kind) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { children: [
|
|
12903
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("b", { children: summary[kind] }),
|
|
12718
12904
|
" ",
|
|
12719
12905
|
labels[kind].toLowerCase()
|
|
12720
12906
|
] }, kind)),
|
|
12721
|
-
/* @__PURE__ */ (0,
|
|
12722
|
-
/* @__PURE__ */ (0,
|
|
12907
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { children: [
|
|
12908
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("b", { children: summary.resolved }),
|
|
12723
12909
|
" ",
|
|
12724
12910
|
labels.resolved
|
|
12725
12911
|
] }),
|
|
12726
|
-
/* @__PURE__ */ (0,
|
|
12727
|
-
/* @__PURE__ */ (0,
|
|
12912
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("span", { children: [
|
|
12913
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("b", { children: summary.pending }),
|
|
12728
12914
|
" ",
|
|
12729
12915
|
labels.pending
|
|
12730
12916
|
] })
|
|
@@ -12732,38 +12918,38 @@ function DiffViewer({
|
|
|
12732
12918
|
GROUPS.map((kind) => {
|
|
12733
12919
|
const grouped = entries.filter((entry) => entry.kind === kind);
|
|
12734
12920
|
if (!grouped.length) return null;
|
|
12735
|
-
return /* @__PURE__ */ (0,
|
|
12736
|
-
/* @__PURE__ */ (0,
|
|
12921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${kind}`, children: [
|
|
12922
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("h3", { id: `${id}-${kind}`, children: [
|
|
12737
12923
|
labels[kind],
|
|
12738
12924
|
" ",
|
|
12739
|
-
/* @__PURE__ */ (0,
|
|
12925
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { children: grouped.length })
|
|
12740
12926
|
] }),
|
|
12741
12927
|
grouped.map((entry) => {
|
|
12742
12928
|
const resolution = resolutions[entry.path] ?? "pending";
|
|
12743
|
-
return /* @__PURE__ */ (0,
|
|
12744
|
-
/* @__PURE__ */ (0,
|
|
12745
|
-
/* @__PURE__ */ (0,
|
|
12746
|
-
/* @__PURE__ */ (0,
|
|
12929
|
+
return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
|
|
12930
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("summary", { children: [
|
|
12931
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("code", { children: entry.path }),
|
|
12932
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolutionLabel[resolution] })
|
|
12747
12933
|
] }),
|
|
12748
|
-
/* @__PURE__ */ (0,
|
|
12749
|
-
/* @__PURE__ */ (0,
|
|
12750
|
-
/* @__PURE__ */ (0,
|
|
12934
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { role: "region", "aria-label": fillLabel(labels.valueFor, { version: labels[version], path: entry.path }), children: [
|
|
12935
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("strong", { children: labels[version] }),
|
|
12936
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("pre", { children: renderValue(entry[version], labels.notPresent) })
|
|
12751
12937
|
] }, version)) }),
|
|
12752
|
-
/* @__PURE__ */ (0,
|
|
12753
|
-
/* @__PURE__ */ (0,
|
|
12754
|
-
/* @__PURE__ */ (0,
|
|
12755
|
-
/* @__PURE__ */ (0,
|
|
12938
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "uix-diff-viewer__actions", role: "group", "aria-label": fillLabel(labels.resolve, { path: entry.path }), children: [
|
|
12939
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.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 }),
|
|
12940
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.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 }),
|
|
12941
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.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 })
|
|
12756
12942
|
] })
|
|
12757
12943
|
] }, entry.path);
|
|
12758
12944
|
})
|
|
12759
12945
|
] }, kind);
|
|
12760
12946
|
}),
|
|
12761
|
-
/* @__PURE__ */ (0,
|
|
12947
|
+
/* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: fillLabel(labels.progress, { resolved: summary.resolved, total: entries.length }) })
|
|
12762
12948
|
] });
|
|
12763
12949
|
}
|
|
12764
12950
|
|
|
12765
12951
|
// src/components/TextDiff.tsx
|
|
12766
|
-
var
|
|
12952
|
+
var import_react70 = require("react");
|
|
12767
12953
|
|
|
12768
12954
|
// src/text-diff-model.ts
|
|
12769
12955
|
var WORD_TOKENS = /\s+|[\p{L}\p{M}\p{N}_]+|[^\s\p{L}\p{M}\p{N}_]/gu;
|
|
@@ -13023,7 +13209,7 @@ function textDiffRows(result, { context } = {}) {
|
|
|
13023
13209
|
}
|
|
13024
13210
|
|
|
13025
13211
|
// src/components/TextDiff.tsx
|
|
13026
|
-
var
|
|
13212
|
+
var import_jsx_runtime98 = require("react/jsx-runtime");
|
|
13027
13213
|
var DEFAULT_TEXT_DIFF_LABELS = {
|
|
13028
13214
|
before: "Before",
|
|
13029
13215
|
after: "After",
|
|
@@ -13036,47 +13222,47 @@ var DEFAULT_TEXT_DIFF_LABELS = {
|
|
|
13036
13222
|
};
|
|
13037
13223
|
function Marked({ segments, side, labels, whole }) {
|
|
13038
13224
|
const Tag = side === "before" ? "del" : "ins";
|
|
13039
|
-
return /* @__PURE__ */ (0,
|
|
13040
|
-
/* @__PURE__ */ (0,
|
|
13225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_jsx_runtime98.Fragment, { children: segments.map((segment, i) => segment.changed ? /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(Tag, { "data-whole": whole || void 0, children: [
|
|
13226
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
13041
13227
|
side === "before" ? labels.removed : labels.added,
|
|
13042
13228
|
": "
|
|
13043
13229
|
] }),
|
|
13044
13230
|
segment.text
|
|
13045
|
-
] }, i) : /* @__PURE__ */ (0,
|
|
13231
|
+
] }, i) : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react70.Fragment, { children: segment.text }, i)) });
|
|
13046
13232
|
}
|
|
13047
13233
|
function Cell({ line, side, kind, labels }) {
|
|
13048
|
-
if (!line) return /* @__PURE__ */ (0,
|
|
13234
|
+
if (!line) return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__cell", "data-side": side, "data-empty": "", "aria-hidden": "true" });
|
|
13049
13235
|
const changed = kind !== "equal";
|
|
13050
|
-
return /* @__PURE__ */ (0,
|
|
13051
|
-
/* @__PURE__ */ (0,
|
|
13052
|
-
/* @__PURE__ */ (0,
|
|
13053
|
-
/* @__PURE__ */ (0,
|
|
13236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "uix-text-diff__cell", "data-side": side, "data-kind": changed ? side === "before" ? "delete" : "insert" : "equal", children: [
|
|
13237
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "uix-text-diff__num", "aria-hidden": "true", children: line.number }),
|
|
13238
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "uix-text-diff__sign", "aria-hidden": "true", children: changed ? side === "before" ? "\u2212" : "+" : "" }),
|
|
13239
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { className: "uix-text-diff__text", children: line.segments.length === 1 && line.segments[0].text === "" ? "\u200B" : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Marked, { segments: line.segments, side, labels, whole: line.segments.length === 1 }) })
|
|
13054
13240
|
] });
|
|
13055
13241
|
}
|
|
13056
13242
|
function Rows({ rows, view, labels, focusFirst }) {
|
|
13057
|
-
const [open, setOpen] = (0,
|
|
13058
|
-
const first = (0,
|
|
13059
|
-
(0,
|
|
13243
|
+
const [open, setOpen] = (0, import_react70.useState)(() => /* @__PURE__ */ new Set());
|
|
13244
|
+
const first = (0, import_react70.useRef)(null);
|
|
13245
|
+
(0, import_react70.useEffect)(() => {
|
|
13060
13246
|
if (focusFirst) first.current?.focus();
|
|
13061
13247
|
}, [focusFirst]);
|
|
13062
13248
|
const firstProps = (index) => focusFirst && index === 0 ? { ref: first, tabIndex: -1 } : {};
|
|
13063
|
-
return /* @__PURE__ */ (0,
|
|
13249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_jsx_runtime98.Fragment, { children: rows.map((row, index) => {
|
|
13064
13250
|
if (row.kind === "fold") {
|
|
13065
|
-
if (open.has(index)) return /* @__PURE__ */ (0,
|
|
13066
|
-
return /* @__PURE__ */ (0,
|
|
13251
|
+
if (open.has(index)) return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Rows, { rows: row.rows, view, labels, focusFirst: true }, index);
|
|
13252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__row", "data-kind": "fold", children: /* @__PURE__ */ (0, import_jsx_runtime98.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);
|
|
13067
13253
|
}
|
|
13068
13254
|
const before = row.kind === "insert" ? void 0 : row.before;
|
|
13069
13255
|
const after = row.kind === "delete" ? void 0 : row.after;
|
|
13070
13256
|
if (view === "unified") {
|
|
13071
|
-
if (row.kind === "equal") return /* @__PURE__ */ (0,
|
|
13072
|
-
return /* @__PURE__ */ (0,
|
|
13073
|
-
before && /* @__PURE__ */ (0,
|
|
13074
|
-
after && /* @__PURE__ */ (0,
|
|
13257
|
+
if (row.kind === "equal") return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__row", "data-kind": "equal", ...firstProps(index), children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Cell, { line: after, side: "after", kind: "equal", labels }) }, index);
|
|
13258
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_react70.Fragment, { children: [
|
|
13259
|
+
before && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__row", "data-kind": "delete", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Cell, { line: before, side: "before", kind: row.kind, labels }) }),
|
|
13260
|
+
after && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__row", "data-kind": "insert", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Cell, { line: after, side: "after", kind: row.kind, labels }) })
|
|
13075
13261
|
] }, index);
|
|
13076
13262
|
}
|
|
13077
|
-
return /* @__PURE__ */ (0,
|
|
13078
|
-
/* @__PURE__ */ (0,
|
|
13079
|
-
/* @__PURE__ */ (0,
|
|
13263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "uix-text-diff__row", "data-kind": row.kind, ...firstProps(index), children: [
|
|
13264
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Cell, { line: before, side: "before", kind: row.kind, labels }),
|
|
13265
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Cell, { line: after, side: "after", kind: row.kind, labels })
|
|
13080
13266
|
] }, index);
|
|
13081
13267
|
}) });
|
|
13082
13268
|
}
|
|
@@ -13098,41 +13284,41 @@ function TextDiff({
|
|
|
13098
13284
|
}) {
|
|
13099
13285
|
const uixLabels = useUixLabels();
|
|
13100
13286
|
const labels = { ...DEFAULT_TEXT_DIFF_LABELS, ...uixLabels.textDiff, ...labelOverrides };
|
|
13101
|
-
const result = (0,
|
|
13102
|
-
const rows = (0,
|
|
13103
|
-
const heads = /* @__PURE__ */ (0,
|
|
13104
|
-
/* @__PURE__ */ (0,
|
|
13105
|
-
view === "unified" && /* @__PURE__ */ (0,
|
|
13287
|
+
const result = (0, import_react70.useMemo)(() => diffText(before, after, { granularity, maxTokens, maxEdits }), [before, after, granularity, maxTokens, maxEdits]);
|
|
13288
|
+
const rows = (0, import_react70.useMemo)(() => granularity === "line" && result.status === "ok" ? textDiffRows(result, { context }) : [], [result, granularity, context]);
|
|
13289
|
+
const heads = /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "uix-text-diff__heads", "aria-hidden": view === "unified" || void 0, children: [
|
|
13290
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "uix-text-diff__head", "data-side": "before", children: [
|
|
13291
|
+
view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { "aria-hidden": "true", children: "\u2212 " }),
|
|
13106
13292
|
beforeLabel ?? labels.before
|
|
13107
13293
|
] }),
|
|
13108
|
-
/* @__PURE__ */ (0,
|
|
13109
|
-
view === "unified" && /* @__PURE__ */ (0,
|
|
13294
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { className: "uix-text-diff__head", "data-side": "after", children: [
|
|
13295
|
+
view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { "aria-hidden": "true", children: "+ " }),
|
|
13110
13296
|
afterLabel ?? labels.after
|
|
13111
13297
|
] })
|
|
13112
13298
|
] });
|
|
13113
13299
|
const unchanged = result.status === "ok" && result.added === 0 && result.removed === 0 && result.ops.every((op) => op.type === "equal");
|
|
13114
13300
|
let body;
|
|
13115
|
-
if (result.status === "too-large") body = /* @__PURE__ */ (0,
|
|
13116
|
-
else if (granularity === "line") body = /* @__PURE__ */ (0,
|
|
13301
|
+
if (result.status === "too-large") body = /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__note", children: labels.tooLarge });
|
|
13302
|
+
else if (granularity === "line") body = /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__body", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Rows, { rows, view, labels }) });
|
|
13117
13303
|
else {
|
|
13118
|
-
const prose = (side2) => /* @__PURE__ */ (0,
|
|
13304
|
+
const prose = (side2) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__prose", "data-side": side2, children: result.ops.map((op, i) => {
|
|
13119
13305
|
const text = op.tokens.join("");
|
|
13120
|
-
if (op.type === "equal") return /* @__PURE__ */ (0,
|
|
13306
|
+
if (op.type === "equal") return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react70.Fragment, { children: text }, i);
|
|
13121
13307
|
if (op.type === "delete" && side2 === "after") return null;
|
|
13122
13308
|
if (op.type === "insert" && side2 === "before") return null;
|
|
13123
|
-
return /* @__PURE__ */ (0,
|
|
13309
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Marked, { segments: [{ text, changed: true }], side: op.type === "delete" ? "before" : "after", labels }, i);
|
|
13124
13310
|
}) });
|
|
13125
|
-
const side = (which) => /* @__PURE__ */ (0,
|
|
13126
|
-
/* @__PURE__ */ (0,
|
|
13311
|
+
const side = (which) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "uix-text-diff__side", children: [
|
|
13312
|
+
/* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__head", children: which === "before" ? beforeLabel ?? labels.before : afterLabel ?? labels.after }),
|
|
13127
13313
|
prose(which)
|
|
13128
13314
|
] });
|
|
13129
|
-
body = /* @__PURE__ */ (0,
|
|
13315
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__body", children: view === "unified" ? prose("both") : /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { className: "uix-text-diff__row", "data-kind": "prose", children: [
|
|
13130
13316
|
side("before"),
|
|
13131
13317
|
side("after")
|
|
13132
13318
|
] }) });
|
|
13133
13319
|
}
|
|
13134
|
-
return /* @__PURE__ */ (0,
|
|
13135
|
-
!hideSummary && result.status === "ok" && /* @__PURE__ */ (0,
|
|
13320
|
+
return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("div", { role: "group", "aria-label": label, className: cx("uix-text-diff", className), "data-view": view, "data-granularity": granularity, ...props, children: [
|
|
13321
|
+
!hideSummary && result.status === "ok" && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: "uix-text-diff__summary", children: unchanged ? labels.noChanges : fillLabel(labels.summary, { added: result.added, removed: result.removed }) }),
|
|
13136
13322
|
!(granularity === "word" && view === "split" && result.status === "ok") && heads,
|
|
13137
13323
|
body
|
|
13138
13324
|
] });
|