@tensor_1/react 2.19.2 → 2.21.0

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/copy-model.d.ts

@@ -0,0 +1,12 @@
+/** The part of the async Clipboard API that CopyButton needs. */
+interface ClipboardWriter {
+    writeText(text: string): Promise<void>;
+}
+/**
+ * Copies `value` and reports whether the write succeeded. It never throws: there may be no
+ * clipboard (an insecure context or an old browser), or the write may be refused (no
+ * permission, or the document isn't focused).
+ */
+declare function copyText(value: string, clipboard?: ClipboardWriter | undefined): Promise<boolean>;
+
+export { type ClipboardWriter, copyText };

package/dist/copy-model.js

@@ -0,0 +1,12 @@
+async function copyText(value, clipboard = globalThis.navigator?.clipboard) {
+  if (!clipboard || typeof clipboard.writeText !== "function") return false;
+  try {
+    await clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+export {
+  copyText
+};

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