@marinoscar/platform-web 0.1.0-next.3 → 0.1.0-next.4

package/dist/datatable/ui/export/DataTableExportControl.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * DataTable — the CSV export control (issue #256, epic #238).
+ *
+ * Lives in the view bar next to the column picker and the density toggle, for
+ * the same reason those do: its SHAPE is decided by the layout, not by how
+ * rows are presented.
+ *
+ * | layout    | surface                                                        |
+ * | --------- | -------------------------------------------------------------- |
+ * | `desktop` | an "Export" button — a menu when an all-rows fetch is supplied  |
+ * | `tablet`  | identical                                                       |
+ * | `mobile`  | a `MoreVert` **overflow menu** ("Table actions")                |
+ *
+ * The phone gets an overflow menu rather than a third button because the view
+ * bar there already holds "View" and the filter surface's "Filters"; a fourth
+ * labelled control at 360px is what pushes a row into a horizontal scroller.
+ *
+ * ## Two scopes, one of them optional
+ *
+ * - **Current page** — always available. Serializes the rows the table was
+ *   handed, which are already filtered/sorted/paginated by the server.
+ * - **All matching rows** — only when the page supplies `fetchAllRows`. The
+ *   component cannot know the endpoint, so it replays the page's OWN callback
+ *   with the page's OWN active filters, bounded at
+ *   {@link DATA_TABLE_EXPORT_MAX_ROWS} and cancellable.
+ *
+ * Neither scope ever re-queries with elevated access: the second one is the
+ * first one's fetch, run more times.
+ *
+ * Touch rules apply as everywhere else: ≥44px, nothing hover-revealed,
+ * and the menu/dialog are mounted only while open.
+ */
+import { useCallback, useRef, useState } from 'react';
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton, LinearProgress, ListItemIcon, ListItemText, Menu, MenuItem, Tooltip, } from '@mui/material';
+import DownloadIcon from '@mui/icons-material/Download';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import TableRowsIcon from '@mui/icons-material/TableRows';
+import StorageIcon from '@mui/icons-material/Storage';
+import { DATA_TABLE_EXPORT_MAX_ROWS, ExportCancelledError, buildCsvForRows, collectAllRows, downloadCsv, exportFilename, } from '../../headless/export/exportModel.js';
+/** Every control here clears the 44px touch floor. */
+const TOUCH_TARGET = { minWidth: 44, minHeight: 44 };
+/**
+ * The CSV export control: export the rows on screen, or every row the server holds.
+ *
+ * @param props - the columns, the export config and the layout.
+ * @returns the control element.
+ *
+ * @stability experimental
+ */
+export function DataTableExportControl({ layout, columns, rows, visibleColumnIds, config, filenameBase, total, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [progress, setProgress] = useState(null);
+    const abortRef = useRef(null);
+    const fetchAllRows = config?.fetchAllRows;
+    const maxRows = config?.maxRows ?? DATA_TABLE_EXPORT_MAX_ROWS;
+    const fetchPageSize = config?.fetchPageSize;
+    const nameSeed = config?.filename ?? filenameBase;
+    const filename = useCallback(() => exportFilename(nameSeed), [nameSeed]);
+    const nothingToExport = rows.length === 0 && !fetchAllRows;
+    const closeMenu = () => setAnchorEl(null);
+    const exportCurrentPage = useCallback(() => {
+        closeMenu();
+        downloadCsv(buildCsvForRows(columns, rows, visibleColumnIds), filename());
+    }, [columns, rows, visibleColumnIds, filename]);
+    const exportAllRows = useCallback(async () => {
+        closeMenu();
+        if (!fetchAllRows)
+            return;
+        const controller = new AbortController();
+        abortRef.current = controller;
+        setProgress({ phase: 'running', fetched: 0, capped: false });
+        try {
+            const { rows: all, capped } = await collectAllRows({
+                fetchPage: fetchAllRows,
+                pageSize: fetchPageSize,
+                maxRows,
+                signal: controller.signal,
+                onProgress: (fetched) => setProgress((current) => current?.phase === 'running' ? { ...current, fetched } : current),
+            });
+            downloadCsv(buildCsvForRows(columns, all, visibleColumnIds), filename());
+            // A clean, complete export needs no acknowledgement — the file is the
+            // feedback. A capped one does: the user must know the CSV is a prefix.
+            if (capped)
+                setProgress({ phase: 'done', fetched: all.length, capped: true });
+            else
+                setProgress(null);
+        }
+        catch (error) {
+            if (error instanceof ExportCancelledError || controller.signal.aborted) {
+                setProgress(null);
+                return;
+            }
+            setProgress({
+                phase: 'error',
+                fetched: 0,
+                capped: false,
+                error: error instanceof Error ? error.message : 'Export failed',
+            });
+        }
+        finally {
+            abortRef.current = null;
+        }
+    }, [fetchAllRows, columns, visibleColumnIds, maxRows, fetchPageSize, filename]);
+    const cancelExport = () => {
+        abortRef.current?.abort();
+        abortRef.current = null;
+        setProgress(null);
+    };
+    // With no all-rows callback there is exactly one thing to do, so the desktop
+    // button does it directly — a one-item menu is a click nobody needs.
+    const directExport = !fetchAllRows && layout !== 'mobile';
+    const trigger = layout === 'mobile' ? (_jsx(Tooltip, { title: "Table actions", children: _jsx("span", { children: _jsx(IconButton, { size: "small", onClick: (event) => setAnchorEl(event.currentTarget), "aria-haspopup": "menu", "aria-expanded": Boolean(anchorEl), "aria-label": "Table actions", "data-testid": "datatable-overflow-button", disabled: nothingToExport, sx: TOUCH_TARGET, children: _jsx(MoreVertIcon, {}) }) }) })) : (_jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx(DownloadIcon, {}), onClick: (event) => (directExport ? exportCurrentPage() : setAnchorEl(event.currentTarget)), ...(directExport
+            ? {}
+            : { 'aria-haspopup': 'menu', 'aria-expanded': Boolean(anchorEl) }), "aria-label": "Export CSV", "data-testid": "datatable-export-button", disabled: nothingToExport, sx: { minHeight: 44, flex: '0 0 auto' }, children: "Export" }));
+    return (_jsxs(_Fragment, { children: [trigger, !directExport && (_jsxs(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: closeMenu, slotProps: { list: { 'aria-label': 'Export options' } }, "data-testid": "datatable-export-menu", children: [_jsxs(MenuItem, { onClick: exportCurrentPage, disabled: rows.length === 0, "data-testid": "datatable-export-current-page", sx: { minHeight: 44 }, children: [_jsx(ListItemIcon, { sx: { minWidth: 36 }, children: _jsx(TableRowsIcon, { fontSize: "small" }) }), _jsx(ListItemText, { primary: "Export current page (CSV)", secondary: `${rows.length} ${rows.length === 1 ? 'row' : 'rows'}` })] }), fetchAllRows && (_jsxs(MenuItem, { onClick: exportAllRows, "data-testid": "datatable-export-all-rows", sx: { minHeight: 44 }, children: [_jsx(ListItemIcon, { sx: { minWidth: 36 }, children: _jsx(StorageIcon, { fontSize: "small" }) }), _jsx(ListItemText, { primary: "Export all matching rows (CSV)", secondary: `up to ${maxRows.toLocaleString()} rows` })] }))] })), _jsxs(Dialog, { open: progress !== null, onClose: progress?.phase === 'running' ? undefined : () => setProgress(null), "aria-labelledby": "datatable-export-progress-title", "data-testid": "datatable-export-progress", fullWidth: true, maxWidth: "xs", children: [_jsx(DialogTitle, { id: "datatable-export-progress-title", children: progress?.phase === 'error' ? 'Export failed' : 'Exporting…' }), _jsxs(DialogContent, { children: [progress?.phase === 'running' && (_jsxs(_Fragment, { children: [_jsxs(DialogContentText, { "data-testid": "datatable-export-progress-text", children: [progress.fetched.toLocaleString(), " rows fetched", total ? ` of ${Math.min(total, maxRows).toLocaleString()}` : '', "\u2026"] }), _jsx(LinearProgress, { sx: { mt: 2 }, ...(total
+                                            ? {
+                                                variant: 'determinate',
+                                                value: Math.min(100, Math.round((progress.fetched / Math.max(1, Math.min(total, maxRows))) * 100)),
+                                            }
+                                            : { variant: 'indeterminate' }), "aria-label": "Export progress" })] })), progress?.phase === 'done' && progress.capped && (_jsxs(Alert, { severity: "warning", "data-testid": "datatable-export-capped", children: ["This export stopped at the ", maxRows.toLocaleString(), "-row limit. The file contains the first ", progress.fetched.toLocaleString(), " matching rows \u2014 narrow the filters to export the rest."] })), progress?.phase === 'error' && (_jsx(Alert, { severity: "error", "data-testid": "datatable-export-error", children: progress.error }))] }), _jsx(DialogActions, { children: progress?.phase === 'running' ? (_jsx(Button, { onClick: cancelExport, sx: { minHeight: 44 }, children: "Cancel" })) : (_jsx(Button, { onClick: () => setProgress(null), sx: { minHeight: 44 }, children: "Close" })) })] })] }));
+}
+//# sourceMappingURL=DataTableExportControl.js.map

