@tensor_1/react 2.34.0 → 2.36.0

package/dist/components/DateRangePicker.d.ts

@@ -1,5 +1,7 @@
 import * as react from 'react';
-import { DateRangeValue } from '../calendar-model.js';
+import { AriaAttributes } from 'react';
+import { DateRangeValue, CalendarWeekday } from '../calendar-model.js';
+import { Placement } from '../overlay-position.js';
 
 /**
  * Every word the picker renders or announces (TENSOR RX-125, UIX-13). `{start}` and
@@ -16,6 +18,12 @@ interface DateRangePickerLabels {
     rangeStart: string;
     rangeEnd: string;
     inRange: string;
+    /** Field mode: what the trigger shows while no range is set. */
+    placeholder: string;
+    /** Field mode: the trigger's text for a start without an end; `{start}`. */
+    fieldStart: string;
+    /** Field mode: the trigger's text for a range; `{start}`, `{end}`. */
+    fieldRange: string;
 }
 declare const DEFAULT_DATE_RANGE_PICKER_LABELS: DateRangePickerLabels;
 interface DateRangePickerProps {
@@ -41,8 +49,31 @@ interface DateRangePickerProps {
      * clock and zone may differ from the viewer's), or `null` for no today marker.
      */
     today?: string | null;
+    /** First column of each month, in `Date.getUTCDay()` numbering (0 = Sunday). Default 1, Monday. */
+    weekStartsOn?: CalendarWeekday;
+    /**
+     * `'inline'` (default) draws the months in the page. `'field'` draws a form control that
+     * shows the range and opens the same months in a popover (HAR-1383): for forms and filter
+     * 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. */
+    formatDate?: (date: string) => string;
+    /** Field mode: lands on the trigger, so a `<label htmlFor>` or `<Field>` names it. */
+    id?: string;
+    /** Field mode. */
+    size?: 'sm' | 'md';
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    /** Field mode: where the popover opens. Default `'bottom-start'`. */
+    placement?: Placement;
+    /** Field mode. */
+    onOpenChange?: (open: boolean) => void;
 }
-/** Controlled, two-month range picker using the UIx calendar language. */
-declare function DateRangePicker({ value, onChange, visibleMonth: controlledMonth, onVisibleMonthChange, months, min, max, isDateDisabled, locale, label, invalid, invalidMessage, disabled, className, labels: labelOverrides, today, }: DateRangePickerProps): react.JSX.Element;
+/**
+ * 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;
 
 export { DEFAULT_DATE_RANGE_PICKER_LABELS, DateRangePicker, type DateRangePickerLabels, type DateRangePickerProps };

package/dist/components/DateRangePicker.js

@@ -3,7 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth } from "../calendar-model.js";
 import { cx } from "../cx.js";
+import { formatDateKey } from "../date-field-model.js";
+import { CalendarIcon } from "../icons/components.js";
 import { useUixLabels } from "../labels-context.js";
+import { localDateKey, useFieldPopover, weekdayNames } from "./DateFieldParts.js";
+import { Popover } from "./Popover.js";
 const DEFAULT_DATE_RANGE_PICKER_LABELS = {
   previous: "Previous",
   previousMonth: "Show previous month",
@@ -14,16 +18,14 @@ const DEFAULT_DATE_RANGE_PICKER_LABELS = {
   rangeSelected: "{start} to {end} selected.",
   rangeStart: "start of selected range",
   rangeEnd: "end of selected range",
-  inRange: "in selected range"
+  inRange: "in selected range",
+  placeholder: "Choose dates",
+  fieldStart: "{start} \u2013",
+  fieldRange: "{start} \u2013 {end}"
 };
-const localDateKey = (now = /* @__PURE__ */ new Date()) => `${now.getFullYear().toString().padStart(4, "0")}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")}`;
 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`));
-const weekdayNames = (locale) => {
-  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
-  return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(Date.UTC(2024, 0, 1 + i))));
-};
-function DateRangePicker({
+function RangeCalendar({
   value,
   onChange,
   visibleMonth: controlledMonth,
@@ -38,18 +40,18 @@ function DateRangePicker({
   invalidMessage = "The selected date range is invalid.",
   disabled,
   className,
-  labels: labelOverrides,
-  today
+  words: labels,
+  today,
+  weekStartsOn = 1,
+  autoFocus = false
 }) {
   const id = useId();
-  const uixLabels = useUixLabels();
-  const labels = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...uixLabels.dateRangePicker, ...labelOverrides };
-  const weekdays = useMemo(() => weekdayNames(locale), [locale]);
+  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);
   const [activeDate, setActiveDate] = useState(value.end ?? value.start ?? visibleMonth);
   const rootRef = useRef(null);
-  const pendingFocus = useRef(false);
+  const pendingFocus = useRef(autoFocus);
   const count = Math.max(1, Math.min(3, months));
   const calendars = useMemo(() => Array.from({ length: count }, (_, index) => {
     const month = startOfMonth(addCalendarMonths(visibleMonth, index));
@@ -65,7 +67,7 @@ function DateRangePicker({
   }, [activeDate, calendars]);
   useEffect(() => {
     if (!pendingFocus.current) return;
-    rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus();
+    rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus({ preventScroll: autoFocus });
     pendingFocus.current = false;
   }, [activeDate, visibleMonth]);
   const setMonth = (month) => {
@@ -93,8 +95,8 @@ function DateRangePicker({
     if (event.key === "Home" || event.key === "End") {
       event.preventDefault();
       const weekday = (/* @__PURE__ */ new Date(`${date}T00:00:00Z`)).getUTCDay();
-      const mondayIndex = (weekday + 6) % 7;
-      focusDate(addCalendarDays(date, event.key === "Home" ? -mondayIndex : 6 - mondayIndex));
+      const index = (weekday - weekStartsOn + 7) % 7;
+      focusDate(addCalendarDays(date, event.key === "Home" ? -index : 6 - index));
     } else if (event.key === "PageUp" || event.key === "PageDown") {
       event.preventDefault();
       focusDate(addCalendarMonths(date, event.key === "PageUp" ? -1 : 1));
@@ -113,7 +115,7 @@ function DateRangePicker({
       /* @__PURE__ */ jsx("h4", { children: monthLabel(month, locale) }),
       /* @__PURE__ */ jsx("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: weekdays.map((day, index) => /* @__PURE__ */ jsx("span", { children: day }, index)) }),
       /* @__PURE__ */ jsxs("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
-        Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }, `blank-${index}`)),
+        Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() - weekStartsOn + 7) % 7 }, (_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }, `blank-${index}`)),
         days.map((day) => {
           const unavailable = disabled || isDateUnavailable(day.date, { min, max, isDisabled: isDateDisabled });
           const edge = day.date === value.start ? "start" : day.date === value.end ? "end" : void 0;
@@ -143,6 +145,107 @@ function DateRangePicker({
     rangeInvalid && /* @__PURE__ */ jsx("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
   ] });
 }
+function DateRangePicker({ labels: labelOverrides, ...props }) {
+  const uixLabels = useUixLabels();
+  const words = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...uixLabels.dateRangePicker, ...labelOverrides };
+  if (props.mode === "field") return /* @__PURE__ */ jsx(DateRangeField, { ...props, words });
+  return /* @__PURE__ */ jsx(RangeCalendar, { ...props, words });
+}
+function DateRangeField(props) {
+  const {
+    value,
+    onChange,
+    locale,
+    label = "Choose date range",
+    invalid,
+    disabled,
+    className,
+    words,
+    formatDate,
+    id: idProp,
+    size = "md",
+    placement = "bottom-start",
+    onOpenChange,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid
+  } = props;
+  const uid = useId();
+  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 [labelled, setLabelled] = useState(false);
+  useEffect(() => {
+    setLabelled((triggerRef.current?.labels?.length ?? 0) > 0);
+  }, [id]);
+  const format = (date) => formatDate?.(date) ?? formatDateKey(date, locale);
+  const text = !value.start ? null : !value.end ? words.fieldStart.replace("{start}", format(value.start)) : words.fieldRange.replace("{start}", format(value.start)).replace("{end}", format(value.end));
+  const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
+  const describedBy = [ariaDescribedBy, labelled && text ? valueId : void 0].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: cx("uix-date-range-field", className),
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !open) return;
+        event.stopPropagation();
+        event.preventDefault();
+        hide();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            id,
+            disabled,
+            className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-range-field__trigger"),
+            "aria-describedby": describedBy,
+            "aria-invalid": rangeInvalid || ariaInvalid === true || ariaInvalid === "true" || void 0,
+            ...triggerProps,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "uix-date-range-field__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CalendarIcon, { size: "sm" }) }),
+              /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+                label,
+                ": "
+              ] }),
+              /* @__PURE__ */ jsx("span", { id: valueId, className: cx("uix-date-range-field__value", !text && "uix-date-range-field__value--empty"), children: text ?? words.placeholder })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            id: popoverId,
+            anchor: anchorRef,
+            placement,
+            className: "uix-date-range-field__popover",
+            role: "dialog",
+            "aria-label": label,
+            capHeight: true,
+            closeWhenAnchorHidden: true,
+            children: open && /* @__PURE__ */ jsx(
+              RangeCalendar,
+              {
+                ...props,
+                className: "uix-date-range-picker--in-popover",
+                autoFocus: true,
+                onChange: (next) => {
+                  onChange(next);
+                  if (next.start && next.end) hide();
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   DEFAULT_DATE_RANGE_PICKER_LABELS,
   DateRangePicker

package/dist/components/EntityPicker.d.ts

@@ -17,14 +17,35 @@ interface EntityPickerLabels {
     none: string;
     /** Polite count after a search. `{count}`. */
     results: string;
+    /**
+     * The last line of the list when the search found more than it returned (HAR-1648). Not an
+     * option: it cannot be chosen.
+     */
+    more: string;
+    /** Polite count when there are more matches than shown. `{count}` is the number shown. */
+    resultsMore: string;
+    /** Shown in the open list while the query is shorter than `minQueryLength`. `{count}`. */
+    tooShort: string;
+    /** The same when `minQueryLength` is 1. */
+    typeToSearch: string;
 }
 declare const DEFAULT_ENTITY_PICKER_LABELS: EntityPickerLabels;
+/** What `onSearch` may resolve to when it knows its list was cut off. */
+interface EntityPickerSearchResult {
+    options: readonly SearchSuggestOption[];
+    /** There are more matches than `options` holds: the list ends with the `more` line. */
+    hasMore?: boolean;
+}
 interface EntityPickerProps {
     /** The chosen record, or null. */
     value: SearchSuggestOption | null;
     onValueChange: (next: SearchSuggestOption | null) => void;
-    /** Finds records for the query; a rejection shows the error state with a Retry row. */
-    onSearch: (query: string) => Promise<readonly SearchSuggestOption[]>;
+    /**
+     * Finds records for the query; a rejection shows the error state with a Retry row. Resolve
+     * with the options, or with `{ options, hasMore: true }` when the list was cut off (a page of
+     * 20 out of many): the list then says that more match.
+     */
+    onSearch: (query: string) => Promise<readonly SearchSuggestOption[] | EntityPickerSearchResult>;
     /** The field's name (the visible label usually comes from a surrounding `Field`). */
     label: string;
     /** Id of the control, for `Field htmlFor`/`label for`. */
@@ -32,7 +53,10 @@ interface EntityPickerProps {
     /** Hidden form value: the chosen record's id. */
     name?: string;
     placeholder?: string;
-    /** Search only from this many characters. Default 0 (an empty query lists suggestions). */
+    /**
+     * Search only from this many characters. Default 0 (an empty query lists suggestions). Below
+     * it the open list shows the `tooShort` hint instead of nothing.
+     */
     minQueryLength?: number;
     /** Debounce before searching, in ms. Default 250. */
     delay?: number;
@@ -42,6 +66,7 @@ interface EntityPickerProps {
     'aria-describedby'?: string;
     /** How the chosen record shows in the field. Default: title, then the last breadcrumb. */
     renderValue?: (option: SearchSuggestOption) => ReactNode;
+    /** Each word defaults to `UixLabelsProvider` `entityPicker`, then to English. */
     labels?: Partial<EntityPickerLabels>;
     className?: string;
 }
@@ -53,4 +78,4 @@ interface EntityPickerProps {
  */
 declare function EntityPicker({ value, onValueChange, onSearch, label, id, name, placeholder, minQueryLength, delay, disabled, invalid, 'aria-describedby': describedBy, renderValue, labels: labelOverrides, className, }: EntityPickerProps): react.JSX.Element;
 
-export { DEFAULT_ENTITY_PICKER_LABELS, EntityPicker, type EntityPickerLabels, type EntityPickerProps };
+export { DEFAULT_ENTITY_PICKER_LABELS, EntityPicker, type EntityPickerLabels, type EntityPickerProps, type EntityPickerSearchResult };

package/dist/components/EntityPicker.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
 import { SearchSuggest } from "./SearchSuggest.js";
 const DEFAULT_ENTITY_PICKER_LABELS = {
   search: "Search",
@@ -13,7 +14,11 @@ const DEFAULT_ENTITY_PICKER_LABELS = {
   clear: "Clear {title}",
   change: "{label}: {title}. Change",
   none: "Choose\u2026",
-  results: "{count} results"
+  results: "{count} results",
+  more: "More matches. Keep typing to narrow the search.",
+  resultsMore: "{count} results shown, more match. Keep typing to narrow the search.",
+  tooShort: "Type at least {count} characters.",
+  typeToSearch: "Type to search."
 };
 function EntityPicker({
   value,
@@ -32,10 +37,11 @@ function EntityPicker({
   labels: labelOverrides,
   className
 }) {
-  const labels = { ...DEFAULT_ENTITY_PICKER_LABELS, ...labelOverrides };
+  const labels = { ...DEFAULT_ENTITY_PICKER_LABELS, ...useUixLabels().entityPicker, ...labelOverrides };
   const [editing, setEditing] = useState(value == null);
   const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
+  const [hasMore, setHasMore] = useState(false);
   const [status, setStatus] = useState("idle");
   const [attempt, setAttempt] = useState(0);
   const latest = useRef(0);
@@ -52,6 +58,7 @@ function EntityPicker({
     if (q.length < minQueryLength) {
       setStatus("idle");
       setResults([]);
+      setHasMore(false);
       return;
     }
     const run = ++latest.current;
@@ -59,14 +66,16 @@ function EntityPicker({
       setStatus("loading");
       onSearch(q).then(
         (found) => {
-          if (run === latest.current) {
-            setResults(found);
-            setStatus("done");
-          }
+          if (run !== latest.current) return;
+          const list = "options" in found ? found.options : found;
+          setResults(list);
+          setHasMore("options" in found && !!found.hasMore && list.length > 0);
+          setStatus("done");
         },
         () => {
           if (run === latest.current) {
             setResults([]);
+            setHasMore(false);
             setStatus("error");
           }
         }
@@ -95,6 +104,7 @@ function EntityPicker({
     setEditing(true);
   };
   const hidden = name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value?.id ?? "" }) : null;
+  const tooShort = !disabled && query.trim().length < minQueryLength;
   if (!editing && value) {
     const shown = renderValue?.(value) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { className: "uix-entity-picker__title", children: value.title }),
@@ -150,10 +160,12 @@ function EntityPicker({
             placeholder: placeholder ?? labels.none,
             loading: status === "loading",
             loadingLabel: labels.loading,
-            empty: labels.empty,
+            empty: tooShort ? void 0 : labels.empty,
+            idle: tooShort ? fillLabel(minQueryLength === 1 ? labels.typeToSearch : labels.tooShort, { count: minQueryLength }) : void 0,
+            note: status === "done" && hasMore ? labels.more : void 0,
             error: status === "error" ? labels.error : void 0,
             footer: status === "error" ? { label: labels.retry, onSelect: () => setAttempt((n) => n + 1) } : void 0,
-            status: status === "done" ? fillLabel(labels.results, { count: results.length }) : void 0,
+            status: status === "done" ? fillLabel(hasMore ? labels.resultsMore : labels.results, { count: results.length }) : void 0,
             strategy: "fixed"
           }
         ),

package/dist/components/InlineEdit.d.ts

@@ -0,0 +1,74 @@
+import * as react from 'react';
+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}". */
+    edit: string;
+    save: string;
+    cancel: string;
+    /** Polite status while `onSave` runs. */
+    saving: string;
+    /** Polite status after a save. */
+    saved: string;
+    /** Shown when `onSave` rejects without a message of its own. */
+    failed: string;
+    /** What the view shows when the value is empty and no `placeholder` was given. */
+    empty: string;
+}
+declare const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels;
+/** What a custom editor receives. Spread the field props onto your control. */
+interface InlineEditEditorProps {
+    /** The draft. */
+    value: string;
+    onChange: (next: string) => void;
+    /** Save the draft (what Enter does in the default editor). */
+    save: () => void;
+    cancel: () => void;
+    /** `id`, the accessible name, the error wiring and `disabled` while saving. */
+    field: {
+        id: string;
+        'aria-label': string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': true | undefined;
+        disabled: boolean;
+    };
+}
+interface InlineEditProps {
+    /** The saved value. */
+    value: string;
+    /**
+     * 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`).
+     */
+    onSave: (next: string) => void | Promise<void>;
+    /** 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;
+    /**
+     * A custom editor: a `Select`, a `Combobox`, a date field. Spread `field` onto the control.
+     * Default: an `Input`, or a `Textarea` with `multiline`.
+     */
+    renderEditor?: (props: InlineEditEditorProps) => 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;
+    /** 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. */
+    disabled?: boolean;
+    /** Each word defaults to `UixLabelsProvider` `inlineEdit`, then to English. */
+    labels?: Partial<InlineEditLabels>;
+    className?: string;
+}
+/**
+ * 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.
+ */
+declare function InlineEdit({ value, onSave, label, renderView, renderEditor, multiline, validate, placeholder, disabled, labels: labelOverrides, className, }: InlineEditProps): react.JSX.Element;
+
+export { DEFAULT_INLINE_EDIT_LABELS, InlineEdit, type InlineEditEditorProps, type InlineEditLabels, type InlineEditProps };

