@tensor_1/react 2.47.0 → 2.48.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/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, {})
       }

package/dist/components/InlineEdit.d.ts

@@ -3,11 +3,11 @@ import { ReactNode } from 'react';
 
 /** Every word `InlineEdit` renders or announces. `{label}` is the field's name. */
 interface InlineEditLabels {
-    /** Added to the view button's name after the value: "…, Edit {label}". */
+    /** Added to the view button's name after the value: "…, Edit {label}"; the icon trigger's whole name. */
     edit: string;
     save: string;
     cancel: string;
-    /** Polite status while `onSave` runs. */
+    /** Polite status while `onSave` runs (shown after 300 ms, so a fast save does not flash it). */
     saving: string;
     /** Polite status after a save. */
     saved: string;
@@ -15,50 +15,114 @@ interface InlineEditLabels {
     failed: string;
     /** What the view shows when the value is empty and no `placeholder` was given. */
     empty: string;
+    /** Visually hidden before a `readOnlyReason`, so it is read as one: "Read-only: …". */
+    readOnly: string;
 }
 declare const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels;
+/** Where an `InlineEdit` is (HAR-1833). `saved` holds until the field is opened again. */
+type InlineEditState = 'idle' | 'editing' | 'saving' | 'saved' | 'error';
 /** What a custom editor receives. Spread the field props onto your control. */
-interface InlineEditEditorProps {
+interface InlineEditEditorProps<T = string> {
     /** The draft. */
-    value: string;
-    onChange: (next: string) => void;
-    /** Save the draft (what Enter does in the default editor). */
-    save: () => void;
+    value: T;
+    /** Change the draft. With `commit="change"` this also saves it. Ignored while a save runs. */
+    onChange: (next: T) => void;
+    /**
+     * Save the draft (what Enter does in the default editor). Pass the value to save one you
+     * just chose: `save(next)` does not wait for the draft to update, so it never saves a stale one.
+     */
+    save: (next?: T) => void;
     cancel: () => void;
-    /** `id`, the accessible name, the error wiring and `disabled` while saving. */
+    /** `id`, the accessible name, the error wiring, and the busy state while saving. */
     field: {
         id: string;
         'aria-label': string;
         'aria-describedby': string | undefined;
         'aria-invalid': true | undefined;
+        /** True once a save has run for 300 ms (changes are ignored from its start, so a fast save never greys the control). */
         disabled: boolean;
+        /** The same moment as `disabled`, for a text control that should keep focus and its text selectable. */
+        readOnly: boolean;
     };
 }
-interface InlineEditProps {
+/** What `renderError` receives besides the rejection itself. */
+interface InlineEditErrorContext<T = string> {
+    /** The rejection's message, else `labels.failed`: what the default rendering shows. */
+    message: ReactNode;
+    /** The draft that failed. */
+    draft: T;
+    /** Send the draft again. Show it when a retry can help (a timeout, not a refusal). */
+    retry: () => void;
+    /** Close the editor and drop the draft, e.g. after "Reload latest" on a version conflict. */
+    cancel: () => void;
+}
+interface InlineEditProps<T = string> {
     /** The saved value. */
-    value: string;
+    value: T;
     /**
      * Save the new value. Return a promise to show the pending state; a rejection keeps the
      * editor open with the error under it (the rejection's message, else `labels.failed`).
+     * The editor waits for it: the value shows as saved only once it resolves.
      */
-    onSave: (next: string) => void | Promise<void>;
+    onSave: (next: T) => void | Promise<unknown>;
     /** The field's name: "Title", "Due date". It names the edit button and the editor. */
     label: string;
-    /** How the saved value shows. Default: the text itself. */
-    renderView?: (value: string) => ReactNode;
+    /**
+     * How the saved value shows. Default: the text itself (`String(value)`); pass it for any
+     * value that is not a string (an option, a person, a time window).
+     */
+    renderView?: (value: T) => ReactNode;
     /**
      * A custom editor: a `Select`, a `Combobox`, a date field. Spread `field` onto the control.
-     * Default: an `Input`, or a `Textarea` with `multiline`.
+     * Default: an `Input`, or a `Textarea` with `multiline` (string values only).
      */
-    renderEditor?: (props: InlineEditEditorProps) => ReactNode;
+    renderEditor?: (props: InlineEditEditorProps<T>) => ReactNode;
     /** Edit in a textarea: Enter adds a line, Ctrl/⌘+Enter saves. */
     multiline?: boolean;
     /** Return a message to refuse the draft; nothing is saved while it returns one. */
-    validate?: (next: string) => ReactNode | undefined;
+    validate?: (next: T) => ReactNode | undefined;
+    /** Whether two values are the same (an unchanged draft saves nothing). Default `Object.is`. */
+    equals?: (a: T, b: T) => boolean;
+    /** Whether a value counts as empty (the view then shows `placeholder`). Default: `null`, `undefined` or `''`. */
+    isEmpty?: (value: T) => boolean;
+    /**
+     * When the draft is saved (HAR-1833).
+     * `'explicit'` (default): Enter or Save only; leaving the field keeps the draft open.
+     * `'blur'`: also when focus leaves the editor (text fields of a record).
+     * `'change'`: as soon as the editor reports a change (a select, a toggle, a date), with no
+     * Save button; leaving it unchanged closes it.
+     */
+    commit?: 'explicit' | 'blur' | 'change';
     /** Shown in the view while the value is empty, e.g. "Add a description". */
     placeholder?: ReactNode;
-    /** Read-only: the value shows as plain text, with no edit button. */
+    /** Read-only: the value shows as plain text, with no edit control. */
     disabled?: boolean;
+    /**
+     * Why the field cannot be edited here ("Set by the integration"). Makes it read-only and
+     * shows the reason under the value, which is described by it.
+     */
+    readOnlyReason?: ReactNode;
+    /**
+     * `'value'` (default): the whole value is the button, named "{value}, Edit {label}".
+     * `'icon'`: the value is plain text and a pencil button after it is named only "Edit {label}"
+     * (for a value that is itself a link, a chip or long text).
+     */
+    trigger?: 'value' | 'icon';
+    /** Controlled open state, e.g. one field of a record open at a time. */
+    editing?: boolean;
+    /** Called when the field asks to open (`true`) or close (`false`). */
+    onEditingChange?: (editing: boolean) => void;
+    /** Controlled draft, e.g. to report unsaved input. Reset to `value` on open. */
+    draft?: T;
+    /** Called with every change of the draft, and with `value` when the field opens. */
+    onDraftChange?: (draft: T) => void;
+    /**
+     * Renders a failed save under the editor, in place of the message: a Try again button that
+     * calls `retry`, or a Reload latest after a version conflict.
+     */
+    renderError?: (error: unknown, context: InlineEditErrorContext<T>) => ReactNode;
+    /** Called on every change of `InlineEditState`. */
+    onStateChange?: (state: InlineEditState) => void;
     /** Each word defaults to `UixLabelsProvider` `inlineEdit`, then to English. */
     labels?: Partial<InlineEditLabels>;
     className?: string;
@@ -67,8 +131,11 @@ interface InlineEditProps {
  * A value that is edited in place (HAR-1381; TENSOR C16 `editable-record.tsx`): the value is
  * a button that says what it edits; activating it swaps in an editor with Save and Cancel.
  * Enter saves and Escape cancels; while `onSave` runs the editor is busy; a failed save keeps
- * the draft and shows why; afterwards focus is back on the value. Nothing is saved on blur.
+ * the draft and shows why; afterwards focus is back on the value, which shows what was saved
+ * until `value` catches up. HAR-1833: any value type (`equals`, `renderView`, `renderEditor`),
+ * saving on blur or on change (`commit`), controllable `editing` and `draft`, `renderError`
+ * with retry, `onStateChange`, an icon trigger, and a `readOnlyReason`.
  */
-declare function InlineEdit({ value, onSave, label, renderView, renderEditor, multiline, validate, placeholder, disabled, labels: labelOverrides, className, }: InlineEditProps): react.JSX.Element;
+declare function InlineEdit<T = string>({ value, onSave, label, renderView, renderEditor, multiline, validate, equals, isEmpty, commit, placeholder, disabled, readOnlyReason, trigger, editing: editingProp, onEditingChange, draft: draftProp, onDraftChange, renderError, onStateChange, labels: labelOverrides, className, }: InlineEditProps<T>): react.JSX.Element;
 
-export { DEFAULT_INLINE_EDIT_LABELS, InlineEdit, type InlineEditEditorProps, type InlineEditLabels, type InlineEditProps };
+export { DEFAULT_INLINE_EDIT_LABELS, InlineEdit, type InlineEditEditorProps, type InlineEditErrorContext, type InlineEditLabels, type InlineEditProps, type InlineEditState };