package/dist/datatable/ui/export/DataTableExportControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableExportControl.js","sourceRoot":"","sources":["../../../../src/datatable/ui/export/DataTableExportControl.tsx"],"names":[],"mappings":"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"}

package/dist/datatable/ui/filter/DataTableFilterBar.d.ts

@@ -0,0 +1,64 @@
+/**
+ * DataTable — the filter surface, one component per layout.
+ *
+ * Drawn by `DataTable` itself, above whichever renderer is active, for two
+ * reasons: the shape of this control is decided by the LAYOUT rather than by
+ * how rows are presented, and a renderer that owned the open/draft state would
+ * throw it away on every resize — state lives above the renderers.
+ *
+ * | layout    | filter surface                                              |
+ * | --------- | ----------------------------------------------------------- |
+ * | `desktop` | an always-visible filter ROW above the grid                  |
+ * | `tablet`  | the same row, collapsed behind a "Filters" button + count    |
+ * | `mobile`  | a FULL-SCREEN sheet; chips become a scrollable strip         |
+ *
+ * The phone case is a sheet rather than a squeezed-down inline row for the same
+ * reason the card list exists at all: a three-control form at 360px is either
+ * unusable or pushes the page sideways. A sheet gets the full screen, the
+ * stacked form, and a real focus trap.
+ *
+ * Filtering is SERVER-SIDE, always. Nothing here touches `rows`; every gesture
+ * produces a new normalized model and hands it to the page.
+ */
+import type { DataTableColumn, DataTableFilterModel, DataTableLayout, DataTableQuickSearchConfig } from '../../headless/types.js';
+/**
+ * Class on the tablet/phone "Filters" badge, so its count is assertable.
+ *
+ * @stability experimental
+ */
+export declare const FILTER_COUNT_CLASS = "datatable-filter-count";
+/**
+ * Props of {@link DataTableFilterBar}.
+ *
+ * @stability experimental
+ */
+export interface DataTableFilterBarProps<Row> {
+    /** The table's column definitions. */
+    columns: DataTableColumn<Row>[];
+    /** The resolved layout. */
+    layout: DataTableLayout;
+    /** The filters in force. */
+    filters: DataTableFilterModel;
+    /** Called with the new filter model. */
+    onFiltersChange?: (next: DataTableFilterModel) => void;
+    /** The quick-search config; absent turns the search box off. */
+    quickSearch?: DataTableQuickSearchConfig;
+    /**
+     * Total matching rows across all pages, when the page knows it —
+     * `pagination.total`. Drives the "Filtered to N results" live-region
+     * announcement (issue #257); omit and the region simply stays silent, since
+     * there is nothing truthful to say about a query the page never reports a
+     * total for.
+     */
+    resultCount?: number;
+}
+/**
+ * The filter bar: quick search, the filter editor and the chips of the filters in force.
+ *
+ * @param props - the columns, the filter model and its change callback.
+ * @returns the bar element.
+ *
+ * @stability experimental
+ */
+export declare function DataTableFilterBar<Row>({ columns, layout, filters, onFiltersChange, quickSearch, resultCount, }: DataTableFilterBarProps<Row>): import("react").JSX.Element | null;
+//# sourceMappingURL=DataTableFilterBar.d.ts.map

