pixelize-design-library 2.1.1 → 2.1.3

package/dist/Components/FileUpload/FileUpload.js

@@ -40,11 +40,15 @@ var react_dropzone_1 = require("react-dropzone");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var constants_1 = require("./constants");
+var Modal_1 = __importStar(require("../Modal/Modal"));
 var FileUpload = function (_a) {
     var _b, _c, _d, _e;
-    var onFilesUploaded = _a.onFilesUploaded, uploadedFiles = _a.uploadedFiles, onRemoveFile = _a.onRemoveFile, _f = _a.acceptTypes, acceptTypes = _f === void 0 ? [".jpg", ".png"] : _f, _g = _a.maxSizeKB, maxSizeKB = _g === void 0 ? 5 : _g, _h = _a.maxFiles, maxFiles = _h === void 0 ? undefined : _h;
+    var onFilesUploaded = _a.onFilesUploaded, uploadedFiles = _a.uploadedFiles, onRemoveFile = _a.onRemoveFile, _f = _a.acceptTypes, acceptTypes = _f === void 0 ? [".jpg", ".png"] : _f, _g = _a.maxSizeKB, maxSizeKB = _g === void 0 ? 5 : _g, _h = _a.maxFiles, maxFiles = _h === void 0 ? undefined : _h, _j = _a.progress, progress = _j === void 0 ? {} : _j;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _j = react_1.default.useState([]), errors = _j[0], setErrors = _j[1];
+    var _k = (0, react_2.useDisclosure)(), isOpen = _k.isOpen, onOpen = _k.onOpen, onClose = _k.onClose;
+    var _l = react_1.default.useState(null), previewUrl = _l[0], setPreviewUrl = _l[1];
+    var _m = react_1.default.useState(null), previewTitle = _m[0], setPreviewTitle = _m[1];
+    var _o = react_1.default.useState([]), errors = _o[0], setErrors = _o[1];
     var bg = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50];
     var border = (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[300];
     var mappedAccept = acceptTypes.reduce(function (acc, ext) {
@@ -65,7 +69,7 @@ var FileUpload = function (_a) {
         }
         onFilesUploaded(acceptedFiles);
     }, [onFilesUploaded, uploadedFiles, maxFiles]);
-    var _k = (0, react_dropzone_1.useDropzone)({
+    var _p = (0, react_dropzone_1.useDropzone)({
         onDrop: onDrop,
         accept: mappedAccept,
         maxSize: maxSizeKB * 1024,
@@ -86,45 +90,67 @@ var FileUpload = function (_a) {
             });
             setErrors(messages);
         },
-    }), getRootProps = _k.getRootProps, getInputProps = _k.getInputProps;
-    return (react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
-        react_1.default.createElement(react_2.Box, __assign({}, getRootProps(), { border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[100] } }),
-            react_1.default.createElement("input", __assign({}, getInputProps())),
-            react_1.default.createElement(react_2.VStack, { spacing: 2 },
-                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }),
-                react_1.default.createElement(react_2.Text, { fontWeight: "medium" }, "Drag and drop files here"),
-                react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500] },
-                    acceptTypes.join(", "),
-                    " up to ",
-                    (0, constants_1.toMB)(maxSizeKB),
-                    " ",
-                    maxFiles ? "- ".concat(maxFiles, " file(s) max") : ""))),
-        errors.length > 0 && (react_1.default.createElement(react_2.Box, null, errors.map(function (err, idx) {
-            var _a;
-            return (react_1.default.createElement(react_2.Text, { key: idx, fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[600] }, err));
-        }))),
-        uploadedFiles.length > 0 && (react_1.default.createElement(react_2.Box, null,
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4 }, "Uploaded Files")),
-            react_1.default.createElement(react_2.List, { spacing: 2 }, uploadedFiles.map(function (file, index) {
-                var _a, _b, _c;
-                return (react_1.default.createElement(react_2.ListItem, { key: index, display: "flex", justifyContent: "space-between", alignItems: "center", borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors === null || colors === void 0 ? void 0 : colors.white },
-                    react_1.default.createElement(react_2.HStack, { spacing: 3, flex: "1" },
-                        file.type.startsWith("image/") ? (react_1.default.createElement(react_2.Box, { boxSize: "40px" },
-                            react_1.default.createElement("img", { src: URL.createObjectURL(file), alt: file.name, style: {
-                                    width: "100%",
-                                    height: "100%",
-                                    objectFit: "cover",
-                                    borderRadius: "0.25rem",
-                                } }))) : (react_1.default.createElement(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[500], boxSize: 8 })),
-                        react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
-                            react_1.default.createElement(react_2.Text, { fontSize: "sm", noOfLines: 1 }, file.name),
-                            react_1.default.createElement(react_2.Text, { fontSize: "xs", color: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[500] },
-                                (0, constants_1.toMB)(file.size / 1024),
-                                " \u2022",
-                                " ",
-                                file.type || "Unknown type"))),
-                    onRemoveFile && (react_1.default.createElement(react_2.CloseButton, { onClick: function () { return onRemoveFile(file); }, size: "sm", color: (_c = colors === null || colors === void 0 ? void 0 : colors.red) === null || _c === void 0 ? void 0 : _c[600] }))));
-            }))))));
+    }), getRootProps = _p.getRootProps, getInputProps = _p.getInputProps;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
+            react_1.default.createElement(react_2.Box, __assign({}, getRootProps(), { border: "2px dashed", borderColor: border, borderRadius: "md", p: 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[100] }, position: "relative" }),
+                react_1.default.createElement("input", __assign({}, getInputProps())),
+                react_1.default.createElement(react_2.VStack, { spacing: 2 },
+                    react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Upload, boxSize: 6 }),
+                    react_1.default.createElement(react_2.Text, { fontWeight: "medium" }, "Drag and drop files here"),
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500] },
+                        acceptTypes.join(", "),
+                        " up to ",
+                        (0, constants_1.toMB)(maxSizeKB),
+                        " ",
+                        maxFiles ? "- ".concat(maxFiles, " file(s) max") : ""))),
+            errors.length > 0 && (react_1.default.createElement(react_2.Box, null, errors.map(function (err, idx) {
+                var _a;
+                return (react_1.default.createElement(react_2.Text, { key: idx, fontSize: "sm", color: (_a = colors === null || colors === void 0 ? void 0 : colors.red) === null || _a === void 0 ? void 0 : _a[600] }, err));
+            }))),
+            uploadedFiles.length > 0 && (react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
+                    react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4 }, "Uploaded Files")),
+                react_1.default.createElement(react_2.List, { spacing: 2 }, uploadedFiles.map(function (file, index) {
+                    var _a, _b, _c, _d, _e, _f;
+                    return (react_1.default.createElement(react_2.Box, { key: index, borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors === null || colors === void 0 ? void 0 : colors.white },
+                        react_1.default.createElement(react_2.ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center" },
+                            react_1.default.createElement(react_2.HStack, { spacing: 3, flex: "1" },
+                                file.type.startsWith("image/") ? (react_1.default.createElement(react_2.Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+                                        ".hover-icon": {
+                                            opacity: 1,
+                                            bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16],
+                                        },
+                                    }, onClick: function () {
+                                        setPreviewUrl(URL.createObjectURL(file));
+                                        setPreviewTitle(file.name);
+                                        onOpen();
+                                    } },
+                                    react_1.default.createElement("img", { src: URL.createObjectURL(file), alt: file.name, style: {
+                                            width: "100%",
+                                            height: "100%",
+                                            objectFit: "cover",
+                                            borderRadius: "0.25rem",
+                                        } }),
+                                    react_1.default.createElement(react_2.Box, { className: "hover-icon", position: "absolute", top: "0.5rem", left: "0.5rem", opacity: 0 },
+                                        react_1.default.createElement(lucide_react_1.Eye, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100] })))) : (react_1.default.createElement(react_2.ListIcon, { as: lucide_react_1.FileText, color: (_d = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _d === void 0 ? void 0 : _d[500], boxSize: 8 })),
+                                react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
+                                    react_1.default.createElement(react_2.Text, { fontSize: "sm", noOfLines: 1 }, file.name),
+                                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500] },
+                                        (0, constants_1.toMB)(file.size / 1024),
+                                        " \u2022",
+                                        " ",
+                                        file.type || "Unknown type"))),
+                            onRemoveFile && (react_1.default.createElement(react_2.CloseButton, { onClick: function () { return onRemoveFile(file); }, size: "sm", color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600] }))),
+                        (progress === null || progress === void 0 ? void 0 : progress[file.name]) !== undefined && (react_1.default.createElement(react_2.Progress, { value: progress === null || progress === void 0 ? void 0 : progress[file.name], size: "xs", mt: 1, hasStripe: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, isAnimated: (progress === null || progress === void 0 ? void 0 : progress[file.name]) < 100, colorScheme: (progress === null || progress === void 0 ? void 0 : progress[file.name]) >= 100 ? "green" : "blue", borderRadius: 5 }))));
+                }))))),
+        react_1.default.createElement(Modal_1.default, { isOpen: isOpen, onClose: function () {
+                onClose();
+                setPreviewUrl(null);
+                setPreviewTitle(null);
+            }, size: "xl", isCentered: true },
+            react_1.default.createElement(Modal_1.ModalHeader, null,
+                react_1.default.createElement(react_2.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 16, textTransform: "uppercase" }, previewTitle)),
+            react_1.default.createElement(Modal_1.ModalBody, null, previewUrl && (react_1.default.createElement(react_2.Image, { src: previewUrl, alt: "Preview", w: "100%", h: "auto", objectFit: "contain" }))))));
 };
 exports.default = FileUpload;

