@tensor_1/react 2.15.0 → 2.17.0

package/dist/components/Tabs.d.ts

@@ -15,5 +15,17 @@ interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     disabled?: boolean;
 }
 declare function Tab({ value, children, disabled, className, onClick, ...props }: TabProps): react.JSX.Element;
+interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** The owning `<Tab>`'s value — the panel renders only while that tab is selected. */
+    value: string;
+    children?: ReactNode;
+}
+/**
+ * The tabpanel paired with a `<Tab>` by `value` (UIX-A11Y-2): labelled by its tab,
+ * `tabIndex 0` so Tab from the tablist lands in the content, rendered only while
+ * selected. Place it as a direct child of `<Tabs>` — it is hoisted out of the tablist —
+ * or anywhere the Tabs context reaches.
+ */
+declare function TabPanel({ value, children, ...props }: TabPanelProps): react.JSX.Element | null;
 
-export { Tab, type TabProps, Tabs, type TabsProps };
+export { Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps };

package/dist/components/Tabs.js

@@ -1,11 +1,67 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef } from "react";
 import { cx } from "../cx.js";
 const TabsCtx = createContext({});
 function Tabs({ variant = "line", value, onChange, children, className }) {
-  const contextValue = useMemo(() => ({ value, onChange }), [value, onChange]);
-  return /* @__PURE__ */ jsx(TabsCtx.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
+  const baseId = useId();
+  const listRef = useRef(null);
+  const contextValue = useMemo(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
+  const kids = Children.toArray(children);
+  const panels = kids.filter((k) => isValidElement(k) && k.type === TabPanel);
+  const tabs = kids.filter((k) => !(isValidElement(k) && k.type === TabPanel));
+  useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const all = Array.from(list.querySelectorAll('[role="tab"]'));
+    const enabled = all.filter((t) => !t.matches(":disabled"));
+    const active = enabled.find((t) => t.getAttribute("aria-selected") === "true") ?? enabled[0];
+    for (const t of all) t.tabIndex = t === active ? 0 : -1;
+  });
+  const onKeyDown = (e) => {
+    const items = Array.from(
+      listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []
+    );
+    const cur = e.target.closest('[role="tab"]');
+    const idx = cur ? items.indexOf(cur) : -1;
+    if (idx < 0 || items.length === 0) return;
+    let next;
+    switch (e.key) {
+      case "ArrowRight":
+        next = (idx + 1) % items.length;
+        break;
+      case "ArrowLeft":
+        next = (idx - 1 + items.length) % items.length;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = items.length - 1;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const target = items[next];
+    if (target) {
+      target.focus();
+      target.click();
+    }
+  };
+  return /* @__PURE__ */ jsxs(TabsCtx.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        role: "tablist",
+        className: cx("uix-tabs", `uix-tabs--${variant}`, className),
+        onKeyDown,
+        children: tabs
+      }
+    ),
+    panels
+  ] });
 }
 function Tab({ value, children, disabled, className, onClick, ...props }) {
   const ctx = useContext(TabsCtx);
@@ -14,8 +70,11 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
     "button",
     {
       role: "tab",
+      id: ctx.baseId ? `${ctx.baseId}-tab-${value}` : void 0,
+      "aria-controls": ctx.baseId ? `${ctx.baseId}-panel-${value}` : void 0,
       className: cx("uix-tab", className),
       "aria-selected": selected,
+      tabIndex: selected ? 0 : -1,
       disabled,
       onClick: (e) => {
         ctx.onChange?.(value);
@@ -26,7 +85,23 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
     }
   );
 }
+function TabPanel({ value, children, ...props }) {
+  const ctx = useContext(TabsCtx);
+  if (ctx.value !== value) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: ctx.baseId ? `${ctx.baseId}-panel-${value}` : void 0,
+      "aria-labelledby": ctx.baseId ? `${ctx.baseId}-tab-${value}` : void 0,
+      tabIndex: 0,
+      ...props,
+      children
+    }
+  );
+}
 export {
   Tab,
+  TabPanel,
   Tabs
 };

package/dist/components/Timeline.d.ts

@@ -1,12 +1,12 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
     children?: ReactNode;
 }
-/** Activity timeline container over `.uix-timeline`. */
+/** Activity timeline container over `.uix-timeline`. Ordered list so AT reads entry count + sequence (UIX-A11Y-4). */
 declare function Timeline({ children, className, ...props }: TimelineProps): react.JSX.Element;
-interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
+interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {
     /**
      * Custom rail node — an icon puck, an avatar, a tinted dot. Defaults to the
      * accent `.uix-timeline__node` dot. Supply this to make a heterogeneous feed

package/dist/components/Timeline.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 function Timeline({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-timeline", className), ...props, children });
+  return /* @__PURE__ */ jsx("ol", { className: cx("uix-timeline", className), ...props, children });
 }
 function TimelineItem({ node, meta, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-timeline__item", className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-timeline__rail", children: [
+  return /* @__PURE__ */ jsxs("li", { className: cx("uix-timeline__item", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-timeline__rail", "aria-hidden": "true", children: [
       node ?? /* @__PURE__ */ jsx("span", { className: "uix-timeline__node" }),
       /* @__PURE__ */ jsx("span", { className: "uix-timeline__line" })
     ] }),

package/dist/components/Toast.js

@@ -1,28 +1,65 @@
+"use client";
 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 }) {
   const assertive = tone === "danger";
+  const toaster = useContext(ToasterContext);
+  const bodyRef = useRef(null);
+  useEffect(() => {
+    if (assertive || !toaster) return;
+    const text = bodyRef.current?.textContent?.trim();
+    if (text) toaster.announce(text);
+  }, []);
+  const handleClose = (e) => {
+    const btn = e.currentTarget;
+    if (document.activeElement === btn) {
+      const toasterEl = btn.closest(".uix-toaster");
+      if (toasterEl) {
+        const closes = Array.from(toasterEl.querySelectorAll(".uix-toast__close"));
+        const i = closes.indexOf(btn);
+        (closes[i + 1] ?? closes[i - 1])?.focus();
+      }
+    }
+    onClose?.();
+  };
+  const ownLiveRegion = assertive || !toaster;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
       "data-leaving": leaving || void 0,
-      role: assertive ? "alert" : "status",
-      "aria-live": assertive ? "assertive" : "polite",
+      role: ownLiveRegion ? assertive ? "alert" : "status" : void 0,
+      "aria-live": ownLiveRegion ? assertive ? "assertive" : "polite" : void 0,
       ...props,
       children: [
         icon && /* @__PURE__ */ jsx("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsxs("div", { className: "uix-toast__body", children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-toast__body", ref: bodyRef, children: [
           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: onClose, "aria-label": "Dismiss", children: "\xD7" })
+        onClose && /* @__PURE__ */ jsx("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": "Dismiss", children: "\xD7" })
       ]
     }
   );
 }
 function Toaster({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cx("uix-toaster", className), ...props, children });