package/dist/datatable/ui/filter/DataTableFilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFilterBar.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/filter/DataTableFilterBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAmBH,OAAO,KAAK,EACV,eAAe,EAEf,oBAAoB,EACpB,eAAe,EACf,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AAOjC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,2BAA2B,CAAC;AAE3D;;;;GAIG;AACH,MAAM,WAAW,uBAAuB,CAAC,GAAG;IAC1C,sCAAsC;IACtC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,2BAA2B;IAC3B,MAAM,EAAE,eAAe,CAAC;IACxB,4BAA4B;IAC5B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,wCAAwC;IACxC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,gEAAgE;IAChE,WAAW,CAAC,EAAE,0BAA0B,CAAC;IACzC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,EACtC,OAAO,EACP,MAAM,EACN,OAAO,EACP,eAAe,EACf,WAAW,EACX,WAAW,GACZ,EAAE,uBAAuB,CAAC,GAAG,CAAC,sCA+M9B"}

package/dist/datatable/ui/filter/DataTableFilterBar.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — the filter surface, one component per layout.
+ *
+ * Drawn by `DataTable` itself, above whichever renderer is active, for two
+ * reasons: the shape of this control is decided by the LAYOUT rather than by
+ * how rows are presented, and a renderer that owned the open/draft state would
+ * throw it away on every resize — state lives above the renderers.
+ *
+ * | layout    | filter surface                                              |
+ * | --------- | ----------------------------------------------------------- |
+ * | `desktop` | an always-visible filter ROW above the grid                  |
+ * | `tablet`  | the same row, collapsed behind a "Filters" button + count    |
+ * | `mobile`  | a FULL-SCREEN sheet; chips become a scrollable strip         |
+ *
+ * The phone case is a sheet rather than a squeezed-down inline row for the same
+ * reason the card list exists at all: a three-control form at 360px is either
+ * unusable or pushes the page sideways. A sheet gets the full screen, the
+ * stacked form, and a real focus trap.
+ *
+ * Filtering is SERVER-SIDE, always. Nothing here touches `rows`; every gesture
+ * produces a new normalized model and hands it to the page.
+ */
+import { useMemo, useState } from 'react';
+import { AppBar, Badge, Box, Button, Dialog, DialogContent, Divider, IconButton, Stack, Toolbar, Typography, } from '@mui/material';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import CloseIcon from '@mui/icons-material/Close';
+import { visuallyHidden } from '../shared/visuallyHidden.js';
+import { filterableColumns } from '../../headless/filter/operators.js';
+import { addFilter, draftFilterFor, removeFilterAt } from '../../headless/filter/filterModel.js';
+import { FilterEditor } from './FilterEditor.js';
+import { FilterChips } from './FilterChips.js';
+import { QuickSearchField } from './QuickSearchField.js';
+/**
+ * Class on the tablet/phone "Filters" badge, so its count is assertable.
+ *
+ * @stability experimental
+ */
+export const FILTER_COUNT_CLASS = 'datatable-filter-count';
+/**
+ * The filter bar: quick search, the filter editor and the chips of the filters in force.
+ *
+ * @param props - the columns, the filter model and its change callback.
+ * @returns the bar element.
+ *
+ * @stability experimental
+ */
+export function DataTableFilterBar({ columns, layout, filters, onFiltersChange, quickSearch, resultCount, }) {
+    const filterable = useMemo(() => filterableColumns(columns), [columns]);
+    const filteringEnabled = filterable.length > 0 && Boolean(onFiltersChange);
+    const [open, setOpen] = useState(false);
+    const [draft, setDraft] = useState(null);
+    // A draft whose column has disappeared (columns are a prop and can change)
+    // would render an editor pointed at nothing, so it is re-seeded rather than
+    // trusted.
+    const activeDraft = useMemo(() => {
+        if (filterable.length === 0)
+            return null;
+        if (draft && filterable.some((column) => column.id === draft.columnId))
+            return draft;
+        return draftFilterFor(filterable[0]);
+    }, [draft, filterable]);
+    if (!filteringEnabled && !quickSearch)
+        return null;
+    // "Filtered to 12 results" (issue #257) — only spoken when there is an
+    // active filter or search term AND the page told us a real result count.
+    // Silent otherwise: a table with nothing applied has nothing to announce,
+    // and a count we do not actually know would be a lie a screen reader user
+    // has no way to double-check.
+    const hasActiveQuery = filters.length > 0 || Boolean(quickSearch?.value);
+    const resultAnnouncement = hasActiveQuery && resultCount != null
+        ? `Filtered to ${resultCount.toLocaleString()} ${resultCount === 1 ? 'result' : 'results'}`
+        : '';
+    const emit = (next) => onFiltersChange?.(next);
+    const commitDraft = (filter) => {
+        emit(addFilter(filters, filter));
+        // Reset to a blank draft so the form is immediately ready for the next
+        // filter instead of re-offering the one just applied.
+        setDraft(draftFilterFor(filterable[0]));
+    };
+    const removeAt = (index) => emit(removeFilterAt(filters, index));
+    const clearAll = () => emit([]);
+    const editor = activeDraft ? (_jsx(FilterEditor, { columns: filterable, draft: activeDraft, onDraftChange: setDraft, onCommit: commitDraft, orientation: layout === 'mobile' ? 'stacked' : 'row' })) : null;
+    const filtersButton = (_jsx(Badge, { color: "primary", badgeContent: filters.length, 
+        // MUI's slot props are strictly typed and reject `data-*`; `className` is
+        // a first-class slot prop, so the count bubble stays queryable without a
+        // cast. The button's accessible name carries the same count in words.
+        slotProps: { badge: { className: FILTER_COUNT_CLASS } }, sx: { flex: '0 0 auto' }, children: _jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx(FilterListIcon, {}), onClick: () => setOpen((current) => !current), "aria-expanded": open, "aria-haspopup": layout === 'mobile' ? 'dialog' : undefined, "aria-label": filters.length > 0 ? `Filters (${filters.length} active)` : 'Filters', "data-testid": "datatable-filter-toggle", sx: { minHeight: 44 }, children: "Filters" }) }));
+    return (_jsxs(Box, { "data-testid": "datatable-filter-bar", "data-filter-surface": layout, sx: { width: '100%', maxWidth: '100%', minWidth: 0, mb: 1.5 }, children: [_jsx(Box, { "aria-live": "polite", role: "status", "data-testid": "datatable-filter-live-region", sx: visuallyHidden, children: resultAnnouncement }), _jsxs(Stack, { direction: layout === 'mobile' ? 'column' : 'row', spacing: 1, useFlexGap: true, sx: {
+                    alignItems: layout === 'mobile' ? 'stretch' : 'center',
+                    flexWrap: 'wrap',
+                    minWidth: 0,
+                }, children: [quickSearch && (_jsx(QuickSearchField, { config: quickSearch, columns: columns, fullWidth: layout !== 'desktop' })), filteringEnabled && layout === 'desktop' && editor, filteringEnabled && layout !== 'desktop' && filtersButton] }), filteringEnabled && layout === 'tablet' && open && (_jsx(Box, { sx: { mt: 1.5 }, "data-testid": "datatable-filter-panel", children: editor })), filteringEnabled && (_jsx(FilterChips, { filters: filters, columns: columns, onRemove: removeAt, onClearAll: clearAll, variant: layout === 'mobile' ? 'strip' : 'wrap' })), filteringEnabled && layout === 'mobile' && (_jsxs(Dialog, { fullScreen: true, open: open, onClose: () => setOpen(false), "aria-labelledby": "datatable-filter-sheet-title", children: [_jsx(AppBar, { position: "relative", color: "default", elevation: 0, children: _jsxs(Toolbar, { sx: { gap: 1 }, children: [_jsx(Typography, { id: "datatable-filter-sheet-title", variant: "h6", component: "h2", sx: { flexGrow: 1 }, children: "Filters" }), _jsx(IconButton, { edge: "end", "aria-label": "Close filters", onClick: () => setOpen(false), sx: { minWidth: 44, minHeight: 44 }, children: _jsx(CloseIcon, {}) })] }) }), _jsx(Divider, {}), _jsxs(DialogContent, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [editor, filters.length > 0 && (_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 0.5 }, children: "Active filters" }), _jsx(FilterChips, { filters: filters, columns: columns, onRemove: removeAt, onClearAll: clearAll, variant: "wrap" })] })), _jsx(Box, { sx: { flexGrow: 1 } }), _jsx(Button, { variant: "contained", fullWidth: true, onClick: () => setOpen(false), sx: { minHeight: 44 }, children: "Done" })] })] }))] }));
+}
+//# sourceMappingURL=DataTableFilterBar.js.map

