@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/FilterEditor.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { TextFilterOperator, NumberFilterOperator, FilterField, FilterValue } from '../filter-model.js';
+import { TextFilterOperator, NumberFilterOperator, DateFilterOperator, FilterField, FilterValue } from '../filter-model.js';
 
 interface FilterEditorLabels {
     apply: string;
@@ -26,7 +26,15 @@ interface FilterEditorLabels {
     remove: string;
     /** Names the row of `field.presets` chips. Optional so existing label objects still type-check; default "Presets". */
     presets?: string;
+    /** `tags` (HAR-1832): the field that takes a new value, and its hint. Optional, like `presets`. */
+    addTag?: string;
+    /** `tags`: how to add one, read with the field. */
+    addTagHint?: string;
+    /** `date` (HAR-1832): the date of on / before / after. Optional, like `presets`. */
+    date?: string;
     operators: Record<TextFilterOperator | NumberFilterOperator, string>;
+    /** `date` conditions (HAR-1832). Optional, like `presets`. */
+    dateOperators?: Partial<Record<DateFilterOperator, string>>;
 }
 declare const DEFAULT_FILTER_EDITOR_LABELS: FilterEditorLabels;
 interface FilterEditorProps {
@@ -34,7 +42,12 @@ interface FilterEditorProps {
     /** Undefined means "not filtered yet". */
     value: FilterValue | undefined;
     onValueChange: (value: FilterValue) => void;
-    onApply: () => void;
+    /**
+     * Apply the filter: the Apply button, or Enter in any field (HAR-1832). Gets the value to
+     * apply, which already holds a tag still being typed: read it rather than your state, which
+     * has not caught up when Enter applies in the same event.
+     */
+    onApply: (value: FilterValue) => void;
     onClear: () => void;
     labels?: Partial<FilterEditorLabels>;
     /** Show an option filter above an enum list once it has more options than this. Default 8. */
@@ -44,8 +57,9 @@ interface FilterEditorProps {
 }
 /**
  * Editor content for one typed column filter (HAR-1365; TENSOR C6, MOTUS C-1): an enum
- * multi-select, text or number with a condition, a date range, yes/no, or records found by
- * an async search. The product owns the popover trigger and the query; `summarizeFilter`
+ * multi-select, text or number with a condition, a date range, a date with a condition
+ * (on / before / after / between), yes/no, free-text tags, or records found by an async search
+ * (restored ids get their labels from `field.resolveLabels`). Enter applies in every kind. The product owns the popover trigger and the query; `summarizeFilter`
  * turns the applied value into the chip text. `FilterPopover` stays for the one-string case.
  * An enum field's `presets` (HAR-1505) render as toggle chips above its options. Words come
  * from `labels`, or from `UixLabelsProvider`'s `filterEditor` entry.

package/dist/components/FilterEditor.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment2, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Button } from "./Button.js";
 import { Checkbox } from "./Checkbox.js";
 import { Input } from "./Input.js";
@@ -8,9 +8,11 @@ import { Radio, RadioGroup } from "./Radio.js";
 import { Select } from "./Select.js";
 import { Chip } from "./Chip.js";
 import { fillLabel } from "../fill-label.js";
+import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
+import { useDelayedPending } from "../hooks/useDelayedPending.js";
 import { foldForSearch } from "../search-suggest-model.js";
-import { NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue, matchFilterPreset } from "../filter-model.js";
+import { DATE_FILTER_OPERATORS, NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue, isUnresolvedChoice, matchFilterPreset, orderFilterRange } from "../filter-model.js";
 const DEFAULT_FILTER_EDITOR_LABELS = {
   apply: "Apply",
   clear: "Clear",
@@ -32,6 +34,10 @@ const DEFAULT_FILTER_EDITOR_LABELS = {
   selected: "{count} selected",
   remove: "Remove {label}",
   presets: "Presets",
+  addTag: "Add a value",
+  addTagHint: "Enter or a comma adds it.",
+  date: "Date",
+  dateOperators: { on: "on", before: "before", after: "after", between: "between" },
   operators: {
     contains: "contains",
     "not-contains": "does not contain",
@@ -53,10 +59,21 @@ function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear
     ...DEFAULT_FILTER_EDITOR_LABELS,
     ...provided,
     ...labelOverrides,
-    operators: { ...DEFAULT_FILTER_EDITOR_LABELS.operators, ...provided?.operators, ...labelOverrides?.operators }
+    operators: { ...DEFAULT_FILTER_EDITOR_LABELS.operators, ...provided?.operators, ...labelOverrides?.operators },
+    dateOperators: { ...DEFAULT_FILTER_EDITOR_LABELS.dateOperators, ...provided?.dateOperators, ...labelOverrides?.dateOperators }
   };
   const id = useId();
-  const value = valueProp?.kind === field.kind ? valueProp : emptyFilterValue(field.kind);
+  let value = valueProp?.kind === field.kind ? valueProp : emptyFilterValue(field.kind);
+  if (value.kind === "date" && field.dateOperators?.length && !field.dateOperators.includes(value.operator)) value = { ...value, operator: field.dateOperators[0] };
+  const pendingTag = useRef(() => void 0);
+  const apply = () => onApply(orderFilterRange((value.kind === "tags" ? pendingTag.current() : void 0) ?? value));
+  const onKeyDown = (event) => {
+    if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing || event.keyCode === 229) return;
+    const target = event.target;
+    if (target.closest('button, a, textarea, [role="option"], [role="listbox"], [aria-expanded="true"]')) return;
+    event.preventDefault();
+    apply();
+  };
   let body = null;
   switch (value.kind) {
     case "enum":
@@ -65,13 +82,31 @@ function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear
     case "reference":
       body = /* @__PURE__ */ jsx(ReferenceBody, { field, value, onChange: onValueChange, labels, delay: searchDelay });
       break;
+    case "tags":
+      body = /* @__PURE__ */ jsx(TagsBody, { value, onChange: onValueChange, labels, pending: pendingTag, id });
+      break;
+    case "date": {
+      const ops = field.dateOperators ?? DATE_FILTER_OPERATORS;
+      const words = labels.dateOperators ?? {};
+      const between = value.operator === "between";
+      body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
+        ops.length > 1 && /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": labels.operator, value: value.operator, onChange: (e) => onValueChange({ ...value, operator: e.currentTarget.value, ...e.currentTarget.value === "between" ? {} : { to: void 0 } }), children: ops.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: words[op] ?? DEFAULT_FILTER_EDITOR_LABELS.dateOperators[op] }, op)) }),
+        /* @__PURE__ */ jsxs("label", { className: "uix-filter-editor__date", children: [
+          /* @__PURE__ */ jsx("span", { children: between ? labels.from : labels.date ?? DEFAULT_FILTER_EDITOR_LABELS.date }),
+          /* @__PURE__ */ jsx(Input, { type: "date", value: value.from ?? "", max: between ? value.to : void 0, onChange: (e) => onValueChange({ ...value, from: e.currentTarget.value || void 0 }), autoFocus: true })
+        ] }),
+        between && /* @__PURE__ */ jsxs("label", { className: "uix-filter-editor__date", children: [
+          /* @__PURE__ */ jsx("span", { children: labels.to }),
+          /* @__PURE__ */ jsx(Input, { type: "date", value: value.to ?? "", min: value.from, onChange: (e) => onValueChange({ ...value, to: e.currentTarget.value || void 0 }) })
+        ] })
+      ] });
+      break;
+    }
     case "text": {
       const ops = field.operators ?? TEXT_FILTER_OPERATORS;
       body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
         ops.length > 1 && /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": labels.operator, value: value.operator, onChange: (e) => onValueChange({ ...value, operator: e.currentTarget.value }), children: ops.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: labels.operators[op] }, op)) }),
-        /* @__PURE__ */ jsx(Input, { "aria-label": labels.value, value: value.text, onChange: (e) => onValueChange({ ...value, text: e.currentTarget.value }), onKeyDown: (e) => {
-          if (e.key === "Enter") onApply();
-        }, autoFocus: true })
+        /* @__PURE__ */ jsx(Input, { "aria-label": labels.value, value: value.text, onChange: (e) => onValueChange({ ...value, text: e.currentTarget.value }), autoFocus: true })
       ] });
       break;
     }