package/dist/Components/FileUpload/FileUploadProps.d.ts

@@ -7,4 +7,5 @@ export type FileUploaderProps = {
     acceptTypes?: MimeExtension[];
     maxSizeKB?: number;
     maxFiles?: number;
+    progress?: Record<string, number>;
 };

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

@@ -1,4 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-import "./Table.css";
 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;

package/dist/Components/Table/Table.js

@@ -34,7 +34,6 @@ var TableHeader_1 = __importDefault(require("./Components/TableHeader"));
 var TableBody_1 = __importDefault(require("./Components/TableBody"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var useTable_1 = __importDefault(require("./Components/useTable"));
-require("./Table.css");
 var table_1 = require("../../Utils/table");
 var usePreferences_1 = require("../../Hooks/usePreferences");
 var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
@@ -104,7 +103,20 @@ function Table(_a) {
             (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "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, isVisiblity: true })))),
         react_1.default.createElement(react_2.TableContainer, { maxH: 500, overflowY: "auto" },
-            react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper" },
+            react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper", sx: {
+                    width: "100%",
+                    borderCollapse: "collapse",
+                    "th .resize-handle": {
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        width: "8px",
+                        height: "100%",
+                        cursor: "col-resize",
+                        backgroundColor: "transparent",
+                        zIndex: 999,
+                    },
+                } },
                 react_1.default.createElement(react_3.Thead, { position: "sticky", top: -0.5, zIndex: 2 },
                     react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
                             ? true

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import "./bootstrap";
 import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";

package/dist/index.js

@@ -1,4 +1,5 @@
 "use strict";
+// import "./bootstrap";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -28,7 +29,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = void 0;
-require("./bootstrap");
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));

package/package.json

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

package/dist/Components/KaTable/CustomHeader.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type CustomHeaderProps = {
-    column: any;
-    onSortChange?: (sortState: string, columnName: string) => void;
-    menuItems?: Array<{
-        label: string;
-        onClick: () => void;
-        submenu?: any[];
-    }>;
-    isSort?: boolean;
-    sortDirection: string;
-};
-declare const CustomHeader: React.MemoExoticComponent<({ column, onSortChange, menuItems, isSort, sortDirection, }: CustomHeaderProps) => React.JSX.Element>;
-export default CustomHeader;

package/dist/Components/KaTable/CustomHeader.js

@@ -1,69 +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 bs_1 = require("react-icons/bs");
-var fa_1 = require("react-icons/fa");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var CustomHeader = (0, react_1.memo)(function (_a) {
-    var column = _a.column, onSortChange = _a.onSortChange, menuItems = _a.menuItems, isSort = _a.isSort, sortDirection = _a.sortDirection;
-    var handleSortClick = (0, react_1.useCallback)(function () {
-        var sortOrder = "none";
-        if (sortDirection === "none")
-            sortOrder = "asc";
-        else if (sortDirection === "asc")
-            sortOrder = "desc";
-        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(sortOrder, column.key);
-    }, [sortDirection, column.key, onSortChange]);
-    return (react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center" },
-        react_1.default.createElement(react_2.Box, { fontWeight: "bold" }, column.title),
-        react_1.default.createElement(react_2.Flex, { alignItems: "center" },
-            isSort && (react_1.default.createElement(SortingIcon, { sortState: sortDirection, handleSortClick: handleSortClick })),
-            menuItems && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) ? (react_1.default.createElement(react_2.Menu, null,
-                react_1.default.createElement(react_2.MenuButton, { as: react_2.IconButton, "aria-label": "Options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", _hover: { bg: "none" }, _active: { bg: "none" } }),
-                react_1.default.createElement(react_2.Portal, null,
-                    react_1.default.createElement(react_2.MenuList, null, menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                        react_1.default.createElement(react_2.MenuItem, { onClick: function () { return item === null || item === void 0 ? void 0 : item.onClick(); } }, item.label),
-                        item.submenu && react_1.default.createElement(Submenu, { items: item.submenu }))); }))))) : null)));
-});
-var SortingIcon = (0, react_1.memo)(function (_a) {
-    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-        sortState === "none" && react_1.default.createElement(fa_1.FaSort, { size: 14 }),
-        sortState === "asc" && react_1.default.createElement(fa_1.FaCaretUp, { size: 14 }),
-        sortState === "desc" && react_1.default.createElement(fa_1.FaCaretDown, { size: 14 })));
-});
-var Submenu = (0, react_1.memo)(function (_a) {
-    var items = _a.items;
-    return (react_1.default.createElement(react_2.MenuGroup, null, items.map(function (subItem, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function () { return (subItem === null || subItem === void 0 ? void 0 : subItem.onClick) && (subItem === null || subItem === void 0 ? void 0 : subItem.onClick()); }, sx: {
-            pl: 6,
-            fontSize: "sm",
-            color: "gray.600",
-            _hover: { bg: "gray.100", color: "gray.800" }, // Hover styles
-        } }, subItem.label)); })));
-});
-exports.default = CustomHeader;