package/dist/datatable/ui/filter/DataTableFilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableFilterBar.js","sourceRoot":"","sources":["../../../../src/datatable/ui/filter/DataTableFilterBar.tsx"],"names":[],"mappings":"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"}

package/dist/datatable/ui/filter/FilterChips.d.ts

@@ -0,0 +1,55 @@
+/**
+ * DataTable — active filters, as removable chips.
+ *
+ * The chip strip is the only always-visible statement of *why* the table shows
+ * what it shows. It is present in all three layouts because a filtered table
+ * with no visible filter is the single most common way a user concludes their
+ * data is missing.
+ *
+ * ## The one place a horizontal scroller is correct
+ *
+ * On a phone the strip scrolls sideways (`variant="strip"`) rather than
+ * wrapping onto four lines above a card list. That does not contradict the
+ * "the document must never scroll horizontally" rule — that rule is about a
+ * table accidentally pushing the BODY wide. This is an explicit, discoverable,
+ * self-contained control that owns its own overflow, and it is exactly what
+ * issue #254 asks for.
+ *
+ * ## Chip keyboard semantics
+ *
+ * A MUI `Chip` with `onDelete` is itself focusable and responds to
+ * Backspace/Delete — that is the library's a11y contract and the reason the
+ * delete icon is not separately tabbable (it would double every tab stop). The
+ * icon still carries an `aria-label` so the pointer target has a name.
+ */
+import type { DataTableColumn, DataTableFilterModel } from '../../headless/types.js';
+/**
+ * Props of {@link FilterChips}.
+ *
+ * @stability experimental
+ */
+export interface FilterChipsProps<Row> {
+    /** The filters in force. */
+    filters: DataTableFilterModel;
+    /** The table's column definitions. */
+    columns: DataTableColumn<Row>[];
+    /** Called with the position of the filter to remove. */
+    onRemove: (index: number) => void;
+    /** Called when the user clears every filter. */
+    onClearAll?: () => void;
+    /**
+     * `'wrap'` — chips flow onto multiple lines (desktop / tablet).
+     * `'strip'` — one line, horizontally scrollable (phone).
+     */
+    variant?: 'wrap' | 'strip';
+}
+/**
+ * The chips of the filters in force, each removable.
+ *
+ * @param props - the filters, the columns and the callbacks.
+ * @returns the chips element.
+ *
+ * @stability experimental
+ */
+export declare function FilterChips<Row>({ filters, columns, onRemove, onClearAll, variant, }: FilterChipsProps<Row>): import("react").JSX.Element | null;
+//# sourceMappingURL=FilterChips.d.ts.map

