@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/ContactCard.d.ts

@@ -0,0 +1,66 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
+
+/** The words of a `ContactCard` (HAR-1379). */
+interface ContactCardLabels {
+    /** The email action's visible text. */
+    email: string;
+    /** The phone action's visible text. */
+    call: string;
+    /** The email action's accessible name; `{name}` is the contact's name. Starts with the visible text (WCAG 2.5.3). */
+    emailName: string;
+    /** The phone action's accessible name; `{name}`. */
+    callName: string;
+    /** Shown in place of the name when the person's data was erased and no name is left. */
+    purgedName: string;
+    /** The line under the name of an erased contact. */
+    purged: string;
+    /** The line under the name of a contact whose details cannot be shown (no access, or not loaded). */
+    unavailable: string;
+}
+declare const DEFAULT_CONTACT_CARD_LABELS: ContactCardLabels;
+/**
+ * `active` shows everything given. `purged`: the person's data was erased; a neutral
+ * placeholder, no details and no actions. `unavailable`: the name stays, the details and actions
+ * do not (no access, or they could not be loaded).
+ */
+type ContactCardState = 'active' | 'purged' | 'unavailable';
+interface ContactCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** The person's or the organisation's name. Leave it out for an erased contact. */
+    name?: string;
+    /** Role or relation, e.g. "Practice manager · Dom zdravlja Centar". */
+    role?: ReactNode;
+    /** An `Avatar` (size `lg` reads best). An erased contact always gets the placeholder. */
+    avatar?: ReactNode;
+    /** Shown as text and offered as a `mailto:` action. */
+    email?: string;
+    /** Shown as written and offered as a `tel:` action (spaces, dashes and brackets are dropped from the link). */
+    phone?: string;
+    /** More actions after Email and Call, e.g. a `ButtonLink` to the record. */
+    actions?: ReactNode;
+    /** Figures under the role (`.uix-contact__stats`). */
+    stats?: ReactNode;
+    /** The name as a link to the person's record. */
+    href?: string;
+    /** Your router's link for `href`. */
+    renderLink?: UixRenderLink;
+    /** The element of the name: a heading when the card stands for a section. Default `div`. */
+    nameAs?: 'h2' | 'h3' | 'h4' | 'div';
+    state?: ContactCardState;
+    /** Without the card frame, for a peek, a popover or a sidebar that is already a surface. */
+    bare?: boolean;
+    /** The words. Default: `UixLabelsProvider` `contactCard`, then English. */
+    labels?: Partial<ContactCardLabels>;
+}
+/** The digits and a leading + of a phone number, for a `tel:` link. */
+declare const telHref: (phone: string) => string;
+/**
+ * A person or an organisation at a glance (HAR-1379; MOTUS C-15, TENSOR incident people card):
+ * avatar, name, role, the email address and phone number as text, and Email / Call actions as
+ * `mailto:` / `tel:` links. An erased contact (`state="purged"`) shows a neutral placeholder
+ * and no way to reach anyone, so a purge is never undone on screen by a stale address.
+ */
+declare function ContactCard({ name, role, avatar, email, phone, actions, stats, href, renderLink, nameAs: NameTag, state, bare, labels: labelsProp, className, ...props }: ContactCardProps): react.JSX.Element;
+
+export { ContactCard, type ContactCardLabels, type ContactCardProps, type ContactCardState, DEFAULT_CONTACT_CARD_LABELS, telHref };

