@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.types.d.ts

@@ -0,0 +1,138 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../../core/public.js";
+import type { BoxProps } from "@mui/material";
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import type { Key, ReactNode } from "react";
+import { type VireoResponsiveTableClasses, type VireoResponsiveTableClassKey } from "./VireoResponsiveTable.classes.js";
+import type { VIREO_RESPONSIVE_TABLE_NAME, VireoResponsiveTableSlotName } from "./VireoResponsiveTable.identity.js";
+export type VireoResponsiveTableLayout = "mobile" | "desktop";
+export type VireoResponsiveTableSortDirection = "asc" | "desc";
+export type VireoResponsiveTableCellPlacement = "desktop" | "mobile-summary" | "mobile-detail";
+export type VireoResponsiveTableCellContext = {
+    placement: VireoResponsiveTableCellPlacement;
+};
+export type VireoResponsiveTableColumn<TItem, TId extends string = string> = {
+    id: TId;
+    renderHeader: () => ReactNode;
+    renderBody: (item: TItem, rowIndex: number, context: VireoResponsiveTableCellContext) => ReactNode;
+    align?: "left" | "center" | "right";
+    /** Arbitrary frontend or backend sort identifier. */
+    sort?: string;
+    sticky?: "left" | "right" | false;
+    minWidthPx?: number;
+    /** Pins the column to exactly `minWidthPx` so it never absorbs leftover space. */
+    fixedWidth?: boolean;
+    /** Required for predictable cumulative offsets when columns are sticky. */
+    width?: number;
+};
+type VireoResponsiveTableColumnId<TColumns extends readonly {
+    id: string;
+}[]> = TColumns[number]["id"];
+export type VireoResponsiveTableFilters = {
+    page: number;
+    rowsPerPage: number;
+    sortBy: string;
+    sortDirection: VireoResponsiveTableSortDirection;
+};
+export type VireoResponsiveTableLabels = {
+    table: string;
+    loadingTable: string;
+    noData: string;
+    showMore: string;
+    showLess: string;
+    rowsPerPage: string;
+    paginationMoreThan: (from: number, to: number) => string;
+    paginationRange: (from: number, to: number, count: number) => string;
+    paginationItem: (type: "first" | "last" | "next" | "previous") => string;
+    filters: string;
+    clearFilters: string;
+    filtersDone: string;
+    sortBy: string;
+    sortDirection: string;
+    ascending: string;
+    descending: string;
+    ascendingSortDirection: string;
+    descendingSortDirection: string;
+};
+export type VireoResponsiveTableLayers = {
+    stickyToolbar: number;
+    stickyRowHeader: number;
+};
+export type VireoResponsiveTableMobileScrollAnchor = {
+    rowKey: Key;
+    offsetTop: number;
+    rowIndex: number;
+};
+export type VireoResponsiveTableOwnerState = {
+    layout: VireoResponsiveTableLayout | null;
+    skeleton: boolean;
+};
+export interface VireoResponsiveTableRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export type VireoResponsiveTableSlots = {
+    [TSlotName in VireoResponsiveTableSlotName]: React.ElementType;
+};
+export type VireoResponsiveTableSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoResponsiveTableSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoResponsiveTableRootSlotPropsOverrides, VireoResponsiveTableOwnerState>;
+}>;
+export type VireoResponsiveTableOwnProps<TItem, TColumns extends readonly VireoResponsiveTableColumn<NoInfer<TItem>, string>[]> = VireoResponsiveTableSlotsAndSlotProps & {
+    columns: TColumns;
+    data: readonly TItem[];
+    filters: VireoResponsiveTableFilters;
+    onFiltersChange: (filters: VireoResponsiveTableFilters) => void;
+    labels: VireoResponsiveTableLabels;
+    layers: VireoResponsiveTableLayers;
+    renderFilters?: () => ReactNode;
+    /** Replaces the default empty-state label in both layouts. */
+    renderEmptyState?: () => ReactNode;
+    renderMobileFilters?: () => ReactNode;
+    /**
+     * Shows geometry-preserving placeholder rows for an initial load with no usable records.
+     * Do not enable this during refresh; keep existing `data` visible and present refresh feedback outside the table.
+     * @default false
+     */
+    skeleton?: boolean;
+    titleColumn?: VireoResponsiveTableColumnId<TColumns>;
+    titleEndAdornmentColumn?: VireoResponsiveTableColumnId<TColumns>;
+    titleEndAdornmentHelperColumn?: VireoResponsiveTableColumnId<TColumns>;
+    actionsColumn?: VireoResponsiveTableColumnId<TColumns>;
+    getRowKey?: (item: TItem, rowIndex: number) => Key;
+    /** Adds per-row visual feedback without replacing responsive row anatomy. */
+    getRowSx?: (item: TItem, rowIndex: number, layout: VireoResponsiveTableLayout) => SxProps<Theme> | undefined;
+    totalCount?: number;
+    renderMobileSearch?: () => ReactNode;
+    filtersCount?: number;
+    onClearFilters?: () => void;
+    onOpenFilters?: () => void;
+    onMobileFiltersDone?: () => void;
+    renderTitleEndAdornment?: (item: TItem, rowIndex: number) => ReactNode;
+    hasNextPage?: boolean;
+    /** Preserves loaded mobile rows and adds local progress while the next incremental page is fetched. */
+    isFetchingNextPage?: boolean;
+    onLoadNextPage?: () => void;
+    filtersLabel?: string;
+    clearFiltersLabel?: string;
+    filtersDoneLabel?: string;
+    rowsPerPageOptions?: readonly number[];
+    size?: "small" | "medium";
+    initialMobileScrollTop?: number;
+    initialMobileScrollAnchor?: VireoResponsiveTableMobileScrollAnchor;
+    onMobileScrollTopChange?: (scrollTop: number, anchor?: VireoResponsiveTableMobileScrollAnchor) => void;
+    initialExpandedMobileRowKey?: Key | null;
+    onExpandedMobileRowKeyChange?: (rowKey: Key | null) => void;
+    /** Keeps the table in lockstep with an enclosing responsive layout when provided. */
+    layout?: VireoResponsiveTableLayout;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoResponsiveTableClasses>;
+};
+export type VireoResponsiveTableInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+export type VireoResponsiveTableProps<TItem = unknown, TColumns extends readonly VireoResponsiveTableColumn<NoInfer<TItem>, string>[] = readonly VireoResponsiveTableColumn<NoInfer<TItem>, string>[]> = VireoResponsiveTableOwnProps<TItem, TColumns> & VireoResponsiveTableInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_RESPONSIVE_TABLE_NAME]?: VireoThemeComponent<VireoResponsiveTableProps, VireoResponsiveTableClassKey, VireoResponsiveTableOwnerState, Theme>;
+    }
+}
+export {};

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoResponsiveTable.js";
+export * from "./VireoResponsiveTable.classes.js";
+export * from "./VireoResponsiveTable.types.js";

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoResponsiveTable.js";
+export * from "./VireoResponsiveTable.classes.js";
+export * from "./VireoResponsiveTable.types.js";

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/DesktopResponsiveTable/DesktopResponsiveTable.d.ts