package/dist/Components/KaTable/KaTable.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-import * as TableEnums from "ka-table/enums";
-import * as TableProps from "ka-table/props";
-import * as TableActionCreator from "ka-table/actionCreators";
-import * as TableModel from "ka-table/models";
-import * as TableUtils from "ka-table/utils";
-import * as TableFun from "ka-table";
-import "ka-table/style.css";
-import "./ka-table.css";
-import { KaTableProps } from "./KaTableProps";
-declare const _default: React.MemoExoticComponent<({ columns, data, rowKey, Edit, format, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, selected, columnVisibility, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, }: KaTableProps) => React.JSX.Element>;
-export default _default;
-export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };

package/dist/Components/KaTable/KaTable.js

@@ -1,111 +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 __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));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableFun = exports.TableUtils = exports.TableModel = exports.TableProps = exports.TableActionCreator = exports.TableEnums = void 0;
-var react_1 = __importStar(require("react"));
-var ka_table_1 = require("ka-table");
-var TableEnums = __importStar(require("ka-table/enums"));
-exports.TableEnums = TableEnums;
-var TableProps = __importStar(require("ka-table/props"));
-exports.TableProps = TableProps;
-var TableActionCreator = __importStar(require("ka-table/actionCreators"));
-exports.TableActionCreator = TableActionCreator;
-var TableModel = __importStar(require("ka-table/models"));
-exports.TableModel = TableModel;
-var TableUtils = __importStar(require("ka-table/utils"));
-exports.TableUtils = TableUtils;
-var TableFun = __importStar(require("ka-table"));
-exports.TableFun = TableFun;
-require("ka-table/style.css");
-require("./ka-table.css");
-var useMergedChildComponents_1 = __importDefault(require("./useMergedChildComponents"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var table_1 = require("../../Utils/table");
-var selectionCellColumn = {
-    key: "select-cell",
-    width: 50,
-    columnFreeze: true,
-    customHeader: false,
-    className: "select-cell",
-};
-var KaTable = function (_a) {
-    var _b, _c;
-    var columns = _a.columns, data = _a.data, _d = _a.rowKey, rowKey = _d === void 0 ? "id" : _d, Edit = _a.Edit, 
-    // sorting,
-    format = _a.format, 
-    // paging,
-    filter = _a.filter, childComponents = _a.childComponents, columnReorder = _a.columnReorder, columnResizing = _a.columnResizing, editableCells = _a.editableCells, validation = _a.validation, loading = _a.loading, checkSelect = _a.checkSelect, onRowClick = _a.onRowClick, onSelectionChange = _a.onSelectionChange, selected = _a.selected, columnVisibility = _a.columnVisibility, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _e = (0, react_1.useState)([]), sortState = _e[0], setSortState = _e[1];
-    if (checkSelect &&
-        !columns.some(function (column) { return column.key === "select-cell"; })) {
-        columns.unshift(selectionCellColumn);
-    }
-    var dataLength = (_b = data === null || data === void 0 ? void 0 : data.length) !== null && _b !== void 0 ? _b : 0;
-    // const columnVisibilitys = columnVisibility ?? false;
-    var handleSort = function (sort) {
-        setSortState(sort);
-    };
-    var sortedData = (0, react_1.useMemo)(function () { return (0, table_1.SortMultiColumnData)(__spreadArray([], data, true), sortState); }, [sortState, data]);
-    var mergedChildComponents = (0, useMergedChildComponents_1.default)({
-        childComponents: childComponents,
-        onSortChange: handleSort,
-        handleSelection: onSelectionChange,
-        rowKey: rowKey,
-        onRowClick: onRowClick,
-        selected: selected,
-        dataLength: dataLength,
-        columns: columns,
-        headerBgColor: headerBgColor,
-        freezedBgColor: freezedBgColor,
-        headerTextColor: headerTextColor,
-        freezedTextColor: freezedTextColor,
-        sortState: sortState,
-    });
-    return (react_1.default.createElement("div", { style: {
-            borderRadius: "10px 0 0 10px",
-            borderWidth: "0px 0px 0px 5px",
-            borderColor: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[500],
-            boxShadow: theme.shadows.lg,
-        } },
-        react_1.default.createElement(ka_table_1.Table, { columns: columns, data: sortedData, rowKeyField: rowKey, editingMode: Edit, key: columns, sortingMode: TableEnums.SortingMode.MultipleRemote, format: format, 
-            // paging={paging}
-            filteringMode: undefined, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
-                enabled: true,
-            } })));
-};
-exports.default = react_1.default.memo(KaTable);

package/dist/Components/KaTable/KaTableProps.d.ts

@@ -1,23 +0,0 @@
-export type KaTableProps = {
-    columns: any;
-    data: any;
-    rowKey?: any;
-    Edit?: any;
-    format?: (props: any) => void;
-    validation?: (props: any) => void;
-    filter?: any;
-    childComponents?: any;
-    columnReorder?: any;
-    columnResizing?: any;
-    editableCells?: any;
-    loading?: any;
-    checkSelect?: any;
-    onRowClick?: (rowData: any, column: any) => void;
-    onSelectionChange?: (selectedIds: any[]) => void;
-    selected?: any;
-    columnVisibility?: boolean;
-    headerBgColor?: string;
-    headerTextColor?: string;
-    freezedBgColor?: string;
-    freezedTextColor?: string;
-};

package/dist/Components/KaTable/KaTableProps.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/KaTable/SelectionCell.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { TableProps } from "./KaTable";
-declare const _default: React.MemoExoticComponent<({ rowKeyValue, selectedRows, onSelectionChange, selected, }: TableProps.ICellTextProps<any> & {
-    onSelectionChange: (ids: any[], type: string) => void;
-    rowKey: any;
-    selected: any;
-}) => React.JSX.Element>;
-export default _default;

package/dist/Components/KaTable/SelectionCell.js

@@ -1,38 +0,0 @@
-"use strict";
-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));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var KaTable_1 = require("./KaTable");
-var SelectionCell = function (_a) {
-    var rowKeyValue = _a.rowKeyValue, selectedRows = _a.selectedRows, onSelectionChange = _a.onSelectionChange, selected = _a.selected;
-    var table = KaTable_1.TableFun.useTableInstance();
-    var onChangeHandle = function (event) {
-        if (event.nativeEvent.shiftKey) {
-            table.selectRowsRange(rowKeyValue, __spreadArray([], selectedRows, true).pop());
-        }
-        else {
-            var isChecked = event.currentTarget.checked;
-            var action = isChecked ? "add" : "remove";
-            onSelectionChange(rowKeyValue, action);
-            if (isChecked) {
-                table.selectRow(rowKeyValue);
-            }
-            else {
-                table.deselectRow(rowKeyValue);
-            }
-        }
-    };
-    return react_1.default.createElement("input", { type: "checkbox", checked: selected, onChange: onChangeHandle, style: { marginLeft: "37%" } });
-};
-exports.default = react_1.default.memo(SelectionCell);

