@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/Tooltip.js

@@ -1,63 +1,121 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
-import { KbdCombo, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform } from "./Kbd.js";
+import { KbdCombo, isKeyShortcut, spokenKeys, useKbdPlatform } from "./Kbd.js";
+import { markKeyOpened, tokenMs, watchInputModality } from "../motion.js";
+const group = { open: 0, lastClosed: -Infinity, current: null };
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 function Tooltip({ label, content, placement = "top", shortcut, className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
   const closeTimer = useRef(null);
+  const openTimer = useRef(null);
+  const shown = useRef(false);
   const [open, setOpen] = useState(false);
   const id = useId();
   const platform = useKbdPlatform();
   const childShortcut = isValidElement(children) ? children.props.shortcut : void 0;
   const own = shortcut ?? (isKeyShortcut(childShortcut) ? childShortcut : void 0);
   const keys = own && own.length > 0 ? own : null;
-  const keyshortcuts = keys ? ariaKeyShortcuts(keys, platform) : void 0;
   useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
+  useEffect(() => {
+    watchInputModality();
+  }, []);
   const cancelClose = () => {
     if (closeTimer.current != null) {
       clearTimeout(closeTimer.current);
       closeTimer.current = null;
     }
   };
-  const show = () => {
-    cancelClose();
+  const cancelOpen = () => {
+    if (openTimer.current != null) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+  };
+  const reveal = (instant) => {
+    cancelOpen();
+    if (group.current && group.current !== self) group.current.current(true);
+    group.current = self;
     const b = bubbleRef.current;
     if (b && !b.matches(":popover-open")) {
+      b.toggleAttribute("data-uix-instant", instant);
+      markKeyOpened(b);
       try {
         b.showPopover();
       } catch {
       }
     }
+    if (!shown.current) {
+      shown.current = true;
+      group.open += 1;
+    }
     setOpen(true);
   };
-  const hide = () => {
+  const show = (via) => {
+    cancelClose();
+    if (shown.current) return;
+    const warm = group.open > 0 || performance.now() - group.lastClosed < tokenMs("--uix-delay-tooltip-skip", 300);
+    if (via === "focus" || warm) {
+      reveal(via === "pointer");
+      return;
+    }
+    if (openTimer.current == null) openTimer.current = window.setTimeout(() => reveal(false), tokenMs("--uix-delay-tooltip", 400));
+  };
+  const hide = (instant = false) => {
     cancelClose();
+    cancelOpen();
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
+      b.toggleAttribute("data-uix-instant", instant);
       try {
         b.hidePopover();
       } catch {
       }
     }
+    if (shown.current) {
+      shown.current = false;
+      group.open -= 1;
+      group.lastClosed = performance.now();
+    }
+    if (group.current === self) group.current = null;
     setOpen(false);
   };
+  const self = useRef(hide);
+  self.current = hide;
   const scheduleHide = () => {
     cancelClose();
-    closeTimer.current = window.setTimeout(hide, 100);
+    closeTimer.current = window.setTimeout(() => {
+      closeTimer.current = null;
+      try {
+        if (triggerRef.current?.matches(":hover")) return;
+      } catch {
+      }
+      hide();
+    }, 100);
   };
-  useEffect(() => {
-    if (!open) return;
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return void 0;
     const onKey = (e) => {
-      if (e.key === "Escape") hide();
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      e.stopPropagation();
+      hide();
     };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
   }, [open]);
   useEffect(() => () => {
     if (closeTimer.current != null) clearTimeout(closeTimer.current);
+    if (openTimer.current != null) clearTimeout(openTimer.current);
+    if (shown.current) {
+      shown.current = false;
+      group.open -= 1;
+      group.lastClosed = performance.now();
+    }
+    if (group.current === self) group.current = null;
     const b = bubbleRef.current;
     if (b && b.matches(":popover-open")) {
       try {
@@ -67,30 +125,27 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
     }
   }, []);
   const bubbleAttr = { popover: "manual" };
+  const text = content ?? label;
+  const description = keys ? [text != null ? `${id}-text` : null, `${id}-keys`].filter(Boolean).join(" ") : id;
   const single = isValidElement(children);
   const child = single ? cloneElement(children, {
-    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
-    ...keyshortcuts ? { "aria-keyshortcuts": keyshortcuts } : {}
+    "aria-describedby": [children.props["aria-describedby"], description].filter(Boolean).join(" ")
   }) : children;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       ref: triggerRef,
       className: cx("uix-tooltip", className),
-      "aria-describedby": single ? void 0 : id,
-      "aria-keyshortcuts": single ? void 0 : keyshortcuts,
+      "aria-describedby": single ? void 0 : description,
       tabIndex: single ? void 0 : 0,
-      onMouseEnter: show,
+      onMouseEnter: () => show("pointer"),
       onMouseLeave: scheduleHide,
-      onFocus: show,
-      onBlur: hide,
-      onKeyDown: (e) => {
-        if (e.key === "Escape") hide();
-      },
+      onFocus: () => show("focus"),
+      onBlur: () => hide(),
       ...props,
       children: [
         child,
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "span",
           {
             ref: bubbleRef,
@@ -100,10 +155,13 @@ function Tooltip({ label, content, placement = "top", shortcut, className, child
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: [
-              content ?? label,
-              keys && /* @__PURE__ */ jsx("span", { className: "uix-tooltip__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform }) })
-            ]
+            children: keys ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              text != null && /* @__PURE__ */ jsx("span", { id: `${id}-text`, children: text }),
+              /* @__PURE__ */ jsxs("span", { className: "uix-tooltip__shortcut", children: [
+                /* @__PURE__ */ jsx("span", { id: `${id}-keys`, className: "uix-visually-hidden", children: spokenKeys(keys, platform) }),
+                /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform, "aria-hidden": "true" })
+              ] })
+            ] }) : text
           }
         )
       ]

package/dist/components/Tree.d.ts

@@ -6,6 +6,12 @@ interface TreeNodeData {
     label: ReactNode;
     /** Plain-text label for keyboard typeahead when `label` is not a string (UIX-A11Y-2). */
     typeaheadLabel?: string;
+    /**
+     * The row's accessible name when `label` is rich (an avatar, a name and a meta line) and only
+     * part of it should be spoken, e.g. the person's name (HAR-1828). By default a row is named by
+     * its own `label`, never by its children.
+     */
+    ariaLabel?: string;
     icon?: ReactNode;
     children?: TreeNodeData[];
     /**
@@ -39,6 +45,8 @@ interface TreeNodeProps {
     rowToggles?: boolean;
     /** Ids of nodes whose children are loading (`aria-busy`). */
     busy?: ReadonlySet<string>;
+    /** Scopes the ids that name each row by its own label (HAR-1828). Set by `Tree`. */
+    treeId?: string;
 }
 interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' | 'onChange'> {
     nodes: TreeNodeData[];

package/dist/components/Tree.js

@@ -15,13 +15,16 @@ const LOADING = "::uix-loading";
 const FAILED = "::uix-error";
 const syntheticOf = (id) => id.endsWith(LOADING) ? { parent: id.slice(0, -LOADING.length), kind: "loading" } : id.endsWith(FAILED) ? { parent: id.slice(0, -FAILED.length), kind: "error" } : null;
 const Ring = () => /* @__PURE__ */ jsx("span", { className: "uix-spinner uix-spinner--sm", "aria-hidden": "true" });
-function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1, rowToggles = true, busy }) {
+const labelId = (treeId, nodeId) => `${treeId}-label-${encodeURIComponent(nodeId)}`;
+const rowName = (treeId, node) => node.ariaLabel ? { "aria-label": node.ariaLabel } : { "aria-labelledby": labelId(treeId, node.id) };
+function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1, rowToggles = true, busy, treeId = "uix-tree" }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
   return /* @__PURE__ */ jsxs(
     "li",
     {
       role: "treeitem",
+      ...rowName(treeId, node),
       "aria-level": level,
       "aria-expanded": hasChildren ? isExpanded : void 0,
       "aria-selected": selectable && !syntheticOf(node.id) ? selected === node.id : void 0,
@@ -61,7 +64,7 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
             )
           ) : /* @__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 })
+          /* @__PURE__ */ jsx("span", { id: labelId(treeId, node.id), className: "uix-tree__label", children: node.label })
         ] }),
         hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: "uix-tree__group", children: node.children.map((child) => /* @__PURE__ */ jsx(
           TreeNode,
@@ -76,7 +79,8 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
             onFocusNode,
             level: level + 1,
             rowToggles,
-            busy
+            busy,
+            treeId
           },
           child.id
         )) })