@@ -111,12 +146,12 @@ function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear
       break;
     }
   }
-  return /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover uix-filter-editor", role: "group", "aria-labelledby": `${id}-label`, "data-kind": field.kind, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover uix-filter-editor", role: "group", "aria-labelledby": `${id}-label`, "data-kind": field.kind, onKeyDown, children: [
     /* @__PURE__ */ jsx("div", { id: `${id}-label`, className: "uix-filter-editor__label", children: field.label }),
-    body,
+    /* @__PURE__ */ jsx(Fragment2, { children: body }, `${field.kind}:${field.id}`),
     /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover__actions", children: [
       /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: onClear, children: labels.clear }),
-      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "primary", onClick: onApply, children: labels.apply })
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "primary", onClick: apply, children: labels.apply })
     ] })
   ] });
 }
@@ -146,13 +181,18 @@ function ReferenceBody({ field, value, onChange, labels, delay }) {
   const [query, setQuery] = useState("");
   const [state, setState] = useState({ status: "idle", results: [] });
   const [attempt, setAttempt] = useState(0);
+  const slow = useDelayedPending(state.status === "loading");
   const latest = useRef(0);
+  const search = useRef(field.onSearch);
+  search.current = field.onSearch;
+  const resolve = useRef(field.resolveLabels);
+  resolve.current = field.resolveLabels;
   useEffect(() => {
-    if (!field.onSearch) return;
+    if (!search.current) return;
     const run = ++latest.current;
     const timer = window.setTimeout(() => {
       setState((s) => ({ ...s, status: "loading" }));
-      field.onSearch(query.trim()).then(
+      search.current(query.trim()).then(
         (results) => {
           if (run === latest.current) setState({ status: "done", results });
         },
@@ -162,22 +202,104 @@ function ReferenceBody({ field, value, onChange, labels, delay }) {
       );
     }, delay);
     return () => window.clearTimeout(timer);
-  }, [query, attempt, field, delay]);
-  const chosen = new Map(value.values.map((v) => [v.value, v]));
-  const toggle = (choice, on) => onChange({ kind: "reference", values: on ? [...value.values, choice] : value.values.filter((v) => v.value !== choice.value) });
+  }, [query, attempt, field.id, delay]);
+  const [known, setKnown] = useState(/* @__PURE__ */ new Map());
+  const answered = useRef(/* @__PURE__ */ new Set());
+  const requests = useRef(/* @__PURE__ */ new Map());
+  const unresolved = value.values.filter((v) => isUnresolvedChoice(v) && !known.has(v.value) && !answered.current.has(v.value)).map((v) => v.value);
+  const unresolvedKey = unresolved.join("\0");
+  useEffect(() => {
+    if (!unresolvedKey || !resolve.current) return;
+    let live = true;
+    const ids = unresolvedKey.split("\0");
+    let request = requests.current.get(unresolvedKey);
+    if (!request) {
+      request = resolve.current(ids);
+      requests.current.set(unresolvedKey, request);
+    }
+    const settle = (choices) => {
+      for (const id of ids) answered.current.add(id);
+      if (live) setKnown((prev) => new Map([...prev, ...choices.map((c) => [c.value, c.label])]));
+    };
+    request.then(settle, () => settle([]));
+    return () => {
+      live = false;
+    };
+  }, [unresolvedKey, field.id]);
+  const labelled = (v) => isUnresolvedChoice(v) && known.has(v.value) ? { value: v.value, label: known.get(v.value) } : v;
+  const values = value.values.map(labelled);
+  const chosen = new Map(values.map((v) => [v.value, v]));
+  const toggle = (choice, on) => onChange({ kind: "reference", values: on ? [...values, choice] : values.filter((v) => v.value !== choice.value) });
+  const showResults = state.status === "done" || state.status === "loading" && state.results.length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    value.values.length > 0 && /* @__PURE__ */ jsx("div", { className: "uix-chip-group", role: "group", "aria-label": fillLabel(labels.selected, { count: value.values.length }), children: value.values.map((v) => /* @__PURE__ */ jsx(Chip, { removeLabel: fillLabel(labels.remove, { label: v.label }), onRemove: () => toggle(v, false), children: v.label }, v.value)) }),
+    values.length > 0 && /* @__PURE__ */ jsx("div", { className: "uix-chip-group", role: "group", "aria-label": fillLabel(labels.selected, { count: values.length }), children: values.map((v) => /* @__PURE__ */ jsx(Chip, { removeLabel: fillLabel(labels.remove, { label: v.label }), onRemove: () => toggle(v, false), children: v.label }, v.value)) }),
     /* @__PURE__ */ jsx(Input, { type: "search", size: "sm", "aria-label": labels.search, placeholder: labels.search, value: query, onChange: (e) => setQuery(e.currentTarget.value), autoFocus: true }),
     /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__list", "aria-busy": state.status === "loading" || void 0, children: [
-      state.status === "loading" && /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", role: "status", children: labels.searching }),
       state.status === "error" && /* @__PURE__ */ jsxs("p", { className: "uix-filter-editor__note", role: "alert", children: [
         labels.searchFailed,
         " ",
         /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => setAttempt((n) => n + 1), children: labels.retry })
       ] }),
       state.status === "done" && state.results.length === 0 && /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", children: labels.noMatches }),