package/dist/datatable/ui/filter/FilterChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/filter/FilterChips.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGrF;;;;GAIG;AACH,MAAM,WAAW,gBAAgB,CAAC,GAAG;IACnC,4BAA4B;IAC5B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,sCAAsC;IACtC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,EAC/B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAgB,GACjB,EAAE,gBAAgB,CAAC,GAAG,CAAC,sCAuEvB"}

package/dist/datatable/ui/filter/FilterChips.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — active filters, as removable chips.
+ *
+ * The chip strip is the only always-visible statement of *why* the table shows
+ * what it shows. It is present in all three layouts because a filtered table
+ * with no visible filter is the single most common way a user concludes their
+ * data is missing.
+ *
+ * ## The one place a horizontal scroller is correct
+ *
+ * On a phone the strip scrolls sideways (`variant="strip"`) rather than
+ * wrapping onto four lines above a card list. That does not contradict the
+ * "the document must never scroll horizontally" rule — that rule is about a
+ * table accidentally pushing the BODY wide. This is an explicit, discoverable,
+ * self-contained control that owns its own overflow, and it is exactly what
+ * issue #254 asks for.
+ *
+ * ## Chip keyboard semantics
+ *
+ * A MUI `Chip` with `onDelete` is itself focusable and responds to
+ * Backspace/Delete — that is the library's a11y contract and the reason the
+ * delete icon is not separately tabbable (it would double every tab stop). The
+ * icon still carries an `aria-label` so the pointer target has a name.
+ */
+import { Box, Button, Chip } from '@mui/material';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { filterChipLabel, filterKey } from '../../headless/filter/filterModel.js';
+/**
+ * The chips of the filters in force, each removable.
+ *
+ * @param props - the filters, the columns and the callbacks.
+ * @returns the chips element.
+ *
+ * @stability experimental
+ */
+export function FilterChips({ filters, columns, onRemove, onClearAll, variant = 'wrap', }) {
+    if (filters.length === 0)
+        return null;
+    const strip = variant === 'strip';
+    return (_jsxs(Box, { "data-testid": strip ? 'datatable-filter-chip-strip' : 'datatable-filter-chips', role: "list", "aria-label": "Active filters", sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            minWidth: 0,
+            maxWidth: '100%',
+            mt: 1,
+            ...(strip
+                ? {
+                    flexWrap: 'nowrap',
+                    overflowX: 'auto',
+                    // Scrolling is the point here; keep the momentum feel on iOS and
+                    // stop the strip from stealing vertical scroll.
+                    WebkitOverflowScrolling: 'touch',
+                    overscrollBehaviorX: 'contain',
+                    pb: 0.5,
+                }
+                : { flexWrap: 'wrap' }),
+        }, children: [filters.map((filter, index) => {
+                const label = filterChipLabel(filter, columns);
+                return (_jsx(Chip, { role: "listitem", label: label, size: "medium", variant: "outlined", color: "primary", "data-testid": "datatable-filter-chip", onDelete: () => onRemove(index), deleteIcon: _jsx(CancelIcon, { "aria-label": `Remove filter: ${label}`, "data-testid": "datatable-filter-chip-remove" }), sx: {
+                        minHeight: 44,
+                        maxWidth: '100%',
+                        ...(strip ? { flex: '0 0 auto' } : {}),
+                        // The delete icon is the pointer target; give it a real one.
+                        '& .MuiChip-deleteIcon': { fontSize: 22, mr: 0.5 },
+                    } }, `${filterKey(filter)}#${index}`));
+            }), onClearAll && filters.length > 1 && (_jsx(Button, { size: "small", onClick: onClearAll, "data-testid": "datatable-filter-clear-all", sx: { minHeight: 44, flex: '0 0 auto' }, children: "Clear all" }))] }));
+}
+//# sourceMappingURL=FilterChips.js.map

