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

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { Box, Button, MenuItem, Stack, TextField } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import { getDataTableFilterType } from '../../headless/filter/filterTypes.js';
+import { columnOperatorLabel, filterTypeOf, operatorArity, operatorsForColumn, } from '../../headless/filter/operators.js';
+import { blankValueFor, columnForFilter, draftFilterFor, isFilterComplete } from '../../headless/filter/filterModel.js';
+/** Shared sizing so every control in the form is a legal touch target. */
+const CONTROL_SX = { '& .MuiInputBase-root': { minHeight: 44 } };
+/**
+ * The form that builds one filter: column, operator and value.
+ *
+ * @param props - the draft and its callbacks.
+ * @returns the editor element.
+ *
+ * @stability experimental
+ */
+export function FilterEditor({ columns, draft, onDraftChange, onCommit, orientation = 'row', }) {
+    const column = columnForFilter(columns, draft) ?? columns[0];
+    if (!column)
+        return null;
+    const filterType = filterTypeOf(column);
+    const typeDef = getDataTableFilterType(filterType);
+    const CustomEditor = column.filter?.editor ?? typeDef?.Editor;
+    const builtinType = isBuiltinType(filterType);
+    const operators = operatorsForColumn(column);
+    const arity = operatorArity(draft.operator);
+    const complete = isFilterComplete(draft);
+    const stacked = orientation === 'stacked';
+    // Switching column invalidates both the operator and the operand: `contains`
+    // is meaningless on a boolean, and `'failed'` on an `attempts` column.
+    const changeColumn = (columnId) => {
+        const next = columns.find((entry) => entry.id === columnId);
+        if (next)
+            onDraftChange(draftFilterFor(next));
+    };
+    // Switching operator keeps the column but resets the operand whenever the
+    // arity changes — a `between` pair cannot be reinterpreted as a scalar.
+    const changeOperator = (operator) => {
+        const nextArity = operatorArity(operator);
+        const keepValue = nextArity === arity;
+        onDraftChange({
+            ...draft,
+            operator: operator,
+            value: keepValue ? draft.value : blankValueFor(nextArity),
+        });
+    };
+    const changeValue = (value) => onDraftChange({ ...draft, value });
+    const changePairEntry = (index, raw) => {
+        const pair = Array.isArray(draft.value) ? [...draft.value] : ['', ''];
+        pair[index] = filterType === 'number' && raw !== '' ? Number(raw) : raw;
+        changeValue(pair);
+    };
+    const pairValue = (index) => {
+        if (!Array.isArray(draft.value))
+            return '';
+        const entry = draft.value[index];
+        return entry === undefined || entry === null ? '' : String(entry);
+    };
+    const scalarValue = () => {
+        if (draft.value === null || Array.isArray(draft.value))
+            return '';
+        return String(draft.value);
+    };
+    const commit = () => {
+        if (complete)
+            onCommit(draft);
+    };
+    return (_jsx(Box, { "data-testid": "datatable-filter-editor", component: "form", onSubmit: (event) => {
+            event.preventDefault();
+            commit();
+        }, sx: { minWidth: 0, maxWidth: '100%' }, children: _jsxs(Stack, { direction: stacked ? 'column' : 'row', spacing: 1, useFlexGap: true, sx: { flexWrap: stacked ? 'nowrap' : 'wrap', alignItems: stacked ? 'stretch' : 'center' }, children: [_jsx(TextField, { select: true, size: "small", label: "Column", value: column.id, onChange: (event) => changeColumn(event.target.value), sx: { minWidth: 160, ...(stacked ? {} : { flex: '0 1 200px' }), ...CONTROL_SX }, children: columns.map((entry) => (_jsx(MenuItem, { value: entry.id, children: entry.label }, entry.id))) }), _jsx(TextField, { select: true, size: "small", label: "Operator", value: draft.operator, onChange: (event) => changeOperator(event.target.value), sx: { minWidth: 150, ...(stacked ? {} : { flex: '0 1 180px' }), ...CONTROL_SX }, children: operators.map((operator) => (_jsx(MenuItem, { value: operator, "data-operator": operator, children: columnOperatorLabel(column, operator) }, operator))) }), arity !== 0 && CustomEditor ? (_jsx(CustomEditor, { column: column, operator: draft.operator, arity: arity, value: draft.value, onChange: changeValue, stacked: stacked })) : arity === 'many' && !builtinType ? (_jsx(TextField, { size: "small", label: "Value", helperText: "Separate values with commas", value: Array.isArray(draft.value) ? draft.value.join(', ') : '', onChange: (event) => changeValue(event.target.value
+                        .split(',')
+                        .map((part) => part.trim())
+                        .filter(Boolean)), sx: { minWidth: 180, ...(stacked ? {} : { flex: '1 1 220px' }), ...CONTROL_SX } })) : arity === 2 ? (_jsxs(_Fragment, { children: [_jsx(ValueField, { label: "From", filterType: filterType, column: column, value: pairValue(0), onChange: (raw) => changePairEntry(0, raw), stacked: stacked }), _jsx(ValueField, { label: "To", filterType: filterType, column: column, value: pairValue(1), onChange: (raw) => changePairEntry(1, raw), stacked: stacked })] })) : arity === 'many' ? (_jsx(TextField, { select: true, size: "small", label: "Value", value: Array.isArray(draft.value) ? draft.value.map(String) : [], onChange: (event) => {
+                        const raw = event.target.value;
+                        changeValue((typeof raw === 'string' ? raw.split(',') : raw).filter(Boolean));
+                    }, slotProps: { select: { multiple: true } }, sx: { minWidth: 180, ...(stacked ? {} : { flex: '1 1 220px' }), ...CONTROL_SX }, children: (column.enumValues ?? []).map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value))) })) : arity === 1 ? (_jsx(ValueField, { label: "Value", filterType: filterType, column: column, value: scalarValue(), onChange: (raw) => changeValue(filterType === 'number'
+                        ? raw === ''
+                            ? ''
+                            : Number(raw)
+                        : filterType === 'boolean'
+                            ? raw === 'true'
+                            : raw), stacked: stacked })) : null, _jsx(Button, { type: "submit", variant: "contained", size: "small", startIcon: _jsx(AddIcon, {}), disabled: !complete, "data-testid": "datatable-filter-apply", sx: { minHeight: 44, flex: '0 0 auto' }, children: "Add" })] }) }));
+}
+// ---------------------------------------------------------------------------
+// Operand control
+// ---------------------------------------------------------------------------
+/** The five types whose operand controls are drawn below. */
+function isBuiltinType(type) {
+    return type === 'text' || type === 'number' || type === 'date' || type === 'enum' || type === 'boolean';
+}
+function ValueField({ label, filterType, column, value, onChange, stacked, }) {
+    const sx = {
+        minWidth: 140,
+        ...(stacked ? {} : { flex: '1 1 180px' }),
+        ...CONTROL_SX,
+    };
+    if (filterType === 'enum' || filterType === 'boolean') {
+        const options = filterType === 'boolean'
+            ? [
+                { value: 'true', label: 'Yes' },
+                { value: 'false', label: 'No' },
+            ]
+            : (column.enumValues ?? []);
+        return (_jsx(TextField, { select: true, size: "small", label: label, value: value, onChange: (event) => onChange(event.target.value), sx: sx, children: options.map((option) => (_jsx(MenuItem, { value: option.value, children: option.label }, option.value))) }));
+    }
+    return (_jsx(TextField, { size: "small", label: label, type: filterType === 'number' ? 'number' : filterType === 'date' ? 'date' : 'text', value: value, onChange: (event) => onChange(event.target.value), 
+        // A native date input renders its own placeholder text, which overlaps a
+        // floating label unless the label is pinned shrunk.
+        slotProps: filterType === 'date' ? { inputLabel: { shrink: true } } : undefined, sx: sx }));
+}
+//# sourceMappingURL=FilterEditor.js.map

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

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

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

