@codezee/sixtify-brahma 0.2.59 → 0.2.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.59",
+  "version": "0.2.60",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"

package/packages/shared-components/dist/AgGrid/ActionCell/ActionCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionCell.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/ActionCell/ActionCell.tsx"],"names":[],"mappings":"AAMA,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,UAAU,GAAI,qBAAqB,iBAAiB,4CAyChE,CAAC"}
+{"version":3,"file":"ActionCell.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/ActionCell/ActionCell.tsx"],"names":[],"mappings":"AAMA,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AACF,eAAO,MAAM,UAAU,GAAI,qBAAqB,iBAAiB,4CA6ChE,CAAC"}

package/packages/shared-components/dist/AgGrid/ActionCell/ActionCell.js

@@ -19,7 +19,10 @@ const ActionCell = ({ items, disabled }) => {
         setAnchorEl(event.currentTarget);
     };
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: "100%" }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { component: "div", sx: { cursor: "pointer", alignItems: "center", width: "100%" }, onClick: HandleClick, disabled: disabled, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, {}) }), !!anchorEl && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { open: true, anchorEl: anchorEl, onClose: HandleClose, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: items.map((item) => {
-                        return ((0, jsx_runtime_1.jsx)(material_1.Stack, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { width: "100%", textAlign: "center" }, onClick: () => item?.onClick(), children: item.title }) }, item.title));
+                        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: { width: "100%", textAlign: "center" }, onClick: () => {
+                                    item?.onClick();
+                                    setAnchorEl(null);
+                                }, children: item.title }) }, item.title));
                     }) }) }))] }));
 };
 exports.ActionCell = ActionCell;

package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.d.ts

@@ -4,9 +4,10 @@ import type { CellCoord, Column } from "./utils/types";
 export type CellSelectionTableProps = {
     columns: Column[];
     data: Record<string, string>[];
-    onCellSelection: (selectedCells: Dictionary<CellCoord[]>, e?: MouseEvent) => void;
+    onCellSelection: (selectedCells: Dictionary<CellCoord[]>, e: MouseEvent) => void;
     cellColors?: (status: string) => string;
     height?: string | number;
+    loading?: boolean;
 };
-export declare const CellSelectionTable: ({ columns, data, onCellSelection, cellColors, height, }: Readonly<CellSelectionTableProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CellSelectionTable: ({ columns, data, onCellSelection, cellColors, height, loading, }: Readonly<CellSelectionTableProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CellSelectionTable.d.ts.map

package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CellSelectionTable.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/CellSelectionTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAAE,KAAK,UAAU,EAA0C,MAAM,OAAO,CAAC;AAShF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAoB,MAAM,eAAe,CAAC;AAEzE,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC/B,eAAe,EAAE,CACf,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EACtC,CAAC,CAAC,EAAE,UAAU,KACX,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,yDAMhC,QAAQ,CAAC,uBAAuB,CAAC,4CAiNnC,CAAC"}
+{"version":3,"file":"CellSelectionTable.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/CellSelectionTable.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGzC,OAAO,EAAE,KAAK,UAAU,EAA0C,MAAM,OAAO,CAAC;AAUhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,EAAoB,MAAM,eAAe,CAAC;AAEzE,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC/B,eAAe,EAAE,CACf,aAAa,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EACtC,CAAC,EAAE,UAAU,KACV,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,kEAOhC,QAAQ,CAAC,uBAAuB,CAAC,4CAoOnC,CAAC"}

package/packages/shared-components/dist/CellSelectionTable/CellSelectionTable.js

@@ -12,8 +12,9 @@ const uniqBy_1 = __importDefault(require("lodash/uniqBy"));
 const react_1 = require("react");
 const Tooltip_1 = require("../Tooltip");
 const EmployeeCell_1 = require("./SubComponents/EmployeeCell");
+const TableBodyLoader_1 = require("./SubComponents/TableBodyLoader");
 const helper_1 = require("./utils/helper");
-const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height, }) => {
+const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height, loading = false, }) => {
     const theme = (0, material_1.useTheme)();
     const { slate, iron, butterflyBlue } = theme.palette.app.color;
     const selectingRef = (0, react_1.useRef)(false);
@@ -42,9 +43,6 @@ const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height
         const unique = (0, uniqBy_1.default)(selectedRanges, (cell) => `${cell.row}-${cell.col}`);
         return (0, groupBy_1.default)(unique, "row");
     }, [selectedRanges]);
