@tensor_1/react 2.50.0 → 2.51.0

package/dist/components/DataWorkspace.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { UixRenderLink } from '../link.js';
 import { FilterField, FilterValue, SummarizeFilterOptions } from '../filter-model.js';
+import { PaginationLabels } from './Pagination.js';
 import { TableDensity } from './Table.js';
 import { SavedViewMenuProps, ViewMenuProps } from './TableControls.js';
 
@@ -110,6 +111,17 @@ interface DataWorkspaceIdColumn<T> {
     width?: string;
     /** The column's floor in a fixed layout. Default: the `md` column tier. */
     minWidth?: string;
+    /**
+     * The sort key the id column answers to in `sort` / `onSortChange` (HAR-2631), e.g. `title`
+     * when the id shows the title. Default `'id'`. Keep it distinct from the data columns' ids.
+     */
+    id?: string;
+    /**
+     * The id header sorts like a data column (HAR-2631): a click cycles it, Shift + click (or
+     * Shift + Enter / Space) adds it as a further key in a multi-sort, with its ordinal and
+     * `aria-sort`. Off: the header is plain, as in 2.50.0.
+     */
+    sortable?: boolean;
     renderLink?: UixRenderLink;
 }
 /** A group of rows under one header row (HAR-2625). The product computes the groups. */
@@ -125,6 +137,13 @@ interface DataWorkspaceGroup<T> {
     /** Aggregated cells in the header row, by column id (a sum, a range), each under its column. */
     aggregates?: Readonly<Record<string, ReactNode>>;
 }
