pixelize-design-library 2.1.13 → 2.1.15

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

@@ -1,140 +0,0 @@
-"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;
-};
-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 TableLoading_1 = require("./TableLoading");
-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 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;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _b = (0, react_2.useState)(new Set()), expandedRows = _b[0], setExpandedRows = _b[1];
-    var toggleRowExpansion = function (rowIndex) {
-        setExpandedRows(function (prev) {
-            var newSet = new Set(prev);
-            if (newSet.has(rowIndex)) {
-                newSet.delete(rowIndex);
-            }
-            else {
-                newSet.add(rowIndex);
-            }
-            return newSet;
-        });
-    };
-    var handleRowClick = function (row, header) {
-        onRowClick && onRowClick(row, header);
-    };
-    var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
-        var _b, _c, _d, _e, _f;
-        var row = _a.row, isChecked = _a.isChecked;
-        return (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], textTransform: "capitalize", backgroundColor: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
-            react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked })));
-    }, [handleCheckbox, noBorders, theme.colors]);
-    var RenderContent = (0, react_2.useCallback)(function (_a) {
-        var _b, _c, _d, _e;
-        var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
-        return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
-    }, [freezedTextColor, noBorders, theme.colors]);
-    var RenderView = (0, react_2.useCallback)(function (_a) {
-        var _b, _c, _d;
-        var row = _a.row;
-        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))));
-    }, [freezedTextColor, noBorders, theme.colors, isActionFreeze]);
-    var totalVisibleColumns = Object.values(columns).filter(function (o) { return !o.isHidden; }).length +
-        (isCheckbox ? 1 : 0) +
-        (isContent ? 1 : 0) +
-        (isLink ? 1 : 0);
-    if (isLoading) {
-        return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
-    }
-    if (data.length === 0) {
-        return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.white },
-            react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
-                react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
-                    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" }, 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/TableFilters.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { TableFiltersProps } from "../TableProps";
-declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose }: TableFiltersProps) => React.JSX.Element>;
-export default TableFilters;

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

@@ -1,59 +0,0 @@
-"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 table_1 = require("../../../Utils/table");
-var lucide_react_1 = require("lucide-react");
-var TableFilters = (0, react_1.memo)(function (_a) {
-    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
-    var searchRef = (0, react_1.useRef)(null);
-    var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
-    var debounceRef = (0, table_1.debounce)(function (value) {
-        setColumnsSearch(value);
-    }, 700);
-    (0, react_1.useEffect)(function () {
-        if (columnsSearch.length && searchRef.current) {
-            searchRef.current.value = columnsSearch;
-        }
-        /* eslint-disable */
-    }, [refreshDataOnOpen]);
-    return (react_1.default.createElement(react_2.Popover, { onClose: onClose, onOpen: function () {
-            setRefreshDataOnOpen(function (prev) { return !prev; });
-        } },
-        react_1.default.createElement(react_2.PopoverTrigger, null,
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
-        react_1.default.createElement(react_2.Portal, null,
-            react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
-                react_1.default.createElement(react_2.PopoverBody, { p: 2 },
-                    react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
-                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
-                            react_1.default.createElement(lucide_react_1.Search, { color: "gray.300" })),
-                        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);
-                            }, onFocus: function (e) { return e.stopPropagation(); } })))))));
-});
-exports.default = TableFilters;

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

@@ -1,4 +0,0 @@
-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

@@ -1,147 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,41 +0,0 @@
-"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

@@ -1,6 +0,0 @@
-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

@@ -1,60 +0,0 @@
-"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

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

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

@@ -1,28 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-/// <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;