@tensor_1/react 2.47.0 → 2.49.0

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 };

package/dist/components/InlineEdit.js

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
 import { useUixLabels } from "../labels-context.js";
+import { useDelayedPending } from "../hooks/useDelayedPending.js";
 import { PencilIcon } from "../icons/components.js";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
@@ -15,8 +16,10 @@ const DEFAULT_INLINE_EDIT_LABELS = {
   saving: "Saving\u2026",
   saved: "Saved",
   failed: "Could not save.",
-  empty: "Not set"
+  empty: "Not set",
+  readOnly: "Read-only:"
 };
+const defaultEmpty = (value) => value == null || value === "";
 function InlineEdit({
   value,
   onSave,
@@ -25,22 +28,45 @@ function InlineEdit({
   renderEditor,
   multiline = false,
   validate,
+  equals = Object.is,
+  isEmpty = defaultEmpty,
+  commit = "explicit",
   placeholder,
   disabled = false,
+  readOnlyReason,
+  trigger = "value",
+  editing: editingProp,
+  onEditingChange,
+  draft: draftProp,
+  onDraftChange,
+  renderError,
+  onStateChange,
   labels: labelOverrides,
   className
 }) {
   const labels = { ...DEFAULT_INLINE_EDIT_LABELS, ...useUixLabels().inlineEdit, ...labelOverrides };
   const id = useId();
   const errorId = `${id}-error`;
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(value);
+  const reasonId = `${id}-reason`;
+  const [editingState, setEditingState] = useState(false);
+  const isEditing = editingProp ?? editingState;
+  const [draftState, setDraftState] = useState(value);
+  const draft = draftProp !== void 0 ? draftProp : draftState;
   const [pending, setPending] = useState(false);
+  const pendingVisible = useDelayedPending(pending) && pending;
   const [error, setError] = useState();
   const [status, setStatus] = useState("");
+  const [saved, setSaved] = useState(false);
+  const [accepted, setAccepted] = useState(null);
   const viewRef = useRef(null);
   const editorRef = useRef(null);
-  const focusNext = useRef(null);
+  const focusView = useRef(false);
+  const editingRef = useRef(isEditing);
+  editingRef.current = isEditing;
+  const inFlight = useRef(false);
+  const lastSent = useRef(null);
+  const session = useRef(0);
+  const pressInside = useRef(false);
   const mounted = useRef(true);
   useEffect(() => {
     mounted.current = true;
@@ -48,83 +74,143 @@ function InlineEdit({
       mounted.current = false;
     };
   }, []);
+  const lastValue = useRef(value);
+  useLayoutEffect(() => {
+    if (equals(lastValue.current, value)) return;
+    lastValue.current = value;
+    setAccepted(null);
+  });
+  const shown = accepted ? accepted.value : value;
   useEffect(() => {
-    const target = focusNext.current;
-    if (!target) return;
-    focusNext.current = null;
-    if (target === "view") {
-      viewRef.current?.focus();
+    if (pendingVisible && pending) setStatus(labels.saving);
+  }, [pendingVisible, pending]);
+  const state = pending ? "saving" : error?.failure ? "error" : isEditing ? "editing" : saved ? "saved" : "idle";
+  const onStateChangeRef = useRef(onStateChange);
+  onStateChangeRef.current = onStateChange;
+  const reported = useRef("idle");
+  useEffect(() => {
+    if (reported.current === state) return;
+    reported.current = state;
+    onStateChangeRef.current?.(state);
+  }, [state]);
+  const setEditing = (next) => {
+    editingRef.current = next;
+    if (editingProp === void 0) setEditingState(next);
+    onEditingChange?.(next);
+  };
+  const setDraft = (next) => {
+    if (draftProp === void 0) setDraftState(next);
+    onDraftChange?.(next);
+  };
+  useEffect(() => {
+    if (isEditing) {
+      const control = editorRef.current?.querySelector("input, textarea, select, button, [tabindex]");
+      control?.focus();
+      if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();
       return;
     }
-    const control = editorRef.current?.querySelector("input, textarea, select, button, [tabindex]");
-    control?.focus();
-    if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();
-  }, [editing]);
-  const start = () => {
-    setDraft(value);
+    if (focusView.current) {
+      focusView.current = false;
+      viewRef.current?.focus();
+    }
+  }, [isEditing]);
+  const wasEditing = useRef(isEditing);
+  useLayoutEffect(() => {
+    if (isEditing && !wasEditing.current && editingProp !== void 0) resetForOpen();
+    wasEditing.current = isEditing;
+  });
+  function resetForOpen() {
+    setDraft(shown);
     setError(void 0);
     setStatus("");
-    focusNext.current = "editor";
+    setSaved(false);
+    lastSent.current = null;
+  }
+  const start = () => {
+    session.current += 1;
+    resetForOpen();
     setEditing(true);
   };
-  const close = () => {
-    focusNext.current = "view";
+  const close = (returnFocus) => {
+    focusView.current = returnFocus;
+    inFlight.current = false;
     setEditing(false);
   };
   const cancel = () => {
-    if (pending) return;
+    if (inFlight.current) return;
     setError(void 0);
-    close();
+    setDraft(shown);
+    close(true);
   };
-  const save = () => {
-    if (pending) return;
-    const issue = validate?.(draft);
+  const failureMessage = (reason) => typeof reason === "string" && reason ? reason : reason instanceof Error && reason.message ? reason.message : labels.failed;
+  const send = (next, explicit) => {
+    if (!editingRef.current || inFlight.current) return;
+    if (!explicit && error?.failure && lastSent.current && equals(lastSent.current.value, next)) return;
+    const issue = validate?.(next);
     if (issue != null) {
-      setError(issue);
+      setError({ message: issue });
       return;
     }
-    if (draft === value) {
-      close();
+    if (equals(next, shown)) {
+      setError(void 0);
+      close(explicit);
       return;
     }
     setError(void 0);
+    lastSent.current = { value: next };
+    const mine = session.current;
     let result;
     try {
-      result = onSave(draft);
+      result = onSave(next);
     } catch (thrown) {
-      setError(thrown instanceof Error && thrown.message ? thrown.message : labels.failed);
+      setError({ message: failureMessage(thrown), failure: { reason: thrown } });
       return;
     }
-    if (!result || typeof result.then !== "function") {
+    const done = () => {
+      setAccepted({ value: next });
       setStatus(labels.saved);
-      close();
+      setSaved(true);
+      if (editingRef.current && session.current === mine) close(explicit);
+    };
+    if (!result || typeof result.then !== "function") {
+      done();
       return;
     }
+    inFlight.current = true;
     setPending(true);
-    setStatus(labels.saving);
     result.then(
       () => {
         if (!mounted.current) return;
+        inFlight.current = false;
         setPending(false);
-        setStatus(labels.saved);
-        close();
+        done();
       },
       (reason) => {
         if (!mounted.current) return;
+        inFlight.current = false;
         setPending(false);
+        if (session.current !== mine) return;
         setStatus("");
-        setError(typeof reason === "string" && reason ? reason : reason instanceof Error && reason.message ? reason.message : labels.failed);
-        focusNext.current = null;
+        setError({ message: failureMessage(reason), failure: { reason } });
         editorRef.current?.querySelector("input, textarea, select")?.focus();
       }
     );
   };
+  const save = (next) => send(next === void 0 ? draft : next, true);
+  const retry = () => send(lastSent.current && equals(lastSent.current.value, draft) ? lastSent.current.value : draft, true);
+  const change = (next) => {
+    if (inFlight.current) return;
+    setDraft(next);
+    if (error && !error.failure) setError(void 0);
+    if (commit === "change") send(next, true);
+  };
   const onEditorKeyDown = (event) => {
     if (event.key === "Escape") {
+      if (event.defaultPrevented || event.target.closest?.('[aria-expanded="true"]')) return;
       event.preventDefault();
       event.stopPropagation();
       cancel();
-    } else if (event.key === "Enter" && !event.defaultPrevented) {
+    } else if (event.key === "Enter" && !event.defaultPrevented && commit !== "change") {
       const inField = event.target.matches("input, textarea");
       if (!inField) return;
       const isTextarea = event.target.tagName === "TEXTAREA";
@@ -133,15 +219,56 @@ function InlineEdit({
       save();
     }
   };
+  const onEditorBlur = (event) => {
+    if (commit === "explicit") return;
+    const next = event.relatedTarget;
+    if (next && event.currentTarget.contains(next)) return;
+    if (pressInside.current) return;
+    if (next) {
+      send(draft, false);
+      return;
+    }
+    const draftNow = draft;
+    setTimeout(() => {
+      if (!editingRef.current || pressInside.current) return;
+      if (editorRef.current?.contains(document.activeElement)) return;
+      send(draftNow, false);
+    }, 0);
+  };
+  const onEditorPointerDown = () => {
+    pressInside.current = true;
+    const release = () => {
+      setTimeout(() => {
+        pressInside.current = false;
+      }, 0);
+      window.removeEventListener("pointerup", release, true);
+      window.removeEventListener("pointercancel", release, true);
+    };
+    window.addEventListener("pointerup", release, true);
+    window.addEventListener("pointercancel", release, true);
+  };
   const liveRegion = /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: status });
-  const shown = value === "" ? /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__placeholder", children: placeholder ?? labels.empty }) : renderView?.(value) ?? value;
-  if (disabled) {
-    return /* @__PURE__ */ jsx("span", { className: cx("uix-inline-edit", "uix-inline-edit--readonly", className), children: /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__value", children: shown }) });
+  const empty = isEmpty(shown);
+  const display = empty ? /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__placeholder", children: placeholder ?? labels.empty }) : renderView?.(shown) ?? String(shown);
+  if (disabled || readOnlyReason != null) {
+    return /* @__PURE__ */ jsxs("span", { className: cx("uix-inline-edit", "uix-inline-edit--readonly", readOnlyReason != null && "uix-inline-edit--reason", className), children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__value", "aria-describedby": readOnlyReason != null ? reasonId : void 0, children: display }),
+      readOnlyReason != null && /* @__PURE__ */ jsxs("span", { id: reasonId, className: "uix-inline-edit__reason", children: [
+        /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+          labels.readOnly,
+          " "
+        ] }),
+        readOnlyReason
+      ] })
+    ] });
   }
-  if (!editing) {
-    return /* @__PURE__ */ jsxs("span", { className: cx("uix-inline-edit", className), children: [
-      /* @__PURE__ */ jsxs("button", { ref: viewRef, type: "button", className: "uix-inline-edit__view", onClick: start, children: [
-        /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__value", children: shown }),
+  if (!isEditing) {
+    return /* @__PURE__ */ jsxs("span", { className: cx("uix-inline-edit", trigger === "icon" && "uix-inline-edit--icon-trigger", className), children: [
+      trigger === "icon" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__value", children: display }),
+        /* @__PURE__ */ jsx("button", { ref: viewRef, type: "button", className: "uix-inline-edit__trigger", "aria-label": fillLabel(labels.edit, { label }), onClick: start, children: /* @__PURE__ */ jsx(PencilIcon, { size: "sm" }) })
+      ] }) : /* @__PURE__ */ jsxs("button", { ref: viewRef, type: "button", className: "uix-inline-edit__view", onClick: start, children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__value", children: display }),
         /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
           ", ",
           fillLabel(labels.edit, { label })
@@ -156,17 +283,33 @@ function InlineEdit({
     "aria-label": label,
     "aria-describedby": error != null ? errorId : void 0,
     "aria-invalid": error != null ? true : void 0,
-    disabled: pending
+    disabled: pendingVisible,
+    readOnly: pendingVisible
   };
+  const textDraft = typeof draft === "string" ? draft : String(draft ?? "");
+  const errorBody = error && (error.failure && renderError ? renderError(error.failure.reason, { message: error.message, draft, retry, cancel }) : error.message);
   return /* @__PURE__ */ jsxs("span", { className: cx("uix-inline-edit", "uix-inline-edit--editing", className), children: [
-    /* @__PURE__ */ jsxs("div", { ref: editorRef, className: "uix-inline-edit__editor", role: "group", "aria-label": fillLabel(labels.edit, { label }), "aria-busy": pending || void 0, onKeyDown: onEditorKeyDown, children: [
-      /* @__PURE__ */ jsx("div", { className: "uix-inline-edit__control", children: renderEditor ? renderEditor({ value: draft, onChange: setDraft, save, cancel, field }) : multiline ? /* @__PURE__ */ jsx(Textarea, { ...field, rows: 3, value: draft, invalid: error != null, onChange: (event) => setDraft(event.currentTarget.value) }) : /* @__PURE__ */ jsx(Input, { ...field, size: "sm", value: draft, invalid: error != null, onChange: (event) => setDraft(event.currentTarget.value) }) }),
-      /* @__PURE__ */ jsxs("span", { className: "uix-inline-edit__actions", children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "primary", loading: pending, onClick: save, children: labels.save }),
-        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", disabled: pending, onClick: cancel, children: labels.cancel })
-      ] }),
-      error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error uix-inline-edit__error", role: "alert", children: error })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: editorRef,
+        className: "uix-inline-edit__editor",
+        role: "group",
+        "aria-label": fillLabel(labels.edit, { label }),
+        "aria-busy": pending || void 0,
+        onKeyDown: onEditorKeyDown,
+        onBlur: onEditorBlur,
+        onPointerDownCapture: onEditorPointerDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-inline-edit__control", children: renderEditor ? renderEditor({ value: draft, onChange: change, save, cancel, field }) : multiline ? /* @__PURE__ */ jsx(Textarea, { ...field, disabled: false, rows: 3, value: textDraft, invalid: error != null, onChange: (event) => change(event.currentTarget.value) }) : /* @__PURE__ */ jsx(Input, { ...field, disabled: false, size: "sm", value: textDraft, invalid: error != null, onChange: (event) => change(event.currentTarget.value) }) }),
+          /* @__PURE__ */ jsxs("span", { className: "uix-inline-edit__actions", children: [
+            commit !== "change" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "primary", loading: pending, onMouseDown: (event) => event.preventDefault(), onClick: () => save(), children: labels.save }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", disabled: pendingVisible, onMouseDown: (event) => event.preventDefault(), onClick: cancel, children: labels.cancel })
+          ] }),
+          errorBody != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error uix-inline-edit__error", role: "alert", children: errorBody })
+        ]
+      }
+    ),
     liveRegion
   ] });
 }

package/dist/components/Input.d.ts

@@ -2,7 +2,11 @@ import * as react from 'react';
 import { InputHTMLAttributes, ReactNode, AriaAttributes } from 'react';
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    size?: 'sm' | 'md';
+    /**
+     * `sm` 28 px, `md` 36 px (default), `lg` 44 px: the touch-target floor of a public page, the
+     * same height as `Button size="lg"` (HAR-1812).
+     */
+    size?: 'sm' | 'md' | 'lg';
     invalid?: boolean;
     valid?: boolean;
     /**
@@ -16,6 +20,12 @@ interface InputGroupProps {
     children: ReactNode;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
+    /**
+     * A control at the end of the field, inside its border: a reveal toggle, a clear or a copy
+     * button (HAR-1376). Give it the class `uix-input-group__action` (an icon button sized to the
+     * field) and an accessible name. It takes the place of `trailingIcon`.
+     */
+    trailingAction?: ReactNode;
     className?: string;
     /** Injected by `<Field>` when it wraps the group; forwarded onto the child control. */
     id?: string;
@@ -29,6 +39,6 @@ interface InputGroupProps {
  * single child element (the child's own props win) so label/message association survives
  * the extra div (UIX-A11Y-3).
  */
-declare function InputGroup({ children, leadingIcon, trailingIcon, className, id, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, }: InputGroupProps): react.JSX.Element;
+declare function InputGroup({ children, leadingIcon, trailingIcon, trailingAction, className, id, 'aria-describedby': describedBy, 'aria-invalid': invalid, 'aria-required': required, }: InputGroupProps): react.JSX.Element;
 
 export { Input, InputGroup, type InputGroupProps, type InputProps };

package/dist/components/Input.js

@@ -6,7 +6,7 @@ const Input = forwardRef(
     "input",
     {
       ref,
-      className: cx("uix-input", size === "sm" && "uix-input--sm", className),
+      className: cx("uix-input", size !== "md" && `uix-input--${size}`, className),
       "aria-invalid": invalid || void 0,
       "data-valid": valid || void 0,
       "data-warning": warning || void 0,
@@ -19,6 +19,7 @@ function InputGroup({
   children,
   leadingIcon,
   trailingIcon,
+  trailingAction,
   className,
   id,
   "aria-describedby": describedBy,
@@ -37,13 +38,14 @@ function InputGroup({
       className: cx(
         "uix-input-group",
         leadingIcon && "uix-input-group--has-leading",
-        trailingIcon && "uix-input-group--has-trailing",
+        (trailingIcon || trailingAction) && "uix-input-group--has-trailing",
+        trailingAction && "uix-input-group--has-action",
         className
       ),
       children: [
         leadingIcon && /* @__PURE__ */ jsx("span", { className: "uix-input-group__icon", "aria-hidden": "true", children: leadingIcon }),
         control,
-        trailingIcon && /* @__PURE__ */ jsx("span", { className: "uix-input-group__icon uix-input-group__icon--trailing", "aria-hidden": "true", children: trailingIcon })
+        trailingAction ?? (trailingIcon && /* @__PURE__ */ jsx("span", { className: "uix-input-group__icon uix-input-group__icon--trailing", "aria-hidden": "true", children: trailingIcon }))
       ]
     }
   );

package/dist/components/Kanban.d.ts

@@ -13,9 +13,11 @@ declare function Kanban({ announcement, children, className, ...props }: KanbanP
 interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     count?: number;
+    /** A dragged card would land in this column: the column body is tinted and outlined (HAR-2590). */
+    dropTarget?: boolean;
     children?: ReactNode;
 }
-declare function KanbanColumn({ title, count, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
+declare function KanbanColumn({ title, count, dropTarget, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
 type KanbanMoveDirection = 'up' | 'down' | 'left' | 'right';
 interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
@@ -26,8 +28,17 @@ interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
      * the board-level `announcement` so SR users hear the result.
      */
     onMove?: (dir: KanbanMoveDirection) => void;
+    /** The card is being dragged with the pointer: it lifts (HAR-2590). Call `settleDrop(card)` when it lands. */
+    dragging?: boolean;
     children?: ReactNode;
 }
-declare function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }: KanbanCardProps): react.JSX.Element;
+declare function KanbanCard({ title, meta, children, className, onMove, onKeyDown, dragging, ...props }: KanbanCardProps): react.JSX.Element;
+type KanbanDropLineProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Where a dragged card would land between two cards (HAR-2590): an accent line with an end mark.
+ * Render it in the column at the insertion point while a drag is over it (also after the last
+ * card); it is decorative (the keyboard path and the board's `announcement` say where it goes).
+ */
+declare function KanbanDropLine({ className, ...props }: KanbanDropLineProps): react.JSX.Element;
 
-export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanMoveDirection, type KanbanProps };
+export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, KanbanDropLine, type KanbanDropLineProps, type KanbanMoveDirection, type KanbanProps };