@@ -0,0 +1,7 @@
+import type { VireoResponsiveTableColumn, VireoResponsiveTableProps } from "../../../../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.types.js";
+import type { VireoResponsiveTableState } from "../../../../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/hooks/useVireoResponsiveTableState/useVireoResponsiveTableState.js";
+export declare function DesktopResponsiveTable<TItem, const TColumns extends readonly VireoResponsiveTableColumn<NoInfer<TItem>, string>[]>({ tableProps, state, skeletonVisible, }: {
+    tableProps: VireoResponsiveTableProps<TItem, TColumns>;
+    state: VireoResponsiveTableState<TItem>;
+    skeletonVisible: boolean;
+}): import("react").JSX.Element;

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/DesktopResponsiveTable/DesktopResponsiveTable.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeSx, VireoSkeleton, VireoTruncatedContent } from "../../../../../../../../../core/public.js";
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TableSortLabel, } from "@mui/material";
+export function DesktopResponsiveTable({ tableProps, state, skeletonVisible, }) {
+    const { data, filters, getRowKey, getRowSx, labels, onFiltersChange, renderFilters, renderEmptyState, size = "small", skeleton = false, totalCount, } = tableProps;
+    const { desktopColumnWidths, desktopPageRows, getStickyCellSx, handleSort, orderedColumns, resolvedActionsColumn, rowsPerPageOptions, skeletonPlaceholderCount, } = state;
+    return (_jsxs(Box, { sx: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0, minWidth: 0 }, children: [renderFilters?.(), _jsxs(Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flex: 1,
+                    minHeight: 0,
+                    marginTop: renderFilters ? "calc(3 * var(--mui-spacing))" : 0,
+                    border: 1,
+                    borderColor: "divider",
+                    borderRadius: 1,
+                    overflow: "hidden",
+                }, children: [_jsx(TableContainer, { sx: { flex: 1, minHeight: 0, overflow: "auto", backgroundColor: "surface.raised" }, children: _jsxs(Table, { stickyHeader: true, size: size, "aria-label": labels.table, sx: {
+                                tableLayout: "fixed",
+                                width: `max(100%, ${desktopColumnWidths.tableWidth}px)`,
+                                minWidth: `${desktopColumnWidths.tableWidth}px`,
+                            }, children: [_jsx("colgroup", { children: orderedColumns.map(column => (_jsx("col", { style: { width: desktopColumnWidths.byId.get(column.id) } }, column.id))) }), _jsx(TableHead, { children: _jsx(TableRow, { children: orderedColumns.map(column => {
+                                            const isSortable = Boolean(column.sort?.trim());
+                                            const isActiveSort = isSortable && filters.sortBy === column.sort;
+                                            return (_jsx(TableCell, { align: column.align, sortDirection: isActiveSort ? filters.sortDirection : false, sx: { ...getStickyCellSx(column, true), height: 52, fontWeight: 750, whiteSpace: "nowrap" }, children: isSortable ? (_jsx(TableSortLabel, { active: isActiveSort, disabled: skeleton, direction: isActiveSort ? filters.sortDirection : "asc", onClick: skeleton ? undefined : () => handleSort(column.sort), sx: {
+                                                        flexDirection: column.align === "right" ? "row-reverse" : "row",
+                                                        "& .MuiTableSortLabel-icon": {
+                                                            ...(column.align === "right" && { ml: 0, mr: 0.5 }),
+                                                            opacity: isActiveSort ? 1 : 0,
+                                                        },
+                                                        "&:hover .MuiTableSortLabel-icon": { opacity: isActiveSort ? 1 : 0.5 },
+                                                    }, children: column.renderHeader() })) : (column.renderHeader()) }, column.id));
+                                        }) }) }), _jsx(TableBody, { children: skeleton ? (Array.from({ length: skeletonPlaceholderCount }).map((_, rowIndex) => (_jsx(TableRow, { "aria-hidden": "true", sx: { visibility: skeletonVisible ? "visible" : "hidden" }, children: orderedColumns.map((column, columnIndex) => {
+                                            const isActionsColumn = column.id === resolvedActionsColumn?.id;
+                                            const skeletonWidth = isActionsColumn ? 62 : `${58 + ((rowIndex * 17 + columnIndex * 11) % 34)}%`;
+                                            return (_jsx(TableCell, { align: column.align, sx: { ...getStickyCellSx(column, false) }, children: _jsx(VireoSkeleton, { variant: "rounded", sx: {
+                                                        height: isActionsColumn ? 30 : size === "small" ? 20 : 24,
+                                                        width: skeletonWidth,
+                                                        ml: column.align === "right" || column.align === "center" ? "auto" : 0,
+                                                        mr: column.align === "center" ? "auto" : 0,
+                                                    } }) }, column.id));
+                                        }) }, `skeleton-row-${rowIndex}`)))) : desktopPageRows.length === 0 ? (_jsx(TableRow, { sx: { height: size === "small" ? 52 : 72 }, children: _jsx(TableCell, { colSpan: orderedColumns.length, align: "center", sx: { height: size === "small" ? 52 : 72, color: "text.secondary", borderBottom: 0 }, children: renderEmptyState?.() ?? labels.noData }) })) : (desktopPageRows.map((item, rowIndex) => (_jsx(TableRow, { hover: true, sx: mergeSx({ "&:last-child td": { borderBottom: 0 } }, getRowSx?.(item, rowIndex, "desktop")), children: orderedColumns.map(column => {
+                                            const body = column.renderBody(item, rowIndex, { placement: "desktop" });
+                                            return (_jsx(TableCell, { align: column.align, sx: { ...getStickyCellSx(column, false) }, children: column.id === resolvedActionsColumn?.id ? (body) : (_jsx(VireoTruncatedContent, { collapsedHeight: 48, collapseLabel: labels.showLess, expandLabel: labels.showMore, stopPropagation: true, slotProps: { content: { sx: { overflowWrap: "anywhere" } } }, children: body })) }, column.id));
+                                        }) }, getRowKey?.(item, rowIndex) ?? rowIndex)))) })] }) }), _jsx(TablePagination, { component: "div", count: totalCount ?? data.length, slotProps: {
+                            actions: {
+                                previousButton: { disabled: skeleton || filters.page <= 0 },
+                                nextButton: {
+                                    disabled: skeleton || filters.page >= Math.ceil((totalCount ?? data.length) / filters.rowsPerPage) - 1,
+                                },
+                            },
+                            select: { disabled: skeleton },
+                        }, page: filters.page, labelRowsPerPage: labels.rowsPerPage, labelDisplayedRows: ({ from, to, count }) => count === -1 ? labels.paginationMoreThan(from, to) : labels.paginationRange(from, to, count), getItemAriaLabel: labels.paginationItem, rowsPerPage: filters.rowsPerPage, rowsPerPageOptions: rowsPerPageOptions, onPageChange: (_, page) => onFiltersChange({ ...filters, page }), onRowsPerPageChange: event => onFiltersChange({ ...filters, page: 0, rowsPerPage: Number.parseInt(event.target.value, 10) }), sx: {
+                            flexShrink: 0,
+                            borderTop: 1,
+                            borderColor: "divider",
+                            bgcolor: "surface.base",
+                            opacity: skeleton ? 0.55 : 1,
+                            pointerEvents: skeleton ? "none" : "auto",
+                        } })] })] }));
+}

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/DesktopResponsiveTable/index.d.ts