-    (0, react_1.useMemo)(() => {
-        onCellSelection(groupedRanges);
-    }, [groupedRanges, onCellSelection]);
     const handleCellMouseDown = (0, react_1.useCallback)((ri, ci) => (e) => {
         (0, helper_1.handleMouseDown)({
             e,
@@ -83,6 +81,7 @@ const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height
             e,
             ri,
             ci,
+            selectedRanges,
             setSelectedRanges,
             onCellSelection,
         });
@@ -99,7 +98,8 @@ const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height
             }, children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsx)(material_1.TableRow, { children: columns.map(({ key, label, minWidth = "auto", align = "left" }) => ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: align, sx: {
                                 backgroundColor: slate[700],
                                 minWidth,
-                            }, children: label }, key))) }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: memoizedData.map((row, ri) => ((0, jsx_runtime_1.jsx)(material_1.TableRow, { sx: { backgroundColor: iron[600] }, children: columns.map(({ key, maxWidth = "auto", minWidth = "auto", isEmployee, align = "center", }, ci) => {
+                                padding: "5px 10px",
+                            }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", children: label }) }, key))) }) }), loading ? ((0, jsx_runtime_1.jsx)(TableBodyLoader_1.TableBodyLoader, { columns: columns, rowCount: 25 })) : ((0, jsx_runtime_1.jsx)(material_1.TableBody, { children: memoizedData.map((row, ri) => ((0, jsx_runtime_1.jsx)(material_1.TableRow, { sx: { backgroundColor: iron[600] }, children: columns.map(({ key, maxWidth = "auto", minWidth = "auto", isEmployee, align = "center", }, ci) => {
                             return ((0, jsx_runtime_1.jsx)(material_1.TableCell, { align: align, sx: {
                                     userSelect: "none",
                                     overflow: "hidden",
@@ -107,10 +107,19 @@ const CellSelectionTable = ({ columns, data, onCellSelection, cellColors, height
                                         cellKey: row[key],
                                         isSelected: isSelectedCell(ri, ci),
                                     }), 0.8),
+                                    padding: "5px 10px",
                                     cursor: "pointer",
                                     maxWidth,
                                     minWidth,
-                                }, onMouseDown: handleCellMouseDown(ri, ci), onMouseEnter: handleCellMouseEnter(ri, ci), onMouseUp: handleCellMouseUp, onContextMenu: handleContextMenuCallback(ri, ci), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: row[key], children: isEmployee ? ((0, jsx_runtime_1.jsx)(EmployeeCell_1.EmployeeCell, { row: row })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { title: row[key], children: row[key] })) }) }, key));
-                        }) }, row.id))) })] }) }));
+                                }, onMouseDown: !columns[ci]?.disableSelection
+                                    ? handleCellMouseDown(ri, ci)
+                                    : undefined, onMouseEnter: !columns[ci]?.disableSelection
+                                    ? handleCellMouseEnter(ri, ci)
+                                    : undefined, onMouseUp: !columns[ci]?.disableSelection
+                                    ? handleCellMouseUp
+                                    : undefined, onContextMenu: !columns[ci]?.disableSelection
+                                    ? handleContextMenuCallback(ri, ci)
+                                    : undefined, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: row[key], children: isEmployee ? ((0, jsx_runtime_1.jsx)(EmployeeCell_1.EmployeeCell, { row: row })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { title: row[key], children: row[key] })) }) }, key));
+                        }) }, row.id))) }))] }) }));
 };
 exports.CellSelectionTable = CellSelectionTable;