-      state.status === "done" && state.results.map((r) => /* @__PURE__ */ jsx(Checkbox, { label: r.label, checked: chosen.has(r.value), onChange: (e) => toggle(r, e.currentTarget.checked) }, r.value))
-    ] })
+      showResults && state.results.map((r) => /* @__PURE__ */ jsx(Checkbox, { label: r.label, checked: chosen.has(r.value), onChange: (e) => toggle(r, e.currentTarget.checked) }, r.value))
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: cx("uix-filter-editor__note", "uix-filter-editor__searching", !slow && "uix-visually-hidden"), role: "status", "data-shown": slow || void 0, children: slow ? labels.searching : "" })
+  ] });
+}
+const splitTags = (text) => text.split(/[,\n]/).map((t) => t.trim()).filter(Boolean);
+function TagsBody({ value, onChange, labels, pending, id }) {
+  const [draft, setDraft] = useState("");
+  const field = useRef(null);
+  const withTags = (tags) => ({ kind: "tags", values: [...value.values, ...tags.filter((t, i) => !value.values.includes(t) && tags.indexOf(t) === i)] });
+  pending.current = () => splitTags(draft).length ? withTags(splitTags(draft)) : void 0;
+  const commit = (text) => {
+    const tags = splitTags(text);
+    if (tags.length) onChange(withTags(tags));
+    setDraft("");
+  };
+  const remove = (tag) => {
+    onChange({ kind: "tags", values: value.values.filter((t) => t !== tag) });
+    field.current?.focus();
+  };
+  const onKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+    if ((event.key === "Enter" || event.key === ",") && draft.trim()) {
+      event.preventDefault();
+      commit(draft);
+    } else if (event.key === ",") {
+      event.preventDefault();
+    } else if (event.key === "Backspace" && draft === "" && value.values.length > 0) {
+      onChange({ kind: "tags", values: value.values.slice(0, -1) });
+    }
+  };
+  const onPaste = (event) => {
+    const text = event.clipboardData.getData("text");
+    if (!/[,\n]/.test(text)) return;
+    event.preventDefault();
+    commit(`${draft}${text}`);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "uix-taginput uix-filter-editor__tags", children: [
+    value.values.map((tag) => /* @__PURE__ */ jsxs("span", { className: "uix-tag", children: [
+      tag,
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-tag__remove", "aria-label": fillLabel(labels.remove, { label: tag }), onClick: () => remove(tag), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+    ] }, tag)),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: field,
+        className: "uix-taginput__field",
+        "aria-label": labels.addTag ?? DEFAULT_FILTER_EDITOR_LABELS.addTag,
+        "aria-describedby": `${id}-tags-hint`,
+        placeholder: labels.addTag ?? DEFAULT_FILTER_EDITOR_LABELS.addTag,
+        value: draft,
+        enterKeyHint: "enter",
+        onChange: (e) => setDraft(e.currentTarget.value),
+        onKeyDown,
+        onPaste,
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { id: `${id}-tags-hint`, className: "uix-visually-hidden", children: labels.addTagHint ?? DEFAULT_FILTER_EDITOR_LABELS.addTagHint })
   ] });
 }
 export {

package/dist/components/FocusOnMount.d.ts

@@ -0,0 +1,282 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+/**
+ * A heading (or any element) that takes focus once, when it mounts — so a page that replaces
+ * a form with its outcome (SuccessState) reads the outcome first. `tabIndex={-1}`: focusable
+ * by script, not a tab stop. The client half of server-renderable states.
+ */
+declare function FocusOnMount({ as, enabled, children, ...props }: {
+    as: keyof HTMLElementTagNameMap;
+    enabled?: boolean;
+    children?: ReactNode;
+} & HTMLAttributes<HTMLElement>): react.DetailedReactHTMLElement<{
+    ref: react.RefObject<HTMLElement>;
+    tabIndex: number;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    style?: react.CSSProperties | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: react.FormEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onInput?: react.FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onReset?: react.FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: react.FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: react.FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+}, HTMLElement>;
+
+export { FocusOnMount };

package/dist/components/FocusOnMount.js

@@ -0,0 +1,12 @@
+"use client";
+import { createElement, useEffect, useRef } from "react";
+function FocusOnMount({ as, enabled = true, children, ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (enabled) ref.current?.focus({ preventScroll: false });
+  }, [enabled]);
+  return createElement(as, { ...props, ref, tabIndex: -1 }, children);
+}
+export {
+  FocusOnMount
+};

package/dist/components/InfoTip.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { helpParagraphs } from "../info-tip-model.js";
 import { Popover } from "./Popover.js";
 const OPEN_DELAY = 300;
 const CLOSE_DELAY = 100;
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 const QuestionMark = () => /* @__PURE__ */ jsx("svg", { viewBox: "262 -840 436 760", fill: "currentColor", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M424-320q0-81 14.5-116.5T500-514q41-36 62.5-62.5T584-637q0-41-27.5-68T480-732q-51 0-77.5 31T365-638l-103-44q21-64 77-111t141-47q105 0 161.5 58.5T698-641q0 50-21.5 85.5T609-475q-49 47-59.5 71.5T539-320H424Zm56 240q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z" }) });
 const isShown = (el) => {
   try {
@@ -93,18 +94,21 @@ function InfoTipControl({
       refocusing.current = false;
     }
   };
-  useEffect(() => {
-    if (!open) return;
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return void 0;
     const onKey = (e) => {
-      if (e.key === "Escape") escape();
+      if (e.key !== "Escape" || !openRef.current) return;
+      e.preventDefault();
+      e.stopPropagation();
+      escape();
     };
     const onPointer = (e) => {
       if (!wrapRef.current?.contains(e.target)) hide();
     };
-    document.addEventListener("keydown", onKey);
+    document.addEventListener("keydown", onKey, true);
     document.addEventListener("pointerdown", onPointer, true);
     return () => {
-      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("keydown", onKey, true);
       document.removeEventListener("pointerdown", onPointer, true);
     };
   }, [open]);
@@ -148,13 +152,8 @@ function InfoTipControl({
             pinned.current = true;
           }
         },
-        onKeyDown: (e) => {
+        onKeyDown: () => {
           pressing.current = false;
-          if (e.key === "Escape" && openRef.current) {
-            e.preventDefault();
-            e.stopPropagation();
-            hide();
-          }
         },
         children: /* @__PURE__ */ jsx(QuestionMark, {})
       }