@tensor_1/react 2.41.0 → 2.43.0

package/dist/components/SearchBar.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { HTMLAttributes, Ref } from 'react';
+import { ButtonVariant } from './Button.js';
+import '../link.js';
+import './Kbd.js';
+
+/** The words of a `SearchBar` (HAR-2030); the field's own name is its `label`. */
+interface SearchBarLabels {
+    /** Accessible name of the clear button. */
+    clear: string;
+    /** Text of the submit button (`submitButton`). */
+    submit: string;
+}
+interface SearchBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit' | 'onChange' | 'defaultValue'> {
+    /**
+     * Accessible name of the field and of its search landmark, e.g. "Search services". It is not
+     * shown (the placeholder is not a label): the field shows `placeholder`.
+     */
+    label: string;
+    /** The text in the field (controlled). Leave it out, with `defaultValue`, for an uncontrolled field. */
+    value?: string;
+    defaultValue?: string;
+    /** Called on every edit, and with `''` when the field is cleared. */
+    onValueChange?: (value: string) => void;
+    /** Enter in the field, or the submit button: search for this text. */
+    onSubmit?: (value: string) => void;
+    /** After the clear button or Escape emptied the field. Focus stays in the field. */
+    onClear?: () => void;
+    placeholder?: string;
+    /** `md` (default) for a header or a toolbar; `lg` for a page-level or public search: 44 px, the touch floor. */
+    size?: 'md' | 'lg';
+    /** A submit button after the field, with `labels.submit`. Enter submits either way. */
+    submitButton?: boolean;
+    /** The submit button's variant. Default `primary`. */
+    submitVariant?: ButtonVariant;
+    /**
+     * A `search` landmark named by `label` (default). Pass `false` for a field that filters a list
+     * or a table, where one more landmark per toolbar would crowd the landmark list. Never wrap it
+     * in a `<search>` or `role="search"` of your own: that nests two landmarks.
+     */
+    landmark?: boolean;
+    /** Ids of elements that describe the field (a hint, a result count), as its `aria-describedby`. */
+    inputDescribedBy?: string;
+    /** The words. Default: `UixLabelsProvider` `searchBar`, then English. */
+    labels?: Partial<SearchBarLabels>;
+    /** The field's `name`. */
+    name?: string;
+    /** The field's `id`, e.g. for a "/" shortcut that focuses it. Default: generated. */
+    inputId?: string;
+    inputRef?: Ref<HTMLInputElement>;
+    autoFocus?: boolean;
+    disabled?: boolean;
+}
+/**
+ * One search field look and behaviour (HAR-2030; TENSOR audit UXC-02) over the `.uix-searchbar`
+ * contract: a leading magnifier, a clear button while there is text, Enter to search, Escape to
+ * clear (an empty field lets Escape through, so it still closes the dialog it sits in). It is a
+ * `search` landmark named by `label`.
+ *
+ * It is not a `<form>`, so it can sit inside one: Enter calls `onSubmit` and never submits a
+ * surrounding form. For suggestions while typing, use `SearchSuggest`. Inside an overlay that
+ * takes Escape itself before the field (a ConfirmPopover, the table's view menu), Escape closes
+ * the overlay rather than clearing the text.
+ */
+declare function SearchBar({ label, value: valueProp, defaultValue, onValueChange, onSubmit, onClear, placeholder, size, submitButton, submitVariant, landmark, inputDescribedBy, labels: labelsProp, name, inputId, inputRef, autoFocus, disabled, className, ...props }: SearchBarProps): react.JSX.Element;
+
+export { SearchBar, type SearchBarLabels, type SearchBarProps };

