pixelize-design-library 1.1.33 → 1.1.34

package/dist/App.js

@@ -91,7 +91,7 @@ function App() {
             react_1.default.createElement(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }),
             react_1.default.createElement(react_2.Flex, null,
                 react_1.default.createElement(react_2.Box, null,
-                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://bit.ly/dan-abramov", companyName: "PIXELIZE" })),
+                    react_1.default.createElement(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, toggle: toggle, changeToggle: function () { return changeToggle(!toggle); }, logo: "https://play-lh.googleusercontent.com/Fro4e_osoDhhrjgiZ_Y2C5FNXBMWvrb4rGpmkM1PDAcUPXeiAlPCq7NeaT4Q6NRUxRqo", companyName: "PIXELIZE" })),
                 react_1.default.createElement(react_2.Box, { flex: "1", maxWidth: width, overflow: "hidden" },
                     react_1.default.createElement(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", key: "navbar", moreIcon: react_1.default.createElement(fi_1.FiCalendar, null) }),
                     react_1.default.createElement("br", null),

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

@@ -1,3 +1,14 @@
 import React from "react";
-declare const CustomHeader: ({ column, onSortChange, onMenuItemClick, menuItems, columnVisibility, }: any) => React.JSX.Element;
+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

@@ -27,80 +27,43 @@ 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 CustomHeader = function (_a) {
-    var column = _a.column, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, columnVisibility = _a.columnVisibility;
-    var _b = (0, react_1.useState)(false), isSubmenuOpen = _b[0], setSubmenuOpen = _b[1];
-    var _c = (0, react_1.useState)(null), submenuPosition = _c[0], setSubmenuPosition = _c[1];
-    var _d = (0, react_1.useState)("none"), sortState = _d[0], setSortState = _d[1];
-    var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.onClose;
-    var filterButtonRef = (0, react_1.useRef)(null);
-    var handleSubmenuToggle = function (e) {
-        e.stopPropagation();
-        setSubmenuOpen(function (prev) { return !prev; });
-        if (filterButtonRef.current) {
-            var rect = filterButtonRef.current.getBoundingClientRect();
-            setSubmenuPosition({
-                top: rect.bottom -
-                    ((rect.bottom - rect.top) * (rect.bottom - 35)) /
-                        (rect.bottom - rect.top),
-                left: rect.x - (rect.x - 220) * (rect.width / rect.width),
-            });
-        }
-    };
-    var handleMenuItemClick = function (action) {
-        if (onMenuItemClick) {
-            onMenuItemClick(action, column);
-        }
-        setSubmenuOpen(false);
-    };
-    var handleSortClick = function () {
-        setSortState(function (prevState) {
-            var newState = prevState === "none" ? "asc" : prevState === "asc" ? "desc" : "none";
-            if (onSortChange) {
-                onSortChange(newState, column.title);
-            }
-            return newState;
-        });
-    };
-    return (react_1.default.createElement("div", { onMouseEnter: onOpen, onMouseLeave: onClose },
-        react_1.default.createElement(react_2.Box, { style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-            } },
-            react_1.default.createElement(react_2.Box, { sx: { fontWeight: "bold" } }, column.title),
-            react_1.default.createElement(react_2.Box, { style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                } }, menuItems && (react_1.default.createElement(react_2.Menu, null,
-                isOpen && (react_1.default.createElement(react_2.MenuButton, { ref: filterButtonRef, as: react_2.IconButton, "aria-label": "More options", icon: react_1.default.createElement(bs_1.BsThreeDots, null), size: "sm", variant: "ghost", sx: {
-                        _hover: {
-                            background: "none",
-                        },
-                        _active: {
-                            background: "none",
-                        },
-                    } })),
+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, { sx: {
-                            boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
-                            borderRadius: "8px",
-                            padding: "8px",
-                            backgroundColor: "white",
-                        }, onMouseLeave: onClose }, menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(function (item, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                        item.submenu ? (react_1.default.createElement(react_2.MenuItem, { closeOnSelect: false, onClick: handleSubmenuToggle }, item.label)) : (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleMenuItemClick(item.action); } }, item.label)),
-                        isSubmenuOpen && item.submenu && submenuPosition && (react_1.default.createElement(react_2.Box, { position: "absolute", top: submenuPosition.top, left: submenuPosition.left, zIndex: 1, boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", borderRadius: "8px", backgroundColor: "white", padding: "8px", width: "200px" },
-                            react_1.default.createElement(react_2.MenuGroup, { onMouseLeave: onClose }, item.submenu.map(function (subItem, subIndex) { return (react_1.default.createElement(react_2.MenuItem, { key: subIndex, closeOnSelect: true, onClick: function () {
-                                    return handleMenuItemClick(subItem.action);
-                                } }, subItem.label)); })))))); }))))))),
-        react_1.default.createElement(react_2.Box, { sx: { position: "absolute", right: 20, top: 0 } }, isOpen && (react_1.default.createElement(react_2.Flex, { alignItems: "center" },
-            react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", backgroundColor: "white", padding: sortState === "asc" ? "1px" : "2px", borderRadius: "10px", flexDirection: "column", width: "20px", height: "20px", onClick: handleSortClick, cursor: "pointer", boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)", transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
-                react_1.default.createElement(react_2.Box, { transition: "opacity 0.2s ease-in-out", opacity: sortState === "none" ? 1 : 0, position: "absolute" },
-                    react_1.default.createElement(fa_1.FaSort, { color: "black", size: 16 })),
-                react_1.default.createElement(react_2.Box, { transition: "opacity 0.2s ease-in-out", opacity: sortState === "asc" ? 1 : 0, position: "absolute" },
-                    react_1.default.createElement(fa_1.FaCaretUp, { color: "black", size: 16 })),
-                react_1.default.createElement(react_2.Box, { transition: "opacity 0.2s ease-in-out", opacity: sortState === "desc" ? 1 : 0, position: "absolute" },
-                    react_1.default.createElement(fa_1.FaCaretDown, { color: "black", size: 16 }))))))));
-};
+                    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