@@ -317,7 +321,8 @@ function Tree({
       onFocusNode: setFocusedId,
       level: 1,
       rowToggles,
-      busy: loading
+      busy: loading,
+      treeId
     },
     node.id
   )) });
@@ -418,6 +423,7 @@ function VirtualTreeView({
             "li",
             {
               role: "treeitem",
+              ...rowName(treeId, f.node),
               "aria-level": f.level,
               "aria-setsize": f.setsize,
               "aria-posinset": f.posinset,
@@ -458,7 +464,7 @@ function VirtualTreeView({
                   )
                 ) : /* @__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 })
+                /* @__PURE__ */ jsx("span", { id: labelId(treeId, f.node.id), className: "uix-tree__label", children: f.node.label })
               ] })
             },
             f.node.id

package/dist/display-preferences-model.d.ts

@@ -0,0 +1,53 @@
+type ThemePreference = 'light' | 'dark' | 'system';
+type ContrastPreference = 'standard' | 'more' | 'system';
+type TextScalePreference = 'sm' | 'md' | 'lg' | 'xl';
+type MotionPreference = 'system' | 'reduce';
+type DensityPreference = 'compact' | 'standard' | 'comfortable';
+interface DisplayPreferenceValues {
+    theme: ThemePreference;
+    contrast: ContrastPreference;
+    textScale: TextScalePreference;
+    motion: MotionPreference;
+    density: DensityPreference;
+}
+/** What the system says, for the `system` choices. */
+interface SystemDisplayPreferences {
+    dark: boolean;
+    moreContrast: boolean;
+}
+/** The attributes written on <html>; `undefined` means the attribute is removed. */
+interface DisplayAttributes {
+    'data-theme': 'light' | 'dark';
+    'data-contrast'?: 'more';
+    'data-text-scale'?: 'sm' | 'lg' | 'xl';
+    'data-motion'?: 'reduce';
+    'data-density'?: 'compact' | 'comfortable';
+}
+declare const DEFAULT_DISPLAY_PREFERENCES: DisplayPreferenceValues;
+/** The default `localStorage` key. */
+declare const DISPLAY_PREFERENCES_STORAGE_KEY = "uix-display-preferences";
+declare const DISPLAY_PREFERENCE_OPTIONS: {
+    readonly theme: readonly ["light", "dark", "system"];
+    readonly contrast: readonly ["standard", "more", "system"];
+    readonly textScale: readonly ["sm", "md", "lg", "xl"];
+    readonly motion: readonly ["system", "reduce"];
+    readonly density: readonly ["compact", "standard", "comfortable"];
+};
+/** Read stored preferences; anything missing or unknown falls back to `defaults`. */
+declare function parseDisplayPreferences(raw: string | null | undefined, defaults?: DisplayPreferenceValues): DisplayPreferenceValues;
+/** The <html> attributes for a set of preferences, resolving `system` against the system. */
+declare function resolveDisplayAttributes(prefs: DisplayPreferenceValues, system: SystemDisplayPreferences): DisplayAttributes;
+/** Write (or remove) the attributes on an element, normally `document.documentElement`. */
+declare function applyDisplayAttributes(root: Element, attributes: DisplayAttributes): void;
+/** The system's answers from `matchMedia`; all false where there is none (SSR, tests). */
+declare function readSystemDisplayPreferences(): SystemDisplayPreferences;
+/**
+ * An inline script for the document head that applies the stored preferences before the first
+ * paint, so a dark or large-text page never flashes light or small (HAR-1372). Self-contained ES5;
+ * it never throws. Put it in a `<script>` before the stylesheets:
+ *   <script dangerouslySetInnerHTML={{ __html: displayPreferencesScript() }} />
+ * It mirrors parseDisplayPreferences + resolveDisplayAttributes (tested to agree).
+ */
+declare function displayPreferencesScript(storageKey?: string, defaults?: DisplayPreferenceValues): string;
+
+export { type ContrastPreference, DEFAULT_DISPLAY_PREFERENCES, DISPLAY_PREFERENCES_STORAGE_KEY, DISPLAY_PREFERENCE_OPTIONS, type DensityPreference, type DisplayAttributes, type DisplayPreferenceValues, type MotionPreference, type SystemDisplayPreferences, type TextScalePreference, type ThemePreference, applyDisplayAttributes, displayPreferencesScript, parseDisplayPreferences, readSystemDisplayPreferences, resolveDisplayAttributes };

