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

package/dist/datatable/ui/mobile/DataCard.d.ts

@@ -0,0 +1,83 @@
+/**
+ * DataTable — one row, as a card.
+ *
+ * Layout is driven entirely by `priority`, never by column order or by any
+ * mobile-specific declaration on the column:
+ *
+ *   primary   → card headline (the thing you scan a list for)
+ *   secondary → card body, as stacked label/value pairs
+ *   detail    → collapsed behind "More details", CLOSED by default
+ *
+ * Visual language: an outlined `Card`, a checkbox at the leading edge, a single
+ * trailing overflow control, and body text at `body2` / `text.secondary` — the
+ * shape that reads well on a phone at 360px.
+ *
+ * Touch-target rule (issue #243): every control here is at least 44px and none of them
+ * is hidden with `opacity: 0` while staying clickable. There are no
+ * hover-revealed affordances on a card at all — a card list is a touch surface
+ * first, and an invisible-but-tappable control is the exact bug #243 filed.
+ *
+ * Render skipping (#256): a long list lets the browser skip layout and paint for
+ * off-screen cards (`content-visibility: auto`) against a MEASURED placeholder
+ * height — deliberately not a windowing virtualizer, since a wrong height
+ * estimate makes scrolling jump (issue #237). See
+ * `virtualization/cardVirtualization.ts`.
+ */
+import type { DataTableColumn, DataTableDensity, DataTableRowAction } from '../../headless/types.js';
+/**
+ * Props of {@link DataCard}.
+ *
+ * @stability experimental
+ */
+export interface DataCardProps<Row> {
+    /** The row. */
+    row: Row;
+    /** A stable identifier. */
+    id: string;
+    /** The columns drawn as the card headline. */
+    primaryColumns: DataTableColumn<Row>[];
+    /** The columns drawn as the card body. */
+    secondaryColumns: DataTableColumn<Row>[];
+    /** The columns drawn when the card is expanded. */
+    detailColumns: DataTableColumn<Row>[];
+    /** Whether the card has a selection checkbox. */
+    selectable: boolean;
+    /** Whether the card is selected. */
+    selected: boolean;
+    /** Called with the row id when the checkbox is toggled. */
+    onToggleSelect: (id: string) => void;
+    /** Per-row actions. */
+    rowActions?: DataTableRowAction<Row>[];
+    /** Called with the chosen action and the row. */
+    onRunAction: (action: DataTableRowAction<Row>, row: Row) => void;
+    /**
+     * Row-density preset (#255). Drives the card's padding and field gap — the
+     * card equivalent of DataGrid's row height. Touch targets are NOT scaled by
+     * it: 44px is a floor, not a style.
+     */
+    density?: DataTableDensity;
+    /**
+     * Let the browser skip layout/paint for this card while it is off screen
+     * (`content-visibility: auto`, #256). Never set on the measured card, and
+     * automatically suspended while the card's detail region is open — a card
+     * whose height is changing under the user's finger must stay fully rendered.
+     */
+    skipOffscreen?: boolean;
+    /**
+     * Placeholder height, in px, for a skipped card — MEASURED from a real card
+     * in this list rather than estimated from a column count (issue #237).
+     */
+    intrinsicHeight?: number | null;
+    /** Callback ref used by the card list to measure one representative card. */
+    measureRef?: (node: HTMLElement | null) => void;
+}
+/**
+ * One row as a card.
+ *
+ * @param props - the row and how to draw it.
+ * @returns the card element.
+ *
+ * @stability experimental
+ */
+export declare function DataCard<Row>({ row, id, primaryColumns, secondaryColumns, detailColumns, selectable, selected, onToggleSelect, rowActions, onRunAction, density, skipOffscreen, intrinsicHeight, measureRef, }: DataCardProps<Row>): import("react").JSX.Element;
+//# sourceMappingURL=DataCard.d.ts.map

package/dist/datatable/ui/mobile/DataCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataCard.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/mobile/DataCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAgBH,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAMrG;;;;GAIG;AACH,MAAM,WAAW,aAAa,CAAC,GAAG;IAChC,eAAe;IACf,GAAG,EAAE,GAAG,CAAC;IACT,2BAA2B;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,cAAc,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IACvC,0CAA0C;IAC1C,gBAAgB,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IACzC,mDAAmD;IACnD,aAAa,EAAE,eAAe,CAAC,GAAG,CAAC,EAAE,CAAC;IACtC,iDAAiD;IACjD,UAAU,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,uBAAuB;IACvB,UAAU,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;IACvC,iDAAiD;IACjD,WAAW,EAAE,CAAC,MAAM,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IACjE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,6EAA6E;IAC7E,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,EAC5B,GAAG,EACH,EAAE,EACF,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,QAAQ,EACR,cAAc,EACd,UAAU,EACV,WAAW,EACX,OAAO,EACP,aAAqB,EACrB,eAAe,EACf,UAAU,GACX,EAAE,aAAa,CAAC,GAAG,CAAC,+BA0MpB"}

