@cosmicdrift/kumiko-renderer 0.387.0 → 0.389.0

package/dist/web/primitives/data-table/use-measured-column-widths.js

@@ -0,0 +1,83 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { ACTIONS_CONTENT_ATTRIBUTE } from "./actions-column.js";
+export const COLUMN_FIELD_ATTRIBUTE = "data-column-field";
+export const EXPAND_COLUMN_WIDTH_PX = 40;
+export const SELECT_COLUMN_WIDTH_PX = 40;
+const NOT_MEASURED = { fields: {}, select: 0, expand: 0, actions: 0 };
+function roundToHundredth(value) {
+    return Math.round(value * 100) / 100;
+}
+function widthOfElement(element) {
+    return roundToHundredth(element.getBoundingClientRect().width);
+}
+function horizontalPadding(element) {
+    const style = getComputedStyle(element);
+    return (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0);
+}
+// Under a fixed table layout the actions column has no width of its own, so its
+// header cell reports the leftover space. The wrapped content gives its natural width.
+function naturalActionsWidth(headerRow, headerCell) {
+    const contents = headerRow
+        .closest("table")
+        ?.querySelectorAll(`:scope > tbody > tr > td > [${ACTIONS_CONTENT_ATTRIBUTE}]`);
+    if (contents === undefined || contents.length === 0)
+        return widthOfElement(headerCell);
+    let widest = 0;
+    for (const content of contents) {
+        const cell = content.parentElement;
+        const width = widthOfElement(content) + (cell === null ? 0 : horizontalPadding(cell));
+        widest = Math.max(widest, width);
+    }
+    return roundToHundredth(widest);
+}
+function measureHeaderRow(headerRow) {
+    const fields = {};
+    let select = 0;
+    let expand = 0;
+    let actions = 0;
+    for (const cell of headerRow.children) {
+        const field = cell.getAttribute(COLUMN_FIELD_ATTRIBUTE);
+        const testId = cell.getAttribute("data-testid");
+        if (field !== null)
+            fields[field] = widthOfElement(cell);
+        else if (testId === "column-select")
+            select = widthOfElement(cell);
+        else if (testId === "column-expand")
+            expand = widthOfElement(cell);
+        else if (testId === "column-actions")
+            actions = naturalActionsWidth(headerRow, cell);
+    }
+    return { fields, select, expand, actions };
+}
+function isSameMeasurement(a, b) {
+    if (a.select !== b.select || a.expand !== b.expand || a.actions !== b.actions)
+        return false;
+    const aKeys = Object.keys(a.fields);
+    return (aKeys.length === Object.keys(b.fields).length && aKeys.every((k) => a.fields[k] === b.fields[k]));
+}
+/** Header cell widths for sticky offsets and the fixed layout's total width; undefined while disabled. */
+export function useMeasuredColumnWidths(enabled) {
+    const headerRowRef = useRef(null);
+    const [measured, setMeasured] = useState(NOT_MEASURED);
+    // Every render: rows and columns change without a stable key, and setMeasured
+    // bails out on equal widths, so this cannot loop.
+    useLayoutEffect(() => {
+        const headerRow = headerRowRef.current;
+        // skip: disabled or not mounted yet means there is no header row to measure
+        if (!enabled || headerRow === null)
+            return;
+        const update = () => {
+            const next = measureHeaderRow(headerRow);
+            setMeasured((previous) => (isSameMeasurement(previous, next) ? previous : next));
+        };
+        update();
+        // skip: without ResizeObserver the one measurement above is all we get
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(update);
+        for (const cell of headerRow.children)
+            observer.observe(cell);
+        return () => observer.disconnect();
+    });
+    return { headerRowRef, measured: enabled ? measured : undefined };
+}

package/dist/web/primitives/data-table/use-row-keyboard-navigation.d.ts