package/dist/components/InlineEdit.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { PencilIcon } from "../icons/components.js";
+import { Button } from "./Button.js";
+import { Input } from "./Input.js";
+import { Textarea } from "./Textarea.js";
+const DEFAULT_INLINE_EDIT_LABELS = {
+  edit: "Edit {label}",
+  save: "Save",
+  cancel: "Cancel",
+  saving: "Saving\u2026",
+  saved: "Saved",
+  failed: "Could not save.",
+  empty: "Not set"
+};
+function InlineEdit({
+  value,
+  onSave,
+  label,
+  renderView,
+  renderEditor,
+  multiline = false,
+  validate,
+  placeholder,
+  disabled = false,
+  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 [pending, setPending] = useState(false);
+  const [error, setError] = useState();
+  const [status, setStatus] = useState("");
+  const viewRef = useRef(null);
+  const editorRef = useRef(null);
+  const focusNext = useRef(null);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  useEffect(() => {
+    const target = focusNext.current;
+    if (!target) return;
+    focusNext.current = null;
+    if (target === "view") {
+      viewRef.current?.focus();
+      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);
+    setError(void 0);
+    setStatus("");
+    focusNext.current = "editor";
+    setEditing(true);
+  };
+  const close = () => {
+    focusNext.current = "view";
+    setEditing(false);
+  };
+  const cancel = () => {
+    if (pending) return;
+    setError(void 0);
+    close();
+  };
+  const save = () => {
+    if (pending) return;
+    const issue = validate?.(draft);
+    if (issue != null) {
+      setError(issue);
+      return;
+    }
+    if (draft === value) {
+      close();
+      return;
+    }
+    setError(void 0);
+    let result;
+    try {
+      result = onSave(draft);
+    } catch (thrown) {
+      setError(thrown instanceof Error && thrown.message ? thrown.message : labels.failed);
+      return;
+    }
+    if (!result || typeof result.then !== "function") {
+      setStatus(labels.saved);
+      close();
+      return;
+    }
+    setPending(true);
+    setStatus(labels.saving);
+    result.then(
+      () => {
+        if (!mounted.current) return;
+        setPending(false);
+        setStatus(labels.saved);
+        close();
+      },
+      (reason) => {
+        if (!mounted.current) return;
+        setPending(false);
+        setStatus("");
+        setError(typeof reason === "string" && reason ? reason : reason instanceof Error && reason.message ? reason.message : labels.failed);
+        focusNext.current = null;
+        editorRef.current?.querySelector("input, textarea, select")?.focus();
+      }
+    );
+  };
+  const onEditorKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    } else if (event.key === "Enter" && !event.defaultPrevented) {
+      const inField = event.target.matches("input, textarea");
+      if (!inField) return;
+      const isTextarea = event.target.tagName === "TEXTAREA";
+      if (isTextarea && !(event.ctrlKey || event.metaKey)) return;
+      event.preventDefault();
+      save();
+    }
+  };
+  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 }) });
+  }
+  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 }),
+        /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+          ", ",
+          fillLabel(labels.edit, { label })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "uix-inline-edit__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PencilIcon, { size: "sm" }) })
+      ] }),
+      liveRegion
+    ] });
+  }
+  const field = {
+    id,
+    "aria-label": label,
+    "aria-describedby": error != null ? errorId : void 0,
+    "aria-invalid": error != null ? true : void 0,
+    disabled: pending
+  };
+  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 })
+    ] }),
+    liveRegion
+  ] });
+}
+export {
+  DEFAULT_INLINE_EDIT_LABELS,
+  InlineEdit
+};

package/dist/components/List.d.ts

@@ -3,9 +3,16 @@ import { HTMLAttributes, ReactNode } from 'react';
 
 interface ListProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
+    /**
+     * Makes the list one tab stop: ArrowUp and ArrowDown move between its `ListItem`s, Home and
+     * End go to the first and last, Enter and Space activate the focused item (its `onClick`).
+     * Focus stays on the same item across re-renders with the same keys. A roving list is a
+     * client component; without `roving` the list stays server-renderable.
+     */
+    roving?: boolean;
 }
 /** Bordered, rounded list container over `.uix-list`. */
-declare function List({ children, className, ...props }: ListProps): react.JSX.Element;
+declare function List({ children, className, roving, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     meta?: ReactNode;