package/dist/components/SearchBar.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
+import { Button } from "./Button.js";
+const DEFAULT_SEARCH_BAR_LABELS = { clear: "Clear search", submit: "Search" };
+const SearchIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+] });
+const ClearIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
+function SearchBar({
+  label,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSubmit,
+  onClear,
+  placeholder,
+  size = "md",
+  submitButton = false,
+  submitVariant = "primary",
+  landmark = true,
+  inputDescribedBy,
+  labels: labelsProp,
+  name,
+  inputId,
+  inputRef,
+  autoFocus,
+  disabled,
+  className,
+  ...props
+}) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_SEARCH_BAR_LABELS, ...uixLabels.searchBar, ...labelsProp };
+  const id = useId();
+  const fieldId = inputId ?? `${id}-field`;
+  const labelId = `${id}-label`;
+  const field = useRef(null);
+  const [own, setOwn] = useState(defaultValue);
+  const value = valueProp ?? own;
+  const change = (next) => {
+    setOwn(next);
+    onValueChange?.(next);
+  };
+  const clear = () => {
+    change("");
+    field.current?.focus();
+    onClear?.();
+  };
+  const onKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onSubmit?.(value);
+    } else if (event.key === "Escape" && value !== "") {
+      event.preventDefault();
+      event.stopPropagation();
+      clear();
+    }
+  };
+  const setField = useCallback((node) => {
+    field.current = node;
+    if (typeof inputRef === "function") inputRef(node);
+    else if (inputRef) inputRef.current = node;
+  }, [inputRef]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: landmark ? "search" : void 0,
+      "aria-labelledby": landmark ? labelId : void 0,
+      className: cx("uix-searchbar", size === "md" && "uix-searchbar--md", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-searchbar__wrap", children: [
+          /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: fieldId, className: "uix-visually-hidden", children: label }),
+          /* @__PURE__ */ jsx(SearchIcon, {}),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: setField,
+              id: fieldId,
+              type: "search",
+              name,
+              className: "uix-input",
+              value,
+              placeholder,
+              autoComplete: "off",
+              enterKeyHint: "search",
+              "aria-describedby": inputDescribedBy,
+              autoFocus,
+              disabled,
+              onChange: (event) => change(event.currentTarget.value),
+              onKeyDown
+            }
+          ),
+          value !== "" && !disabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uix-searchbar__clear",
+              "aria-label": labels.clear,
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: clear,
+              children: /* @__PURE__ */ jsx(ClearIcon, {})
+            }
+          )
+        ] }),
+        submitButton && /* @__PURE__ */ jsx(Button, { type: "button", variant: submitVariant, size: size === "lg" ? "lg" : "md", disabled, onClick: () => onSubmit?.(value), children: labels.submit })
+      ]
+    }
+  );
+}
+export {
+  SearchBar
+};

package/dist/components/Select.js

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment2, forwardRef, isValidElement, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
-import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { useAnchoredPosition, zoomOf } from "../hooks/useAnchoredPosition.js";
 import { Drawer } from "./Drawer.js";
 import {
   buildSelectModel,
@@ -537,9 +537,10 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
       }
     };
     if (showing) {
+      const zoom = zoomOf(trigger);
       const r = trigger.getBoundingClientRect();
-      const room = Math.max(r.top, window.innerHeight - r.bottom) - OFFSET - EDGE;
-      popup.style.minWidth = `${Math.round(r.width)}px`;
+      const room = Math.max(r.top, window.innerHeight - r.bottom) / zoom - OFFSET - EDGE;
+      popup.style.minWidth = `${Math.round(r.width / zoom)}px`;
       popup.style.maxHeight = `${Math.max(96, Math.min(MAX_HEIGHT, Math.floor(room)))}px`;
       try {
         if (!isOpen()) popup.showPopover();
@@ -581,7 +582,7 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
     doc.addEventListener("pointerdown", onDown, true);
     return () => doc.removeEventListener("pointerdown", onDown, true);
   }, [showing]);
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!open) return;
     if (active >= entries.length || active < 0 && entries.length) setActive(entries.length ? selectedIndexIn(entries) >= 0 ? selectedIndexIn(entries) : firstEnabled(entries) : -1);
   }, [open, entries.length, query]);