package/dist/datatable/ui/mobile/DataCard.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * DataTable — one row, as a card.
+ *
+ * Layout is driven entirely by `priority`, never by column order or by any
+ * mobile-specific declaration on the column:
+ *
+ *   primary   → card headline (the thing you scan a list for)
+ *   secondary → card body, as stacked label/value pairs
+ *   detail    → collapsed behind "More details", CLOSED by default
+ *
+ * Visual language: an outlined `Card`, a checkbox at the leading edge, a single
+ * trailing overflow control, and body text at `body2` / `text.secondary` — the
+ * shape that reads well on a phone at 360px.
+ *
+ * Touch-target rule (issue #243): every control here is at least 44px and none of them
+ * is hidden with `opacity: 0` while staying clickable. There are no
+ * hover-revealed affordances on a card at all — a card list is a touch surface
+ * first, and an invisible-but-tappable control is the exact bug #243 filed.
+ *
+ * Render skipping (#256): a long list lets the browser skip layout and paint for
+ * off-screen cards (`content-visibility: auto`) against a MEASURED placeholder
+ * height — deliberately not a windowing virtualizer, since a wrong height
+ * estimate makes scrolling jump (issue #237). See
+ * `virtualization/cardVirtualization.ts`.
+ */
+import { useCallback, useId, useRef, useState } from 'react';
+import { Box, Card, Checkbox, Collapse, Divider, Stack, Typography, ButtonBase, } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import { RowActionsCell } from '../desktop/RowActionsCell.js';
+import { CardField, columnContent, columnText } from './CardField.js';
+import { cardDensityMetrics } from '../../headless/layout/layoutModel.js';
+import { containIntrinsicSize, useLazyImages } from '../../headless/virtualization/cardVirtualization.js';
+/**
+ * One row as a card.
+ *
+ * @param props - the row and how to draw it.
+ * @returns the card element.
+ *
+ * @stability experimental
+ */
+export function DataCard({ row, id, primaryColumns, secondaryColumns, detailColumns, selectable, selected, onToggleSelect, rowActions, onRunAction, density, skipOffscreen = false, intrinsicHeight, measureRef, }) {
+    const [expanded, setExpanded] = useState(false);
+    const detailRegionId = useId();
+    const metrics = cardDensityMetrics(density);
+    // One ref, two jobs: annotating whatever a column's `render` produced with
+    // `loading="lazy"`, and (for the one card the list measures) reporting height.
+    const cardRef = useRef(null);
+    const setCardRef = useCallback((node) => {
+        cardRef.current = node;
+        measureRef?.(node);
+    }, [measureRef]);
+    useLazyImages(cardRef);
+    // An expanding card is changing height right now; skipping its layout is how
+    // a scroll position ends up somewhere the user did not put it.
+    const skipping = skipOffscreen && !expanded;
+    const hasDetail = detailColumns.length > 0;
+    const hasActions = Boolean(rowActions && rowActions.length > 0);
+    // The first `primary` column doubles as the card's accessible name and as the
+    // disambiguator on the actions menu ("Row actions for face_detection").
+    const headlineText = primaryColumns.length > 0 ? columnText(primaryColumns[0], row) : id;
+    return (_jsxs(Card, { ref: setCardRef, variant: "outlined", component: "li", "aria-label": headlineText, "data-testid": "datatable-card", "data-row-id": id, "data-density": density ?? 'standard', "data-selected": selected ? 'true' : 'false', "data-skip-offscreen": skipping ? 'true' : 'false', "data-intrinsic-height": skipping ? containIntrinsicSize(intrinsicHeight) : undefined, sx: {
+            listStyle: 'none',
+            minWidth: 0,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            ...(skipping
+                ? {
+                    contentVisibility: 'auto',
+                    containIntrinsicSize: containIntrinsicSize(intrinsicHeight),
+                }
+                : {}),
+            ...(selected
+                ? {
+                    borderColor: 'primary.main',
+                    // Translucent primary tint over the card's paper (the same wash
+                    // `BulkActionBar.tsx` paints), derived from the active scheme's
+                    // `primary.main` rather than a hard-coded hue.
+                    bgcolor: (theme) => theme.palette.mode === 'dark'
+                        ? alpha(theme.palette.primary.main, 0.1)
+                        : alpha(theme.palette.primary.main, 0.06),
+                }
+                : {}),
+        }, children: [_jsxs(Box, { "data-testid": "datatable-card-header", sx: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: 1,
+                    px: metrics.px,
+                    py: metrics.py,
+                    minWidth: 0,
+                }, children: [selectable && (_jsx(Checkbox, { checked: selected, onChange: () => onToggleSelect(id), 
+                        // Named after the row it selects, never a bare "Select row" — with
+                        // several cards on screen at once a generic label is indistinguishable
+                        // between them to a screen reader (issue #257).
+                        slotProps: { input: { 'aria-label': `Select ${headlineText}` } }, sx: { minWidth: 44, minHeight: 44, mt: -0.5, ml: -0.5 } })), _jsx(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: primaryColumns.map((column, index) => (_jsx(Typography, { "data-testid": `datatable-card-headline-${column.id}`, variant: index === 0 ? 'subtitle2' : 'body2', component: "div", color: index === 0 ? 'text.primary' : 'text.secondary', sx: {
+                                fontWeight: index === 0 ? 700 : 400,
+                                minWidth: 0,
+                                overflowWrap: 'anywhere',
+                            }, children: columnContent(column, row) }, column.id))) }), hasActions && (_jsx(RowActionsCell, { row: row, actions: rowActions ?? [], rowLabel: headlineText, onRun: onRunAction, alwaysMenu: true, touchTarget: true }))] }), secondaryColumns.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Stack, { "data-testid": "datatable-card-body", spacing: metrics.fieldGap, sx: { px: metrics.px, py: metrics.py, minWidth: 0 }, children: secondaryColumns.map((column) => (_jsx(CardField, { column: column, row: row }, column.id))) })] })), hasDetail && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(ButtonBase, { "data-testid": "datatable-card-detail-toggle", "aria-expanded": expanded, "aria-controls": detailRegionId, "aria-label": `${expanded ? 'Hide' : 'More'} details for ${headlineText}`, onClick: () => setExpanded((value) => !value), sx: {
+                            display: 'flex',
+                            width: '100%',
+                            minHeight: 44,
+                            px: metrics.px,
+                            py: metrics.py,
+                            gap: 0.5,
+                            justifyContent: 'flex-start',
+                            alignItems: 'center',
+                            color: 'primary.main',
+                            typography: 'body2',
+                            fontWeight: 600,
+                        }, children: [expanded ? (_jsx(ExpandLessIcon, { fontSize: "small" })) : (_jsx(ExpandMoreIcon, { fontSize: "small" })), expanded ? 'Fewer details' : 'More details'] }), _jsx(Collapse, { in: expanded, unmountOnExit: true, children: _jsx(Box, { id: detailRegionId, "data-testid": "datatable-card-detail-region", sx: {
+                                px: metrics.px,
+                                pb: metrics.px,
+                                minWidth: 0,
+                                bgcolor: (theme) => theme.palette.mode === 'dark'
+                                    ? 'rgba(255, 255, 255, 0.03)'
+                                    : 'rgba(0, 0, 0, 0.02)',
+                            }, children: _jsx(Stack, { spacing: metrics.fieldGap, sx: { pt: metrics.py, minWidth: 0 }, children: detailColumns.map((column) => (_jsx(CardField, { column: column, row: row }, column.id))) }) }) })] }))] }));
+}
+//# sourceMappingURL=DataCard.js.map

