pixelize-design-library 2.1.20 → 2.1.22

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { TableHeaderPageProps } from "../TableProps";
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, }: TableHeaderPageProps) => React.JSX.Element>;
+export default _default;

package/dist/Components/Table/Components/TableHeader.js

@@ -0,0 +1,147 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var table_1 = require("../../../Utils/table");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TableFilters_1 = __importDefault(require("./TableFilters"));
+var lucide_react_1 = require("lucide-react");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+var TableHeader = function (_a) {
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var RenderCheckbox = (0, react_2.useCallback)(function () {
+        var _a, _b, _c, _d;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+            react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })));
+    }, [
+        checked,
+        freezedTextColor,
+        handleCheckbox,
+        isLoading,
+        noBorders,
+        theme.colors,
+    ]);
+    var RenderConent = (0, react_2.useCallback)(function () {
+        var _a, _b, _c, _d;
+        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
+    }, [noBorders, theme.colors]);
+    var RenderView = (0, react_2.useCallback)(function () {
+        var _a, _b, _c, _d;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
+    }, [noBorders, theme.colors, isActionFreeze]);
+    return (react_2.default.createElement(react_1.Tr, { pr: 0 },
+        isContent && react_2.default.createElement(RenderConent, null),
+        isCheckbox && react_2.default.createElement(RenderCheckbox, null),
+        columns.map(function (header, index) {
+            if (header === null || header === void 0 ? void 0 : header.isHidden)
+                return null;
+            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }));
+        }),
+        isLink && react_2.default.createElement(RenderView, null)));
+};
+exports.default = (0, react_2.memo)(TableHeader);
+var SortingIcon = (0, react_2.memo)(function (_a) {
+    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
+        sortState === "none" && react_2.default.createElement(lucide_react_1.ChevronsUpDown, { color: "black", size: 14 }),
+        sortState === "asc" && react_2.default.createElement(lucide_react_1.ChevronUp, { color: "black", size: 14 }),
+        sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { color: "black", size: 14 })));
+});
+var ColumnHeader = (0, react_2.memo)(function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort;
+    var _h = (0, react_2.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var isFrozen = header.isFreeze;
+    var leftOffset = isFrozen
+        ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
+        : undefined;
+    var isSorting = header.isSort
+        ? columnsSort.find(function (o) { return o.column === header.id; })
+        : undefined;
+    // const TextColor = isFrozen ? freezedTextColor : headerTextColor;
+    var handleMouseDown = function (e) {
+        var parentBox = e.target
+            .parentElement;
+        var th = parentBox.parentElement;
+        var startX = e.pageX;
+        var startWidth = th.offsetWidth;
+        var onMouseMove = function (moveEvent) {
+            var newWidth = startWidth + (moveEvent.pageX - startX);
+            th.style.width = "".concat(newWidth, "px");
+        };
+        var onMouseUp = function () {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+    };
+    var Sorting = (0, react_2.useCallback)(function (_a) {
+        var _b;
+        var isSorting = _a.isSorting, header = _a.header;
+        return (react_2.default.createElement(SortingIcon, { sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", handleSortClick: function () {
+                var direction = "asc";
+                if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
+                    direction = "desc";
+                }
+                else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
+                    direction = "none";
+                }
+                handleSort(header.id, direction);
+            } }));
+    }, [handleSort]);
+    var isFiltersEnabled = (isHovered && header.isSort) ||
+        ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
+    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[600], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, borderY: noBorders ? "none" : "0.063rem solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        react_2.default.createElement(react_1.Box, { display: "flex", color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.secondary) === null || _g === void 0 ? void 0 : _g[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
+            react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
+            react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
+                isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),
+                react_2.default.createElement(TableFilters_1.default, { header: header, setColumnsSearch: function (searchVal) {
+                        return setColumnsSearch(function (prev) {
+                            var _a;
+                            return (__assign(__assign({}, prev), (_a = {}, _a[header.id] = searchVal, _a)));
+                        });
+                    }, columnsSearch: columnsSearch[header.id] || "", onClose: function () { return setIsHovered(false); } })),
+            react_2.default.createElement("div", { className: "resize-handle", onMouseDown: handleMouseDown }))));
+});

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