+/** Where a row's actions are shown (HAR-2634), the second argument of `rowActions`. */
+interface DataWorkspaceRowActionsContext {
+    /** The ladder's step: `null` for the full table (or without `mobile`). */
+    ladder: 'cards' | 'priority' | 'priority-mid' | null;
+    /** The narrowest table step (`priority-mid`): render only the always-on control. Cards keep the full set, on a line of their own. */
+    compact: boolean;
+}
 /** Windowing for a long unpaged list (HAR-2626), over `useVirtualRows`. */
 interface DataWorkspaceVirtualize {
     /** Window only above this many rows. Default 100. */
@@ -136,7 +155,11 @@ interface DataWorkspaceVirtualize {
     /** Rows rendered beyond each edge. Default 8. */
     overscan?: number;
 }
-type DataWorkspacePagination = {
+/**
+ * The footer's pager. `labels` words the pager itself; without them it takes `UixLabelsProvider`
+ * `pagination`, then English (HAR-2631).
+ */
+type DataWorkspacePagination = ({
     mode: 'offset';
     page: number;
     pageSize: number;
@@ -155,12 +178,20 @@ type DataWorkspacePagination = {
     pageSize?: number;
     pageSizes?: readonly number[];
     onPageSizeChange?: (size: number) => void;
+}) & {
+    labels?: Partial<PaginationLabels>;
 };
 interface DataWorkspaceProps<T, S extends DataWorkspaceSortState = DataWorkspaceSort | null> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
     /** Names the workspace region and the table. */
     label: string;
     rows: readonly T[];
     getRowId: (row: T) => string;
+    /**
+     * A row's name in words, where the kit names a row (its checkbox, HAR-2632) and there is no
+     * `idColumn.text`: a title or a person, never a key. Without it the row id is used, which is
+     * a UUID on many tables. Keep it stable (`useCallback`), as rows are memoised.
+     */
+    rowLabel?: (row: T) => string;
     columns: readonly DataWorkspaceColumn<T>[];
     idColumn?: DataWorkspaceIdColumn<T>;
     /**
@@ -186,8 +217,13 @@ interface DataWorkspaceProps<T, S extends DataWorkspaceSortState = DataWorkspace
     /**
      * 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.
+     * The second argument says where the row is shown (HAR-2634): at the narrowest step of the
+     * ladder (`compact`, a workspace under 600 px with `mobile`), render only the always-on control,
+     * the peek or a kebab; the peek or the record carries the verbs. A frozen actions cell is for
+     * compact controls: word verbs (wider than a quarter of the table) unfreeze and scroll with
+     * their row, at any width.
      */
-    rowActions?: (row: T) => ReactNode;
+    rowActions?: (row: T, context: DataWorkspaceRowActionsContext) => 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;
@@ -333,6 +369,6 @@ interface DataWorkspaceProps<T, S extends DataWorkspaceSortState = DataWorkspace
  * rich id cell, multi-column sort, the product's state bodies and `beforeBody`, row groups,
  * windowing (`virtualize`) and a keyboard row model (`onRowActivate`).
  */
-declare function DataWorkspace<T, S extends DataWorkspaceSortState = DataWorkspaceSort | null>({ label, rows, getRowId, columns, idColumn, sort, onSortChange, selection, onSelectionChange, maxSelection, bulkActions, rowActions, getRowProps, density, zebra, freezeFirstColumn, fixed, mobile, search, filters, savedViews, viewMenu, viewChanged, onSaveView, onSaveViewAs, saveViewAs, maximized, onMaximizedChange, toolbarEnd, beforeBody, pagination, status, refreshing, onRetry, loadingRows, empty, emptyAction, filteredEmpty, filteredEmptyAction, error, stateOverride, groups, collapsedGroups, onCollapsedGroupsChange, virtualize, rowNavigation, onRowActivate, activateOnClick, activeRowId, onActiveRowChange, multiSort, labels: labelOverrides, className, ...props }: DataWorkspaceProps<T, S>): react.JSX.Element;
+declare function DataWorkspace<T, S extends DataWorkspaceSortState = DataWorkspaceSort | null>({ label, rows, getRowId, rowLabel, columns, idColumn, sort, onSortChange, selection, onSelectionChange, maxSelection, bulkActions, rowActions, getRowProps, density, zebra, freezeFirstColumn, fixed, mobile, search, filters, savedViews, viewMenu, viewChanged, onSaveView, onSaveViewAs, saveViewAs, maximized, onMaximizedChange, toolbarEnd, beforeBody, pagination, status, refreshing, onRetry, loadingRows, empty, emptyAction, filteredEmpty, filteredEmptyAction, error, stateOverride, groups, collapsedGroups, onCollapsedGroupsChange, virtualize, rowNavigation, onRowActivate, activateOnClick, activeRowId, onActiveRowChange, multiSort, labels: labelOverrides, className, ...props }: DataWorkspaceProps<T, S>): react.JSX.Element;
 
-export { DEFAULT_DATA_WORKSPACE_LABELS, DataWorkspace, type DataWorkspaceColumn, type DataWorkspaceGroup, type DataWorkspaceIdColumn, type DataWorkspaceLabels, type DataWorkspacePagination, type DataWorkspaceProps, type DataWorkspaceSort, type DataWorkspaceSortState, type DataWorkspaceSortValue, type DataWorkspaceVirtualize };
+export { DEFAULT_DATA_WORKSPACE_LABELS, DataWorkspace, type DataWorkspaceColumn, type DataWorkspaceGroup, type DataWorkspaceIdColumn, type DataWorkspaceLabels, type DataWorkspacePagination, type DataWorkspaceProps, type DataWorkspaceRowActionsContext, type DataWorkspaceSort, type DataWorkspaceSortState, type DataWorkspaceSortValue, type DataWorkspaceVirtualize };

package/dist/components/DataWorkspace.js

@@ -85,6 +85,7 @@ function DataWorkspace({
   label,
   rows,
   getRowId,
+  rowLabel,
   columns,
   idColumn,
   sort,
@@ -246,7 +247,11 @@ function DataWorkspace({
     onSelectionChange(apply(new Set(selected), rowIds, on));
   };
   const atCap = selected.size >= cap;
-  const actionsByRow = useMemo(() => rowActions ? shownRows.map((row) => rowActions(row)) : [], [shownRows, rowActions]);
+  const actionsByRow = useMemo(() => {
+    if (!rowActions) return [];
+    const context = { ladder, compact: ladder === "priority-mid" };
+    return shownRows.map((row) => rowActions(row, context));
+  }, [shownRows, rowActions, ladder]);
   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() ?? "") !== "";
@@ -273,7 +278,8 @@ function DataWorkspace({
     onSortChange(next);
   };
   const showSaveAs = onSaveViewAs != null && (viewChanged || saveViewAs === "always");
-  const toolbar = /* @__PURE__ */ jsxs("div", { className: "uix-toolbar uix-data-workspace__toolbar", role: "toolbar", "aria-label": label, children: [
+  const hasToolbar = savedViews != null || viewChanged && onSaveView != null || showSaveAs || filters != null || search != null || viewMenu != null || onMaximizedChange != null || toolbarEnd != null && toolbarEnd !== false;
+  const toolbar = hasToolbar && /* @__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__ */ jsxs(Fragment, { children: [
       savedViews.note != null && /* @__PURE__ */ jsx("div", { className: "uix-data-workspace__views-note", children: savedViews.note }),
       /* @__PURE__ */ jsx(SavedViewMenu, { ...savedViews.menu, onSelect: (viewId) => {
@@ -333,6 +339,7 @@ function DataWorkspace({
         collapsed,
         onToggleGroup: toggleGroupOpen,
         getRowId,
+        rowLabel,
         columns,
         idColumn,
         getRowProps,
@@ -424,6 +431,7 @@ function WorkspaceTable({
   collapsed,
   onToggleGroup,
   getRowId,
+  rowLabel,
   columns,
   idColumn,
   getRowProps,
@@ -645,20 +653,75 @@ function WorkspaceTable({
   const selectRowLabel = labels.selectRow;
   const openLabel = labels.open;
   const fixedOn = fixed && !cards;
+  const [actionsTooWide, setActionsTooWide] = useState(false);
   const [actionsWidth, setActionsWidth] = useState(null);
-  useIsomorphicLayoutEffect(() => {
-    if (!fixedOn || !hasActions) return;
-    let widest = 0;
-    for (const td of Array.from(wrapRef.current?.querySelectorAll("tbody td.uix-table__actions") ?? [])) {
+  const measureActions = !cards && hasActions;
+  const measureConfig = useRef({ measureActions, fixedOn, hasActions });
+  measureConfig.current = { measureActions, fixedOn, hasActions };
+  const measureActionsNow = useRef(() => {
+  });
+  measureActionsNow.current = () => {
+    const wrap = wrapRef.current;
+    const { measureActions: on, fixedOn: fixedNow, hasActions: any } = measureConfig.current;
+    if (!wrap) return;
+    const cells = Array.from(wrap.querySelectorAll("tbody td.uix-table__actions"));
+    if (!on) setActionsTooWide(false);
+    else {
+      let widest = 0;
+      for (const td of cells) if (typeof td.getBoundingClientRect === "function") widest = Math.max(widest, td.getBoundingClientRect().width, td.scrollWidth);
+      if (wrap.clientWidth > 0 && widest > 0) setActionsTooWide(widest > wrap.clientWidth / 4);
+    }
+    if (!fixedNow || !any || typeof document.createRange !== "function" || typeof getComputedStyle !== "function") return;
+    if (typeof document.createRange().getBoundingClientRect !== "function") return;
+    let content = 0;
+    for (const td of cells) {
       const range = document.createRange();
       range.selectNodeContents(td);
-      const content = range.getBoundingClientRect().width;
       const style = getComputedStyle(td);
-      widest = Math.max(widest, content + parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0"));
+      content = Math.max(content, range.getBoundingClientRect().width + parseFloat(style.paddingLeft || "0") + parseFloat(style.paddingRight || "0"));
     }
-    const next = widest > 0 ? Math.ceil(widest) : null;
-    if (next !== actionsWidth) setActionsWidth(next);
-  });
+    const next = content > 0 ? Math.ceil(content) : null;
+    setActionsWidth((current) => current === next ? current : next);
+  };
+  useIsomorphicLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    let frame = 0;
+    const schedule = () => {
+      if (frame || typeof requestAnimationFrame !== "function") return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        measureActionsNow.current();
+      });
+    };
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(schedule);
+    const collect = () => {
+      if (!resize) return;
+      resize.disconnect();
+      resize.observe(wrap);
+      const table = wrap.querySelector("table");
+      if (table) resize.observe(table);
+      for (const td of Array.from(wrap.querySelectorAll("tbody td.uix-table__actions"))) {
+        resize.observe(td);
+        for (const child of Array.from(td.children)) resize.observe(child);
+      }
+    };
+    collect();
+    const mutation = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
+      collect();
+      schedule();
+    });
+    mutation?.observe(wrap, { childList: true, subtree: true });
+    return () => {
+      resize?.disconnect();
+      mutation?.disconnect();
+      if (frame && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame);
+    };
+  }, []);
+  const rowSet = ids.join("\0");
+  useIsomorphicLayoutEffect(() => {
+    measureActionsNow.current();
+  }, [measureActions, fixedOn, ladder, rowSet]);
   const actionsCol = actionsWidth != null ? `${actionsWidth}px` : "5.25rem";
   const floors = fixedOn ? [
     ...selectable ? ["var(--uix-selcol-w)"] : [],
@@ -667,6 +730,32 @@ function WorkspaceTable({
     ...hasActions ? [actionsCol] : []
   ] : [];
   const tableStyle = fixedOn && floors.length ? { minWidth: floors.length === 1 ? floors[0] : `calc(${floors.join(" + ")})` } : void 0;
+  const sortProps = (column, columnSortable) => {
+    const order = keys.findIndex((key) => key.columnId === column.id);
+    const canSort = columnSortable && sortable;
+    const ordinal = keys.length > 1 && order >= 0 ? order + 1 : void 0;
+    return {
+      sortable: canSort,
+      sortDirection: sortFor(column),
+      sortOrder: ordinal,
+      sortOrderLabel: ordinal != null ? fillLabel(labels.sortPriority, { n: ordinal }) : void 0,
+      onSort: () => {
+        cycleSort(column, multi && additive.current);
+        additive.current = false;
+      },
+      ...canSort && multi ? {
+        onKeyDownCapture: (event) => {
+          if (event.key === "Enter" || event.key === " ") shiftKey.current = event.shiftKey;
+        },
+        // A click made by Enter or Space has no pointer (detail 0) and may not carry Shift itself.
+        onClickCapture: (event) => {
+          additive.current = event.shiftKey || event.detail === 0 && shiftKey.current;
+          shiftKey.current = false;
+        }
+      } : {}
+    };
+  };
+  const idSortColumn = idColumn ? { id: idColumn.id ?? "id", header: idColumn.header, cell: () => null } : null;
   const renderRow = (row, index) => {
     const rowId = ids[index];
     const isSelected = selected.has(rowId);
@@ -675,6 +764,7 @@ function WorkspaceTable({
       {
         row,
         rowId,
+        rowLabel,
         columns,
         idColumn,
         getRowProps,
@@ -769,7 +859,7 @@ function WorkspaceTable({
           density,
           zebra,
           pinnedCol: frozen,
-          pinnedActions: hasActions && !cards,
+          pinnedActions: hasActions && !cards && !actionsTooWide,
           fixed: fixedOn || void 0,
           style: tableStyle,
           className: cx(
@@ -802,36 +892,16 @@ function WorkspaceTable({
                   onChange: () => toggleMany(ids, onPage < ids.length && !atCap)
                 }
               ) }),
-              idColumn && /* @__PURE__ */ jsx(Th, { scope: "col", "data-col": ladderOn ? "id" : void 0, children: idColumn.header }),
+              idColumn && (idColumn.sortable && idSortColumn ? /* @__PURE__ */ jsx(Th, { scope: "col", "data-col": ladderOn ? "id" : void 0, ...sortProps(idSortColumn, true), children: idColumn.header }) : /* @__PURE__ */ jsx(Th, { scope: "col", "data-col": ladderOn ? "id" : void 0, children: idColumn.header })),
               columns.map((column) => {
-                const order = keys.findIndex((key) => key.columnId === column.id);
-                const canSort = column.sortable && sortable;
                 const style = !fixedOn && (column.width || column.minWidth) ? { width: column.width, minWidth: column.minWidth } : void 0;
-                const ordinal = keys.length > 1 && order >= 0 ? order + 1 : void 0;
                 return /* @__PURE__ */ jsx(
                   Th,
                   {
                     scope: "col",
                     className: cx(column.align === "end" && "uix-col--num", column.className) || void 0,
                     style,
-                    sortable: canSort,
-                    sortDirection: sortFor(column),
-                    sortOrder: ordinal,
-                    sortOrderLabel: ordinal != null ? fillLabel(labels.sortPriority, { n: ordinal }) : void 0,
-                    onSort: () => {
-                      cycleSort(column, multi && additive.current);
-                      additive.current = false;
-                    },
-                    ...canSort && multi ? {
-                      onKeyDownCapture: (event) => {
-                        if (event.key === "Enter" || event.key === " ") shiftKey.current = event.shiftKey;
-                      },
-                      // A click made by Enter or Space has no pointer (detail 0) and may not carry Shift itself.
-                      onClickCapture: (event) => {
-                        additive.current = event.shiftKey || event.detail === 0 && shiftKey.current;
-                        shiftKey.current = false;
-                      }
-                    } : {},
+                    ...sortProps(column, column.sortable === true),
                     ...ladderAttrs(ladderOn, column, false),
                     children: column.header
                   },
@@ -850,6 +920,7 @@ function WorkspaceTable({
 function WorkspaceRowInner({
   row,
   rowId,
+  rowLabel,
   columns,
   idColumn,
   getRowProps,
@@ -867,7 +938,7 @@ function WorkspaceRowInner({
   tabStop,
   handlers
 }) {
-  const text = idColumn?.text(row) ?? rowId;
+  const text = idColumn?.text(row) ?? rowLabel?.(row) ?? rowId;
   const extra = getRowProps?.(row);
   const navProps = nav ? {
     tabIndex: tabStop ? 0 : -1,
@@ -908,6 +979,7 @@ function WorkspaceRowInner({
 const WorkspaceRow = memo(WorkspaceRowInner);
 function IdCell({ row, text, idColumn, openLabel }) {
   const rich = idColumn.render ? /* @__PURE__ */ jsx("span", { className: "uix-data-workspace__id-text", children: idColumn.render(row) }) : null;
+  const label = /* @__PURE__ */ jsx("span", { className: "uix-data-workspace__id-label", children: text });
   const arrow = idColumn.href && renderUixLink(idColumn.renderLink, {
     href: idColumn.href(row),
     className: "uix-data-workspace__open",
@@ -919,18 +991,20 @@ function IdCell({ row, text, idColumn, openLabel }) {
       href: idColumn.href(row),
       className: "uix-id-cell__btn uix-data-workspace__id-link",
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        rich ?? text,
+        rich ?? label,
         /* @__PURE__ */ jsx(ArrowUpRight, {})
       ] })
     }) });
   }
   return /* @__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: rich ?? text }) : rich ?? /* @__PURE__ */ jsx("span", { className: "uix-cell-strong", children: text }),
+    idColumn.onPeek ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-id-cell__btn", "aria-haspopup": "dialog", onClick: () => idColumn.onPeek?.(row), children: rich ?? label }) : rich ?? /* @__PURE__ */ jsx("span", { className: "uix-cell-strong uix-data-workspace__id-label", children: text }),
     arrow
   ] });
 }
 const cssEscape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
 function Footer({ pagination, labels, rowCount }) {
+  const provided = useUixLabels().pagination;
+  const pagerLabels = provided || pagination.labels ? { ...provided, ...pagination.labels } : void 0;
   const sizes = pagination.pageSizes;
   const size = pagination.mode === "offset" ? pagination.pageSize : pagination.pageSize;
   const rangeText = pagination.mode === "offset" ? fillLabel(labels.range, {
@@ -945,7 +1019,7 @@ function Footer({ pagination, labels, rowCount }) {
       /* @__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 })
+    pagination.mode === "offset" ? /* @__PURE__ */ jsx(Pagination, { mode: "offset", page: pagination.page, pageCount: Math.max(1, Math.ceil(pagination.total / pagination.pageSize)), onChange: pagination.onPageChange, labels: pagerLabels }) : /* @__PURE__ */ jsx(Pagination, { mode: "cursor", hasPrevious: pagination.hasPrevious, hasNext: pagination.hasNext, onFirst: pagination.onFirst, onPrevious: pagination.onPrevious, onNext: pagination.onNext, summary: pagination.summary, labels: pagerLabels })
   ] });
 }
 function PopoverButton({ id, label, title, variant, children }) {
@@ -970,7 +1044,9 @@ function PopoverButton({ id, label, title, variant, children }) {
 }
 function ChipSummary({ field, value, options }) {
   const resolved = useResolvedFilterLabels(field, value);
-  return /* @__PURE__ */ jsx(Fragment, { children: summarizeFilter(resolved.field, resolved.value, options) });
+  const provided = useUixLabels().filterSummary;
+  const merged = provided ? { ...options, labels: { ...provided, ...options?.labels, operators: { ...provided.operators, ...options?.labels?.operators } } } : options;
+  return /* @__PURE__ */ jsx(Fragment, { children: summarizeFilter(resolved.field, resolved.value, merged) });
 }
 function openInside(root) {
   try {

package/dist/components/FilterEditor.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { TextFilterOperator, NumberFilterOperator, DateFilterOperator, FilterField, FilterValue } from '../filter-model.js';
+import { TextFilterOperator, NumberFilterOperator, DateFilterOperator, EnumFilterOperator, FilterField, FilterValue } from '../filter-model.js';
 
 interface FilterEditorLabels {
     apply: string;
@@ -35,6 +35,8 @@ interface FilterEditorLabels {
     operators: Record<TextFilterOperator | NumberFilterOperator, string>;
     /** `date` conditions (HAR-1832). Optional, like `presets`. */
     dateOperators?: Partial<Record<DateFilterOperator, string>>;
+    /** `enum` conditions (HAR-2631), when the field offers both. Optional, like `presets`. */
+    enumOperators?: Partial<Record<EnumFilterOperator, string>>;
 }
 declare const DEFAULT_FILTER_EDITOR_LABELS: FilterEditorLabels;
 interface FilterEditorProps {

package/dist/components/FilterEditor.js

@@ -12,7 +12,7 @@ import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
 import { useDelayedPending } from "../hooks/useDelayedPending.js";
 import { foldForSearch } from "../search-suggest-model.js";
-import { DATE_FILTER_OPERATORS, NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue, isUnresolvedChoice, matchFilterPreset, orderFilterRange } from "../filter-model.js";
+import { DATE_FILTER_OPERATORS, ENUM_FILTER_OPERATORS, NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue, isUnresolvedChoice, matchFilterPreset, orderFilterRange } from "../filter-model.js";
 const DEFAULT_FILTER_EDITOR_LABELS = {
   apply: "Apply",
   clear: "Clear",
@@ -38,6 +38,7 @@ const DEFAULT_FILTER_EDITOR_LABELS = {
   addTagHint: "Enter or a comma adds it.",
   date: "Date",
   dateOperators: { on: "on", before: "before", after: "after", between: "between" },
+  enumOperators: { "is-any-of": "is any of", "is-none-of": "is none of" },
   operators: {
     contains: "contains",
     "not-contains": "does not contain",
@@ -60,7 +61,8 @@ function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear
     ...provided,
     ...labelOverrides,
     operators: { ...DEFAULT_FILTER_EDITOR_LABELS.operators, ...provided?.operators, ...labelOverrides?.operators },
-    dateOperators: { ...DEFAULT_FILTER_EDITOR_LABELS.dateOperators, ...provided?.dateOperators, ...labelOverrides?.dateOperators }
+    dateOperators: { ...DEFAULT_FILTER_EDITOR_LABELS.dateOperators, ...provided?.dateOperators, ...labelOverrides?.dateOperators },
+    enumOperators: { ...DEFAULT_FILTER_EDITOR_LABELS.enumOperators, ...provided?.enumOperators, ...labelOverrides?.enumOperators }
   };
   const id = useId();
   let value = valueProp?.kind === field.kind ? valueProp : emptyFilterValue(field.kind);
@@ -163,16 +165,30 @@ function EnumBody({ field, value, onChange, labels, threshold }) {
     return q ? options.filter((o) => foldForSearch(o.label).text.includes(q)) : options;
   }, [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 ops = (field.enumOperators ?? []).filter((op) => ENUM_FILTER_OPERATORS.includes(op));
+  const condition = value.operator ?? (ops.length === 1 ? ops[0] : void 0);
+  const withValues = (values) => condition && condition !== "is-any-of" ? { kind: "enum", values, operator: condition } : { kind: "enum", values };
+  const toggle = (v, on) => onChange(withValues(on ? [...value.values, v] : value.values.filter((x) => x !== v)));
   const presets = field.presets ?? [];
   const active = matchFilterPreset(field, value);
+  const words = labels.enumOperators ?? {};
   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)) }),
+    ops.length > 1 && /* @__PURE__ */ jsx("div", { className: "uix-filter-editor__row", children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        size: "sm",
+        "aria-label": labels.operator,
+        value: value.operator ?? "is-any-of",
+        options: ops.map((op) => ({ value: op, label: words[op] ?? DEFAULT_FILTER_EDITOR_LABELS.enumOperators[op] })),
+        onValueChange: (op) => onChange(op === "is-none-of" ? { kind: "enum", values: value.values, operator: "is-none-of" } : { kind: "enum", values: value.values })
+      }
+    ) }),
+    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(withValues([...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 }) }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange({ kind: "enum", values: [.../* @__PURE__ */ new Set([...value.values, ...shown.map((o) => o.value)])] }), children: labels.selectAll }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange({ kind: "enum", values: [] }), children: labels.selectNone })
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange(withValues([.../* @__PURE__ */ new Set([...value.values, ...shown.map((o) => o.value)])])), children: labels.selectAll }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange(withValues([])), children: labels.selectNone })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "uix-filter-editor__list", children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", children: labels.noMatches }) : shown.map((o) => /* @__PURE__ */ jsx(Checkbox, { label: o.label, checked: selected.has(o.value), onChange: (e) => toggle(o.value, e.currentTarget.checked) }, o.value)) })
   ] });

package/dist/components/Table.d.ts

@@ -20,6 +20,10 @@ declare const TableWrap: react.ForwardRefExoticComponent<TableWrapProps & react.
 type TableDensity = 'compact' | 'standard' | 'comfortable';
 type SortDirection = 'ascending' | 'descending' | 'none';
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * The row height. Named, the table holds it, `standard` included, whatever the page sets
+     * `--uix-row-h` to (a density preference); left out, the table follows `--uix-row-h`.
+     */
     density?: TableDensity;
     zebra?: boolean;
     pinnedCol?: boolean;

package/dist/components/Table.js

@@ -13,7 +13,7 @@ const TableWrap = forwardRef(function TableWrap2({ announcement, refreshing, chi
   ] });
 });
 function Table({
-  density = "standard",
+  density,
   zebra = true,
   pinnedCol,
   pinnedActions,
@@ -35,7 +35,7 @@ function Table({
         fixed && "uix-table--fixed",
         className
       ),
-      "data-density": density !== "standard" ? density : void 0,
+      "data-density": density,
       "data-uix-rowpeek": rowPeek || void 0,
       "data-uix-table-v2": v2 || void 0,
       ...props,

package/dist/filter-model.d.ts

@@ -15,9 +15,15 @@ type NumberFilterOperator = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte' | 'betwee
  * `dateFilterBounds` turns each into the half-open range a query needs.
  */
 type DateFilterOperator = 'on' | 'before' | 'after' | 'between';
+/**
+ * An `enum` condition (HAR-2631): the row's value is one of the chosen values, or none of them
+ * ("status is none of Withdrawn, Lost"). Absent means `is-any-of`.
+ */
+type EnumFilterOperator = 'is-any-of' | 'is-none-of';
 type FilterValue = {
     kind: 'enum';
     values: string[];
+    operator?: EnumFilterOperator;
 } | {
     kind: 'text';
     operator: TextFilterOperator;
@@ -79,6 +85,11 @@ interface FilterField {
     operators?: readonly (TextFilterOperator | NumberFilterOperator)[];
     /** `date`: the conditions offered, in order. Default: on, before, after, between. */
     dateOperators?: readonly DateFilterOperator[];
+    /**
+     * `enum`: the conditions offered, in order (HAR-2631). Default: `is-any-of` alone, so the editor
+     * shows no condition control; with both, it shows one above the options.
+     */
+    enumOperators?: readonly EnumFilterOperator[];
     /** `number`: a unit shown after the value, e.g. "days". */
     unit?: string;
     /** `boolean`: words for true and false, e.g. Escalated / Not escalated. Default from labels. */
@@ -105,6 +116,8 @@ interface FilterSummaryLabels {
     more: string;
     /** An `enum` value equal to a preset: `{label}` (the preset), `{field}`. Default `{label}`. */
     preset?: string;
+    /** An `enum` value that excludes (`is-none-of`, HAR-2631): `{values}`. Default "not {values}" ("Status: not Open, Closed"). */
+    noneOf?: string;
     /** `date` conditions (HAR-1832), `{date}`. Default "{date}", "before {date}", "after {date}". */
     on?: string;
     before?: string;
@@ -114,6 +127,7 @@ declare const DEFAULT_FILTER_SUMMARY_LABELS: FilterSummaryLabels;
 declare const TEXT_FILTER_OPERATORS: readonly TextFilterOperator[];
 declare const NUMBER_FILTER_OPERATORS: readonly NumberFilterOperator[];
 declare const DATE_FILTER_OPERATORS: readonly DateFilterOperator[];
+declare const ENUM_FILTER_OPERATORS: readonly EnumFilterOperator[];
 /** The empty value for a field kind (what Clear resets to). */
 declare function emptyFilterValue(kind: FilterValueKind): FilterValue;
 /** True when the value filters nothing (so the chip goes away). */
@@ -165,4 +179,4 @@ interface SummarizeFilterOptions {
  */
 declare function summarizeFilter(field: FilterField, input: FilterValue | undefined, options?: SummarizeFilterOptions): string;
 
-export { DATE_FILTER_OPERATORS, DEFAULT_FILTER_SUMMARY_LABELS, type DateFilterOperator, type FilterChoice, type FilterField, type FilterPreset, type FilterSummaryLabels, type FilterValue, type FilterValueKind, NUMBER_FILTER_OPERATORS, type NumberFilterOperator, type SummarizeFilterOptions, TEXT_FILTER_OPERATORS, type TextFilterOperator, dateFilterBounds, emptyFilterValue, isFilterEmpty, isUnresolvedChoice, matchFilterPreset, orderFilterRange, resolveFilterLabels, summarizeFilter };
+export { DATE_FILTER_OPERATORS, DEFAULT_FILTER_SUMMARY_LABELS, type DateFilterOperator, ENUM_FILTER_OPERATORS, type EnumFilterOperator, type FilterChoice, type FilterField, type FilterPreset, type FilterSummaryLabels, type FilterValue, type FilterValueKind, NUMBER_FILTER_OPERATORS, type NumberFilterOperator, type SummarizeFilterOptions, TEXT_FILTER_OPERATORS, type TextFilterOperator, dateFilterBounds, emptyFilterValue, isFilterEmpty, isUnresolvedChoice, matchFilterPreset, orderFilterRange, resolveFilterLabels, summarizeFilter };

package/dist/filter-model.js

@@ -20,6 +20,7 @@ const DEFAULT_FILTER_SUMMARY_LABELS = {
   until: "until {to}",
   more: "{first} +{count}",
   preset: "{label}",
+  noneOf: "not {values}",
   on: "{date}",
   before: "before {date}",
   after: "after {date}"
@@ -27,6 +28,7 @@ const DEFAULT_FILTER_SUMMARY_LABELS = {
 const TEXT_FILTER_OPERATORS = ["contains", "not-contains", "is", "is-not", "starts-with"];
 const NUMBER_FILTER_OPERATORS = ["eq", "neq", "lt", "lte", "gt", "gte", "between"];
 const DATE_FILTER_OPERATORS = ["on", "before", "after", "between"];
+const ENUM_FILTER_OPERATORS = ["is-any-of", "is-none-of"];
 function emptyFilterValue(kind) {
   switch (kind) {
     case "enum":
@@ -108,7 +110,7 @@ async function resolveFilterLabels(field, value) {
   return { kind: "reference", values: value.values.map((v) => resolved.has(v.value) ? { value: v.value, label: resolved.get(v.value) } : v) };
 }
 function matchFilterPreset(field, value) {
-  if (value?.kind !== "enum" || !field.presets?.length) return void 0;
+  if (value?.kind !== "enum" || value.operator === "is-none-of" || !field.presets?.length) return void 0;
   const chosen = new Set(value.values);
   return field.presets.find((preset) => {
     const wanted = new Set(preset.values);
@@ -131,7 +133,10 @@ function summarizeFilter(field, input, options = {}) {
       const preset = matchFilterPreset(field, value);
       if (preset) return fill(labels.preset ?? DEFAULT_FILTER_SUMMARY_LABELS.preset, { label: preset.label, field: field.label });
       const byValue = new Map((field.options ?? []).map((o) => [o.value, o.label]));
-      return `${field.label}: ${list(value.values.map((v) => byValue.get(v) ?? v))}`;
+      const named = list(value.values.map((v) => byValue.get(v) ?? v));
+      const condition = value.operator ?? (field.enumOperators?.length === 1 ? field.enumOperators[0] : "is-any-of");
+      if (condition === "is-none-of") return `${field.label}: ${fill(labels.noneOf ?? DEFAULT_FILTER_SUMMARY_LABELS.noneOf, { values: named, field: field.label })}`;
+      return `${field.label}: ${named}`;
     }
     case "reference":
       return `${field.label}: ${list(value.values.map((v) => v.label))}`;
@@ -155,6 +160,7 @@ function summarizeFilter(field, input, options = {}) {
 export {
   DATE_FILTER_OPERATORS,
   DEFAULT_FILTER_SUMMARY_LABELS,
+  ENUM_FILTER_OPERATORS,
   NUMBER_FILTER_OPERATORS,
   TEXT_FILTER_OPERATORS,
   dateFilterBounds,