package/packages/shared-components/dist/CellSelectionTable/SubComponents/TableBodyLoader.d.ts

@@ -0,0 +1,8 @@
+import type { Column } from "../utils";
+type TableBodyLoaderProps = {
+    columns: Column[];
+    rowCount?: number;
+};
+export declare const TableBodyLoader: ({ columns, rowCount, }: TableBodyLoaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableBodyLoader.d.ts.map

package/packages/shared-components/dist/CellSelectionTable/SubComponents/TableBodyLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBodyLoader.d.ts","sourceRoot":"","sources":["../../../src/CellSelectionTable/SubComponents/TableBodyLoader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,wBAG7B,oBAAoB,4CActB,CAAC"}

package/packages/shared-components/dist/CellSelectionTable/SubComponents/TableBodyLoader.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBodyLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const uuid_1 = require("uuid");
+const TableBodyLoader = ({ columns, rowCount = 25, }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.TableBody, { children: Array.from({ length: rowCount }).map(() => ((0, jsx_runtime_1.jsx)(material_1.TableRow, { children: columns.map(() => ((0, jsx_runtime_1.jsx)(material_1.TableCell, { sx: { padding: "5px 10px" }, children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: "100%", height: "100%" }) }, (0, uuid_1.v4)()))) }, (0, uuid_1.v4)()))) }));
+};
+exports.TableBodyLoader = TableBodyLoader;

package/packages/shared-components/dist/CellSelectionTable/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./CellSelectionTable";
+export * from "./utils/types";
 //# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/CellSelectionTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/CellSelectionTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC"}

package/packages/shared-components/dist/CellSelectionTable/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./CellSelectionTable"), exports);
+__exportStar(require("./utils/types"), exports);

package/packages/shared-components/dist/CellSelectionTable/utils/helper.d.ts

@@ -2,5 +2,5 @@ import type { HandleContextMenuArgs, HandleMouseDownArgs, HandleMouseEnterArgs,
 export declare function handleMouseEnter({ selectingRef, anchorRef, hoveringRef, ri, ci, setSelectedRanges, }: HandleMouseEnterArgs): void;
 export declare function handleMouseDown({ e, ri, ci, selectingRef, anchorRef, setSelectedRanges, }: HandleMouseDownArgs): void;
 export declare function handleMouseUp({ e, selectingRef, anchorRef, hoveringRef, setSelectedRanges, }: HandleMunseUpArgs): void;
-export declare function handleContextMenu({ e, ri, ci, setSelectedRanges, onCellSelection, }: HandleContextMenuArgs): void;
+export declare function handleContextMenu({ e, ri, ci, setSelectedRanges, onCellSelection, selectedRanges, }: HandleContextMenuArgs): void;
 //# sourceMappingURL=helper.d.ts.map

package/packages/shared-components/dist/CellSelectionTable/utils/helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/CellSelectionTable/utils/helper.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAgCjB,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,SAAS,EACT,WAAW,EACX,EAAE,EACF,EAAE,EACF,iBAAiB,GAClB,EAAE,oBAAoB,QAOtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,CAAC,EACD,EAAE,EACF,EAAE,EACF,YAAY,EACZ,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,QAcrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,CAAC,EACD,YAAY,EACZ,SAAS,EACT,WAAW,EACX,iBAAiB,GAClB,EAAE,iBAAiB,QAQnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,CAAC,EACD,EAAE,EACF,EAAE,EACF,iBAAiB,EACjB,eAAe,GAChB,EAAE,qBAAqB,QAUvB"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/CellSelectionTable/utils/helper.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AAgCjB,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,SAAS,EACT,WAAW,EACX,EAAE,EACF,EAAE,EACF,iBAAiB,GAClB,EAAE,oBAAoB,QAOtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,CAAC,EACD,EAAE,EACF,EAAE,EACF,YAAY,EACZ,SAAS,EACT,iBAAiB,GAClB,EAAE,mBAAmB,QAkBrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,CAAC,EACD,YAAY,EACZ,SAAS,EACT,WAAW,EACX,iBAAiB,GAClB,EAAE,iBAAiB,QAQnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,CAAC,EACD,EAAE,EACF,EAAE,EACF,iBAAiB,EACjB,eAAe,EACf,cAAc,GACf,EAAE,qBAAqB,QAkCvB"}

