@tensor_1/react 2.20.0 → 2.21.0

package/dist/components/Table.js

@@ -66,12 +66,9 @@ function Tr({ selected, pinned, className, children, ...props }) {
     }
   );
 }
-function BulkBar({ count, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": "Bulk actions", ...props, children: [
-    count != null && /* @__PURE__ */ jsxs("span", { className: "uix-bulkbar__count", children: [
-      count,
-      " selected"
-    ] }),
+function BulkBar({ count, children, label = "Bulk actions", selectedLabel = (n) => `${n} selected`, className, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": label, ...props, children: [
+    count != null && /* @__PURE__ */ jsx("span", { className: "uix-bulkbar__count", children: selectedLabel(count) }),
     /* @__PURE__ */ jsx("span", { className: "uix-bulkbar__spacer" }),
     children
   ] });
@@ -82,7 +79,7 @@ function RowActions({ children, className, ...props }) {
 function RowAction({ children, className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx("button", { type, className: cx("uix-rowact", className), ...props, children });
 }
-function ExpandToggle({ expanded, controls, className, type = "button", ...props }) {
+function ExpandToggle({ expanded, controls, expandLabel = "Expand row", collapseLabel = "Collapse row", className, type = "button", ...props }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -90,7 +87,7 @@ function ExpandToggle({ expanded, controls, className, type = "button", ...props
       className: cx("uix-table__expand", className),
       "aria-expanded": expanded,
       "aria-controls": controls,
-      "aria-label": expanded ? "Collapse row" : "Expand row",
+      "aria-label": expanded ? collapseLabel : expandLabel,
       ...props,
       children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) })
     }

package/dist/components/Tabs.d.ts

@@ -13,8 +13,15 @@ interface TabsProps {
      * shown on the side that has hidden tabs. The selected tab is always scrolled into view.
      */
     overflow?: 'wrap' | 'scroll';
+    /**
+     * Keyboard activation (TENSOR RX-125, UIX-11). `'automatic'` (default, unchanged):
+     * Arrow/Home/End move focus AND select, so traversing mounts every panel passed over.
+     * `'manual'`: arrows only move focus; Enter/Space (the button's own click) selects —
+     * the APG choice when a panel is costly to show. Pairs with `TabPanel keepMounted`.
+     */
+    activation?: 'automatic' | 'manual';
 }
-declare function Tabs({ variant, value, onChange, children, className, overflow }: TabsProps): react.JSX.Element;
+declare function Tabs({ variant, value, onChange, children, className, overflow, activation }: TabsProps): react.JSX.Element;
 interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     value: string;
     children?: ReactNode;

package/dist/components/Tabs.js

@@ -5,7 +5,7 @@ import { cx } from "../cx.js";
 const TabsCtx = createContext({});
 const Chevron = ({ d }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d }) });
 const inlineOffset = (el, rtl) => rtl ? -el.scrollLeft : el.scrollLeft;
-function Tabs({ variant = "line", value, onChange, children, className, overflow = "wrap" }) {
+function Tabs({ variant = "line", value, onChange, children, className, overflow = "wrap", activation = "automatic" }) {
   const baseId = useId();
   const listRef = useRef(null);
   const contextValue = useMemo(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
@@ -85,10 +85,9 @@ function Tabs({ variant = "line", value, onChange, children, className, overflow
     }
     e.preventDefault();
     const target = items[next];
-    if (target) {
-      target.focus();
-      target.click();
-    }
+    if (!target) return;
+    target.focus();
+    if (activation === "automatic") target.click();
   };
   const list = /* @__PURE__ */ jsx(
     "div",

package/dist/components/Toast.d.ts

@@ -3,6 +3,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 type ToastTone = 'success' | 'danger' | 'info';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    dismissLabel?: string;
     title?: ReactNode;
     message?: ReactNode;
     tone?: ToastTone;
@@ -10,10 +12,12 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel, className, ...props }: ToastProps): react.JSX.Element;
 interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
+    /** TENSOR RX-125 (UIX-04): translatable; English default. */
+    regionLabel?: string;
     children?: ReactNode;
 }
-declare function Toaster({ children, className, ...props }: ToasterProps): react.JSX.Element;
+declare function Toaster({ children, regionLabel, className, ...props }: ToasterProps): react.JSX.Element;
 
 export { Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps };

package/dist/components/Toast.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 const ToasterContext = createContext(null);
-function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
+function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel = "Dismiss", className, ...props }) {
   const assertive = tone === "danger";
   const toaster = useContext(ToasterContext);
   const bodyRef = useRef(null);
@@ -39,12 +39,12 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
           title && /* @__PURE__ */ jsx("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ jsx("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ jsx("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": "Dismiss", children: "\xD7" })
+        onClose && /* @__PURE__ */ jsx("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
       ]
     }
   );
 }