@@ -0,0 +1 @@
+export { DesktopResponsiveTable } from "./DesktopResponsiveTable.js";

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/DesktopResponsiveTable/index.js

@@ -0,0 +1 @@
+export { DesktopResponsiveTable } from "./DesktopResponsiveTable.js";

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/MobileResponsiveTable/MobileResponsiveTable.d.ts

@@ -0,0 +1,8 @@
+import type { VireoResponsiveTableColumn, VireoResponsiveTableProps } from "../../../../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.types.js";
+import type { VireoResponsiveTableState } from "../../../../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/hooks/useVireoResponsiveTableState/useVireoResponsiveTableState.js";
+import React from "react";
+export declare function MobileResponsiveTable<TItem, const TColumns extends readonly VireoResponsiveTableColumn<NoInfer<TItem>, string>[]>({ tableProps, state, skeletonVisible, }: {
+    tableProps: VireoResponsiveTableProps<TItem, TColumns>;
+    state: VireoResponsiveTableState<TItem>;
+    skeletonVisible: boolean;
+}): React.JSX.Element;

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/MobileResponsiveTable/MobileResponsiveTable.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded";
+import FilterListRoundedIcon from "@mui/icons-material/FilterListRounded";
+import { Accordion, AccordionDetails, AccordionSummary, Badge, Box, Button, Card, CircularProgress, IconButton, MenuItem, Select, Stack, ToggleButton, ToggleButtonGroup, Typography, } from "@mui/material";
+import { VireoBottomDrawer } from "../../../../../../../../../capabilities/overlays/public.js";
+import { mergeSx, VireoLabelBox, VireoSkeleton } from "../../../../../../../../../core/public.js";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+const MOBILE_SUMMARY_SX = {
+    minHeight: 68,
+    px: 2,
+    bgcolor: "surface.raised",
+    "& .MuiAccordionSummary-content": {
+        minWidth: 0,
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+    },
+};
+function getMobileAccordionSx(rowIndex, rowSx) {
+    return mergeSx({
+        overflow: "visible",
+        backgroundColor: "transparent",
+        backgroundImage: "none",
+        borderTop: rowIndex > 0 ? 1 : undefined,
+        borderColor: "divider",
+        "&::before": { display: "none" },
+    }, rowSx);
+}
+function MobileResponsiveTableRow({ endAdornmentColumn, helperColumn, initialExpandedMobileRowKey, item, mobileDetailColumns, mobileViewport, onExpandedMobileRowKeyChange, renderTitleEndAdornment, requestNextPageIfNeeded, resolvedActionsColumn, resolvedTitleColumn, rowIndex, rowKey, rowSx, }) {
+    return (_jsx(Box, { "data-index": rowIndex, "data-responsive-table-mobile-row": String(rowKey), children: _jsxs(Accordion, { square: true, disableGutters: true, elevation: 0, defaultExpanded: initialExpandedMobileRowKey === rowKey, onChange: (_, expanded) => {
+                onExpandedMobileRowKeyChange?.(expanded ? rowKey : null);
+                window.requestAnimationFrame(() => {
+                    if (mobileViewport)
+                        requestNextPageIfNeeded(mobileViewport);
+                });
+            }, slotProps: { transition: { unmountOnExit: true } }, sx: getMobileAccordionSx(rowIndex, rowSx), children: [_jsxs(AccordionSummary, { expandIcon: _jsx(ExpandMoreRoundedIcon, {}), sx: MOBILE_SUMMARY_SX, children: [_jsx(Box, { sx: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: resolvedTitleColumn?.renderBody(item, rowIndex, { placement: "mobile-summary" }) }), renderTitleEndAdornment || endAdornmentColumn || helperColumn ? (_jsxs(Stack, { spacing: 0.25, sx: { flexShrink: 0, alignItems: "flex-end", textAlign: "right" }, children: [renderTitleEndAdornment || endAdornmentColumn ? (_jsx(Box, { sx: { fontSize: "0.875rem", fontWeight: 700 }, children: renderTitleEndAdornment
+                                        ? renderTitleEndAdornment(item, rowIndex)
+                                        : endAdornmentColumn?.renderBody(item, rowIndex, { placement: "mobile-summary" }) })) : null, helperColumn ? (_jsx(Box, { sx: { color: "text.secondary", fontSize: "0.75rem" }, children: helperColumn.renderBody(item, rowIndex, { placement: "mobile-summary" }) })) : null] })) : null] }), _jsxs(AccordionDetails, { sx: {
+                        overflow: "hidden",
+                        borderTop: 1,
+                        borderColor: "divider",
+                        bgcolor: "surface.sunken",
+                        p: 0,
+                    }, children: [_jsx(Stack, { children: mobileDetailColumns.map(column => (_jsx(MobileDataRow, { label: column.renderHeader(), value: column.renderBody(item, rowIndex, { placement: "mobile-detail" }) }, column.id))) }), resolvedActionsColumn ? (_jsx(MobileDataRow, { label: resolvedActionsColumn.renderHeader(), value: resolvedActionsColumn.renderBody(item, rowIndex, { placement: "mobile-detail" }), actions: true })) : null] })] }) }));
+}
+const MemoizedMobileResponsiveTableRow = React.memo(MobileResponsiveTableRow);
+export function MobileResponsiveTable({ tableProps, state, skeletonVisible, }) {
+    const { clearFiltersLabel = tableProps.labels.clearFilters, data, filters, filtersCount = 0, filtersDoneLabel = tableProps.labels.filtersDone, filtersLabel = tableProps.labels.filters, getRowKey, getRowSx, hasNextPage = false, initialExpandedMobileRowKey = null, initialMobileScrollAnchor, initialMobileScrollTop = 0, isFetchingNextPage = false, labels, layers, onClearFilters, onExpandedMobileRowKeyChange, onLoadNextPage, onMobileFiltersDone, onMobileScrollTopChange, onOpenFilters, renderMobileFilters, renderMobileSearch, renderEmptyState, renderTitleEndAdornment, skeleton = false, } = tableProps;
+    const { endAdornmentColumn, handleMobileSortColumnChange, handleMobileSortDirectionChange, helperColumn, mobileDetailColumns, resolvedActionsColumn, resolvedTitleColumn, skeletonPlaceholderCount, sortableColumns, } = state;
+    const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
+    const restoredMobileScrollRef = useRef(false);
+    const [mobileViewport, setMobileViewport] = useState(null);
+    const [mobileToolbar, setMobileToolbar] = useState(null);
+    const [mobileToolbarHeightPx, setMobileToolbarHeightPx] = useState(0);
+    useEffect(() => {
+        if (!mobileToolbar) {
+            setMobileToolbarHeightPx(0);
+            return;
+        }
+        setMobileToolbarHeightPx(mobileToolbar.offsetHeight);
+        if (!globalThis.ResizeObserver)
+            return;
+        const observer = new ResizeObserver(() => setMobileToolbarHeightPx(mobileToolbar.offsetHeight));
+        observer.observe(mobileToolbar);
+        return () => observer.disconnect();
+    }, [mobileToolbar]);
+    const requestNextPageIfNeeded = useCallback((viewport) => {
+        if (!hasNextPage || isFetchingNextPage || !onLoadNextPage)
+            return;
+        const remainingScrollDistance = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+        if (remainingScrollDistance <= 200)
+            onLoadNextPage();
+    }, [hasNextPage, isFetchingNextPage, onLoadNextPage]);
+    useEffect(() => {
+        if (!mobileViewport || skeleton)
+            return;
+        const frame = window.requestAnimationFrame(() => requestNextPageIfNeeded(mobileViewport));
+        return () => window.cancelAnimationFrame(frame);
+    }, [data.length, mobileViewport, requestNextPageIfNeeded, skeleton]);
+    useEffect(() => {
+        if (!mobileViewport || restoredMobileScrollRef.current)
+            return;
+        if (initialMobileScrollAnchor) {
+            const anchorIndex = data.findIndex((item, rowIndex) => String(getRowKey?.(item, rowIndex) ?? rowIndex) === String(initialMobileScrollAnchor.rowKey));
+            if (anchorIndex < 0) {
+                if (data.length <= initialMobileScrollAnchor.rowIndex && hasNextPage) {
+                    if (!isFetchingNextPage)
+                        onLoadNextPage?.();
+                    return;
+                }
+                mobileViewport.scrollTop = initialMobileScrollTop;
+                restoredMobileScrollRef.current = true;
+                return;
+            }
+            window.requestAnimationFrame(() => {
+                const anchorRow = mobileViewport.querySelector(`[data-index="${anchorIndex}"]`);
+                if (anchorRow) {
+                    mobileViewport.scrollTop +=
+                        anchorRow.getBoundingClientRect().top -
+                            mobileViewport.getBoundingClientRect().top -
+                            initialMobileScrollAnchor.offsetTop;
+                }
+                restoredMobileScrollRef.current = true;
+            });
+            return;
+        }
+        mobileViewport.scrollTop = initialMobileScrollTop;
+        restoredMobileScrollRef.current = true;
+    }, [
+        data,
+        getRowKey,
+        hasNextPage,
+        initialMobileScrollAnchor,
+        initialMobileScrollTop,
+        isFetchingNextPage,
+        mobileViewport,
+        onLoadNextPage,
+    ]);
+    const handleMobileScroll = useCallback((event) => {
+        const viewport = event.currentTarget;
+        const viewportTop = viewport.getBoundingClientRect().top;
+        const row = Array.from(viewport.querySelectorAll("[data-responsive-table-mobile-row]")).find(candidate => candidate.getBoundingClientRect().bottom > viewportTop + mobileToolbarHeightPx);
+        const rowIndex = row ? Number(row.dataset.index) : undefined;
+        const anchor = row && rowIndex !== undefined && Number.isInteger(rowIndex)
+            ? {
+                rowKey: getRowKey?.(data[rowIndex], rowIndex) ?? rowIndex,
+                rowIndex,
+                offsetTop: row.getBoundingClientRect().top - viewportTop,
+            }
+            : undefined;
+        onMobileScrollTopChange?.(viewport.scrollTop, anchor);
+        requestNextPageIfNeeded(viewport);
+    }, [data, getRowKey, mobileToolbarHeightPx, onMobileScrollTopChange, requestNextPageIfNeeded]);
+    return (_jsxs(Box, { ref: setMobileViewport, "data-responsive-table-mobile-viewport": true, onScroll: handleMobileScroll, sx: { height: "100%", overflow: "auto", overflowAnchor: "none" }, children: [renderMobileSearch || onOpenFilters || renderMobileFilters ? (_jsx(Stack, { ref: setMobileToolbar, spacing: 1, sx: {
+                    position: "sticky",
+                    top: 0,
+                    zIndex: layers.stickyToolbar,
+                    p: 1.5,
+                    bgcolor: "surface.sunken",
+                }, children: _jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: renderMobileSearch?.() }), onOpenFilters || renderMobileFilters || sortableColumns.length > 0 ? (_jsx(Badge, { anchorOrigin: { vertical: "top", horizontal: "right" }, badgeContent: filtersCount, color: "error", invisible: filtersCount === 0, max: 99, children: _jsx(IconButton, { "aria-expanded": mobileFiltersOpen, "aria-label": filtersLabel, onClick: () => {
+                                    if (!renderMobileFilters && sortableColumns.length === 0 && onOpenFilters) {
+                                        onOpenFilters();
+                                        return;
+                                    }
+                                    setMobileFiltersOpen(open => !open);
+                                }, children: _jsx(FilterListRoundedIcon, {}) }) })) : null] }) })) : null, renderMobileFilters || sortableColumns.length > 0 ? (_jsxs(VireoBottomDrawer, { open: mobileFiltersOpen, onClose: () => setMobileFiltersOpen(false), onOpen: () => setMobileFiltersOpen(true), maxHeight: "88dvh", children: [_jsx(Box, { sx: { px: 3, pb: 1, borderBottom: 1, borderColor: "divider" }, children: _jsx(Typography, { variant: "h6", sx: {
+                                fontWeight: 700,
+                            }, children: filtersLabel }) }), _jsxs(Stack, { spacing: 2.5, sx: { flex: 1, overflow: "auto", p: 3, bgcolor: "surface.sunken" }, children: [sortableColumns.length > 0 ? (_jsxs(Stack, { spacing: 2, children: [_jsx(VireoLabelBox, { label: labels.sortBy, children: _jsx(Select, { fullWidth: true, value: sortableColumns.some(column => column.sort === filters.sortBy) ? filters.sortBy : "", onChange: event => handleMobileSortColumnChange(event.target.value), children: sortableColumns.map(column => (_jsx(MenuItem, { value: column.sort, children: column.renderHeader() }, column.id))) }) }), _jsx(VireoLabelBox, { label: labels.sortDirection, children: _jsxs(ToggleButtonGroup, { exclusive: true, fullWidth: true, value: filters.sortDirection, onChange: (_, direction) => handleMobileSortDirectionChange(direction), "aria-label": labels.sortDirection, children: [_jsxs(ToggleButton, { value: "asc", "aria-label": labels.ascendingSortDirection, children: [_jsx(ArrowUpwardRoundedIcon, { fontSize: "small", sx: { mr: 0.75 } }), labels.ascending] }), _jsxs(ToggleButton, { value: "desc", "aria-label": labels.descendingSortDirection, children: [_jsx(ArrowDownwardRoundedIcon, { fontSize: "small", sx: { mr: 0.75 } }), labels.descending] })] }) })] })) : null, renderMobileFilters?.()] }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { p: 2, borderTop: 1, borderColor: "divider" }, children: [_jsx(Button, { fullWidth: true, color: "secondary", variant: "outlined", disabled: !onClearFilters || filtersCount === 0, onClick: onClearFilters, children: clearFiltersLabel }), _jsx(Button, { fullWidth: true, variant: "contained", onClick: () => {
+                                    onMobileFiltersDone?.();
+                                    setMobileFiltersOpen(false);
+                                }, children: filtersDoneLabel })] })] })) : null, skeleton ? (_jsx(MobileResponsiveTableSkeleton, { cardCount: skeletonPlaceholderCount, hasEndAdornment: Boolean(renderTitleEndAdornment ?? endAdornmentColumn), hasHelper: Boolean(helperColumn), visible: skeletonVisible })) : (_jsx(Card, { sx: {
+                    overflow: "clip",
+                    flexShrink: 0,
+                    borderRadius: 0,
+                    ...(data.length === 0 && { border: 0, boxShadow: "none" }),
+                }, children: data.length === 0 ? (_jsx(Box, { role: "status", sx: {
+                        px: 2,
+                        py: 2,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        textAlign: "center",
+                        bgcolor: "surface.sunken",
+                    }, children: renderEmptyState?.() ?? _jsx(Typography, { color: "text.secondary", children: labels.noData }) })) : (data.map((item, rowIndex) => {
+                    const rowKey = getRowKey?.(item, rowIndex) ?? rowIndex;
+                    return (_jsx(MemoizedMobileResponsiveTableRow, { endAdornmentColumn: endAdornmentColumn, helperColumn: helperColumn, initialExpandedMobileRowKey: initialExpandedMobileRowKey, item: item, mobileDetailColumns: mobileDetailColumns, mobileViewport: mobileViewport, onExpandedMobileRowKeyChange: onExpandedMobileRowKeyChange, renderTitleEndAdornment: renderTitleEndAdornment, requestNextPageIfNeeded: requestNextPageIfNeeded, resolvedActionsColumn: resolvedActionsColumn, resolvedTitleColumn: resolvedTitleColumn, rowIndex: rowIndex, rowKey: rowKey, rowSx: getRowSx?.(item, rowIndex, "mobile") }, rowKey));
+                })) })), !skeleton && (hasNextPage || isFetchingNextPage) ? (_jsx(Box, { sx: { display: "flex", justifyContent: "center", py: 2 }, children: isFetchingNextPage ? _jsx(CircularProgress, { size: 22 }) : null })) : null] }));
+}
+function MobileResponsiveTableSkeleton({ cardCount, hasEndAdornment, hasHelper, visible, }) {
+    return (_jsx(Card, { "aria-hidden": "true", sx: { overflow: "clip", flexShrink: 0, borderRadius: 0, visibility: visible ? "visible" : "hidden" }, children: Array.from({ length: cardCount }).map((_, cardIndex) => (_jsx(Box, { "data-responsive-table-mobile-skeleton-row": true, children: _jsx(Accordion, { square: true, disableGutters: true, elevation: 0, expanded: false, sx: getMobileAccordionSx(cardIndex), children: _jsxs(AccordionSummary, { tabIndex: -1, expandIcon: _jsx(VireoSkeleton, { variant: "circular", width: 24, height: 24 }), sx: MOBILE_SUMMARY_SX, children: [_jsx(Box, { sx: { minWidth: 0, flex: 1, overflow: "hidden" }, children: _jsx(VireoSkeleton, { variant: "rounded", height: 22, width: `${42 + ((cardIndex * 13) % 24)}%` }) }), hasEndAdornment || hasHelper ? (_jsxs(Stack, { spacing: 0.25, sx: { flexShrink: 0, alignItems: "flex-end", textAlign: "right" }, children: [hasEndAdornment ? _jsx(VireoSkeleton, { height: 18, width: 72 }) : null, hasHelper ? _jsx(VireoSkeleton, { height: 14, width: 48 }) : null] })) : null] }) }) }, `mobile-skeleton-${cardIndex}`))) }));
+}
+function MobileDataRow({ label, value, actions = false }) {
+    if (actions) {
+        return (_jsx(Box, { sx: {
+                px: 1,
+                py: 0.75,
+                borderTop: 1,
+                borderColor: "divider",
+                "& > :is(.MuiBox-root, .MuiStack-root)": {
+                    display: "grid",
+                    gridAutoFlow: "column",
+                    gridAutoColumns: "minmax(0, 1fr)",
+                    width: "100%",
+                    gap: 0.5,
+                },
+                "& > :is(.MuiBox-root, .MuiStack-root) > *": { display: "flex", minWidth: 0 },
+                "& .MuiIconButton-root": {
+                    width: "100%",
+                    minWidth: 0,
+                    flexDirection: "column",
+                    gap: "0.125rem",
+                    borderRadius: 1,
+                    px: 0.5,
+                    py: 0.75,
+                    "&::after": {
+                        content: "attr(aria-label)",
+                        display: "block",
+                        maxWidth: "100%",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        fontSize: "0.625rem",
+                        fontWeight: 500,
+                        lineHeight: 1.2,
+                        letterSpacing: "0.01em",
+                    },
+                },
+            }, children: value }));
+    }
+    return (_jsxs(Box, { sx: {
+            display: "grid",
+            gridTemplateColumns: "minmax(96px, 0.8fr) minmax(0, 1.2fr)",
+            alignItems: "center",
+            gap: 2,
+            px: 2,
+            py: 0.625,
+        }, children: [_jsx(Box, { sx: { color: "text.secondary", fontSize: "0.75rem" }, children: label }), _jsx(Box, { sx: { minWidth: 0, justifySelf: "end", textAlign: "right" }, children: value })] }));
+}

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/MobileResponsiveTable/index.d.ts

