pixelize-design-library 2.2.192 → 2.2.194

package/dist/Components/Table/Components/TableBody.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, }: TableBodyPageProps) => React.JSX.Element;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, }: TableBodyPageProps) => React.JSX.Element;
 export default TableBody;

package/dist/Components/Table/Components/TableBody.js

@@ -84,10 +84,62 @@ var TableRow = react_2.default.memo(function (_a) {
 });
 var TableBody = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows;
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, loadingSkeletonRows = _a.loadingSkeletonRows, scrollContainerRef = _a.scrollContainerRef;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _j = (0, react_2.useState)(new Set()), expandedRows = _j[0], setExpandedRows = _j[1];
     var selectionsSet = (0, react_2.useMemo)(function () { return new Set(selections); }, [selections]);
+    // --- Row virtualization ---------------------------------------------------
+    // Rows are a fixed 45px tall (see the `height={45}` on every <Td/> below),
+    // and the scroll viewport is capped at ~500px, so only ~11 rows are ever
+    // visible. Mounting all 50/100 page rows is what makes paging freeze. We
+    // render only the rows inside the viewport (+ overscan) and reserve the
+    // remaining height with empty spacer rows. Spacer rows (rather than CSS
+    // transforms) keep the table in normal flow so the sticky header and
+    // `position: sticky` frozen columns keep working.
+    // Disabled when expandable content rows are present, since those break the
+    // fixed-height assumption.
+    var ROW_HEIGHT = 45;
+    var OVERSCAN = 6;
+    var VIRTUALIZE_THRESHOLD = 30;
+    var shouldVirtualize = !isContent && data.length > VIRTUALIZE_THRESHOLD;
+    var _k = (0, react_2.useState)(0), scrollTop = _k[0], setScrollTop = _k[1];
+    var _l = (0, react_2.useState)(0), viewportH = _l[0], setViewportH = _l[1];
+    (0, react_2.useEffect)(function () {
+        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (!el || !shouldVirtualize)
+            return;
+        var onScroll = function () { return setScrollTop(el.scrollTop); };
+        var measure = function () { return setViewportH(el.clientHeight); };
+        measure();
+        setScrollTop(el.scrollTop);
+        el.addEventListener("scroll", onScroll, { passive: true });
+        window.addEventListener("resize", measure);
+        return function () {
+            el.removeEventListener("scroll", onScroll);
+            window.removeEventListener("resize", measure);
+        };
+    }, [scrollContainerRef, shouldVirtualize, data.length]);
+    // New page: jump back to the top so the window recomputes from row 0.
+    (0, react_2.useEffect)(function () {
+        if (!shouldVirtualize)
+            return;
+        var el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (el)
+            el.scrollTop = 0;
+        setScrollTop(0);
+    }, [startRow, shouldVirtualize, scrollContainerRef]);
+    var total = data.length;
+    var firstIndex = 0;
+    var lastIndex = total;
+    if (shouldVirtualize) {
+        var vh = viewportH || 500;
+        firstIndex = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+        var count = Math.ceil(vh / ROW_HEIGHT) + OVERSCAN * 2;
+        lastIndex = Math.min(total, firstIndex + count);
+    }
+    var visibleRows = shouldVirtualize ? data.slice(firstIndex, lastIndex) : data;
+    var topPad = firstIndex * ROW_HEIGHT;
+    var bottomPad = (total - lastIndex) * ROW_HEIGHT;
     var toggleRowExpansion = (0, react_2.useCallback)(function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
@@ -133,12 +185,17 @@ var TableBody = function (_a) {
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0 },
                 react_2.default.createElement(react_1.Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10 },
                     react_2.default.createElement(react_1.Spinner, { size: "sm", color: ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[500]) || "blue.500" }))))),