@@ -0,0 +1,53 @@
+/**
+ * DataTable — global quick search.
+ *
+ * ## The debounce is on the EMISSION, not the input
+ *
+ * This is the whole point of the component. A naive debounce holds the input's
+ * `value` back too, so the caret lags a keystroke or two behind the typist on a
+ * slow phone.
+ * Here the `<input>` is driven by local state and repaints on every keystroke,
+ * while `onChange` — the thing that costs an HTTP round trip — fires once the
+ * user has paused.
+ *
+ * A page can therefore refetch straight from `onChange` with no debounce of its
+ * own, which is the contract the props document.
+ *
+ * ## Staying controlled without fighting the parent
+ *
+ * `value` is still the source of truth. `emittedRef` remembers the last term
+ * this component put on the wire, so a change arriving from OUTSIDE (a URL
+ * restore, a "clear all filters" button, a back-navigation) is distinguishable
+ * from the echo of our own emission and re-seeds the input; our own echo is
+ * ignored and never clobbers in-flight typing.
+ */
+import type { DataTableColumn, DataTableQuickSearchConfig } from '../../headless/types.js';
+/**
+ * Long enough to swallow a burst of typing, short enough to feel immediate.
+ *
+ * @stability experimental
+ */
+export declare const DEFAULT_QUICK_SEARCH_DEBOUNCE_MS = 300;
+/**
+ * Props of {@link QuickSearchField}.
+ *
+ * @stability experimental
+ */
+export interface QuickSearchFieldProps<Row> {
+    /** The quick-search config. */
+    config: DataTableQuickSearchConfig;
+    /** The columns the search covers. */
+    columns: DataTableColumn<Row>[];
+    /** Fill the available width — the phone sheet and the tablet bar both do. */
+    fullWidth?: boolean;
+}
+/**
+ * The debounced quick-search box.
+ *
+ * @param props - the quick-search config and the columns it searches.
+ * @returns the field element.
+ *
+ * @stability experimental
+ */
+export declare function QuickSearchField<Row>({ config, columns, fullWidth, }: QuickSearchFieldProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=QuickSearchField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickSearchField.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/filter/QuickSearchField.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAG3F;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,MAAM,CAAC;AAEpD;;;;GAIG;AACH,MAAM,WAAW,qBAAqB,CAAC,GAAG;IACxC,+BAA+B;IAC/B,MAAM,EAAE,0BAA0B,CAAC;IACnC,qCAAqC;IACrC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAWD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,EACpC,MAAM,EACN,OAAO,EACP,SAAiB,GAClB,EAAE,qBAAqB,CAAC,GAAG,CAAC,+BAkF5B"}

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DataTable — global quick search.
+ *
+ * ## The debounce is on the EMISSION, not the input
+ *
+ * This is the whole point of the component. A naive debounce holds the input's
+ * `value` back too, so the caret lags a keystroke or two behind the typist on a
+ * slow phone.
+ * Here the `<input>` is driven by local state and repaints on every keystroke,
+ * while `onChange` — the thing that costs an HTTP round trip — fires once the
+ * user has paused.
+ *
+ * A page can therefore refetch straight from `onChange` with no debounce of its
+ * own, which is the contract the props document.
+ *
+ * ## Staying controlled without fighting the parent
+ *
+ * `value` is still the source of truth. `emittedRef` remembers the last term
+ * this component put on the wire, so a change arriving from OUTSIDE (a URL
+ * restore, a "clear all filters" button, a back-navigation) is distinguishable
+ * from the echo of our own emission and re-seeds the input; our own echo is
+ * ignored and never clobbers in-flight typing.
+ */
+import { useEffect, useRef, useState } from 'react';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import CloseIcon from '@mui/icons-material/Close';
+import { searchableColumns } from '../../headless/filter/operators.js';
+/**
+ * Long enough to swallow a burst of typing, short enough to feel immediate.
+ *
+ * @stability experimental
+ */
+export const DEFAULT_QUICK_SEARCH_DEBOUNCE_MS = 300;
+/** "Search type, status or last error" — names what the term actually covers. */
+function defaultPlaceholder(columns) {
+    const labels = searchableColumns(columns).map((column) => column.label);
+    if (labels.length === 0)
+        return 'Search';
+    if (labels.length === 1)
+        return `Search ${labels[0]}`;
+    const last = labels[labels.length - 1];
+    return `Search ${labels.slice(0, -1).join(', ')} or ${last}`;
+}
+/**
+ * The debounced quick-search box.
+ *
+ * @param props - the quick-search config and the columns it searches.
+ * @returns the field element.
+ *
+ * @stability experimental
+ */
+export function QuickSearchField({ config, columns, fullWidth = false, }) {
+    const { value, onChange, placeholder, debounceMs = DEFAULT_QUICK_SEARCH_DEBOUNCE_MS, ariaLabel = 'Search', } = config;
+    const [draft, setDraft] = useState(value);
+    const emittedRef = useRef(value);
+    // `onChange` is very often an inline arrow from the calling page, so its
+    // identity changes every render. Reading it through a ref keeps it out of the
+    // timer effect's deps — otherwise a parent re-render would restart the
+    // debounce window and, under a busy parent, the term would never be emitted.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    // An externally-driven change (URL restore, programmatic clear) re-seeds the
+    // input. The echo of our own emission does not.
+    useEffect(() => {
+        if (value === emittedRef.current)
+            return;
+        emittedRef.current = value;
+        setDraft(value);
+    }, [value]);
+    useEffect(() => {
+        if (draft === emittedRef.current)
+            return;
+        const timer = setTimeout(() => {
+            emittedRef.current = draft;
+            onChangeRef.current(draft);
+        }, debounceMs);
+        return () => clearTimeout(timer);
+    }, [draft, debounceMs]);
+    const clear = () => {
+        setDraft('');
+        // Clearing is an explicit, single gesture — there is nothing to debounce
+        // and waiting 300ms to un-filter a table reads as a broken button.
+        emittedRef.current = '';
+        onChangeRef.current('');
+    };
+    return (_jsx(TextField, { size: "small", type: "search", value: draft, onChange: (event) => setDraft(event.target.value), placeholder: placeholder ?? defaultPlaceholder(columns), fullWidth: fullWidth, "data-testid": "datatable-quick-search", slotProps: {
+            htmlInput: { 'aria-label': ariaLabel },
+            input: {
+                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                endAdornment: draft ? (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { size: "small", "aria-label": "Clear search", onClick: clear, sx: { minWidth: 44, minHeight: 44 }, children: _jsx(CloseIcon, { fontSize: "small" }) }) })) : null,
+            },
+        }, sx: {
+            minWidth: fullWidth ? 0 : 220,
+            // WCAG 2.5.8: the field itself is a touch target.
+            '& .MuiInputBase-root': { minHeight: 44 },
+        } }));
+}
+//# sourceMappingURL=QuickSearchField.js.map

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

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