@@ -0,0 +1,7 @@
+import React from "react";
+declare const TableLoading: () => React.JSX.Element;
+export default TableLoading;
+export declare const TableBodyLoading: ({ noOfColumns, borderColor, }: {
+    noOfColumns: number;
+    borderColor: string;
+}) => React.JSX.Element;

package/dist/Components/Table/Components/TableLoading.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBodyLoading = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var TableLoading = function () {
+    return (react_1.default.createElement(react_2.Box, { overflowX: "auto", p: 4 },
+        react_1.default.createElement(react_2.Table, { variant: "simple", width: "full" },
+            react_1.default.createElement(react_2.Thead, null,
+                react_1.default.createElement(react_2.Tr, null,
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })))),
+            react_1.default.createElement(react_2.Tbody, null, Array.from({ length: 5 }).map(function (_, rowIndex) { return (react_1.default.createElement(react_2.Tr, { key: rowIndex },
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })))); })))));
+};
+exports.default = TableLoading;
+var TableBodyLoading = function (_a) {
+    var noOfColumns = _a.noOfColumns, borderColor = _a.borderColor;
+    return (react_1.default.createElement(react_1.default.Fragment, null, Array.from({ length: 5 }).map(function (_, index) {
+        return (react_1.default.createElement(react_2.Tr, { key: index },
+            react_1.default.createElement(react_2.Td, { colSpan: noOfColumns, textAlign: "center", border: "1px solid ".concat(borderColor) },
+                react_1.default.createElement(react_2.Skeleton, { height: "15px", variant: "shine" }))));
+    })));
+};
+exports.TableBodyLoading = TableBodyLoading;

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

@@ -0,0 +1,6 @@
+import React from "react";
+interface TableSearchProps {
+    onSearch?: (value: string) => void;
+}
+declare const TableSearch: React.FC<TableSearchProps>;
+export default TableSearch;

package/dist/Components/Table/Components/TableSearch.js

@@ -0,0 +1,60 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var table_1 = require("../../../Utils/table");
+var TableSearch = function (_a) {
+    var _b, _c, _d, _e;
+    var onSearch = _a.onSearch;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _f = (0, react_1.useState)(false), showInput = _f[0], setShowInput = _f[1];
+    var _g = (0, react_1.useState)(""), query = _g[0], setQuery = _g[1];
+    var handleSearchClick = function () {
+        setShowInput(function (prev) { return !prev; });
+        if (showInput) {
+            setQuery("");
+            if (query)
+                onSearch === null || onSearch === void 0 ? void 0 : onSearch(""); // clear search on close
+        }
+    };
+    var handleDebounce = (0, table_1.useDebounce)(function (value) {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    }, 700);
+    var handleInputChange = function (e) {
+        var value = e.target.value;
+        setQuery(value);
+        handleDebounce(value);
+    };
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "2" },
+        !showInput && (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 5, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], onClick: handleSearchClick })),
+        showInput ? (react_1.default.createElement(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease" },
+            react_1.default.createElement(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500], _focus: { borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] }, autoFocus: true }),
+            react_1.default.createElement(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem" },
+                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.X, color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500], cursor: "pointer", onClick: handleSearchClick })))) : null));
+};
+exports.default = TableSearch;

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

@@ -0,0 +1,2 @@
+declare const useDebounce: (callback: Function, delay: number) => (...args: any[]) => void;
+export default useDebounce;