@@ -0,0 +1,22 @@
+import { type KeyboardEvent } from "react";
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+declare const KEYBOARD_ROW_ATTRIBUTE = "data-keyboard-row";
+export declare const ROW_FOCUS_RING_CELL_CLASS = "relative after:pointer-events-none after:absolute after:inset-0 after:border-y-2 after:border-transparent group-focus-visible/row:after:border-ring";
+export type KeyboardRow = {
+    readonly props: {
+        readonly tabIndex?: number;
+        readonly onFocus?: () => void;
+        readonly onKeyDown?: (event: KeyboardEvent<HTMLTableRowElement>) => void;
+        readonly [KEYBOARD_ROW_ATTRIBUTE]?: "";
+    };
+    readonly className: string | undefined;
+};
+/** Roving tabindex over the data rows: one tab stop, arrows/Home/End move, Enter opens,
+ *  Space selects when the table has a selection column. Inactive: no attributes at all. */
+export declare function useRowKeyboardNavigation({ view, isNarrow, rowIds, onSelect, }: {
+    readonly view: DataTableViewOptions | undefined;
+    readonly isNarrow: boolean;
+    readonly rowIds: readonly string[];
+    readonly onSelect?: ((rowId: string) => void) | undefined;
+}): (rowId: string, open: (() => void) | undefined) => KeyboardRow;
+export {};

package/dist/web/primitives/data-table/use-row-keyboard-navigation.js

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { isKeyboardNavigationActive } from "./column-layout-mode.js";
+const KEYBOARD_ROW_ATTRIBUTE = "data-keyboard-row";
+const FOCUS_RING_CLASS = "group/row focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring";
+// Opaque sticky cells paint over the row outline, so they draw the top and bottom edge themselves.
+export const ROW_FOCUS_RING_CELL_CLASS = "relative after:pointer-events-none after:absolute after:inset-0 after:border-y-2 after:border-transparent group-focus-visible/row:after:border-ring";
+const INACTIVE_ROW = { props: {}, className: undefined };
+function keyboardRowsAround(row) {
+    const siblings = Array.from(row.parentElement?.children ?? []);
+    return siblings.filter((el) => el instanceof HTMLElement && el.hasAttribute(KEYBOARD_ROW_ATTRIBUTE));
+}
+function targetRow(event) {
+    const rows = keyboardRowsAround(event.currentTarget);
+    const index = rows.indexOf(event.currentTarget);
+    switch (event.key) {
+        case "ArrowDown":
+            return rows[Math.min(rows.length - 1, index + 1)];
+        case "ArrowUp":
+            return rows[Math.max(0, index - 1)];
+        case "Home":
+            return rows[0];
+        case "End":
+            return rows[rows.length - 1];
+        default:
+            return undefined;
+    }
+}
+/** Roving tabindex over the data rows: one tab stop, arrows/Home/End move, Enter opens,
+ *  Space selects when the table has a selection column. Inactive: no attributes at all. */
+export function useRowKeyboardNavigation({ view, isNarrow, rowIds, onSelect, }) {
+    const active = isKeyboardNavigationActive(view, isNarrow);
+    const [focusedId, setFocusedId] = useState(undefined);
+    const tabStopId = focusedId !== undefined && rowIds.includes(focusedId) ? focusedId : rowIds[0];
+    if (!active)
+        return () => INACTIVE_ROW;
+    return (rowId, open) => ({
+        props: {
+            tabIndex: rowId === tabStopId ? 0 : -1,
+            onFocus: () => setFocusedId(rowId),
+            onKeyDown: (event) => {
+                // skip: keys inside an editable cell, the first-cell link or a resize handle belong to that element
+                if (event.target !== event.currentTarget)
+                    return;
+                if (event.key === "Enter" && open !== undefined) {
+                    event.preventDefault();
+                    open();
+                }
+                else if (event.key === " " && onSelect !== undefined) {
+                    event.preventDefault();
+                    onSelect(rowId);
+                }
+                else {
+                    const target = targetRow(event);
+                    // skip: not a navigation key, or no row in that direction
+                    if (target === undefined)
+                        return;
+                    event.preventDefault();
+                    target.focus();
+                }
+            },
+            [KEYBOARD_ROW_ATTRIBUTE]: "",
+        },
+        className: FOCUS_RING_CLASS,
+    });
+}

package/dist/web/primitives/data-table/use-row-selection.d.ts

@@ -0,0 +1,14 @@
+import type { ListRowViewModel } from "../../../headless/index.ts";
+export type SelectAllState = "all" | "some" | "none";
+export type RowSelection = {
+    readonly selectedRows: readonly ListRowViewModel[];
+    readonly isSelected: (rowId: string) => boolean;
+    readonly isFull: boolean;
+    readonly allState: SelectAllState;
+    readonly toggle: (rowId: string) => void;
+    readonly toggleAll: () => void;
+    readonly retainOnly: (rowIds: ReadonlySet<string>) => void;
+    readonly clear: () => void;
+};
+/** Checkbox selection over the loaded rows, capped at MAX_BULK_SELECTION. Rows that leave the list leave the selection. */
+export declare function useRowSelection(rows: readonly ListRowViewModel[]): RowSelection;