package/dist/components/ContactCard.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { renderUixLink } from "../link.js";
+import { ButtonLink } from "./Button.js";
+const DEFAULT_CONTACT_CARD_LABELS = {
+  email: "Email",
+  call: "Call",
+  emailName: "Email {name}",
+  callName: "Call {name}",
+  purgedName: "Removed contact",
+  purged: "Personal data erased",
+  unavailable: "Contact details unavailable"
+};
+const telHref = (phone) => {
+  const extension = /[\s,;]*(?:ext\.?|extn\.?|extension|x|#|lok(?:al)?\.?)\s*:?\s*(\d+)\s*$/i.exec(phone);
+  const number = (extension ? phone.slice(0, extension.index) : phone).trim().replace(/(?!^\+)[^\d]/g, "");
+  return `tel:${number}${extension ? `;ext=${extension[1]}` : ""}`;
+};
+const PersonGlyph = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
+] });
+function ContactCard({
+  name,
+  role,
+  avatar,
+  email,
+  phone,
+  actions,
+  stats,
+  href,
+  renderLink,
+  nameAs: NameTag = "div",
+  state = "active",
+  bare = false,
+  labels: labelsProp,
+  className,
+  ...props
+}) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_CONTACT_CARD_LABELS, ...uixLabels.contactCard, ...labelsProp };
+  const purged = state === "purged";
+  const reachable = state === "active";
+  const shownName = purged ? labels.purgedName : name ?? "";
+  const note = purged ? labels.purged : state === "unavailable" ? labels.unavailable : null;
+  const nameContent = href && !purged ? renderUixLink(renderLink, { href, children: shownName }) : shownName;
+  const hasActions = reachable && (email || phone || actions);
+  const contact = /* @__PURE__ */ jsxs("div", { className: cx("uix-contact", bare && "uix-contact--bare", bare && className), "data-state": state, ...bare ? props : {}, children: [
+    purged || avatar == null ? /* @__PURE__ */ jsx("span", { className: "uix-avatar uix-avatar--lg uix-contact__placeholder", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PersonGlyph, {}) }) : avatar,
+    /* @__PURE__ */ jsx(NameTag, { className: "uix-contact__name", children: nameContent }),
+    role != null && !purged && /* @__PURE__ */ jsx("div", { className: "uix-contact__role", children: role }),
+    note && /* @__PURE__ */ jsx("div", { className: "uix-contact__note", children: note }),
+    reachable && (email || phone) && /* @__PURE__ */ jsxs("div", { className: "uix-contact__details", children: [
+      email && /* @__PURE__ */ jsx("span", { className: "uix-contact__detail", children: email }),
+      phone && /* @__PURE__ */ jsx("span", { className: "uix-contact__detail", children: phone })
+    ] }),
+    stats != null && !purged && /* @__PURE__ */ jsx("div", { className: "uix-contact__stats", children: stats }),
+    hasActions && /* @__PURE__ */ jsxs("div", { className: "uix-contact__actions", children: [
+      email && /* @__PURE__ */ jsx(ButtonLink, { href: `mailto:${email}`, size: "sm", variant: "primary", "aria-label": fillLabel(labels.emailName, { name: shownName }), children: labels.email }),
+      phone && /* @__PURE__ */ jsx(ButtonLink, { href: telHref(phone), size: "sm", "aria-label": fillLabel(labels.callName, { name: shownName }), children: labels.call }),
+      actions
+    ] })
+  ] });
+  if (bare) return contact;
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-card", className), ...props, children: contact });
+}
+export {
+  ContactCard,
+  DEFAULT_CONTACT_CARD_LABELS,
+  telHref
+};

package/dist/components/Count.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface CountProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The number shown. */
+    value: number;
+    /**
+     * Formats the number, e.g. `n > 99 ? '99+' : String(n)` or your i18n formatter. The default is
+     * `toLocaleString()` in the runtime's locale: pass `format` when the server renders it, so the
+     * server's and the browser's thousands separators cannot differ.
+     */
+    format?: (value: number) => string;
+}
+/**
+ * A number that ticks once when it changes (HAR-2587, motion standard §2.8): a badge count, a
+ * stat tile's value, an unread total. The new figure slides 4 px in from below when it went
+ * up and from above when it went down, with a fade; never on the first render, never a loop,
+ * never a count-up through the numbers between. Tabular figures, so neighbours do not shift.
+ * Under reduced motion it only fades. It announces nothing: say what changed where it
+ * matters (a toast, `ChangeHighlight announce`).
+ */
+declare function Count({ value, format, className, ...props }: CountProps): react.JSX.Element;
+
+export { Count, type CountProps };

package/dist/components/Count.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx } from "../cx.js";
+function Count({ value, format, className, ...props }) {
+  const ref = useRef(null);
+  const previous = useRef(value);
+  useEffect(() => {
+    const before = previous.current;
+    previous.current = value;
+    const el = ref.current;
+    if (!el || Object.is(before, value) || !Number.isFinite(value) || !Number.isFinite(before)) return;
+    if (el.hasAttribute("data-uix-tick")) {
+      el.removeAttribute("data-uix-tick");
+      void el.offsetWidth;
+    }
+    el.setAttribute("data-uix-tick", value > before ? "up" : "down");
+  }, [value]);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const done = (event) => {
+      if (event.target === el) el.removeAttribute("data-uix-tick");
+    };
+    el.addEventListener("animationend", done);
+    return () => el.removeEventListener("animationend", done);
+  }, []);
+  return /* @__PURE__ */ jsx("span", { ref, className: cx("uix-count", className), ...props, children: format ? format(value) : value.toLocaleString() });
+}
+export {
+  Count
+};

