@tensor_1/react 2.36.0 → 2.38.0

package/README.md

@@ -198,12 +198,15 @@ Radial mode still shortens long labels to fit its ring, but every node carries i
 - **`Tabs overflow="scroll"`** keeps a long tab row on one line that scrolls sideways. The selected tab is always scrolled into view, and edge buttons appear only on the side that has hidden tabs. The buttons are pointer-only: keyboard users move with Arrow, Home and End. Combine it with `TabPanel keepMounted` on a record page with many sections.
 - **`Stat tone`** (`warning`, `danger`) draws a toned outline and value; the label stays muted, so the tone never replaces words. `size="compact"` fits dense fact bands.
 - **`Stat onActivate`** makes the whole tile a button that opens an editor (`aria-haspopup="dialog"`). Pass `activateLabel` (e.g. "change") so the name reads "Priority: P1, change", and `expanded` while the editor is open. The ref points at the button, for anchoring a popover.
+- **`Stat pending`** is for a tile whose action is still running (a save, a state change). The button gets `aria-busy="true"` and `aria-disabled="true"`, is dimmed with a progress cursor, and calls neither `onActivate` nor your `onClick` / `onKeyDown` until `pending` is false again. It is never natively `disabled`, so it keeps focus and a screen reader can still read it. Only a tile with `onActivate` has the state; a read-only tile and a link tile ignore the prop.
+- **Tiles in one row line up.** A grid or flex row stretches its tiles to the tallest one. Read-only, button and link tiles all start their label and value at the same offset from the top edge, whatever the height (before 2.38.0 a button tile centred its rows).
 - **`CopyButton`** copies `value`. Name it for what it copies (`label="Copy email"`), pass `copiedLabel`, and pass `failedLabel` so a refused copy is explained rather than silent.
 
 ```tsx
 <Tabs value={tab} onChange={setTab} overflow="scroll">{tabs}</Tabs>
 <Stat label={t('sla')} value={remaining} tone={breached ? 'danger' : 'neutral'} size="compact" />
 <Stat ref={anchor} label={t('priority')} value="P1" onActivate={openEditor} activateLabel={t('change')} expanded={open} size="compact" />
+<Stat label={t('state')} value={state} onActivate={resolve} activateLabel={t('resolve')} haspopup={false} pending={saving} size="compact" />
 <CopyButton value={email} label={t('copyEmail')} copiedLabel={t('copied')} failedLabel={t('copyFailed')} />
 ```
 
@@ -460,6 +463,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 +517,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/components/Stat.d.ts

@@ -33,6 +33,13 @@ interface StatProps extends HTMLAttributes<HTMLElement> {
     };
     /** Whether the editor this tile opens is currently open (`aria-expanded`). */
     expanded?: boolean;
+    /**
+     * What the tile started is still running (HAR-1753). The button is announced as busy and
+     * unavailable (`aria-busy`, `aria-disabled`) and stays focusable; `onActivate`, `onClick` and
+     * `onKeyDown` are not called until it ends. Only with `onActivate`: a read-only tile and a
+     * link tile ignore it.
+     */
+    pending?: boolean;
     /**
      * What `onActivate` opens, for `aria-haspopup` (HAR-1350; TENSOR B6). Default `'dialog'`;
      * `'menu'` for a status menu; `false` for an in-place action (no chevron either).

package/dist/components/Stat.js

@@ -3,7 +3,7 @@ import { forwardRef, useId } from "react";
 import { cx } from "../cx.js";
 import { renderUixLink } from "../link.js";
 const Chevron = () => /* @__PURE__ */ jsx("span", { className: "uix-stat__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) });
-const Stat = 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) {
+const Stat = 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) {
   const id = useId();
   const interactive = onActivate != null;
   const linked = !interactive && href != null;
@@ -33,11 +33,11 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
     ] })
   ] });
   if (linked) {
-    const linkProps = { ...props, href, className: classes, onClick, "aria-current": current ? "page" : void 0, children: body };
+    const linkProps = { ...props, href, className: classes, onClick, onKeyDown, "aria-current": current ? "page" : void 0, children: body };
     return /* @__PURE__ */ jsx(Fragment, { children: renderLink ? renderUixLink(renderLink, linkProps) : /* @__PURE__ */ jsx("a", { ref, ...linkProps }) });
   }
   if (!interactive) {
-    return /* @__PURE__ */ jsx("div", { ref, className: classes, onClick, ...props, children: body });
+    return /* @__PURE__ */ jsx("div", { ref, className: classes, onClick, onKeyDown, ...props, children: body });
   }
   return /* @__PURE__ */ jsxs(
     "button",
@@ -50,10 +50,13 @@ const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone =
       "aria-expanded": expanded,
       "aria-labelledby": `${id}-label ${id}-sep ${id}-value${activateLabel ? ` ${id}-action` : ""}`,
       "aria-describedby": meta != null || trend != null ? `${id}-meta` : void 0,
+      ...pending ? { "aria-busy": true, "aria-disabled": true } : null,
       onClick: (e) => {
+        if (pending) return;
         onClick?.(e);
         if (!e.defaultPrevented) onActivate();
       },
+      onKeyDown: pending ? void 0 : onKeyDown,
       children: [
         /* @__PURE__ */ jsx("span", { id: `${id}-sep`, className: "uix-visually-hidden", children: ":" }),
         activateLabel && /* @__PURE__ */ jsxs("span", { id: `${id}-action`, className: "uix-visually-hidden", children: [

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
+};