@tensor_1/react 2.36.0 → 2.38.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 +16 -0
- package/dist/components/SchedulingAgenda.js +3 -1
- package/dist/components/SchedulingTimeGrid.js +6 -4
- package/dist/components/SchedulingTimeline.js +5 -2
- package/dist/components/Stat.d.ts +7 -0
- package/dist/components/Stat.js +6 -3
- package/dist/hooks/usePrinting.d.ts +15 -0
- package/dist/hooks/usePrinting.js +29 -0
- package/dist/index.cjs +270 -233
- package/dist/index.d.cts +7 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -6010,7 +6010,7 @@ function Meter({ value = 0, tone, label, toneLabels, className, ...props }) {
|
|
|
6010
6010
|
var import_react43 = require("react");
|
|
6011
6011
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
6012
6012
|
var Chevron3 = () => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-stat__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "m6 9 6 6 6-6" }) }) });
|
|
6013
|
-
var Stat = (0, import_react43.forwardRef)(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, trendLabels, haspopup = "dialog", href, current, renderLink, className, onClick, ...props }, ref) {
|
|
6013
|
+
var Stat = (0, import_react43.forwardRef)(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, trendLabels, haspopup = "dialog", href, current, renderLink, className, onClick, onKeyDown, pending = false, ...props }, ref) {
|
|
6014
6014
|
const id = (0, import_react43.useId)();
|
|
6015
6015
|
const interactive = onActivate != null;
|
|
6016
6016
|
const linked = !interactive && href != null;
|
|
@@ -6040,11 +6040,11 @@ var Stat = (0, import_react43.forwardRef)(function Stat2({ label, value, icon, m
|
|
|
6040
6040
|
] })
|
|
6041
6041
|
] });
|
|
6042
6042
|
if (linked) {
|
|
6043
|
-
const linkProps = { ...props, href, className: classes, onClick, "aria-current": current ? "page" : void 0, children: body };
|
|
6043
|
+
const linkProps = { ...props, href, className: classes, onClick, onKeyDown, "aria-current": current ? "page" : void 0, children: body };
|
|
6044
6044
|
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: renderLink ? renderUixLink(renderLink, linkProps) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("a", { ref, ...linkProps }) });
|
|
6045
6045
|
}
|
|
6046
6046
|
if (!interactive) {
|
|
6047
|
-
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { ref, className: classes, onClick, ...props, children: body });
|
|
6047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { ref, className: classes, onClick, onKeyDown, ...props, children: body });
|
|
6048
6048
|
}
|
|
6049
6049
|
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
6050
6050
|
"button",
|
|
@@ -6057,10 +6057,13 @@ var Stat = (0, import_react43.forwardRef)(function Stat2({ label, value, icon, m
|
|
|
6057
6057
|
"aria-expanded": expanded,
|
|
6058
6058
|
"aria-labelledby": `${id}-label ${id}-sep ${id}-value${activateLabel ? ` ${id}-action` : ""}`,
|
|
6059
6059
|
"aria-describedby": meta != null || trend != null ? `${id}-meta` : void 0,
|
|
6060
|
+
...pending ? { "aria-busy": true, "aria-disabled": true } : null,
|
|
6060
6061
|
onClick: (e) => {
|
|
6062
|
+
if (pending) return;
|
|
6061
6063
|
onClick?.(e);
|
|
6062
6064
|
if (!e.defaultPrevented) onActivate();
|
|
6063
6065
|
},
|
|
6066
|
+
onKeyDown: pending ? void 0 : onKeyDown,
|
|
6064
6067
|
children: [
|
|
6065
6068
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { id: `${id}-sep`, className: "uix-visually-hidden", children: ":" }),
|
|
6066
6069
|
activateLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { id: `${id}-action`, className: "uix-visually-hidden", children: [
|
|
@@ -9375,7 +9378,7 @@ function BuilderCanvas({
|
|
|
9375
9378
|
}
|
|
9376
9379
|
|
|
9377
9380
|
// src/components/SchedulingCalendar.tsx
|
|
9378
|
-
var
|
|
9381
|
+
var import_react63 = require("react");
|
|
9379
9382
|
|
|
9380
9383
|
// src/calendar-model.ts
|
|
9381
9384
|
function fromDateKey(value) {
|
|
@@ -9803,7 +9806,36 @@ function proposeMove(span, delta, timeZone) {
|
|
|
9803
9806
|
}
|
|
9804
9807
|
|
|
9805
9808
|
// src/components/SchedulingAgenda.tsx
|
|
9809
|
+
var import_react61 = require("react");
|
|
9810
|
+
|
|
9811
|
+
// src/hooks/usePrinting.ts
|
|
9806
9812
|
var import_react60 = require("react");
|
|
9813
|
+
var import_react_dom = require("react-dom");
|
|
9814
|
+
function usePrinting(enabled = true) {
|
|
9815
|
+
const [printing, setPrinting] = (0, import_react60.useState)(false);
|
|
9816
|
+
(0, import_react60.useEffect)(() => {
|
|
9817
|
+
if (!enabled || typeof window === "undefined") return void 0;
|
|
9818
|
+
const set = (next) => {
|
|
9819
|
+
(0, import_react_dom.flushSync)(() => setPrinting(next));
|
|
9820
|
+
};
|
|
9821
|
+
const before = () => set(true);
|
|
9822
|
+
const after = () => set(false);
|
|
9823
|
+
const query = typeof window.matchMedia === "function" ? window.matchMedia("print") : null;
|
|
9824
|
+
const changed = (event) => set(event.matches);
|
|
9825
|
+
window.addEventListener("beforeprint", before);
|
|
9826
|
+
window.addEventListener("afterprint", after);
|
|
9827
|
+
query?.addEventListener?.("change", changed);
|
|
9828
|
+
setPrinting(Boolean(query?.matches));
|
|
9829
|
+
return () => {
|
|
9830
|
+
window.removeEventListener("beforeprint", before);
|
|
9831
|
+
window.removeEventListener("afterprint", after);
|
|
9832
|
+
query?.removeEventListener?.("change", changed);
|
|
9833
|
+
};
|
|
9834
|
+
}, [enabled]);
|
|
9835
|
+
return enabled && printing;
|
|
9836
|
+
}
|
|
9837
|
+
|
|
9838
|
+
// src/components/SchedulingAgenda.tsx
|
|
9807
9839
|
var import_jsx_runtime86 = require("react/jsx-runtime");
|
|
9808
9840
|
var AGENDA_VIRTUAL_ROW = 44;
|
|
9809
9841
|
var AGENDA_NARROW_WIDTH = 576;
|
|
@@ -9856,10 +9888,11 @@ function AgendaBody({
|
|
|
9856
9888
|
if ((group.continuesCount ?? 0) > 0) flatRows.push({ kind: "continues", key: `c-${groupKey}`, group });
|
|
9857
9889
|
});
|
|
9858
9890
|
}
|
|
9859
|
-
const [narrow, setNarrow] = (0,
|
|
9860
|
-
const
|
|
9891
|
+
const [narrow, setNarrow] = (0, import_react61.useState)(false);
|
|
9892
|
+
const printing = usePrinting(flat);
|
|
9893
|
+
const virtual = useVirtualRows(flatRows, { rowHeight: narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW, threshold: 0, estimatedViewportHeight: AGENDA_VIRTUAL_VIEWPORT, enabled: !printing });
|
|
9861
9894
|
const scroller = virtual.containerRef;
|
|
9862
|
-
(0,
|
|
9895
|
+
(0, import_react61.useLayoutEffect)(() => {
|
|
9863
9896
|
const box = scroller.current;
|
|
9864
9897
|
if (!box) return;
|
|
9865
9898
|
const measure = () => setNarrow(box.clientWidth > 0 && box.clientWidth <= AGENDA_NARROW_WIDTH);
|
|
@@ -9868,8 +9901,8 @@ function AgendaBody({
|
|
|
9868
9901
|
observer.observe(box);
|
|
9869
9902
|
return () => observer.disconnect();
|
|
9870
9903
|
}, [scroller]);
|
|
9871
|
-
const grouped = (0,
|
|
9872
|
-
(0,
|
|
9904
|
+
const grouped = (0, import_react61.useRef)(null);
|
|
9905
|
+
(0, import_react61.useLayoutEffect)(() => {
|
|
9873
9906
|
const box = grouped.current;
|
|
9874
9907
|
if (!box) return;
|
|
9875
9908
|
const observer = new ResizeObserver((entries) => {
|
|
@@ -9881,7 +9914,7 @@ function AgendaBody({
|
|
|
9881
9914
|
box.querySelectorAll(":scope > section > .uix-scheduling-calendar__agenda-head").forEach((head) => observer.observe(head));
|
|
9882
9915
|
return () => observer.disconnect();
|
|
9883
9916
|
}, [groups]);
|
|
9884
|
-
const stop = (0,
|
|
9917
|
+
const stop = (0, import_react61.useRef)({ node: null, index: 0 });
|
|
9885
9918
|
const container = () => flat ? scroller.current : grouped.current;
|
|
9886
9919
|
const controls = () => Array.from(container()?.querySelectorAll("button") ?? []);
|
|
9887
9920
|
const focusStop = (target) => {
|
|
@@ -9906,7 +9939,7 @@ function AgendaBody({
|
|
|
9906
9939
|
const scrollToRow = (box, index) => {
|
|
9907
9940
|
box.scrollTop = Math.max(0, index * rowHeight - (box.clientHeight - rowHeight) / 2);
|
|
9908
9941
|
};
|
|
9909
|
-
const landing = (0,
|
|
9942
|
+
const landing = (0, import_react61.useRef)(null);
|
|
9910
9943
|
const land = () => {
|
|
9911
9944
|
const wanted = landing.current;
|
|
9912
9945
|
if (!wanted) return;
|
|
@@ -9927,7 +9960,7 @@ function AgendaBody({
|
|
|
9927
9960
|
scrollToRow(box, index);
|
|
9928
9961
|
}
|
|
9929
9962
|
};
|
|
9930
|
-
(0,
|
|
9963
|
+
(0, import_react61.useEffect)(() => {
|
|
9931
9964
|
const all = controls();
|
|
9932
9965
|
stop.current = syncRovingStop(all, stop.current);
|
|
9933
9966
|
const box = flat ? scroller.current : null;
|
|
@@ -9983,7 +10016,7 @@ function AgendaBody({
|
|
|
9983
10016
|
overlay.scopeLabel && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "uix-scheduling-calendar__window-scope", children: overlay.scopeLabel })
|
|
9984
10017
|
] }) });
|
|
9985
10018
|
const heading = (group, withNotes) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "uix-scheduling-calendar__agenda-head", children: [
|
|
9986
|
-
(0,
|
|
10019
|
+
(0, import_react61.createElement)(`h${headingLevel}`, { className: "uix-scheduling-calendar__agenda-heading" }, group.heading ?? dateText(group.date, "day")),
|
|
9987
10020
|
withNotes && group.annotations && group.annotations.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("ul", { className: "uix-scheduling-calendar__agenda-notes", children: uniqueKeys(group.annotations.map((overlay) => overlay.id)).map((key, at) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("li", { children: note(group.annotations[at]) }, key)) })
|
|
9988
10021
|
] });
|
|
9989
10022
|
const timeText = (entry, date) => {
|
|
@@ -10053,7 +10086,7 @@ function AgendaBody({
|
|
|
10053
10086
|
}
|
|
10054
10087
|
|
|
10055
10088
|
// src/components/SchedulingTimeGrid.tsx
|
|
10056
|
-
var
|
|
10089
|
+
var import_react62 = require("react");
|
|
10057
10090
|
var import_jsx_runtime87 = require("react/jsx-runtime");
|
|
10058
10091
|
var HOUR_MS2 = 36e5;
|
|
10059
10092
|
var MINUTES_PER_HOUR = 60;
|
|
@@ -10067,7 +10100,7 @@ function uniqueById(items) {
|
|
|
10067
10100
|
const seen = /* @__PURE__ */ new Set();
|
|
10068
10101
|
return items.filter((item) => seen.has(item.id) ? false : (seen.add(item.id), true));
|
|
10069
10102
|
}
|
|
10070
|
-
var GridItem = (0,
|
|
10103
|
+
var GridItem = (0, import_react62.memo)(function GridItem2({ entry, segment, column, alone, name, status, movable, hintId, timeZone, continuesFrom, markers, renderEntry, renderMarker: renderMarker2, handlers }) {
|
|
10071
10104
|
const lines = linesFor(segment);
|
|
10072
10105
|
const continuation = segment.part === "continuation";
|
|
10073
10106
|
const style = vars({
|
|
@@ -10076,16 +10109,18 @@ var GridItem = (0, import_react61.memo)(function GridItem2({ entry, segment, col
|
|
|
10076
10109
|
"--uix-scheduling-calendar-lane": segment.lane,
|
|
10077
10110
|
"--uix-scheduling-calendar-lanes": segment.laneCount
|
|
10078
10111
|
});
|
|
10079
|
-
const
|
|
10112
|
+
const custom = renderEntry?.(entry, { availableLines: lines });
|
|
10113
|
+
const text = custom ?? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
|
|
10080
10114
|
!continuation && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
|
|
10081
10115
|
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
|
|
10082
10116
|
" "
|
|
10083
10117
|
] }),
|
|
10084
10118
|
/* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-calendar__title", children: entry.title })
|
|
10085
|
-
] })
|
|
10119
|
+
] });
|
|
10120
|
+
const noRoom = lines === 0 && (custom === void 0 || custom === null) ? "none" : void 0;
|
|
10086
10121
|
const body = /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
|
|
10087
|
-
continuation &&
|
|
10088
|
-
(!continuation || alone) && text != null && text !== false && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-calendar__entry-text", children: text }),
|
|
10122
|
+
continuation && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-calendar__tg-from", "data-room": lines === 0 ? "none" : void 0, children: continuesFrom }),
|
|
10123
|
+
(!continuation || alone) && text != null && text !== false && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-calendar__entry-text", "data-room": noRoom, children: text }),
|
|
10089
10124
|
markers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: renderMarker2(marker) }, marker.id)) })
|
|
10090
10125
|
] });
|
|
10091
10126
|
const shared = {
|
|
@@ -10150,20 +10185,20 @@ function SchedulingTimeGrid({
|
|
|
10150
10185
|
emptyNote,
|
|
10151
10186
|
nothingToShow
|
|
10152
10187
|
}) {
|
|
10153
|
-
const rootRef = (0,
|
|
10154
|
-
const hintId = (0,
|
|
10155
|
-
const [widthCap, setWidthCap] = (0,
|
|
10156
|
-
const [ghost, setGhost] = (0,
|
|
10157
|
-
const [announcement, setAnnouncement] = (0,
|
|
10158
|
-
const [activeDay, setActiveDay] = (0,
|
|
10159
|
-
const enteredFrom = (0,
|
|
10188
|
+
const rootRef = (0, import_react62.useRef)(null);
|
|
10189
|
+
const hintId = (0, import_react62.useId)();
|
|
10190
|
+
const [widthCap, setWidthCap] = (0, import_react62.useState)(Infinity);
|
|
10191
|
+
const [ghost, setGhost] = (0, import_react62.useState)(null);
|
|
10192
|
+
const [announcement, setAnnouncement] = (0, import_react62.useState)("");
|
|
10193
|
+
const [activeDay, setActiveDay] = (0, import_react62.useState)(days[0]);
|
|
10194
|
+
const enteredFrom = (0, import_react62.useRef)(null);
|
|
10160
10195
|
const tabStop = days.includes(activeDay) ? activeDay : days[0];
|
|
10161
10196
|
const moving = canMove && onProposeMove !== void 0;
|
|
10162
10197
|
const step = Number.isFinite(givenStep) && givenStep > 0 ? givenStep : DEFAULT_STEP;
|
|
10163
|
-
const laneOptions = (0,
|
|
10164
|
-
const entries = (0,
|
|
10165
|
-
const overlays = (0,
|
|
10166
|
-
(0,
|
|
10198
|
+
const laneOptions = (0, import_react62.useMemo)(() => ({ crossMidnightMinutes: topLaneCrossMidnightMinutes }), [topLaneCrossMidnightMinutes]);
|
|
10199
|
+
const entries = (0, import_react62.useMemo)(() => uniqueById(givenEntries), [givenEntries]);
|
|
10200
|
+
const overlays = (0, import_react62.useMemo)(() => uniqueById(givenOverlays), [givenOverlays]);
|
|
10201
|
+
(0, import_react62.useEffect)(() => {
|
|
10167
10202
|
const root = rootRef.current;
|
|
10168
10203
|
if (!root || typeof ResizeObserver === "undefined") return void 0;
|
|
10169
10204
|
const column = root.querySelector("[data-tg-column]");
|
|
@@ -10188,17 +10223,17 @@ function SchedulingTimeGrid({
|
|
|
10188
10223
|
};
|
|
10189
10224
|
}, [days]);
|
|
10190
10225
|
const lanes = Math.max(1, Math.min(maxLanes, widthCap));
|
|
10191
|
-
const entryById = (0,
|
|
10192
|
-
const overlayById = (0,
|
|
10193
|
-
const columns = (0,
|
|
10194
|
-
const slots = (0,
|
|
10195
|
-
const top = (0,
|
|
10196
|
-
const drawable = (0,
|
|
10197
|
-
const strip = (0,
|
|
10198
|
-
const shades = (0,
|
|
10226
|
+
const entryById = (0, import_react62.useMemo)(() => new Map(entries.map((entry) => [entry.id, entry])), [entries]);
|
|
10227
|
+
const overlayById = (0, import_react62.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, overlay])), [overlays]);
|
|
10228
|
+
const columns = (0, import_react62.useMemo)(() => days.map((date) => layoutTimeGridDay(entries, date, timeZone, { ...laneOptions, maxLanes: lanes })), [days, entries, timeZone, laneOptions, lanes]);
|
|
10229
|
+
const slots = (0, import_react62.useMemo)(() => days.map((date) => zonedHourSlots(date, timeZone)), [days, timeZone]);
|
|
10230
|
+
const top = (0, import_react62.useMemo)(() => layoutDaySpans(entries.filter((entry) => placesInTopLane(entry, timeZone, laneOptions)), days, { timeZone, laneCap: Math.max(0, topLaneCap) }), [entries, days, timeZone, laneOptions, topLaneCap]);
|
|
10231
|
+
const drawable = (0, import_react62.useMemo)(() => overlays.filter((overlay) => new Date(overlay.end).getTime() >= new Date(overlay.start).getTime()), [overlays]);
|
|
10232
|
+
const strip = (0, import_react62.useMemo)(() => layoutDaySpans(drawable, days, { timeZone, laneCap: Math.max(0, windowLaneCap) }), [drawable, days, timeZone, windowLaneCap]);
|
|
10233
|
+
const shades = (0, import_react62.useMemo)(() => layoutDaySpans(drawable.filter((overlay) => overlay.global), days, { timeZone }).placed, [drawable, days, timeZone]);
|
|
10199
10234
|
const lanesIn = (placed) => placed.reduce((max, span) => Math.max(max, span.lane + 1), 0);
|
|
10200
10235
|
const maxHours = Math.max(...columns.map((column) => column.dayHours));
|
|
10201
|
-
const gutterIndex = (0,
|
|
10236
|
+
const gutterIndex = (0, import_react62.useMemo)(() => {
|
|
10202
10237
|
const signatures = slots.map(slotSignature);
|
|
10203
10238
|
const count2 = /* @__PURE__ */ new Map();
|
|
10204
10239
|
for (const signature of signatures) count2.set(signature, (count2.get(signature) ?? 0) + 1);
|
|
@@ -10223,15 +10258,15 @@ function SchedulingTimeGrid({
|
|
|
10223
10258
|
slot.instant.getTime()
|
|
10224
10259
|
));
|
|
10225
10260
|
const movable = (entry) => moving && entry.movable !== false;
|
|
10226
|
-
const live = (0,
|
|
10261
|
+
const live = (0, import_react62.useRef)({ ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable });
|
|
10227
10262
|
live.current = { ghost, entryById, timeZone, step, onProposeMove, onSelectEntry, labels, formatInstant, days, columns, movable };
|
|
10228
|
-
const dragRef = (0,
|
|
10229
|
-
const suppressClick = (0,
|
|
10230
|
-
const refocus = (0,
|
|
10231
|
-
(0,
|
|
10263
|
+
const dragRef = (0, import_react62.useRef)(null);
|
|
10264
|
+
const suppressClick = (0, import_react62.useRef)(false);
|
|
10265
|
+
const refocus = (0, import_react62.useRef)(null);
|
|
10266
|
+
(0, import_react62.useEffect)(() => {
|
|
10232
10267
|
if (ghost && !entryById.has(ghost.id)) setGhost(null);
|
|
10233
10268
|
}, [ghost, entryById]);
|
|
10234
|
-
(0,
|
|
10269
|
+
(0, import_react62.useEffect)(() => {
|
|
10235
10270
|
const id = refocus.current;
|
|
10236
10271
|
const root = rootRef.current;
|
|
10237
10272
|
if (!id || !root) return;
|
|
@@ -10248,7 +10283,7 @@ function SchedulingTimeGrid({
|
|
|
10248
10283
|
}
|
|
10249
10284
|
}
|
|
10250
10285
|
});
|
|
10251
|
-
const send = (0,
|
|
10286
|
+
const send = (0, import_react62.useCallback)((id, delta) => {
|
|
10252
10287
|
const state = live.current;
|
|
10253
10288
|
const entry = state.entryById.get(id);
|
|
10254
10289
|
if (!entry || !state.onProposeMove || !state.movable(entry) || delta.days === 0 && delta.minutes === 0) {
|
|
@@ -10263,7 +10298,7 @@ function SchedulingTimeGrid({
|
|
|
10263
10298
|
result.then(clear, clear);
|
|
10264
10299
|
} else setGhost(null);
|
|
10265
10300
|
}, []);
|
|
10266
|
-
const handlers = (0,
|
|
10301
|
+
const handlers = (0, import_react62.useMemo)(() => ({
|
|
10267
10302
|
click: (entry) => {
|
|
10268
10303
|
live.current.onSelectEntry?.(entry);
|
|
10269
10304
|
},
|
|
@@ -10386,7 +10421,7 @@ function SchedulingTimeGrid({
|
|
|
10386
10421
|
};
|
|
10387
10422
|
}
|
|
10388
10423
|
}), [send]);
|
|
10389
|
-
(0,
|
|
10424
|
+
(0, import_react62.useEffect)(() => () => {
|
|
10390
10425
|
dragRef.current?.stop();
|
|
10391
10426
|
dragRef.current = null;
|
|
10392
10427
|
}, []);
|
|
@@ -10799,27 +10834,27 @@ function SchedulingCalendar({
|
|
|
10799
10834
|
};
|
|
10800
10835
|
const stateLabel = labels.states;
|
|
10801
10836
|
const viewLabel = { month: labels.viewMonth, week: labels.viewWeek, day: labels.viewDay, agenda: labels.viewAgenda };
|
|
10802
|
-
const [internalView, setInternalView] = (0,
|
|
10837
|
+
const [internalView, setInternalView] = (0, import_react63.useState)("month");
|
|
10803
10838
|
const view = controlledView ?? internalView;
|
|
10804
|
-
const [activeDate, setActiveDate] = (0,
|
|
10805
|
-
const [expandedDates, setExpandedDates] = (0,
|
|
10839
|
+
const [activeDate, setActiveDate] = (0, import_react63.useState)(anchorDate);
|
|
10840
|
+
const [expandedDates, setExpandedDates] = (0, import_react63.useState)(() => /* @__PURE__ */ new Set());
|
|
10806
10841
|
const dateText = (date, part) => formatDate?.(date, part) ?? cachedDateTimeFormat(locale, INTL_PARTS[part]).format(utcDate(date));
|
|
10807
10842
|
const formatInstant = (instant) => formatInstantProp?.(instant) ?? `${dateText(zonedDateKey(instant, timeZone), "day")} ${zonedTimeOfDay(instant, timeZone)}`;
|
|
10808
|
-
const gridRef = (0,
|
|
10843
|
+
const gridRef = (0, import_react63.useRef)(null);
|
|
10809
10844
|
const picksGiven = dayEntries !== void 0;
|
|
10810
10845
|
const controlled = picksGiven || dayInfo !== void 0;
|
|
10811
10846
|
const countsOnly = monthDensity === "counts" && view === "month";
|
|
10812
10847
|
const fixed = controlled || maxEntriesPerDay !== void 0 && onShowMore !== void 0 || countsOnly;
|
|
10813
10848
|
const windowCap = Math.max(0, windowLaneCap ?? (fixed ? DEFAULT_LANE_CAP2 : Infinity));
|
|
10814
10849
|
const spanCap = Math.max(0, spanLaneCap ?? (fixed ? DEFAULT_LANE_CAP2 : Infinity));
|
|
10815
|
-
const visibleEntries = (0,
|
|
10816
|
-
const monthDays = (0,
|
|
10850
|
+
const visibleEntries = (0, import_react63.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
|
|
10851
|
+
const monthDays = (0, import_react63.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate), weekStartsOn), [anchorDate, weekStartsOn]);
|
|
10817
10852
|
const weekday = (utcDate(anchorDate).getUTCDay() - weekStartsOn + 7) % 7;
|
|
10818
10853
|
const weekStart = addCalendarDays(anchorDate, -weekday);
|
|
10819
|
-
const weekDays = (0,
|
|
10820
|
-
const days = (0,
|
|
10854
|
+
const weekDays = (0, import_react63.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
|
|
10855
|
+
const days = (0, import_react63.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : view === "day" ? [anchorDate] : weekDays, [view, monthDays, weekDays, anchorDate]);
|
|
10821
10856
|
const timeGridView = view === "day" || view === "week" && timeGrid;
|
|
10822
|
-
const { singles, multiDay, coverage } = (0,
|
|
10857
|
+
const { singles, multiDay, coverage } = (0, import_react63.useMemo)(() => {
|
|
10823
10858
|
const byDay = /* @__PURE__ */ new Map();
|
|
10824
10859
|
const spans = [];
|
|
10825
10860
|
const every = [];
|
|
@@ -10834,9 +10869,9 @@ function SchedulingCalendar({
|
|
|
10834
10869
|
}
|
|
10835
10870
|
return { singles: byDay, multiDay: spans, coverage: every };
|
|
10836
10871
|
}, [visibleEntries, timeZone]);
|
|
10837
|
-
const entryById = (0,
|
|
10838
|
-
const overlayById = (0,
|
|
10839
|
-
const layout = (0,
|
|
10872
|
+
const entryById = (0, import_react63.useMemo)(() => new Map([...multiDay].reverse().map(({ entry }) => [entry.id, entry])), [multiDay]);
|
|
10873
|
+
const overlayById = (0, import_react63.useMemo)(() => new Map([...overlays].reverse().map((overlay) => [overlay.id, overlay])), [overlays]);
|
|
10874
|
+
const layout = (0, import_react63.useMemo)(() => {
|
|
10840
10875
|
if (spanLayout) return spanLayout;
|
|
10841
10876
|
if (view === "agenda" || timeGridView) return { placed: [], hiddenByRow: {}, firstHiddenDayByRow: {} };
|
|
10842
10877
|
const inputs = [];
|
|
@@ -10854,7 +10889,7 @@ function SchedulingCalendar({
|
|
|
10854
10889
|
}
|
|
10855
10890
|
return layoutMonthSpans(inputs, days, { timeZone, laneCap: { window: windowCap, item: spanCap } });
|
|
10856
10891
|
}, [spanLayout, view, timeGridView, overlays, multiDay, days, timeZone, windowCap, spanCap, countsOnly]);
|
|
10857
|
-
const placedByRow = (0,
|
|
10892
|
+
const placedByRow = (0, import_react63.useMemo)(() => {
|
|
10858
10893
|
const rows = /* @__PURE__ */ new Map();
|
|
10859
10894
|
for (const placed of layout.placed) {
|
|
10860
10895
|
const row = rows.get(placed.weekRow);
|
|
@@ -10865,7 +10900,7 @@ function SchedulingCalendar({
|
|
|
10865
10900
|
}, [layout]);
|
|
10866
10901
|
const lanesUsed = (row, group) => (placedByRow.get(row) ?? []).reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
|
|
10867
10902
|
const lanesUsedAnywhere = (group) => layout.placed.reduce((max, placed) => placed.group === group ? Math.max(max, placed.lane + 1) : max, 0);
|
|
10868
|
-
(0,
|
|
10903
|
+
(0, import_react63.useEffect)(() => {
|
|
10869
10904
|
if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
|
|
10870
10905
|
}, [activeDate, days, view]);
|
|
10871
10906
|
const setView = (next) => {
|
|
@@ -10881,7 +10916,7 @@ function SchedulingCalendar({
|
|
|
10881
10916
|
setActiveDate(date);
|
|
10882
10917
|
requestAnimationFrame(() => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.focus());
|
|
10883
10918
|
};
|
|
10884
|
-
const enteredFrom = (0,
|
|
10919
|
+
const enteredFrom = (0, import_react63.useRef)(null);
|
|
10885
10920
|
const cellOf = (date) => gridRef.current?.querySelector(`[data-calendar-date="${date}"]`)?.closest(".uix-scheduling-calendar__day") ?? null;
|
|
10886
10921
|
const dayRing = (date) => {
|
|
10887
10922
|
const cell = cellOf(date);
|
|
@@ -10951,10 +10986,10 @@ function SchedulingCalendar({
|
|
|
10951
10986
|
const date = dayOfItem(item);
|
|
10952
10987
|
if (date && dayRing(date).includes(item)) setActiveDate(date);
|
|
10953
10988
|
};
|
|
10954
|
-
const flatAgendaRef = (0,
|
|
10955
|
-
const flatAgendaStop = (0,
|
|
10989
|
+
const flatAgendaRef = (0, import_react63.useRef)(null);
|
|
10990
|
+
const flatAgendaStop = (0, import_react63.useRef)({ node: null, index: 0 });
|
|
10956
10991
|
const flatAgendaRows = () => Array.from(flatAgendaRef.current?.querySelectorAll(":scope > ol > li > button") ?? []);
|
|
10957
|
-
(0,
|
|
10992
|
+
(0, import_react63.useEffect)(() => {
|
|
10958
10993
|
flatAgendaStop.current = syncRovingStop(flatAgendaRows(), flatAgendaStop.current);
|
|
10959
10994
|
});
|
|
10960
10995
|
const onFlatAgendaFocus = (event) => {
|
|
@@ -11196,7 +11231,7 @@ function SchedulingCalendar({
|
|
|
11196
11231
|
}
|
|
11197
11232
|
|
|
11198
11233
|
// src/components/SchedulingTimeline.tsx
|
|
11199
|
-
var
|
|
11234
|
+
var import_react64 = require("react");
|
|
11200
11235
|
|
|
11201
11236
|
// src/scheduling-timeline-model.ts
|
|
11202
11237
|
var HOUR = 36e5;
|
|
@@ -11424,7 +11459,7 @@ var DEFAULT_UNITS = { row: 36, pad: 16, head: 40 };
|
|
|
11424
11459
|
var ESTIMATED_VIEWPORT = 720;
|
|
11425
11460
|
var OVERSCAN_ROWS = 4;
|
|
11426
11461
|
var BAR_MIN_FALLBACK = 1.5 * 16;
|
|
11427
|
-
var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ?
|
|
11462
|
+
var useIsomorphicLayoutEffect6 = typeof document !== "undefined" ? import_react64.useLayoutEffect : import_react64.useEffect;
|
|
11428
11463
|
var sameExtent = (a, b) => a.subRows === b.subRows && a.lanes === b.lanes && a.heads === b.heads;
|
|
11429
11464
|
var IN_LANE = { scope: "lane", labelTops: ["0%"] };
|
|
11430
11465
|
var vars2 = (values) => values;
|
|
@@ -11490,29 +11525,29 @@ function SchedulingTimeline({
|
|
|
11490
11525
|
overlays: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.overlays, ...uixLabels.schedulingTimeline?.overlays, ...labelOverrides?.overlays },
|
|
11491
11526
|
statuses: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.statuses, ...uixLabels.schedulingTimeline?.statuses, ...labelOverrides?.statuses }
|
|
11492
11527
|
};
|
|
11493
|
-
const id = (0,
|
|
11528
|
+
const id = (0, import_react64.useId)();
|
|
11494
11529
|
const hintId = `${id}-hint`;
|
|
11495
11530
|
const step = stepProp !== void 0 && Number.isFinite(stepProp) && stepProp > 0 ? stepProp : defaultTimelineStep(scale);
|
|
11496
|
-
const rootRef = (0,
|
|
11497
|
-
const [scroller, setScroller] = (0,
|
|
11498
|
-
const [layerTrack, setLayerTrack] = (0,
|
|
11499
|
-
const probeRef = (0,
|
|
11500
|
-
const bodyRef = (0,
|
|
11501
|
-
const barMinRef = (0,
|
|
11502
|
-
const [barShare, setBarShare] = (0,
|
|
11503
|
-
const barShareRef = (0,
|
|
11504
|
-
const anchorRef = (0,
|
|
11505
|
-
const [anchorKey, setAnchorKey] = (0,
|
|
11506
|
-
const [focusRowKey, setFocusRowKey] = (0,
|
|
11507
|
-
const [activeId, setActiveId] = (0,
|
|
11508
|
-
const [focusRequest, setFocusRequest] = (0,
|
|
11509
|
-
const [stepDrag, setStepDrag] = (0,
|
|
11510
|
-
const [ghost, setGhost] = (0,
|
|
11511
|
-
const [announcement, setAnnouncement] = (0,
|
|
11512
|
-
const [selfCollapsed, setSelfCollapsed] = (0,
|
|
11513
|
-
const [units, setUnits] = (0,
|
|
11514
|
-
const [view, setView] = (0,
|
|
11515
|
-
const measureViewRef = (0,
|
|
11531
|
+
const rootRef = (0, import_react64.useRef)(null);
|
|
11532
|
+
const [scroller, setScroller] = (0, import_react64.useState)(null);
|
|
11533
|
+
const [layerTrack, setLayerTrack] = (0, import_react64.useState)(null);
|
|
11534
|
+
const probeRef = (0, import_react64.useRef)(null);
|
|
11535
|
+
const bodyRef = (0, import_react64.useRef)(null);
|
|
11536
|
+
const barMinRef = (0, import_react64.useRef)(null);
|
|
11537
|
+
const [barShare, setBarShare] = (0, import_react64.useState)(0);
|
|
11538
|
+
const barShareRef = (0, import_react64.useRef)(0);
|
|
11539
|
+
const anchorRef = (0, import_react64.useRef)(null);
|
|
11540
|
+
const [anchorKey, setAnchorKey] = (0, import_react64.useState)(null);
|
|
11541
|
+
const [focusRowKey, setFocusRowKey] = (0, import_react64.useState)(null);
|
|
11542
|
+
const [activeId, setActiveId] = (0, import_react64.useState)();
|
|
11543
|
+
const [focusRequest, setFocusRequest] = (0, import_react64.useState)(null);
|
|
11544
|
+
const [stepDrag, setStepDrag] = (0, import_react64.useState)(null);
|
|
11545
|
+
const [ghost, setGhost] = (0, import_react64.useState)(null);
|
|
11546
|
+
const [announcement, setAnnouncement] = (0, import_react64.useState)("");
|
|
11547
|
+
const [selfCollapsed, setSelfCollapsed] = (0, import_react64.useState)({});
|
|
11548
|
+
const [units, setUnits] = (0, import_react64.useState)(DEFAULT_UNITS);
|
|
11549
|
+
const [view, setView] = (0, import_react64.useState)({ top: 0, height: ESTIMATED_VIEWPORT });
|
|
11550
|
+
const measureViewRef = (0, import_react64.useRef)(null);
|
|
11516
11551
|
const proposing = onProposeMove !== void 0;
|
|
11517
11552
|
const stepping = !proposing && onMoveItem !== void 0;
|
|
11518
11553
|
const resizing = onResizeItem !== void 0;
|
|
@@ -11527,8 +11562,8 @@ function SchedulingTimeline({
|
|
|
11527
11562
|
return offset ? `${text} ${offset}` : text;
|
|
11528
11563
|
};
|
|
11529
11564
|
const fmtTick = (at) => formatTick?.(new Date(at), scale) ?? cachedDateTimeFormat(locale, { timeZone, ...TICK_FORMAT[scale] }).format(new Date(at));
|
|
11530
|
-
const ticks = (0,
|
|
11531
|
-
const minorTicks = (0,
|
|
11565
|
+
const ticks = (0, import_react64.useMemo)(() => timelineTicks(range, scale, timeZone, weekStartsOn), [range.start, range.end, scale, timeZone, weekStartsOn]);
|
|
11566
|
+
const minorTicks = (0, import_react64.useMemo)(
|
|
11532
11567
|
() => scale === "day" && subTicks && subTicks.length > 0 ? timelineSubTicks(range, subTicks, timeZone) : [],
|
|
11533
11568
|
[range.start, range.end, scale, timeZone, subTicks]
|
|
11534
11569
|
// eslint-disable-line react-hooks/exhaustive-deps
|
|
@@ -11557,7 +11592,7 @@ function SchedulingTimeline({
|
|
|
11557
11592
|
const minSpan = Math.max(0, (Date.parse(range.end) - Date.parse(range.start)) * barShare) || 0;
|
|
11558
11593
|
const isCollapsed = (group) => onToggleGroup ? !!group.collapsed : selfCollapsed[group.id] ?? !!group.collapsed;
|
|
11559
11594
|
const collapsedSignature = groups?.map((group) => isCollapsed(group) ? "1" : "0").join("") ?? "";
|
|
11560
|
-
const itemsByLane = (0,
|
|
11595
|
+
const itemsByLane = (0, import_react64.useMemo)(() => {
|
|
11561
11596
|
const byLane = /* @__PURE__ */ new Map();
|
|
11562
11597
|
for (const item of items) {
|
|
11563
11598
|
const list = byLane.get(item.laneId);
|
|
@@ -11566,7 +11601,7 @@ function SchedulingTimeline({
|
|
|
11566
11601
|
}
|
|
11567
11602
|
return byLane;
|
|
11568
11603
|
}, [items]);
|
|
11569
|
-
const rows = (0,
|
|
11604
|
+
const rows = (0, import_react64.useMemo)(() => {
|
|
11570
11605
|
const laneRow = (lane, laneIndex, groupIndex) => {
|
|
11571
11606
|
const placed = layoutLane(itemsByLane.get(lane.id) ?? EMPTY_ITEMS, range, { flagOverlaps, minSpan });
|
|
11572
11607
|
return { kind: "lane", key: `lane-${laneIndex}`, lane, laneIndex, groupIndex, placed, keys: uniqueKeys2(placed.map((p) => p.item.id)), subRows: placed.reduce((max, p) => Math.max(max, p.row + 1), 1) };
|
|
@@ -11598,8 +11633,8 @@ function SchedulingTimeline({
|
|
|
11598
11633
|
});
|
|
11599
11634
|
return list;
|
|
11600
11635
|
}, [lanes, groups, collapsedSignature, itemsByLane, range.start, range.end, flagOverlaps, minSpan]);
|
|
11601
|
-
const laneRows = (0,
|
|
11602
|
-
const { ordered, rowOfItem } = (0,
|
|
11636
|
+
const laneRows = (0, import_react64.useMemo)(() => rows.filter((row) => row.kind === "lane"), [rows]);
|
|
11637
|
+
const { ordered, rowOfItem } = (0, import_react64.useMemo)(() => {
|
|
11603
11638
|
const ids = [];
|
|
11604
11639
|
const rowOf = /* @__PURE__ */ new Map();
|
|
11605
11640
|
rows.forEach((row, rowIndex) => {
|
|
@@ -11611,13 +11646,13 @@ function SchedulingTimeline({
|
|
|
11611
11646
|
});
|
|
11612
11647
|
return { ordered: ids, rowOfItem: rowOf };
|
|
11613
11648
|
}, [rows]);
|
|
11614
|
-
const nothingToShow = (0,
|
|
11649
|
+
const nothingToShow = (0, import_react64.useMemo)(() => {
|
|
11615
11650
|
if (ordered.length > 0) return false;
|
|
11616
11651
|
const laneIds = new Set(lanes.map((lane) => lane.id));
|
|
11617
11652
|
return !items.some((item) => laneIds.has(item.laneId) && placeSpan(item, range) !== null);
|
|
11618
11653
|
}, [ordered, lanes, items, range.start, range.end]);
|
|
11619
11654
|
const focusId = activeId !== void 0 && rowOfItem.has(activeId) ? activeId : ordered[0];
|
|
11620
|
-
const strips = (0,
|
|
11655
|
+
const strips = (0, import_react64.useMemo)(() => {
|
|
11621
11656
|
const set = /* @__PURE__ */ new Set();
|
|
11622
11657
|
const shown = overlays.filter((overlay) => placeSpan(overlay, range) !== null).map(lanesOf);
|
|
11623
11658
|
if (shown.length === 0) return set;
|
|
@@ -11627,10 +11662,12 @@ function SchedulingTimeline({
|
|
|
11627
11662
|
});
|
|
11628
11663
|
return set;
|
|
11629
11664
|
}, [rows, overlays, range.start, range.end]);
|
|
11630
|
-
const extents = (0,
|
|
11631
|
-
const
|
|
11632
|
-
const
|
|
11633
|
-
|
|
11665
|
+
const extents = (0, import_react64.useMemo)(() => timelineRowExtents(rows.map((row, index) => row.kind === "head" ? { kind: "head", subRows: strips.has(index) ? 1 : 0 } : { kind: "lane", subRows: row.subRows })), [rows, strips]);
|
|
11666
|
+
const windowed = lanes.length + (groups?.length ?? 0) > virtualizeAbove;
|
|
11667
|
+
const printing = usePrinting(windowed);
|
|
11668
|
+
const virtual = windowed && !printing;
|
|
11669
|
+
const fixed = windowed || groups !== void 0 || overlays.some((overlay) => overlay.laneIds !== void 0) || markers.some((marker) => marker.laneIds !== void 0);
|
|
11670
|
+
(0, import_react64.useEffect)(() => {
|
|
11634
11671
|
if (!virtual || !scroller) return void 0;
|
|
11635
11672
|
let frame = 0;
|
|
11636
11673
|
const measure = () => {
|
|
@@ -11670,12 +11707,12 @@ function SchedulingTimeline({
|
|
|
11670
11707
|
};
|
|
11671
11708
|
}, [virtual, scroller]);
|
|
11672
11709
|
const px = (extent) => extent.subRows * units.row + extent.lanes * units.pad + extent.heads * units.head;
|
|
11673
|
-
const offsets = (0,
|
|
11710
|
+
const offsets = (0, import_react64.useMemo)(() => virtual ? extents.map(px) : [], [virtual, extents, units]);
|
|
11674
11711
|
const overscan = OVERSCAN_ROWS * units.row;
|
|
11675
11712
|
const pinned = focusId === void 0 ? -1 : rowOfItem.get(focusId) ?? -1;
|
|
11676
|
-
const focusedRow = (0,
|
|
11677
|
-
const anchorRow = (0,
|
|
11678
|
-
const { mounted, windowStart } = (0,
|
|
11713
|
+
const focusedRow = (0, import_react64.useMemo)(() => focusRowKey === null ? -1 : rows.findIndex((row) => row.key === focusRowKey), [rows, focusRowKey]);
|
|
11714
|
+
const anchorRow = (0, import_react64.useMemo)(() => anchorKey === null ? -1 : rows.findIndex((row) => row.key === anchorKey), [rows, anchorKey]);
|
|
11715
|
+
const { mounted, windowStart } = (0, import_react64.useMemo)(() => {
|
|
11679
11716
|
if (!virtual) return { mounted: rows.map((_, index) => index), windowStart: 0 };
|
|
11680
11717
|
const window_ = timelineWindow(offsets, view.top, view.top + view.height, { overscan });
|
|
11681
11718
|
const list = [];
|
|
@@ -11723,10 +11760,10 @@ function SchedulingTimeline({
|
|
|
11723
11760
|
setActiveId(itemId);
|
|
11724
11761
|
setFocusRequest({ id: itemId });
|
|
11725
11762
|
};
|
|
11726
|
-
(0,
|
|
11763
|
+
(0, import_react64.useEffect)(() => {
|
|
11727
11764
|
if (focusRequest) findBar(focusRequest.id)?.focus();
|
|
11728
11765
|
}, [focusRequest]);
|
|
11729
|
-
const itemById = (0,
|
|
11766
|
+
const itemById = (0, import_react64.useMemo)(() => {
|
|
11730
11767
|
const map = /* @__PURE__ */ new Map();
|
|
11731
11768
|
for (const row of laneRows) for (const p of row.placed) if (!map.has(p.item.id)) map.set(p.item.id, p.item);
|
|
11732
11769
|
return map;
|
|
@@ -11736,15 +11773,15 @@ function SchedulingTimeline({
|
|
|
11736
11773
|
const steps = Math.round(ms / step);
|
|
11737
11774
|
return { days: steps * stepDelta.days, minutes: steps * stepDelta.minutes };
|
|
11738
11775
|
};
|
|
11739
|
-
const live = (0,
|
|
11776
|
+
const live = (0, import_react64.useRef)({ itemById, timeZone, range, step, onProposeMove, canMove, deltaFor, labels, fmtInstant });
|
|
11740
11777
|
live.current = { itemById, timeZone, range, step, onProposeMove, canMove, deltaFor, labels, fmtInstant };
|
|
11741
|
-
const dragRef = (0,
|
|
11742
|
-
const suppressClick = (0,
|
|
11743
|
-
const refocus = (0,
|
|
11744
|
-
(0,
|
|
11778
|
+
const dragRef = (0, import_react64.useRef)(null);
|
|
11779
|
+
const suppressClick = (0, import_react64.useRef)(false);
|
|
11780
|
+
const refocus = (0, import_react64.useRef)(null);
|
|
11781
|
+
(0, import_react64.useEffect)(() => {
|
|
11745
11782
|
if (ghost && !itemById.has(ghost.id)) setGhost(null);
|
|
11746
11783
|
}, [ghost, itemById]);
|
|
11747
|
-
(0,
|
|
11784
|
+
(0, import_react64.useEffect)(() => {
|
|
11748
11785
|
const wanted = refocus.current;
|
|
11749
11786
|
if (!wanted || !rootRef.current) return;
|
|
11750
11787
|
const active = document.activeElement;
|
|
@@ -11755,11 +11792,11 @@ function SchedulingTimeline({
|
|
|
11755
11792
|
}
|
|
11756
11793
|
findBar(wanted)?.focus();
|
|
11757
11794
|
});
|
|
11758
|
-
(0,
|
|
11795
|
+
(0, import_react64.useEffect)(() => () => {
|
|
11759
11796
|
dragRef.current?.stop();
|
|
11760
11797
|
dragRef.current = null;
|
|
11761
11798
|
}, []);
|
|
11762
|
-
(0,
|
|
11799
|
+
(0, import_react64.useEffect)(() => {
|
|
11763
11800
|
if (proposing) return;
|
|
11764
11801
|
dragRef.current?.stop();
|
|
11765
11802
|
dragRef.current = null;
|
|
@@ -12240,7 +12277,7 @@ function SchedulingTimeline({
|
|
|
12240
12277
|
}
|
|
12241
12278
|
|
|
12242
12279
|
// src/components/DateRangePicker.tsx
|
|
12243
|
-
var
|
|
12280
|
+
var import_react66 = require("react");
|
|
12244
12281
|
|
|
12245
12282
|
// src/date-field-model.ts
|
|
12246
12283
|
var pad = (n, width = 2) => String(n).padStart(width, "0");
|
|
@@ -12314,7 +12351,7 @@ function timeZoneName(timeZone, date, locale) {
|
|
|
12314
12351
|
}
|
|
12315
12352
|
|
|
12316
12353
|
// src/components/DateFieldParts.tsx
|
|
12317
|
-
var
|
|
12354
|
+
var import_react65 = require("react");
|
|
12318
12355
|
var import_jsx_runtime90 = require("react/jsx-runtime");
|
|
12319
12356
|
var localDateKey = (now = /* @__PURE__ */ new Date()) => `${now.getFullYear().toString().padStart(4, "0")}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")}`;
|
|
12320
12357
|
var utc = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
|
|
@@ -12332,15 +12369,15 @@ var isOpen = (el) => {
|
|
|
12332
12369
|
}
|
|
12333
12370
|
};
|
|
12334
12371
|
function useFieldPopover(popoverId, restoreFocus, onOpenChange) {
|
|
12335
|
-
const [open, setOpen] = (0,
|
|
12336
|
-
const pointerWasOpen = (0,
|
|
12337
|
-
const restoreRef = (0,
|
|
12372
|
+
const [open, setOpen] = (0, import_react65.useState)(false);
|
|
12373
|
+
const pointerWasOpen = (0, import_react65.useRef)(null);
|
|
12374
|
+
const restoreRef = (0, import_react65.useRef)(restoreFocus);
|
|
12338
12375
|
restoreRef.current = restoreFocus;
|
|
12339
|
-
const onOpenChangeRef = (0,
|
|
12376
|
+
const onOpenChangeRef = (0, import_react65.useRef)(onOpenChange);
|
|
12340
12377
|
onOpenChangeRef.current = onOpenChange;
|
|
12341
|
-
const skipRestore = (0,
|
|
12378
|
+
const skipRestore = (0, import_react65.useRef)(false);
|
|
12342
12379
|
const popoverEl = () => typeof document === "undefined" ? null : document.getElementById(popoverId);
|
|
12343
|
-
(0,
|
|
12380
|
+
(0, import_react65.useEffect)(() => {
|
|
12344
12381
|
const el = popoverEl();
|
|
12345
12382
|
if (!el) return;
|
|
12346
12383
|
const onToggle = (event) => {
|
|
@@ -12424,14 +12461,14 @@ function MonthCalendar({
|
|
|
12424
12461
|
autoFocus = false
|
|
12425
12462
|
}) {
|
|
12426
12463
|
const clamp3 = (date) => min && date < min ? min : max && date > max ? max : date;
|
|
12427
|
-
const [active, setActive] = (0,
|
|
12428
|
-
const gridRef = (0,
|
|
12429
|
-
const pendingFocus = (0,
|
|
12464
|
+
const [active, setActive] = (0, import_react65.useState)(() => clamp3(initialDate));
|
|
12465
|
+
const gridRef = (0, import_react65.useRef)(null);
|
|
12466
|
+
const pendingFocus = (0, import_react65.useRef)(autoFocus);
|
|
12430
12467
|
const month = startOfMonth(active);
|
|
12431
|
-
const days = (0,
|
|
12468
|
+
const days = (0, import_react65.useMemo)(() => buildMonthGrid(month, weekStartsOn).filter((day) => day.inMonth), [month, weekStartsOn]);
|
|
12432
12469
|
const blanks = (utc(month).getUTCDay() - weekStartsOn + 7) % 7;
|
|
12433
|
-
const weekdays = (0,
|
|
12434
|
-
(0,
|
|
12470
|
+
const weekdays = (0, import_react65.useMemo)(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
|
|
12471
|
+
(0, import_react65.useEffect)(() => {
|
|
12435
12472
|
if (!pendingFocus.current) return;
|
|
12436
12473
|
pendingFocus.current = false;
|
|
12437
12474
|
gridRef.current?.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
|
|
@@ -12538,27 +12575,27 @@ function RangeCalendar({
|
|
|
12538
12575
|
weekStartsOn = 1,
|
|
12539
12576
|
autoFocus = false
|
|
12540
12577
|
}) {
|
|
12541
|
-
const id = (0,
|
|
12542
|
-
const weekdays = (0,
|
|
12543
|
-
const [internalMonth, setInternalMonth] = (0,
|
|
12578
|
+
const id = (0, import_react66.useId)();
|
|
12579
|
+
const weekdays = (0, import_react66.useMemo)(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
|
|
12580
|
+
const [internalMonth, setInternalMonth] = (0, import_react66.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
|
|
12544
12581
|
const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
|
|
12545
|
-
const [activeDate, setActiveDate] = (0,
|
|
12546
|
-
const rootRef = (0,
|
|
12547
|
-
const pendingFocus = (0,
|
|
12582
|
+
const [activeDate, setActiveDate] = (0, import_react66.useState)(value.end ?? value.start ?? visibleMonth);
|
|
12583
|
+
const rootRef = (0, import_react66.useRef)(null);
|
|
12584
|
+
const pendingFocus = (0, import_react66.useRef)(autoFocus);
|
|
12548
12585
|
const count2 = Math.max(1, Math.min(3, months));
|
|
12549
|
-
const calendars = (0,
|
|
12586
|
+
const calendars = (0, import_react66.useMemo)(() => Array.from({ length: count2 }, (_, index) => {
|
|
12550
12587
|
const month = startOfMonth(addCalendarMonths(visibleMonth, index));
|
|
12551
12588
|
return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
|
|
12552
12589
|
}), [visibleMonth, count2]);
|
|
12553
12590
|
const todayDate = today === void 0 ? localDateKey() : today;
|
|
12554
12591
|
const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
|
|
12555
|
-
(0,
|
|
12592
|
+
(0, import_react66.useEffect)(() => {
|
|
12556
12593
|
const first = calendars[0]?.days[0]?.date;
|
|
12557
12594
|
const finalDays = calendars[calendars.length - 1]?.days;
|
|
12558
12595
|
const last = finalDays?.[finalDays.length - 1]?.date;
|
|
12559
12596
|
if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
|
|
12560
12597
|
}, [activeDate, calendars]);
|
|
12561
|
-
(0,
|
|
12598
|
+
(0, import_react66.useEffect)(() => {
|
|
12562
12599
|
if (!pendingFocus.current) return;
|
|
12563
12600
|
rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus({ preventScroll: autoFocus });
|
|
12564
12601
|
pendingFocus.current = false;
|
|
@@ -12662,15 +12699,15 @@ function DateRangeField(props) {
|
|
|
12662
12699
|
"aria-describedby": ariaDescribedBy,
|
|
12663
12700
|
"aria-invalid": ariaInvalid
|
|
12664
12701
|
} = props;
|
|
12665
|
-
const uid = (0,
|
|
12702
|
+
const uid = (0, import_react66.useId)();
|
|
12666
12703
|
const id = idProp ?? `${uid}-trigger`;
|
|
12667
12704
|
const popoverId = `${uid}-months`;
|
|
12668
12705
|
const valueId = `${uid}-value`;
|
|
12669
|
-
const anchorRef = (0,
|
|
12670
|
-
const triggerRef = (0,
|
|
12706
|
+
const anchorRef = (0, import_react66.useRef)(null);
|
|
12707
|
+
const triggerRef = (0, import_react66.useRef)(null);
|
|
12671
12708
|
const { open, hide, triggerProps } = useFieldPopover(popoverId, () => triggerRef.current?.focus({ preventScroll: true }), onOpenChange);
|
|
12672
|
-
const [labelled, setLabelled] = (0,
|
|
12673
|
-
(0,
|
|
12709
|
+
const [labelled, setLabelled] = (0, import_react66.useState)(false);
|
|
12710
|
+
(0, import_react66.useEffect)(() => {
|
|
12674
12711
|
setLabelled((triggerRef.current?.labels?.length ?? 0) > 0);
|
|
12675
12712
|
}, [id]);
|
|
12676
12713
|
const format = (date) => formatDate?.(date) ?? formatDateKey(date, locale);
|
|
@@ -12741,7 +12778,7 @@ function DateRangeField(props) {
|
|
|
12741
12778
|
}
|
|
12742
12779
|
|
|
12743
12780
|
// src/components/DatePicker.tsx
|
|
12744
|
-
var
|
|
12781
|
+
var import_react67 = require("react");
|
|
12745
12782
|
var import_jsx_runtime92 = require("react/jsx-runtime");
|
|
12746
12783
|
var DEFAULT_DATE_PICKER_LABELS = {
|
|
12747
12784
|
open: "Choose date",
|
|
@@ -12753,7 +12790,7 @@ var DEFAULT_DATE_PICKER_LABELS = {
|
|
|
12753
12790
|
notADate: "That is not a date.",
|
|
12754
12791
|
unavailable: "That date is not available."
|
|
12755
12792
|
};
|
|
12756
|
-
var DatePicker = (0,
|
|
12793
|
+
var DatePicker = (0, import_react67.forwardRef)(function DatePicker2({
|
|
12757
12794
|
value,
|
|
12758
12795
|
onValueChange,
|
|
12759
12796
|
min,
|
|
@@ -12784,18 +12821,18 @@ var DatePicker = (0, import_react66.forwardRef)(function DatePicker2({
|
|
|
12784
12821
|
className,
|
|
12785
12822
|
style
|
|
12786
12823
|
}, forwardedRef) {
|
|
12787
|
-
const uid = (0,
|
|
12824
|
+
const uid = (0, import_react67.useId)();
|
|
12788
12825
|
const id = idProp ?? `${uid}-input`;
|
|
12789
12826
|
const popoverId = `${uid}-calendar`;
|
|
12790
12827
|
const errorId = `${uid}-error`;
|
|
12791
12828
|
const labels = { ...DEFAULT_DATE_PICKER_LABELS, ...useUixLabels().datePicker, ...labelOverrides };
|
|
12792
|
-
const anchorRef = (0,
|
|
12793
|
-
const inputRef = (0,
|
|
12794
|
-
(0,
|
|
12829
|
+
const anchorRef = (0, import_react67.useRef)(null);
|
|
12830
|
+
const inputRef = (0, import_react67.useRef)(null);
|
|
12831
|
+
(0, import_react67.useImperativeHandle)(forwardedRef, () => inputRef.current);
|
|
12795
12832
|
const format = (date) => formatDate?.(date) ?? formatDateKey(date, locale);
|
|
12796
|
-
const [text, setText] = (0,
|
|
12797
|
-
const [problem, setProblemState] = (0,
|
|
12798
|
-
const reported = (0,
|
|
12833
|
+
const [text, setText] = (0, import_react67.useState)(() => value ? format(value) : "");
|
|
12834
|
+
const [problem, setProblemState] = (0, import_react67.useState)(null);
|
|
12835
|
+
const reported = (0, import_react67.useRef)(null);
|
|
12799
12836
|
const setProblem = (next) => {
|
|
12800
12837
|
if (next !== reported.current) {
|
|
12801
12838
|
reported.current = next;
|
|
@@ -12803,7 +12840,7 @@ var DatePicker = (0, import_react66.forwardRef)(function DatePicker2({
|
|
|
12803
12840
|
}
|
|
12804
12841
|
setProblemState(next);
|
|
12805
12842
|
};
|
|
12806
|
-
(0,
|
|
12843
|
+
(0, import_react67.useEffect)(() => {
|
|
12807
12844
|
setText(value ? format(value) : "");
|
|
12808
12845
|
setProblem(null);
|
|
12809
12846
|
}, [value, locale]);
|
|
@@ -12953,7 +12990,7 @@ var DEFAULT_DATE_TIME_PICKER_LABELS = {
|
|
|
12953
12990
|
timeOf: "{label}, time",
|
|
12954
12991
|
timeZone: "Time zone: {zone}"
|
|
12955
12992
|
};
|
|
12956
|
-
var DateTimePicker = (0,
|
|
12993
|
+
var DateTimePicker = (0, import_react67.forwardRef)(function DateTimePicker2({
|
|
12957
12994
|
value,
|
|
12958
12995
|
onValueChange,
|
|
12959
12996
|
timeZone,
|
|
@@ -12977,19 +13014,19 @@ var DateTimePicker = (0, import_react66.forwardRef)(function DateTimePicker2({
|
|
|
12977
13014
|
style,
|
|
12978
13015
|
...dateProps
|
|
12979
13016
|
}, forwardedRef) {
|
|
12980
|
-
const uid = (0,
|
|
13017
|
+
const uid = (0, import_react67.useId)();
|
|
12981
13018
|
const id = idProp ?? `${uid}-date`;
|
|
12982
13019
|
const zoneId = `${uid}-zone`;
|
|
12983
13020
|
const labels = { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...useUixLabels().dateTimePicker, ...labelOverrides };
|
|
12984
13021
|
const { date, time } = splitDateTime(value);
|
|
12985
|
-
const dateRef = (0,
|
|
12986
|
-
(0,
|
|
12987
|
-
const [pendingTime, setPendingTime] = (0,
|
|
13022
|
+
const dateRef = (0, import_react67.useRef)(null);
|
|
13023
|
+
(0, import_react67.useImperativeHandle)(forwardedRef, () => dateRef.current);
|
|
13024
|
+
const [pendingTime, setPendingTime] = (0, import_react67.useState)("");
|
|
12988
13025
|
const shownTime = date ? time : pendingTime;
|
|
12989
|
-
const [fieldLabel, setFieldLabel] = (0,
|
|
12990
|
-
const [viewerZone, setViewerZone] = (0,
|
|
13026
|
+
const [fieldLabel, setFieldLabel] = (0, import_react67.useState)("");
|
|
13027
|
+
const [viewerZone, setViewerZone] = (0, import_react67.useState)(null);
|
|
12991
13028
|
const grouped = !!ariaLabel || !!ariaLabelledBy;
|
|
12992
|
-
(0,
|
|
13029
|
+
(0, import_react67.useEffect)(() => {
|
|
12993
13030
|
if (!grouped) setFieldLabel(dateRef.current?.labels?.[0]?.textContent?.trim() ?? "");
|
|
12994
13031
|
if (!timeZone) {
|
|
12995
13032
|
try {
|
|
@@ -13068,7 +13105,7 @@ var DateTimePicker = (0, import_react66.forwardRef)(function DateTimePicker2({
|
|
|
13068
13105
|
});
|
|
13069
13106
|
|
|
13070
13107
|
// src/components/RelationshipGraph.tsx
|
|
13071
|
-
var
|
|
13108
|
+
var import_react69 = require("react");
|
|
13072
13109
|
|
|
13073
13110
|
// src/relationship-graph-model.ts
|
|
13074
13111
|
function boundRelationshipGraph(nodes, edges, maxNodes = 40) {
|
|
@@ -13549,7 +13586,7 @@ function layeredNeighbor(layout, currentId, key) {
|
|
|
13549
13586
|
}
|
|
13550
13587
|
|
|
13551
13588
|
// src/components/RelationshipGraphLayered.tsx
|
|
13552
|
-
var
|
|
13589
|
+
var import_react68 = require("react");
|
|
13553
13590
|
|
|
13554
13591
|
// src/components/RelationshipGraphList.tsx
|
|
13555
13592
|
var import_jsx_runtime93 = require("react/jsx-runtime");
|
|
@@ -13636,11 +13673,11 @@ function LayeredRelationshipGraph({
|
|
|
13636
13673
|
focusId,
|
|
13637
13674
|
onFocusChange
|
|
13638
13675
|
}) {
|
|
13639
|
-
const hintId = (0,
|
|
13640
|
-
const bounded = (0,
|
|
13641
|
-
const [localExpanded, setLocalExpanded] = (0,
|
|
13676
|
+
const hintId = (0, import_react68.useId)();
|
|
13677
|
+
const bounded = (0, import_react68.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
13678
|
+
const [localExpanded, setLocalExpanded] = (0, import_react68.useState)(EMPTY_IDS2);
|
|
13642
13679
|
const expanded = expandedClusterIds ?? localExpanded;
|
|
13643
|
-
const layout = (0,
|
|
13680
|
+
const layout = (0, import_react68.useMemo)(
|
|
13644
13681
|
() => layoutLayeredGraph(bounded.nodes, bounded.edges, {
|
|
13645
13682
|
...rootId !== void 0 ? { rootId } : {},
|
|
13646
13683
|
...clusterThreshold !== void 0 ? { clusterThreshold } : {},
|
|
@@ -13649,29 +13686,29 @@ function LayeredRelationshipGraph({
|
|
|
13649
13686
|
}),
|
|
13650
13687
|
[bounded, rootId, clusterThreshold, expanded, density]
|
|
13651
13688
|
);
|
|
13652
|
-
const itemById = (0,
|
|
13653
|
-
const viewportRef = (0,
|
|
13654
|
-
const itemRefs = (0,
|
|
13655
|
-
const [size, setSize] = (0,
|
|
13656
|
-
const [view, setView] = (0,
|
|
13657
|
-
const [animate, setAnimate] = (0,
|
|
13658
|
-
const [localFocus, setLocalFocus] = (0,
|
|
13659
|
-
const [hoverId, setHoverId] = (0,
|
|
13660
|
-
const viewRef = (0,
|
|
13689
|
+
const itemById = (0, import_react68.useMemo)(() => new Map(layout.items.map((item) => [item.id, item])), [layout]);
|
|
13690
|
+
const viewportRef = (0, import_react68.useRef)(null);
|
|
13691
|
+
const itemRefs = (0, import_react68.useRef)(/* @__PURE__ */ new Map());
|
|
13692
|
+
const [size, setSize] = (0, import_react68.useState)({ width: 0, height: 0 });
|
|
13693
|
+
const [view, setView] = (0, import_react68.useState)({ x: 0, y: 0, zoom: 1 });
|
|
13694
|
+
const [animate, setAnimate] = (0, import_react68.useState)(false);
|
|
13695
|
+
const [localFocus, setLocalFocus] = (0, import_react68.useState)(void 0);
|
|
13696
|
+
const [hoverId, setHoverId] = (0, import_react68.useState)(void 0);
|
|
13697
|
+
const viewRef = (0, import_react68.useRef)(view);
|
|
13661
13698
|
viewRef.current = view;
|
|
13662
|
-
const layoutRef = (0,
|
|
13699
|
+
const layoutRef = (0, import_react68.useRef)(layout);
|
|
13663
13700
|
layoutRef.current = layout;
|
|
13664
|
-
const pendingFocus = (0,
|
|
13665
|
-
const initialisedFor = (0,
|
|
13701
|
+
const pendingFocus = (0, import_react68.useRef)(void 0);
|
|
13702
|
+
const initialisedFor = (0, import_react68.useRef)(void 0);
|
|
13666
13703
|
const rootItemId = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
|
|
13667
13704
|
const requestedFocus = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : localFocus;
|
|
13668
13705
|
const focusedId = requestedFocus !== void 0 && itemById.has(requestedFocus) ? requestedFocus : rootItemId;
|
|
13669
13706
|
const selectedItemId = selectedId !== void 0 ? layout.itemOf[selectedId] : void 0;
|
|
13670
|
-
const activeIds = (0,
|
|
13707
|
+
const activeIds = (0, import_react68.useMemo)(
|
|
13671
13708
|
() => new Set([hoverId, selectedItemId].filter((id) => id !== void 0)),
|
|
13672
13709
|
[hoverId, selectedItemId]
|
|
13673
13710
|
);
|
|
13674
|
-
(0,
|
|
13711
|
+
(0, import_react68.useEffect)(() => {
|
|
13675
13712
|
const element = viewportRef.current;
|
|
13676
13713
|
if (!element) return;
|
|
13677
13714
|
const measure = () => setSize({ width: element.clientWidth, height: element.clientHeight });
|
|
@@ -13681,18 +13718,18 @@ function LayeredRelationshipGraph({
|
|
|
13681
13718
|
observer.observe(element);
|
|
13682
13719
|
return () => observer.disconnect();
|
|
13683
13720
|
}, []);
|
|
13684
|
-
(0,
|
|
13721
|
+
(0, import_react68.useEffect)(() => {
|
|
13685
13722
|
if (size.width === 0) return;
|
|
13686
13723
|
const key = `${layout.rootId ?? ""}`;
|
|
13687
13724
|
if (initialisedFor.current === key) return;
|
|
13688
13725
|
initialisedFor.current = key;
|
|
13689
13726
|
setView(initialView(layout, size));
|
|
13690
13727
|
}, [layout, size]);
|
|
13691
|
-
const moveView = (0,
|
|
13728
|
+
const moveView = (0, import_react68.useCallback)((next, smooth) => {
|
|
13692
13729
|
setAnimate(smooth);
|
|
13693
13730
|
setView(next);
|
|
13694
13731
|
}, []);
|
|
13695
|
-
const ensureVisible = (0,
|
|
13732
|
+
const ensureVisible = (0, import_react68.useCallback)((id, smooth) => {
|
|
13696
13733
|
const element = viewportRef.current;
|
|
13697
13734
|
const item = layoutRef.current.items.find((candidate) => candidate.id === id);
|
|
13698
13735
|
if (!element || !item) return;
|
|
@@ -13711,7 +13748,7 @@ function LayeredRelationshipGraph({
|
|
|
13711
13748
|
else if (bottom > heightPx - FOCUS_MARGIN) nextY -= bottom - (heightPx - FOCUS_MARGIN);
|
|
13712
13749
|
if (nextX !== x || nextY !== y) moveView({ x: nextX, y: nextY, zoom }, smooth);
|
|
13713
13750
|
}, [moveView]);
|
|
13714
|
-
const focusItem = (0,
|
|
13751
|
+
const focusItem = (0, import_react68.useCallback)((id) => {
|
|
13715
13752
|
setLocalFocus(id);
|
|
13716
13753
|
onFocusChange?.(id);
|
|
13717
13754
|
requestAnimationFrame(() => {
|
|
@@ -13719,7 +13756,7 @@ function LayeredRelationshipGraph({
|
|
|
13719
13756
|
ensureVisible(id, true);
|
|
13720
13757
|
});
|
|
13721
13758
|
}, [ensureVisible, onFocusChange]);
|
|
13722
|
-
(0,
|
|
13759
|
+
(0, import_react68.useEffect)(() => {
|
|
13723
13760
|
const wanted = pendingFocus.current;
|
|
13724
13761
|
if (wanted !== void 0 && itemById.has(wanted)) {
|
|
13725
13762
|
pendingFocus.current = void 0;
|
|
@@ -13729,8 +13766,8 @@ function LayeredRelationshipGraph({
|
|
|
13729
13766
|
const controlledTarget = focusId !== void 0 ? layout.itemOf[focusId] ?? focusId : void 0;
|
|
13730
13767
|
const controlledPresent = controlledTarget !== void 0 && itemById.has(controlledTarget);
|
|
13731
13768
|
const controlledKey = `${controlledTarget ?? ""}|${controlledPresent}`;
|
|
13732
|
-
const lastControlledKey = (0,
|
|
13733
|
-
(0,
|
|
13769
|
+
const lastControlledKey = (0, import_react68.useRef)(controlledKey);
|
|
13770
|
+
(0, import_react68.useEffect)(() => {
|
|
13734
13771
|
if (lastControlledKey.current === controlledKey) return;
|
|
13735
13772
|
lastControlledKey.current = controlledKey;
|
|
13736
13773
|
if (!controlledPresent || controlledTarget === void 0) return;
|
|
@@ -13739,7 +13776,7 @@ function LayeredRelationshipGraph({
|
|
|
13739
13776
|
ensureVisible(controlledTarget, true);
|
|
13740
13777
|
});
|
|
13741
13778
|
}, [controlledKey, controlledTarget, controlledPresent, ensureVisible]);
|
|
13742
|
-
(0,
|
|
13779
|
+
(0, import_react68.useEffect)(() => {
|
|
13743
13780
|
const element = viewportRef.current;
|
|
13744
13781
|
if (!element) return;
|
|
13745
13782
|
const onWheel = (event) => {
|
|
@@ -13757,8 +13794,8 @@ function LayeredRelationshipGraph({
|
|
|
13757
13794
|
element.addEventListener("wheel", onWheel, { passive: false });
|
|
13758
13795
|
return () => element.removeEventListener("wheel", onWheel);
|
|
13759
13796
|
}, []);
|
|
13760
|
-
const pointers = (0,
|
|
13761
|
-
const pinchDistance = (0,
|
|
13797
|
+
const pointers = (0, import_react68.useRef)(/* @__PURE__ */ new Map());
|
|
13798
|
+
const pinchDistance = (0, import_react68.useRef)(void 0);
|
|
13762
13799
|
const onPointerDown = (event) => {
|
|
13763
13800
|
if (event.target.closest("button")) return;
|
|
13764
13801
|
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
@@ -14059,7 +14096,7 @@ function radialViewBox(nodes) {
|
|
|
14059
14096
|
return `${round(minX)} ${round(minY)} ${width} ${height}`;
|
|
14060
14097
|
}
|
|
14061
14098
|
function RelationshipGraph(props) {
|
|
14062
|
-
const labels = (0,
|
|
14099
|
+
const labels = (0, import_react69.useMemo)(() => ({ ...DEFAULT_RELATIONSHIP_GRAPH_LABELS, ...props.labels }), [props.labels]);
|
|
14063
14100
|
const stateClass = cx("uix-relationship-graph uix-relationship-graph--state", props.className);
|
|
14064
14101
|
if (props.loading) return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: stateClass, role: "status", children: labels.loading });
|
|
14065
14102
|
if (props.error) {
|
|
@@ -14093,17 +14130,17 @@ function RadialRelationshipGraph({
|
|
|
14093
14130
|
labels,
|
|
14094
14131
|
showList = true
|
|
14095
14132
|
}) {
|
|
14096
|
-
const bounded = (0,
|
|
14097
|
-
const positioned = (0,
|
|
14098
|
-
const typeColor = (0,
|
|
14133
|
+
const bounded = (0, import_react69.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
14134
|
+
const positioned = (0, import_react69.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
|
|
14135
|
+
const typeColor = (0, import_react69.useMemo)(
|
|
14099
14136
|
() => new Map(legend.map((item, index) => [item.id, `var(--uix-chart-${index % 8 + 1})`])),
|
|
14100
14137
|
[legend]
|
|
14101
14138
|
);
|
|
14102
|
-
const positionedById = (0,
|
|
14103
|
-
const [zoom, setZoom] = (0,
|
|
14104
|
-
const [pan, setPan] = (0,
|
|
14105
|
-
const [focusedId, setFocusedId] = (0,
|
|
14106
|
-
const svgRef = (0,
|
|
14139
|
+
const positionedById = (0, import_react69.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
|
|
14140
|
+
const [zoom, setZoom] = (0, import_react69.useState)(1);
|
|
14141
|
+
const [pan, setPan] = (0, import_react69.useState)({ x: 0, y: 0 });
|
|
14142
|
+
const [focusedId, setFocusedId] = (0, import_react69.useState)(selectedId ?? positioned[0]?.id);
|
|
14143
|
+
const svgRef = (0, import_react69.useRef)(null);
|
|
14107
14144
|
const select = (id) => {
|
|
14108
14145
|
const node = bounded.nodes.find((item) => item.id === id);
|
|
14109
14146
|
if (node) onSelect?.(node);
|
|
@@ -14174,7 +14211,7 @@ function RadialRelationshipGraph({
|
|
|
14174
14211
|
}
|
|
14175
14212
|
|
|
14176
14213
|
// src/components/MatchReview.tsx
|
|
14177
|
-
var
|
|
14214
|
+
var import_react70 = require("react");
|
|
14178
14215
|
var import_jsx_runtime96 = require("react/jsx-runtime");
|
|
14179
14216
|
var DEFAULT_MATCH_REVIEW_LABELS = {
|
|
14180
14217
|
region: "Match review",
|
|
@@ -14237,11 +14274,11 @@ function MatchReview({
|
|
|
14237
14274
|
const plural = (n, one, many) => fillLabel(n === 1 ? one : many, { count: n });
|
|
14238
14275
|
const decisionLabel = { accepted: labels.decisionAccepted, dismissed: labels.decisionDismissed, split: labels.decisionSplit, other: labels.decisionOther };
|
|
14239
14276
|
const actionLabel = { accept: labels.accept, dismiss: labels.dismiss, split: labels.split, "pick-other": labels.pickOther };
|
|
14240
|
-
const [internalSelection, setInternalSelection] = (0,
|
|
14241
|
-
const [announcement, setAnnouncement] = (0,
|
|
14242
|
-
const [bulkPending, setBulkPending] = (0,
|
|
14277
|
+
const [internalSelection, setInternalSelection] = (0, import_react70.useState)(/* @__PURE__ */ new Set());
|
|
14278
|
+
const [announcement, setAnnouncement] = (0, import_react70.useState)("");
|
|
14279
|
+
const [bulkPending, setBulkPending] = (0, import_react70.useState)(false);
|
|
14243
14280
|
const selection = selectedIds ?? internalSelection;
|
|
14244
|
-
const pending = (0,
|
|
14281
|
+
const pending = (0, import_react70.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
|
|
14245
14282
|
const setSelection = (next) => {
|
|
14246
14283
|
if (selectedIds === void 0) setInternalSelection(next);
|
|
14247
14284
|
onSelectionChange?.(next);
|
|
@@ -14330,7 +14367,7 @@ function MatchReview({
|
|
|
14330
14367
|
}
|
|
14331
14368
|
|
|
14332
14369
|
// src/components/MetricInput.tsx
|
|
14333
|
-
var
|
|
14370
|
+
var import_react71 = require("react");
|
|
14334
14371
|
|
|
14335
14372
|
// src/metric-model.ts
|
|
14336
14373
|
function decimals(value) {
|
|
@@ -14374,11 +14411,11 @@ function MetricInput({
|
|
|
14374
14411
|
className,
|
|
14375
14412
|
id: providedId
|
|
14376
14413
|
}) {
|
|
14377
|
-
const generatedId = (0,
|
|
14414
|
+
const generatedId = (0, import_react71.useId)();
|
|
14378
14415
|
const id = providedId ?? generatedId;
|
|
14379
14416
|
const errorId = `${id}-error`;
|
|
14380
|
-
const [text, setText] = (0,
|
|
14381
|
-
(0,
|
|
14417
|
+
const [text, setText] = (0, import_react71.useState)(() => format(value));
|
|
14418
|
+
(0, import_react71.useEffect)(() => setText(format(value)), [value, format]);
|
|
14382
14419
|
const commit = (input) => {
|
|
14383
14420
|
const parsed = parse(input);
|
|
14384
14421
|
if (input.trim() === "" || parsed !== null) {
|
|
@@ -14487,7 +14524,7 @@ function LicensePositionBar({
|
|
|
14487
14524
|
}
|
|
14488
14525
|
|
|
14489
14526
|
// src/components/BrandProfiles.tsx
|
|
14490
|
-
var
|
|
14527
|
+
var import_react73 = require("react");
|
|
14491
14528
|
|
|
14492
14529
|
// src/color-model.ts
|
|
14493
14530
|
var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
@@ -14556,7 +14593,7 @@ function meetsContrast(background, foreground, minimum = 4.5) {
|
|
|
14556
14593
|
}
|
|
14557
14594
|
|
|
14558
14595
|
// src/components/ColorPicker.tsx
|
|
14559
|
-
var
|
|
14596
|
+
var import_react72 = require("react");
|
|
14560
14597
|
var import_jsx_runtime99 = require("react/jsx-runtime");
|
|
14561
14598
|
var DEFAULT_COLOR_PICKER_LABELS = {
|
|
14562
14599
|
trigger: "{label}: {color}",
|
|
@@ -14588,17 +14625,17 @@ function ColorPicker({
|
|
|
14588
14625
|
labels: labelOverrides
|
|
14589
14626
|
}) {
|
|
14590
14627
|
const labels = { ...DEFAULT_COLOR_PICKER_LABELS, ...labelOverrides };
|
|
14591
|
-
const id = (0,
|
|
14592
|
-
const triggerRef = (0,
|
|
14593
|
-
const dialogRef = (0,
|
|
14594
|
-
const [open, setOpen] = (0,
|
|
14628
|
+
const id = (0, import_react72.useId)();
|
|
14629
|
+
const triggerRef = (0, import_react72.useRef)(null);
|
|
14630
|
+
const dialogRef = (0, import_react72.useRef)(null);
|
|
14631
|
+
const [open, setOpen] = (0, import_react72.useState)(false);
|
|
14595
14632
|
const normalized = normalizeHex(value) ?? "#000000";
|
|
14596
|
-
const [hexText, setHexText] = (0,
|
|
14597
|
-
const hsv = (0,
|
|
14633
|
+
const [hexText, setHexText] = (0, import_react72.useState)(normalized);
|
|
14634
|
+
const hsv = (0, import_react72.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
|
|
14598
14635
|
const ratio = contrastRatio(normalized, foreground) ?? 0;
|
|
14599
14636
|
const passes = ratio >= minimumContrast;
|
|
14600
|
-
(0,
|
|
14601
|
-
(0,
|
|
14637
|
+
(0, import_react72.useEffect)(() => setHexText(normalized), [normalized]);
|
|
14638
|
+
(0, import_react72.useEffect)(() => {
|
|
14602
14639
|
if (!open) return;
|
|
14603
14640
|
const dialog = dialogRef.current;
|
|
14604
14641
|
dialog?.querySelector("input,button")?.focus();
|
|
@@ -14818,7 +14855,7 @@ function BrandProfileEditor({
|
|
|
14818
14855
|
labels: labelOverrides
|
|
14819
14856
|
}) {
|
|
14820
14857
|
const labels = { ...DEFAULT_BRAND_PROFILE_EDITOR_LABELS, ...labelOverrides };
|
|
14821
|
-
const [announcement, setAnnouncement] = (0,
|
|
14858
|
+
const [announcement, setAnnouncement] = (0, import_react73.useState)("");
|
|
14822
14859
|
const update = (patch) => onChange({ ...value, ...patch });
|
|
14823
14860
|
const apply = () => {
|
|
14824
14861
|
if (applyTarget !== null) applyBrandProfile(value, applyTarget);
|
|
@@ -14890,7 +14927,7 @@ function BrandProfileEditor({
|
|
|
14890
14927
|
var BrandProfiles = BrandProfileEditor;
|
|
14891
14928
|
|
|
14892
14929
|
// src/components/DiffViewer.tsx
|
|
14893
|
-
var
|
|
14930
|
+
var import_react74 = require("react");
|
|
14894
14931
|
|
|
14895
14932
|
// src/diff-model.ts
|
|
14896
14933
|
function isJsonObject(value) {
|
|
@@ -14986,9 +15023,9 @@ function DiffViewer({
|
|
|
14986
15023
|
const labels = { ...DEFAULT_DIFF_VIEWER_LABELS, ...labelOverrides };
|
|
14987
15024
|
const resolutionLabel = { accept: labels.resolutionAccept, skip: labels.resolutionSkip, pending: labels.resolutionPending };
|
|
14988
15025
|
const buttonSize = controlSize === "md" ? void 0 : `uix-btn--${controlSize}`;
|
|
14989
|
-
const id = (0,
|
|
14990
|
-
const entries = (0,
|
|
14991
|
-
const [internalResolutions, setInternalResolutions] = (0,
|
|
15026
|
+
const id = (0, import_react74.useId)();
|
|
15027
|
+
const entries = (0, import_react74.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
|
|
15028
|
+
const [internalResolutions, setInternalResolutions] = (0, import_react74.useState)({});
|
|
14992
15029
|
const resolutions = controlledResolutions ?? internalResolutions;
|
|
14993
15030
|
const summary = summarizeDiff(entries, resolutions);
|
|
14994
15031
|
const resolve = (path, resolution) => {
|
|
@@ -15051,7 +15088,7 @@ function DiffViewer({
|
|
|
15051
15088
|
}
|
|
15052
15089
|
|
|
15053
15090
|
// src/components/TextDiff.tsx
|
|
15054
|
-
var
|
|
15091
|
+
var import_react75 = require("react");
|
|
15055
15092
|
|
|
15056
15093
|
// src/text-diff-model.ts
|
|
15057
15094
|
var WORD_TOKENS = /\s+|[\p{L}\p{M}\p{N}_]+|[^\s\p{L}\p{M}\p{N}_]/gu;
|
|
@@ -15330,7 +15367,7 @@ function Marked({ segments, side, labels, whole }) {
|
|
|
15330
15367
|
": "
|
|
15331
15368
|
] }),
|
|
15332
15369
|
segment.text
|
|
15333
|
-
] }, i) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
15370
|
+
] }, i) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react75.Fragment, { children: segment.text }, i)) });
|
|
15334
15371
|
}
|
|
15335
15372
|
function Cell({ line, side, kind, labels }) {
|
|
15336
15373
|
if (!line) return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "uix-text-diff__cell", "data-side": side, "data-empty": "", "aria-hidden": "true" });
|
|
@@ -15342,9 +15379,9 @@ function Cell({ line, side, kind, labels }) {
|
|
|
15342
15379
|
] });
|
|
15343
15380
|
}
|
|
15344
15381
|
function Rows({ rows, view, labels, focusFirst }) {
|
|
15345
|
-
const [open, setOpen] = (0,
|
|
15346
|
-
const first = (0,
|
|
15347
|
-
(0,
|
|
15382
|
+
const [open, setOpen] = (0, import_react75.useState)(() => /* @__PURE__ */ new Set());
|
|
15383
|
+
const first = (0, import_react75.useRef)(null);
|
|
15384
|
+
(0, import_react75.useEffect)(() => {
|
|
15348
15385
|
if (focusFirst) first.current?.focus();
|
|
15349
15386
|
}, [focusFirst]);
|
|
15350
15387
|
const firstProps = (index) => focusFirst && index === 0 ? { ref: first, tabIndex: -1 } : {};
|
|
@@ -15357,7 +15394,7 @@ function Rows({ rows, view, labels, focusFirst }) {
|
|
|
15357
15394
|
const after = row.kind === "delete" ? void 0 : row.after;
|
|
15358
15395
|
if (view === "unified") {
|
|
15359
15396
|
if (row.kind === "equal") return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "uix-text-diff__row", "data-kind": "equal", ...firstProps(index), children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Cell, { line: after, side: "after", kind: "equal", labels }) }, index);
|
|
15360
|
-
return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
|
|
15397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(import_react75.Fragment, { children: [
|
|
15361
15398
|
before && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "uix-text-diff__row", "data-kind": "delete", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Cell, { line: before, side: "before", kind: row.kind, labels }) }),
|
|
15362
15399
|
after && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "uix-text-diff__row", "data-kind": "insert", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Cell, { line: after, side: "after", kind: row.kind, labels }) })
|
|
15363
15400
|
] }, index);
|
|
@@ -15386,8 +15423,8 @@ function TextDiff({
|
|
|
15386
15423
|
}) {
|
|
15387
15424
|
const uixLabels = useUixLabels();
|
|
15388
15425
|
const labels = { ...DEFAULT_TEXT_DIFF_LABELS, ...uixLabels.textDiff, ...labelOverrides };
|
|
15389
|
-
const result = (0,
|
|
15390
|
-
const rows = (0,
|
|
15426
|
+
const result = (0, import_react75.useMemo)(() => diffText(before, after, { granularity, maxTokens, maxEdits }), [before, after, granularity, maxTokens, maxEdits]);
|
|
15427
|
+
const rows = (0, import_react75.useMemo)(() => granularity === "line" && result.status === "ok" ? textDiffRows(result, { context }) : [], [result, granularity, context]);
|
|
15391
15428
|
const heads = /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "uix-text-diff__heads", "aria-hidden": view === "unified" || void 0, children: [
|
|
15392
15429
|
/* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("span", { className: "uix-text-diff__head", "data-side": "before", children: [
|
|
15393
15430
|
view === "unified" && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { "aria-hidden": "true", children: "\u2212 " }),
|
|
@@ -15405,7 +15442,7 @@ function TextDiff({
|
|
|
15405
15442
|
else {
|
|
15406
15443
|
const prose = (side2) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "uix-text-diff__prose", "data-side": side2, children: result.ops.map((op, i) => {
|
|
15407
15444
|
const text = op.tokens.join("");
|
|
15408
|
-
if (op.type === "equal") return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
|
|
15445
|
+
if (op.type === "equal") return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react75.Fragment, { children: text }, i);
|
|
15409
15446
|
if (op.type === "delete" && side2 === "after") return null;
|
|
15410
15447
|
if (op.type === "insert" && side2 === "before") return null;
|
|
15411
15448
|
return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Marked, { segments: [{ text, changed: true }], side: op.type === "delete" ? "before" : "after", labels }, i);
|