@tensor_1/react 2.37.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')} />
 ```
 

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/index.cjs

@@ -6010,7 +6010,7 @@ function Meter({ value = 0, tone, label, toneLabels, className, ...props }) {
 var import_react43 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 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" }) }) });
-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) {
+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) {
   const id = (0, import_react43.useId)();
   const interactive = onActivate != null;
   const linked = !interactive && href != null;
@@ -6040,11 +6040,11 @@ var Stat = (0, import_react43.forwardRef)(function Stat2({ label, value, icon, m
     ] })
   ] });
   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__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: renderLink ? renderUixLink(renderLink, linkProps) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("a", { ref, ...linkProps }) });
   }
   if (!interactive) {
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { ref, className: classes, onClick, ...props, children: body });
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { ref, className: classes, onClick, onKeyDown, ...props, children: body });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "button",
@@ -6057,10 +6057,13 @@ var Stat = (0, import_react43.forwardRef)(function Stat2({ label, value, icon, m
       "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__ */ (0, import_jsx_runtime56.jsx)("span", { id: `${id}-sep`, className: "uix-visually-hidden", children: ":" }),
         activateLabel && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { id: `${id}-action`, className: "uix-visually-hidden", children: [

package/dist/index.d.cts

@@ -3990,6 +3990,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tensor_1/react",
-  "version": "2.37.0",
+  "version": "2.38.0",
   "description": "Thin React wrappers over the UIx v2 CSS component library.",
   "license": "UNLICENSED",
   "type": "module",