pixelize-design-library 2.1.69 → 2.1.72

package/dist/Components/KaTable/useMergedChildComponents.js

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

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

@@ -1,3 +1,11 @@
 import React from "react";
-declare const TableActions: ({ row }: any) => React.JSX.Element;
+type TableRowActions = {
+    onLink?: (row: any) => void;
+    onEdit?: (row: any) => void;
+    onDelete?: (row: any) => void;
+    [key: string]: any;
+};
+declare const TableActions: ({ row }: {
+    row?: TableRowActions | undefined;
+}) => React.JSX.Element | null;
 export default TableActions;

package/dist/Components/Table/Components/TableActions.js

@@ -1,4 +1,16 @@
 "use strict";
+// import React, { useEffect, useRef, useState } from "react";
+// import {
+//   Button,
+//   IconButton,
+//   Popover,
+//   PopoverBody,
+//   PopoverContent,
+//   PopoverTrigger,
+//   Portal,
+//   VStack,
+// } from "@chakra-ui/react";
+// import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -23,6 +35,109 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+// const TableActions = ({ row }: any) => {
+//   const [isOpen, setIsOpen] = useState(false);
+//   const ref = useRef<HTMLDivElement>(null);
+//   // Listen for "close-all-popovers"
+//   useEffect(() => {
+//     const handler = () => setIsOpen(false);
+//     window.addEventListener("close-all-popovers", handler);
+//     return () => window.removeEventListener("close-all-popovers", handler);
+//   }, []);
+//   // Detect outside click
+//   useEffect(() => {
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (ref.current && !ref.current.contains(event.target as Node)) {
+//         setIsOpen(false);
+//       }
+//     };
+//     if (isOpen) {
+//       document.addEventListener("mousedown", handleClickOutside);
+//     }
+//     return () => document.removeEventListener("mousedown", handleClickOutside);
+//   }, [isOpen]);
+//   const handleOpen = () => {
+//     window.dispatchEvent(new Event("close-all-popovers")); // close others
+//     setIsOpen(true);
+//   };
+//   const handleClose = () => setIsOpen(false);
+//   return (
+//     <Popover
+//       placement="bottom-start"
+//       isOpen={isOpen}
+//       onClose={handleClose}
+//       closeOnBlur={false} // we handle outside click manually
+//     >
+//       <div ref={ref}>
+//         <PopoverTrigger>
+//           <IconButton
+//             aria-label="Link"
+//             color="black"
+//             icon={<EllipsisVertical size={17} />}
+//             size="sm"
+//             p={0}
+//             variant="ghost"
+//             _hover={{ transform: "scale(1.2)" }}
+//             onClick={() => (isOpen ? handleClose() : handleOpen())}
+//           />
+//         </PopoverTrigger>
+//         <Portal>
+//           <PopoverContent w="auto" minW="150px" boxShadow="lg" p={0} zIndex={999}>
+//             <PopoverBody>
+//               <VStack align="stretch" spacing={1}>
+//                 {row.onLink && (
+//                   <Button
+//                     size="sm"
+//                     variant="ghost"
+//                     justifyContent="flex-start"
+//                     gap={2}
+//                     onClick={() => {
+//                       row.onLink(row);
+//                       console.log(row,"row")
+//                       handleClose();
+//                     }}
+//                   >
+//                     <ExternalLink size={17} /> View
+//                   </Button>
+//                 )}
+//                 {row.onEdit && (
+//                   <Button
+//                     size="sm"
+//                     variant="ghost"
+//                     justifyContent="flex-start"
+//                     gap={2}
+//                     onClick={() => {
+//                       row.onEdit(row);
+//                       handleClose();
+//                     }}
+//                   >
+//                     <Pencil size={17} /> Edit
+//                   </Button>
+//                 )}
+//                 {row.onDelete && (
+//                   <Button
+//                     size="sm"
+//                     variant="ghost"
+//                     justifyContent="flex-start"
+//                     colorScheme="red"
+//                     gap={2}
+//                     onClick={() => {
+//                       row.onDelete(row);
+//                       handleClose();
+//                     }}
+//                   >
+//                     <Trash2 size={17} /> Delete
+//                   </Button>
+//                 )}
+//               </VStack>
+//             </PopoverBody>
+//           </PopoverContent>
+//         </Portal>
+//       </div>
+//     </Popover>
+//   );
+// };
+// export default TableActions;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
@@ -44,40 +159,61 @@ var TableActions = function (_a) {
             }
         };
         if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
+            // ✅ Use click instead of mousedown
+            document.addEventListener("click", handleClickOutside);
         }
-        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
+        return function () {
+            document.removeEventListener("click", handleClickOutside);
+        };
     }, [isOpen]);
+    // useEffect(() => {
+    //   const handleClickOutside = (event: MouseEvent) => {
+    //     if (ref.current && !ref.current.contains(event.target as Node)) {
+    //       setIsOpen(false);
+    //     }
+    //   };
+    //   if (isOpen) {
+    //     document.addEventListener("mousedown", handleClickOutside);
+    //   }
+    //   return () => document.removeEventListener("mousedown", handleClickOutside);
+    // }, [isOpen]);
     var handleOpen = function () {
         window.dispatchEvent(new Event("close-all-popovers")); // close others
         setIsOpen(true);
     };
     var handleClose = function () { return setIsOpen(false); };
+    // ✅ if row itself is missing, render nothing
+    if (!row)
+        return null;
     return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false },
         react_1.default.createElement("div", { ref: ref },
             react_1.default.createElement(react_2.PopoverTrigger, null,
-                react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
+                react_1.default.createElement(react_2.IconButton, { "aria-label": "Actions", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: function () { return (isOpen ? handleClose() : handleOpen()); } })),
             react_1.default.createElement(react_2.Portal, null,
                 react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
                     react_1.default.createElement(react_2.PopoverBody, null,
                         react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
                             row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
-                                    row.onLink(row);
-                                    handleClose();
+                                    var _a;
+                                    (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                    // handleClose();
                                 } },
                                 react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
                                 " View")),
                             row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () {
-                                    row.onEdit(row);
-                                    handleClose();
+                                    var _a;
+                                    (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                    // handleClose();
                                 } },
                                 react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
                                 " Edit")),
                             row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () {
-                                    row.onDelete(row);
-                                    handleClose();
+                                    var _a;
+                                    (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                    // handleClose();
                                 } },
                                 react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
-                                " Delete")))))))));
+                                " Delete")),
+                            !row.onLink && !row.onEdit && !row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center" }, "No actions")))))))));
 };
 exports.default = TableActions;

package/dist/Components/Table/Table.css

@@ -0,0 +1,16 @@
+.table_wrapper {
+  width: 100%;
+  border-collapse: collapse;
+  /* table-layout: fixed; */
+}
+
+.table_wrapper th .resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  z-index: 999;
+}

package/dist/Pages/KaTableExample.d.ts

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