pixelize-design-library 1.1.27 → 1.1.28

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -19,6 +19,7 @@ export type ButtonGroupIconProps = {
     dropdownOptions?: {
         label: string;
         id: string | number;
+        image?: ReactElement | undefined;
     }[];
     onDropdownOptionClick?: (event: React.MouseEvent, option: {
         label: string;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -66,7 +66,9 @@ function ButtonGroupIcon(_a) {
                     },
                 } }),
             react_1.default.createElement(react_2.Portal, null,
-                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle }, option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
+                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle }, option === null || option === void 0 ? void 0 :
+                    option.image,
+                    option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
                 backgroundColor: theme.colors.primary[500],
                 "&:hover": {
                     backgroundColor: theme.colors.primary[400],

package/dist/Components/KaTable/CustomHeader.js

@@ -29,10 +29,10 @@ 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;
-    // console.log(columnVisibility, "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_2.useDisclosure)(), isOpen = _d.isOpen, onOpen = _d.onOpen, onClose = _d.onClose;
+    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();
@@ -45,19 +45,14 @@ var CustomHeader = function (_a) {
                         (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);
+            onMenuItemClick(action, column);
         }
         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";
@@ -109,409 +104,3 @@ var CustomHeader = function (_a) {
                     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;