package/dist/Components/Table/Components/useDebounce.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+// First, create a custom debounce hook
+var useDebounce = function (callback, delay) {
+    var timeoutRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        return function () {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    var debouncedCallback = (0, react_1.useCallback)(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(function () {
+            callback.apply(void 0, args);
+        }, delay);
+    }, [callback, delay]);
+    return debouncedCallback;
+};
+exports.default = useDebounce;

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { ColumnSortingProps, DataObject, TableHeaderProps } from "../TableProps";
+type UseTableProps = {
+    tableBorderColor?: string;
+    data: DataObject[];
+    isPagination: boolean;
+    selections?: (string | number)[];
+    columns: TableHeaderProps[];
+    onSelection?: (selected: (string | number)[]) => void;
+    tablePreferences?: Record<string, any>;
+    savePreferences?: (data: Record<string, any>) => void;
+    noOfRowsPerPage?: number;
+    isServerPagination: boolean;
+    totalRecords: number;
+};
+declare const useTable: ({ tableBorderColor, data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, }: UseTableProps) => {
+    tableData: DataObject[];
+    tableContainerStyles: {
+        borderRadius: string;
+        borderWidth: string;
+        borderColor: string;
+        boxShadow: string;
+        maxHeight: string;
+        overflowY: string;
+    };
+    isContent: boolean;
+    isLink: boolean;
+    headerRefs: import("react").MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnWidths: number[];
+    handleSort: (field: string | number, sort: "asc" | "desc" | "none") => void;
+    handleCheckbox: (id: string | number) => void;
+    filteredData: DataObject[];
+    startRow: number;
+    endRow: number;
+    selection: (string | number)[];
+    columnsSort: ColumnSortingProps[];
+    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    pages: number;
+    currentPage: number;
+    rowsPerPage: number;
+    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

@@ -0,0 +1,168 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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 useTable = function (_a) {
+    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;
+    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 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)(columns), columnsList = _h[0], setColumnsList = _h[1];
+    (0, react_1.useEffect)(function () {
+        if (tablePreferences) {
+            var columnPreference = tablePreferences.columns;
+            if (columnPreference === null || columnPreference === void 0 ? void 0 : columnPreference.length) {
+                setColumnsList(columnPreference);
+            }
+        }
+    }, [tablePreferences]);
+    (0, react_1.useEffect)(function () {
+        setFilteredData(tableData);
+    }, [tableData]);
+    var tableContainerStyles = (0, react_1.useMemo)(function () {
+        var _a;
+        return ({
+            borderRadius: "10px 0 0 10px",
+            borderWidth: "0px 0px 0px 5px",
+            borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[500],
+            boxShadow: theme.shadows.lg,
+            maxHeight: "50vh",
+            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]);
+    (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);
+    }, []);
+    var pages = (0, react_1.useMemo)(function () {
+        if (isServerPagination) {
+            return Math.ceil(totalRecords / (noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : 1));
+        }
+        return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
+    }, [
+        isPagination,
+        rowsPerPage,
+        tableData.length,
+        totalRecords,
+        isServerPagination,
+        noOfRowsPerPage,
+    ]);
+    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 () {
+        if (isServerPagination) {
+            return setFilteredData(tableData);
+        }
+        var sortedData = (0, table_1.SortMultiColumnData)(tableData, columnsSort);
+        var data = sortedData.slice(startRow, endRow);
+        return setFilteredData(data);
+    }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
+    var handlePageSizeChange = function (event) {
+        var value = Number(event.target.value);
+        setRowsPerPage(value !== 0 ? value : defaultPageSize);
+        setCurrentPage(0);
+    };
+    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]);
+    (0, react_1.useEffect)(function () {
+        setSelection(selections !== null && selections !== void 0 ? selections : []);
+    }, [selections]);
+    var handleCheckbox = (0, react_1.useCallback)(function (id) {
+        var selectedItems = [];
+        if (id === 0) {
+            if (selection.length === tableData.length) {
+                selectedItems = [];
+            }
+            else {
+                selectedItems = tableData.map(function (item) { return item.id; });
+            }
+        }
+        else if (selection.includes(id)) {
+            selectedItems = selection.filter(function (item) { return item !== id; });
+        }
+        else {
+            selectedItems = __spreadArray(__spreadArray([], selection, true), [id], false);
+        }
+        setSelection(selectedItems);
+        onSelection && onSelection(selectedItems);
+    }, [onSelection, selection, tableData]);
+    var handleColumnPreferences = function (columns) {
+        setColumnsList(columns);
+        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,
+        isContent: isContent,
+        isLink: isLink,
+        headerRefs: headerRefs,
+        columnWidths: columnWidths,
+        handleSort: handleSort,
+        handleCheckbox: handleCheckbox,
+        filteredData: filteredData,
+        startRow: startRow,
+        endRow: endRow,
+        selection: selection,
+        columnsSort: columnsSort,
+        handlePageSizeChange: handlePageSizeChange,
+        pages: pages,
+        currentPage: currentPage,
+        rowsPerPage: rowsPerPage,
+        setCurrentPage: setCurrentPage,
+        columnsList: columnsList,
+        handleColumnPreferences: handleColumnPreferences,
+        handleGlobalSearch: handleGlobalSearch,
+    };
+};
+exports.default = useTable;

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { TableProps } from "./TableProps";
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, }: TableProps): React.JSX.Element;