package/dist/components/ShortcutHint.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { KeyShortcut } from './Kbd.js';
+
+interface ShortcutHintProps {
+    keys: KeyShortcut;
+    /** Text before the keys, e.g. an icon button's name. */
+    label?: string;
+    /** Set the button's `aria-keyshortcuts`. `false` when the button already has its own (a prop, or a Tooltip's). */
+    ownsAria: boolean;
+}
+/**
+ * The hover / keyboard-focus hint of a `Button` with `shortcut` (HAR-2031). In the button it
+ * leaves only an empty, hidden marker, so the button's text, name, layout and selectors are
+ * unchanged (no wrapper, no sibling). The bubble itself is portalled after mount into the
+ * nearest `<dialog>` (outside one a modal dialog makes everything inert) or `<body>`, as a
+ * top-layer popover, `aria-hidden`: assistive technology gets the key from the button's
+ * `aria-keyshortcuts`, which this sets for the viewer's platform (Mod is Meta on Apple, Control
+ * elsewhere) unless the button already has its own.
+ *
+ * It opens on hover and on keyboard focus (`:focus-visible`), so focus a menu or dialog sends back
+ * after a mouse choice does not open it. It closes on leave, blur, Escape and when the button is
+ * disabled, and stays while the pointer is on it (WCAG 1.4.13). Inside a `Tooltip` it steps aside:
+ * the Tooltip shows the keys in its own bubble.
+ *
+ * It is its own client component so that `Button`, which has no hooks, still renders on a server.
+ */
+declare function ShortcutHint({ keys, label, ownsAria }: ShortcutHintProps): react.JSX.Element;
+
+export { ShortcutHint, type ShortcutHintProps };

package/dist/components/ShortcutHint.js

@@ -0,0 +1,149 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { KbdCombo, ariaKeyShortcuts, useKbdPlatform } from "./Kbd.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const isShown = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+const focusVisible = (el) => {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+};
+const stop = (event) => event.stopPropagation();
+function ShortcutHint({ keys, label, ownsAria }) {
+  const markerRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const anchorRef = useRef(null);
+  const [host, setHost] = useState(null);
+  const [open, setOpen] = useState(false);
+  const platform = useKbdPlatform();
+  const shortcuts = ariaKeyShortcuts(keys, platform);
+  useAnchoredPosition(anchorRef, bubbleRef, { open, placement: "top", offset: 6 });
+  useIsomorphicLayoutEffect(() => {
+    const button = markerRef.current?.parentElement;
+    if (!button || !ownsAria) return void 0;
+    const before = button.getAttribute("aria-keyshortcuts");
+    button.setAttribute("aria-keyshortcuts", shortcuts);
+    return () => {
+      if (button.getAttribute("aria-keyshortcuts") !== shortcuts) return;
+      if (before == null) button.removeAttribute("aria-keyshortcuts");
+      else button.setAttribute("aria-keyshortcuts", before);
+    };
+  }, [shortcuts, ownsAria]);
+  useIsomorphicLayoutEffect(() => {
+    const button = markerRef.current?.parentElement ?? null;
+    anchorRef.current = button;
+    if (!button || button.parentElement?.closest(".uix-tooltip")) {
+      setHost(null);
+      return;
+    }
+    setHost(button.closest("dialog") ?? button.ownerDocument.body);
+  }, []);
+  useEffect(() => {
+    const button = anchorRef.current;
+    const bubble = bubbleRef.current;
+    if (!host || !button || !bubble) return void 0;
+    let timer;
+    const show = () => {
+      window.clearTimeout(timer);
+      if (!isShown(bubble)) {
+        try {
+          bubble.showPopover();
+        } catch {
+        }
+      }
+      setOpen(true);
+    };
+    const hide = () => {
+      window.clearTimeout(timer);
+      if (isShown(bubble)) {
+        try {
+          bubble.hidePopover();
+        } catch {
+        }
+      }
+      setOpen(false);
+    };
+    const hideSoon = () => {
+      window.clearTimeout(timer);
+      timer = window.setTimeout(() => {
+        if (button.ownerDocument.activeElement === button && focusVisible(button)) return;
+        hide();
+      }, 100);
+    };
+    const onFocus = () => {
+      if (focusVisible(button)) show();
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") hide();
+    };
+    const watch = new MutationObserver(() => {
+      if (button.hasAttribute("disabled") || button.getAttribute("aria-disabled") === "true") hide();
+    });
+    watch.observe(button, { attributes: true, attributeFilter: ["disabled", "aria-disabled"] });
+    button.addEventListener("mouseenter", show);
+    button.addEventListener("mouseleave", hideSoon);
+    button.addEventListener("focus", onFocus);
+    button.addEventListener("blur", hide);
+    bubble.addEventListener("mouseenter", show);
+    bubble.addEventListener("mouseleave", hideSoon);
+    button.ownerDocument.addEventListener("keydown", onKey);
+    return () => {
+      window.clearTimeout(timer);
+      watch.disconnect();
+      button.removeEventListener("mouseenter", show);
+      button.removeEventListener("mouseleave", hideSoon);
+      button.removeEventListener("focus", onFocus);
+      button.removeEventListener("blur", hide);
+      bubble.removeEventListener("mouseenter", show);
+      bubble.removeEventListener("mouseleave", hideSoon);
+      button.ownerDocument.removeEventListener("keydown", onKey);
+      if (isShown(bubble)) {
+        try {
+          bubble.hidePopover();
+        } catch {
+        }
+      }
+    };
+  }, [host]);
+  const bubbleAttr = { popover: "manual" };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ref: markerRef, hidden: true, "data-uix-shortcut-hint": "" }),
+    host && createPortal(
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ref: bubbleRef,
+          className: "uix-tooltip__bubble uix-tooltip__bubble--hint",
+          "aria-hidden": "true",
+          ...bubbleAttr,
+          onClick: stop,
+          onDoubleClick: stop,
+          onContextMenu: stop,
+          onPointerDown: stop,
+          onPointerUp: stop,
+          onMouseDown: stop,
+          onMouseUp: stop,
+          children: [
+            label && /* @__PURE__ */ jsx("span", { children: label }),
+            /* @__PURE__ */ jsx("span", { className: "uix-tooltip__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform }) })
+          ]
+        }
+      ),
+      host
+    )
+  ] });
+}
+export {
+  ShortcutHint
+};

