@tensor_1/react 2.46.0 → 2.48.0

package/dist/hooks/useDialog.js

@@ -1,5 +1,6 @@
 "use client";
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, useLayoutEffect } from "react";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 let lockCount = 0;
 let saved = null;
 function lockBodyScroll() {
@@ -36,7 +37,7 @@ function useDialog(open, onClose, keepOpen) {
   onCloseRef.current = onClose;
   const keepOpenRef = useRef(keepOpen);
   keepOpenRef.current = keepOpen;
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const el = ref.current;
     if (!el || !open) {
       if (el && el.open) el.close();

package/dist/hooks/useOptimisticValue.d.ts

@@ -0,0 +1,51 @@
+interface OptimisticRollback<T> {
+    /** The value the person asked for. */
+    attempted: T;
+    /** The value shown again. */
+    restored: T;
+    error: unknown;
+}
+interface UseOptimisticValueOptions<T> {
+    /** Called when a change fails and the value is put back, e.g. to show a toast that says what was restored. */
+    onRollback?: (rollback: OptimisticRollback<T>) => void;
+}
+interface UseOptimisticValueResult<T> {
+    /** What to show: the person's change at once, the server's value otherwise. */
+    value: T;
+    /** Show `next` now and save it; resolves when the save settles (it never rejects). */
+    set: (next: T) => Promise<void>;
+    /** A save is in flight. */
+    pending: boolean;
+    /** The last rollback, until the next change; `null` when the last change saved. */
+    rollback: OptimisticRollback<T> | null;
+    /**
+     * Counts rollbacks. Pass it to `ChangeHighlight value={rollbacks}` (or `useChangeHighlight`)
+     * so the restored element flashes; the person's own change does not.
+     */
+    rollbacks: number;
+}
+/**
+ * An optimistic value with a visible rollback (HAR-2583, motion standard §2.6). Only for
+ * reversible, personal, nearly-always-successful actions: star, pin, a reaction, mark read, a
+ * display preference, the order of one's own saved views. Never for anything the server can
+ * refuse or an auditor reads (a state transition, an assignment, an approval, a priority):
+ * those stay pessimistic, with `Button loading` and `result`.
+ *
+ * `set(next)` shows `next` at once and calls `commit(next)`. If the commit fails, the last
+ * confirmed value comes back, `rollbacks` counts up (flash the element with it), `rollback`
+ * says what happened, and `onRollback` runs so the product can say it in words. When changes
+ * overlap, only the latest one's outcome counts. While nothing is pending, `value` follows
+ * `serverValue` when it changes; a change that saved stays shown until then.
+ *
+ * ```tsx
+ * const star = useOptimisticValue(view.starred, (next) => api.star(view.id, next), {
+ *   onRollback: () => toast.error(t('starNotSaved')),
+ * });
+ * <ChangeHighlight value={star.rollbacks} variant="ring" announce={star.rollback ? t('starRestored') : undefined}>
+ *   <StarButton starred={star.value} onToggle={() => star.set(!star.value)} />
+ * </ChangeHighlight>
+ * ```
+ */
+declare function useOptimisticValue<T>(serverValue: T, commit: (next: T) => Promise<unknown>, { onRollback }?: UseOptimisticValueOptions<T>): UseOptimisticValueResult<T>;
+
+export { type OptimisticRollback, type UseOptimisticValueOptions, type UseOptimisticValueResult, useOptimisticValue };

package/dist/hooks/useOptimisticValue.js

@@ -0,0 +1,61 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+function useOptimisticValue(serverValue, commit, { onRollback } = {}) {
+  const [shown, setShown] = useState(serverValue);
+  const [pending, setPending] = useState(false);
+  const [rollback, setRollback] = useState(null);
+  const [rollbacks, setRollbacks] = useState(0);
+  const confirmed = useRef(serverValue);
+  const latest = useRef(0);
+  const confirmedId = useRef(0);
+  const mounted = useRef(true);
+  const commitRef = useRef(commit);
+  const onRollbackRef = useRef(onRollback);
+  commitRef.current = commit;
+  onRollbackRef.current = onRollback;
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const pendingRef = useRef(false);
+  pendingRef.current = pending;
+  const firstServer = useRef(true);
+  useEffect(() => {
+    if (firstServer.current) {
+      firstServer.current = false;
+      return;
+    }
+    confirmed.current = serverValue;
+    if (!pendingRef.current) setShown(serverValue);
+  }, [serverValue]);
+  const set = useCallback(async (next) => {
+    const id = ++latest.current;
+    setShown(next);
+    setPending(true);
+    setRollback(null);
+    try {
+      await commitRef.current(next);
+      if (id > confirmedId.current) {
+        confirmedId.current = id;
+        confirmed.current = next;
+      }
+      if (!mounted.current || id !== latest.current) return;
+      setPending(false);
+    } catch (error) {
+      if (!mounted.current || id !== latest.current) return;
+      const restored = confirmed.current;
+      const event = { attempted: next, restored, error };
+      setShown(restored);
+      setPending(false);
+      setRollback(event);
+      setRollbacks((n) => n + 1);
+      onRollbackRef.current?.(event);
+    }
+  }, []);
+  return { value: shown, set, pending, rollback, rollbacks };
+}
+export {
+  useOptimisticValue
+};

package/dist/hooks/useReducedMotion.d.ts

@@ -1,4 +1,7 @@
-/** Non-hook read for event handlers and effects. `false` where there is no `matchMedia` (SSR, tests). */
+/**
+ * Non-hook read for event handlers and effects: the OS setting, or the in-app preference
+ * `<html data-motion="reduce">` (HAR-1372). `false` where there is no `matchMedia` (SSR, tests).
+ */
 declare function prefersReducedMotion(): boolean;
 /** True while the user asks for reduced motion; re-renders when the setting changes. `false` on the server. */
 declare function useReducedMotion(): boolean;

package/dist/hooks/useReducedMotion.js

@@ -6,9 +6,15 @@ function subscribe(onChange) {
   };
   const mql = matchMedia(QUERY);
   mql.addEventListener("change", onChange);
-  return () => mql.removeEventListener("change", onChange);
+  const observer = typeof MutationObserver === "function" && typeof document !== "undefined" ? new MutationObserver(onChange) : null;
+  observer?.observe(document.documentElement, { attributes: true, attributeFilter: ["data-motion"] });
+  return () => {
+    mql.removeEventListener("change", onChange);
+    observer?.disconnect();
+  };
 }
 function prefersReducedMotion() {
+  if (typeof document !== "undefined" && document.documentElement.getAttribute("data-motion") === "reduce") return true;
   return typeof matchMedia !== "undefined" && matchMedia(QUERY).matches;
 }
 function useReducedMotion() {

package/dist/hooks/useResolvedFilterLabels.d.ts

@@ -0,0 +1,15 @@
+import { FilterField, FilterValue } from '../filter-model.js';
+
+/**
+ * A filter chip's field and value with the labels of ids restored from a URL or a saved view
+ * (PR #168 review: a chip read "Assignee: usr_8f3a"). A `reference` value's choices without a
+ * label, and an `enum` value's ids that are not among `field.options`, are looked up once with
+ * `field.resolveLabels`. Until the answer arrives, and when the lookup fails, the ids show.
+ * Internal: DataWorkspace and AuditLog summarise their chips through it.
+ */
+declare function useResolvedFilterLabels(field: FilterField, value: FilterValue | undefined): {
+    field: FilterField;
+    value: FilterValue | undefined;
+};
+
+export { useResolvedFilterLabels };

package/dist/hooks/useResolvedFilterLabels.js

@@ -0,0 +1,34 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { isUnresolvedChoice } from "../filter-model.js";
+function useResolvedFilterLabels(field, value) {
+  const [known, setKnown] = useState(() => /* @__PURE__ */ new Map());
+  const asked = useRef(/* @__PURE__ */ new Set());
+  const resolver = useRef(field.resolveLabels);
+  resolver.current = field.resolveLabels;
+  const optionIds = new Set((field.options ?? []).map((o) => o.value));
+  const missing = value?.kind === "reference" ? value.values.filter(isUnresolvedChoice).map((v) => v.value) : value?.kind === "enum" ? value.values.filter((v) => !optionIds.has(v)) : [];
+  const key = missing.filter((id) => !known.has(id) && !asked.current.has(id)).join("\0");
+  useEffect(() => {
+    if (!key || !resolver.current) return;
+    const ids = key.split("\0");
+    for (const id of ids) asked.current.add(id);
+    resolver.current(ids).then(
+      (choices) => setKnown((prev) => new Map([...prev, ...choices.map((c) => [c.value, c.label])])),
+      () => {
+      }
+    );
+  }, [key]);
+  if (known.size === 0 || !value) return { field, value };
+  if (value.kind === "reference") {
+    return { field, value: { kind: "reference", values: value.values.map((v) => isUnresolvedChoice(v) && known.has(v.value) ? { value: v.value, label: known.get(v.value) } : v) } };
+  }
+  if (value.kind === "enum") {
+    const extra = value.values.filter((v) => !optionIds.has(v) && known.has(v)).map((v) => ({ value: v, label: known.get(v) }));
+    if (extra.length) return { field: { ...field, options: [...field.options ?? [], ...extra] }, value };
+  }
+  return { field, value };
+}
+export {
+  useResolvedFilterLabels
+};

package/dist/hooks/useVirtualRows.d.ts

@@ -1,8 +1,22 @@
 import { RefObject } from 'react';
 
 interface UseVirtualRowsOptions {
-    /** Fixed rendered row height in pixels. */
+    /**
+     * Rendered row height in pixels. With `measureRows` it is the estimate for the first paint,
+     * until the mounted rows have been measured.
+     */
     rowHeight: number;
+    /**
+     * A selector for the mounted data rows inside the container, e.g. `'tbody > tr[data-row]'`
+     * (HAR-1829). With it the hook sizes its spacers and window from the rows' real pitch (their
+     * mean `offsetHeight`) instead of trusting `rowHeight`, which only has to be close: a row's
+     * height comes from CSS and content (kit padding, a second line, density), and a wrong number
+     * gives a short scrollbar and a window that drifts away from the rows on screen. It measures
+     * when windowing starts, when `rowHeight` changes (a density switch) and when the container
+     * resizes, never while scrolling, so the spacers do not move under the reader. Spacer rows
+     * must not match it.
+     */
+    measureRows?: string;
     /** Rows rendered beyond each viewport edge. Default: 6. */
     overscan?: number;
     /**
@@ -30,6 +44,11 @@ interface UseVirtualRowsResult<T> {
     padBottom: number;
     totalHeight: number;
     virtualized: boolean;
+    /**
+     * The row height in use: the measured pitch with `measureRows`, else the `rowHeight` option.
+     * Scroll a keyboard-focused row into view with it (`index * rowHeight`).
+     */
+    rowHeight: number;
 }
 /**
  * Owns scroll/resize observation and exposes the small visible row window.
@@ -37,6 +56,6 @@ interface UseVirtualRowsResult<T> {
  * When the row count shrinks under a large scroll position the window is clamped to the new
  * count in the same render, so `padTop` never exceeds the list (HAR-1616).
  */
-declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold, estimatedViewportHeight, enabled }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight: estimate, overscan, threshold, estimatedViewportHeight, enabled, measureRows }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
 
 export { type UseVirtualRowsOptions, type UseVirtualRowsResult, useVirtualRows };

package/dist/hooks/useVirtualRows.js

@@ -1,9 +1,12 @@
 "use client";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { shouldVirtualize, virtualWindow } from "../table-engine.js";
-function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estimatedViewportHeight = 0, enabled = true }) {
+function useVirtualRows(rows, { rowHeight: estimate, overscan = 6, threshold = 100, estimatedViewportHeight = 0, enabled = true, measureRows }) {
   const containerRef = useRef(null);
   const [viewport, setViewport] = useState({ scrollTop: 0, height: 0 });
+  const [measured, setMeasured] = useState(null);
+  const measureRowsRef = useRef(() => {
+  });
   useLayoutEffect(() => {
     const element = containerRef.current;
     if (!element) return;
@@ -21,7 +24,10 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estima
     };
     commitMeasurement();
     element.addEventListener("scroll", measure, { passive: true });
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(() => {
+      measure();
+      measureRowsRef.current();
+    });
     observer.observe(element);
     return () => {
       element.removeEventListener("scroll", measure);
@@ -31,6 +37,26 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estima
   }, []);
   const height = viewport.height > 0 ? viewport.height : Math.max(0, estimatedViewportHeight);
   const virtualized = enabled && height > 0 && shouldVirtualize(rows.length, threshold);
+  const rowHeight = measureRows && measured && measured.estimate === estimate ? measured.height : estimate;
+  measureRowsRef.current = () => {
+    const element = containerRef.current;
+    if (!element || !measureRows || !virtualized) return;
+    let total = 0;
+    let count = 0;
+    for (const row of Array.from(element.querySelectorAll(measureRows))) {
+      const h = row.offsetHeight;
+      if (h > 0) {
+        total += h;
+        count += 1;
+      }
+    }
+    if (count === 0) return;
+    const next = Math.round(total / count * 100) / 100;
+    setMeasured((current) => current && current.estimate === estimate && current.height === next ? current : { height: next, estimate });
+  };
+  useLayoutEffect(() => {
+    measureRowsRef.current();
+  }, [virtualized, estimate, measureRows]);
   const window = useMemo(
     () => virtualized ? virtualWindow(viewport.scrollTop, height, rowHeight, rows.length, overscan) : { start: 0, end: rows.length, padTop: 0, padBottom: 0, total: rows.length * rowHeight },
     [virtualized, overscan, rowHeight, rows.length, height, viewport.scrollTop]
@@ -43,7 +69,8 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estima
     padTop: window.padTop,
     padBottom: window.padBottom,
     totalHeight: window.total,
-    virtualized
+    virtualized,
+    rowHeight
   };
 }
 export {

package/dist/icons/Icon.d.ts

@@ -269,6 +269,7 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     clip?: number | string | undefined | undefined;
     stroke: string;
     href?: string | undefined | undefined;
+    d?: string | undefined | undefined;
     capHeight?: number | string | undefined | undefined;
     dy?: number | string | undefined | undefined;
     dx?: number | string | undefined | undefined;
@@ -306,7 +307,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     contentStyleType?: number | string | undefined | undefined;
     cx?: number | string | undefined | undefined;
     cy?: number | string | undefined | undefined;
-    d?: string | undefined | undefined;
     decelerate?: number | string | undefined | undefined;
     descent?: number | string | undefined | undefined;
     diffuseConstant?: number | string | undefined | undefined;