@tensor_1/react 2.31.0 → 2.33.0

package/dist/components/DateRangePicker.js

@@ -16,6 +16,7 @@ const DEFAULT_DATE_RANGE_PICKER_LABELS = {
   rangeEnd: "end of selected range",
   inRange: "in selected range"
 };
+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) => {
@@ -37,7 +38,8 @@ function DateRangePicker({
   invalidMessage = "The selected date range is invalid.",
   disabled,
   className,
-  labels: labelOverrides
+  labels: labelOverrides,
+  today
 }) {
   const id = useId();
   const uixLabels = useUixLabels();
@@ -53,6 +55,7 @@ function DateRangePicker({
     const month = startOfMonth(addCalendarMonths(visibleMonth, index));
     return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
   }), [visibleMonth, count]);
+  const todayDate = today === void 0 ? localDateKey() : today;
   const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
   useEffect(() => {
     const first = calendars[0]?.days[0]?.date;
@@ -123,6 +126,7 @@ function DateRangePicker({
               "data-in-range": isDateInRange(day.date, value) || void 0,
               "aria-pressed": edge != null || isDateInRange(day.date, value),
               "aria-label": `${dateLabel(day.date, locale)}${edge ? `, ${edge === "start" ? labels.rangeStart : labels.rangeEnd}` : isDateInRange(day.date, value) ? `, ${labels.inRange}` : ""}`,
+              "aria-current": day.date === todayDate ? "date" : void 0,
               tabIndex: activeDate === day.date ? 0 : -1,
               disabled: unavailable,
               onFocus: () => setActiveDate(day.date),

package/dist/components/DescriptionList.d.ts

@@ -26,6 +26,10 @@ interface DescriptionListItem {
     id?: string;
     term: ReactNode;
     description: ReactNode;
+    /** Attributes for this row's `<dt>` (an `id` to anchor to, `data-*`). */
+    termProps?: HTMLAttributes<HTMLElement>;
+    /** Attributes for this row's `<dd>`. */
+    descriptionProps?: HTMLAttributes<HTMLElement>;
 }
 interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
     items?: DescriptionListItem[];
@@ -35,12 +39,19 @@ declare function DescriptionList({ items, children, className, ...props }: Descr
 interface DescriptionItemProps {
     term: ReactNode;
     children?: ReactNode;
+    /**
+     * Attributes for the `<dt>`: an `id` a deep link or `aria-describedby` points at, `data-*`,
+     * a `className` (HAR-1628). The pair has no wrapper element, so this is where they go.
+     */
+    termProps?: HTMLAttributes<HTMLElement>;
+    /** Attributes for the `<dd>`. */
+    descriptionProps?: HTMLAttributes<HTMLElement>;
 }
 /**
  * One hand-authored row. Renders a `<dt>`/`<dd>` fragment so the pair lands as
  * direct grid children of the enclosing `<DescriptionList>` (never wrap it in
  * an element — that breaks the two-column alignment).
  */
-declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
+declare function DescriptionItem({ term, children, termProps, descriptionProps }: DescriptionItemProps): react.JSX.Element;
 
 export { DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps };

package/dist/components/DescriptionList.js

@@ -4,16 +4,16 @@ import { cx } from "../cx.js";
 function DescriptionList({ items, children, className, ...props }) {
   return /* @__PURE__ */ jsxs("dl", { className: cx("uix-dl", className), ...props, children: [
     items?.map((item, i) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx("dt", { children: item.term }),
-      /* @__PURE__ */ jsx("dd", { children: item.description })
+      /* @__PURE__ */ jsx("dt", { ...item.termProps, children: item.term }),
+      /* @__PURE__ */ jsx("dd", { ...item.descriptionProps, children: item.description })
     ] }, item.id ?? i)),
     children
   ] });
 }
-function DescriptionItem({ term, children }) {
+function DescriptionItem({ term, children, termProps, descriptionProps }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("dt", { children: term }),
-    /* @__PURE__ */ jsx("dd", { children })
+    /* @__PURE__ */ jsx("dt", { ...termProps, children: term }),
+    /* @__PURE__ */ jsx("dd", { ...descriptionProps, children })
   ] });
 }
 export {

package/dist/components/Dialogs.d.ts

@@ -8,7 +8,8 @@ interface ConfirmDialogProps {
     description?: ReactNode;
     confirmLabel: ReactNode;
     cancelLabel: ReactNode;
-    closeLabel: string;
+    /** Accessible name of the close button. Default: `UixLabelsProvider` `modal.close`, then "Close dialog". */
+    closeLabel?: string;
     onConfirm: () => void | Promise<void>;
     onCancel: () => void;
     pending?: boolean;
@@ -75,12 +76,32 @@ interface PromptDialogProps {
     placeholder?: string;
     submitLabel: ReactNode;
     cancelLabel: ReactNode;
-    closeLabel: string;
+    /** Accessible name of the close button. Default: `UixLabelsProvider` `modal.close`, then "Close dialog". */
+    closeLabel?: string;
     onSubmit: (value: string) => void | Promise<void>;
     onCancel: () => void;
     validate?: (value: string) => ReactNode | undefined;
     pending?: boolean;
+    /**
+     * Ask for a longer answer in a textarea (a reason, a note); a number sets its rows, `true`
+     * is 4. Enter adds a line there, so the form is sent with the submit button or Ctrl/⌘+Enter
+     * (HAR-1614).
+     */
+    multiline?: boolean | number;
+    /**
+     * The answer confirms something that cannot be taken back (a forced import): the submit
+     * button is the danger button and the dialog is an `alertdialog`.
+     */
+    destructive?: boolean;
+    /**
+     * Why the last submit failed, from the server. Shown under the field (`role="alert"`) and
+     * tied to it; the dialog stays open. A message from `validate` takes its place while the
+     * value is invalid.
+     */
+    error?: ReactNode;
+    /** Default: `'alertdialog'` when `destructive`, else `'dialog'`. */
+    role?: 'dialog' | 'alertdialog';
 }
-declare function PromptDialog({ open, title, description, inputLabel, defaultValue, placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }: PromptDialogProps): react.JSX.Element;
+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 };

package/dist/components/Dialogs.js

@@ -4,6 +4,7 @@ import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
 import { Modal } from "./Modal.js";
+import { Textarea } from "./Textarea.js";
 import { Popover } from "./Popover.js";
 import { fillLabel } from "../fill-label.js";
 import { resolveAnchor } from "../hooks/useAnchoredPosition.js";
@@ -181,33 +182,90 @@ function Popconfirm({
     }
   );
 }
-function PromptDialog({ open, title, description, inputLabel, defaultValue = "", placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }) {
+function PromptDialog({
+  open,
+  title,
+  description,
+  inputLabel,
+  defaultValue = "",
+  placeholder,
+  submitLabel,
+  cancelLabel,
+  closeLabel,
+  onSubmit,
+  onCancel,
+  validate,
+  pending,
+  multiline = false,
+  destructive = false,
+  error: submitError,
+  role
+}) {
   const inputId = useId();
   const errorId = `${inputId}-error`;
+  const descriptionId = `${inputId}-description`;
+  const formRef = useRef(null);
+  const fieldRef = useRef(null);
   const [value, setValue] = useState(defaultValue);
-  const [error, setError] = useState();
+  const [issue, setIssue] = useState();
+  const error = issue ?? submitError;
+  useEffect(() => {
+    if (open) fieldRef.current?.focus();
+  }, [open]);
   useEffect(() => {
     if (open) {
       setValue(defaultValue);
-      setError(void 0);
+      setIssue(void 0);
     }
   }, [defaultValue, open]);
   const handleSubmit = (event) => {
     event.preventDefault();
-    const issue = validate?.(value);
-    setError(issue);
-    if (issue == null) void onSubmit(value);
+    const found = validate?.(value);
+    setIssue(found);
+    if (found == null) void onSubmit(value);
   };
-  return /* @__PURE__ */ jsx(Modal, { open, onClose: onCancel, title, closeLabel, children: /* @__PURE__ */ jsxs("form", { className: "uix-prompt", onSubmit: handleSubmit, children: [
-    description != null && /* @__PURE__ */ jsx("div", { children: description }),
-    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: inputId, children: inputLabel }),
-    /* @__PURE__ */ jsx(Input, { id: inputId, value, placeholder, "aria-describedby": error ? errorId : void 0, invalid: error != null, onChange: (event) => setValue(event.currentTarget.value), autoFocus: true }),
-    error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
-    /* @__PURE__ */ jsxs("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", loading: pending, children: submitLabel })
-    ] })
-  ] }) });
+  const field = {
+    id: inputId,
+    value,
+    placeholder,
+    "aria-describedby": error != null ? errorId : void 0,
+    invalid: error != null,
+    ref: fieldRef
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      onClose: onCancel,
+      title,
+      closeLabel,
+      role: role ?? (destructive ? "alertdialog" : "dialog"),
+      "aria-describedby": description != null ? descriptionId : void 0,
+      children: /* @__PURE__ */ jsxs("form", { ref: formRef, className: "uix-prompt", onSubmit: handleSubmit, children: [
+        description != null && /* @__PURE__ */ jsx("div", { id: descriptionId, children: description }),
+        /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: inputId, children: inputLabel }),
+        multiline ? /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ...field,
+            rows: typeof multiline === "number" ? multiline : 4,
+            onChange: (event) => setValue(event.currentTarget.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                formRef.current?.requestSubmit();
+              }
+            }
+          }
+        ) : /* @__PURE__ */ jsx(Input, { ...field, onChange: (event) => setValue(event.currentTarget.value) }),
+        error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: destructive ? "danger" : "primary", loading: pending, children: submitLabel })
+        ] })
+      ] })
+    }
+  );
 }
 export {
   ConfirmDialog,

package/dist/components/FileUpload.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { FileRejection } from '../file-model.js';
+import { FileRejection, FileSizeFormatter } from '../file-model.js';
 
 type FileUploadStatus = 'queued' | 'uploading' | 'done' | 'error';
 interface FileUploadItem {
@@ -74,6 +74,14 @@ interface FileUploadProps {
     /** Second line of the drop zone, e.g. "PDF or images, up to 20 MB". */
     hint?: ReactNode;
     locale?: string;
+    /** Count sizes in 1024s (1 MB = 1,048,576 bytes) instead of 1000s. Default `1000`. */
+    sizeBase?: 1000 | 1024;
+    /** The product's own size formatter; it replaces `formatFileSize` (and `sizeBase`). */
+    formatSize?: FileSizeFormatter;
+    /**
+     * Words for this instance. Each one defaults to `UixLabelsProvider` `fileUpload`, then to
+     * English, so one provider translates every upload below it (HAR-1630).
+     */
     labels?: Partial<FileUploadLabels>;
     className?: string;
 }
@@ -82,6 +90,6 @@ interface FileUploadProps {
  * product owns the upload: it receives validated `File`s and reports progress, success and
  * failure through `items`. Keyboard users get a real button; drop is an extra, not the only way.
  */
-declare function FileUpload({ items, onFilesAdded, onRemove, onRetry, onAltChange, accept, maxSize, maxFiles, multiple, capture, disabled, hint, locale, labels: labelOverrides, className, }: FileUploadProps): react.JSX.Element;
+declare function FileUpload({ items, onFilesAdded, onRemove, onRetry, onAltChange, accept, maxSize, maxFiles, multiple, capture, disabled, hint, locale, sizeBase, formatSize, labels: labelOverrides, className, }: FileUploadProps): react.JSX.Element;
 
 export { DEFAULT_FILE_UPLOAD_LABELS, FileUpload, type FileUploadItem, type FileUploadLabels, type FileUploadProps, type FileUploadStatus };

package/dist/components/FileUpload.js

@@ -4,6 +4,7 @@ import { useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
 import { formatFileSize, partitionFiles } from "../file-model.js";
+import { useUixLabels } from "../labels-context.js";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
 import { Progress } from "./Progress.js";
@@ -40,10 +41,13 @@ function FileUpload({
   disabled,
   hint,
   locale,
+  sizeBase,
+  formatSize,
   labels: labelOverrides,
   className
 }) {
-  const labels = { ...DEFAULT_FILE_UPLOAD_LABELS, ...labelOverrides };
+  const labels = { ...DEFAULT_FILE_UPLOAD_LABELS, ...useUixLabels().fileUpload, ...labelOverrides };
+  const sizeText = (bytes) => formatSize ? formatSize(bytes, locale) : formatFileSize(bytes, locale, { base: sizeBase });
   const id = useId();
   const inputRef = useRef(null);
   const [over, setOver] = useState(false);
@@ -53,7 +57,7 @@ function FileUpload({
     if (!list || disabled) return;
     const files = Array.from(list);
     const { accepted, rejected } = partitionFiles(files, { accept, maxSize, maxFiles, existing: items.length });
-    const max = maxSize !== void 0 ? formatFileSize(maxSize, locale) : "";
+    const max = maxSize !== void 0 ? sizeText(maxSize) : "";
     setMessages(rejected.map(({ file, reason }) => fillLabel(
       reason === "type" ? labels.wrongType : reason === "size" ? labels.tooLarge : labels.tooMany,
       { name: file.name, accept: accept ?? "", max: reason === "count" ? String(maxFiles) : max }
@@ -108,7 +112,9 @@ function FileUpload({
         ]
       }
     ),
-    messages.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-file-upload__errors", role: "alert", children: messages.map((m, i) => /* @__PURE__ */ jsx("li", { children: m }, i)) }),
+    messages.length > 0 && // The alert wraps the list: role="alert" on the <ul> itself replaced its list role and
+    // left the <li>s outside any list (axe `listitem`).
+    /* @__PURE__ */ jsx("div", { role: "alert", children: /* @__PURE__ */ jsx("ul", { className: "uix-file-upload__errors", children: messages.map((m, i) => /* @__PURE__ */ jsx("li", { children: m }, i)) }) }),
     /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announce }),
     items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-filelist uix-file-upload__list", "aria-label": labels.list, children: items.map((item) => {
       const statusText = item.status === "uploading" ? fillLabel(labels.uploading, { progress: item.progress ?? 0 }) : item.status === "done" ? labels.done : item.status === "error" ? labels.failed : labels.queued;
@@ -118,7 +124,7 @@ function FileUpload({
         /* @__PURE__ */ jsxs("div", { className: "uix-file-upload__body", children: [
           /* @__PURE__ */ jsx("span", { className: "uix-file-upload__name", children: item.name }),
           /* @__PURE__ */ jsxs("span", { className: "uix-file-upload__meta", children: [
-            /* @__PURE__ */ jsx("span", { children: formatFileSize(item.size, locale) }),
+            /* @__PURE__ */ jsx("span", { children: sizeText(item.size) }),
             item.status !== "uploading" && /* @__PURE__ */ jsx("span", { className: "uix-file-upload__status", children: statusText })
           ] }),
           item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.progress, indeterminate: item.progress === void 0, max: 100, label: statusText }),

package/dist/components/FilterEditor.d.ts

@@ -24,6 +24,8 @@ interface FilterEditorLabels {
     selected: string;
     /** Remove one chosen record. `{label}`. */
     remove: string;
+    /** Names the row of `field.presets` chips. Optional so existing label objects still type-check; default "Presets". */
+    presets?: string;
     operators: Record<TextFilterOperator | NumberFilterOperator, string>;
 }
 declare const DEFAULT_FILTER_EDITOR_LABELS: FilterEditorLabels;
@@ -45,6 +47,8 @@ interface FilterEditorProps {
  * multi-select, text or number with a condition, a date range, yes/no, or records found by
  * an async search. The product owns the popover trigger and the query; `summarizeFilter`
  * turns the applied value into the chip text. `FilterPopover` stays for the one-string case.
+ * An enum field's `presets` (HAR-1505) render as toggle chips above its options. Words come
+ * from `labels`, or from `UixLabelsProvider`'s `filterEditor` entry.
  */
 declare function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear, labels: labelOverrides, searchThreshold, searchDelay }: FilterEditorProps): react.JSX.Element;
 

package/dist/components/FilterEditor.js

@@ -8,8 +8,9 @@ import { Radio, RadioGroup } from "./Radio.js";
 import { Select } from "./Select.js";
 import { Chip } from "./Chip.js";
 import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
 import { foldForSearch } from "../search-suggest-model.js";
-import { NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue } from "../filter-model.js";
+import { NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue, matchFilterPreset } from "../filter-model.js";
 const DEFAULT_FILTER_EDITOR_LABELS = {
   apply: "Apply",
   clear: "Clear",
@@ -30,6 +31,7 @@ const DEFAULT_FILTER_EDITOR_LABELS = {
   selectNone: "Clear selection",
   selected: "{count} selected",
   remove: "Remove {label}",
+  presets: "Presets",
   operators: {
     contains: "contains",
     "not-contains": "does not contain",
@@ -46,7 +48,13 @@ const DEFAULT_FILTER_EDITOR_LABELS = {
   }
 };
 function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear, labels: labelOverrides, searchThreshold = 8, searchDelay = 250 }) {
-  const labels = { ...DEFAULT_FILTER_EDITOR_LABELS, ...labelOverrides, operators: { ...DEFAULT_FILTER_EDITOR_LABELS.operators, ...labelOverrides?.operators } };
+  const provided = useUixLabels().filterEditor;
+  const labels = {
+    ...DEFAULT_FILTER_EDITOR_LABELS,
+    ...provided,
+    ...labelOverrides,
+    operators: { ...DEFAULT_FILTER_EDITOR_LABELS.operators, ...provided?.operators, ...labelOverrides?.operators }
+  };
   const id = useId();
   const value = valueProp?.kind === field.kind ? valueProp : emptyFilterValue(field.kind);
   let body = null;
@@ -121,7 +129,10 @@ function EnumBody({ field, value, onChange, labels, threshold }) {
   }, [options, query]);
   const selected = new Set(value.values);
   const toggle = (v, on) => onChange({ kind: "enum", values: on ? [...value.values, v] : value.values.filter((x) => x !== v) });
+  const presets = field.presets ?? [];
+  const active = matchFilterPreset(field, value);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "uix-chip-group uix-filter-editor__presets", role: "group", "aria-label": labels.presets ?? DEFAULT_FILTER_EDITOR_LABELS.presets, children: presets.map((p) => /* @__PURE__ */ jsx(Chip, { pressed: p === active, onPressedChange: () => onChange({ kind: "enum", values: [...p.values] }), children: p.label }, p.id)) }),
     options.length > threshold && /* @__PURE__ */ jsx(Input, { type: "search", size: "sm", "aria-label": labels.search, placeholder: labels.search, value: query, onChange: (e) => setQuery(e.currentTarget.value), autoFocus: true }),
     /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__bulk", children: [
       /* @__PURE__ */ jsx("span", { className: "uix-filter-editor__count", "aria-live": "polite", children: fillLabel(labels.selected, { count: value.values.length }) }),

package/dist/components/Heartbeat.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type HeartbeatState = 'live' | 'idle' | 'warning' | 'danger';
+interface HeartbeatProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * `live` (default): a green dot with a pulsing ring. `warning` / `danger`: the same in that
+     * tone. `idle`: a grey dot, no ring.
+     */
+    state?: HeartbeatState;
+    /**
+     * What the dot means, for assistive technology ("Live", "Connection lost"). Without it the
+     * dot is decorative (`aria-hidden`): say the state in text beside it, as `LiveIndicator` does.
+     */
+    label?: string;
+}
+/**
+ * The pulsing status dot over `.uix-heartbeat` (HAR-1606), so products stop hand-writing its
+ * three spans. Decorative unless it has a `label`. The ring stops under
+ * `prefers-reduced-motion` (the kit's global motion guard); the dot and its colour stay.
+ */
+declare function Heartbeat({ state, label, className, ...props }: HeartbeatProps): react.JSX.Element;
+interface LiveIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    state?: HeartbeatState;
+    /** The state in words: "Live", "Paused", "Reconnecting…". It is what a screen reader gets. */
+    children?: ReactNode;
+}
+/** A `Heartbeat` with its state in text beside it, over `.uix-live`. */
+declare function LiveIndicator({ state, children, className, ...props }: LiveIndicatorProps): react.JSX.Element;
+
+export { Heartbeat, type HeartbeatProps, type HeartbeatState, LiveIndicator, type LiveIndicatorProps };

package/dist/components/Heartbeat.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+function Heartbeat({ state = "live", label, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cx("uix-heartbeat", state !== "live" && `uix-heartbeat--${state}`, className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-heartbeat__ping" }),
+        /* @__PURE__ */ jsx("span", { className: "uix-heartbeat__dot" })
+      ]
+    }
+  );
+}
+function LiveIndicator({ state = "live", children, className, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("uix-live", className), ...props, children: [
+    /* @__PURE__ */ jsx(Heartbeat, { state }),
+    children
+  ] });
+}
+export {
+  Heartbeat,
+  LiveIndicator
+};

package/dist/components/Menu.d.ts

@@ -3,13 +3,18 @@ import { ReactElement, ReactNode } from 'react';
 import { UixRenderLink } from '../link.js';
 import { Placement } from '../overlay-position.js';
 
+/** `id` and `data-*` for the item's own element (HAR-1629): a stable hook for tests, journeys and analytics. */
+interface MenuItemAttributes {
+    id?: string;
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+}
 interface MenuProps {
     /**
      * The menu button, usually a `Button`. It receives `aria-haspopup="menu"`,
      * `aria-expanded`, `aria-controls` and the open/keyboard handlers.
      */
     trigger: ReactElement;
-    /** `MenuItem`, `MenuGroup` and `MenuSeparator`. */
+    /** `MenuItem`, `MenuItemRadio`, `MenuItemCheckbox`, `MenuRadioGroup`, `MenuGroup` and `MenuSeparator`. */
     children?: ReactNode;
     /** Controlled open state; pair with `onOpenChange`. */
     open?: boolean;
@@ -23,10 +28,11 @@ interface MenuProps {
 /**
  * A menu button with an APG menu (HAR-1359; TENSOR C1, MOTUS B-A14): ↓/↑ move, Home/End,
  * type-to-find, Enter/Space activate, Esc and Tab close, focus returns to the trigger.
- * The surface is the kit `Popover`, so it escapes clipping containers.
+ * The surface is the kit `Popover`, so it escapes clipping containers; a menu taller than
+ * the viewport is capped to it and scrolls (HAR-1613).
  */
 declare function Menu({ trigger, children, open: controlledOpen, defaultOpen, onOpenChange, label, placement, className }: MenuProps): react.JSX.Element;
-interface MenuItemProps {
+interface MenuItemProps extends MenuItemAttributes {
     children?: ReactNode;
     /** Runs on click, Enter or Space; the menu then closes and focus returns to the trigger. */
     onSelect?: () => void;
@@ -40,7 +46,49 @@ interface MenuItemProps {
     disabled?: boolean;
     className?: string;
 }
-declare function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone, disabled, className }: MenuItemProps): react.JSX.Element;
+declare function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone, disabled, className, ...rest }: MenuItemProps): react.JSX.Element;
+interface MenuRadioGroupProps {
+    /** The `value` of the checked `MenuItemRadio`. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Visible group heading; it also names the group. */
+    label?: ReactNode;
+    /** Names the group when there is no visible `label`. */
+    'aria-label'?: string;
+    children?: ReactNode;
+}
+/** One choice out of several inside a `Menu`: wraps `MenuItemRadio` rows and holds their value (HAR-1629). */
+declare function MenuRadioGroup({ value, onValueChange, label, 'aria-label': ariaLabel, children }: MenuRadioGroupProps): react.JSX.Element;
+interface MenuItemRadioProps extends MenuItemAttributes {
+    /** Checked when it equals the surrounding `MenuRadioGroup`'s `value`. */
+    value: string;
+    /** For a radio item used without a `MenuRadioGroup`. */
+    checked?: boolean;
+    /** Runs when the item is chosen, after the group's `onValueChange`. */
+    onSelect?: () => void;
+    /** Close the menu after a click or Enter. Default `true`. Space never closes it. */
+    closeOnSelect?: boolean;
+    children?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/** A `role="menuitemradio"` row with `aria-checked` and a check mark for the current choice. */
+declare function MenuItemRadio({ value, checked, onSelect, closeOnSelect, ...rest }: MenuItemRadioProps): react.JSX.Element;
+interface MenuItemCheckboxProps extends MenuItemAttributes {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Close the menu after a click or Enter. Default `false`: several boxes are usually ticked in a row. */
+    closeOnSelect?: boolean;
+    children?: ReactNode;
+    icon?: ReactNode;
+    shortcut?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+/** A `role="menuitemcheckbox"` row with `aria-checked`; the menu stays open while boxes are ticked. */
+declare function MenuItemCheckbox({ checked, onCheckedChange, closeOnSelect, ...rest }: MenuItemCheckboxProps): react.JSX.Element;
 interface MenuGroupProps {
     label: ReactNode;
     children?: ReactNode;
@@ -48,4 +96,4 @@ interface MenuGroupProps {
 declare function MenuGroup({ label, children }: MenuGroupProps): react.JSX.Element;
 declare function MenuSeparator(): react.JSX.Element;
 
-export { Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator };
+export { Menu, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemAttributes, MenuItemCheckbox, type MenuItemCheckboxProps, type MenuItemProps, MenuItemRadio, type MenuItemRadioProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuSeparator };