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

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

@@ -1,17 +1,49 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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 });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
-var Pagination = function (_a) {
+var Pagination = react_1.default.memo(function (_a) {
     var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination, paginationSelectOptions = _a.paginationSelectOptions;
-    var computedOptions = paginationSelectOptions && paginationSelectOptions.length
-        ? paginationSelectOptions
-        : (0, table_1.pageSizeCalculation)(dataLength);
+    var computedOptions = (0, react_1.useMemo)(function () {
+        return paginationSelectOptions && paginationSelectOptions.length
+            ? paginationSelectOptions
+            : (0, table_1.pageSizeCalculation)(dataLength);
+    }, [paginationSelectOptions, dataLength]);
     // const isLeftDisabled = currentPage === 0;
     // const isRightDisabled = currentPage >= pages - 1;
     var isLeftDisabled = dataLength === 0 || currentPage === 0;
@@ -32,5 +64,5 @@ var Pagination = function (_a) {
                 react_1.default.createElement(lucide_react_1.ChevronRight, null)),
             react_1.default.createElement(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
                 react_1.default.createElement(lucide_react_1.ChevronsRight, null))))));
-};
+});
 exports.default = Pagination;

package/dist/Components/Table/Components/TableFilters.js

@@ -35,7 +35,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
-var table_1 = require("../../../Utils/table");
 var lucide_react_1 = require("lucide-react");
 var TableFilters = (0, react_1.memo)(function (_a) {
     var _b, _c;
@@ -43,9 +42,16 @@ var TableFilters = (0, react_1.memo)(function (_a) {
     var theme = (0, react_2.useTheme)();
     var searchRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
-    var debounceRef = (0, table_1.debounce)(function (value) {
-        setColumnsSearch(value);
-    }, 700);
+    var setColumnsSearchRef = (0, react_1.useRef)(setColumnsSearch);
+    setColumnsSearchRef.current = setColumnsSearch;
+    var debounceTimerRef = (0, react_1.useRef)(null);
+    var debouncedSearch = (0, react_1.useCallback)(function (value) {
+        if (debounceTimerRef.current)
+            clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = setTimeout(function () {
+            setColumnsSearchRef.current(value);
+        }, 700);
+    }, []);
     (0, react_1.useEffect)(function () {
         if (columnsSearch.length && searchRef.current) {
             searchRef.current.value = columnsSearch;
@@ -77,7 +83,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
                             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, color: "gray.400", boxSize: 4 })),
                         react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
                                 e.stopPropagation();
-                                debounceRef(e.target.value);
+                                debouncedSearch(e.target.value);
                             }, onFocus: function (e) { return e.stopPropagation(); } })))))));
 });
 exports.default = TableFilters;

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

@@ -38,14 +38,15 @@ var mergeColumnWithPreference = function (pref, originalCol) {
     return next;
 };
 var useTable = function (_a) {
+    var _b, _c;
     var tableBorderColor = _a.tableBorderColor, data = _a.data, isPagination = _a.isPagination, selections = _a.selections, onSelection = _a.onSelection, tablePreferences = _a.tablePreferences, savePreferences = _a.savePreferences, noOfRowsPerPage = _a.noOfRowsPerPage, isServerPagination = _a.isServerPagination, totalRecords = _a.totalRecords, columns = _a.columns, onNoOfRowsPerPageChange = _a.onNoOfRowsPerPageChange, defaultVisibleColumns = _a.defaultVisibleColumns;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var headerRefs = (0, react_1.useRef)([]);
-    var _b = (0, react_1.useState)([]), columnWidths = _b[0], setColumnWidths = _b[1];
-    var _c = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _c[0], setSelection = _c[1];
-    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];
+    var _d = (0, react_1.useState)([]), columnWidths = _d[0], setColumnWidths = _d[1];
+    var _e = (0, react_1.useState)(selections !== null && selections !== void 0 ? selections : []), selection = _e[0], setSelection = _e[1];
+    var _f = (0, react_1.useState)([]), columnsSort = _f[0], setColumnsSort = _f[1];
+    var _g = (0, react_1.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
+    var _h = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
     var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
     if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
         prevRowsPerPageProp.current = noOfRowsPerPage;
@@ -54,12 +55,12 @@ var useTable = function (_a) {
         }
     }
     var tableData = data;
-    var _g = (0, react_1.useState)(function () {
+    var _j = (0, react_1.useState)(function () {
         return columns.map(function (col, i) {
             var _a;
             return (__assign(__assign({}, col), { isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false) }));
         });
-    }), columnsList = _g[0], setColumnsList = _g[1];
+    }), columnsList = _j[0], setColumnsList = _j[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 : [];
@@ -90,8 +91,18 @@ var useTable = function (_a) {
             overflowY: "auto",
         });
     }, [tableBorderColor, theme]);
-    var isContent = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.content; }); }, [tableData]);
-    var isLink = (0, react_1.useMemo)(function () { return tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; }); }, [tableData]);
+    var prevIsContent = (0, react_1.useRef)(false);
+    var prevIsLink = (0, react_1.useRef)(false);
+    var isContent = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.content; });
+        prevIsContent.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    var isLink = (0, react_1.useMemo)(function () {
+        var result = tableData.some(function (o) { return o.onLink || o.onDelete || o.onEdit; });
+        prevIsLink.current = result;
+        return result;
+    }, [tableData.length === 0 ? 0 : (_c = tableData[0]) === null || _c === void 0 ? void 0 : _c.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
     (0, react_1.useEffect)(function () {
         var widths = headerRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
         setColumnWidths(widths);
@@ -128,24 +139,25 @@ var useTable = function (_a) {
     var handleSort = (0, react_1.useCallback)(function (field, sort) {
         if (!sort)
             return;
-        var newSortState = __spreadArray([], columnsSort, true);
-        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === field; });
-        if (existingIndex === -1) {
-            newSortState.push({
-                column: field,
-                direction: "asc", // Default to ascending when adding a column
-            });
-        }
-        else {
-            var existingSort = newSortState[existingIndex];
-            existingSort.direction = sort;
-        }
-        setColumnsSort(newSortState);
-    }, [columnsSort]);
+        setColumnsSort(function (prev) {
+            var newSortState = __spreadArray([], prev, true);
+            var existingIndex = newSortState.findIndex(function (s) { return s.column === field; });
+            if (existingIndex === -1) {
+                newSortState.push({
+                    column: field,
+                    direction: "asc",
+                });
+            }
+            else {
+                newSortState[existingIndex] = __assign(__assign({}, newSortState[existingIndex]), { direction: sort });
+            }
+            return newSortState;
+        });
+    }, []);
     (0, react_1.useEffect)(function () {
         setSelection(selections !== null && selections !== void 0 ? selections : []);
     }, [selections]);
-    var _h = (0, react_1.useState)(false), isSelecting = _h[0], setIsSelecting = _h[1];
+    var _k = (0, react_1.useState)(false), isSelecting = _k[0], setIsSelecting = _k[1];
     var selectionRef = (0, react_1.useRef)(selection);
     selectionRef.current = selection;
     var onSelectionRef = (0, react_1.useRef)(onSelection);

package/dist/Theme/Dark/palette.d.ts

@@ -0,0 +1,370 @@
+declare const darkPalette: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    tertiary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: {
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        info: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    background: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    backgroundColor: {
+        main: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
+        base: string;
+        tableHeader: string;
+    };
+    text: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    header: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    placeholder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    sidebar: {
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxborder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    border: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    disabled: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+export default darkPalette;