package/dist/components/DashboardCanvas.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { settleDrop } from "../hooks/useKeyboardGrab.js";
 import { fillLabel } from "../fill-label.js";
 import { GripVerticalIcon, Maximize2Icon } from "../icons/components.js";
 import {
@@ -58,12 +59,25 @@ function DashboardCanvas({
   const live = useRef({ layout, onLayoutChange, labels, itemLabel });
   live.current = { layout, onLayoutChange, labels, itemLabel };
   useEffect(() => () => dragRef.current?.stop(), []);
+  const settle = useRef(null);
+  useEffect(() => {
+    const pending = settle.current;
+    if (!pending || preview) return;
+    const item = layout.find((entry) => entry.id === pending.id);
+    if (!item || item.col !== pending.col || item.row !== pending.row) {
+      if (layout !== pending.layout) settle.current = null;
+      return;
+    }
+    settle.current = null;
+    settleDrop(Array.from(gridRef.current?.children ?? []).find((el) => el.dataset.canvasId === pending.id));
+  });
   const describe = (item, kind) => kind === "move" ? fillLabel(labels.moved, { label: itemLabel(item), col: item.col + 1, row: item.row + 1 }) : fillLabel(labels.resized, { label: itemLabel(item), w: item.w, h: item.h });
   const commit = (id, placement, kind, source) => {
     const state = live.current;
     const next = placeCanvasItem(state.layout, id, placement);
     const placed = next.find((item) => item.id === id);
     if (!placed) return;
+    if (source === "pointer" && kind === "move") settle.current = { id, col: placed.col, row: placed.row, layout: state.layout };
     state.onLayoutChange?.(next, { id, kind, source });
     setAnnouncement(describe(placed, kind));
   };

package/dist/components/DataWorkspace.d.ts

@@ -0,0 +1,167 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
+import { FilterField, FilterValue, SummarizeFilterOptions } from '../filter-model.js';
+import { TableDensity } from './Table.js';
+import { SavedViewMenuProps, ViewMenuProps } from './TableControls.js';
+
+/** Every word the workspace renders or announces. `{…}` are placeholders. */
+interface DataWorkspaceLabels {
+    search: string;
+    searchPlaceholder: string;
+    addFilter: string;
+    clearFilters: string;
+    /** The saved-view trigger's name before the current view: "View: {name}". */
+    savedView: string;
+    view: string;
+    saveView: string;
+    saveViewAs: string;
+    maximize: string;
+    restore: string;
+    selectAll: string;
+    /** `{label}`: the row's id. */
+    selectRow: string;
+    /** `{count}` selected, in the bulk bar. */
+    selected: string;
+    bulkActions: string;
+    /** The record-id cell's ↗ button. `{label}`. */
+    open: string;
+    rowActions: string;
+    /** Offset footer: `{from}`, `{to}`, `{total}`. */
+    range: string;
+    rowsPerPage: string;
+    loading: string;
+    empty: string;
+    emptyDetail: string;
+    filteredEmpty: string;
+    filteredEmptyDetail: string;
+    error: string;
+    retry: string;
+}
+declare const DEFAULT_DATA_WORKSPACE_LABELS: DataWorkspaceLabels;
+interface DataWorkspaceColumn<T> {
+    id: string;
+    header: ReactNode;
+    cell: (row: T) => ReactNode;
+    sortable?: boolean;
+    /** `end` for numbers and amounts. */
+    align?: 'start' | 'end';
+    /** A CSS width for the column, e.g. `12rem`. */
+    width?: string;
+}
+interface DataWorkspaceSort {
+    columnId: string;
+    direction: 'ascending' | 'descending';
+}
+/** The record-id column: the first column, the row's way into its record. */
+interface DataWorkspaceIdColumn<T> {
+    header: ReactNode;
+    /** The id as shown, e.g. "INC-20418". Also names the row's checkbox and ↗ button. */
+    text: (row: T) => string;
+    /** The id button opens a peek of the record. */
+    onPeek?: (row: T) => void;
+    /** The ↗ link goes to the full record. */
+    href?: (row: T) => string;
+    renderLink?: UixRenderLink;
+}
+type DataWorkspacePagination = {
+    mode: 'offset';
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    pageSizes?: readonly number[];
+    onPageSizeChange?: (size: number) => void;
+} | {
+    mode: 'cursor';
+    hasPrevious: boolean;
+    hasNext: boolean;
+    onFirst?: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    summary?: ReactNode;
+    pageSize?: number;
+    pageSizes?: readonly number[];
+    onPageSizeChange?: (size: number) => void;
+};
+interface DataWorkspaceProps<T> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Names the workspace region and the table. */
+    label: string;
+    rows: readonly T[];
+    getRowId: (row: T) => string;
+    columns: readonly DataWorkspaceColumn<T>[];
+    idColumn?: DataWorkspaceIdColumn<T>;
+    sort?: DataWorkspaceSort | null;
+    onSortChange?: (sort: DataWorkspaceSort | null) => void;
+    /** The selected row ids. Kept by id, so a refresh or a new page keeps them. */
+    selection?: ReadonlySet<string>;
+    onSelectionChange?: (selection: Set<string>) => void;
+    /** The bulk bar's actions for the selection (a `Menu` for the overflow). */
+    bulkActions?: (selectedIds: string[]) => ReactNode;
+    /**
+     * A row's actions (a `Menu`, quick buttons), in a column frozen at the right edge and sized to
+     * them. Return `null` for a row without actions; with none on the page there is no column.
+     */
+    rowActions?: (row: T) => ReactNode;
+    /** More props for a row, e.g. a data attribute that marks it changed (see ChangeHighlight, PR #164). */
+    getRowProps?: (row: T) => HTMLAttributes<HTMLTableRowElement> & Record<`data-${string}`, string | undefined>;
+    density?: TableDensity;
+    /**
+     * Toolbar: the search field. Ctrl/⌘ + / focuses it from inside the workspace, or from the page
+     * when nothing has focus and this is the page's first workspace.
+     */
+    search?: {
+        value: string;
+        onChange: (value: string) => void;
+        label?: string;
+        placeholder?: string;
+    };
+    /**
+     * Toolbar: filter chips and "+ Filter" over `FilterEditor`. A chip whose value holds ids
+     * restored from a URL or saved view asks `field.resolveLabels` for their names.
+     */
+    filters?: {
+        fields: readonly FilterField[];
+        values: Readonly<Record<string, FilterValue | undefined>>;
+        onChange: (fieldId: string, value: FilterValue | undefined) => void;
+        /** Rows matching each filter, shown on its chip. */
+        counts?: Readonly<Record<string, number>>;
+        summary?: SummarizeFilterOptions;
+    };
+    /** Toolbar: the saved-view trigger, named by the current view, opening a `SavedViewMenu`. */
+    savedViews?: {
+        current: ReactNode;
+        menu: SavedViewMenuProps;
+    };
+    /** Toolbar: the View button, opening a `ViewMenu` (columns, density). */
+    viewMenu?: ViewMenuProps;
+    /** The view differs from its saved version: Save changes and Save as show. */
+    viewChanged?: boolean;
+    onSaveView?: () => void;
+    onSaveViewAs?: () => void;
+    /** Toolbar: a maximize toggle; Escape restores, unless an open popover or menu takes it first. */
+    maximized?: boolean;
+    onMaximizedChange?: (maximized: boolean) => void;
+    /** Toolbar: the product's own actions at the end ("New incident"). */
+    toolbarEnd?: ReactNode;
+    pagination?: DataWorkspacePagination;
+    /** `loading`: the first load (skeleton rows). `error`: with `onRetry`. */
+    status?: 'ready' | 'loading' | 'error';
+    /** A refetch (filter, sort, page, saved view): the rows stay under `TableWrap refreshing`. */
+    refreshing?: boolean;
+    onRetry?: () => void;
+    labels?: Partial<DataWorkspaceLabels>;
+}
+/**
+ * The generic presentation half of a product's data table (HAR-1388; TENSOR `data-table.tsx`,
+ * MOTUS `UixDataWorkspace.tsx`; UIx ADR-0005). Composes the kit's pieces in one order: saved
+ * view · Save changes / Save as (when the view changed) · filter chips and "+ Filter" ·
+ * search (Ctrl/⌘ + /) · View · maximize · the product's actions; a `Table` with a record-id cell (id → peek, ↗ → record),
+ * selection with Shift-click ranges, a frozen row-actions column and a `BulkBar`; an "x–y of N"
+ * footer with rows per page and `Pagination` (offset or cursor); first-load, empty,
+ * filtered-empty and error states, and a refetch that keeps the rows. Prop-driven: the product
+ * keeps its surface registry, URL state, data fetching and permissions.
+ */
+declare function DataWorkspace<T>({ label, rows, getRowId, columns, idColumn, sort, onSortChange, selection, onSelectionChange, bulkActions, rowActions, getRowProps, density, search, filters, savedViews, viewMenu, viewChanged, onSaveView, onSaveViewAs, maximized, onMaximizedChange, toolbarEnd, pagination, status, refreshing, onRetry, labels: labelOverrides, className, ...props }: DataWorkspaceProps<T>): react.JSX.Element;
+
+export { DEFAULT_DATA_WORKSPACE_LABELS, DataWorkspace, type DataWorkspaceColumn, type DataWorkspaceIdColumn, type DataWorkspaceLabels, type DataWorkspacePagination, type DataWorkspaceProps, type DataWorkspaceSort };