package/dist/datatable/ui/index.d.ts

@@ -0,0 +1,39 @@
+export { DataTable, useDataTableRenderer, rendererForLayout, drawableColumns, shouldRenderViewBar, } from './DataTable.js';
+export type { ViewBarVisibilityInput } from './DataTable.js';
+export { BulkActionBar, SlottedBulkActionBar } from './BulkActionBar.js';
+export type { BulkActionBarProps } from './BulkActionBar.js';
+export { useDataTableLayout, useContainerWidth, useViewportLayout, layoutForWidth, DEFAULT_BREAKPOINTS, DEFAULT_MOBILE_BREAKPOINT, DEFAULT_TABLET_BREAKPOINT, } from './useContainerLayout.js';
+export type { DataTableBreakpoints } from './useContainerLayout.js';
+export { DesktopGridRenderer, ACTIONS_FIELD } from './desktop/DesktopGridRenderer.js';
+export type { DesktopGridRendererProps } from './desktop/DesktopGridRenderer.js';
+export { toGridColDef, toGridColumns, buildColumnVisibilityModel, DEFAULT_COLUMN_MIN_WIDTH } from './desktop/columnAdapter.js';
+export { TruncatedCell, DataTableEmptyOverlay, DataTableLoadingOverlay } from './desktop/cells.js';
+export type { TruncatedCellProps } from './desktop/cells.js';
+export { RowActionsCell } from './desktop/RowActionsCell.js';
+export type { RowActionsCellProps } from './desktop/RowActionsCell.js';
+export { DetailRowPanel, EXPANDER_FIELD, detailRowHeight, detailRowId, isDetailRow, } from './desktop/detailRow.js';
+export type { DetailRow, DetailRowPanelProps } from './desktop/detailRow.js';
+export { CardListRenderer } from './mobile/CardListRenderer.js';
+export { DataCard } from './mobile/DataCard.js';
+export type { DataCardProps } from './mobile/DataCard.js';
+export { CardField, ExpandableValue, columnContent, columnText } from './mobile/CardField.js';
+export type { CardFieldProps, ExpandableValueProps } from './mobile/CardField.js';
+export { CompactPagination } from './mobile/CompactPagination.js';
+export type { CompactPaginationProps } from './mobile/CompactPagination.js';
+export { CardSortControl } from './mobile/CardSortControl.js';
+export type { CardSortControlProps } from './mobile/CardSortControl.js';
+export { DataTableFilterBar, FILTER_COUNT_CLASS } from './filter/DataTableFilterBar.js';
+export type { DataTableFilterBarProps } from './filter/DataTableFilterBar.js';
+export { FilterEditor } from './filter/FilterEditor.js';
+export type { FilterEditorProps } from './filter/FilterEditor.js';
+export { FilterChips } from './filter/FilterChips.js';
+export type { FilterChipsProps } from './filter/FilterChips.js';
+export { QuickSearchField, DEFAULT_QUICK_SEARCH_DEBOUNCE_MS } from './filter/QuickSearchField.js';
+export type { QuickSearchFieldProps } from './filter/QuickSearchField.js';
+export { DataTableViewBar, HIDDEN_COLUMN_COUNT_CLASS } from './layout/DataTableViewBar.js';
+export type { DataTableViewBarProps } from './layout/DataTableViewBar.js';
+export { DataTableExportControl } from './export/DataTableExportControl.js';
+export type { DataTableExportControlProps } from './export/DataTableExportControl.js';
+export { useRowActionConfirm, confirmCopy } from './shared/rowActionConfirm.js';
+export type { RowActionConfirm } from './shared/rowActionConfirm.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/datatable/ui/index.d.ts.map

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