package/packages/shared-components/dist/CellSelectionTable/utils/helper.js

@@ -1,9 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleMouseEnter = handleMouseEnter;
 exports.handleMouseDown = handleMouseDown;
 exports.handleMouseUp = handleMouseUp;
 exports.handleContextMenu = handleContextMenu;
+const compact_1 = __importDefault(require("lodash/compact"));
+const map_1 = __importDefault(require("lodash/map"));
 function updateRange(start, end, setSelectedRanges) {
     const top = Math.min(start.row, end.row);
     const bottom = Math.max(start.row, end.row);
@@ -29,6 +34,9 @@ function handleMouseEnter({ selectingRef, anchorRef, hoveringRef, ri, ci, setSel
     updateRange(anchorRef.current, hoveringRef.current, setSelectedRanges);
 }
 function handleMouseDown({ e, ri, ci, selectingRef, anchorRef, setSelectedRanges, }) {
+    if (e.button === 2) {
+        return;
+    }
     const anchor = { row: ri, col: ci };
     selectingRef.current = true;
     anchorRef.current = anchor;
@@ -42,13 +50,28 @@ function handleMouseUp({ e, selectingRef, anchorRef, hoveringRef, setSelectedRan
     selectingRef.current = false;
     anchorRef.current = null;
     hoveringRef.current = null;
-    if (!e.ctrlKey && !e.metaKey) {
+    if (!(e?.ctrlKey || e?.metaKey)) {
         setSelectedRanges([]);
     }
 }
-function handleContextMenu({ e, ri, ci, setSelectedRanges, onCellSelection, }) {
+function handleContextMenu({ e, ri, ci, setSelectedRanges, onCellSelection, selectedRanges, }) {
     e.preventDefault();
     const singleCell = [{ row: ri, col: ci }];
-    setSelectedRanges((prev) => e.ctrlKey || e.metaKey ? [...prev, ...singleCell] : singleCell);
+    const keySet = new Set((0, map_1.default)(selectedRanges, (cell) => `${cell.row}:${cell.col}`));
+    if (e.ctrlKey || e.metaKey) {
+        singleCell.forEach((cell) => keySet.add(`${cell.row}:${cell.col}`));
+        const merged = (0, compact_1.default)((0, map_1.default)(Array.from(keySet), (key) => {
+            const [rowStr, colStr] = key.split(":");
+            const row = Number(rowStr);
+            const col = Number(colStr);
+            return Number.isNaN(row) || Number.isNaN(col)
+                ? null
+                : { row, col };
+        }));
+        setSelectedRanges(merged);
+        onCellSelection?.({ selectedCells: merged }, e);
+        return;
+    }
+    setSelectedRanges(singleCell);
     onCellSelection?.({ selectedCells: singleCell }, e);
 }

package/packages/shared-components/dist/CellSelectionTable/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/CellSelectionTable/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CellSelectionTable/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/packages/shared-components/dist/CellSelectionTable/utils/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);

package/packages/shared-components/dist/CellSelectionTable/utils/types.d.ts

@@ -8,6 +8,7 @@ export type Column = {
     minWidth?: string | number;
     maxWidth?: string | number;
     align?: TableCellProps["align"];
+    disableSelection?: boolean;
 };
 export type OptionsType = {
     value: string;
@@ -45,8 +46,9 @@ export type HandleContextMenuArgs = {
     e: MouseEvent<HTMLTableCellElement>;
     ri: number;
     ci: number;
+    selectedRanges: CellCoord[];
     setSelectedRanges: Dispatch<SetStateAction<CellCoord[]>>;
-    onCellSelection: (ranges: Dictionary<CellCoord[]>, e?: MouseEvent<HTMLTableCellElement>) => void;
+    onCellSelection: (ranges: Dictionary<CellCoord[]>, e: MouseEvent<HTMLTableCellElement>) => void;
 };
 export type GetCellColorArgs = {
     cellKey?: string;

package/packages/shared-components/dist/CellSelectionTable/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/CellSelectionTable/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,MAAM,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC9C,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACpC,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACzD,eAAe,EAAE,CACf,MAAM,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EAC/B,CAAC,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,KACjC,IAAI,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/CellSelectionTable/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,EACV,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,cAAc,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,MAAM,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC9C,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACpC,YAAY,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,SAAS,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC9C,WAAW,EAAE,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAChD,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;CAC1D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,EAAE,SAAS,EAAE,CAAC;IAC5B,iBAAiB,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IACzD,eAAe,EAAE,CACf,MAAM,EAAE,UAAU,CAAC,SAAS,EAAE,CAAC,EAC/B,CAAC,EAAE,UAAU,CAAC,oBAAoB,CAAC,KAChC,IAAI,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/FilePreview.d.ts

@@ -1,11 +1,12 @@
 type FilePreviewProps = {
     fileName: string;
+    resetTrigger?: number;
 };
 export declare const SUPPORTED_IMAGE_FORMATS: readonly [".png", ".jpg", ".jpeg"];
 export declare const SUPPORTED_PDF_FORMATS: readonly [".pdf"];
 export declare const SUPPORTED_DOC_FORMATS: readonly [".doc", ".docx"];
 export declare const SUPPORTED_EXCEL_FORMATS: readonly [".xls", ".xlsx"];
 export declare function isFileType(url: string, extensions: readonly string[]): boolean;
-export declare const FilePreview: ({ fileName }: FilePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilePreview: ({ fileName, resetTrigger }: FilePreviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilePreview.d.ts.map

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/FilePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/FormFields/FileUpload/Dialogs/FilePreview.tsx"],"names":[],"mappings":"AAMA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,uBAAuB,oCAAqC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,mBAAoB,CAAC;AAEvD,eAAO,MAAM,qBAAqB,4BAA6B,CAAC;AAEhE,eAAO,MAAM,uBAAuB,4BAA6B,CAAC;AAElE,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,SAAS,MAAM,EAAE,GAC5B,OAAO,CAET;AAED,eAAO,MAAM,WAAW,GAAI,cAAc,gBAAgB,4CA0DzD,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/FormFields/FileUpload/Dialogs/FilePreview.tsx"],"names":[],"mappings":"AA0BA,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,uBAAuB,oCAAqC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,mBAAoB,CAAC;AAEvD,eAAO,MAAM,qBAAqB,4BAA6B,CAAC;AAEhE,eAAO,MAAM,uBAAuB,4BAA6B,CAAC;AASlE,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,SAAS,MAAM,EAAE,GAC5B,OAAO,CAET;AAED,eAAO,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,4CAkQvE,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/FilePreview.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilePreview = exports.SUPPORTED_EXCEL_FORMATS = exports.SUPPORTED_DOC_FORMATS = exports.SUPPORTED_PDF_FORMATS = exports.SUPPORTED_IMAGE_FORMATS = void 0;
 exports.isFileType = isFileType;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ZoomInOutlined_1 = __importDefault(require("@mui/icons-material/ZoomInOutlined"));
+const ZoomOutOutlined_1 = __importDefault(require("@mui/icons-material/ZoomOutOutlined"));
 const material_1 = require("@mui/material");
 const image_1 = __importDefault(require("next/image"));
+const react_1 = require("react");
+const Button_1 = require("../../../Button");
 const Layouts_1 = require("../../../Layouts");
 const PadBox_1 = require("../../../PadBox");
 const utils_1 = require("../../../utils");
@@ -15,21 +19,131 @@ exports.SUPPORTED_IMAGE_FORMATS = [".png", ".jpg", ".jpeg"];
 exports.SUPPORTED_PDF_FORMATS = [".pdf"];
 exports.SUPPORTED_DOC_FORMATS = [".doc", ".docx"];
 exports.SUPPORTED_EXCEL_FORMATS = [".xls", ".xlsx"];
+const DEFAULT_ZOOM_CONFIG = {
+    min: 0.5,
+    max: 2,
+    step: 0.5,
+    sensitivity: 0.1,
+};
 function isFileType(url, extensions) {
     return extensions.some((ext) => url.toLowerCase().endsWith(ext));
 }
-const FilePreview = ({ fileName }) => {
+const FilePreview = ({ fileName, resetTrigger }) => {
     const isValidUrl = (0, utils_1.isImageDomainValid)(fileName);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [startPos, setStartPos] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [zoomLevel, setZoomLevel] = (0, react_1.useState)(1);
+    const imageContainerRef = (0, react_1.useRef)(null);
+    const theme = (0, material_1.useTheme)();
+    const { slate } = theme.palette.app.color;
+    const { sensitivity, min, max, step } = DEFAULT_ZOOM_CONFIG;
+    const { x: positionX, y: positionY } = position;
+    const handleMouseDown = ({ clientX, clientY, }) => {
+        setIsDragging(true);
+        setStartPos({ x: clientX - positionX, y: clientY - positionY });
+    };
+    const handleMouseMove = ({ clientX, clientY, }) => {
+        if (isDragging) {
+            const x = clientX - startPos.x;
+            const y = clientY - startPos.y;
+            setPosition({ x, y });
+        }
+    };
+    const calculateOffset = ({ clientX, clientY, }, container) => {
+        const { left, top, height, width } = container.getBoundingClientRect();
+        const mouseX = clientX - left;
+        const mouseY = clientY - top;
+        return {
+            offsetX: mouseX - width / 2,
+            offsetY: mouseY - height / 2,
+        };
+    };
+    const handleWheel = (e) => {
+        const container = imageContainerRef.current;
+        if (!container) {
+            return;
+        }
+        const { offsetX, offsetY } = calculateOffset(e, container);
+        const delta = e.deltaY > 0 ? -sensitivity : sensitivity;
+        const newZoom = Math.min(Math.max(zoomLevel + delta, min), max);
+        if (newZoom !== zoomLevel) {
+            const zoomFactor = newZoom / zoomLevel;
+            const newX = positionX - offsetX * (zoomFactor - 1);
+            const newY = positionY - offsetY * (zoomFactor - 1);
+            setPosition({ x: newX, y: newY });
+            setZoomLevel(newZoom);
+        }
+    };
+    const resetZoomLevel = () => {
+        setZoomLevel(1);
+        setPosition({ x: 0, y: 0 });
+    };
+    (0, react_1.useMemo)(() => {
+        resetZoomLevel();
+    }, [resetTrigger]);
+    const updateZoomLevel = (delta) => {
+        setZoomLevel((prev) => {
+            const updatedZoom = Math.min(2, Math.max(0.5, prev + delta));
+            return updatedZoom;
+        });
+    };
+    const handleDoubleClick = (e) => {
+        e.preventDefault();
+        const container = imageContainerRef.current;
+        if (!container) {
+            return;
+        }
+        const { offsetX, offsetY } = calculateOffset(e, container);
+        const newZoom = zoomLevel > 1 ? 1 : Math.min(zoomLevel + step, max);
+        if (zoomLevel > 1) {
+            resetZoomLevel();
+            setZoomLevel(newZoom);
+            return;
+        }
+        const zoomFactor = newZoom / zoomLevel;
+        const newX = positionX - offsetX * (zoomFactor - 1);
+        const newY = positionY - offsetY * (zoomFactor - 1);
+        setPosition({ x: newX, y: newY });
+        setZoomLevel(newZoom);
+    };
+    const endDrag = () => {
+        setIsDragging(false);
+    };
     if (isFileType(fileName, exports.SUPPORTED_PDF_FORMATS)) {
         return ((0, jsx_runtime_1.jsx)(Layouts_1.FilePreviewContainer, { children: (0, jsx_runtime_1.jsx)("iframe", { src: `${fileName}#toolbar=0`, style: { width: "100%", height: "100%" } }) }));
     }
     if (isFileType(fileName, exports.SUPPORTED_IMAGE_FORMATS) && isValidUrl) {
-        return ((0, jsx_runtime_1.jsx)(Layouts_1.FilePreviewContainer, { children: (0, jsx_runtime_1.jsx)(image_1.default, { src: fileName, alt: "Attachment", width: 800, height: 0, style: {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "contain",
-                    display: "block",
-                } }) }));
+        return ((0, jsx_runtime_1.jsxs)(Layouts_1.FilePreviewContainer, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "10px", sx: {
+                        position: "absolute",
+                        top: 10,
+                        right: 66,
+                        zIndex: 10,
+                    }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { sx: {
+                                backgroundColor: slate[900],
+                                minWidth: "42px",
+                                height: "42px",
+                            }, onClick: () => updateZoomLevel(-0.3), children: (0, jsx_runtime_1.jsx)(ZoomOutOutlined_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { sx: {
+                                backgroundColor: slate[900],
+                                minWidth: "42px",
+                                height: "42px",
+                            }, onClick: () => updateZoomLevel(0.3), children: (0, jsx_runtime_1.jsx)(ZoomInOutlined_1.default, {}) }), zoomLevel !== 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { sx: {
+                                backgroundColor: slate[900],
+                                minWidth: "42px",
+                                height: "42px",
+                            }, onClick: () => resetZoomLevel(), children: "Reset" }))] }), (0, jsx_runtime_1.jsx)(material_1.Box, { ref: imageContainerRef, style: {
+                        position: "relative",
+                        width: "100%",
+                        height: "100%",
+                        cursor: isDragging ? "grabbing" : "grab",
+                        transform: `scale(${zoomLevel}) translate(${positionX / zoomLevel}px, ${positionY / zoomLevel}px)`,
+                        transformOrigin: "center center",
+                        transition: isDragging ? "none" : "transform 0.2s ease-in-out",
+                    }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: endDrag, onMouseLeave: endDrag, onWheel: handleWheel, onDoubleClick: handleDoubleClick, children: (0, jsx_runtime_1.jsx)(image_1.default, { src: fileName, alt: "Attachment", fill: true, style: {
+                            objectFit: "contain",
+                            userSelect: "none",
+                            pointerEvents: "none",
+                        } }) })] }));
     }
     if (isFileType(fileName, exports.SUPPORTED_DOC_FORMATS) ||
         isFileType(fileName, exports.SUPPORTED_EXCEL_FORMATS)) {

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/ViewFilePreviewDialog.js

@@ -17,7 +17,7 @@ const ViewFilePreviewDialog = ({ open, onClose, fileName, }) => {
             }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                         position: "relative",
                         backgroundColor: iron[600],
-                        overflow: "none",
+                        overflow: "hidden",
                         maxHeight: "650px",
                         boxShadow: "none",
                     }, children: [(0, jsx_runtime_1.jsx)(Actions_1.DownloadIconAction
@@ -26,7 +26,7 @@ const ViewFilePreviewDialog = ({ open, onClose, fileName, }) => {
                             // eslint-disable-next-line sonarjs/no-misused-promises
                             onClick: () => (0, download_1.downloadFile)(fileName, fileName), sx: {
                                 position: "absolute",
-                                top: 10,
+                                top: 5,
                                 right: 10,
                                 zIndex: 10,
                             } }), (0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { fileName: fileName })] }) }) }) }));