@tensor_1/react 2.49.1 → 2.51.0

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/SearchBar.d.ts

@@ -46,6 +46,8 @@ interface SearchBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit'
     labels?: Partial<SearchBarLabels>;
     /** The field's `name`. */
     name?: string;
+    /** The longest text the field takes (HAR-2622). */
+    maxLength?: number;
     /** The field's `id`, e.g. for a "/" shortcut that focuses it. Default: generated. */
     inputId?: string;
     inputRef?: Ref<HTMLInputElement>;
@@ -63,6 +65,6 @@ interface SearchBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSubmit'
  * takes Escape itself before the field (a ConfirmPopover, the table's view menu), Escape closes
  * the overlay rather than clearing the text.
  */
-declare function SearchBar({ label, value: valueProp, defaultValue, onValueChange, onSubmit, onClear, placeholder, size, submitButton, submitVariant, landmark, inputDescribedBy, labels: labelsProp, name, inputId, inputRef, autoFocus, disabled, className, ...props }: SearchBarProps): react.JSX.Element;
+declare function SearchBar({ label, value: valueProp, defaultValue, onValueChange, onSubmit, onClear, placeholder, size, submitButton, submitVariant, landmark, inputDescribedBy, labels: labelsProp, name, maxLength, inputId, inputRef, autoFocus, disabled, className, ...props }: SearchBarProps): react.JSX.Element;
 
 export { SearchBar, type SearchBarLabels, type SearchBarProps };

package/dist/components/SearchBar.js

@@ -25,6 +25,7 @@ function SearchBar({
   inputDescribedBy,
   labels: labelsProp,
   name,
+  maxLength,
   inputId,
   inputRef,
   autoFocus,
@@ -83,6 +84,7 @@ function SearchBar({
               id: fieldId,
               type: "search",
               name,
+              maxLength,
               className: "uix-input",
               value,
               placeholder,

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;
@@ -40,9 +44,14 @@ interface ThProps extends ThHTMLAttributes<HTMLTableCellElement> {
     sortDirection?: SortDirection;
     /** 1-based ordinal shown when this column is a secondary key in a multi-sort */
     sortOrder?: number;
+    /**
+     * The ordinal in words for assistive tech, e.g. "Sort priority 2" (2.50, HAR-2623). The visible
+     * ordinal is CSS content with empty alt text, so without this it is not announced at all.
+     */
+    sortOrderLabel?: string;
     onSort?: () => void;
 }
-declare function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }: ThProps): react.JSX.Element;
+declare function Th({ sortable, sortDirection, sortOrder, sortOrderLabel, onSort, className, children, onClick, ...props }: ThProps): react.JSX.Element;
 interface TdProps extends TdHTMLAttributes<HTMLTableCellElement> {
     pinned?: 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,
@@ -43,17 +43,25 @@ function Table({
     }
   );
 }
-function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }) {
+function Th({ sortable, sortDirection, sortOrder, sortOrderLabel, onSort, className, children, onClick, ...props }) {
+  const ordinal = sortOrder != null && sortOrder > 0 && sortOrderLabel ? /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: `, ${sortOrderLabel}` }) : null;
   return /* @__PURE__ */ jsx(
     "th",
     {
       className,
       "data-sort": sortable || void 0,
       "data-sort-order": sortOrder != null && sortOrder > 0 ? sortOrder : void 0,
+      "data-sort-labelled": ordinal != null || void 0,
       "aria-sort": sortDirection && sortDirection !== "none" ? sortDirection : void 0,
       onClick: sortable && onSort ? void 0 : onClick,
       ...props,
-      children: sortable ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children }) : children
+      children: sortable ? /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-th__sortbtn", onClick: onSort, children: [
+        children,
+        ordinal
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        ordinal
+      ] })
     }
   );
 }

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,