package/dist/datatable/ui/index.js

@@ -0,0 +1,26 @@
+// `@marinoscar/platform-web/datatable/ui`: the responsive DataTable (desktop
+// grid, tablet grid, phone card list) with its filter bar, view bar, export
+// control, bulk-action bar and row actions. Pure presentation: the types and
+// logic are in `@marinoscar/platform-web/datatable/headless`. Documented in
+// ../README.md.
+export { DataTable, useDataTableRenderer, rendererForLayout, drawableColumns, shouldRenderViewBar, } from './DataTable.js';
+export { BulkActionBar, SlottedBulkActionBar } from './BulkActionBar.js';
+export { useDataTableLayout, useContainerWidth, useViewportLayout, layoutForWidth, DEFAULT_BREAKPOINTS, DEFAULT_MOBILE_BREAKPOINT, DEFAULT_TABLET_BREAKPOINT, } from './useContainerLayout.js';
+export { DesktopGridRenderer, ACTIONS_FIELD } from './desktop/DesktopGridRenderer.js';
+export { toGridColDef, toGridColumns, buildColumnVisibilityModel, DEFAULT_COLUMN_MIN_WIDTH } from './desktop/columnAdapter.js';
+export { TruncatedCell, DataTableEmptyOverlay, DataTableLoadingOverlay } from './desktop/cells.js';
+export { RowActionsCell } from './desktop/RowActionsCell.js';
+export { DetailRowPanel, EXPANDER_FIELD, detailRowHeight, detailRowId, isDetailRow, } from './desktop/detailRow.js';
+export { CardListRenderer } from './mobile/CardListRenderer.js';
+export { DataCard } from './mobile/DataCard.js';
+export { CardField, ExpandableValue, columnContent, columnText } from './mobile/CardField.js';
+export { CompactPagination } from './mobile/CompactPagination.js';
+export { CardSortControl } from './mobile/CardSortControl.js';
+export { DataTableFilterBar, FILTER_COUNT_CLASS } from './filter/DataTableFilterBar.js';
+export { FilterEditor } from './filter/FilterEditor.js';
+export { FilterChips } from './filter/FilterChips.js';
+export { QuickSearchField, DEFAULT_QUICK_SEARCH_DEBOUNCE_MS } from './filter/QuickSearchField.js';
+export { DataTableViewBar, HIDDEN_COLUMN_COUNT_CLASS } from './layout/DataTableViewBar.js';
+export { DataTableExportControl } from './export/DataTableExportControl.js';
+export { useRowActionConfirm, confirmCopy } from './shared/rowActionConfirm.js';
+//# sourceMappingURL=index.js.map

