pixelize-design-library 1.0.99 → 1.1.2

package/dist/Components/DatePicker/DatePicker.js

@@ -17,7 +17,11 @@ var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"], ["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"])), function (props) { return props.theme.colors.primary[500]; });
-var Label = styled_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"], ["\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n"])));
+// const Label = styled.label`
+//   display: block;
+//   margin-bottom: 5px;
+//   font-weight: bold;
+// `;
 function DatePicker(_a) {
     var selectedDate = _a.selectedDate, onChange = _a.onChange, _b = _a.placeholderText, placeholderText = _b === void 0 ? "Select a date" : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? "MM/dd/yyyy" : _c, _d = _a.showTimeSelect, showTimeSelect = _d === void 0 ? false : _d, _e = _a.timeFormat, timeFormat = _e === void 0 ? "HH:mm aa" : _e, _f = _a.timeIntervals, timeIntervals = _f === void 0 ? 30 : _f, _g = _a.timeCaption, timeCaption = _g === void 0 ? "Time" : _g, dateTimeFormat = _a.dateTimeFormat, id = _a.id, name = _a.name, label = _a.label, _h = _a.isRequired, isRequired = _h === void 0 ? false : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, _k = _a.informationMessage, informationMessage = _k === void 0 ? "" : _k, _l = _a.error, error = _l === void 0 ? false : _l, _m = _a.errorMessage, errorMessage = _m === void 0 ? "" : _m, _o = _a.helperText, helperText = _o === void 0 ? "" : _o;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -33,4 +37,4 @@ function DatePicker(_a) {
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }
 exports.default = DatePicker;
-var templateObject_1, templateObject_2;
+var templateObject_1;

package/dist/Components/Dropdown/DropDown.js

@@ -79,7 +79,7 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
             (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: "1.5rem", mr: 2, style: ImageStyle })),
             react_1.default.createElement(react_2.Box, { as: "span", isTruncated: true, style: LabelStyle }, option.label))); })));
     };
-    return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block", width: "100%" },
+    return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
         dropDownToggleOption(),
         isOpen && (react_1.default.createElement(MotionBox, { ref: ref, position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, style: headStyle }, DropdownContentRender()))));
 });

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const CustomHeader: ({ column, onSortChange, onMenuItemClick, menuItems, }: any) => React.JSX.Element;
+export default CustomHeader;

package/dist/Components/KaTable/CustomHeader.js