package/dist/display-preferences-model.js

@@ -0,0 +1,64 @@
+const DEFAULT_DISPLAY_PREFERENCES = {
+  theme: "system",
+  contrast: "system",
+  textScale: "md",
+  motion: "system",
+  density: "standard"
+};
+const DISPLAY_PREFERENCES_STORAGE_KEY = "uix-display-preferences";
+const DISPLAY_PREFERENCE_OPTIONS = {
+  theme: ["light", "dark", "system"],
+  contrast: ["standard", "more", "system"],
+  textScale: ["sm", "md", "lg", "xl"],
+  motion: ["system", "reduce"],
+  density: ["compact", "standard", "comfortable"]
+};
+function parseDisplayPreferences(raw, defaults = DEFAULT_DISPLAY_PREFERENCES) {
+  let stored = {};
+  try {
+    stored = raw ? JSON.parse(raw) ?? {} : {};
+  } catch {
+    stored = {};
+  }
+  if (typeof stored !== "object") stored = {};
+  const pick = (key) => {
+    const value = stored[key];
+    return DISPLAY_PREFERENCE_OPTIONS[key].includes(value) ? value : defaults[key];
+  };
+  return { theme: pick("theme"), contrast: pick("contrast"), textScale: pick("textScale"), motion: pick("motion"), density: pick("density") };
+}
+function resolveDisplayAttributes(prefs, system) {
+  const theme = prefs.theme === "system" ? system.dark ? "dark" : "light" : prefs.theme;
+  const more = prefs.contrast === "more" || prefs.contrast === "system" && system.moreContrast;
+  return {
+    "data-theme": theme,
+    "data-contrast": more ? "more" : void 0,
+    "data-text-scale": prefs.textScale === "md" ? void 0 : prefs.textScale,
+    "data-motion": prefs.motion === "reduce" ? "reduce" : void 0,
+    "data-density": prefs.density === "standard" ? void 0 : prefs.density
+  };
+}
+function applyDisplayAttributes(root, attributes) {
+  for (const name of ["data-theme", "data-contrast", "data-text-scale", "data-motion", "data-density"]) {
+    const value = attributes[name];
+    if (value == null) root.removeAttribute(name);
+    else if (root.getAttribute(name) !== value) root.setAttribute(name, value);
+  }
+}
+function readSystemDisplayPreferences() {
+  const mm = (query) => typeof matchMedia === "function" && matchMedia(query).matches;
+  return { dark: mm("(prefers-color-scheme: dark)"), moreContrast: mm("(prefers-contrast: more)") };
+}
+function displayPreferencesScript(storageKey = DISPLAY_PREFERENCES_STORAGE_KEY, defaults = DEFAULT_DISPLAY_PREFERENCES) {
+  return `(function(){try{var d=document.documentElement,p={};try{p=JSON.parse(localStorage.getItem(${JSON.stringify(storageKey)})||'{}')||{}}catch(e){}if(typeof p!=='object')p={};var D=${JSON.stringify(defaults)},O=${JSON.stringify(DISPLAY_PREFERENCE_OPTIONS)};for(var k in O)if(O[k].indexOf(p[k])<0)p[k]=D[k];var m=function(q){return !!(window.matchMedia&&window.matchMedia(q).matches)};var s=function(n,v){if(v)d.setAttribute(n,v);else d.removeAttribute(n)};s('data-theme',p.theme==='light'||p.theme==='dark'?p.theme:(m('(prefers-color-scheme: dark)')?'dark':'light'));s('data-contrast',p.contrast==='more'||(p.contrast!=='standard'&&m('(prefers-contrast: more)'))?'more':'');s('data-text-scale',p.textScale==='sm'||p.textScale==='lg'||p.textScale==='xl'?p.textScale:'');s('data-motion',p.motion==='reduce'?'reduce':'');s('data-density',p.density==='compact'||p.density==='comfortable'?p.density:'')}catch(e){}})();`;
+}
+export {
+  DEFAULT_DISPLAY_PREFERENCES,
+  DISPLAY_PREFERENCES_STORAGE_KEY,
+  DISPLAY_PREFERENCE_OPTIONS,
+  applyDisplayAttributes,
+  displayPreferencesScript,
+  parseDisplayPreferences,
+  readSystemDisplayPreferences,
+  resolveDisplayAttributes
+};