pixelize-design-library 2.2.192 → 3.0.1-beta.1

package/dist/components-v2/Table/hooks/useColumnResize.js

@@ -0,0 +1,104 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColumnResize = useColumnResize;
+const React = __importStar(require("react"));
+const ABSOLUTE_MIN = 60;
+function useColumnResize({ columns, columnWidths, setColumnWidth, enabled, }) {
+    const [resizingColumnId, setResizingColumnId] = React.useState(null);
+    const stateRef = React.useRef(null);
+    const getWidth = React.useCallback((columnId) => {
+        if (columnWidths[columnId] !== undefined)
+            return columnWidths[columnId];
+        const definition = columns.find((c) => c.id === columnId);
+        return definition === null || definition === void 0 ? void 0 : definition.width;
+    }, [columnWidths, columns]);
+    const handlePointerDown = React.useCallback((columnId, event) => {
+        var _a, _b, _c, _d, _e;
+        if (!enabled)
+            return;
+        const column = columns.find((c) => c.id === columnId);
+        if (!column)
+            return;
+        if (column.enableResizing === false)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const headerCell = (_a = event.currentTarget.parentElement) !== null && _a !== void 0 ? _a : null;
+        const startWidth = (_c = (_b = getWidth(columnId)) !== null && _b !== void 0 ? _b : headerCell === null || headerCell === void 0 ? void 0 : headerCell.offsetWidth) !== null && _c !== void 0 ? _c : 150;
+        stateRef.current = {
+            columnId,
+            startX: event.clientX,
+            startWidth,
+            minWidth: Math.max(ABSOLUTE_MIN, (_d = column.minWidth) !== null && _d !== void 0 ? _d : ABSOLUTE_MIN),
+            maxWidth: (_e = column.maxWidth) !== null && _e !== void 0 ? _e : Number.POSITIVE_INFINITY,
+        };
+        setResizingColumnId(columnId);
+        try {
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }
+        catch (_f) {
+            /* not supported */
+        }
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        const handleMove = (moveEvent) => {
+            const state = stateRef.current;
+            if (!state)
+                return;
+            const delta = moveEvent.clientX - state.startX;
+            const nextWidth = Math.min(state.maxWidth, Math.max(state.minWidth, state.startWidth + delta));
+            setColumnWidth(state.columnId, nextWidth);
+        };
+        const handleUp = () => {
+            stateRef.current = null;
+            setResizingColumnId(null);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+            window.removeEventListener("pointercancel", handleUp);
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+        window.addEventListener("pointercancel", handleUp);
+    }, [enabled, columns, setColumnWidth, getWidth]);
+    return {
+        handlePointerDown,
+        isResizing: resizingColumnId !== null,
+        resizingColumnId,
+        getWidth,
+    };
+}

package/dist/components-v2/Table/hooks/useTable.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import type { ActiveFilter, ColumnDef, Density, RowKey, SortState, TablePreferences } from "../TableProps";
+export interface UseTableOptions<T> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    rowKey: RowKey<T>;
+    selectable: boolean;
+    selectionMode: "single" | "multi";
+    selectedRows?: (string | number)[];
+    onSelectionChange?: (selectedKeys: (string | number)[]) => void;
+    sortable: boolean;
+    defaultSort?: SortState;
+    onSortChange?: (sort: SortState | null) => void;
+    filterable: boolean;
+    defaultFilters?: ActiveFilter[];
+    onFilterChange?: (filters: ActiveFilter[]) => void;
+    searchable: boolean;
+    onSearchChange?: (query: string) => void;
+    isServerSearch: boolean;
+    pagination: boolean;
+    paginationMode: "client" | "server";
+    defaultPageSize: number;
+    totalCount?: number;
+    onPageChange?: (page: number, pageSize: number) => void;
+    defaultHiddenColumns: string[];
+    density: Density;
+    preferences?: TablePreferences;
+}
+export declare function useTable<T>(options: UseTableOptions<T>): {
+    pageData: T[];
+    processed: T[];
+    pageCount: number;
+    visibleColumns: ColumnDef<T>[];
+    columnVisibility: Record<string, boolean>;
+    setColumnHidden: (id: string, hidden: boolean) => void;
+    columnWidths: Record<string, number>;
+    setColumnWidth: (id: string, width: number) => void;
+    density: Density;
+    setDensity: React.Dispatch<React.SetStateAction<Density>>;
+    sort: SortState | null;
+    setSort: (next: SortState | null) => void;
+    filters: ActiveFilter[];
+    setFilters: (next: ActiveFilter[] | ((prev: ActiveFilter[]) => ActiveFilter[])) => void;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    selection: (string | number)[];
+    toggleRow: (key: string | number) => void;
+    toggleAll: () => void;
+    clearSelection: () => void;
+    isAllSelected: boolean;
+    isSomeSelected: boolean;
+    pageIndex: number;
+    pageSize: number;
+    setPage: (page: number, size?: number) => void;
+    setPageSize: (size: number) => void;
+    allRowKeys: (string | number)[];
+};
+export type UseTableReturn<T> = ReturnType<typeof useTable<T>>;