@@ -8,6 +8,6 @@ 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, onSortChange, onMenuItemClick, menuItems, selected, columnVisibility, }: KaTableProps) => React.JSX.Element>;
+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

@@ -22,12 +22,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var ka_table_1 = require("ka-table");
 var TableEnums = __importStar(require("ka-table/enums"));
 exports.TableEnums = TableEnums;
@@ -44,6 +53,8 @@ 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 common_1 = require("../../Utils/common");
 var selectionCellColumn = {
     key: "select-cell",
     width: 50,
@@ -52,25 +63,49 @@ var selectionCellColumn = {
     className: "select-cell",
 };
 var KaTable = function (_a) {
-    var _b;
-    var columns = _a.columns, data = _a.data, _c = _a.rowKey, rowKey = _c === void 0 ? "id" : _c, Edit = _a.Edit, 
+    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, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems, selected = _a.selected, columnVisibility = _a.columnVisibility;
+    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;
-    var columnVisibilitys = columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : false;
-    var mergedChildComponents = (0, useMergedChildComponents_1.default)(childComponents, onSortChange, onMenuItemClick, menuItems, onSelectionChange, rowKey, onRowClick, selected, dataLength, columns, columnVisibilitys);
-    return (react_1.default.createElement(ka_table_1.Table, { columns: columns, data: data, rowKeyField: rowKey, editingMode: Edit, key: columns, 
-        // sortingMode={sorting}
-        format: format, 
-        // paging={paging}
-        filteringMode: filter, childComponents: mergedChildComponents, columnReordering: columnReorder, columnResizing: columnResizing, editableCells: editableCells, validation: validation, loading: loading, virtualScrolling: {
-            enabled: true,
-        } }));
+    // const columnVisibilitys = columnVisibility ?? false;
+    var handleSort = function (sort) {
+        setSortState(sort);
+    };
+    var sortedData = (0, react_1.useMemo)(function () { return (0, common_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

@@ -14,9 +14,10 @@ export type KaTableProps = {
     checkSelect?: any;
     onRowClick?: (rowData: any, column: any) => void;
     onSelectionChange?: (selectedIds: any[]) => void;
-    onSortChange?: (newSortState: string, columnName: string) => void;
-    onMenuItemClick?: (action: string, columnName: string) => void;
-    menuItems?: any;
     selected?: any;
     columnVisibility?: boolean;
+    headerBgColor?: string;
+    headerTextColor?: string;
+    freezedBgColor?: string;
+    freezedTextColor?: string;
 };

package/dist/Components/KaTable/SelectionHeader.js

@@ -40,8 +40,10 @@ var SelectionHeader = function (_a) {
     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;
-            var 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]; }) : [];
+            // 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();

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

@@ -1,10 +1,4 @@
-.ka {
-  border-radius: 10px 0 0 10px;
-  border-width: 0px 0px 0px 5px;
-  border-color: #2caa3d;
-}
-
- .ka-thead-cell {
+.ka-thead-cell {
   padding: 7px 7px;
 }
 .ka-cell {
@@ -20,7 +14,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-left:5%;
+  padding-left: 5%;
 }
 .ka-row {
   box-sizing: unset;
@@ -30,4 +24,4 @@
 .ka-table-wrapper {
   border-bottom: 2px solid #d8d9db;
   border-right: 2px solid #d8d9db;
-} /**/
+}

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

@@ -1,2 +1,14 @@
-declare const useMergedChildComponents: (childComponents: any, onSortChange: any, onMenuItemClick: any, menuItems: any, handleSelection: any, rowKey: any, onRowClick: any, selected: any, dataLength: number, columns: any, columnVisibility: boolean) => any;
+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

@@ -51,19 +51,31 @@ 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 getPreviousColumnWidth = function (columns, key) {
-    var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
-    if (index > 0) {
-        return columns[index - 1].width;
-    }
-    return 0;
-};
-var useMergedChildComponents = function (childComponents, onSortChange, onMenuItemClick, menuItems, handleSelection, rowKey, onRowClick, selected, dataLength, columns, columnVisibility) {
-    var _a = react_1.default.useState(selected), selections = _a[0], setSelections = _a[1];
+var common_1 = require("../../Utils/common");
+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 theme = (0, useCustomTheme_1.useCustomTheme)();
     var isAllSelected = (0, react_1.useMemo)(function () {
         return {
             checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
@@ -90,7 +102,7 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
     return (0, react_1.useMemo)(function () {
         return __assign(__assign({}, childComponents), { dataRow: {
                 elementAttributes: function (props) {
-                    var _a;
+                    var _a, _b;
                     var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
                     var attributes = existingElementAttributes
                         ? existingElementAttributes(props)
@@ -101,11 +113,11 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
                     //   `${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 }) });
+                                : undefined, border: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[200]) }) });
                 },
             }, headCell: {
                 content: function (props) {
-                    var _a;
+                    var _a, _b, _c;
                     var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
                     if (existingContent) {
                         var result = existingContent(props);
@@ -113,16 +125,17 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
                             return result;
                         }
                     }
-                    if (props.column.customHeader === undefined ||
-                        props.column.customHeader === true) {
-                        return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: onSortChange, onMenuItemClick: onMenuItemClick, menuItems: menuItems, columnVisibility: columnVisibility })));
+                    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;
+                    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);
@@ -131,15 +144,22 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
                         }
                     }
                     if (props.column.columnFreeze) {
-                        var stickyLeft = getPreviousColumnWidth(columns, props.column.key);
+                        var stickyLeft = (0, common_1.getPreviousColumnWidth)(columns, props.column.key);
                         return {
-                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: "#d9d9db" }),
+                            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;
+                    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);
@@ -148,12 +168,17 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
                         }
                     }
                     if (props.column.columnFreeze) {
-                        var stickyLeft = getPreviousColumnWidth(columns, props.column.key);
+                        var stickyLeft = (0, common_1.getPreviousColumnWidth)(columns, props.column.key);
                         return {
-                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: "#d9d9db" }),
+                            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);
@@ -174,7 +199,6 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
                         }
                     }
                     if (props.column.key === "select-cell") {
-                        // console.log("CELLL", selections, props.rowData[rowKey]);
                         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 })));
                     }