-        data.map(function (row, index) {
+        shouldVirtualize && topPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: topPad } },
+            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }))),
+        visibleRows.map(function (row, i) {
             var _a;
+            var index = firstIndex + i;
             var rowIndex = startRow + index;
             var isExpanded = expandedRows.has(rowIndex);
             var isChecked = selectionsSet.has(row.id);
             return (react_2.default.createElement(TableRow, { key: (_a = row.id) !== null && _a !== void 0 ? _a : rowIndex, row: row, rowIndex: rowIndex, index: index, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, hoverStyle: hoverStyle, handleCheckbox: handleCheckbox, onRowClick: onRowClick, toggleRowExpansion: toggleRowExpansion }));
-        })));
+        }),
+        shouldVirtualize && bottomPad > 0 && (react_2.default.createElement("tr", { "aria-hidden": "true", style: { height: bottomPad } },
+            react_2.default.createElement("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } })))));
 };
 exports.default = TableBody;

package/dist/Components/Table/Components/TableBody.virtualize.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/Table/Components/TableBody.virtualize.test.js

@@ -0,0 +1,93 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var TableBody_1 = __importDefault(require("./TableBody"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 50: "#fff", 100: "#f9f9f9" },
+            backgroundColor: { light: "#fafafa", secondary: "#eee", muted: "#f3f3f3" },
+            disabled: { 100: "#eee" },
+            gray: { 100: "#f0f0f0", 200: "#eee", 300: "#ddd", 400: "#ccc", 500: "#bbb", 600: "#666" },
+            border: { 500: "#ddd" },
+            primary: { 500: "#3182ce" },
+            text: { 500: "#555" },
+            secondary: { opacity: { 4: "rgba(0,0,0,0.04)" } },
+            white: "#fff",
+        },
+        shadows: { lg: "0 0 0" },
+    }); },
+}); });
+var columns = [{ id: "name", label: "Name" }];
+var makeData = function (n) {
+    return Array.from({ length: n }, function (_, i) { return ({ id: i, name: "Row ".concat(i) }); });
+};
+var Harness = function (_a) {
+    var count = _a.count;
+    var ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_3.ChakraProvider, null,
+        react_1.default.createElement("div", { ref: ref },
+            react_1.default.createElement(react_3.Table, null,
+                react_1.default.createElement(react_3.Tbody, null,
+                    react_1.default.createElement(TableBody_1.default, { data: makeData(count), columns: columns, startRow: 0, endRow: count, columnWidths: [120], isCheckbox: false, isContent: false, isLink: false, isActionFreeze: false, noBorders: false, selections: [], handleCheckbox: function () { }, scrollContainerRef: ref }))))));
+};
+describe("TableBody virtualization", function () {
+    it("windows large pages and reserves height with spacer rows", function () {
+        var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 100 })), container = _a.container, queryByText = _a.queryByText;
+        // jsdom clientHeight=0 -> 500px fallback -> ceil(500/45)+12 = 24 rows
+        expect(queryByText("Row 0")).toBeInTheDocument();
+        expect(queryByText("Row 23")).toBeInTheDocument();
+        // Rows beyond the window are not mounted.
+        expect(queryByText("Row 50")).not.toBeInTheDocument();
+        expect(queryByText("Row 99")).not.toBeInTheDocument();
+        // A trailing spacer reserves the height of the unrendered rows.
+        var spacers = container.querySelectorAll('tr[aria-hidden="true"]');
+        expect(spacers.length).toBe(1);
+        expect(spacers[0]).toHaveStyle({ height: "".concat((100 - 24) * 45, "px") });
+    });
+    it("renders every row and no spacers below the threshold", function () {
+        var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 30 })), container = _a.container, queryByText = _a.queryByText;
+        expect(queryByText("Row 0")).toBeInTheDocument();
+        expect(queryByText("Row 29")).toBeInTheDocument();
+        expect(container.querySelectorAll('tr[aria-hidden="true"]').length).toBe(0);
+    });
+});

package/dist/Components/Table/Table.js

@@ -278,5 +278,5 @@ function Table(_a) {
                                         ? false
                                         : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting })),
                         react_1.default.createElement(react_3.Tbody, null,
-                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
+                            react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))))));
 }

package/dist/Components/Table/TableProps.d.ts

@@ -118,6 +118,7 @@ export type TableBodyPageProps = Pick<TableProps, "columns" | "isCheckbox" | "da
     selections: (string | number)[];
     isContent: boolean;
     isLink: boolean;
+    scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
 };
 export type TableFiltersProps = {
     header: DataObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.192",
+  "version": "2.2.194",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",