package/dist/web/primitives/data-table/use-row-selection.js

@@ -0,0 +1,48 @@
+import { MAX_BULK_SELECTION } from "@cosmicdrift/kumiko-framework/ui-types";
+import { useCallback, useEffect, useMemo, useState } from "react";
+const NOTHING_SELECTED = new Set();
+function retained(previous, keep) {
+    const next = new Set([...previous].filter(keep));
+    return next.size === previous.size ? previous : next;
+}
+/** Checkbox selection over the loaded rows, capped at MAX_BULK_SELECTION. Rows that leave the list leave the selection. */
+export function useRowSelection(rows) {
+    const [selectedIds, setSelectedIds] = useState(NOTHING_SELECTED);
+    useEffect(() => {
+        // skip: an empty list is the reload gap between two fetches; pruning then would drop the failed rows a run keeps selected
+        if (rows.length === 0)
+            return;
+        const loaded = new Set(rows.map((row) => row.id));
+        setSelectedIds((previous) => retained(previous, (id) => loaded.has(id)));
+    }, [rows]);
+    const selectedRows = useMemo(() => rows.filter((row) => selectedIds.has(row.id)), [rows, selectedIds]);
+    const selectableCount = Math.min(rows.length, MAX_BULK_SELECTION);
+    const allState = selectedRows.length === 0 ? "none" : selectedRows.length >= selectableCount ? "all" : "some";
+    const toggle = useCallback((rowId) => {
+        setSelectedIds((previous) => {
+            const next = new Set(previous);
+            if (next.has(rowId))
+                next.delete(rowId);
+            else if (next.size < MAX_BULK_SELECTION)
+                next.add(rowId);
+            return next;
+        });
+    }, []);
+    const toggleAll = useCallback(() => {
+        setSelectedIds(allState === "all"
+            ? NOTHING_SELECTED
+            : new Set(rows.slice(0, MAX_BULK_SELECTION).map((row) => row.id)));
+    }, [allState, rows]);
+    const retainOnly = useCallback((rowIds) => setSelectedIds((previous) => retained(previous, (id) => rowIds.has(id))), []);
+    const clear = useCallback(() => setSelectedIds(NOTHING_SELECTED), []);
+    return {
+        selectedRows,
+        isSelected: (rowId) => selectedIds.has(rowId),
+        isFull: selectedIds.size >= MAX_BULK_SELECTION,
+        allState,
+        toggle,
+        toggleAll,
+        retainOnly,
+        clear,
+    };
+}

package/dist/web/primitives/data-table/use-view-columns.d.ts

@@ -0,0 +1,6 @@
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+/** Visibility always applies; the order only in the table layout, since the card
+ *  layout derives its title/status/meta roles from the column sequence. */
+export declare function useViewColumns<TColumn extends {
+    readonly field: string;
+}>(columns: readonly TColumn[], view: DataTableViewOptions | undefined, isNarrow: boolean): readonly TColumn[];

package/dist/web/primitives/data-table/use-view-columns.js

@@ -0,0 +1,17 @@
+import { useMemo } from "react";
+/** Visibility always applies; the order only in the table layout, since the card
+ *  layout derives its title/status/meta roles from the column sequence. */
+export function useViewColumns(columns, view, isNarrow) {
+    const viewColumns = view?.columns;
+    return useMemo(() => {
+        if (viewColumns === undefined)
+            return columns;
+        const hidden = new Set(viewColumns.filter((c) => !c.visible).map((c) => c.field));
+        const visible = columns.filter((column) => !hidden.has(column.field));
+        if (isNarrow)
+            return visible;
+        const position = new Map(viewColumns.map((c, index) => [c.field, index]));
+        const positionOf = (column) => position.get(column.field) ?? Number.MAX_SAFE_INTEGER;
+        return [...visible].sort((a, b) => positionOf(a) - positionOf(b));
+    }, [columns, viewColumns, isNarrow]);
+}

package/dist/web/primitives/data-table/view-menu.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
+/** The menu also opens for pinning or resizing alone: pins get a section, widths only the reset. */
+export declare function viewHasMenu(view: DataTableViewOptions | undefined): view is DataTableViewOptions;
+export declare function ViewMenu({ view, columnLabels, }: {
+    readonly view: DataTableViewOptions;
+    readonly columnLabels: ReadonlyMap<string, string>;
+}): ReactNode;

