@tensor_1/react 2.46.0 → 2.48.0

package/dist/components/DataWorkspace.js

@@ -0,0 +1,383 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { renderUixLink } from "../link.js";
+import { isFilterEmpty, summarizeFilter } from "../filter-model.js";
+import { useResolvedFilterLabels } from "../hooks/useResolvedFilterLabels.js";
+import { BusyRegion } from "./BusyRegion.js";
+import { Button } from "./Button.js";
+import { Checkbox } from "./Checkbox.js";
+import { Chip } from "./Chip.js";
+import { FilterEditor } from "./FilterEditor.js";
+import { Menu, MenuItem } from "./Menu.js";
+import { Pagination } from "./Pagination.js";
+import { Popover } from "./Popover.js";
+import { SearchBar } from "./SearchBar.js";
+import { Select } from "./Select.js";
+import { EmptyState, ErrorState, FilteredEmptyState, LoadingState } from "./States.js";
+import { BulkBar, RowActions, Table, TableWrap, Td, Th, Tr } from "./Table.js";
+import { SavedViewMenu, ViewMenu } from "./TableControls.js";
+const DEFAULT_DATA_WORKSPACE_LABELS = {
+  search: "Search",
+  searchPlaceholder: "Search\u2026",
+  addFilter: "Filter",
+  clearFilters: "Clear filters",
+  savedView: "View: {name}",
+  view: "View",
+  saveView: "Save changes",
+  saveViewAs: "Save as\u2026",
+  maximize: "Maximize",
+  restore: "Restore size",
+  selectAll: "Select all rows on this page",
+  selectRow: "Select {label}",
+  selected: "{count} selected",
+  bulkActions: "Bulk actions",
+  open: "Open {label}",
+  rowActions: "Actions",
+  range: "{from}\u2013{to} of {total}",
+  rowsPerPage: "Rows per page",
+  loading: "Loading",
+  empty: "Nothing here yet",
+  emptyDetail: "Records show here as soon as they exist.",
+  filteredEmpty: "Nothing matches",
+  filteredEmptyDetail: "Change the search or clear a filter.",
+  error: "The list could not be loaded",
+  retry: "Try again"
+};
+const ArrowUpRight = () => /* @__PURE__ */ jsx("svg", { className: "uix-id-cell__arrow", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M8 7h9v9" }) });
+const PlusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) });
+const MaximizeIcon = ({ restore }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: restore ? "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7" : "M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" }) });
+function DataWorkspace({
+  label,
+  rows,
+  getRowId,
+  columns,
+  idColumn,
+  sort,
+  onSortChange,
+  selection,
+  onSelectionChange,
+  bulkActions,
+  rowActions,
+  getRowProps,
+  density,
+  search,
+  filters,
+  savedViews,
+  viewMenu,
+  viewChanged = false,
+  onSaveView,
+  onSaveViewAs,
+  maximized = false,
+  onMaximizedChange,
+  toolbarEnd,
+  pagination,
+  status = "ready",
+  refreshing = false,
+  onRetry,
+  labels: labelOverrides,
+  className,
+  ...props
+}) {
+  const labels = { ...DEFAULT_DATA_WORKSPACE_LABELS, ...useUixLabels().dataWorkspace, ...labelOverrides };
+  const id = useId();
+  const searchRef = useRef(null);
+  const rootRef = useRef(null);
+  const anchor = useRef(null);
+  useEffect(() => {
+    if (!search) return;
+    const onKey = (event) => {
+      if (event.key !== "/" || !(event.ctrlKey || event.metaKey) || event.altKey || event.defaultPrevented) return;
+      const root = rootRef.current;
+      const target = event.target;
+      const inside = root != null && target != null && root.contains(target);
+      const unfocused = target === document.body || target === document.documentElement || target === document;
+      if (inside || unfocused && root != null && document.querySelector(".uix-data-workspace") === root) {
+        event.preventDefault();
+        searchRef.current?.focus();
+        searchRef.current?.select();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [search != null]);
+  useEffect(() => {
+    if (!maximized || !onMaximizedChange) return;
+    const onKey = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      const root = rootRef.current;
+      const target = event.target;
+      const owner = target?.closest?.('[popover], [role="dialog"], [role="menu"], [role="listbox"], [aria-expanded="true"]');
+      if (owner && root?.contains(owner)) return;
+      if (root && openInside(root)) return;
+      onMaximizedChange(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [maximized, onMaximizedChange]);
+  const filtered = (filters ? filters.fields.some((field) => !isFilterEmpty(filters.values[field.id])) : false) || (search?.value.trim() ?? "") !== "";
+  const [settled, setSettled] = useState({ rows, filtered });
+  if (!refreshing && rows !== settled.rows) setSettled({ rows, filtered });
+  const view = rows.length > 0 ? { rows, filtered } : refreshing || rows === settled.rows ? settled : { rows, filtered };
+  const shownRows = view.rows;
+  const ids = useMemo(() => shownRows.map(getRowId), [shownRows, getRowId]);
+  const selected = selection ?? /* @__PURE__ */ new Set();
+  const selectable = onSelectionChange != null;
+  const onPage = ids.filter((rowId) => selected.has(rowId)).length;
+  const toggleRow = (rowId, on, event) => {
+    if (!onSelectionChange) return;
+    const next = new Set(selected);
+    const from = anchor.current ? ids.indexOf(anchor.current) : -1;
+    const to = ids.indexOf(rowId);
+    if (event?.shiftKey && from >= 0 && to >= 0) {
+      for (let i = Math.min(from, to); i <= Math.max(from, to); i += 1) {
+        if (on) next.add(ids[i]);
+        else next.delete(ids[i]);
+      }
+    } else {
+      if (on) next.add(rowId);
+      else next.delete(rowId);
+      anchor.current = rowId;
+    }
+    onSelectionChange(next);
+  };
+  const toggleAll = (on) => {
+    if (!onSelectionChange) return;
+    const next = new Set(selected);
+    for (const rowId of ids) {
+      if (on) next.add(rowId);
+      else next.delete(rowId);
+    }
+    onSelectionChange(next);
+  };
+  const actionsByRow = useMemo(() => rowActions ? shownRows.map((row) => rowActions(row)) : [], [shownRows, rowActions]);
+  const hasActions = actionsByRow.some((node) => node != null && node !== false);
+  const activeFilters = filters ? filters.fields.filter((field) => !isFilterEmpty(filters.values[field.id])) : [];
+  const searching = (search?.value.trim() ?? "") !== "";
+  const clearAll = () => {
+    for (const field of activeFilters) filters?.onChange(field.id, void 0);
+    if (searching) search?.onChange("");
+  };
+  const sortFor = (column) => sort?.columnId === column.id ? sort.direction : "none";
+  const cycleSort = (column) => {
+    const current = sortFor(column);
+    onSortChange?.(current === "none" ? { columnId: column.id, direction: "ascending" } : current === "ascending" ? { columnId: column.id, direction: "descending" } : null);
+  };
+  const toolbar = /* @__PURE__ */ jsxs("div", { className: "uix-toolbar uix-data-workspace__toolbar", role: "toolbar", "aria-label": label, children: [
+    savedViews && /* @__PURE__ */ jsx(PopoverButton, { id: `${id}-views`, label: savedViews.current, title: typeof savedViews.current === "string" ? fillLabel(labels.savedView, { name: savedViews.current }) : void 0, variant: "secondary", children: (close) => /* @__PURE__ */ jsx(SavedViewMenu, { ...savedViews.menu, onSelect: (viewId) => {
+      savedViews.menu.onSelect(viewId);
+      close();
+    } }) }),
+    viewChanged && onSaveView && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: onSaveView, children: labels.saveView }),
+    viewChanged && onSaveViewAs && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: onSaveViewAs, children: labels.saveViewAs }),
+    filters && /* @__PURE__ */ jsx(FilterChips, { filters, labels, baseId: id }),
+    /* @__PURE__ */ jsx("span", { className: "uix-toolbar__spacer" }),
+    search && /* @__PURE__ */ jsx(
+      SearchBar,
+      {
+        className: "uix-data-workspace__search",
+        landmark: false,
+        label: search.label ?? labels.search,
+        placeholder: search.placeholder ?? labels.searchPlaceholder,
+        value: search.value,
+        onValueChange: search.onChange,
+        inputRef: searchRef
+      }
+    ),
+    viewMenu && /* @__PURE__ */ jsx(PopoverButton, { id: `${id}-view`, label: labels.view, variant: "ghost", children: () => /* @__PURE__ */ jsx(ViewMenu, { ...viewMenu }) }),
+    onMaximizedChange && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", icon: true, "aria-label": maximized ? labels.restore : labels.maximize, "aria-pressed": maximized, onClick: () => onMaximizedChange(!maximized), children: /* @__PURE__ */ jsx(MaximizeIcon, { restore: maximized }) }),
+    toolbarEnd
+  ] });
+  let body;
+  if (status === "loading") body = /* @__PURE__ */ jsx(LoadingState, { rows: 6, label: labels.loading, className: "uix-data-workspace__loading" });
+  else if (status === "error") body = /* @__PURE__ */ jsx(ErrorState, { title: labels.error, action: onRetry && /* @__PURE__ */ jsx(Button, { size: "sm", onClick: onRetry, children: labels.retry }) });
+  else if (shownRows.length === 0) {
+    body = /* @__PURE__ */ jsx(BusyRegion, { busy: refreshing, className: "uix-data-workspace__state", children: view.filtered ? /* @__PURE__ */ jsx(FilteredEmptyState, { title: labels.filteredEmpty, action: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: clearAll, children: labels.clearFilters }), children: labels.filteredEmptyDetail }) : /* @__PURE__ */ jsx(EmptyState, { title: labels.empty, children: labels.emptyDetail }) });
+  } else {
+    body = /* @__PURE__ */ jsx(TableWrap, { refreshing, className: "uix-data-workspace__table", children: /* @__PURE__ */ jsxs(Table, { density, pinnedCol: idColumn != null, pinnedActions: hasActions, className: cx(selectable && idColumn && "uix-data-workspace__grid--pin-id"), "aria-label": label, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        selectable && /* @__PURE__ */ jsx("th", { className: "uix-table__selcol", scope: "col", children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": labels.selectAll, checked: onPage > 0 && onPage === ids.length, indeterminate: onPage > 0 && onPage < ids.length, onChange: (event) => toggleAll(event.currentTarget.checked) }) }),
+        idColumn && /* @__PURE__ */ jsx(Th, { scope: "col", children: idColumn.header }),
+        columns.map((column) => /* @__PURE__ */ jsx(
+          Th,
+          {
+            scope: "col",
+            className: column.align === "end" ? "uix-col--num" : void 0,
+            style: column.width ? { width: column.width } : void 0,
+            sortable: column.sortable && onSortChange != null,
+            sortDirection: sortFor(column),
+            onSort: () => cycleSort(column),
+            children: column.header
+          },
+          column.id
+        )),
+        hasActions && /* @__PURE__ */ jsx("th", { scope: "col", className: "uix-table__actions", children: /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: labels.rowActions }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: shownRows.map((row, index) => {
+        const rowId = ids[index];
+        const text = idColumn?.text(row) ?? rowId;
+        const isSelected = selected.has(rowId);
+        return /* @__PURE__ */ jsxs(Tr, { selected: isSelected, ...getRowProps?.(row), children: [
+          selectable && /* @__PURE__ */ jsx("td", { className: "uix-table__selcell", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              "aria-label": fillLabel(labels.selectRow, { label: text }),
+              checked: isSelected,
+              onClick: (event) => toggleRow(rowId, event.currentTarget.checked, event),
+              onChange: () => {
+              }
+            }
+          ) }),
+          idColumn && /* @__PURE__ */ jsx(Td, { className: "uix-id-cell", children: /* @__PURE__ */ jsxs("span", { className: "uix-data-workspace__id", children: [
+            idColumn.onPeek ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-id-cell__btn", "aria-haspopup": "dialog", onClick: () => idColumn.onPeek?.(row), children: text }) : /* @__PURE__ */ jsx("span", { className: "uix-cell-strong", children: text }),
+            idColumn.href && renderUixLink(idColumn.renderLink, {
+              href: idColumn.href(row),
+              className: "uix-data-workspace__open",
+              "aria-label": fillLabel(labels.open, { label: text }),
+              children: /* @__PURE__ */ jsx(ArrowUpRight, {})
+            })
+          ] }) }),
+          columns.map((column) => /* @__PURE__ */ jsx(Td, { className: column.align === "end" ? "uix-col--num" : void 0, children: column.cell(row) }, column.id)),
+          hasActions && /* @__PURE__ */ jsx(RowActions, { children: actionsByRow[index] })
+        ] }, rowId);
+      }) })
+    ] }) });
+  }
+  const selectedIds = [...selected];
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: rootRef,
+      className: cx("uix-data-workspace", maximized && "uix-data-workspace--maximized", className),
+      "aria-label": label,
+      ...props,
+      children: [
+        toolbar,
+        bulkActions && selectedIds.length > 0 && /* @__PURE__ */ jsx(BulkBar, { count: selectedIds.length, label: labels.bulkActions, selectedLabel: (n) => fillLabel(labels.selected, { count: n }), children: bulkActions(selectedIds) }),
+        body,
+        pagination && status === "ready" && shownRows.length > 0 && /* @__PURE__ */ jsx(Footer, { pagination, labels, rowCount: shownRows.length })
+      ]
+    }
+  );
+}
+function Footer({ pagination, labels, rowCount }) {
+  const sizes = pagination.pageSizes;
+  const size = pagination.mode === "offset" ? pagination.pageSize : pagination.pageSize;
+  const rangeText = pagination.mode === "offset" ? fillLabel(labels.range, {
+    from: pagination.total === 0 ? 0 : (pagination.page - 1) * pagination.pageSize + 1,
+    to: Math.min(pagination.total, (pagination.page - 1) * pagination.pageSize + rowCount),
+    total: pagination.total
+  }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "uix-data-workspace__footer", children: [
+    rangeText != null && /* @__PURE__ */ jsx("span", { className: "uix-data-workspace__range", children: rangeText }),
+    sizes && sizes.length > 1 && size != null && pagination.onPageSizeChange && /* @__PURE__ */ jsxs("label", { className: "uix-data-workspace__size", children: [
+      /* @__PURE__ */ jsx("span", { children: labels.rowsPerPage }),
+      /* @__PURE__ */ jsx(Select, { size: "sm", value: String(size), onValueChange: (v) => pagination.onPageSizeChange?.(Number(v)), options: sizes.map((s) => ({ value: String(s), label: String(s) })) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "uix-toolbar__spacer" }),
+    pagination.mode === "offset" ? /* @__PURE__ */ jsx(Pagination, { mode: "offset", page: pagination.page, pageCount: Math.max(1, Math.ceil(pagination.total / pagination.pageSize)), onChange: pagination.onPageChange }) : /* @__PURE__ */ jsx(Pagination, { mode: "cursor", hasPrevious: pagination.hasPrevious, hasNext: pagination.hasNext, onFirst: pagination.onFirst, onPrevious: pagination.onPrevious, onNext: pagination.onNext, summary: pagination.summary })
+  ] });
+}
+function PopoverButton({ id, label, title, variant, children }) {
+  const anchor = useRef(null);
+  const [open, setOpen] = useState(false);
+  const popover = () => document.getElementById(id);
+  const close = () => {
+    popover()?.hidePopover?.();
+    anchor.current?.querySelector("button")?.focus();
+  };
+  useEffect(() => {
+    const el = popover();
+    if (!el) return;
+    const onToggle = (event) => setOpen(event.newState === "open");
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  });
+  return /* @__PURE__ */ jsxs("span", { ref: anchor, className: "uix-data-workspace__menu", children: [
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant, title, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": id, onClick: () => popover()?.togglePopover?.(), children: label }),
+    /* @__PURE__ */ jsx(Popover, { id, anchor, role: "dialog", "aria-label": title ?? (typeof label === "string" ? label : void 0), children: children(close) })
+  ] });
+}
+function ChipSummary({ field, value, options }) {
+  const resolved = useResolvedFilterLabels(field, value);
+  return /* @__PURE__ */ jsx(Fragment, { children: summarizeFilter(resolved.field, resolved.value, options) });
+}
+function openInside(root) {
+  try {
+    if (root.querySelector(":popover-open")) return true;
+  } catch {
+  }
+  return root.querySelector('dialog[open], [aria-expanded="true"]') != null;
+}
+function FilterChips({ filters, labels, baseId }) {
+  const [editing, setEditing] = useState(null);
+  const [draft, setDraft] = useState();
+  const [focusChip, setFocusChip] = useState(null);
+  const popId = `${baseId}-filter`;
+  const anchors = useRef(/* @__PURE__ */ new Map());
+  const addRef = useRef(null);
+  const set = filters.fields.filter((f) => !isFilterEmpty(filters.values[f.id]));
+  const unset = filters.fields.filter((f) => isFilterEmpty(filters.values[f.id]));
+  const edit = (field, anchor) => {
+    if (!anchor) return;
+    setDraft(filters.values[field.id]);
+    setEditing({ field, anchor });
+  };
+  useEffect(() => {
+    const el = document.getElementById(popId);
+    if (!el || !editing) return;
+    if (!el.matches(":popover-open")) el.showPopover?.();
+    const onToggle = (event) => {
+      if (event.newState === "closed") setEditing(null);
+    };
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  }, [editing, popId]);
+  const finish = (value) => {
+    if (!editing) return;
+    const applied = value && !isFilterEmpty(value) ? value : void 0;
+    filters.onChange(editing.field.id, applied);
+    const back = anchors.current.get(editing.field.id) ?? addRef.current?.querySelector("button");
+    document.getElementById(popId)?.hidePopover?.();
+    (back?.querySelector?.("button") ?? back)?.focus?.();
+    if (applied && !anchors.current.get(editing.field.id)) setFocusChip(editing.field.id);
+  };
+  useEffect(() => {
+    if (!focusChip) return;
+    const chip = anchors.current.get(focusChip)?.querySelector("button");
+    if (chip) {
+      chip.focus();
+      setFocusChip(null);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    set.map((field) => /* @__PURE__ */ jsx("span", { ref: (el) => {
+      if (el) anchors.current.set(field.id, el);
+      else anchors.current.delete(field.id);
+    }, className: "uix-data-workspace__chip", children: /* @__PURE__ */ jsx(
+      Chip,
+      {
+        "aria-haspopup": "dialog",
+        count: filters.counts?.[field.id],
+        onClick: () => edit(field, anchors.current.get(field.id) ?? null),
+        onRemove: () => filters.onChange(field.id, void 0),
+        children: /* @__PURE__ */ jsx(ChipSummary, { field, value: filters.values[field.id], options: filters.summary })
+      }
+    ) }, field.id)),
+    unset.length > 0 && /* @__PURE__ */ jsx("span", { ref: addRef, children: /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-chip uix-chip--add", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-chip__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PlusIcon, {}) }),
+      /* @__PURE__ */ jsx("span", { className: "uix-chip__label", children: labels.addFilter })
+    ] }), children: unset.map((field) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => edit(field, addRef.current), children: field.label }, field.id)) }) }),
+    set.length > 0 && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "link", onClick: () => {
+      for (const f of set) filters.onChange(f.id, void 0);
+    }, children: labels.clearFilters }),
+    /* @__PURE__ */ jsx(Popover, { id: popId, anchor: editing?.anchor ?? null, role: "dialog", "aria-label": editing?.field.label, children: editing && /* @__PURE__ */ jsx(FilterEditor, { field: editing.field, value: draft, onValueChange: setDraft, onApply: (v) => finish(v), onClear: () => finish(void 0) }) })
+  ] });
+}
+export {
+  DEFAULT_DATA_WORKSPACE_LABELS,
+  DataWorkspace
+};