package/dist/datatable/ui/mobile/DataCard.js.map

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

package/dist/datatable/ui/shared/IndeterminateCheckbox.d.ts

@@ -0,0 +1,63 @@
+/**
+ * DataTable — an `indeterminate` checkbox that also sets the REAL native DOM
+ * property, not just the ARIA one.
+ *
+ * MUI's `Checkbox` (and MUI X's `GridHeaderCheckbox`, which renders the exact
+ * same component through DataGrid's own `baseCheckbox` slot) sets
+ * `aria-checked="mixed"` on the underlying `<input type="checkbox">` when
+ * `indeterminate` is true, but — by its own documented design — never sets
+ * the native `HTMLInputElement.indeterminate` IDL property, which has no HTML
+ * attribute form and can only be set imperatively via the DOM node (see
+ * `@mui/material/Checkbox/Checkbox.js`'s own comment: "This does not set the
+ * native input element to indeterminate... However, we set a
+ * `data-indeterminate` attribute"). `axe-core`'s `aria-conditional-attr` rule
+ * computes a checkbox's "real" state from that native property, not from
+ * `data-indeterminate`, sees `aria-checked="mixed"` against an unset native
+ * property, and flags it — a genuine, reproducible violation surfaced by this
+ * issue's (#257) conformance suite, not a jsdom artifact.
+ *
+ * This wraps `Checkbox` and syncs the native property via a plain DOM query
+ * on its own rendered root — deliberately NOT `slotProps.input.ref` /
+ * `inputRef`, which have churned across MUI major versions; a `querySelector`
+ * for the one `<input>` MUI always renders inside is stable across all of
+ * them.
+ *
+ * ## Two calling conventions, one component
+ *
+ * Used two ways, which is why it accepts BOTH of MUI's native-input slot-prop
+ * spellings:
+ *  - Directly, as an ordinary `Checkbox` replacement (`mobile/CardListRenderer.tsx`'s
+ *    select-all checkbox) — MUI's own convention, `slotProps.input`.
+ *  - As DataGrid's public `slots.baseCheckbox` override
+ *    (`desktop/DesktopGridRenderer.tsx`, fixing the grid's built-in header
+ *    checkbox) — MUI X's base-slot convention for every `base*` component,
+ *    `slotProps.htmlInput` (see `@mui/x-data-grid`'s `GridBaseCheckboxProps`).
+ *    Individual row checkboxes never go indeterminate, so they do not need
+ *    this — see `checkboxColDef` in `DesktopGridRenderer.tsx`.
+ */
+import type { ComponentProps, InputHTMLAttributes, Ref } from 'react';
+import { Checkbox } from '@mui/material';
+/** Matches `Checkbox`'s own root ref type — the rendered root is a `<span>`
+ * in practice (SwitchBase forces `component="span"`), but MUI's public type
+ * for `Checkbox`'s ref is `HTMLButtonElement`; querying `.querySelector`
+ * off it does not care which one it actually is at runtime. */
+type CheckboxRootElement = HTMLButtonElement;
+export interface IndeterminateCheckboxProps extends Omit<ComponentProps<typeof Checkbox>, 'slotProps'> {
+    slotProps?: ComponentProps<typeof Checkbox>['slotProps'] & {
+        /** MUI X's `base*` slot convention (see the module docblock). */
+        htmlInput?: InputHTMLAttributes<HTMLInputElement>;
+    };
+    /**
+     * DataGrid's `GridHeaderCheckbox` passes its OWN `ref` when calling this as
+     * `slots.baseCheckbox` — React 19 delivers that as an ordinary `ref` prop
+     * here (this is a plain function component, not `forwardRef`). It has to be
+     * forked with our own internal ref (`useForkRef`, below) rather than simply
+     * spread onto `<Checkbox>` after it: a later spread would silently WIN over
+     * an earlier explicit `ref={...}` in the JSX and orphan our DOM query, which
+     * is exactly the bug this component exists to avoid reintroducing.
+     */
+    ref?: Ref<CheckboxRootElement>;
+}
+export declare function IndeterminateCheckbox({ slotProps, ref: externalRef, ...rest }: IndeterminateCheckboxProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=IndeterminateCheckbox.d.ts.map

package/dist/datatable/ui/shared/IndeterminateCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndeterminateCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/shared/IndeterminateCheckbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAItE,OAAO,EAAE,QAAQ,EAAc,MAAM,eAAe,CAAC;AAErD;;;+DAG+D;AAC/D,KAAK,mBAAmB,GAAG,iBAAiB,CAAC;AAE7C,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,WAAW,CAAC;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,WAAW,CAAC,GAAG;QACzD,iEAAiE;QACjE,SAAS,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KACnD,CAAC;IACF;;;;;;;;OAQG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAC;CAChC;AAED,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,EAAE,0BAA0B,+BAmBzG"}

package/dist/datatable/ui/shared/IndeterminateCheckbox.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DataTable — an `indeterminate` checkbox that also sets the REAL native DOM
+ * property, not just the ARIA one.
+ *
+ * MUI's `Checkbox` (and MUI X's `GridHeaderCheckbox`, which renders the exact
+ * same component through DataGrid's own `baseCheckbox` slot) sets
+ * `aria-checked="mixed"` on the underlying `<input type="checkbox">` when
+ * `indeterminate` is true, but — by its own documented design — never sets
+ * the native `HTMLInputElement.indeterminate` IDL property, which has no HTML
+ * attribute form and can only be set imperatively via the DOM node (see
+ * `@mui/material/Checkbox/Checkbox.js`'s own comment: "This does not set the
+ * native input element to indeterminate... However, we set a
+ * `data-indeterminate` attribute"). `axe-core`'s `aria-conditional-attr` rule
+ * computes a checkbox's "real" state from that native property, not from
+ * `data-indeterminate`, sees `aria-checked="mixed"` against an unset native
+ * property, and flags it — a genuine, reproducible violation surfaced by this
+ * issue's (#257) conformance suite, not a jsdom artifact.
+ *
+ * This wraps `Checkbox` and syncs the native property via a plain DOM query
+ * on its own rendered root — deliberately NOT `slotProps.input.ref` /
+ * `inputRef`, which have churned across MUI major versions; a `querySelector`
+ * for the one `<input>` MUI always renders inside is stable across all of
+ * them.
+ *
+ * ## Two calling conventions, one component
+ *
+ * Used two ways, which is why it accepts BOTH of MUI's native-input slot-prop
+ * spellings:
+ *  - Directly, as an ordinary `Checkbox` replacement (`mobile/CardListRenderer.tsx`'s
+ *    select-all checkbox) — MUI's own convention, `slotProps.input`.
+ *  - As DataGrid's public `slots.baseCheckbox` override
+ *    (`desktop/DesktopGridRenderer.tsx`, fixing the grid's built-in header
+ *    checkbox) — MUI X's base-slot convention for every `base*` component,
+ *    `slotProps.htmlInput` (see `@mui/x-data-grid`'s `GridBaseCheckboxProps`).
+ *    Individual row checkboxes never go indeterminate, so they do not need
+ *    this — see `checkboxColDef` in `DesktopGridRenderer.tsx`.
+ */
+import { useEffect, useRef } from 'react';
+// `useForkRef` is a public export of `@mui/material` (its `utils` barrel). It
+// is not imported from `@mui/utils`: that is a transitive dependency this
+// package does not declare (scripts/check-slice-peers.mjs).
+import { Checkbox, useForkRef } from '@mui/material';
+export function IndeterminateCheckbox({ slotProps, ref: externalRef, ...rest }) {
+    const queryRef = useRef(null);
+    const rootRef = useForkRef(queryRef, externalRef);
+    useEffect(() => {
+        const input = queryRef.current?.querySelector('input[type="checkbox"]');
+        if (input)
+            input.indeterminate = Boolean(rest.indeterminate);
+    }, [rest.indeterminate]);
+    // Normalize both slot-prop conventions onto the one MUI's own `Checkbox`
+    // actually reads (`slotProps.input`), so an `aria-label`/`name` supplied
+    // either way (DataGrid's `htmlInput`, or a direct caller's `input`) reaches
+    // the native element instead of being silently dropped.
+    const mergedSlotProps = {
+        ...slotProps,
+        input: { ...slotProps?.input, ...slotProps?.htmlInput },
+    };
+    return _jsx(Checkbox, { ref: rootRef, slotProps: mergedSlotProps, ...rest });
+}
+//# sourceMappingURL=IndeterminateCheckbox.js.map

package/dist/datatable/ui/shared/IndeterminateCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IndeterminateCheckbox.js","sourceRoot":"","sources":["../../../../src/datatable/ui/shared/IndeterminateCheckbox.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,8EAA8E;AAC9E,0EAA0E;AAC1E,4DAA4D;AAC5D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA0BrD,MAAM,UAAU,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,IAAI,EAA8B;IACxG,MAAM,QAAQ,GAAG,MAAM,CAA6B,IAAI,CAAC,CAAC;IAC1D,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAmB,wBAAwB,CAAC,CAAC;QAC1F,IAAI,KAAK;YAAE,KAAK,CAAC,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IAEzB,yEAAyE;IACzE,yEAAyE;IACzE,4EAA4E;IAC5E,wDAAwD;IACxD,MAAM,eAAe,GAAG;QACtB,GAAG,SAAS;QACZ,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,SAAS,EAAE;KACxD,CAAC;IAEF,OAAO,KAAC,QAAQ,IAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,KAAM,IAAI,GAAI,CAAC;AAC1E,CAAC"}

package/dist/datatable/ui/shared/rowActionConfirm.d.ts

@@ -0,0 +1,49 @@
+/**
+ * DataTable — shared row-action confirmation.
+ *
+ * Extracted from `DesktopGridRenderer` in #253 so the card renderer gets the
+ * *same* confirmation behaviour rather than a lookalike: identical default
+ * copy, identical destructive palette, and — the important part — exactly ONE
+ * dialog per table rather than one per row.
+ *
+ * The contract both renderers follow: a row-action control never executes an
+ * action, it hands the descriptor to `run()`. `run()` either invokes it
+ * immediately or parks it behind the dialog.
+ */
+import type { DataTableRowAction } from '../../headless/types.js';
+/**
+ * Resolve the four dialog strings, filling in defaults.
+ *
+ * @stability experimental
+ */
+export declare function confirmCopy<Row>(action: DataTableRowAction<Row>, row: Row): {
+    /** The dialog title. */
+    title: string;
+    /** The dialog body text. */
+    description: string;
+    /** The confirm button label. */
+    confirmLabel: string;
+    /** The cancel button label. */
+    cancelLabel: string;
+};
+/**
+ * What {@link useRowActionConfirm} returns.
+ *
+ * @stability experimental
+ */
+export interface RowActionConfirm<Row> {
+    /** Run an action, routing it through the dialog when it declares `confirm`. */
+    run: (action: DataTableRowAction<Row>, row: Row) => void;
+    /** The single dialog element. Render it once, anywhere in the renderer. */
+    dialog: React.ReactElement;
+}
+/**
+ * The confirm-before-run flow of a row action: `run` runs an action at once, or after the user confirms when it declares `confirm`; `dialog` is the dialog to render.
+ *
+ * @typeParam Row - the row type.
+ * @returns the runner and the dialog element.
+ *
+ * @stability experimental
+ */
+export declare function useRowActionConfirm<Row>(): RowActionConfirm<Row>;
+//# sourceMappingURL=rowActionConfirm.d.ts.map

package/dist/datatable/ui/shared/rowActionConfirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowActionConfirm.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/shared/rowActionConfirm.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAWH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAOlE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAC7B,MAAM,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAC/B,GAAG,EAAE,GAAG,GACP;IACD,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;CACrB,CAcA;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB,CAAC,GAAG;IACnC,+EAA+E;IAC/E,GAAG,EAAE,CAAC,MAAM,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IACzD,2EAA2E;IAC3E,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,KAAK,gBAAgB,CAAC,GAAG,CAAC,CAsChE"}

package/dist/datatable/ui/shared/rowActionConfirm.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DataTable — shared row-action confirmation.
+ *
+ * Extracted from `DesktopGridRenderer` in #253 so the card renderer gets the
+ * *same* confirmation behaviour rather than a lookalike: identical default
+ * copy, identical destructive palette, and — the important part — exactly ONE
+ * dialog per table rather than one per row.
+ *
+ * The contract both renderers follow: a row-action control never executes an
+ * action, it hands the descriptor to `run()`. `run()` either invokes it
+ * immediately or parks it behind the dialog.
+ */
+import { useCallback, useState } from 'react';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, } from '@mui/material';
+/**
+ * Resolve the four dialog strings, filling in defaults.
+ *
+ * @stability experimental
+ */
+export function confirmCopy(action, row) {
+    const options = typeof action.confirm === 'object' ? action.confirm : {};
+    const description = typeof options.description === 'function' ? options.description(row) : options.description;
+    return {
+        title: options.title ?? `${action.label}?`,
+        description: description ??
+            (action.destructive
+                ? 'This action cannot be undone.'
+                : `Are you sure you want to ${action.label.toLowerCase()}?`),
+        confirmLabel: options.confirmLabel ?? action.label,
+        cancelLabel: options.cancelLabel ?? 'Cancel',
+    };
+}
+/**
+ * The confirm-before-run flow of a row action: `run` runs an action at once, or after the user confirms when it declares `confirm`; `dialog` is the dialog to render.
+ *
+ * @typeParam Row - the row type.
+ * @returns the runner and the dialog element.
+ *
+ * @stability experimental
+ */
+export function useRowActionConfirm() {
+    const [pending, setPending] = useState(null);
+    const run = useCallback((action, row) => {
+        if (action.confirm) {
+            setPending({ action, row });
+            return;
+        }
+        action.onClick(row);
+    }, []);
+    const close = useCallback(() => setPending(null), []);
+    const copy = pending ? confirmCopy(pending.action, pending.row) : null;
+    const dialog = (_jsxs(Dialog, { open: Boolean(pending), onClose: close, "aria-labelledby": "datatable-confirm-title", children: [_jsx(DialogTitle, { id: "datatable-confirm-title", children: copy?.title }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: copy?.description }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: close, children: copy?.cancelLabel }), _jsx(Button, { variant: "contained", color: pending?.action.destructive ? 'error' : 'primary', onClick: () => {
+                            if (pending)
+                                pending.action.onClick(pending.row);
+                            close();
+                        }, children: copy?.confirmLabel })] })] }));
+    return { run, dialog };
+}
+//# sourceMappingURL=rowActionConfirm.js.map