package/dist/web/primitives/data-table/view-menu.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Columns3 } from "lucide-react";
+import { useOptionalTranslation } from "../../../index.js";
+import { Button as UiButton } from "../../ui/button.js";
+import { SegmentedControl } from "../segmented-select.js";
+import { ColumnPickerSection } from "./column-picker-section.js";
+import { PinSection } from "./pin-section.js";
+const POPOVER_CLASS = "z-50 flex w-72 max-w-[calc(100vw-2rem)] flex-col gap-3 rounded-md border bg-popover p-3 " +
+    "text-popover-foreground shadow-md max-h-[var(--radix-popover-content-available-height)] overflow-y-auto";
+const SECTION_TITLE_CLASS = "m-0 text-xs font-medium text-muted-foreground";
+/** The menu also opens for pinning or resizing alone: pins get a section, widths only the reset. */
+export function viewHasMenu(view) {
+    if (view === undefined)
+        return false;
+    return ((view.columns !== undefined && view.onColumnsChange !== undefined) ||
+        view.onDensityChange !== undefined ||
+        view.groupBy !== undefined ||
+        (view.pins !== undefined && view.onPinsChange !== undefined) ||
+        (view.widths !== undefined && view.onWidthChange !== undefined));
+}
+export function ViewMenu({ view, columnLabels, }) {
+    const translate = useOptionalTranslation();
+    const label = (key, fallback) => translate?.(key) ?? fallback;
+    const { columns, onColumnsChange, onDensityChange, pins, onPinsChange } = view;
+    const hasColumns = columns !== undefined && onColumnsChange !== undefined;
+    if (!viewHasMenu(view))
+        return null;
+    const pinnableFields = columns !== undefined
+        ? columns.filter((column) => column.visible).map((column) => column.field)
+        : [...columnLabels.keys()];
+    return (_jsxs(PopoverPrimitive.Root, { children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-9 max-md:size-11", "aria-label": label("kumiko.list.view.menu", "View"), "data-testid": "list-view-menu", children: _jsx(Columns3, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(PopoverPrimitive.Portal, { children: _jsxs(PopoverPrimitive.Content, { align: "end", sideOffset: 4, className: POPOVER_CLASS, "data-testid": "list-view-menu-content", children: [hasColumns && (_jsxs("section", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: SECTION_TITLE_CLASS, children: label("kumiko.list.view.columns", "Columns") }), _jsx(ColumnPickerSection, { columns: columns, labels: columnLabels, onChange: onColumnsChange })] })), onDensityChange !== undefined && (_jsxs("section", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: SECTION_TITLE_CLASS, children: label("kumiko.list.view.density", "Density") }), _jsx(SegmentedControl, { id: "list-view-density", name: "list-view-density", value: view.density, onChange: (next) => onDensityChange(next === "compact" ? "compact" : "comfortable"), options: [
+                                        {
+                                            value: "comfortable",
+                                            label: label("kumiko.list.view.density.comfortable", "Comfortable"),
+                                        },
+                                        { value: "compact", label: label("kumiko.list.view.density.compact", "Compact") },
+                                    ], labelProps: { "aria-label": label("kumiko.list.view.density", "Density") } })] })), view.groupBy !== undefined && (_jsxs("section", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: SECTION_TITLE_CLASS, children: label("kumiko.list.group.by", "Group by") }), _jsx(SegmentedControl, { id: "list-view-group-by", name: "list-view-group-by", value: view.groupBy.value, onChange: view.groupBy.onChange, options: [
+                                        { value: "", label: label("kumiko.list.group.none", "None") },
+                                        ...view.groupBy.fields.map((field) => ({
+                                            value: field,
+                                            label: columnLabels.get(field) ?? field,
+                                        })),
+                                    ], labelProps: { "aria-label": label("kumiko.list.group.by", "Group by") } })] })), pins !== undefined && onPinsChange !== undefined && (_jsxs("section", { className: "flex flex-col gap-1", children: [_jsx("h3", { className: SECTION_TITLE_CLASS, children: label("kumiko.list.view.pinning", "Pinned columns") }), _jsx(PinSection, { fields: pinnableFields, labels: columnLabels, pins: pins, onChange: onPinsChange })] })), _jsx(UiButton, { type: "button", variant: "ghost", size: "sm", disabled: view.viewIsDefault, onClick: view.onViewReset, "data-testid": "list-view-reset", children: label("kumiko.list.view.reset", "Reset view") })] }) })] }));
+}