package/dist/components-v2/Table/hooks/useTable.js

@@ -0,0 +1,254 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTable = useTable;
+const React = __importStar(require("react"));
+const filterUtils_1 = require("../utils/filterUtils");
+const sortUtils_1 = require("../utils/sortUtils");
+const STORAGE_VERSION = 1;
+function readPersisted(storageKey) {
+    if (!storageKey || typeof window === "undefined")
+        return null;
+    try {
+        const raw = window.localStorage.getItem(`px-table:${STORAGE_VERSION}:${storageKey}`);
+        if (!raw)
+            return null;
+        return JSON.parse(raw);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+function writePersisted(storageKey, state) {
+    if (!storageKey || typeof window === "undefined")
+        return;
+    try {
+        window.localStorage.setItem(`px-table:${STORAGE_VERSION}:${storageKey}`, JSON.stringify(state));
+    }
+    catch (_a) {
+        /* ignore quota */
+    }
+}
+function useTable(options) {
+    var _a;
+    const { data, columns, rowKey, selectable, selectionMode, selectedRows: controlledSelection, onSelectionChange, sortable, defaultSort, onSortChange, filterable, defaultFilters, onFilterChange, searchable, onSearchChange, isServerSearch, pagination, paginationMode, defaultPageSize, totalCount, onPageChange, defaultHiddenColumns, density: densityProp, preferences, } = options;
+    const persisted = React.useMemo(() => readPersisted(preferences === null || preferences === void 0 ? void 0 : preferences.storageKey), [preferences === null || preferences === void 0 ? void 0 : preferences.storageKey]);
+    /* ───── Column visibility / widths / order / density ───── */
+    const [columnVisibility, setColumnVisibility] = React.useState(() => {
+        if (persisted === null || persisted === void 0 ? void 0 : persisted.columnVisibility)
+            return persisted.columnVisibility;
+        const initial = {};
+        for (const c of columns) {
+            initial[c.id] = c.hidden ? false : !defaultHiddenColumns.includes(c.id);
+        }
+        return initial;
+    });
+    const [columnWidths, setColumnWidths] = React.useState(() => { var _a; return (_a = persisted === null || persisted === void 0 ? void 0 : persisted.columnWidths) !== null && _a !== void 0 ? _a : {}; });
+    const [density, setDensity] = React.useState(() => { var _a; return (_a = persisted === null || persisted === void 0 ? void 0 : persisted.density) !== null && _a !== void 0 ? _a : densityProp; });
+    /* ───── Sort ───── */
+    const isSortControlled = !!onSortChange && defaultSort !== undefined;
+    const [internalSort, setInternalSort] = React.useState(defaultSort !== null && defaultSort !== void 0 ? defaultSort : null);
+    const sort = isSortControlled ? defaultSort !== null && defaultSort !== void 0 ? defaultSort : null : internalSort;
+    const setSort = React.useCallback((next) => {
+        if (!isSortControlled)
+            setInternalSort(next);
+        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(next);
+    }, [isSortControlled, onSortChange]);
+    /* ───── Filters ───── */
+    const [internalFilters, setInternalFilters] = React.useState(defaultFilters !== null && defaultFilters !== void 0 ? defaultFilters : []);
+    const filters = internalFilters;
+    const setFilters = React.useCallback((next) => {
+        setInternalFilters((prev) => {
+            const value = typeof next === "function" ? next(prev) : next;
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(value);
+            return value;
+        });
+    }, [onFilterChange]);
+    /* ───── Search ───── */
+    const [searchQuery, setSearchQueryState] = React.useState("");
+    const setSearchQuery = React.useCallback((query) => {
+        setSearchQueryState(query);
+        onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(query);
+    }, [onSearchChange]);
+    /* ───── Selection ───── */
+    const isSelectionControlled = controlledSelection !== undefined;
+    const [internalSelection, setInternalSelection] = React.useState(controlledSelection !== null && controlledSelection !== void 0 ? controlledSelection : []);
+    const selection = isSelectionControlled
+        ? controlledSelection
+        : internalSelection;
+    const setSelection = React.useCallback((next) => {
+        if (!isSelectionControlled)
+            setInternalSelection(next);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(next);
+    }, [isSelectionControlled, onSelectionChange]);
+    const toggleRow = React.useCallback((key) => {
+        if (selectionMode === "single") {
+            setSelection(selection[0] === key ? [] : [key]);
+            return;
+        }
+        const set = new Set(selection);
+        if (set.has(key))
+            set.delete(key);
+        else
+            set.add(key);
+        setSelection(Array.from(set));
+    }, [selection, selectionMode, setSelection]);
+    const allRowKeys = React.useMemo(() => data.map((row) => (0, sortUtils_1.resolveRowKey)(row, rowKey)), [data, rowKey]);
+    const toggleAll = React.useCallback(() => {
+        if (selectionMode === "single")
+            return;
+        const allSelected = selection.length === allRowKeys.length && allRowKeys.length > 0;
+        setSelection(allSelected ? [] : allRowKeys);
+    }, [allRowKeys, selection, selectionMode, setSelection]);
+    const clearSelection = React.useCallback(() => setSelection([]), [setSelection]);
+    /* ───── Pagination ───── */
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const [pageSize, setPageSize] = React.useState((_a = persisted === null || persisted === void 0 ? void 0 : persisted.pageSize) !== null && _a !== void 0 ? _a : defaultPageSize);
+    const setPage = React.useCallback((page, size) => {
+        const effectiveSize = size !== null && size !== void 0 ? size : pageSize;
+        setPageIndex(page);
+        if (size !== undefined)
+            setPageSize(size);
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page, effectiveSize);
+    }, [onPageChange, pageSize]);
+    React.useEffect(() => {
+        if (paginationMode === "server")
+            return;
+        const maxPage = Math.max(0, Math.ceil(data.length / pageSize) - 1);
+        if (pageIndex > maxPage)
+            setPageIndex(maxPage);
+    }, [data.length, pageSize, pageIndex, paginationMode]);
+    /* ───── Derived: filter → search → sort → paginate ───── */
+    const processed = React.useMemo(() => {
+        if (paginationMode === "server") {
+            return data;
+        }
+        let result = filterable ? (0, filterUtils_1.filterData)(data, filters, columns) : data;
+        if (searchable && !isServerSearch) {
+            result = (0, filterUtils_1.searchData)(result, searchQuery, columns);
+        }
+        if (sortable)
+            result = (0, sortUtils_1.sortData)(result, sort, columns);
+        return result;
+    }, [
+        data,
+        columns,
+        filterable,
+        filters,
+        searchable,
+        isServerSearch,
+        searchQuery,
+        sortable,
+        sort,
+        paginationMode,
+    ]);
+    const pageCount = React.useMemo(() => {
+        if (paginationMode === "server") {
+            return Math.max(1, Math.ceil((totalCount !== null && totalCount !== void 0 ? totalCount : 0) / pageSize));
+        }
+        if (!pagination)
+            return 1;
+        return Math.max(1, Math.ceil(processed.length / pageSize));
+    }, [paginationMode, totalCount, pageSize, pagination, processed.length]);
+    const pageData = React.useMemo(() => {
+        if (paginationMode === "server" || !pagination)
+            return processed;
+        const start = pageIndex * pageSize;
+        return processed.slice(start, start + pageSize);
+    }, [processed, pagination, paginationMode, pageIndex, pageSize]);
+    /* ───── Helpers ───── */
+    const isAllSelected = allRowKeys.length > 0 && selection.length === allRowKeys.length;
+    const isSomeSelected = selection.length > 0 && selection.length < allRowKeys.length;
+    const visibleColumns = React.useMemo(() => columns.filter((c) => columnVisibility[c.id] !== false), [columns, columnVisibility]);
+    const setColumnHidden = React.useCallback((id, hidden) => {
+        setColumnVisibility((prev) => (Object.assign(Object.assign({}, prev), { [id]: !hidden })));
+    }, []);
+    const setColumnWidth = React.useCallback((id, width) => {
+        setColumnWidths((prev) => (Object.assign(Object.assign({}, prev), { [id]: width })));
+    }, []);
+    React.useEffect(() => {
+        if (!(preferences === null || preferences === void 0 ? void 0 : preferences.storageKey))
+            return;
+        writePersisted(preferences.storageKey, {
+            columnVisibility,
+            columnWidths,
+            density,
+            pageSize,
+        });
+    }, [
+        preferences === null || preferences === void 0 ? void 0 : preferences.storageKey,
+        columnVisibility,
+        columnWidths,
+        density,
+        pageSize,
+    ]);
+    React.useEffect(() => {
+        if (!(persisted === null || persisted === void 0 ? void 0 : persisted.density))
+            setDensity(densityProp);
+    }, [densityProp, persisted === null || persisted === void 0 ? void 0 : persisted.density]);
+    return {
+        pageData,
+        processed,
+        pageCount,
+        visibleColumns,
+        columnVisibility,
+        setColumnHidden,
+        columnWidths,
+        setColumnWidth,
+        density,
+        setDensity,
+        sort,
+        setSort,
+        filters,
+        setFilters,
+        searchQuery,
+        setSearchQuery,
+        selection,
+        toggleRow,
+        toggleAll,
+        clearSelection,
+        isAllSelected,
+        isSomeSelected,
+        pageIndex,
+        pageSize,
+        setPage,
+        setPageSize: (size) => {
+            setPageSize(size);
+            setPageIndex(0);
+            onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(0, size);
+        },
+        allRowKeys,
+    };
+}

package/dist/components-v2/Table/hooks/useTableKeyboard.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+export interface UseTableKeyboardOptions {
+    /** Row count currently rendered. */
+    rowCount: number;
+    /** Visible column count (excluding selection column). */
+    columnCount: number;
+    /** Total interactive columns including selection column at index 0. */
+    hasSelectionColumn: boolean;
+    onActivateRow: (rowIndex: number) => void;
+    onToggleRow: (rowIndex: number) => void;
+    onClearSelection: () => void;
+}
+export interface KeyboardCellPos {
+    row: number;
+    col: number;
+}
+/**
+ * Manages a single tab-focused active cell with arrow / Home / End / Ctrl+Home /
+ * Ctrl+End / Space / Enter / Escape semantics for grid navigation.
+ */
+export declare function useTableKeyboard({ rowCount, columnCount, hasSelectionColumn, onActivateRow, onToggleRow, onClearSelection, }: UseTableKeyboardOptions): {
+    active: KeyboardCellPos;
+    setActive: React.Dispatch<React.SetStateAction<KeyboardCellPos>>;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+};

package/dist/components-v2/Table/hooks/useTableKeyboard.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableKeyboard = useTableKeyboard;
+const React = __importStar(require("react"));
+/**
+ * Manages a single tab-focused active cell with arrow / Home / End / Ctrl+Home /
+ * Ctrl+End / Space / Enter / Escape semantics for grid navigation.
+ */
+function useTableKeyboard({ rowCount, columnCount, hasSelectionColumn, onActivateRow, onToggleRow, onClearSelection, }) {
+    const [active, setActive] = React.useState({ row: 0, col: 0 });
+    const totalCols = columnCount + (hasSelectionColumn ? 1 : 0);
+    React.useEffect(() => {
+        setActive((prev) => ({
+            row: Math.min(Math.max(prev.row, -1), Math.max(rowCount - 1, 0)),
+            col: Math.min(Math.max(prev.col, 0), Math.max(totalCols - 1, 0)),
+        }));
+    }, [rowCount, totalCols]);
+    const handleKeyDown = React.useCallback((event) => {
+        const { row, col } = active;
+        const target = event.target;
+        const isFromInput = target.tagName === "INPUT" ||
+            target.tagName === "TEXTAREA" ||
+            target.tagName === "SELECT" ||
+            target.isContentEditable;
+        switch (event.key) {
+            case "ArrowLeft":
+                event.preventDefault();
+                setActive({ row, col: Math.max(0, col - 1) });
+                return;
+            case "ArrowRight":
+                event.preventDefault();
+                setActive({ row, col: Math.min(totalCols - 1, col + 1) });
+                return;
+            case "ArrowUp":
+                event.preventDefault();
+                setActive({ row: Math.max(-1, row - 1), col });
+                return;
+            case "ArrowDown":
+                event.preventDefault();
+                setActive({ row: Math.min(rowCount - 1, row + 1), col });
+                return;
+            case "Home":
+                event.preventDefault();
+                setActive(event.ctrlKey || event.metaKey
+                    ? { row: 0, col: 0 }
+                    : { row, col: 0 });
+                return;
+            case "End":
+                event.preventDefault();
+                setActive(event.ctrlKey || event.metaKey
+                    ? { row: rowCount - 1, col: totalCols - 1 }
+                    : { row, col: totalCols - 1 });
+                return;
+            case " ":
+                if (isFromInput)
+                    return;
+                if (row >= 0) {
+                    event.preventDefault();
+                    onToggleRow(row);
+                }
+                return;
+            case "Enter":
+                if (isFromInput)
+                    return;
+                if (row >= 0) {
+                    event.preventDefault();
+                    onActivateRow(row);
+                }
+                return;
+            case "Escape":
+                event.preventDefault();
+                onClearSelection();
+                return;
+            default:
+                return;
+        }
+    }, [active, totalCols, rowCount, onActivateRow, onToggleRow, onClearSelection]);
+    return { active, setActive, handleKeyDown };
+}

package/dist/components-v2/Table/hooks/useVirtualScroll.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface UseVirtualScrollOptions {
+    rowCount: number;
+    rowHeight: number;
+    /** Force virtualization on/off; otherwise auto-enable above threshold. */
+    enabled?: boolean;
+    threshold?: number;
+    /** Extra rows rendered above/below the viewport. */
+    overscan?: number;
+    /** Viewport element. */
+    scrollContainerRef: React.RefObject<HTMLElement>;
+}
+export interface VirtualWindow {
+    /** Index of first row to render (inclusive). */
+    startIndex: number;
+    /** Index of last row to render (exclusive). */
+    endIndex: number;
+    /** Spacer height before the rendered slice. */
+    paddingTop: number;
+    /** Spacer height after the rendered slice. */
+    paddingBottom: number;
+    /** Whether virtualization is currently active. */
+    active: boolean;
+}
+/**
+ * Lightweight fixed-row-height virtual scroller. Avoids pulling in the full
+ * react-window dependency for the common case.
+ */
+export declare function useVirtualScroll({ rowCount, rowHeight, enabled, threshold, overscan, scrollContainerRef, }: UseVirtualScrollOptions): VirtualWindow;

package/dist/components-v2/Table/hooks/useVirtualScroll.js

@@ -0,0 +1,83 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVirtualScroll = useVirtualScroll;
+const React = __importStar(require("react"));
+/**
+ * Lightweight fixed-row-height virtual scroller. Avoids pulling in the full
+ * react-window dependency for the common case.
+ */
+function useVirtualScroll({ rowCount, rowHeight, enabled, threshold = 500, overscan = 8, scrollContainerRef, }) {
+    const active = enabled !== null && enabled !== void 0 ? enabled : rowCount > threshold;
+    const [scrollTop, setScrollTop] = React.useState(0);
+    const [viewportHeight, setViewportHeight] = React.useState(600);
+    React.useEffect(() => {
+        if (!active)
+            return;
+        const node = scrollContainerRef.current;
+        if (!node)
+            return;
+        const onScroll = () => setScrollTop(node.scrollTop);
+        const onResize = () => setViewportHeight(node.clientHeight);
+        onResize();
+        node.addEventListener("scroll", onScroll, { passive: true });
+        const ro = new ResizeObserver(onResize);
+        ro.observe(node);
+        return () => {
+            node.removeEventListener("scroll", onScroll);
+            ro.disconnect();
+        };
+    }, [active, scrollContainerRef]);
+    if (!active) {
+        return {
+            startIndex: 0,
+            endIndex: rowCount,
+            paddingTop: 0,
+            paddingBottom: 0,
+            active: false,
+        };
+    }
+    const firstVisible = Math.floor(scrollTop / rowHeight);
+    const visibleCount = Math.ceil(viewportHeight / rowHeight);
+    const startIndex = Math.max(0, firstVisible - overscan);
+    const endIndex = Math.min(rowCount, firstVisible + visibleCount + overscan);
+    return {
+        startIndex,
+        endIndex,
+        paddingTop: startIndex * rowHeight,
+        paddingBottom: Math.max(0, (rowCount - endIndex) * rowHeight),
+        active: true,
+    };
+}

package/dist/components-v2/Table/settings/ManageColumns.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { ColumnDef } from "../TableProps";
+export interface ManageColumnsProps<T> {
+    columns: ColumnDef<T>[];
+    columnVisibility: Record<string, boolean>;
+    onChange: (id: string, hidden: boolean) => void;
+}
+/**
+ * Toolbar dropdown for toggling column visibility. Columns with
+ * `enableHiding === false` are non-toggleable.
+ */
+export declare function ManageColumns<T>({ columns, columnVisibility, onChange, }: ManageColumnsProps<T>): React.ReactElement;