@@ -0,0 +1,519 @@
+"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 fi_1 = require("react-icons/fi");
+var CustomHeader = function (_a) {
+    var column = _a.column, onSortChange = _a.onSortChange, onMenuItemClick = _a.onMenuItemClick, menuItems = _a.menuItems;
+    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_2.useDisclosure)(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.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),
+            });
+            // setSubmenuPosition({
+            //   top: rect.bottom,
+            //   left: rect.right,
+            // });
+        }
+    };
+    var handleMenuItemClick = function (action) {
+        if (onMenuItemClick) {
+            onMenuItemClick(action, column.title);
+        }
+        setSubmenuOpen(false);
+    };
+    var _e = (0, react_1.useState)("none"), sortState = _e[0], setSortState = _e[1];
+    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",
+                } },
+                react_1.default.createElement(fi_1.FiInfo, null),
+                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",
+                            },
+                        } })),
+                    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.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 }))))))));
+};
+exports.default = CustomHeader;
+// import React, { useState, useRef } from "react";
+// import {
+//   Box,
+//   IconButton,
+//   Menu,
+//   MenuButton,
+//   MenuList,
+//   MenuItem,
+//   Portal,
+//   MenuDivider,
+//   MenuGroup,
+//   Flex,
+//   useDisclosure,
+// } from "@chakra-ui/react";
+// import { BsThreeDots } from "react-icons/bs";
+// import { FaCaretDown, FaCaretUp, FaSort } from "react-icons/fa";
+// import { FiInfo } from "react-icons/fi";
+// const CustomHeader = ({ column, onSortChange, onMenuItemClick,menuItems }: any) => {
+//   const [isSubmenuOpen, setSubmenuOpen] = useState(false);
+//   const [submenuPosition, setSubmenuPosition] = useState<{
+//     top: number;
+//     left: number;
+//   } | null>(null);
+//   const { isOpen, onOpen, onClose } = useDisclosure();
+//   const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+//   const handleSubmenuToggle = (e: React.MouseEvent) => {
+//     e.stopPropagation();
+//     setSubmenuOpen((prev) => !prev);
+//     if (filterButtonRef.current) {
+//       const rect = filterButtonRef.current.getBoundingClientRect();
+//       setSubmenuPosition({
+//         top:
+//           rect.bottom -
+//           ((rect.bottom - rect.top) * (rect.bottom - 35)) /
+//             (rect.bottom - rect.top),
+//         left: rect.x - (rect.x - 320) * (rect.width / rect.width),
+//       });
+//     }
+//   };
+//   const handleMenuItemClick = (action: string) => {
+//     if (onMenuItemClick) {
+//       onMenuItemClick(action, column.title);
+//     }
+//     setSubmenuOpen(false);
+//   };
+//   const [sortState, setSortState] = useState<"none" | "asc" | "desc">("none");
+//   const handleSortClick = () => {
+//     setSortState((prevState) => {
+//       const newState =
+//         prevState === "none" ? "asc" : prevState === "asc" ? "desc" : "none";
+//       if (onSortChange) {
+//         onSortChange(newState, column.title);
+//       }
+//       return newState;
+//     });
+//   };
+//   return (
+//     <div onMouseEnter={onOpen} onMouseLeave={onClose}>
+//       <Box
+//         style={{
+//           display: "flex",
+//           justifyContent: "space-between",
+//           alignItems: "center",
+//         }}
+//       >
+//         <Box sx={{ fontWeight: "bold" }}>{column.title}</Box>
+//         <Box
+//           style={{
+//             display: "flex",
+//             justifyContent: "space-between",
+//             alignItems: "center",
+//           }}
+//         >
+//           <FiInfo />
+//           <Menu>
+//             {isOpen && (
+//               <MenuButton
+//                 ref={filterButtonRef}
+//                 as={IconButton}
+//                 aria-label="More options"
+//                 icon={<BsThreeDots />}
+//                 size="sm"
+//                 variant="ghost"
+//                 sx={{
+//                   _hover: {
+//                     background: "none",
+//                   },
+//                   _active: {
+//                     background: "none",
+//                   },
+//                 }}
+//               />
+//             )}
+//             <Portal>
+//               <MenuList
+//                 sx={{
+//                   boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
+//                   borderRadius: "8px",
+//                   padding: "8px",
+//                   backgroundColor: "white",
+//                 }}
+//                 onMouseLeave={onClose}
+//               >
+//                 <MenuItem onClick={() => handleMenuItemClick("Sort")}>
+//                   Sort
+//                 </MenuItem>
+//                 <MenuItem onClick={() => handleMenuItemClick("Hide column")}>
+//                   Hide column
+//                 </MenuItem>
+//                 {/* Main menu item with submenu toggle */}
+//                 <MenuItem closeOnSelect={false} onClick={handleSubmenuToggle}>
+//                   Filter
+//                 </MenuItem>
+//                 {/* Submenu */}
+//                 {isSubmenuOpen && submenuPosition && (
+//                   <Box
+//                     position="absolute"
+//                     top={submenuPosition.top}
+//                     left={submenuPosition.left}
+//                     transform="translateX(-50%)"
+//                     zIndex={1}
+//                     boxShadow="0px 0px 20px 11px rgba(0, 0, 0, 0.1)"
+//                     borderRadius="8px"
+//                     backgroundColor="white"
+//                     padding="8px"
+//                     width={"200px"} // Set a fixed width or adjust as needed
+//                   >
+//                     <MenuGroup onMouseLeave={onClose}>
+//                       <MenuItem
+//                         closeOnSelect={true}
+//                         onClick={() => handleMenuItemClick("Filter by Date")}
+//                       >
+//                         Filter by Date
+//                       </MenuItem>
+//                       <MenuItem
+//                         closeOnSelect={true}
+//                         onClick={() => handleMenuItemClick("Filter by Name")}
+//                       >
+//                         Filter by Name
+//                       </MenuItem>
+//                       <MenuItem
+//                         closeOnSelect={true}
+//                         onClick={() => handleMenuItemClick("Filter by Status")}
+//                       >
+//                         Filter by Status
+//                       </MenuItem>
+//                     </MenuGroup>
+//                   </Box>
+//                 )}
+//                 <MenuDivider />
+//                 <MenuItem onClick={() => handleMenuItemClick("Other Options")}>
+//                   Other Options
+//                 </MenuItem>
+//               </MenuList>
+//             </Portal>
+//           </Menu>
+//         </Box>
+//       </Box>
+//       <Box sx={{ position: "absolute", right: 20, top: 0 }}>
+//         {isOpen && (
+//           <Flex alignItems="center">
+//             <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)" }}
+//             >
+//               <Box
+//                 transition="opacity 0.2s ease-in-out"
+//                 opacity={sortState === "none" ? 1 : 0}
+//                 position="absolute"
+//               >
+//                 <FaSort color="black" size={16} />
+//               </Box>
+//               <Box
+//                 transition="opacity 0.2s ease-in-out"
+//                 opacity={sortState === "asc" ? 1 : 0}
+//                 position="absolute"
+//               >
+//                 <FaCaretUp color="black" size={16} />
+//               </Box>
+//               <Box
+//                 transition="opacity 0.2s ease-in-out"
+//                 opacity={sortState === "desc" ? 1 : 0}
+//                 position="absolute"
+//               >
+//                 <FaCaretDown color="black" size={16} />
+//               </Box>
+//             </Box>
+//           </Flex>
+//         )}
+//       </Box>
+//     </div>
+//   );
+// };
+// export default CustomHeader;
+// import React, { useState, useRef } from "react";
+// import {
+//   Box,
+//   IconButton,
+//   Menu,
+//   MenuButton,
+//   MenuList,
+//   MenuItem,
+//   Portal,
+//   MenuDivider,
+//   MenuGroup,
+//   Flex,
+//   useDisclosure,
+// } from "@chakra-ui/react";
+// import { BsThreeDots } from "react-icons/bs";
+// import { FaCaretDown, FaCaretUp, FaSort } from "react-icons/fa";
+// import { FiInfo } from "react-icons/fi";
+// const CustomHeader = ({ column }: any) => {
+//   const [isSubmenuOpen, setSubmenuOpen] = useState(false);
+//   const [submenuPosition, setSubmenuPosition] = useState<{
+//     top: number;
+//     left: number;
+//   } | null>(null);
+//   const { isOpen, onOpen, onClose } = useDisclosure();
+//   const filterButtonRef = useRef<HTMLButtonElement | null>(null);
+//   const handleSubmenuToggle = (e: React.MouseEvent) => {
+//     e.stopPropagation();
+//     setSubmenuOpen((prev) => !prev);
+//     if (filterButtonRef.current) {
+//       const rect = filterButtonRef.current.getBoundingClientRect();
+//       console.log(rect);
+//       setSubmenuPosition({
+//         top:
+//           rect.bottom -
+//           ((rect.bottom - rect.top) * (rect.bottom - 35)) /
+//             (rect.bottom - rect.top),
+//         left: rect.x - (rect.x - 320) * (rect.width / rect.width),
+//       });
+//     }
+//   };
+//   const handleMenuItemClick = (action: string) => {
+//     console.log(action, "menuitem");
+//     setSubmenuOpen(false);
+//   };
+//   const [sortState, setSortState] = useState<"none" | "asc" | "desc">("none");
+//   const handleSortClick = () => {
+//     setSortState((prevState) => {
+//       if (prevState === "none") return "asc";
+//       if (prevState === "asc") return "desc";
+//       return "none";
+//     });
+//   };
+//   return (
+//     <div onMouseEnter={onOpen} onMouseLeave={onClose}>
+//       <Box
+//         style={{
+//           display: "flex",
+//           justifyContent: "space-between",
+//           alignItems: "center",
+//         }}
+//       >
+//         <Box sx={{ fontWeight: "bold" }}>{column.title}</Box>
+//         <Box
+//           style={{
+//             display: "flex",
+//             justifyContent: "space-between",
+//             alignItems: "center",
+//           }}
+//         >
+//           <FiInfo />
+//           <Menu>
+//             {isOpen && (
+//               <MenuButton
+//                 ref={filterButtonRef}
+//                 as={IconButton}
+//                 aria-label="More options"
+//                 icon={<BsThreeDots />}
+//                 size="sm"
+//                 variant="ghost"
+//                 sx={{
+//                   _hover: {
+//                     background: "none",
+//                   },
+//                   _active: {
+//                     background: "none",
+//                   },
+//                 }}
+//               />
+//             )}
+//             <Portal>
+//               <MenuList
+//                 sx={{
+//                   boxShadow: "0px 0px 20px 11px rgba(0, 0, 0, 0.1)",
+//                   borderRadius: "8px",
+//                   padding: "8px",
+//                   backgroundColor: "white",
+//                 }}
+//                 onMouseLeave={onClose}
+//               >
+//                 <MenuItem onClick={() => handleMenuItemClick("Sort")}>
+//                   Sort
+//                 </MenuItem>
+//                 <MenuItem onClick={() => handleMenuItemClick("Hide column")}>
+//                   Hide column
+//                 </MenuItem>
+//                 {/* Main menu item with submenu toggle */}
+//                 <MenuItem closeOnSelect={false} onClick={handleSubmenuToggle}>
+//                   Filter
+//                 </MenuItem>
+//                 {/* Submenu */}
+//                 {isSubmenuOpen && submenuPosition && (
+//                   <Box
+//                     position="absolute"
+//                     top={submenuPosition.top}
+//                     left={submenuPosition.left}
+//                     transform="translateX(-50%)"
+//                     zIndex={1}
+//                     boxShadow="0px 0px 20px 11px rgba(0, 0, 0, 0.1)"
+//                     borderRadius="8px"
+//                     backgroundColor="white"
+//                     padding="8px"
+//                     width={"200px"} // Set a fixed width or adjust as needed
+//                   >
+//                     <MenuGroup onMouseLeave={onClose}>
+//                       <MenuItem
+//                         closeOnSelect={true}
+//                         onClick={() => handleMenuItemClick("Filter by Date")}
+//                       >
+//                         Filter by Date
+//                       </MenuItem>
+//                       <MenuItem
+//                         closeOnSelect={true}
+//                         onClick={() => handleMenuItemClick("Filter by Name")}
+//                       >
+//                         Filter by Name
+//                       </MenuItem>
+//                       <MenuItem
+//                         closeOnSelect={true}
+//                         onClick={() => handleMenuItemClick("Filter by Status")}
+//                       >
+//                         Filter by Status
+//                       </MenuItem>
+//                     </MenuGroup>
+//                   </Box>
+//                 )}
+//                 <MenuDivider />
+//                 <MenuItem onClick={() => handleMenuItemClick("Other Options")}>
+//                   Other Options
+//                 </MenuItem>
+//               </MenuList>
+//             </Portal>
+//           </Menu>
+//         </Box>
+//       </Box>
+//       <Box sx={{ position: "absolute", right: 20, top: 0 }}>
+//         {isOpen && (
+//           <Flex alignItems="center">
+//             <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)" }}
+//             >
+//               <Box
+//                 transition="opacity 0.2s ease-in-out"
+//                 opacity={sortState === "none" ? 1 : 0}
+//                 position="absolute"
+//               >
+//                 <FaSort color="black" size={16} />
+//               </Box>
+//               <Box
+//                 transition="opacity 0.2s ease-in-out"
+//                 opacity={sortState === "asc" ? 1 : 0}
+//                 position="absolute"
+//               >
+//                 <FaCaretUp color="black" size={16} />
+//               </Box>
+//               <Box
+//                 transition="opacity 0.2s ease-in-out"
+//                 opacity={sortState === "desc" ? 1 : 0}
+//                 position="absolute"
+//               >
+//                 <FaCaretDown color="black" size={16} />
+//               </Box>
+//             </Box>
+//           </Flex>
+//         )}
+//       </Box>
+//     </div>
+//   );
+// };
+// export default CustomHeader;

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

@@ -1,9 +1,13 @@
-import React from 'react';
-import { KaTableProps } from './KaTableProps';
-import * as TableEnums from 'ka-table/enums';
-import * as TableProps from 'ka-table/props';
-import * as TableActionCreator from 'ka-table/actionCreators';
+import React from "react";
+import { KaTableProps } from "./KaTableProps";
+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";
-declare const KaTable: ({ columns, data, rowKey, Edit, shorting, format, paging, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading }: KaTableProps) => React.JSX.Element;
+import "./ka-table.css";
+declare const KaTable: ({ columns, data, rowKey, Edit, sorting, format, paging, filter, childComponents, columnReorder, columnResizing, editableCells, validation, loading, checkSelect, onRowClick, onSelectionChange, onSortChange, onMenuItemClick, menuItems, }: KaTableProps) => React.JSX.Element;
 export default KaTable;
-export { TableEnums, TableActionCreator, TableProps };
+export { TableEnums, TableActionCreator, TableProps, TableModel, TableUtils, TableFun, };