@@ -182,18 +206,19 @@ var useMergedChildComponents = function (childComponents, onSortChange, onMenuIt
             } });
     }, [
         childComponents,
-        onSortChange,
-        onMenuItemClick,
-        menuItems,
         rowKey,
         onRowClick,
         selections,
-        columnVisibility,
         columns,
         cellSelectionHandle,
         headerSelectionHandle,
         isAllSelected,
-        theme.colors.backgroundColor.subtle,
+        theme.colors,
+        headerBgColor,
+        headerTextColor,
+        freezedBgColor,
+        freezedTextColor,
+        handleSortChange,
     ]);
 };
 exports.default = useMergedChildComponents;

package/dist/Components/SideBar/SideBar.js

@@ -1,54 +1,72 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (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 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var fi_1 = require("react-icons/fi");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Sidebar_1 = require("../../Constants/Sidebar");
 function Sidebar(_a) {
+    var _b, _c;
     var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
-        react_1.default.createElement(react_2.Flex, { pl: toggle ? "22%" : "8%", flexDir: "column", w: "100%", alignItems: "flex-start", as: "nav", h: "100vh" },
-            logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, align: "center" },
-                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo", mr: 3 }),
-                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
-                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
-            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
-                react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: "#ffffff" })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: "#ffffff" })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
-            react_1.default.createElement(react_2.Flex, { mt: 30, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "scroll", css: {
-                    "&::-webkit-scrollbar": {
-                        width: "3px",
-                    },
-                    "&::-webkit-scrollbar-track": {
-                        background: "transparent",
-                    },
-                    "&::-webkit-scrollbar-thumb": {
-                        background: "transparent",
-                        transition: "background 0.5s",
-                    },
-                    "&:hover::-webkit-scrollbar-thumb": {
-                        background: "#888",
-                    },
-                    // scrollbarWidth: "thin",
-                    // scrollbarColor: "transparent transparent",
-                    // "&:hover": {
-                    //  scrollbarColor: "#888 transparent",
-                    // },
-                }, ml: toggle ? "-8px" : "0px" }, menus.map(function (menu) { return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
-                react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title ? theme.colors.primary[500] : "none", borderRadius: 8, _hover: {
+    var RenderMenuItems = (0, react_1.useCallback)(function () {
+        return (react_1.default.createElement(react_1.default.Fragment, null, menus.map(function (menu) {
+            var _a, _b;
+            return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
+                react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title && !toggle
+                        ? theme.colors.primary[500]
+                        : "none", 
+                    // borderRadius={8}
+                    _hover: {
                         textDecor: "none",
-                        backgroundColor: theme.colors.primary[500],
-                        color: "#ffffff",
-                    }, _active: { color: "#ffffff" }, w: "98%", onClick: function () { return handleMenuClick(menu === null || menu === void 0 ? void 0 : menu.title, menu === null || menu === void 0 ? void 0 : menu.url); }, mt: "5px", className: "custom-link", width: toggle ? "80%" : "90%" },
-                    react_1.default.createElement(react_2.MenuButton, { w: "100%", p: "13px 12px 13px 13px" },
-                        react_1.default.createElement(react_2.Flex, null,
-                            react_1.default.createElement(react_2.Icon, { as: menu.icon, fontSize: "xl", color: activeMenu === menu.title ? "#ffff" : "" }),
-                            react_1.default.createElement(react_2.Text, { ml: 5, display: toggle ? "none" : "flex", color: activeMenu === menu.title ? "#ffff" : "" }, menu.title)))),
+                        backgroundColor: !toggle && theme.colors.primary[500],
+                        color: toggle ? (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary[500] : theme.colors.white,
+                    }, _active: { color: theme.colors.white }, w: "98%", onClick: function () { return handleMenuClick(menu === null || menu === void 0 ? void 0 : menu.title, menu === null || menu === void 0 ? void 0 : menu.url); }, mt: "5px", className: "custom-link", width: toggle ? "none" : "100%" },
+                    react_1.default.createElement(react_2.MenuButton, { w: "100%", p: "12px", fontWeight: 700 },
+                        react_1.default.createElement(react_2.Flex, { gap: "10px" },
+                            react_1.default.createElement(react_2.Icon, { as: menu.icon, fontSize: "xl", color: activeMenu === menu.title
+                                    ? toggle
+                                        ? theme.colors.primary["500"]
+                                        : "white"
+                                    : "" }),
+                            react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", color: activeMenu === menu.title ? (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white : "" }, menu.title)))),
                 menu.subMenu && (react_1.default.createElement(react_2.MenuList, { py: 0, border: "none", ml: toggle ? 3 : 6, boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)" },
                     react_1.default.createElement(react_2.Flex, { pos: "absolute", mt: "calc(100px - 70px)", ml: "-10px", width: 0, height: 0, borderTop: "10px solid transparent", borderBottom: "10px solid transparent", borderRight: "10px solid #3182CE" }),
-                    menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); }))))); })))));
+                    menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); })))));
+        })));
+    }, [activeMenu, menus, handleMenuClick, toggle, theme.colors]);
+    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
+        react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: "center", as: "nav", h: "100vh" },
+            logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, alignItems: "center", gap: 5 },
+                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo" }),
+                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
+                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
+            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
+                react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
+            react_1.default.createElement(react_2.Flex, { mt: 35, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
+                react_1.default.createElement(RenderMenuItems, null)))));
 }
 exports.default = Sidebar;