package/dist/datatable/ui/shared/rowActionConfirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowActionConfirm.js","sourceRoot":"","sources":["../../../../src/datatable/ui/shared/rowActionConfirm.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACL,MAAM,EACN,MAAM,EACN,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,WAAW,GACZ,MAAM,eAAe,CAAC;AAQvB;;;;GAIG;AACH,MAAM,UAAU,WAAW,CACzB,MAA+B,EAC/B,GAAQ;IAWR,MAAM,OAAO,GAAG,OAAO,MAAM,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,MAAM,WAAW,GACf,OAAO,OAAO,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC;IAC7F,OAAO;QACL,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,MAAM,CAAC,KAAK,GAAG;QAC1C,WAAW,EACT,WAAW;YACX,CAAC,MAAM,CAAC,WAAW;gBACjB,CAAC,CAAC,+BAA+B;gBACjC,CAAC,CAAC,4BAA4B,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,CAAC;QAChE,YAAY,EAAE,OAAO,CAAC,YAAY,IAAI,MAAM,CAAC,KAAK;QAClD,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,QAAQ;KAC7C,CAAC;AACJ,CAAC;AAcD;;;;;;;GAOG;AACH,MAAM,UAAU,mBAAmB;IACjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA6B,IAAI,CAAC,CAAC;IAEzE,MAAM,GAAG,GAAG,WAAW,CAAC,CAAC,MAA+B,EAAE,GAAQ,EAAE,EAAE;QACpE,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;YAC5B,OAAO;QACT,CAAC;QACD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAEtD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEvE,MAAM,MAAM,GAAG,CACb,MAAC,MAAM,IAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,KAAK,qBAAkB,yBAAyB,aACvF,KAAC,WAAW,IAAC,EAAE,EAAC,yBAAyB,YAAE,IAAI,EAAE,KAAK,GAAe,EACrE,KAAC,aAAa,cACZ,KAAC,iBAAiB,cAAE,IAAI,EAAE,WAAW,GAAqB,GAC5C,EAChB,MAAC,aAAa,eACZ,KAAC,MAAM,IAAC,OAAO,EAAE,KAAK,YAAG,IAAI,EAAE,WAAW,GAAU,EACpD,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACxD,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,OAAO;gCAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;4BACjD,KAAK,EAAE,CAAC;wBACV,CAAC,YAEA,IAAI,EAAE,YAAY,GACZ,IACK,IACT,CACV,CAAC;IAEF,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;AACzB,CAAC"}