package/dist/components/DateFieldParts.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { MouseEvent } from 'react';
+import { KeyboardEvent, MouseEvent } from 'react';
 import { CalendarWeekday } from '../calendar-model.js';
 
 /** The viewer's local calendar date as `YYYY-MM-DD` (not UTC: "today" is a local idea). */
@@ -20,6 +20,7 @@ declare function useFieldPopover(popoverId: string, restoreFocus: () => void, on
     open: boolean;
     show: () => void;
     hide: (restore?: boolean) => void;
+    onFieldKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
     /** Spread on the button that opens the calendar. */
     triggerProps: {
         'aria-haspopup': "dialog";

package/dist/components/DateFieldParts.js

@@ -62,10 +62,17 @@ function useFieldPopover(popoverId, restoreFocus, onOpenChange) {
       skipRestore.current = false;
     }
   };
+  const onFieldKeyDown = (event) => {
+    if (event.key !== "Escape" || !isOpen(popoverEl())) return;
+    event.stopPropagation();
+    event.preventDefault();
+    hide();
+  };
   return {
     open,
     show,
     hide,
+    onFieldKeyDown,
     /** Spread on the button that opens the calendar. */
     triggerProps: {
       "aria-haspopup": "dialog",

package/dist/components/DatePicker.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { AriaAttributes, CSSProperties } from 'react';
 import { CalendarWeekday } from '../calendar-model.js';
 import { Placement } from '../overlay-position.js';
+import { TimePickerLabels } from './TimePicker.js';
 
 /** Every word `DatePicker` renders or announces. */
 interface DatePickerLabels {
@@ -38,6 +39,8 @@ interface DatePickerProps {
     /**
      * How the field writes a date. Default: the locale's numeric date (22.11.2026, 11/22/2026).
      * Pass `parseDate` with it when your format is not three numbers, so typing still works.
+     * `formatDate`, `parseDate`, `locale` and `placeholder` default to `UixLabelsProvider`
+     * `dateFormat`, so one provider sets the format of every date field (HAR-2432).
      */
     formatDate?: (date: string) => string;
     /** Read typed text into `YYYY-MM-DD`, or `null` when it is not a date. Default: ISO or the locale's order. */
@@ -112,14 +115,18 @@ interface DateTimePickerProps extends Omit<DatePickerProps, 'value' | 'onValueCh
     timeZone?: string;
     /** Text shown instead of the zone's short name ("Vienna time", "UTC+2"); `null` shows none. */
     timeZoneLabel?: string | null;
-    /** Minutes between time steps. Default 1. */
+    /** Minutes the time's arrow keys step by, and between the times in its list. Default 15. */
     minuteStep?: number;
+    /** Words of the time field (its list button, list and messages); `UixLabelsProvider` `timePicker` too. */
+    timeLabels?: Partial<TimePickerLabels>;
+    /** `true` writes the time as 2:30 PM, `false` as 14:30, whatever the locale. */
+    hour12?: boolean;
     /** The time a date gets when it is chosen before any time. Default `'00:00'`. */
     defaultTime?: string;
     labels?: Partial<DateTimePickerLabels>;
 }
 /**
- * A date and a time as one field (HAR-1383): the {@link DatePicker} and a time input, with the
+ * A date and a time as one field (HAR-1383): the {@link DatePicker} and a {@link TimePicker} (HAR-1835), with the
  * time zone the pair is in shown beside them. The value is `YYYY-MM-DDTHH:mm`, the shape
  * `datetime-local` uses, so it replaces that input without changing what a form submits.
  * Clearing the date clears the value; a time alone is not a value.

package/dist/components/DatePicker.js

@@ -9,6 +9,7 @@ import { CalendarIcon } from "../icons/components.js";
 import { useUixLabels } from "../labels-context.js";
 import { fullDateLabel, localDateKey, MonthCalendar, useFieldPopover } from "./DateFieldParts.js";
 import { Popover } from "./Popover.js";
+import { TimePicker } from "./TimePicker.js";
 const DEFAULT_DATE_PICKER_LABELS = {
   open: "Choose date",
   openSelected: "Change date, {date}",
@@ -25,12 +26,12 @@ const DatePicker = forwardRef(function DatePicker2({
   min,
   max,
   isUnavailable,
-  formatDate,
-  parseDate,
-  locale,
+  formatDate: formatDateProp,
+  parseDate: parseDateProp,
+  locale: localeProp,
   weekStartsOn = 1,
   today,
-  placeholder,
+  placeholder: placeholderProp,
   size = "md",
   disabled,
   readOnly,
@@ -54,7 +55,12 @@ const DatePicker = forwardRef(function DatePicker2({
   const id = idProp ?? `${uid}-input`;
   const popoverId = `${uid}-calendar`;
   const errorId = `${uid}-error`;
-  const labels = { ...DEFAULT_DATE_PICKER_LABELS, ...useUixLabels().datePicker, ...labelOverrides };
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_DATE_PICKER_LABELS, ...uixLabels.datePicker, ...labelOverrides };
+  const locale = localeProp ?? uixLabels.dateFormat?.locale;
+  const formatDate = formatDateProp ?? uixLabels.dateFormat?.formatDate;
+  const parseDate = parseDateProp ?? uixLabels.dateFormat?.parseDate;
+  const placeholder = placeholderProp ?? uixLabels.dateFormat?.placeholder;
   const anchorRef = useRef(null);
   const inputRef = useRef(null);
   useImperativeHandle(forwardedRef, () => inputRef.current);
@@ -73,7 +79,7 @@ const DatePicker = forwardRef(function DatePicker2({
     setText(value ? format(value) : "");
     setProblem(null);
   }, [value, locale]);
-  const { open, show, hide, triggerProps } = useFieldPopover(popoverId, () => inputRef.current?.focus({ preventScroll: true }), onOpenChange);
+  const { open, show, hide, onFieldKeyDown, triggerProps } = useFieldPopover(popoverId, () => inputRef.current?.focus({ preventScroll: true }), onOpenChange);
   const locked = !!disabled || !!readOnly;
   const commit = () => {
     const typed = text.trim();
@@ -129,12 +135,7 @@ const DatePicker = forwardRef(function DatePicker2({
       ref: anchorRef,
       className: cx("uix-date-picker", size === "sm" && "uix-date-picker--sm", className),
       style,
-      onKeyDown: (event) => {
-        if (event.key !== "Escape" || !open) return;
-        event.stopPropagation();
-        event.preventDefault();
-        hide();
-      },
+      onKeyDown: onFieldKeyDown,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__control", children: [
           /* @__PURE__ */ jsx(
@@ -212,6 +213,22 @@ const DatePicker = forwardRef(function DatePicker2({
     }
   );
 });
+function labelText(label, control) {
+  let text = "";
+  const walk = (node) => {
+    if (node === control) return;
+    if (node.nodeType === 3) {
+      text += node.nodeValue ?? "";
+      return;
+    }
+    if (node.nodeType !== 1) return;
+    const el = node;
+    if (el.getAttribute("aria-hidden") === "true" || el.hidden) return;
+    node.childNodes.forEach(walk);
+  };
+  label.childNodes.forEach(walk);
+  return text.replace(/\s+/g, " ").trim();
+}
 const DEFAULT_DATE_TIME_PICKER_LABELS = {
   ...DEFAULT_DATE_PICKER_LABELS,
   date: "Date",
@@ -224,7 +241,9 @@ const DateTimePicker = forwardRef(function DateTimePicker2({
   onValueChange,
   timeZone,
   timeZoneLabel,
-  minuteStep = 1,
+  minuteStep = 15,
+  timeLabels,
+  hour12,
   defaultTime = "00:00",
   min,
   max,
@@ -234,7 +253,7 @@ const DateTimePicker = forwardRef(function DateTimePicker2({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   labels: labelOverrides,
-  locale,
+  locale: localeProp,
   size = "md",
   disabled,
   readOnly,
@@ -246,31 +265,48 @@ const DateTimePicker = forwardRef(function DateTimePicker2({
   const uid = useId();
   const id = idProp ?? `${uid}-date`;
   const zoneId = `${uid}-zone`;
-  const labels = { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...useUixLabels().dateTimePicker, ...labelOverrides };
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...uixLabels.dateTimePicker, ...labelOverrides };
+  const locale = localeProp ?? uixLabels.dateFormat?.locale;
   const { date, time } = splitDateTime(value);
   const dateRef = useRef(null);
+  const rootRef = useRef(null);
   useImperativeHandle(forwardedRef, () => dateRef.current);
   const [pendingTime, setPendingTime] = useState("");
   const shownTime = date ? time : pendingTime;
   const [fieldLabel, setFieldLabel] = useState("");
   const [viewerZone, setViewerZone] = useState(null);
   const grouped = !!ariaLabel || !!ariaLabelledBy;
+  const [labelNode, setLabelNode] = useState(null);
+  useEffect(() => {
+    if (grouped) return;
+    const input = dateRef.current;
+    const label = input?.labels?.[0] ?? null;
+    setLabelNode(label);
+    setFieldLabel(label ? labelText(label, rootRef.current) : "");
+  });
+  useEffect(() => {
+    if (grouped || !labelNode || typeof MutationObserver === "undefined") return void 0;
+    const observer = new MutationObserver(() => setFieldLabel(labelText(labelNode, rootRef.current)));
+    observer.observe(labelNode, { childList: true, characterData: true, subtree: true, attributes: true, attributeFilter: ["aria-hidden", "hidden"] });
+    return () => observer.disconnect();
+  }, [grouped, labelNode]);
   useEffect(() => {
-    if (!grouped) setFieldLabel(dateRef.current?.labels?.[0]?.textContent?.trim() ?? "");
     if (!timeZone) {
       try {
         setViewerZone(new Intl.DateTimeFormat().resolvedOptions().timeZone);
       } catch {
       }
     }
-  }, [grouped, timeZone]);
+  }, [timeZone]);
   const zone = timeZone ?? viewerZone;
   const zoneText = timeZoneLabel === null ? null : timeZoneLabel ?? (zone ? timeZoneName(zone, date, locale) : null);
   const timeName = grouped ? labels.time : fieldLabel ? fillLabel(labels.timeOf, { label: fieldLabel }) : labels.time;
-  const step = Math.max(1, Math.round(minuteStep)) * 60;
+  const step = Math.max(1, Math.round(minuteStep));
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: cx("uix-date-time-picker", size === "sm" && "uix-date-time-picker--sm", className),
       style,
       role: "group",
@@ -305,21 +341,24 @@ const DateTimePicker = forwardRef(function DateTimePicker2({
           }
         ),
         /* @__PURE__ */ jsx(
-          "input",
+          TimePicker,
           {
-            type: "time",
-            className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-time-picker__time"),
-            value: shownTime,
-            step,
+            className: "uix-date-time-picker__time",
+            value: shownTime || null,
+            minuteStep: step,
+            locale,
+            hour12,
+            size,
             disabled,
             readOnly,
             required: required && !!date,
+            invalid: !!dateProps.invalid || dateProps["aria-invalid"] === true || dateProps["aria-invalid"] === "true",
             "aria-label": timeName,
-            "aria-describedby": zoneText ? zoneId : void 0,
-            onChange: (event) => {
-              const next = event.target.value;
-              if (date) onValueChange(joinDateTime(date, next, defaultTime));
-              else setPendingTime(next);
+            labels: timeLabels,
+            "aria-describedby": [ariaDescribedBy, zoneText ? zoneId : void 0].filter(Boolean).join(" ") || void 0,
+            onValueChange: (next) => {
+              if (date) onValueChange(joinDateTime(date, next ?? "", defaultTime));
+              else setPendingTime(next ?? "");
             }
           }
         ),