-function Toaster({ children, className, ...props }) {
+function Toaster({ children, regionLabel = "Notifications", className, ...props }) {
   const [announced, setAnnounced] = useState("");
   const clearTimer = useRef(null);
   const announce = useCallback((text) => {
@@ -56,7 +56,7 @@ function Toaster({ children, className, ...props }) {
     if (clearTimer.current != null) clearTimeout(clearTimer.current);
   }, []);
   const ctx = useMemo(() => ({ announce }), [announce]);
-  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-toaster", className), role: "region", "aria-label": "Notifications", ...props, children: [
+  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-toaster", className), role: "region", "aria-label": regionLabel, ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
     children
   ] }) });

package/dist/components/Tree.d.ts

@@ -19,6 +19,8 @@ interface TreeNodeProps {
     onSelect?: (id: string) => void;
     onFocusNode: (id: string) => void;
     level?: number;
+    /** Whether a click on the row itself toggles a branch (see {@link TreeProps.toggleOnRowClick}). */
+    rowToggles?: boolean;
 }
 interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' | 'onChange'> {
     nodes: TreeNodeData[];
@@ -38,7 +40,13 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
     rowHeight?: number;
     /** Scroll-viewport height (px) when virtualizing. Default 384. */
     maxHeight?: number;
+    /**
+     * Whether clicking a branch row toggles it (TENSOR RX-125, UIX-09). Defaults to true for a
+     * pure navigation tree and to false when the tree is selectable (`selected` / `onSelect`),
+     * where a row click only selects and the chevron toggles. Enter/Space still does both.
+     */
+    toggleOnRowClick?: boolean;
 }
-declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, virtualize, rowHeight, maxHeight, className, ...props }: TreeProps): react.JSX.Element;
+declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, virtualize, rowHeight, maxHeight, toggleOnRowClick, className, ...props }: TreeProps): react.JSX.Element;
 
 export { Tree, type TreeNodeData, type TreeNodeProps, type TreeProps };

package/dist/components/Tree.js

@@ -5,7 +5,7 @@ import { cx } from "../cx.js";
 import { flattenTree, treeNav } from "../tree-model.js";
 import { virtualWindow, shouldVirtualize } from "../table-engine.js";
 const ChevronIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
-function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1 }) {
+function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1, rowToggles = true }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
   return /* @__PURE__ */ jsxs(
@@ -23,13 +23,32 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
       },
       onClick: (e) => {
         e.stopPropagation();
-        if (hasChildren) onToggle(node.id);
+        if (hasChildren && rowToggles) onToggle(node.id);
         onSelect?.(node.id);
         onFocusNode(node.id);
       },
       children: [
         /* @__PURE__ */ jsxs("span", { className: "uix-tree__row", children: [
-          /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ jsx(ChevronIcon, {}) }),
+          hasChildren ? (
+            // TENSOR RX-125 (UIX-09): the chevron is its own pointer target, so a
+            // branch can be expanded without selecting it. Keyboard users toggle with
+            // the arrow keys on the treeitem, so it stays out of the tab order.
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                "aria-hidden": "true",
+                className: "uix-tree__toggle",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onToggle(node.id);
+                  onFocusNode(node.id);
+                },
+                children: /* @__PURE__ */ jsx(ChevronIcon, {})
+              }
+            )
+          ) : /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle" }),
           node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: node.icon }),
           /* @__PURE__ */ jsx("span", { className: "uix-tree__label", children: node.label })
         ] }),