package/dist/datatable/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/datatable/ui/index.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,4EAA4E;AAC5E,6EAA6E;AAC7E,4EAA4E;AAC5E,gBAAgB;AAEhB,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAEzE,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEtF,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,0BAA0B,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC/H,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAEnG,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,EACL,cAAc,EACd,cAAc,EACd,eAAe,EACf,WAAW,EACX,WAAW,GACZ,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,gBAAgB,EAAE,gCAAgC,EAAE,MAAM,8BAA8B,CAAC;AAElG,OAAO,EAAE,gBAAgB,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAE3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAE5E,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/datatable/ui/layout/DataTableViewBar.d.ts

@@ -0,0 +1,72 @@
+/**
+ * DataTable — the layout surface: column visibility + density (issue #255).
+ *
+ * Drawn by `DataTable` itself, next to the filter bar and for exactly the same
+ * reason: the SHAPE of these controls is decided by the layout, not by how
+ * rows are presented, and a renderer owning the menu's open state would
+ * throw it away on every resize.
+ *
+ * | layout    | surface                                                        |
+ * | --------- | -------------------------------------------------------------- |
+ * | `desktop` | inline density toggle + a "Columns" button opening a **menu**   |
+ * | `tablet`  | the same, unchanged — a menu still fits and still reads well    |
+ * | `mobile`  | one "View" button opening a full-screen **sheet** holding both  |
+ *
+ * The phone case mirrors the filter sheet rather than squeezing a menu onto a
+ * 360px screen: a checkbox list inside a `Menu` on a phone is a scrolling
+ * popover with no focus trap and 32px rows. MUI's `Dialog fullScreen` supplies
+ * the trap, the Escape handling and the `aria-modal` semantics for free.
+ *
+ * Touch rules apply to every control here: ≥44px in both axes, and
+ * nothing is hidden with `opacity: 0` while staying hit-testable — the menu and
+ * the sheet are mounted only while open, so an invisible-but-tappable control
+ * cannot exist in the first place.
+ */
+import type { ReactNode } from 'react';
+import type { DataTableColumn, DataTableDensity, DataTableLayout } from '../../headless/types.js';
+/**
+ * Class on the hidden-column count badge, so the count is assertable.
+ *
+ * @stability experimental
+ */
+export declare const HIDDEN_COLUMN_COUNT_CLASS = "datatable-hidden-column-count";
+/**
+ * Props of {@link DataTableViewBar}.
+ *
+ * @stability experimental
+ */
+export interface DataTableViewBarProps<Row> {
+    /** The table's column definitions. */
+    columns: DataTableColumn<Row>[];
+    /** The resolved layout. */
+    layout: DataTableLayout;
+    /** The user's own visibility choice — layout folding is applied elsewhere. */
+    visibleColumnIds: ReadonlySet<string>;
+    /** The density in force. */
+    density: DataTableDensity;
+    /** Called with a column id and whether it is now visible. */
+    onToggleColumn: (columnId: string, visible: boolean) => void;
+    /** Called with the chosen density. */
+    onDensityChange: (density: DataTableDensity) => void;
+    /** Called when the user resets the view to the defaults. */
+    onReset: () => void;
+    /**
+     * Trailing slot, currently the CSV export control (#256).
+     *
+     * A node rather than a config object: the bar owns *placement* (this is the
+     * table's chrome row, and export belongs beside the column picker), while what
+     * export means — which rows, which columns, which fetch — belongs to
+     * `DataTableExportControl` and is none of this component's business.
+     */
+    trailing?: ReactNode;
+}
+/**
+ * The view bar: the column picker, the density choice and the reset button.
+ *
+ * @param props - the columns, density and callbacks.
+ * @returns the bar element.
+ *
+ * @stability experimental
+ */
+export declare function DataTableViewBar<Row>({ columns, layout, visibleColumnIds, density, onToggleColumn, onDensityChange, onReset, trailing, }: DataTableViewBarProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=DataTableViewBar.d.ts.map

package/dist/datatable/ui/layout/DataTableViewBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableViewBar.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/layout/DataTableViewBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8BvC,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAGlG;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,kCAAkC,CAAC;AAWzE;;;;GAIG;AACH,MAAM,WAAW,qBAAqB,CAAC,GAAG;IACxC,sCAAsC;IACtC,OAAO,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IAChC,2BAA2B;IAC3B,MAAM,EAAE,eAAe,CAAC;IACxB,8EAA8E;IAC9E,gBAAgB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACtC,4BAA4B;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,6DAA6D;IAC7D,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7D,sCAAsC;IACtC,eAAe,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,4DAA4D;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,EACpC,OAAO,EACP,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,cAAc,EACd,eAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAE,qBAAqB,CAAC,GAAG,CAAC,+BA8Q5B"}

package/dist/datatable/ui/layout/DataTableViewBar.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * DataTable — the layout surface: column visibility + density (issue #255).
+ *
+ * Drawn by `DataTable` itself, next to the filter bar and for exactly the same
+ * reason: the SHAPE of these controls is decided by the layout, not by how
+ * rows are presented, and a renderer owning the menu's open state would
+ * throw it away on every resize.
+ *
+ * | layout    | surface                                                        |
+ * | --------- | -------------------------------------------------------------- |
+ * | `desktop` | inline density toggle + a "Columns" button opening a **menu**   |
+ * | `tablet`  | the same, unchanged — a menu still fits and still reads well    |
+ * | `mobile`  | one "View" button opening a full-screen **sheet** holding both  |
+ *
+ * The phone case mirrors the filter sheet rather than squeezing a menu onto a
+ * 360px screen: a checkbox list inside a `Menu` on a phone is a scrolling
+ * popover with no focus trap and 32px rows. MUI's `Dialog fullScreen` supplies
+ * the trap, the Escape handling and the `aria-modal` semantics for free.
+ *
+ * Touch rules apply to every control here: ≥44px in both axes, and
+ * nothing is hidden with `opacity: 0` while staying hit-testable — the menu and
+ * the sheet are mounted only while open, so an invisible-but-tappable control
+ * cannot exist in the first place.
+ */
+import { useState } from 'react';
+import { AppBar, Badge, Box, Button, Checkbox, Dialog, DialogContent, Divider, FormControlLabel, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Stack, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography, } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import DensityLargeIcon from '@mui/icons-material/DensityLarge';
+import DensityMediumIcon from '@mui/icons-material/DensityMedium';
+import DensitySmallIcon from '@mui/icons-material/DensitySmall';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import TuneIcon from '@mui/icons-material/Tune';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import { DENSITY_LABELS, DENSITY_OPTIONS, pickerColumns } from '../../headless/layout/layoutModel.js';
+/**
+ * Class on the hidden-column count badge, so the count is assertable.
+ *
+ * @stability experimental
+ */
+export const HIDDEN_COLUMN_COUNT_CLASS = 'datatable-hidden-column-count';
+const DENSITY_ICONS = {
+    compact: DensitySmallIcon,
+    standard: DensityMediumIcon,
+    comfortable: DensityLargeIcon,
+};
+/** Every control in this surface clears the 44px touch floor. */
+const TOUCH_TARGET = { minWidth: 44, minHeight: 44 };
+/**
+ * The view bar: the column picker, the density choice and the reset button.
+ *
+ * @param props - the columns, density and callbacks.
+ * @returns the bar element.
+ *
+ * @stability experimental
+ */
+export function DataTableViewBar({ columns, layout, visibleColumnIds, density, onToggleColumn, onDensityChange, onReset, trailing, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const hideable = pickerColumns(columns, layout);
+    const hiddenCount = hideable.filter((column) => !visibleColumnIds.has(column.id)).length;
+    const densityToggle = (_jsx(ToggleButtonGroup, { exclusive: true, size: "small", value: density, "aria-label": "Row density", "data-testid": "datatable-density-group", onChange: (_event, next) => {
+            // `exclusive` emits null when the active button is re-pressed; a
+            // density must always be one of the three, so ignore the deselect.
+            if (next)
+                onDensityChange(next);
+        }, sx: { flex: '0 0 auto' }, children: DENSITY_OPTIONS.map((option) => {
+            const Icon = DENSITY_ICONS[option];
+            return (_jsx(Tooltip, { title: `${DENSITY_LABELS[option]} rows`, children: _jsx(ToggleButton, { value: option, "aria-label": `${DENSITY_LABELS[option]} density`, "data-testid": `datatable-density-${option}`, sx: TOUCH_TARGET, children: _jsx(Icon, { fontSize: "small" }) }) }, option));
+        }) }));
+    /** The column checkbox list — identical content in the menu and the sheet. */
+    const columnList = (variant) => hideable.map((column) => {
+        const checked = visibleColumnIds.has(column.id);
+        const toggle = () => onToggleColumn(column.id, !checked);
+        if (variant === 'menu') {
+            return (_jsxs(MenuItem, { onClick: toggle, "data-testid": `datatable-column-toggle-${column.id}`, sx: { minHeight: 44 }, children: [_jsx(ListItemIcon, { sx: { minWidth: 36 }, children: _jsx(Checkbox, { edge: "start", size: "small", checked: checked, tabIndex: -1, disableRipple: true, 
+                            // The MenuItem is the control; the checkbox is its state, so it
+                            // is named by the item rather than announcing itself twice.
+                            slotProps: { input: { 'aria-labelledby': `datatable-column-label-${column.id}` } } }) }), _jsx(ListItemText, { id: `datatable-column-label-${column.id}`, primary: column.label })] }, column.id));
+        }
+        return (_jsx(FormControlLabel, { "data-testid": `datatable-column-toggle-${column.id}`, sx: { ml: 0, minHeight: 44 }, control: _jsx(Checkbox, { checked: checked, onChange: toggle, slotProps: { input: { 'aria-label': `Show ${column.label}` } }, sx: TOUCH_TARGET }), label: column.label }, column.id));
+    });
+    const resetLabel = 'Reset to defaults';
+    return (_jsxs(Box, { "data-testid": "datatable-view-bar", "data-view-surface": layout, sx: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: 1,
+            flexWrap: 'wrap',
+            width: '100%',
+            maxWidth: '100%',
+            minWidth: 0,
+            mb: 1,
+        }, children: [layout === 'mobile' ? (_jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx(TuneIcon, {}), onClick: () => setSheetOpen(true), "aria-haspopup": "dialog", "aria-expanded": sheetOpen, "aria-label": hiddenCount > 0 ? `View options (${hiddenCount} columns hidden)` : 'View options', "data-testid": "datatable-view-button", sx: { minHeight: 44 }, children: "View" })) : (_jsxs(_Fragment, { children: [densityToggle, _jsx(Badge, { color: "primary", badgeContent: hiddenCount, slotProps: { badge: { className: HIDDEN_COLUMN_COUNT_CLASS } }, sx: { flex: '0 0 auto' }, children: _jsx(Button, { variant: "outlined", size: "small", startIcon: _jsx(ViewColumnIcon, {}), onClick: (event) => setAnchorEl(event.currentTarget), "aria-haspopup": "menu", "aria-expanded": Boolean(anchorEl), "aria-label": hiddenCount > 0 ? `Columns (${hiddenCount} hidden)` : 'Columns', "data-testid": "datatable-columns-button", sx: { minHeight: 44 }, children: "Columns" }) }), _jsxs(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), slotProps: { list: { 'aria-label': 'Column visibility', dense: false } }, "data-testid": "datatable-columns-menu", children: [hideable.length === 0 && (_jsx(MenuItem, { disabled: true, sx: { minHeight: 44 }, children: "No hideable columns" })), columnList('menu'), _jsx(Divider, {}), _jsxs(MenuItem, { onClick: () => {
+                                    onReset();
+                                    setAnchorEl(null);
+                                }, "data-testid": "datatable-layout-reset", sx: { minHeight: 44 }, children: [_jsx(ListItemIcon, { sx: { minWidth: 36 }, children: _jsx(RestartAltIcon, { fontSize: "small" }) }), _jsx(ListItemText, { primary: resetLabel })] })] })] })), trailing, layout === 'mobile' && (_jsxs(Dialog, { fullScreen: true, open: sheetOpen, onClose: () => setSheetOpen(false), "aria-labelledby": "datatable-view-sheet-title", "data-testid": "datatable-view-sheet", children: [_jsx(AppBar, { position: "relative", color: "default", elevation: 0, children: _jsxs(Toolbar, { sx: { gap: 1 }, children: [_jsx(Typography, { id: "datatable-view-sheet-title", variant: "h6", component: "h2", sx: { flexGrow: 1 }, children: "View options" }), _jsx(IconButton, { edge: "end", "aria-label": "Close view options", onClick: () => setSheetOpen(false), sx: TOUCH_TARGET, children: _jsx(CloseIcon, {}) })] }) }), _jsx(Divider, {}), _jsxs(DialogContent, { sx: { display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 0.5 }, children: "Density" }), densityToggle] }), _jsxs(Box, { sx: { minWidth: 0 }, children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 0.5 }, children: "Columns" }), hideable.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "No hideable columns" })) : (_jsx(Stack, { sx: { minWidth: 0 }, children: columnList('sheet') }))] }), _jsx(Box, { sx: { flexGrow: 1 } }), _jsx(Button, { variant: "outlined", fullWidth: true, startIcon: _jsx(RestartAltIcon, {}), onClick: onReset, "data-testid": "datatable-layout-reset", sx: { minHeight: 44 }, children: resetLabel }), _jsx(Button, { variant: "contained", fullWidth: true, onClick: () => setSheetOpen(false), sx: { minHeight: 44 }, children: "Done" })] })] }))] }));
+}
+//# sourceMappingURL=DataTableViewBar.js.map

package/dist/datatable/ui/layout/DataTableViewBar.js.map

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