package/dist/Constants/Sidebar.d.ts

@@ -0,0 +1,15 @@
+export declare const FlexCss: {
+    "&::-webkit-scrollbar": {
+        width: string;
+    };
+    "&::-webkit-scrollbar-track": {
+        background: string;
+    };
+    "&::-webkit-scrollbar-thumb": {
+        background: string;
+        transition: string;
+    };
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: string;
+    };
+};

package/dist/Constants/Sidebar.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexCss = void 0;
+exports.FlexCss = {
+    "&::-webkit-scrollbar": {
+        width: "3px",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: "transparent",
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.5s",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: "#888",
+    },
+};

package/dist/Pages/KaTableExample.js

@@ -87,7 +87,7 @@ var columns = [
         key: "column2",
         title: "Column 2",
         dataType: DataType.String,
-        width: 150,
+        width: 250,
         // visible: false,
     },
     {
@@ -95,12 +95,28 @@ var columns = [
         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",
@@ -119,6 +135,7 @@ var columns = [
         title: "Column 7",
         dataType: DataType.Number,
         width: 150,
+        sortable: true,
     },
     {
         key: "column8",
@@ -222,7 +239,7 @@ var KaTableExample = function () {
                 console.log("Row clicked", rowKeyValue);
             }, selected: selectedRows, onSelectionChange: function (selectedRows) {
                 handleCheckSelect(selectedRows);
-            }, columnVisibility: true, menuItems: menuItems, 
+            }, columnVisibility: true, 
             // onSortChange={handleSortChange}
             // onMenuItemClick={handleMenuItemClick}
             // format={kaTableFormat}

package/dist/Pages/katable.d.ts

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

package/dist/Pages/katable.js

@@ -0,0 +1,194 @@
+"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 __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 = __importDefault(require("../Components/KaTable/KaTable"));
+var KaTable_2 = require("../Components/KaTable/KaTable");
+var icons_1 = require("@chakra-ui/icons");
+var katable = function () {
+    var DataType = KaTable_2.TableEnums.DataType;
+    var dataArray = Array(50)
+        .fill(undefined)
+        .map(function (_, index) { return ({
+        column1: index % 2 === 0,
+        column2: "column:2 row:".concat(index + 1),
+        column3: index + 5,
+        column4: index + 10,
+        column5: index + 15,
+        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: 150,
+            columnFreeze: true,
+            customHeader: false,
+        },
+        {
+            key: "column2",
+            title: "Column 2",
+            dataType: DataType.String,
+            width: 150,
+        },
+        {
+            key: "column3",
+            title: "Column 3",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            key: "column4",
+            title: "Column 4",
+            dataType: DataType.Number,
+            width: 150,
+        },
+        {
+            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,
+        },
+        {
+            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 kaTableFormat = function (props) {
+        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)));
+    };
+    var handleSortChange = function (newSortState, columnName) {
+        console.log("Sort state for ".concat(columnName, " changed to:"), newSortState);
+    };
+    var handleMenuItemClick = function (action, columnName) {
+        console.log("Menu item clicked for ".concat(columnName, ":"), action);
+    };
+    var menuItems = [
+        { label: "Sort", action: "Sort" },
+        { label: "Hide column", action: "Hide column" },
+        {
+            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" },
+            ],
+        },
+    ];
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(KaTable_1.default, { data: dataArray, columns: columns, checkSelect: true, onRowClick: function (rowKeyValue) {
+                console.log("Row clicked", rowKeyValue);
+            }, onSelectionChange: function (selectedRows) {
+                console.log("Selected rows:", selectedRows);
+            }, menuItems: menuItems, 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 = katable;

package/dist/Theme/fonts.d.ts

@@ -1,4 +1,5 @@
 import "@fontsource/ubuntu-sans";
+import "@fontsource-variable/inter";
 declare const fonts: {
     fonts: {
         body: string;

package/dist/Theme/fonts.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@fontsource/ubuntu-sans");
+// Supports weights 100-900
+require("@fontsource-variable/inter");
 var fonts = {
     fonts: {
-        body: "Ubuntu Sans, serif",
-        heading: "Ubuntu Sans, serif",
-        mono: "Ubuntu Sans, monospace",
+        body: "Inter Variable, sans-serif",
+        heading: "Inter Variable, sans-serif",
+        mono: "Inter Variable, sans-serif",
+        // body: "Ubuntu Sans, serif",
+        // heading: "Ubuntu Sans, serif",
+        // mono: "Ubuntu Sans, monospace",
     },
     fontSizes: {
         xs: "0.75rem",

package/dist/Utils/common.d.ts

@@ -0,0 +1,5 @@
+export declare function SortMultiColumnData(data: Record<string, any>[], sortConfig: {
+    column: string;
+    direction: string;
+}[]): Record<string, any>[];
+export declare const getPreviousColumnWidth: (columns: any, key: any) => any;

package/dist/Utils/common.js

@@ -0,0 +1,41 @@
+"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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreviousColumnWidth = exports.SortMultiColumnData = void 0;
+function SortMultiColumnData(data, sortConfig) {
+    if (!sortConfig.length)
+        return data;
+    return __spreadArray([], data, true).sort(function (a, b) {
+        for (var _i = 0, sortConfig_1 = sortConfig; _i < sortConfig_1.length; _i++) {
+            var _a = sortConfig_1[_i], column = _a.column, direction = _a.direction;
+            if (direction === "none") {
+                continue;
+            }
+            var dirMultiplier = direction === "asc" ? 1 : -1;
+            // Compare values for the current column
+            if (a[column] < b[column])
+                return -1 * dirMultiplier;
+            if (a[column] > b[column])
+                return 1 * dirMultiplier;
+            // If values are equal, continue to the next sorting rule
+        }
+        return 0; // Return 0 if all sort conditions are equal
+    });
+}
+exports.SortMultiColumnData = SortMultiColumnData;
+var getPreviousColumnWidth = function (columns, key) {
+    var index = columns === null || columns === void 0 ? void 0 : columns.findIndex(function (column) { return column.key === key; });
+    if (index > 0) {
+        return columns[index - 1].width;
+    }
+    return 0;
+};
+exports.getPreviousColumnWidth = getPreviousColumnWidth;

package/dist/bootstrap.js

@@ -7,8 +7,7 @@ var react_1 = __importDefault(require("react"));
 var client_1 = __importDefault(require("react-dom/client"));
 var App_1 = __importDefault(require("./App"));
 var withTheme_1 = __importDefault(require("./withTheme"));
-var Theme_1 = require("./Theme");
 var root = client_1.default.createRoot(document.getElementById("root"));
-var ThemeApp = (0, withTheme_1.default)(App_1.default, Theme_1.meadow);
+var ThemeApp = (0, withTheme_1.default)(App_1.default);
 root.render(react_1.default.createElement(react_1.default.StrictMode, null,
     react_1.default.createElement(ThemeApp, null)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.33",
+  "version": "1.1.34",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -11,6 +11,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fontsource-variable/inter": "^5.1.0",
     "@fontsource/ubuntu-sans": "^5.1.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

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;