@@ -44,7 +63,8 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
             onToggle,
             onSelect,
             onFocusNode,
-            level: level + 1
+            level: level + 1,
+            rowToggles
           },
           child.id
         )) })
@@ -62,6 +82,7 @@ function Tree({
   virtualize,
   rowHeight = 32,
   maxHeight = 384,
+  toggleOnRowClick,
   className,
   ...props
 }) {
@@ -70,6 +91,7 @@ function Tree({
   const rootRef = useRef(null);
   const [focusedId, setFocusedId] = useState(void 0);
   const selectable = selected !== void 0 || onSelect != null;
+  const rowToggles = toggleOnRowClick ?? !selectable;
   const handleToggle = useCallback((id) => {
     if (!controlledExpanded) {
       setInternalExpanded((prev) => {
@@ -98,6 +120,7 @@ function Tree({
         onSelect,
         focusedId,
         setFocusedId,
+        rowToggles,
         className,
         ...props
       }
@@ -173,7 +196,8 @@ function Tree({
       onToggle: handleToggle,
       onSelect,
       onFocusNode: setFocusedId,
-      level: 1
+      level: 1,
+      rowToggles
     },
     node.id
   )) });
@@ -189,6 +213,7 @@ function VirtualTreeView({
   onSelect,
   focusedId,
   setFocusedId,
+  rowToggles,
   className,
   ...props
 }) {
@@ -262,7 +287,10 @@ function VirtualTreeView({
       children: [
         win.padTop > 0 && /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padTop } }),
         rows.map((f, i) => {
-          const rowStyle = { height: rowHeight, paddingLeft: `calc(${f.level - 1} * var(--uix-space-5))` };
+          const rowStyle = {
+            height: rowHeight,
+            paddingLeft: `calc(${Math.min(f.level - 1, 4)} * var(--uix-space-5) + ${Math.max(0, f.level - 5)} * var(--uix-space-1))`
+          };
           return /* @__PURE__ */ jsx(
             "li",
             {
@@ -280,12 +308,31 @@ function VirtualTreeView({
               },
               onClick: (e) => {
                 e.stopPropagation();
-                if (f.hasChildren) onToggle(f.node.id);
+                if (f.hasChildren && rowToggles) onToggle(f.node.id);
                 onSelect?.(f.node.id);
                 setFocusedId(f.node.id);
               },
               children: /* @__PURE__ */ jsxs("span", { className: "uix-tree__row", style: rowStyle, children: [
-                /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle", children: f.hasChildren && /* @__PURE__ */ jsx(ChevronIcon, {}) }),
+                f.hasChildren ? (
+                  // TENSOR RX-125 (UIX-09): the chevron is its own pointer target, so a
+                  // branch can be expanded without selecting it. Keyboard users toggle with
+                  // the arrow keys on the treeitem, so it stays out of the tab order.
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      tabIndex: -1,
+                      "aria-hidden": "true",
+                      className: "uix-tree__toggle",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onToggle(f.node.id);
+                        setFocusedId(f.node.id);
+                      },
+                      children: /* @__PURE__ */ jsx(ChevronIcon, {})
+                    }
+                  )
+                ) : /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle" }),
                 f.node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: f.node.icon }),
                 /* @__PURE__ */ jsx("span", { className: "uix-tree__label", children: f.node.label })
               ] })

package/dist/fill-label.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TENSOR RX-125 (UIX-12) — fill `{name}` placeholders in a translatable label, so a
+ * sentence such as "Move {label} up" can be reordered by a translation.
+ */
+declare function fillLabel(template: string, values: Readonly<Record<string, string | number>>): string;
+
+export { fillLabel };

package/dist/fill-label.js

@@ -0,0 +1,9 @@
+function fillLabel(template, values) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (match, key) => Object.prototype.hasOwnProperty.call(values, key) ? String(values[key]) : match
+  );
+}
+export {
+  fillLabel
+};