@tensor_1/react 2.46.0 → 2.48.0

package/dist/components/DateRangePicker.d.ts

@@ -24,6 +24,13 @@ interface DateRangePickerLabels {
     fieldStart: string;
     /** Field mode: the trigger's text for a range; `{start}`, `{end}`. */
     fieldRange: string;
+    /**
+     * The picker's name: the heading of the inline months, the field's hidden name and its popover's
+     * `aria-label` (HAR-2432). The `label` prop wins.
+     */
+    label: string;
+    /** Shown when the range is invalid (an end before the start, or `invalid`). The `invalidMessage` prop wins. */
+    invalidMessage: string;
 }
 declare const DEFAULT_DATE_RANGE_PICKER_LABELS: DateRangePickerLabels;
 interface DateRangePickerProps {
@@ -35,9 +42,12 @@ interface DateRangePickerProps {
     min?: string;
     max?: string;
     isDateDisabled?: (date: string) => boolean;
+    /** Default: `UixLabelsProvider` `dateFormat.locale`, then the viewer's. */
     locale?: string;
+    /** Default: `labels.label` ("Choose date range"). */
     label?: string;
     invalid?: boolean;
+    /** Default: `labels.invalidMessage`. */
     invalidMessage?: string;
     disabled?: boolean;
     className?: string;
@@ -57,7 +67,7 @@ interface DateRangePickerProps {
      * bars. It closes once the range has both ends; Escape closes it and returns focus.
      */
     mode?: 'inline' | 'field';
-    /** Field mode: how the trigger writes a date. Default: the locale's numeric date. */
+    /** Field mode: how the trigger writes a date. Default: `UixLabelsProvider` `dateFormat.formatDate`, then the locale's numeric date. */
     formatDate?: (date: string) => string;
     /** Field mode: lands on the trigger, so a `<label htmlFor>` or `<Field>` names it. */
     id?: string;
@@ -74,6 +84,6 @@ interface DateRangePickerProps {
  * Controlled date-range picker using the UIx calendar language: two months inline, or with
  * `mode="field"` a form control that opens them in a popover.
  */
-declare function DateRangePicker({ labels: labelOverrides, ...props }: DateRangePickerProps): react.JSX.Element;
+declare function DateRangePicker({ labels: labelOverrides, ...rest }: DateRangePickerProps): react.JSX.Element;
 
 export { DEFAULT_DATE_RANGE_PICKER_LABELS, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps };

package/dist/components/DateRangePicker.js

@@ -21,7 +21,9 @@ const DEFAULT_DATE_RANGE_PICKER_LABELS = {
   inRange: "in selected range",
   placeholder: "Choose dates",
   fieldStart: "{start} \u2013",
-  fieldRange: "{start} \u2013 {end}"
+  fieldRange: "{start} \u2013 {end}",
+  label: "Choose date range",
+  invalidMessage: "The selected date range is invalid."
 };
 const monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
 const dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
@@ -35,9 +37,9 @@ function RangeCalendar({
   max,
   isDateDisabled,
   locale,
-  label = "Choose date range",
+  label: labelProp,
   invalid,
-  invalidMessage = "The selected date range is invalid.",
+  invalidMessage: invalidMessageProp,
   disabled,
   className,
   words: labels,
@@ -46,6 +48,8 @@ function RangeCalendar({
   autoFocus = false
 }) {
   const id = useId();
+  const label = labelProp ?? labels.label;
+  const invalidMessage = invalidMessageProp ?? labels.invalidMessage;
   const weekdays = useMemo(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
   const [internalMonth, setInternalMonth] = useState(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
   const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
@@ -145,9 +149,10 @@ function RangeCalendar({
     rangeInvalid && /* @__PURE__ */ jsx("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
   ] });
 }
-function DateRangePicker({ labels: labelOverrides, ...props }) {
+function DateRangePicker({ labels: labelOverrides, ...rest }) {
   const uixLabels = useUixLabels();
   const words = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...uixLabels.dateRangePicker, ...labelOverrides };
+  const props = { ...rest, locale: rest.locale ?? uixLabels.dateFormat?.locale, formatDate: rest.formatDate ?? uixLabels.dateFormat?.formatDate };
   if (props.mode === "field") return /* @__PURE__ */ jsx(DateRangeField, { ...props, words });
   return /* @__PURE__ */ jsx(RangeCalendar, { ...props, words });
 }
@@ -156,7 +161,7 @@ function DateRangeField(props) {
     value,
     onChange,
     locale,
-    label = "Choose date range",
+    label: labelProp,
     invalid,
     disabled,
     className,
@@ -170,12 +175,13 @@ function DateRangeField(props) {
     "aria-invalid": ariaInvalid
   } = props;
   const uid = useId();
+  const label = labelProp ?? words.label;
   const id = idProp ?? `${uid}-trigger`;
   const popoverId = `${uid}-months`;
   const valueId = `${uid}-value`;
   const anchorRef = useRef(null);
   const triggerRef = useRef(null);
-  const { open, hide, triggerProps } = useFieldPopover(popoverId, () => triggerRef.current?.focus({ preventScroll: true }), onOpenChange);
+  const { open, hide, onFieldKeyDown, triggerProps } = useFieldPopover(popoverId, () => triggerRef.current?.focus({ preventScroll: true }), onOpenChange);
   const [labelled, setLabelled] = useState(false);
   useEffect(() => {
     setLabelled((triggerRef.current?.labels?.length ?? 0) > 0);
@@ -189,12 +195,7 @@ function DateRangeField(props) {
     {
       ref: anchorRef,
       className: cx("uix-date-range-field", className),
-      onKeyDown: (event) => {
-        if (event.key !== "Escape" || !open) return;
-        event.stopPropagation();
-        event.preventDefault();
-        hide();
-      },
+      onKeyDown: onFieldKeyDown,
       children: [
         /* @__PURE__ */ jsxs(
           "button",

package/dist/components/DelayedRender.d.ts

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Renders `children` only once they have been mounted for `delay` ms (HAR-2580). The client
+ * half of `Spinner delay` and `LoadingState delay`, so those stay server-renderable: a
+ * loader whose work ends inside the delay never appears. Inserting the loader after the
+ * delay is what announces it, as it always has.
+ */
+declare function DelayedRender({ delay, children }: {
+    delay: number;
+    children?: ReactNode;
+}): react.JSX.Element | null;
+
+export { DelayedRender };

package/dist/components/DelayedRender.js

@@ -0,0 +1,10 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useDelayedPending } from "../hooks/useDelayedPending.js";
+function DelayedRender({ delay, children }) {
+  const shown = useDelayedPending(true, { delay, minVisible: 0 });
+  return shown ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+export {
+  DelayedRender
+};

package/dist/components/DetailPage.d.ts

@@ -45,8 +45,14 @@ interface DetailPageProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
      * modified click, no JS).
      */
     onTabSelect?: (id: string) => void;
+    /**
+     * `staff` is the staff type preset (HAR-1815): the title at h2 with its 1.15 leading, the back
+     * link an inline hushed link without an underline, and each metric's label an eyebrow over an
+     * h3-size, regular-weight, tabular value. `default` is the plain record page.
+     */
+    variant?: 'default' | 'staff';
 }
 /** Framework-neutral record-detail scaffold; routing and data policy stay with the application. */
-declare function DetailPage({ back, eyebrow, title, subtitle, actions, tabs, metrics, side, children, tabsLabel, renderLink, onTabSelect, className, ...props }: DetailPageProps): react.JSX.Element;
+declare function DetailPage({ back, eyebrow, title, subtitle, actions, tabs, metrics, side, children, tabsLabel, renderLink, onTabSelect, variant, className, ...props }: DetailPageProps): react.JSX.Element;
 
 export { DetailPage, type DetailPageLinkProps, type DetailPageMetric, type DetailPageProps, type DetailPageTab };

package/dist/components/DetailPage.js

@@ -18,10 +18,11 @@ function DetailPage({
   tabsLabel,
   renderLink = plainLink,
   onTabSelect,
+  variant = "default",
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("section", { className: cx("uix-detail-page", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("section", { className: cx("uix-detail-page", variant === "staff" && "uix-detail-page--staff", className), ...props, children: [
     back && renderLink({ href: back.href, className: "uix-link uix-link--quiet uix-detail-page__back", children: back.label }),
     /* @__PURE__ */ jsx(PageHeader, { eyebrow, title, subtitle, actions }),
     metrics && metrics.length > 0 && /* @__PURE__ */ jsx("dl", { className: "uix-detail-page__metrics", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { children: [

package/dist/components/Dialogs.d.ts

@@ -1,7 +1,15 @@
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ButtonHTMLAttributes, ReactNode, RefObject } from 'react';
 import { Placement } from '../overlay-position.js';
 
+/**
+ * Attributes for a dialog's confirm button (HAR-1831): `data-*` (TENSOR puts `data-action-id`
+ * there), `id`, `className`, an `aria-describedby`. Its `onClick` runs first; `preventDefault()`
+ * there stops the confirm. `disabled` adds to the dialog's own reasons to disable it.
+ */
+type ConfirmButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> & {
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+};
 interface ConfirmDialogProps {
     open: boolean;
     title: ReactNode;
@@ -12,6 +20,11 @@ interface ConfirmDialogProps {
     closeLabel?: string;
     onConfirm: () => void | Promise<void>;
     onCancel: () => void;
+    /**
+     * The confirmed action is running: Confirm shows its loading state, Cancel is disabled, and
+     * Escape, the × and a press on Cancel do nothing until it settles (HAR-1831), so the person
+     * cannot walk away from an action that is still being carried out.
+     */
     pending?: boolean;
     destructive?: boolean;
     /**
@@ -34,21 +47,47 @@ interface ConfirmDialogProps {
      * this text, e.g. the record's name.
      */
     typeToConfirm?: string;
-    /** Label of the type-to-confirm field. `{value}` is replaced by `typeToConfirm`. */
-    typeToConfirmLabel?: string;
+    /**
+     * Label of the type-to-confirm field. In a string, `{value}` is replaced by `typeToConfirm`;
+     * pass a node for markup, e.g. the value in `<code>` (HAR-1831).
+     */
+    typeToConfirmLabel?: ReactNode;
+    /** Placeholder of the type-to-confirm field, e.g. the value itself (HAR-1831). */
+    typeToConfirmPlaceholder?: string;
+    /**
+     * Shown under the field (and its description) once the typed text stops matching; `{value}` is
+     * replaced by `typeToConfirm` (HAR-1831). Default: `UixLabelsProvider` `confirmDialog`, then
+     * "That does not match {value}."
+     */
+    typeToConfirmMismatch?: string;
     /** How the action is undone or compensated, shown as its own labelled block (TENSOR C2). */
     compensation?: ReactNode;
     /** Heading of the compensation block. Default "How to undo this". */
     compensationLabel?: string;
+    /** Attributes for the confirm button, e.g. `{ 'data-action-id': 'ci.delete' }` (HAR-1831). */
+    confirmProps?: ConfirmButtonProps;
 }
-/** Generic confirmation shell. Audit, authorization and compensation policy remain application-owned. */
-declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive, children, error, initialFocus, tertiaryLabel, onTertiary, typeToConfirm, typeToConfirmLabel: typeToConfirmLabelProp, compensation, compensationLabel: compensationLabelProp, }: ConfirmDialogProps): react.JSX.Element;
+/**
+ * Generic confirmation shell. Audit, authorization and compensation policy remain application-owned.
+ * The ref reaches the `<dialog>` (HAR-1831).
+ */
+declare const ConfirmDialog: react.ForwardRefExoticComponent<ConfirmDialogProps & react.RefAttributes<HTMLDialogElement>>;
 interface PopconfirmProps {
     open: boolean;
     /** The control that asked for confirmation; the step is placed against it and focus returns to it. */
     anchor: RefObject<HTMLElement | null> | HTMLElement | null;
-    title: ReactNode;
+    /**
+     * The question. Optional (HAR-1831): without it the step is named by its confirm button
+     * ("Delete"), which then has to say what it does.
+     */
+    title?: ReactNode;
     description?: ReactNode;
+    /**
+     * Content between the text and the buttons, e.g. a required reason field (HAR-1831). When it
+     * holds a field, that field has focus when the step opens, and the step takes its full width.
+     * Pair a required field with `confirmDisabled` until it is filled.
+     */
+    children?: ReactNode;
     confirmLabel: ReactNode;
     cancelLabel: ReactNode;
     onConfirm: () => void | Promise<void>;
@@ -56,17 +95,39 @@ interface PopconfirmProps {
     onCancel: () => void;
     pending?: boolean;
     destructive?: boolean;
+    /** Confirm cannot be pressed yet, e.g. while a required reason is empty (HAR-1831). */
+    confirmDisabled?: boolean;
+    /** Attributes for the confirm button, as on `ConfirmDialog` (HAR-1831). */
+    confirmProps?: ConfirmButtonProps;
     /** How the action is undone, under its own heading (TENSOR C2 "single_click" tier). */
     compensation?: ReactNode;
     compensationLabel?: string;
     placement?: Placement;
+    /** Default: `'alertdialog'` when `destructive`, else `'dialog'` (HAR-1831). */
+    role?: 'dialog' | 'alertdialog';
+    /**
+     * What names the step: its `title` (default when there is one) or its confirm button
+     * (default without a title) (HAR-1831).
+     */
+    labelledBy?: 'title' | 'confirm';
+    /**
+     * Called with the Escape keydown before the step cancels; `event.preventDefault()` keeps it open
+     * (HAR-1831). The step only takes an Escape that is its own: not while a popup inside it is open
+     * (a Select's list), not one meant for a dialog opened above it, and only the newest open step.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Cancel when the anchor has scrolled out of view (outside the viewport or a clipping ancestor),
+     * rather than leave the step floating over unrelated content (HAR-1831). Default `false`.
+     */
+    closeWhenAnchorHidden?: boolean;
 }
 /**
  * An anchored, single-step confirmation for low-risk actions (HAR-1356; TENSOR C2): a small
- * `role="dialog"` on the kit `Popover`, focus on Cancel, Escape or a press outside cancels,
- * and focus returns to the anchor. Use `ConfirmDialog` when the action is hard to undo.
+ * dialog on the kit `Popover`, focus on Cancel (or on a field in its content), Escape or a press
+ * outside cancels, and focus returns to the anchor. Use `ConfirmDialog` when the action is hard to undo.
  */
-declare function Popconfirm({ open, anchor, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, pending, destructive, compensation, compensationLabel: compensationLabelProp, placement, }: PopconfirmProps): react.JSX.Element;
+declare function Popconfirm({ open, anchor, title, description, children, confirmLabel, cancelLabel, onConfirm, onCancel, pending, destructive, confirmDisabled, confirmProps, compensation, compensationLabel: compensationLabelProp, placement, role, labelledBy, onEscapeKeyDown, closeWhenAnchorHidden, }: PopconfirmProps): react.JSX.Element;
 interface PromptDialogProps {
     open: boolean;
     title: ReactNode;
@@ -104,4 +165,4 @@ interface PromptDialogProps {
 }
 declare function PromptDialog({ open, title, description, inputLabel, defaultValue, placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending, multiline, destructive, error: submitError, role, }: PromptDialogProps): react.JSX.Element;
 
-export { ConfirmDialog, type ConfirmDialogProps, Popconfirm, type PopconfirmProps, PromptDialog, type PromptDialogProps };
+export { type ConfirmButtonProps, ConfirmDialog, type ConfirmDialogProps, Popconfirm, type PopconfirmProps, PromptDialog, type PromptDialogProps };

package/dist/components/Dialogs.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
 import { Modal } from "./Modal.js";
@@ -8,8 +9,21 @@ import { Textarea } from "./Textarea.js";
 import { Popover } from "./Popover.js";
 import { fillLabel } from "../fill-label.js";
 import { resolveAnchor } from "../hooks/useAnchoredPosition.js";
+import { isTopLayer, pushLayer } from "../overlay-stack.js";
 import { useUixLabels } from "../labels-context.js";
-function ConfirmDialog({
+const confirmButtonProps = (extra, own) => {
+  const { onClick, disabled, className, ...rest } = extra ?? {};
+  return {
+    ...rest,
+    className,
+    disabled: own.disabled || !!disabled,
+    onClick: (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) own.onConfirm();
+    }
+  };
+};
+const ConfirmDialog = forwardRef(function ConfirmDialog2({
   open,
   title,
   description,
@@ -18,7 +32,7 @@ function ConfirmDialog({
   closeLabel,
   onConfirm,
   onCancel,
-  pending,
+  pending = false,
   destructive,
   children,
   error,
@@ -27,20 +41,26 @@ function ConfirmDialog({
   onTertiary,
   typeToConfirm,
   typeToConfirmLabel: typeToConfirmLabelProp,
+  typeToConfirmPlaceholder,
+  typeToConfirmMismatch: mismatchProp,
   compensation,
-  compensationLabel: compensationLabelProp
-}) {
+  compensationLabel: compensationLabelProp,
+  confirmProps
+}, ref) {
   const uixLabels = useUixLabels();
   const typeToConfirmLabel = typeToConfirmLabelProp ?? uixLabels.confirmDialog?.typeToConfirm ?? "Type {value} to confirm";
   const compensationLabel = compensationLabelProp ?? uixLabels.confirmDialog?.compensation ?? "How to undo this";
+  const mismatch = mismatchProp ?? uixLabels.confirmDialog?.typeToConfirmMismatch ?? "That does not match {value}.";
   const id = useId();
   const bodyId = `${id}-body`;
   const typedId = `${id}-typed`;
+  const typedMsgId = `${id}-typed-msg`;
   const cancelRef = useRef(null);
   const confirmRef = useRef(null);
   const typedRef = useRef(null);
   const [typed, setTyped] = useState("");
   const typedMatches = typeToConfirm == null || typed === typeToConfirm;
+  const typedWrong = typeToConfirm != null && typed !== "" && !typeToConfirm.startsWith(typed);
   const hasBody = description != null || children != null || compensation != null;
   useEffect(() => {
     if (open) setTyped("");
@@ -51,11 +71,19 @@ function ConfirmDialog({
     const target = typeToConfirm != null ? typedRef.current : focus === "cancel" ? cancelRef.current : focus === "confirm" ? confirmRef.current : null;
     target?.focus();
   }, [open, initialFocus, destructive, typeToConfirm]);
+  const confirm = confirmButtonProps(confirmProps, {
+    disabled: !typedMatches,
+    onConfirm: () => {
+      if (typedMatches && !pending) void onConfirm();
+    }
+  });
   return /* @__PURE__ */ jsx(
     Modal,
     {
+      ref,
       open,
       onClose: onCancel,
+      pending,
       title,
       closeLabel,
       role: "alertdialog",
@@ -63,9 +91,7 @@ function ConfirmDialog({
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
         tertiaryLabel != null && onTertiary && /* @__PURE__ */ jsx(Button, { type: "button", className: "uix-confirm__tertiary", onClick: () => void onTertiary(), disabled: pending, children: tertiaryLabel }),
         /* @__PURE__ */ jsx(Button, { ref: cancelRef, type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
-        /* @__PURE__ */ jsx(Button, { ref: confirmRef, type: "button", variant: destructive ? "danger" : "primary", onClick: () => {
-          if (typedMatches) void onConfirm();
-        }, loading: pending, disabled: !typedMatches, children: confirmLabel })
+        /* @__PURE__ */ jsx(Button, { ref: confirmRef, type: "button", variant: destructive ? "danger" : "primary", loading: pending, ...confirm, children: confirmLabel })
       ] }),
       children: /* @__PURE__ */ jsxs("div", { className: "uix-confirm", children: [
         hasBody && /* @__PURE__ */ jsxs("div", { id: bodyId, className: "uix-confirm__body", children: [
@@ -77,40 +103,80 @@ function ConfirmDialog({
           ] })
         ] }),
         typeToConfirm != null && /* @__PURE__ */ jsxs("div", { className: "uix-field", children: [
-          /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: typedId, children: fillLabel(typeToConfirmLabel, { value: typeToConfirm }) }),
-          /* @__PURE__ */ jsx(Input, { ref: typedRef, id: typedId, value: typed, autoComplete: "off", spellCheck: false, onChange: (event) => setTyped(event.currentTarget.value) })
+          /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: typedId, children: typeof typeToConfirmLabel === "string" ? fillLabel(typeToConfirmLabel, { value: typeToConfirm }) : typeToConfirmLabel }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: typedRef,
+              id: typedId,
+              value: typed,
+              autoComplete: "off",
+              spellCheck: false,
+              autoCapitalize: "none",
+              autoCorrect: "off",
+              placeholder: typeToConfirmPlaceholder,
+              invalid: typedWrong,
+              disabled: pending,
+              "aria-describedby": typedWrong ? typedMsgId : void 0,
+              onChange: (event) => setTyped(event.currentTarget.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "uix-field__msg uix-confirm__typed-msg", children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-field__error", "aria-hidden": "true", children: fillLabel(mismatch, { value: typeToConfirm }) }),
+            typedWrong && /* @__PURE__ */ jsx("span", { id: typedMsgId, className: "uix-field__error", role: "alert", children: fillLabel(mismatch, { value: typeToConfirm }) })
+          ] })
         ] }),
         error != null && /* @__PURE__ */ jsx("div", { className: "uix-confirm__error", role: "alert", children: error })
       ] })
     }
   );
-}
+});
+ConfirmDialog.displayName = "ConfirmDialog";
+const FIELD = 'input:not([type="hidden"]):not(:disabled), textarea:not(:disabled), select:not(:disabled), [contenteditable="true"]';
+const isOwnEscape = (event, token) => event.key === "Escape" && !event.defaultPrevented && !event.isComposing && event.keyCode !== 229 && isTopLayer(token);
 function Popconfirm({
   open,
   anchor,
   title,
   description,
+  children,
   confirmLabel,
   cancelLabel,
   onConfirm,
   onCancel,
   pending,
   destructive,
+  confirmDisabled = false,
+  confirmProps,
   compensation,
   compensationLabel: compensationLabelProp,
-  placement = "bottom-start"
+  placement = "bottom-start",
+  role,
+  labelledBy,
+  onEscapeKeyDown,
+  closeWhenAnchorHidden = false
 }) {
   const uixLabels = useUixLabels();
   const compensationLabel = compensationLabelProp ?? uixLabels.confirmDialog?.compensation ?? "How to undo this";
   const id = useId();
   const panelId = `${id}-popconfirm`;
+  const confirmId = confirmProps?.id ?? `${id}-confirm`;
   const cancelRef = useRef(null);
-  const onCancelRef = useRef(onCancel);
-  onCancelRef.current = onCancel;
+  const contentRef = useRef(null);
+  const latest = useRef({ onCancel, onEscapeKeyDown });
+  latest.current = { onCancel, onEscapeKeyDown };
+  const layer = useRef(null);
+  const [holdsInput, setHoldsInput] = useState(false);
+  const readContent = () => {
+    const fields = Array.from(contentRef.current?.querySelectorAll('input:not([type="hidden"]), textarea') ?? []);
+    setHoldsInput(fields.some((field) => field.value.trim() !== ""));
+  };
   const hasBody = description != null || compensation != null;
+  const hasTitle = title != null;
+  const nameBy = labelledBy ?? (hasTitle ? "title" : "confirm");
   useEffect(() => {
     const panel = document.getElementById(panelId);
-    if (!panel) return;
+    if (!panel) return void 0;
     const shown = () => {
       try {
         return panel.matches(":popover-open");
@@ -127,7 +193,7 @@ function Popconfirm({
         }
         if (focusInside) resolveAnchor(anchor)?.focus();
       }
-      return;
+      return void 0;
     }
     if (!shown()) {
       try {
@@ -135,25 +201,45 @@ function Popconfirm({
       } catch {
       }
     }
-    cancelRef.current?.focus();
-    const onKey = (event) => {
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      event.stopPropagation();
-      onCancelRef.current();
+    (contentRef.current?.querySelector(FIELD) ?? cancelRef.current)?.focus();
+    const token = {};
+    layer.current = token;
+    const pop = pushLayer(token);
+    const onDocumentKey = (event) => {
+      if (panel.contains(event.target) || !isOwnEscape(event, token)) return;
+      if (panel.querySelector('[aria-expanded="true"][aria-haspopup]')) return;
+      const dialog = event.target?.closest?.("dialog");
+      if (dialog && !dialog.contains(panel)) return;
+      cancelOnEscape(event);
     };
     const onPointer = (event) => {
       const target = event.target;
       if (panel.contains(target) || resolveAnchor(anchor)?.contains(target)) return;
-      onCancelRef.current();
+      if (!isTopLayer(token)) return;
+      latest.current.onCancel();
     };
-    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("keydown", onDocumentKey, true);
     document.addEventListener("pointerdown", onPointer, true);
     return () => {
-      document.removeEventListener("keydown", onKey, true);
+      pop();
+      layer.current = null;
+      document.removeEventListener("keydown", onDocumentKey, true);
       document.removeEventListener("pointerdown", onPointer, true);
     };
   }, [open, anchor, panelId]);
+  const cancelOnEscape = (event) => {
+    latest.current.onEscapeKeyDown?.(event);
+    event.stopPropagation();
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    latest.current.onCancel();
+  };
+  const confirm = confirmButtonProps(confirmProps, {
+    disabled: confirmDisabled,
+    onConfirm: () => {
+      if (!pending) void onConfirm();
+    }
+  });
   return /* @__PURE__ */ jsxs(
     Popover,
     {
@@ -161,12 +247,25 @@ function Popconfirm({
       popover: "manual",
       anchor,
       placement,
-      role: "dialog",
-      "aria-labelledby": `${id}-title`,
+      role: role ?? (destructive ? "alertdialog" : "dialog"),
+      "aria-labelledby": nameBy === "title" && hasTitle ? `${id}-title` : confirmId,
       "aria-describedby": hasBody ? `${id}-body` : void 0,
-      className: "uix-popconfirm",
+      className: cx("uix-popconfirm", children != null && "uix-popconfirm--content"),
+      closeWhenAnchorHidden: closeWhenAnchorHidden && !holdsInput,
+      onAnchorHidden: closeWhenAnchorHidden ? () => {
+        const panel = document.getElementById(panelId);
+        if (panel?.contains(document.activeElement)) resolveAnchor(anchor)?.focus({ preventScroll: true });
+        latest.current.onCancel();
+      } : void 0,
+      onKeyDown: (event) => {
+        const token = layer.current;
+        if (!token || !isOwnEscape(event.nativeEvent, token)) return;
+        cancelOnEscape(event.nativeEvent);
+        event.stopPropagation();
+      },
+      onInput: readContent,
       children: [
-        /* @__PURE__ */ jsx("div", { id: `${id}-title`, className: "uix-popconfirm__title", children: title }),
+        hasTitle && /* @__PURE__ */ jsx("div", { id: `${id}-title`, className: "uix-popconfirm__title", children: title }),
         hasBody && /* @__PURE__ */ jsxs("div", { id: `${id}-body`, className: "uix-popconfirm__body", children: [
           description != null && /* @__PURE__ */ jsx("div", { children: description }),
           compensation != null && /* @__PURE__ */ jsxs("div", { className: "uix-confirm__compensation", children: [
@@ -174,9 +273,10 @@ function Popconfirm({
             /* @__PURE__ */ jsx("div", { children: compensation })
           ] })
         ] }),
+        children != null && /* @__PURE__ */ jsx("div", { ref: contentRef, className: "uix-popconfirm__content", children }),
         /* @__PURE__ */ jsxs("div", { className: "uix-popconfirm__actions", children: [
           /* @__PURE__ */ jsx(Button, { ref: cancelRef, type: "button", size: "sm", onClick: onCancel, disabled: pending, children: cancelLabel }),
-          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: destructive ? "danger" : "primary", onClick: () => void onConfirm(), loading: pending, children: confirmLabel })
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: destructive ? "danger" : "primary", loading: pending, ...confirm, id: confirmId, children: confirmLabel })
         ] })
       ]
     }

package/dist/components/DiffViewer.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { JsonValue } from '../json-value.js';
 import { DiffEntry, DiffResolution } from '../diff-model.js';
 
@@ -56,8 +57,27 @@ interface DiffViewerProps {
      */
     controlSize?: 'sm' | 'md' | 'lg';
     className?: string;
+    /**
+     * The name of an entry for people (HAR-1369): "First author" for `$.authors[0].name`. Shown
+     * instead of the path; a string also names the entry's regions and buttons (anything else
+     * leaves the path there). Default: the path.
+     */
+    labelFor?: (path: string) => ReactNode;
+    /**
+     * How a value shows: a name, a date, a chip, instead of `JSON.stringify`. `undefined` is a
+     * value that is not there in that version. Default: the JSON, or `labels.notPresent`.
+     */
+    renderValue?: (value: JsonValue | undefined, path: string, side: DiffSide) => ReactNode;
+    /** Where a version's value came from, shown under it ("Edited by Ana, 12 Oct"). Nothing for none. */
+    provenance?: (path: string, side: DiffSide) => ReactNode;
 }
-/** Three-way configuration diff with per-entry keyboard-operable resolution. */
-declare function DiffViewer({ base, current, incoming, entries: providedEntries, resolutions: controlledResolutions, onResolutionChange, labels: labelOverrides, controlSize, className, }: DiffViewerProps): react.JSX.Element;
+/** One of the three versions a `DiffViewer` entry compares. */
+type DiffSide = 'base' | 'current' | 'incoming';
+/**
+ * Three-way configuration diff with per-entry keyboard-operable resolution. For people who do
+ * not read JSON paths (HAR-1369, MOTUS B-A9): `labelFor` names an entry, `renderValue` shows a
+ * value as a name, a date or a chip, and `provenance` says where each version came from.
+ */
+declare function DiffViewer({ base, current, incoming, entries: providedEntries, resolutions: controlledResolutions, onResolutionChange, labels: labelOverrides, controlSize, className, labelFor, renderValue, provenance, }: DiffViewerProps): react.JSX.Element;
 
-export { DEFAULT_DIFF_VIEWER_LABELS, DiffViewer, type DiffViewerLabels, type DiffViewerProps };
+export { DEFAULT_DIFF_VIEWER_LABELS, type DiffSide, DiffViewer, type DiffViewerLabels, type DiffViewerProps };