package/dist/Components/KaTable/SelectionHeader.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const _default: React.MemoExoticComponent<({ onSelectionChange, rowKey, selected }: any) => React.JSX.Element>;
-export default _default;

package/dist/Components/KaTable/SelectionHeader.js

@@ -1,56 +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 KaTable_1 = require("./KaTable");
-var SelectionHeader = function (_a) {
-    var onSelectionChange = _a.onSelectionChange, rowKey = _a.rowKey, selected = _a.selected;
-    var table = KaTable_1.TableFun.useTableInstance();
-    var selectAllRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
-        if (selectAllRef.current) {
-            selectAllRef.current.indeterminate = selected === null || selected === void 0 ? void 0 : selected.intederminate;
-        }
-    }, [selected.intederminate]);
-    var handleSelectionChange = (0, react_1.useCallback)(function (checked) {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked);
-    }, [onSelectionChange]);
-    return (react_1.default.createElement("input", { ref: selectAllRef, type: "checkbox", checked: selected === null || selected === void 0 ? void 0 : selected.checked, onChange: function (event) {
-            var _a, _b;
-            var isChecked = event.currentTarget.checked;
-            // const action = isChecked ? "add" : "remove";
-            var totalIds = isChecked
-                ? (_b = (_a = table === null || table === void 0 ? void 0 : table.props) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map(function (row) { return row[rowKey]; })
-                : [];
-            handleSelectionChange(totalIds);
-            if (isChecked) {
-                table.selectAllFilteredRows();
-            }
-            else {
-                table.deselectAllFilteredRows();
-            }
-        }, style: { marginLeft: "40%" } }));
-};
-exports.default = react_1.default.memo(SelectionHeader);