package/dist/web/primitives/data-table-cell.d.ts

@@ -1,8 +1,6 @@
 import type { SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
 import { type ReactNode } from "react";
 import type { CellLink, CellLinkItem, ListColumnFileDisplay, ListRowViewModel, RuntimeCellLink, RuntimeCellLinkItems } from "../../headless/index.ts";
-import type { DataTableSort } from "../../index.ts";
-import { type DataTableRowGrouping } from "../../index.ts";
 import "../react-css-custom-properties.ts";
 export declare function isEmptyCellValue(value: unknown): boolean;
 export declare function isUnlabeledFalse(type: string, value: unknown, renderer: unknown): boolean;
@@ -19,16 +17,6 @@ export declare function FirstCellLink({ enabled, empty, emptyLabel, onOpen, chil
     readonly children: ReactNode;
 }): ReactNode;
 export declare const FIT_CONTENT_CELL_CLASS = "w-px";
-export declare function SortableHeader({ field, label, sortable, highlighted, numeric, fitContent, sort, onSortChange, }: {
-    readonly field: string;
-    readonly label: string;
-    readonly sortable: boolean;
-    readonly highlighted?: boolean;
-    readonly numeric?: boolean;
-    readonly fitContent?: boolean;
-    readonly sort?: DataTableSort;
-    readonly onSortChange?: (next: DataTableSort | null) => void;
-}): ReactNode;
 export declare function isComponentRendererRef(renderer: unknown): {
     readonly name: string;
 } | undefined;
@@ -59,16 +47,6 @@ export declare function cellLinkProp(col: {
     readonly link?: CellLink;
     readonly linkItems?: readonly CellLinkItem[];
 };
-export type TableItem = {
-    readonly kind: "group";
-    readonly key: string;
-    readonly label: string;
-    readonly collapsed: boolean;
-} | {
-    readonly kind: "row";
-    readonly row: ListRowViewModel;
-};
-export declare function buildTableItems(rows: readonly ListRowViewModel[], grouping: DataTableRowGrouping | undefined, toggledGroups: ReadonlySet<string>): readonly TableItem[];
 export declare function rowToneClass(tone: SelectOptionTone | undefined): string;
 export declare const NUMERIC_COLUMN_TYPES: ReadonlySet<string>;
 export declare const TABULAR_COLUMN_TYPES: ReadonlySet<string>;

package/dist/web/primitives/data-table-cell.js

@@ -1,14 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PII_ERASED_SENTINEL } from "@cosmicdrift/kumiko-types/kms-adapter-types";
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-import { ArrowDown, ArrowUp, ArrowUpDown, Check } from "lucide-react";
+import { Check } from "lucide-react";
 import { Fragment } from "react";
 import { rendererWarn } from "../../dev-console.js";
 import { applyFormatSpec, EMPTY_VALUE_PLACEHOLDER, isSafeHref } from "../../headless/index.js";
 import { statusToneForOptionTone, statusToneForValue, useColumnRenderer, useOptionalPrimitives, } from "../../index.js";
-import { cn } from "../lib/cn.js";
 import { Badge } from "../ui/badge.js";
-import { TableHead } from "../ui/table.js";
 import { StatusBadge } from "../widgets/status-badge.js";
 import { FileDisplayCell } from "./file-thumbnail.js";
 import { currencyDecimals, formatMoney } from "./money-input.js";
@@ -88,41 +86,9 @@ export function FirstCellLink({ enabled, empty, emptyLabel, onOpen, children, })
             onOpen();
         }, children: empty ? _jsx("span", { className: "sr-only", children: emptyLabel }) : children }));
 }
-// SortableHeader: renders the th header per column, with or without
-// click-sort. Three paths:
-//   (a) sortable=false OR no onSortChange -> plain label, no cursor
-//       interaction (DataTable purely as a view without sort wiring).
-//   (b) sortable=true + onSortChange -> header is a button, click
-//       cycles asc -> desc -> null. aria-sort mirrors the state.
-//   (c) sortable=true in the schema but no onSortChange prop -> still
-//       label-only, but data-sortable=true stays so tests that know the
-//       schema view keep working.
 // w-px on an auto-layout table cell shrinks the column to its content (the
 // actions column relies on the same behaviour).
 export const FIT_CONTENT_CELL_CLASS = "w-px";