package/dist/components/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { Placement } from '../overlay-position.js';
+import { KeyShortcut } from './Kbd.js';
 
 interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
     /** Tooltip text. Pass this or `content`. */
@@ -13,6 +14,14 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
     content?: ReactNode;
     /** Preferred placement. Default `'top'`. */
     placement?: Placement;
+    /**
+     * The trigger's keyboard shortcut, in `KbdCombo` key names, e.g. `['Mod', 'K']` (HAR-2031):
+     * shown with `Kbd` after the text, and set as the trigger's `aria-keyshortcuts` for the
+     * viewer's platform. Default: the `shortcut` of a `Button` child, so a Tooltip around a Button
+     * with a shortcut shows one bubble with the label and the keys. The kit only shows it: the
+     * product binds the key.
+     */
+    shortcut?: KeyShortcut;
     children?: ReactNode;
 }
 /**
@@ -23,6 +32,6 @@ interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'>
  * (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, content, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ label, content, placement, shortcut, className, children, ...props }: TooltipProps): react.JSX.Element;
 
 export { Tooltip, type TooltipProps };

package/dist/components/Tooltip.js

@@ -3,12 +3,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
-function Tooltip({ label, content, placement = "top", className, children, ...props }) {
+import { KbdCombo, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform } from "./Kbd.js";
+function Tooltip({ label, content, placement = "top", shortcut, className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
   const closeTimer = useRef(null);
   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 });
   const cancelClose = () => {
     if (closeTimer.current != null) {
@@ -63,7 +69,8 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
   const bubbleAttr = { popover: "manual" };
   const single = isValidElement(children);
   const child = single ? cloneElement(children, {
-    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" ")
+    "aria-describedby": [children.props["aria-describedby"], id].filter(Boolean).join(" "),
+    ...keyshortcuts ? { "aria-keyshortcuts": keyshortcuts } : {}
   }) : children;
   return /* @__PURE__ */ jsxs(
     "span",
@@ -71,6 +78,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
       ref: triggerRef,
       className: cx("uix-tooltip", className),
       "aria-describedby": single ? void 0 : id,
+      "aria-keyshortcuts": single ? void 0 : keyshortcuts,
       tabIndex: single ? void 0 : 0,
       onMouseEnter: show,
       onMouseLeave: scheduleHide,
@@ -82,7 +90,7 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
       ...props,
       children: [
         child,
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "span",
           {
             ref: bubbleRef,
@@ -92,7 +100,10 @@ function Tooltip({ label, content, placement = "top", className, children, ...pr
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: content ?? label
+            children: [
+              content ?? label,
+              keys && /* @__PURE__ */ jsx("span", { className: "uix-tooltip__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...keys], platform }) })
+            ]
           }
         )
       ]