pixelize-design-library 2.2.182 → 2.2.183

package/dist/Components/Table/Components/Pagination.js

@@ -16,7 +16,7 @@ var Pagination = function (_a) {
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
     var isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", minW: 0, overflow: "hidden", flexWrap: "nowrap" },
+    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap" },
         (!isServerPagination || paginationSelectOptions) && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20, isDisabled: dataLength === 0 },
             !paginationSelectOptions && dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
             computedOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, String(size))); }))),

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

@@ -45,10 +45,10 @@ var TableActions_1 = __importDefault(require("./TableActions"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableBody = function (_a) {
-    var _b, _c, _d;
+    var _b, _c, _d, _e, _f;
     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 theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_2.useState)(new Set()), expandedRows = _e[0], setExpandedRows = _e[1];
+    var _g = (0, react_2.useState)(new Set()), expandedRows = _g[0], setExpandedRows = _g[1];
     var toggleRowExpansion = function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
@@ -84,68 +84,73 @@ var TableBody = function (_a) {
         (isCheckbox ? 1 : 0) +
         (isContent ? 1 : 0) +
         (isLink ? 1 : 0);
-    if (isLoading) {
+    if (isLoading && data.length === 0) {
         return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }
-    if (data.length === 0) {
+    if (!isLoading && data.length === 0) {
         return (react_2.default.createElement(react_1.Tr, { backgroundColor: (_b = theme.colors.background) === null || _b === void 0 ? void 0 : _b[50] },
             react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
                 react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500] },
                     react_2.default.createElement("p", null, "No data found")))));
     }
-    return (react_2.default.createElement(react_2.default.Fragment, null, data.map(function (row, index) {
-        var _a;
-        var rowIndex = startRow + index;
-        var isExpanded = expandedRows.has(rowIndex);
-        var isChecked = selections.includes(row.id);
-        return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
-            react_2.default.createElement(react_1.Tr, { key: index + 1, sx: isChecked
-                    ? {
-                        "& td": {
-                            backgroundColor: theme.colors.disabled[100],
-                        },
-                    }
-                    : {} },
-                isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!((_a = row === null || row === void 0 ? void 0 : row.content) === null || _a === void 0 ? void 0 : _a.call(row)) })),
-                isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
-                columns.map(function (header, headerIndex) {
-                    var _a, _b, _c, _d, _e, _f, _g;
-                    if (header.isHidden)
-                        return null;
-                    var isFrozen = header.isFreeze;
-                    var leftOffset = (0, table_1.TableCellCalculation)({
-                        isFrozen: isFrozen,
-                        columnWidths: columnWidths,
-                        headerIndex: headerIndex,
-                        isCheckbox: isCheckbox,
-                        header: header,
-                        row: row,
-                        freezedBgColor: freezedBgColor,
-                        index: index,
-                    }).leftOffset;
-                    return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
-                            return !header.node
-                                ? handleRowClick(row, {
-                                    label: header.label,
-                                    id: header.id,
-                                })
-                                : null;
-                        }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
-                            ? "none"
-                            : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
-                            ? {}
-                            : {
-                                backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
-                            } },
-                        react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
-                }),
-                isLink && react_2.default.createElement(RenderView, { row: row })),
-            row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
-                react_2.default.createElement(react_1.Td, { colSpan: columns.length +
-                        (isCheckbox ? 1 : 0) +
-                        (isContent ? 1 : 0) +
-                        (isLink ? 1 : 0), p: 2 },
-                    react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
-    })));
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        isLoading && data.length > 0 && (react_2.default.createElement(react_1.Tr, null,
+            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: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.primary) === null || _f === void 0 ? void 0 : _f[500]) || "blue.500" }))))),
+        data.map(function (row, index) {
+            var rowIndex = startRow + index;
+            var isExpanded = expandedRows.has(rowIndex);
+            var isChecked = selections.includes(row.id);
+            return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
+                react_2.default.createElement(react_1.Tr, { key: index + 1, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: isChecked
+                        ? {
+                            "& td": {
+                                backgroundColor: theme.colors.disabled[100],
+                            },
+                        }
+                        : {} },
+                    isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!(row === null || row === void 0 ? void 0 : row.content) })),
+                    isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
+                    columns.map(function (header, headerIndex) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        if (header.isHidden)
+                            return null;
+                        var isFrozen = header.isFreeze;
+                        var leftOffset = (0, table_1.TableCellCalculation)({
+                            isFrozen: isFrozen,
+                            columnWidths: columnWidths,
+                            headerIndex: headerIndex,
+                            isCheckbox: isCheckbox,
+                            header: header,
+                            row: row,
+                            freezedBgColor: freezedBgColor,
+                            index: index,
+                            theme: theme,
+                        }).leftOffset;
+                        return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
+                                return !header.node
+                                    ? handleRowClick(row, {
+                                        label: header.label,
+                                        id: header.id,
+                                    })
+                                    : null;
+                            }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
+                                ? "none"
+                                : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
+                                ? {}
+                                : {
+                                    backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
+                                } },
+                            react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]))));
+                    }),
+                    isLink && react_2.default.createElement(RenderView, { row: row })),
+                row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
+                    react_2.default.createElement(react_1.Td, { colSpan: columns.length +
+                            (isCheckbox ? 1 : 0) +
+                            (isContent ? 1 : 0) +
+                            (isLink ? 1 : 0), p: 2 },
+                        react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
+        })));
 };
 exports.default = TableBody;

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

