@tensor_1/react 2.36.0 → 2.37.0

package/README.md

@@ -460,6 +460,18 @@ const spanLayout = layoutMonthSpans(spansInSalienceOrder, grid, { timeZone, week
 - **`<List roving>`**: the items are one tab stop (ArrowUp/ArrowDown, Home, End; Enter or Space activates the
   focused item's `onClick`). A control inside an item keeps its own tab stop and keys. Items may be wrapped or
   rendered later by a child component.
+- **Print (HAR-1541).** The stylesheet has `@media print` rules; add no print CSS of your own. On paper the same
+  markup has no scroller, fits the page width, and keeps a week row or an agenda row on one page. The colours are
+  the `--uix-print-*` tokens (light, whatever theme the screen has). Nothing depends on a background: the `high`
+  band is a heavy edge on a paper surface (on paper `--calendar-band-high-fill` is the paper's and the edge reads
+  the new `--calendar-band-high-edge`; no screen rule reads it), each window pattern has an edge style of its own (`solid`, `diagonal` dashed, `cross`
+  double, `dotted` dotted), and the hour lines are drawn as lines. Month chips wrap to show the whole title, and
+  a time-grid item is at least as tall as its time and grows to hold its words (one too short for a line on a
+  screen prints them too). The header's buttons, the "now" line and a pending move are not printed; the period
+  title, the zone label and the legend are. A long agenda mounts every row while the page prints (`beforeprint`,
+  or print media) and is a window of rows again afterwards. One limit: `window.print()` called from inside a
+  React effect, on mount or later, runs before those rows are there. Such a page calls it from an event handler
+  or a timer, or passes `virtualizeAbove={Infinity}`.
 - **Colour.** Every calendar colour is named once at the top of `scheduling-calendar.css` (`--calendar-*`).
 - **Deprecated, still working in 2.x:** `entry.state` / `SchedulingEntryState`, `overlay.kind` /
   `SchedulingOverlayKind` and the `previous` / `next` labels. An entry with `state` is no longer tinted: the two
@@ -502,6 +514,7 @@ time zone, the same proposal model for moves.
 - **Notice and counts:** `notice` is shown above the axis; `columnNotes` puts a note on the column of a day (`YYYY-MM-DD` in `timeZone`).
 - **Row heights:** with `groups`, `laneIds` or a virtual window every row has a fixed height (a lane is its sub-rows, a group head one line) and a lane label that does not fit is cut with an ellipsis. A timeline that uses none of them keeps rows that grow with their label.
 - **Colour:** every colour is named once at the top of `scheduling-timeline.css` (`--timeline-*`). Forced colours are handled in `forced-colors.css`, as for the calendar.
+- **Print (HAR-1541).** The stylesheet has `@media print` rules; add no print CSS of your own. On paper the timeline has no scroller and nothing sticks: the axis is fitted to the page width and the bars follow (every position is a share of the axis), and a lane stays on one page. The colours are the `--uix-print-*` tokens (light, whatever theme the screen has). Nothing depends on a background: the `high` band is a heavy edge on a paper surface (on paper `--timeline-band-high-fill` is the paper's and the edge reads the new `--timeline-band-high-edge`; no screen rule reads it), each window pattern has an edge style of its own, and the grid lines are drawn as lines. A note on the column of a day is not cut at its column (notes on neighbouring days can meet on a narrow page). The "now" line and a pending move are not printed. A timeline over `virtualizeAbove` rows mounts every row and bar while the page prints and windows again afterwards; a page that calls `window.print()` from inside a React effect calls it from an event handler or a timer, or passes `virtualizeAbove={Infinity}`. Limits: a bar keeps its share of the axis, so on a narrow page a short bar shows its time and not its title (the title is still the bar's name); and the bars are packed into sub-rows for the width the timeline had on the screen, so print from a window about as wide as the page when bars are short and close together.
 - **Deprecated, still working in 2.x:** `item.state` / `SchedulingEntryState`, `overlay.kind` / `SchedulingTimelineOverlayKind` and the `states` / `overlays` labels. A bar with `state` is no longer tinted: the two problem states show a marker with the word for that state, and the kinds are told apart by pattern.
 - Pure helpers are exported for tests and server code: `timelineTicks`, `timelineSubTicks`, `timelineRepeatedHourOffset`, `placeSpan`, `layoutLane`, `shiftSpan`, `snapToStep`, `pixelsToMs`, `defaultTimelineStep`, `timelineStepDelta`.
 

package/dist/components/SchedulingAgenda.js

@@ -4,6 +4,7 @@ import { createElement, useEffect, useLayoutEffect, useRef, useState } from "rea
 import { addCalendarDays, zonedDateKey, zonedTimeOfDay } from "../calendar-model.js";
 import { itemDaySpan } from "../scheduling-calendar-model.js";
 import { useVirtualRows } from "../hooks/useVirtualRows.js";
+import { usePrinting } from "../hooks/usePrinting.js";
 import { fillLabel } from "../fill-label.js";
 import { syncRovingStop } from "../roving.js";
 const AGENDA_VIRTUAL_ROW = 44;
@@ -58,7 +59,8 @@ function AgendaBody({
     });
   }
   const [narrow, setNarrow] = useState(false);
-  const virtual = useVirtualRows(flatRows, { rowHeight: narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW, threshold: 0, estimatedViewportHeight: AGENDA_VIRTUAL_VIEWPORT });
+  const printing = usePrinting(flat);
+  const virtual = useVirtualRows(flatRows, { rowHeight: narrow ? AGENDA_NARROW_ROW : AGENDA_VIRTUAL_ROW, threshold: 0, estimatedViewportHeight: AGENDA_VIRTUAL_VIEWPORT, enabled: !printing });
   const scroller = virtual.containerRef;
   useLayoutEffect(() => {
     const box = scroller.current;

package/dist/components/SchedulingTimeGrid.js

@@ -25,16 +25,18 @@ const GridItem = memo(function GridItem2({ entry, segment, column, alone, name,
     "--uix-scheduling-calendar-lane": segment.lane,
     "--uix-scheduling-calendar-lanes": segment.laneCount
   });
-  const text = renderEntry?.(entry, { availableLines: lines }) ?? (lines > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const custom = renderEntry?.(entry, { availableLines: lines });
+  const text = custom ?? /* @__PURE__ */ jsxs(Fragment, { children: [
     !continuation && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__time", children: zonedTimeOfDay(entry.start, timeZone) }),
       " "
     ] }),
     /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__title", children: entry.title })
-  ] }) : null);
+  ] });
+  const noRoom = lines === 0 && (custom === void 0 || custom === null) ? "none" : void 0;
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    continuation && lines > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__tg-from", children: continuesFrom }),
-    (!continuation || alone) && text != null && text !== false && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__entry-text", children: text }),
+    continuation && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__tg-from", "data-room": lines === 0 ? "none" : void 0, children: continuesFrom }),
+    (!continuation || alone) && text != null && text !== false && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__entry-text", "data-room": noRoom, children: text }),
     markers.length > 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-calendar__markers", children: markers.map((marker) => /* @__PURE__ */ jsx("span", { children: renderMarker(marker) }, marker.id)) })
   ] });
   const shared = {

package/dist/components/SchedulingTimeline.js

@@ -6,6 +6,7 @@ import { proposeMove } from "../scheduling-calendar-model.js";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
 import { useUixLabels } from "../labels-context.js";
+import { usePrinting } from "../hooks/usePrinting.js";
 import { defaultTimelineStep, layoutLane, pixelsToMs, placeSpan, shiftSpan, timelineRepeatedHourOffset, timelineStepDelta, timelineSubTicks, timelineTicks } from "../scheduling-timeline-model.js";
 import { timelineRowExtents, timelineWindow } from "../scheduling-timeline-rows.js";
 const DEFAULT_SCHEDULING_TIMELINE_LABELS = {
@@ -253,8 +254,10 @@ function SchedulingTimeline({
     return set;
   }, [rows, overlays, range.start, range.end]);
   const extents = useMemo(() => timelineRowExtents(rows.map((row, index) => row.kind === "head" ? { kind: "head", subRows: strips.has(index) ? 1 : 0 } : { kind: "lane", subRows: row.subRows })), [rows, strips]);
-  const virtual = lanes.length + (groups?.length ?? 0) > virtualizeAbove;
-  const fixed = virtual || groups !== void 0 || overlays.some((overlay) => overlay.laneIds !== void 0) || markers.some((marker) => marker.laneIds !== void 0);
+  const windowed = lanes.length + (groups?.length ?? 0) > virtualizeAbove;
+  const printing = usePrinting(windowed);
+  const virtual = windowed && !printing;
+  const fixed = windowed || groups !== void 0 || overlays.some((overlay) => overlay.laneIds !== void 0) || markers.some((marker) => marker.laneIds !== void 0);
   useEffect(() => {
     if (!virtual || !scroller) return void 0;
     let frame = 0;

package/dist/hooks/usePrinting.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `true` while the page is printed, or shown with print media.
+ *
+ * A view that mounts only the rows near its viewport uses this to mount all of them for the
+ * paper. The browser lays the page out for print as soon as the `beforeprint` handlers return,
+ * so the state is committed inside the event (`flushSync`), not in a later task.
+ *
+ * It cannot answer in time when `window.print()` is called from inside a React effect or
+ * lifecycle method, on mount or later: React commits the change after the effect, which is
+ * after the page was laid out. A page that prints itself that way turns windowing off through
+ * the component's own prop instead, or calls `print()` from an event handler or a timer.
+ */
+declare function usePrinting(enabled?: boolean): boolean;
+
+export { usePrinting };

package/dist/hooks/usePrinting.js

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect, useState } from "react";
+import { flushSync } from "react-dom";
+function usePrinting(enabled = true) {
+  const [printing, setPrinting] = useState(false);
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return void 0;
+    const set = (next) => {
+      flushSync(() => setPrinting(next));
+    };
+    const before = () => set(true);
+    const after = () => set(false);
+    const query = typeof window.matchMedia === "function" ? window.matchMedia("print") : null;
+    const changed = (event) => set(event.matches);
+    window.addEventListener("beforeprint", before);
+    window.addEventListener("afterprint", after);
+    query?.addEventListener?.("change", changed);
+    setPrinting(Boolean(query?.matches));
+    return () => {
+      window.removeEventListener("beforeprint", before);
+      window.removeEventListener("afterprint", after);
+      query?.removeEventListener?.("change", changed);
+    };
+  }, [enabled]);
+  return enabled && printing;
+}
+export {
+  usePrinting
+};