@@ -0,0 +1 @@
+export { MobileResponsiveTable } from "./MobileResponsiveTable.js";

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/components/MobileResponsiveTable/index.js

@@ -0,0 +1 @@
+export { MobileResponsiveTable } from "./MobileResponsiveTable.js";

package/dist/capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/internal/hooks/useVireoResponsiveTableState/useVireoResponsiveTableState.d.ts

@@ -0,0 +1,33 @@
+import type { VireoResponsiveTableColumn, VireoResponsiveTableProps, VireoResponsiveTableSortDirection } from "../../../../../../../../../capabilities/table/responsive-table/components/data-display/VireoResponsiveTable/VireoResponsiveTable.types.js";
+type StickyCellSx = {
+    boxSizing: "border-box";
+    position?: "sticky";
+    top?: number;
+    zIndex?: number;
+    bgcolor?: string;
+    left?: number;
+    right?: number;
+    boxShadow?: string;
+};
+export type VireoResponsiveTableState<TItem> = {
+    rowsPerPageOptions: number[];
+    skeletonPlaceholderCount: number;
+    desktopPageRows: readonly TItem[];
+    orderedColumns: readonly VireoResponsiveTableColumn<TItem, string>[];
+    desktopColumnWidths: {
+        byId: Map<string, string>;
+        tableWidth: number;
+    };
+    endAdornmentColumn?: VireoResponsiveTableColumn<TItem, string>;
+    helperColumn?: VireoResponsiveTableColumn<TItem, string>;
+    resolvedActionsColumn?: VireoResponsiveTableColumn<TItem, string>;
+    resolvedTitleColumn?: VireoResponsiveTableColumn<TItem, string>;
+    mobileDetailColumns: readonly VireoResponsiveTableColumn<TItem, string>[];
+    sortableColumns: readonly VireoResponsiveTableColumn<TItem, string>[];
+    getStickyCellSx: (column: VireoResponsiveTableColumn<TItem, string>, isHeader: boolean) => StickyCellSx;
+    handleSort: (sortBy: string) => void;
+    handleMobileSortColumnChange: (sortBy: string) => void;
+    handleMobileSortDirectionChange: (sortDirection: VireoResponsiveTableSortDirection | null) => void;
+};
+export declare function useVireoResponsiveTableState<TItem, const TColumns extends readonly VireoResponsiveTableColumn<NoInfer<TItem>, string>[]>({ actionsColumn, columns, data, filters, onFiltersChange, rowsPerPageOptions: rowsPerPageOptionsProp, titleColumn, titleEndAdornmentColumn, titleEndAdornmentHelperColumn, }: Pick<VireoResponsiveTableProps<TItem, TColumns>, "actionsColumn" | "columns" | "data" | "filters" | "onFiltersChange" | "rowsPerPageOptions" | "titleColumn" | "titleEndAdornmentColumn" | "titleEndAdornmentHelperColumn">): VireoResponsiveTableState<TItem>;
+export {};