package/dist/Components/KaTable/ka-table.css

@@ -1,27 +0,0 @@
-.ka-thead-cell {
-  padding: 7px 7px;
-}
-.ka-cell {
-  padding: 7px 0px;
-}
-
-.ka-thead-background {
-  background-color: #bfbcbc;
-  z-index: 1;
-}
-
-.ka-cell-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding-left: 5%;
-}
-.ka-row {
-  box-sizing: unset;
-  border-bottom: none;
-  border-top: none;
-}
-.ka-table-wrapper {
-  border-bottom: 2px solid #d8d9db;
-  border-right: 2px solid #d8d9db;
-}

package/dist/Components/KaTable/useMergedChildComponents.d.ts

@@ -1,14 +0,0 @@
-import { KaTableProps } from "./KaTableProps";
-type MergedChildComponentsProps = Pick<KaTableProps, "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor"> & {
-    childComponents: any;
-    onSortChange: any;
-    handleSelection: any;
-    rowKey: any;
-    onRowClick: any;
-    selected: any;
-    dataLength: number;
-    columns: any;
-    sortState: any;
-};
-declare const useMergedChildComponents: ({ childComponents, onSortChange, handleSelection, rowKey, onRowClick, selected, dataLength, columns, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, sortState, }: MergedChildComponentsProps) => any;
-export default useMergedChildComponents;

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -1,224 +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 __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));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var CustomHeader_1 = __importDefault(require("./CustomHeader"));
-var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
-var SelectionCell_1 = __importDefault(require("./SelectionCell"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var table_1 = require("../../Utils/table");
-var useMergedChildComponents = function (_a) {
-    var childComponents = _a.childComponents, onSortChange = _a.onSortChange, handleSelection = _a.handleSelection, rowKey = _a.rowKey, onRowClick = _a.onRowClick, selected = _a.selected, dataLength = _a.dataLength, columns = _a.columns, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, sortState = _a.sortState;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var handleSortChange = (0, react_1.useCallback)(function (newState, columnKey) {
-        var newSortState = __spreadArray([], sortState, true);
-        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === columnKey; });
-        if (existingIndex === -1) {
-            newSortState.push({
-                column: columnKey,
-                direction: newState, // Default to ascending when adding a column
-            });
-        }
-        else {
-            var existingSort = newSortState[existingIndex];
-            existingSort.direction = newState;
-        }
-        var column = columns.find(function (col) { return col.key === columnKey; });
-        column.sortDirection = newState;
-        onSortChange(newSortState);
-    }, [sortState, onSortChange, columns]);
-    var _b = react_1.default.useState(selected), selections = _b[0], setSelections = _b[1];
-    (0, react_1.useEffect)(function () {
-        setSelections(selected);
-    }, [selected]);
-    var isAllSelected = (0, react_1.useMemo)(function () {
-        return {
-            checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
-            intederminate: (selections === null || selections === void 0 ? void 0 : selections.length) > 0 && (selections === null || selections === void 0 ? void 0 : selections.length) < dataLength,
-        };
-    }, [selections, dataLength]);
-    var cellSelectionHandle = (0, react_1.useCallback)(function (values, type) {
-        if (type === "add") {
-            setSelections(__spreadArray(__spreadArray([], selections, true), [values], false));
-            handleSelection(__spreadArray(__spreadArray([], selections, true), [values], false));
-        }
-        else if (type === "remove") {
-            setSelections(selections.filter(function (value) { return value !== values; }));
-            handleSelection(selections.filter(function (value) { return value !== values; }));
-        }
-        else {
-            handleSelection(selections.filter(function (value) { return value !== values; }));
-        }
-    }, [selections, handleSelection]);
-    var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
-        setSelections(values);
-        handleSelection(values);
-    }, [handleSelection]);
-    return (0, react_1.useMemo)(function () {
-        return __assign(__assign({}, childComponents), { dataRow: {
-                elementAttributes: function (props) {
-                    var _a, _b;
-                    var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                    var attributes = existingElementAttributes
-                        ? existingElementAttributes(props)
-                        : {};
-                    var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
-                    var className = "".concat(attributes.className || "", " ").concat(isSelected ? "ka-row-selected" : "", " ka-row-hover").trim();
-                    // const className =
-                    //   `${attributes.className || ""} ${isSelected ? "ka-row-selected" : ""}`.trim();
-                    return __assign(__assign({}, attributes), { className: className, style: __assign(__assign({}, (attributes.style || {})), { backgroundColor: isSelected
-                                ? theme.colors.backgroundColor.subtle
-                                : undefined, border: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[200]) }) });
-                },
-            }, headCell: {
-                content: function (props) {
-                    var _a, _b, _c;
-                    var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
-                    if (existingContent) {
-                        var result = existingContent(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    var column = props.column;
-                    if (column.sortable || column.filter) {
-                        return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: handleSortChange, menuItems: (_b = column === null || column === void 0 ? void 0 : column.menu) !== null && _b !== void 0 ? _b : [], isSort: props.column.sortable, sortDirection: (_c = props.column.sortDirection) !== null && _c !== void 0 ? _c : "none" })));
-                    }
-                    if (props.column.key === "select-cell") {
-                        return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
-                    }
-                    return null;
-                },
-                elementAttributes: function (props) {
-                    var _a, _b, _c, _d, _e, _f;
-                    var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                    if (existingElementAttributes) {
-                        var result = existingElementAttributes(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    if (props.column.columnFreeze) {
-                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
-                        return {
-                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600] }),
-                        };
-                    }
-                    return {
-                        style: {
-                            backgroundColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : (_d = theme.colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.subtle,
-                            color: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600],
-                            border: "1px solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]),
-                        },
-                    };
-                },
-            }, cell: {
-                elementAttributes: function (props) {
-                    var _a, _b, _c, _d, _e;
-                    var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
-                    if (existingElementAttributes) {
-                        var result = existingElementAttributes(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    if (props.column.columnFreeze) {
-                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
-                        return {
-                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], fontWeight: 600 }),
-                        };
-                    }
-                    return {
-                        style: {
-                            color: (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600],
-                            fontWeight: 500,
-                            border: "1px solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[200]),
-                        },
-                        onClick: function () {
-                            if (onRowClick) {
-                                onRowClick(props.rowData, props.column.key);
-                            }
-                        },
-                    };
-                },
-            }, tableWrapper: {
-                elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
-            }, cellText: {
-                content: function (props) {
-                    var _a;
-                    var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
-                    if (existingContent) {
-                        var result = existingContent(props);
-                        if (result) {
-                            return result;
-                        }
-                    }
-                    if (props.column.key === "select-cell") {
-                        var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
-                        return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
-                    }
-                },
-            } });
-    }, [
-        childComponents,
-        rowKey,
-        onRowClick,
-        selections,
-        columns,
-        cellSelectionHandle,
-        headerSelectionHandle,
-        isAllSelected,
-        theme.colors,
-        headerBgColor,
-        headerTextColor,
-        freezedBgColor,
-        freezedTextColor,
-        handleSortChange,
-    ]);
-};
-exports.default = useMergedChildComponents;