+  const [announced, setAnnounced] = useState("");
+  const clearTimer = useRef(null);
+  const announce = useCallback((text) => {
+    setAnnounced((cur) => cur ? `${cur} ${text}` : text);
+    if (clearTimer.current != null) clearTimeout(clearTimer.current);
+    clearTimer.current = window.setTimeout(() => setAnnounced(""), 3e3);
+  }, []);
+  useEffect(() => () => {
+    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: [
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
+    children
+  ] }) });
 }
 export {
   Toast,

package/dist/components/Tooltip.d.ts

@@ -13,7 +13,9 @@ interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
  * Tooltip whose bubble renders in the top layer via the native Popover API, so it
  * escapes any `overflow: hidden/scroll` ancestor that would clip the old CSS-only
  * `[data-uix-tip]` tooltip (UIX-FIX-02). Positioned by the shared overlay engine
- * (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape.
+ * (flip/shift), shown on hover and keyboard focus, dismissed on blur or Escape
+ * (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
+ * the pointer is over it (UIX-A11Y-1).
  */
 declare function Tooltip({ label, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
 

package/dist/components/Tooltip.js

@@ -1,15 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
 function Tooltip({ label, placement = "top", className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
+  const closeTimer = useRef(null);
   const [open, setOpen] = useState(false);
   const id = useId();
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  const cancelClose = () => {
+    if (closeTimer.current != null) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
   const show = () => {
+    cancelClose();
     const b = bubbleRef.current;
     if (b && !b.matches(":popover-open")) {
       try {
@@ -20,6 +28,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     setOpen(true);
   };
   const hide = () => {
+    cancelClose();
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -29,7 +38,20 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     }
     setOpen(false);
   };
+  const scheduleHide = () => {
+    cancelClose();
+    closeTimer.current = window.setTimeout(hide, 100);
+  };
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
   useEffect(() => () => {
+    if (closeTimer.current != null) clearTimeout(closeTimer.current);
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -39,14 +61,19 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
     }
   }, []);
   const bubbleAttr = { popover: "manual" };
+  const single = isValidElement(children);
+  const child = single ? cloneElement(children, {
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
+  }) : children;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ref: triggerRef,
       className: cx("uix-tooltip", className),
-      "aria-describedby": id,
+      "aria-describedby": single ? void 0 : id,
+      tabIndex: single ? void 0 : 0,
       onMouseEnter: show,
-      onMouseLeave: hide,
+      onMouseLeave: scheduleHide,
       onFocus: show,
       onBlur: hide,
       onKeyDown: (e) => {
@@ -54,8 +81,20 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
       },
       ...props,
       children: [
-        children,
-        /* @__PURE__ */ jsx("span", { ref: bubbleRef, id, role: "tooltip", className: "uix-tooltip__bubble", ...bubbleAttr, children: label })
+        child,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: bubbleRef,
+            id,
+            role: "tooltip",
+            className: "uix-tooltip__bubble",
+            onMouseEnter: cancelClose,
+            onMouseLeave: scheduleHide,
+            ...bubbleAttr,
+            children: label
+          }
+        )
       ]
     }
   );

package/dist/components/Tree.d.ts

@@ -4,6 +4,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 interface TreeNodeData {
     id: string;
     label: ReactNode;
+    /** Plain-text label for keyboard typeahead when `label` is not a string (UIX-A11Y-2). */
+    typeaheadLabel?: string;
     icon?: ReactNode;
     children?: TreeNodeData[];
 }

package/dist/components/Tree.js

@@ -152,6 +152,13 @@ function Tree({
         setFocusedId(id);
         break;
       default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+          const act = treeNav(flat, id, e.key);
+          if (act.focusId !== void 0) {
+            e.preventDefault();
+            focusItem(rootRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(act.focusId)}"]`));
+          }
+        }
         break;
     }
   };
@@ -188,8 +195,10 @@ function VirtualTreeView({
   const scrollRef = useRef(null);
   const [scrollTop, setScrollTop] = useState(0);
   const pendingFocus = useRef(false);
+  const hadFocus = useRef(false);
   const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
   const rows = flat.slice(win.start, win.end);
+  const windowHasTabbable = tabbableId != null && rows.some((f) => f.node.id === tabbableId);
   useEffect(() => {
     if (!pendingFocus.current || focusedId == null) return;
     const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
@@ -198,6 +207,11 @@ function VirtualTreeView({
       pendingFocus.current = false;
     }
   }, [focusedId, win.start, win.end]);
+  useEffect(() => {
+    if (!hadFocus.current || pendingFocus.current) return;
+    const active = document.activeElement;
+    if (active === document.body || active == null) scrollRef.current?.focus({ preventScroll: true });
+  });
   const moveTo = (id) => {
     const i = flat.findIndex((f) => f.node.id === id);
     if (i < 0) return;
@@ -213,6 +227,7 @@ function VirtualTreeView({
     setFocusedId(id);
   };
   const onKeyDown = (e) => {
+    if (e.key.length === 1 && (e.ctrlKey || e.metaKey || e.altKey)) return;
     const curId = e.target.closest('[role="treeitem"]')?.dataset.id ?? focusedId;
     const act = treeNav(flat, curId, e.key);
     if (act.focusId === void 0 && act.toggleId === void 0 && act.selectId === void 0) return;
@@ -233,13 +248,20 @@ function VirtualTreeView({
       ref: scrollRef,
       className: cx("uix-tree", "uix-tree--virtual", className),
       role: "tree",
+      tabIndex: -1,
       style: { maxHeight, overflow: "auto" },
       onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
       onKeyDown,
+      onFocus: () => {
+        hadFocus.current = true;
+      },
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) hadFocus.current = false;
+      },
       ...props,
       children: [
-        win.padTop > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", style: { height: win.padTop } }),
-        rows.map((f) => {
+        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))` };
           return /* @__PURE__ */ jsx(
             "li",
@@ -251,7 +273,7 @@ function VirtualTreeView({
               "aria-expanded": f.hasChildren ? f.isExpanded : void 0,
               "aria-selected": selectable ? selected === f.node.id : void 0,
               "data-id": f.node.id,
-              tabIndex: tabbableId === f.node.id ? 0 : -1,
+              tabIndex: tabbableId === f.node.id || !windowHasTabbable && i === 0 ? 0 : -1,
               className: "uix-tree__item",
               onFocus: (e) => {
                 if (e.target === e.currentTarget) setFocusedId(f.node.id);
@@ -271,7 +293,7 @@ function VirtualTreeView({
             f.node.id
           );
         }),
-        win.padBottom > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", style: { height: win.padBottom } })
+        win.padBottom > 0 && /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padBottom } })
       ]
     }
   );

package/dist/hooks/useDialog.d.ts

@@ -1,3 +1,3 @@
-declare function useDialog(open: boolean): React.RefObject<HTMLDialogElement>;
+declare function useDialog(open: boolean, onClose?: () => void): React.RefObject<HTMLDialogElement>;
 
 export { useDialog };

package/dist/hooks/useDialog.js

@@ -30,8 +30,10 @@ function unlockBodyScroll() {
     saved = null;
   }
 }
-function useDialog(open) {
+function useDialog(open, onClose) {
   const ref = useRef(null);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
   useEffect(() => {
     const el = ref.current;
     if (!el || !open) {
@@ -40,8 +42,21 @@ function useDialog(open) {
     }
     if (!el.open) el.showModal();
     lockBodyScroll();
+    let locked = true;
+    const handleClose = () => {
+      if (locked) {
+        locked = false;
+        unlockBodyScroll();
+      }
+      onCloseRef.current?.();
+    };
+    el.addEventListener("close", handleClose);
     return () => {
-      unlockBodyScroll();
+      el.removeEventListener("close", handleClose);
+      if (locked) {
+        locked = false;
+        unlockBodyScroll();
+      }
       if (el.open) el.close();
     };
   }, [open]);

package/dist/hooks/useTable.d.ts

@@ -21,6 +21,11 @@ interface UseTableResult<T> {
     pinned: ReadonlySet<string>;
     /** header select-all tri-state over the current derived rows. */
     selectAll: SelectAllState;
+    /**
+     * Screen-reader status text reflecting the latest change — "Sorted by {field}, {dir}",
+     * "{n} results" (filter/search), "{n} selected". Pass to `<TableWrap announcement>` (UIX-A11Y-2).
+     */
+    announcement: string;
     /** cycle a column's sort; pass additive (⇧-click) to keep it as a secondary key. */
     toggleSort: (field: string, additive?: boolean) => void;
     setSort: (keys: SortKey[]) => void;

package/dist/hooks/useTable.js

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   multiSort,
   toggleSort,
@@ -38,6 +38,24 @@ function useTable(data, options = {}) {
   const toggleAllRows = useCallback(() => setSelected((s) => togglePage(s, pageIds)), [pageIds]);
   const clearSelection = useCallback(() => setSelected(/* @__PURE__ */ new Set()), []);
   const togglePin = useCallback((id) => setPinned((s) => toggleId(s, id)), []);
+  const [announcement, setAnnouncement] = useState("");
+  const mounted = useRef(false);
+  useEffect(() => {
+    if (!mounted.current) return;
+    const key = sort[0];
+    setAnnouncement(key ? `Sorted by ${key.field}, ${key.dir}` : "Sort cleared");
+  }, [sort]);
+  useEffect(() => {
+    if (!mounted.current) return;
+    setAnnouncement(`${rows.length} result${rows.length === 1 ? "" : "s"}`);
+  }, [filters, query]);
+  useEffect(() => {
+    if (!mounted.current) return;
+    setAnnouncement(`${selected.size} selected`);
+  }, [selected]);
+  useEffect(() => {
+    mounted.current = true;
+  }, []);
   const view = useMemo(() => ({ sort, filters, q: query }), [sort, filters, query]);
   const viewQueryString = useMemo(() => serializeView(view), [view]);
   const applyView = useCallback((queryString) => {
@@ -54,6 +72,7 @@ function useTable(data, options = {}) {
     selected,
     pinned,
     selectAll,
+    announcement,
     toggleSort: doToggleSort,
     setSort,
     setFilters,