@@ -41,6 +41,5 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     columnsList: TableHeaderProps[];
     handleColumnPreferences: (columns: any) => void;
-    handleGlobalSearch: (query: string) => void;
 };
 export default useTable;

package/dist/Components/Table/Components/useTable.js

@@ -23,7 +23,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var table_1 = require("../../../Utils/table");
-var defaultPageSize = 50;
+var defaultPageSize = 20;
 var mergeColumnWithPreference = function (pref, originalCol) {
     if (!pref || typeof pref !== "object") {
         return __assign({}, originalCol);
@@ -46,16 +46,17 @@ var useTable = function (_a) {
     var _d = (0, react_1.useState)([]), columnsSort = _d[0], setColumnsSort = _d[1];
     var _e = (0, react_1.useState)(0), currentPage = _e[0], setCurrentPage = _e[1];
     var _f = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _f[0], setRowsPerPage = _f[1];
-    (0, react_1.useEffect)(function () {
-        if (noOfRowsPerPage !== undefined) {
+    var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
+    if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
+        prevRowsPerPageProp.current = noOfRowsPerPage;
+        if (noOfRowsPerPage !== undefined && noOfRowsPerPage !== rowsPerPage) {
             setRowsPerPage(noOfRowsPerPage);
         }
-    }, [noOfRowsPerPage]);
-    var tableData = (0, react_1.useMemo)(function () { return data; }, [data]);
-    var _g = (0, react_1.useState)(tableData), filteredData = _g[0], setFilteredData = _g[1];
-    var _h = (0, react_1.useState)(function () {
+    }
+    var tableData = data;
+    var _g = (0, react_1.useState)(function () {
         return columns.map(function (col) { return (__assign({}, col)); });
-    }), columnsList = _h[0], setColumnsList = _h[1];
+    }), columnsList = _g[0], setColumnsList = _g[1];
     (0, react_1.useEffect)(function () {
         var _a;
         var columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
@@ -72,9 +73,6 @@ var useTable = function (_a) {
             setColumnsList(columns.map(function (col) { return (__assign({}, col)); }));
         }
     }, [tablePreferences, columns]);
-    (0, react_1.useEffect)(function () {
-        setFilteredData(tableData);
-    }, [tableData]);
     var tableContainerStyles = (0, react_1.useMemo)(function () {
         var _a;
         return ({
@@ -106,13 +104,12 @@ var useTable = function (_a) {
     ]);
     var startRow = (0, react_1.useMemo)(function () { return (!isPagination ? 0 : currentPage * rowsPerPage); }, [currentPage, isPagination, rowsPerPage]);
     var endRow = (0, react_1.useMemo)(function () { return (!isPagination ? tableData.length : startRow + rowsPerPage); }, [isPagination, rowsPerPage, startRow, tableData.length]);
-    (0, react_1.useEffect)(function () {
+    var filteredData = (0, react_1.useMemo)(function () {
         if (isServerPagination) {
-            return setFilteredData(tableData);
+            return tableData;
         }
         var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
-        var data = sortedData.slice(startRow, endRow);
-        return setFilteredData(data);
+        return sortedData.slice(startRow, endRow);
     }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
     var handlePageSizeChange = function (event) {
         var value = Number(event.target.value);
@@ -166,11 +163,6 @@ var useTable = function (_a) {
         savePreferences &&
             savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
     };
-    var handleGlobalSearch = function (query) {
-        if (!query)
-            setFilteredData(tableData);
-        setFilteredData((0, table_1.globalSearchFilter)(tableData, query));
-    };
     return {
         tableData: tableData,
         tableContainerStyles: tableContainerStyles,
@@ -192,7 +184,6 @@ var useTable = function (_a) {
         setCurrentPage: setCurrentPage,
         columnsList: columnsList,
         handleColumnPreferences: handleColumnPreferences,
-        handleGlobalSearch: handleGlobalSearch,
     };
 };
 exports.default = useTable;

package/dist/Components/Table/Table.js

@@ -142,7 +142,7 @@ function Table(_a) {
             onPaginationRef.current(currentPage + 1, rowsPerPage, record, direction);
             prevPageRef.current = currentPage;
         }
-    }, [currentPage, rowsPerPage, pages]);
+    }, [currentPage, rowsPerPage]);
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     var controlsHeight = 45;
     var estimatedRowHeight = 45;
@@ -223,7 +223,7 @@ function Table(_a) {
                         react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
                     react_1.default.createElement(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }),
                     react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2 },
-                        (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 1 280px", minW: 0, overflow: "hidden" },
+                        (isPagination || isServerPagination) && !isCompactHeader && (react_1.default.createElement(react_2.Box, { flex: "0 0 auto" },
                             react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }))),
                         (isPagination || isServerPagination) && isCompactHeader && tableData.length > 0 && (react_1.default.createElement(react_2.Popover, { placement: "bottom-end" },
                             react_1.default.createElement(react_2.PopoverTrigger, null,

package/dist/Utils/table.d.ts

@@ -23,8 +23,9 @@ type TableCellCalculationProps = {
     row: DataObject;
     freezedBgColor?: string;
     index: number;
+    theme: any;
 };
-export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, }: TableCellCalculationProps) => {
+export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, theme, }: TableCellCalculationProps) => {
     leftOffset: number;
     cellBgColor: any;
     rowBgColor: any;

package/dist/Utils/table.js

@@ -49,7 +49,6 @@ exports.debounce = debounce;
 exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 var react_1 = __importStar(require("react"));
-var useCustomTheme_1 = require("../Theme/useCustomTheme");
 function SortMultiColumnData(data, sortConfig) {
     if (!sortConfig.length)
         return data;
@@ -210,8 +209,7 @@ var pageSizeCalculation = function (records) {
 exports.pageSizeCalculation = pageSizeCalculation;
 var TableCellCalculation = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var isFrozen = _a.isFrozen, columnWidths = _a.columnWidths, headerIndex = _a.headerIndex, isCheckbox = _a.isCheckbox, header = _a.header, row = _a.row, freezedBgColor = _a.freezedBgColor, index = _a.index;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var isFrozen = _a.isFrozen, columnWidths = _a.columnWidths, headerIndex = _a.headerIndex, isCheckbox = _a.isCheckbox, header = _a.header, row = _a.row, freezedBgColor = _a.freezedBgColor, index = _a.index, theme = _a.theme;
     var leftOffset = isFrozen
         ? (0, exports.calculateLeftOffset)(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
         : 0;

package/package.json

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