-export function SortableHeader({ field, label, sortable, highlighted, numeric, fitContent, sort, onSortChange, }) {
-    const active = sort?.field === field ? sort : undefined;
-    const ariaSort = active?.dir === "asc" ? "ascending" : active?.dir === "desc" ? "descending" : "none";
-    if (!sortable || onSortChange === undefined) {
-        return (_jsx(TableHead, { "data-testid": `column-${field}`, "data-sortable": sortable === true ? true : undefined, "data-highlighted": highlighted === true ? "true" : undefined, className: cn("font-medium whitespace-normal text-muted-foreground", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: label }));
-    }
-    const Icon = active?.dir === "asc" ? ArrowUp : active?.dir === "desc" ? ArrowDown : ArrowUpDown;
-    const next = nextSortState(active?.dir, field);
-    return (_jsx(TableHead, { "data-testid": `column-${field}`, "data-sortable": "true", "data-highlighted": highlighted === true ? "true" : undefined, "aria-sort": ariaSort, className: cn(active !== undefined
-            ? "font-semibold text-foreground"
-            : "font-medium text-muted-foreground", "whitespace-normal", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: _jsxs("button", { type: "button", onClick: () => onSortChange(next), className: cn("group/sort inline-flex h-8 items-center gap-1.5 rounded-sm px-2 -mx-2 text-sm [font-weight:inherit]", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active !== undefined && "text-foreground"), children: [_jsx("span", { children: label }), _jsx(Icon, { "data-sort-icon": active === undefined ? "idle" : "active", className: cn("size-3.5", active === undefined &&
-                        "opacity-0 group-hover/sort:opacity-40 group-focus-visible/sort:opacity-40"), "aria-hidden": "true" })] }) }));
-}
-// 3-state toggle: no sort -> asc -> desc -> no sort. Idiomatic for
-// power-user lists where "I want the server default order back" is a
-// real action (instead of toggling asc<->desc forever).
-function nextSortState(current, field) {
-    if (current === undefined)
-        return { field, dir: "asc" };
-    if (current === "asc")
-        return { field, dir: "desc" };
-    return null;
-}
 // Type guard for the `{ react: { __component: "Name" } }` form in which
 // PlatformComponent renderers arrive serialized in the schema. Schemas
 // travel over the wire (server -> client), real component refs would break
@@ -272,29 +238,6 @@ export function cellLinkProp(col, row, allowed) {
         ...(linkItems !== undefined && { linkItems }),
     };
 }
-export function buildTableItems(rows, grouping, toggledGroups) {
-    if (grouping === undefined)
-        return rows.map((row) => ({ kind: "row", row }));
-    const groups = new Map();
-    for (const row of rows) {
-        const key = grouping.keyOf(row);
-        const members = groups.get(key);
-        if (members === undefined)
-            groups.set(key, [row]);
-        else
-            members.push(row);
-    }
-    return [...groups].flatMap(([key, members]) => {
-        const label = grouping.headerLabel(key, members);
-        if (label === undefined)
-            return members.map((row) => ({ kind: "row", row }));
-        const collapsed = grouping.startsCollapsed(key) !== toggledGroups.has(key);
-        return [
-            { kind: "group", key, label, collapsed },
-            ...(collapsed ? [] : members.map((row) => ({ kind: "row", row }))),
-        ];
-    });
-}
 const ROW_TONE_CLASS = {
     bad: "bg-status-bad/10 hover:bg-status-bad/15",
     warn: "bg-status-warn/10 hover:bg-status-warn/15",

package/dist/web/primitives/data-table.d.ts

@@ -1,4 +1,4 @@
 import { type ReactNode } from "react";
 import { type DataTableProps } from "../../index.ts";
 import "../react-css-custom-properties.ts";
-export declare function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, emptyState, toolbarStart, toolbarDescription, toolbarEnd, pager, onReachEnd, loadingMore, hasMore, itemNoun, rowActions, rowActionMode, rowGrouping, rowTone, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, testId, onCellChange, getRowTestId, getCellTestId, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, }: DataTableProps): ReactNode;
+export declare function DefaultDataTable({ columns: schemaColumns, rows, onRowClick, sort, onSortChange, emptyState, toolbarStart, toolbarDescription, toolbarEnd, pager, onReachEnd, loadingMore, hasMore, itemNoun, rowActions, rowActionMode, bulk, rowTone, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, testId, onCellChange, getRowTestId, getCellTestId, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, view, resetAll, exportList, serverGroups, totals, notice, rangeFacets, onRangeChange, }: DataTableProps): ReactNode;