package/dist/Pages/KaTableExample.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const KaTableExample: () => React.JSX.Element;
-export default KaTableExample;

package/dist/Pages/KaTableExample.js

@@ -1,259 +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 = __importStar(require("react"));
-var KaTable_1 = __importDefault(require("../Components/KaTable/KaTable"));
-var KaTable_2 = require("../Components/KaTable/KaTable");
-var icons_1 = require("@chakra-ui/icons");
-var react_2 = require("@chakra-ui/react");
-var menuItems = [
-    { label: "Hide column", action: "hidecolumn" },
-    {
-        label: "Filter",
-        submenu: [
-            { label: "Filter by Date", action: "Filter by Date" },
-            { label: "Filter by Name", action: "Filter by Name" },
-            { label: "Filter by Status", action: "Filter by Status" },
-        ],
-    },
-];
-var DataType = KaTable_2.TableEnums.DataType;
-var dataArray = Array(5)
-    .fill(undefined)
-    .map(function (_, index) { return ({
-    column1: index % 2 === 0,
-    column2: "column:2 row:".concat(index + 1),
-    column3: "column:3 row:".concat(index + 1),
-    column4: "column:4 row:".concat(index + 1),
-    column5: "column:5 row:".concat(index + 1),
-    column6: index + 20,
-    column7: index + 25,
-    column8: index + 30,
-    column9: index + 35,
-    column10: index + 40,
-    column11: index + 45,
-    column12: index + 50,
-    column13: index + 55,
-    column14: index + 60,
-    column15: new Date(2022, 11, index),
-    id: index + 1,
-}); });
-var columns = [
-    {
-        key: "column1",
-        title: "Column 1",
-        dataType: DataType.Boolean,
-        width: 100,
-        columnFreeze: true,
-        customHeader: false,
-    },
-    {
-        key: "column2",
-        title: "Column 2",
-        dataType: DataType.String,
-        width: 250,
-        // visible: false,
-    },
-    {
-        key: "column3",
-        title: "Column 3",
-        dataType: DataType.Number,
-        width: 150,
-        filter: true,
-        menu: [
-            {
-                label: "Filter",
-                onClick: function () { return console.log("MENU Filter clicks"); },
-                submenu: [
-                    {
-                        label: "Filter by Date",
-                        onClick: function () { return console.log("SUBMENU Date clicks"); },
-                    },
-                    { label: "Filter by Name" },
-                    // { label: "Filter by Status", action: "Filter by Status" },
-                ],
-            },
-        ],
-    },
-    {
-        key: "column4",
-        title: "Column 4",
-        dataType: DataType.Number,
-        width: 150,
-        sortable: true,
-    },
-    {
-        key: "column5",
-        title: "Column 5",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column6",
-        title: "Column 6",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column7",
-        title: "Column 7",
-        dataType: DataType.Number,
-        width: 150,
-        sortable: true,
-    },
-    {
-        key: "column8",
-        title: "Column 8",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column9",
-        title: "Column 9",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column10",
-        title: "Column 10",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column11",
-        title: "Column 11",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column12",
-        title: "Column 12",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column13",
-        title: "Column 13",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column14",
-        title: "Column 14",
-        dataType: DataType.Number,
-        width: 150,
-    },
-    {
-        key: "column15",
-        title: "Column 15",
-        dataType: DataType.Date,
-        width: 150,
-    },
-    {
-        key: "editColumn",
-        width: 80,
-        customHeader: false,
-    },
-];
-var KaTableExample = function () {
-    var _a = (0, react_1.useState)(false), actionButtons = _a[0], setActionButtons = _a[1];
-    var _b = (0, react_1.useState)([]), selectedRows = _b[0], setSelectedRows = _b[1];
-    // const kaTableFormat = (props: any) => {
-    //   if (props.column.dataType === DataType.Date) {
-    //     return (
-    //       props.value &&
-    //       props.value.toLocaleDateString("en", {
-    //         month: "2-digit",
-    //         day: "2-digit",
-    //         year: "numeric",
-    //       })
-    //     );
-    //   }
-    // };
-    var EditButton = function (_a) {
-        var dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue;
-        return (react_1.default.createElement("div", { className: "edit-cell-button" },
-            react_1.default.createElement(icons_1.EditIcon, null),
-            react_1.default.createElement(icons_1.DeleteIcon, null)));
-    };
-    // const handleSortChange = (newSortState: any, columnName: any) => {
-    //   console.log(`Sort state for ${columnName} changed to:`, newSortState);
-    // };
-    // const handleMenuItemClick = (action: any, columnName: any) => {
-    //   console.log(`Menu item clicked for ${columnName}:`, action);
-    // };
-    var handleCheckSelect = (0, react_1.useCallback)(function (selectedRows) {
-        console.log("CB", selectedRows);
-        if (selectedRows.length !== 0) {
-            setActionButtons(true);
-        }
-        else {
-            setActionButtons(false);
-        }
-        setSelectedRows(selectedRows);
-    }, []);
-    // console.log(actionButtons, "actionButtons");
-    var handleExample = function () {
-        setSelectedRows([]);
-    };
-    // console.log(selectedRows, "selectedRows");
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_2.Button, { onClick: handleExample }, "click here"),
-        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
-                console.log("Row clicked", rowKeyValue);
-            }, selected: selectedRows, onSelectionChange: function (selectedRows) {
-                handleCheckSelect(selectedRows);
-            }, columnVisibility: true, 
-            // onSortChange={handleSortChange}
-            // onMenuItemClick={handleMenuItemClick}
-            // format={kaTableFormat}
-            childComponents: {
-                cellText: {
-                    content: function (props) {
-                        if (props.column.key === "editColumn") {
-                            return react_1.default.createElement(EditButton, __assign({}, props));
-                        }
-                    },
-                },
-            }, loading: {
-                enabled: false,
-                text: "Loading data",
-            } })));
-};
-exports.default = KaTableExample;