package/dist/datatable/ui/shared/visuallyHidden.d.ts

@@ -0,0 +1,12 @@
+export declare const visuallyHidden: {
+    readonly border: 0;
+    readonly clipPath: "inset(50%)";
+    readonly height: "1px";
+    readonly margin: "-1px";
+    readonly overflow: "hidden";
+    readonly padding: 0;
+    readonly position: "absolute";
+    readonly whiteSpace: "nowrap";
+    readonly width: "1px";
+};
+//# sourceMappingURL=visuallyHidden.d.ts.map

package/dist/datatable/ui/shared/visuallyHidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visuallyHidden.d.ts","sourceRoot":"","sources":["../../../../src/datatable/ui/shared/visuallyHidden.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc;;;;;;;;;;CAUjB,CAAC"}

package/dist/datatable/ui/shared/visuallyHidden.js

@@ -0,0 +1,16 @@
+// The screen-reader-only style: the same declarations as
+// `@mui/utils/visuallyHidden`, inlined so the package does not import a
+// transitive dependency of `@mui/material` it does not declare
+// (scripts/check-slice-peers.mjs). Not exported from the slice.
+export const visuallyHidden = {
+    border: 0,
+    clipPath: 'inset(50%)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+};
+//# sourceMappingURL=visuallyHidden.js.map

package/dist/datatable/ui/shared/visuallyHidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visuallyHidden.js","sourceRoot":"","sources":["../../../../src/datatable/ui/shared/visuallyHidden.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,wEAAwE;AACxE,+DAA+D;AAC/D,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,KAAK;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,KAAK;CACJ,CAAC"}

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

@@ -0,0 +1,105 @@
+/**
+ * DataTable — container-driven layout resolution.
+ *
+ * The renderer switch is driven by the width of the table's OWN container, not
+ * by the viewport. That distinction is the entire point of this module:
+ *
+ *   A DataTable inside the Workflow runs drawer is 400px wide on a 1440px
+ *   desktop. A viewport-based `useMediaQuery` would hand that drawer the full
+ *   desktop grid and it would be unusable; a ResizeObserver on the wrapper
+ *   hands it cards, which is correct.
+ *
+ * Container queries would express this natively, but CSS container queries
+ * cannot change *which component tree renders* — only how an already-rendered
+ * one is styled. A card list and a DataGrid are genuinely different trees, so
+ * measurement has to reach JavaScript, and `ResizeObserver` is the cheapest way
+ * to get there.
+ *
+ * ## Before the first measurement
+ *
+ * `ResizeObserver` reports nothing during SSR and nothing on the very first
+ * paint. Rather than flash the wrong renderer (or worse, mount a DataGrid and
+ * immediately throw it away), the hook falls back to a viewport `useMediaQuery`
+ * until a real, non-zero width arrives. On a normal page the viewport and the
+ * container agree, so the fallback is right; in a drawer it is wrong for
+ * exactly one frame, which is strictly better than being wrong forever.
+ *
+ * A measured width of `0` is treated as "not measured yet" — that is what a
+ * `display: none` ancestor, a not-yet-laid-out node, and jsdom's layout-free
+ * DOM all report, and none of them mean "this table is 0px wide".
+ */
+import type { RefObject } from 'react';
+import type { DataTableLayout, DataTableRendererMode } from '../headless/types.js';
+/**
+ * Below 600px a table cannot show a headline plus one supporting column
+ * without either horizontal scrolling or unreadable truncation — that is where
+ * cards win. 600 is also MUI's `sm`, so a container that happens to match the
+ * viewport lands on the same pivot the rest of the app uses.
+ *
+ * @stability experimental
+ */
+export declare const DEFAULT_MOBILE_BREAKPOINT = 600;
+/**
+ * 1200px (MUI's `lg`) is where the grid stops having to hide anything. It is
+ * deliberately the SAME threshold the desktop renderer already used to fold
+ * `detail` columns away, so the tablet band is exactly "the widths at which
+ * columns are being hidden" — and therefore exactly the band that needs a row
+ * expander to make them reachable again.
+ *
+ * @stability experimental
+ */
+export declare const DEFAULT_TABLET_BREAKPOINT = 1200;
+/**
+ * The container widths, in pixels, at which the table changes layout.
+ *
+ * @stability experimental
+ */
+export interface DataTableBreakpoints {
+    /** Below this container width, render cards. */
+    mobile: number;
+    /** Below this container width (and at/above `mobile`), run the tablet grid. */
+    tablet: number;
+}
+/**
+ * The default container-width breakpoints.
+ *
+ * @stability experimental
+ */
+export declare const DEFAULT_BREAKPOINTS: DataTableBreakpoints;
+/**
+ * Pure width → layout mapping. Exported so it can be unit-tested without a DOM
+ * and reused by anything that already knows its width.
+ *
+ * @stability experimental
+ */
+export declare function layoutForWidth(width: number, breakpoints?: DataTableBreakpoints): DataTableLayout;
+/**
+ * Observe an element's inline size.
+ *
+ * Returns `null` until a real (non-zero) width has been observed, which is the
+ * caller's signal to use a viewport fallback instead of guessing.
+ *
+ * @stability experimental
+ */
+export declare function useContainerWidth(ref: RefObject<HTMLElement | null>): number | null;
+/**
+ * Viewport-based layout — the pre-measurement fallback only.
+ *
+ * Mirrors {@link layoutForWidth}'s thresholds using MUI's own breakpoints so
+ * the fallback and the measured answer agree whenever the container happens to
+ * be the full viewport.
+ *
+ * @stability experimental
+ */
+export declare function useViewportLayout(): DataTableLayout;
+/**
+ * Resolve the layout for one DataTable instance.
+ *
+ * @param ref - wrapper element to measure.
+ * @param mode - `'auto'` measures; anything else is returned verbatim.
+ * @param breakpoints - per-instance overrides (`undefined` entries keep defaults).
+ *
+ * @stability experimental
+ */
+export declare function useDataTableLayout(ref: RefObject<HTMLElement | null>, mode?: DataTableRendererMode, breakpoints?: Partial<DataTableBreakpoints>): DataTableLayout;
+//# sourceMappingURL=useContainerLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerLayout.d.ts","sourceRoot":"","sources":["../../../src/datatable/ui/useContainerLayout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAMnF;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,OAAO,CAAC;AAE9C;;;;GAIG;AACH,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,MAAM,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,oBAGjC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,WAAW,GAAE,oBAA0C,GACtD,eAAe,CAIjB;AAMD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,MAAM,GAAG,IAAI,CAsCnF;AAMD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,IAAI,eAAe,CAMnD;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAClC,IAAI,GAAE,qBAA8B,EACpC,WAAW,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAC1C,eAAe,CAYjB"}