package/dist/datatable/ui/filter/FilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.js","sourceRoot":"","sources":["../../../../src/datatable/ui/filter/FilterChips.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAuBlF;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAM,EAC/B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,GAAG,MAAM,GACM;IACtB,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEtC,MAAM,KAAK,GAAG,OAAO,KAAK,OAAO,CAAC;IAElC,OAAO,CACL,MAAC,GAAG,mBACW,KAAK,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,wBAAwB,EAC7E,IAAI,EAAC,MAAM,gBACA,gBAAgB,EAC3B,EAAE,EAAE;YACF,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,MAAM;YAChB,EAAE,EAAE,CAAC;YACL,GAAG,CAAC,KAAK;gBACP,CAAC,CAAC;oBACE,QAAQ,EAAE,QAAQ;oBAClB,SAAS,EAAE,MAAM;oBACjB,iEAAiE;oBACjE,gDAAgD;oBAChD,uBAAuB,EAAE,OAAO;oBAChC,mBAAmB,EAAE,SAAS;oBAC9B,EAAE,EAAE,GAAG;iBACR;gBACH,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;SAC1B,aAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;gBAC7B,MAAM,KAAK,GAAG,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;gBAC/C,OAAO,CACL,KAAC,IAAI,IAEH,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,SAAS,iBACH,uBAAuB,EACnC,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,UAAU,EACR,KAAC,UAAU,kBACG,kBAAkB,KAAK,EAAE,iBACzB,8BAA8B,GAC1C,EAEJ,EAAE,EAAE;wBACF,SAAS,EAAE,EAAE;wBACb,QAAQ,EAAE,MAAM;wBAChB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;wBACtC,6DAA6D;wBAC7D,uBAAuB,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE;qBACnD,IApBI,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,KAAK,EAAE,CAqBpC,CACH,CAAC;YACJ,CAAC,CAAC,EAED,UAAU,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACnC,KAAC,MAAM,IACL,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,UAAU,iBACP,4BAA4B,EACxC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,0BAGhC,CACV,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/datatable/ui/filter/FilterEditor.d.ts