package/dist/Theme/Default/fonts.d.ts

@@ -1,35 +0,0 @@
-import "@fontsource/ubuntu-sans";
-declare const fontOptions: {
-    fonts: {
-        body: string;
-        heading: string;
-        mono: string;
-    };
-    fontSizes: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        "2xl": string;
-        "3xl": string;
-        "4xl": string;
-        "5xl": string;
-        "6xl": string;
-        "7xl": string;
-        "8xl": string;
-        "9xl": string;
-    };
-    fontWeights: {
-        hairline: number;
-        thin: number;
-        light: number;
-        normal: number;
-        medium: number;
-        semibold: number;
-        bold: number;
-        extrabold: number;
-        black: number;
-    };
-};
-export default fontOptions;

package/dist/Theme/Default/fonts.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("@fontsource/ubuntu-sans");
-var fontOptions = {
-    fonts: {
-        body: "Ubuntu Sans, serif",
-        heading: "Ubuntu Sans, serif",
-        mono: "Ubuntu Sans, monospace",
-    },
-    fontSizes: {
-        xs: "0.75rem",
-        sm: "0.875rem",
-        md: "1rem",
-        lg: "1.125rem",
-        xl: "1.25rem",
-        "2xl": "1.5rem",
-        "3xl": "1.875rem",
-        "4xl": "2.25rem",
-        "5xl": "3rem",
-        "6xl": "3.75rem",
-        "7xl": "4.5rem",
-        "8xl": "6rem",
-        "9xl": "8rem",
-    },
-    fontWeights: {
-        hairline: 100,
-        thin: 200,
-        light: 300,
-        normal: 400,
-        medium: 500,
-        semibold: 600,
-        bold: 700,
-        extrabold: 800,
-        black: 900,
-    },
-};
-exports.default = fontOptions;