@@ -0,0 +1,65 @@
+/**
+ * DataTable — the add-a-filter form.
+ *
+ * Three controls in a row (or stacked, on a phone): **column → operator →
+ * value**, plus an Add button. The same component serves every layout; only
+ * `orientation` changes.
+ *
+ * ## Why the draft is local and only committed filters are emitted
+ *
+ * The form owns an incomplete `DataTableFilter` — the user has picked a column
+ * but not yet typed a value. That draft is NEVER emitted: `onCommit` fires once
+ * `isFilterComplete()` holds. If a half-built filter reached the page, the very
+ * first click of "Add filter" would trigger a refetch with a meaningless param,
+ * and every keystroke after it another one. The chip strip and the emitted
+ * model therefore always describe a real, applied query.
+ *
+ * ## Value control by declared type
+ *
+ * | `filterType` | operand control                                    |
+ * | ------------ | -------------------------------------------------- |
+ * | `text`       | text field                                         |
+ * | `number`     | number field (two, for `between`)                  |
+ * | `date`       | native date field (two, for `between`)             |
+ * | `enum`       | select over `enumValues`; multi-select for `isAnyOf`|
+ * | `boolean`    | Yes / No select                                    |
+ *
+ * A 0-arity operator (`isEmpty`) draws no operand control at all.
+ *
+ * ## A column's own operand control
+ *
+ * A type an app registered (`registerDataTableFilterType`) brings its own
+ * `Editor`, and a column may override the type's with `filter.editor` (a user
+ * picker on a text column): either replaces the table above for the operand
+ * only. The column and operator pickers and the Add button stay the form's, so
+ * the draft-then-commit contract holds for every type. A custom type with no
+ * editor falls back to a text field (comma-separated for a set).
+ */
+import type { DataTableColumn, DataTableFilter } from '../../headless/types.js';
+/**
+ * Props of {@link FilterEditor}.
+ *
+ * @stability experimental
+ */
+export interface FilterEditorProps<Row> {
+    /** Filterable columns only. */
+    columns: DataTableColumn<Row>[];
+    /** The filter being edited. */
+    draft: DataTableFilter;
+    /** Called with the edited draft. */
+    onDraftChange: (next: DataTableFilter) => void;
+    /** Called with the completed filter to add. */
+    onCommit: (filter: DataTableFilter) => void;
+    /** `'row'` on desktop/tablet, `'stacked'` in the phone sheet. */
+    orientation?: 'row' | 'stacked';
+}
+/**
+ * The form that builds one filter: column, operator and value.
+ *
+ * @param props - the draft and its callbacks.
+ * @returns the editor element.
+ *
+ * @stability experimental
+ */
+export declare function FilterEditor<Row>({ columns, draft, onDraftChange, onCommit, orientation, }: FilterEditorProps<Row>): import("react").JSX.Element | null;
+//# sourceMappingURL=FilterEditor.d.ts.map

package/dist/datatable/ui/filter/FilterEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterEditor.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/filter/FilterEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAIH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAUtG;;;;GAIG;AACH,MAAM,WAAW,iBAAiB,CAAC,GAAG;IACpC,+BAA+B;IAC/B,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,+BAA+B;IAC/B,KAAK,EAAE,eAAe,CAAC;IACvB,oCAAoC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,iEAAiE;IACjE,WAAW,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;CACjC;AAKD;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,EAChC,OAAO,EACP,KAAK,EACL,aAAa,EACb,QAAQ,EACR,WAAmB,GACpB,EAAE,iBAAiB,CAAC,GAAG,CAAC,sCA2MxB"}