@codezee/sixtify-brahma 0.2.207 → 0.2.209

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

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = Card;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const PadBox_1 = require("../PadBox");
-function Card({ heading, children, action }) {
-    const theme = (0, styles_1.useTheme)();
-    const { lightBlue } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(Box_1.default, { bgcolor: lightBlue[50], flex: 1, sx: { borderRadius: "5px" }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: 1.5 }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", children: [(heading || action) && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [heading && (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "h6", children: heading }), action && (0, jsx_runtime_1.jsx)(Box_1.default, { children: action })] })), children] }) }) }));
-}

package/packages/shared-components/dist/Card/CardItem/CardItem.js

@@ -1,12 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardItem = CardItem;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-function CardItem({ label, value, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", alignItems: "center", gap: { xs: "0px", md: "10px" }, ...props, children: [typeof label === "string" ? ((0, jsx_runtime_1.jsx)(Stack_1.default, { gap: "10px", width: "40%", children: (0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "body1", sx: { fontWeight: 500 }, flex: 1, noWrap: true, children: [label, " :"] }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" ", label, " :"] })), value] }));
-}

package/packages/shared-components/dist/Card/CardItem/CardItemValue.js

@@ -1,27 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardItemValue = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const react_1 = require("react");
-exports.CardItemValue = (0, react_1.forwardRef)(({ title, subTitle, avatar, loading = false, showAvatar = false, isHideTitle = false, variant = "circular", sx, containerSx, }, ref) => {
-    const theme = (0, styles_1.useTheme)();
-    const { slate, iron } = theme.palette.app.color;
-    if (loading) {
-        return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px ", flex: "1", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", gap: "10px", alignItems: "center", children: [avatar && ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "circular", height: "30px", animation: "wave", width: "30px" })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", height: 20, animation: "wave", width: "150px" })] }), subTitle && ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rounded", height: 20, animation: "wave", width: "200px" }))] }));
-    }
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { width: "50%", sx: containerSx, gap: "10px", flex: 1, children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", direction: "row", alignItems: "center", flex: 1, children: [showAvatar && ((0, jsx_runtime_1.jsx)(Avatar_1.default, { alt: title, src: avatar, variant: variant, sx: { width: 28, height: 28 } })), !isHideTitle && ((0, jsx_runtime_1.jsx)(Typography_1.default, { ref: ref, variant: "body1", sx: {
-                            width: "100%",
-                            fontWeight: 400,
-                            color: slate[900],
-                            ...sx,
-                        }, noWrap: true, children: title ? title : "-" }))] }), subTitle && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body1", sx: { color: iron[500] }, noWrap: true, children: subTitle }))] }));
-});
-exports.CardItemValue.displayName = "CardItemValue";

package/packages/shared-components/dist/Card/CardItem/index.js

@@ -1,18 +0,0 @@
-"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("./CardItem"), exports);
-__exportStar(require("./CardItemValue"), exports);

package/packages/shared-components/dist/Card/ProfileCard/ProfileCard.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileCard = ProfileCard;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const PadBox_1 = require("../../PadBox");
-function ProfileCard({ onClick, header, body, }) {
-    const theme = (0, material_1.useTheme)();
-    const { lightBlue, butterflyBlue } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { bgcolor: lightBlue[50], flex: 1, sx: {
-            borderRadius: "10px",
-            cursor: "pointer",
-            ":hover": { background: butterflyBlue[600] },
-        }, height: "400px", onClick: onClick, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: "100%", justifyContent: "space-between", children: [header, body] }) }) }));
-}

package/packages/shared-components/dist/Card/ProfileCard/ProfileCardItem/ProfileCardBody.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileCardBody = ProfileCardBody;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const PadBox_1 = require("../../../PadBox");
-const SvgEmail_1 = require("../../../Svgs/SvgEmail");
-const SvgPhone_1 = require("../../../Svgs/SvgPhone");
-const CardItem_1 = require("../../CardItem");
-function ProfileCardBody({ joiningDate, department, subDepartment, email, phone, loading, }) {
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { bgcolor: "#F3F5F7", sx: { borderRadius: "10px" }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "12px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(CardItem_1.CardItem, { label: "Date of Joining", value: (0, jsx_runtime_1.jsx)(CardItem_1.CardItemValue, { title: joiningDate, loading: loading }) }), (0, jsx_runtime_1.jsx)(CardItem_1.CardItem, { label: "Department", value: (0, jsx_runtime_1.jsx)(CardItem_1.CardItemValue, { title: department, loading: loading }) }), (0, jsx_runtime_1.jsx)(CardItem_1.CardItem, { label: "Sub Department", value: (0, jsx_runtime_1.jsx)(CardItem_1.CardItemValue, { title: subDepartment, loading: loading }) }), (0, jsx_runtime_1.jsx)(CardItem_1.CardItem, { label: (0, jsx_runtime_1.jsx)(SvgEmail_1.SvgEmail, {}), value: (0, jsx_runtime_1.jsx)(CardItem_1.CardItemValue, { containerSx: { width: "80%" }, title: email, loading: loading }), sx: {
-                            justifyContent: "start",
-                            gap: "10px",
-                        } }), (0, jsx_runtime_1.jsx)(CardItem_1.CardItem, { label: (0, jsx_runtime_1.jsx)(SvgPhone_1.SvgPhone, {}), value: (0, jsx_runtime_1.jsx)(CardItem_1.CardItemValue, { containerSx: { width: "80%" }, title: phone, loading: loading }), sx: {
-                            justifyContent: "start",
-                            gap: "10px",
-                        } })] }) }) }));
-}

package/packages/shared-components/dist/Card/ProfileCard/ProfileCardItem/ProfileCardHeader.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileCardHeader = ProfileCardHeader;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const Actions_1 = require("../../../Actions");
-const Chips_1 = require("../../../Chips");
-const CardItem_1 = require("../../CardItem");
-function ProfileCardHeader({ avatar, employeeName, designation, employeeCode, loading, isDraft = false, onDeleteClick, }) {
-    const theme = (0, material_1.useTheme)();
-    const { slate } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", justifyContent: "space-between", children: [loading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 20, animation: "wave", width: "100px" })) : // eslint-disable-next-line sonarjs/no-nested-conditional
-                        isDraft ? ((0, jsx_runtime_1.jsx)(Chips_1.Chip, { label: "Draft", size: "small", color: "error", variant: "outlined" })) : ((0, jsx_runtime_1.jsx)(CardItem_1.CardItemValue, { title: employeeCode, loading: loading })), isDraft &&
-                        (loading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 20, animation: "wave", width: "50px" })) : ((0, jsx_runtime_1.jsx)(Actions_1.DeleteIconAction, { onClick: onDeleteClick })))] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", gap: "8px", children: [avatar, loading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 30, animation: "wave", width: "300px" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", sx: {
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            display: "-webkit-box",
-                            WebkitLineClamp: 1,
-                            WebkitBoxOrient: "vertical",
-                        }, maxWidth: "330px", fontWeight: "500", textAlign: "center", children: employeeName ?? "-" })), loading ? ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", height: 30, animation: "wave", width: "200px" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", fontWeight: 400, color: slate[900], noWrap: true, children: designation ? designation : "-" }))] })] }));
-}

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

@@ -1,22 +0,0 @@
-"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("./Card"), exports);
-__exportStar(require("./CardItem"), exports);
-__exportStar(require("./ProfileCard/ProfileCard"), exports);
-__exportStar(require("./ProfileCard/ProfileCardItem/ProfileCardBody"), exports);
-__exportStar(require("./ProfileCard/ProfileCardItem/ProfileCardHeader"), exports);
-__exportStar(require("./AttendanceCard"), exports);

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

@@ -1,478 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CellSelectionTable = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ArrowDownward_1 = __importDefault(require("@mui/icons-material/ArrowDownward"));
-const ArrowUpward_1 = __importDefault(require("@mui/icons-material/ArrowUpward"));
-const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
-const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const styles_1 = require("@mui/material/styles");
-const Table_1 = __importDefault(require("@mui/material/Table"));
-const TableBody_1 = __importDefault(require("@mui/material/TableBody"));
-const TableCell_1 = __importDefault(require("@mui/material/TableCell"));
-const TableHead_1 = __importDefault(require("@mui/material/TableHead"));
-const TableRow_1 = __importDefault(require("@mui/material/TableRow"));
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const react_virtual_1 = require("@tanstack/react-virtual");
-const react_1 = require("react");
-const Tooltip_1 = require("../Tooltip");
-const useOutsideClick_1 = require("./hook/useOutsideClick");
-const useSorting_1 = require("./hook/useSorting");
-const useStickyColumns_1 = require("./hook/useStickyColumns");
-const EmployeeCell_1 = require("./SubComponents/EmployeeCell");
-const TableBodyLoader_1 = require("./SubComponents/TableBodyLoader");
-const helper_1 = require("./utils/helper");
-const sortUtils_1 = require("./utils/sortUtils");
-exports.CellSelectionTable = (0, react_1.forwardRef)(({ columns, data, onCellSelection, cellColors, height, loading = false, getCellTextColor = () => "", onDataUpdate, }, ref) => {
-    const theme = (0, styles_1.useTheme)();
-    const { slate, iron, butterflyBlue } = theme.palette.app.color;
-    const selectingRef = (0, react_1.useRef)(false);
-    const tableRef = (0, react_1.useRef)(null);
-    const containerRef = (0, react_1.useRef)(null);
-    const headerRef = (0, react_1.useRef)(null);
-    const [columnWidths, setColumnWidths] = (0, react_1.useState)([]);
-    const selectionModeRef = (0, react_1.useRef)("add");
-    const anchorRef = (0, react_1.useRef)(null);
-    const hoveringRef = (0, react_1.useRef)(null);
-    const [selectedRanges, setSelectedRanges] = (0, react_1.useState)([]);
-    const [currentSelectedRanges, setCurrentSelectedRanges] = (0, react_1.useState)([]);
-    (0, useOutsideClick_1.useOutsideClick)(tableRef, () => {
-        setSelectedRanges([]);
-        setCurrentSelectedRanges([]);
-    });
-    (0, react_1.useMemo)(() => {
-        if (loading && selectedRanges.length > 0) {
-            setSelectedRanges([]);
-            setCurrentSelectedRanges([]);
-        }
-    }, [loading]);
-    const selectedCellsSet = (0, react_1.useMemo)(() => {
-        const set = new Set();
-        if (selectedRanges.length === 0 && currentSelectedRanges.length === 0) {
-            return set;
-        }
-        [...selectedRanges, ...currentSelectedRanges].forEach((range) => {
-            range.forEach((cell) => {
-                set.add(`${cell.row}-${cell.col}`);
-            });
-        });
-        return set;
-    }, [selectedRanges, currentSelectedRanges]);
-    const isSelectedCell = (0, react_1.useCallback)((rowIndex, colIndex) => {
-        return selectedCellsSet.has(`${rowIndex}-${colIndex}`);
-    }, [selectedCellsSet]);
-    const { stickyMap } = (0, useStickyColumns_1.useStickyColumns)(columns);
-    (0, useOutsideClick_1.useOutsideClick)(tableRef, () => {
-        setSelectedRanges([]);
-        setCurrentSelectedRanges([]);
-    });
-    (0, react_1.useMemo)(() => {
-        if (loading && selectedRanges.length > 0) {
-            setSelectedRanges([]);
-            setCurrentSelectedRanges([]);
-        }
-    }, [loading]);
-    const memoizedData = (0, react_1.useMemo)(() => {
-        return data.map((row) => {
-            const normalizedRow = {};
-            for (const key in row) {
-                const value = row[key];
-                if (typeof value === "string") {
-                    if (value.toLowerCase() === "true") {
-                        normalizedRow[key] = true;
-                    }
-                    else if (value.toLowerCase() === "false") {
-                        normalizedRow[key] = false;
-                    }
-                    else {
-                        normalizedRow[key] = value;
-                    }
-                }
-                else if (typeof value === "boolean" || typeof value === "object") {
-                    normalizedRow[key] = value;
-                }
-            }
-            return normalizedRow;
-        });
-    }, [data]);
-    const { sortedData, handleSort, getSortDirection, updateSelectedRangesForSorting, sortedToOriginalMapping, convertSortedCoordsToOriginal, } = (0, useSorting_1.useSorting)({
-        data: memoizedData,
-        columns,
-    });
-    const ROW_HEIGHT = 40;
-    const estimateSize = (0, react_1.useCallback)(() => ROW_HEIGHT, []);
-    const getScrollElement = (0, react_1.useCallback)(() => containerRef.current, []);
-    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
-        count: sortedData.length,
-        estimateSize,
-        getScrollElement,
-        overscan: 5,
-        scrollPaddingStart: 0,
-        scrollPaddingEnd: 0,
-    });
-    const virtualItems = rowVirtualizer.getVirtualItems();
-    const prevSortedDataRef = (0, react_1.useRef)([]);
-    const selectedRangesRef = (0, react_1.useRef)([]);
-    // Keep track of the latest data for the ref methods
-    const latestDataRef = (0, react_1.useRef)(memoizedData);
-    // Update the latest data ref whenever memoizedData changes
-    (0, react_1.useEffect)(() => {
-        latestDataRef.current = memoizedData;
-    }, [memoizedData]);
-    // Function to get updated table data without setting state
-    const getUpdatedTableData = (0, react_1.useCallback)((sortedCoords, updates) => {
-        const originalCoords = convertSortedCoordsToOriginal(sortedCoords);
-        // Use the latest data from ref, which is always up-to-date
-        const updatedData = [...latestDataRef.current];
-        originalCoords.forEach((coord, index) => {
-            const sortedCoord = sortedCoords[index];
-            if (sortedCoord && coord) {
-                const columnKey = columns[coord.col]?.key;
-                if (columnKey && updates[columnKey] !== undefined) {
-                    updatedData[coord.row] = {
-                        ...updatedData[coord.row],
-                        [columnKey]: updates[columnKey],
-                    };
-                }
-            }
-        });
-        return updatedData;
-    }, [convertSortedCoordsToOriginal, columns]);
-    const handleDataUpdate = (0, react_1.useCallback)((sortedCoords) => {
-        if (!onDataUpdate) {
-            return;
-        }
-        const originalCoords = convertSortedCoordsToOriginal(sortedCoords);
-        onDataUpdate(sortedCoords, originalCoords, sortedData, memoizedData);
-    }, [onDataUpdate, convertSortedCoordsToOriginal, sortedData, memoizedData]);
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        updateData: handleDataUpdate,
-        getSortedToOriginalMapping: () => sortedToOriginalMapping,
-        convertSortedCoordsToOriginal,
-        getUpdatedTableData,
-    }), [
-        handleDataUpdate,
-        sortedToOriginalMapping,
-        convertSortedCoordsToOriginal,
-        getUpdatedTableData,
-    ]);
-    (0, react_1.useEffect)(() => {
-        if (selectedRangesRef.current.length > 0 &&
-            prevSortedDataRef.current.length > 0) {
-            // Check if the data has been reordered (sorting changed)
-            const dataChanged = prevSortedDataRef.current.length !== sortedData.length ||
-                prevSortedDataRef.current.some((row, index) => {
-                    const newRow = sortedData[index];
-                    const rowId = typeof row?.id === "string" ? row.id : `row-${index}`;
-                    const newRowId = typeof newRow?.id === "string" ? newRow.id : `row-${index}`;
-                    return !newRow || rowId !== newRowId;
-                });
-            if (dataChanged) {
-                try {
-                    const updatedRanges = updateSelectedRangesForSorting(selectedRangesRef.current, prevSortedDataRef.current, sortedData);
-                    // Only update if the ranges actually changed and are valid
-                    const rangesChanged = updatedRanges.length !== selectedRangesRef.current.length ||
-                        updatedRanges.some((range, i) => {
-                            const oldRange = selectedRangesRef.current[i];
-                            return (!oldRange ||
-                                range.length !== oldRange.length ||
-                                range.some((cell, j) => cell.row !== oldRange[j]?.row ||
-                                    cell.col !== oldRange[j]?.col));
-                        });
-                    const validRanges = updatedRanges.every((range) => range.every((cell) => cell.row >= 0 &&
-                        cell.row < sortedData.length &&
-                        cell.col >= 0 &&
-                        cell.col < columns.length));
-                    if (rangesChanged && validRanges) {
-                        setSelectedRanges(updatedRanges);
-                        selectedRangesRef.current = updatedRanges;
-                    }
-                    // eslint-disable-next-line sonarjs/no-ignored-exceptions
-                }
-                catch (error) {
-                    setSelectedRanges([]);
-                    selectedRangesRef.current = [];
-                }
-            }
-        }
-        prevSortedDataRef.current = sortedData;
-    }, [sortedData, updateSelectedRangesForSorting, columns.length]);
-    // Keep the ref in sync with the state
-    (0, react_1.useEffect)(() => {
-        selectedRangesRef.current = selectedRanges;
-    }, [selectedRanges]);
-    // Measure header column widths to ensure body cells match
-    (0, react_1.useEffect)(() => {
-        if (headerRef.current && !loading) {
-            const measureWidths = () => {
-                const headerRow = headerRef.current?.querySelector("tr");
-                if (headerRow) {
-                    const headerCells = headerRow.querySelectorAll("th");
-                    const widths = Array.from(headerCells).map((cell) => {
-                        return cell.getBoundingClientRect().width;
-                    });
-                    if (widths.length > 0) {
-                        setColumnWidths(widths);
-                    }
-                }
-            };
-            // Use requestAnimationFrame to avoid blocking the main thread
-            const rafId = requestAnimationFrame(() => {
-                measureWidths();
-            });
-            return () => {
-                cancelAnimationFrame(rafId);
-            };
-        }
-    }, [columns, loading]);
-    const getCellColor = (0, react_1.useCallback)(({ cellKey, isSelected = false }) => {
-        if (isSelected) {
-            return butterflyBlue[800];
-        }
-        if (!isSelected && cellKey && cellColors) {
-            return cellColors(cellKey);
-        }
-        return iron[600];
-    }, [butterflyBlue, cellColors, iron]);
-    const handleCellMouseDown = (0, react_1.useCallback)((ri, ci) => (e) => {
-        e.preventDefault();
-        if ((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) &&
-            ci > 0) {
-            const nextSelectableIndex = columns.findIndex((col, index) => !(0, sortUtils_1.isSelectionDisabled)(col.disableSelection, col.sorting) &&
-                index > ci);
-            if (nextSelectableIndex !== -1) {
-                return (0, helper_1.handleMouseDown)({
-                    e,
-                    ri,
-                    ci: nextSelectableIndex,
-                    selectingRef,
-                    anchorRef,
-                    selectedRanges,
-                    setSelectedRanges,
-                    selectionModeRef,
-                });
-            }
-            const fallbackIndex = [...columns]
-                .reverse()
-                .findIndex((col, index) => !(0, sortUtils_1.isSelectionDisabled)(col.disableSelection, col.sorting) &&
-                columns.length - 1 - index < ci);
-            if (fallbackIndex !== -1) {
-                const adjustedIndex = columns.length - 1 - fallbackIndex;
-                return (0, helper_1.handleMouseDown)({
-                    e,
-                    ri,
-                    ci: adjustedIndex,
-                    selectingRef,
-                    anchorRef,
-                    selectedRanges,
-                    setSelectedRanges,
-                    selectionModeRef,
-                });
-            }
-            return;
-        }
-        (0, helper_1.handleMouseDown)({
-            e,
-            ri,
-            ci,
-            selectingRef,
-            anchorRef,
-            selectedRanges,
-            setSelectedRanges,
-            selectionModeRef,
-        });
-    }, [selectedRanges]);
-    const handleCellMouseEnter = (0, react_1.useCallback)((ri, ci) => (e) => {
-        (0, helper_1.handleMouseEnter)({
-            e,
-            selectingRef,
-            anchorRef,
-            hoveringRef,
-            ri,
-            ci,
-            selectedRanges,
-            setSelectedRanges,
-            selectionModeRef,
-            currentSelectedRanges,
-            setCurrentSelectedRanges,
-            columns,
-            data: sortedData,
-        });
-    }, [
-        helper_1.handleMouseEnter,
-        selectingRef,
-        anchorRef,
-        hoveringRef,
-        setSelectedRanges,
-        selectionModeRef,
-        sortedData,
-        columns,
-    ]);
-    const handleCellMouseUp = (0, react_1.useCallback)((ri, ci) => (e) => {
-        (0, helper_1.handleMouseUp)({
-            e,
-            selectingRef,
-            anchorRef,
-            hoveringRef,
-            ri,
-            ci,
-            setSelectedRanges,
-            selectionModeRef,
-            setCurrentSelectedRanges,
-            data: sortedData,
-            columns,
-        });
-    }, [sortedData, columns]);
-    const handleContextMenuCallback = (0, react_1.useCallback)((ri, ci) => (e) => {
-        (0, helper_1.handleContextMenu)({
-            e,
-            ri,
-            ci,
-            selectedRanges,
-            setSelectedRanges,
-            onCellSelection,
-        });
-    }, [onCellSelection, selectedRanges]);
-    return ((0, jsx_runtime_1.jsx)(Box_1.default, { ref: containerRef, position: "relative", overflow: "auto", height: height, bgcolor: iron[600], sx: {
-            WebkitOverflowScrolling: "touch",
-            scrollBehavior: "auto",
-        }, children: (0, jsx_runtime_1.jsxs)(Table_1.default, { ref: tableRef, stickyHeader: true, sx: {
-                userSelect: "none",
-                borderCollapse: "separate",
-                borderSpacing: 0,
-                tableLayout: "fixed",
-                width: "100%",
-                "& th, & td": {
-                    borderRight: `1px solid ${slate[700]}`,
-                    borderBottom: `1px solid ${slate[700]}`,
-                    height: "40px",
-                },
-                "& th": {
-                    padding: "2px 5px",
-                },
-                "& td": {
-                    padding: "0px 5px",
-                },
-            }, children: [(0, jsx_runtime_1.jsx)(TableHead_1.default, { ref: headerRef, children: (0, jsx_runtime_1.jsx)(TableRow_1.default, { children: columns.map(({ key, label, minWidth = "auto", lockPinned = false, align = "left", disableSelection, sorting, }, ci) => {
-                            const isSticky = stickyMap.has(ci);
-                            const left = isSticky ? stickyMap.get(ci) : 0;
-                            const sortDirection = getSortDirection(key);
-                            const canSort = Boolean(disableSelection && sorting);
-                            let justifyContent = "flex-start";
-                            if (align === "center") {
-                                justifyContent = "center";
-                            }
-                            else if (align === "right") {
-                                justifyContent = "flex-end";
-                            }
-                            const renderSortIcon = () => {
-                                if (sortDirection === "asc") {
-                                    return ((0, jsx_runtime_1.jsx)(ArrowUpward_1.default, { sx: { fontSize: 16, color: butterflyBlue[400] } }));
-                                }
-                                if (sortDirection === "desc") {
-                                    return ((0, jsx_runtime_1.jsx)(ArrowDownward_1.default, { sx: { fontSize: 16, color: butterflyBlue[400] } }));
-                                }
-                                return ((0, jsx_runtime_1.jsxs)(Box_1.default, { display: "flex", flexDirection: "column", alignItems: "center", sx: { opacity: 0.5 }, children: [(0, jsx_runtime_1.jsx)(KeyboardArrowUp_1.default, { sx: { fontSize: 14, marginBottom: -0.5 } }), (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, { sx: { fontSize: 14 } })] }));
-                            };
-                            return ((0, jsx_runtime_1.jsx)(TableCell_1.default, { align: align, sx: {
-                                    ...(lockPinned && {
-                                        top: 0,
-                                        left,
-                                        zIndex: 10,
-                                        position: "sticky",
-                                    }),
-                                    backgroundColor: slate[700],
-                                    minWidth,
-                                    maxWidth: columns[ci]?.maxWidth ?? "auto",
-                                    width: minWidth !== "auto" ? minWidth : undefined,
-                                    padding: "5px 10px",
-                                    cursor: canSort ? "pointer" : "default",
-                                    boxSizing: "border-box",
-                                }, onClick: canSort ? () => handleSort(key) : undefined, children: (0, jsx_runtime_1.jsxs)(Box_1.default, { display: "flex", alignItems: "center", justifyContent: justifyContent, gap: 1, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", lineHeight: "18px", children: label }), canSort && ((0, jsx_runtime_1.jsx)(Box_1.default, { display: "flex", flexDirection: "column", alignItems: "center", children: renderSortIcon() }))] }) }, key));
-                        }) }) }), loading ? ((0, jsx_runtime_1.jsx)(TableBodyLoader_1.TableBodyLoader, { columns: columns, rowCount: 25 })) : ((0, jsx_runtime_1.jsx)(TableBody_1.default, { style: {
-                        height: `${rowVirtualizer.getTotalSize()}px`,
-                        position: "relative",
-                    }, children: virtualItems.map((virtualRow) => {
-                        const row = sortedData[virtualRow.index];
-                        if (!row) {
-                            return null;
-                        }
-                        const ri = virtualRow.index;
-                        return ((0, jsx_runtime_1.jsx)(TableRow_1.default, { sx: {
-                                backgroundColor: iron[600],
-                                position: "absolute",
-                                top: 0,
-                                left: 0,
-                                width: "100%",
-                                height: `${virtualRow.size}px`,
-                                transform: `translateY(${virtualRow.start}px) translateZ(0)`,
-                                display: "table-row",
-                                willChange: "transform",
-                                backfaceVisibility: "hidden",
-                                WebkitBackfaceVisibility: "hidden",
-                            }, children: columns.map(({ key, maxWidth = "auto", minWidth = "auto", isEmployee, align = "center", lockPinned = false, }, ci) => {
-                                const cell = row[key];
-                                const getRowTitle = (0, helper_1.getCellValue)(cell, "cellLabel");
-                                const tooltip = typeof cell === "object" &&
-                                    cell != null &&
-                                    typeof cell?.["cellTooltip"] === "object"
-                                    ? cell["cellTooltip"]
-                                    : (0, helper_1.getCellValue)(cell, "cellTooltip");
-                                const getColor = (0, helper_1.getCellValue)(cell, "cellBackgroundConditionKey");
-                                const cellActive = (0, helper_1.getCellValue)(cell, "cellActive");
-                                const isSticky = stickyMap.has(ci);
-                                const left = isSticky ? stickyMap.get(ci) : 0;
-                                const content = isEmployee ? ((0, jsx_runtime_1.jsx)(EmployeeCell_1.EmployeeCell, { row: row, maxWidth: maxWidth, minWidth: minWidth })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", children: getRowTitle }));
-                                const isNotDisabled = !((0, sortUtils_1.isSelectionDisabled)(columns[ci]?.disableSelection, columns[ci]?.sorting) || row?.rowDisabled);
-                                let cellWidth;
-                                if (columnWidths[ci] !== undefined) {
-                                    cellWidth = `${columnWidths[ci]}px`;
-                                }
-                                else if (minWidth !== "auto") {
-                                    cellWidth = minWidth;
-                                }
-                                else {
-                                    cellWidth = undefined;
-                                }
-                                return ((0, jsx_runtime_1.jsx)(TableCell_1.default, { align: align, sx: {
-                                        ...(lockPinned && {
-                                            top: 0,
-                                            left,
-                                            zIndex: 5,
-                                            position: "sticky",
-                                        }),
-                                        ...(isNotDisabled
-                                            ? {}
-                                            : {
-                                                cursor: "not-allowed",
-                                            }),
-                                        userSelect: "none",
-                                        overflow: "hidden",
-                                        bgcolor: (0, styles_1.lighten)(getCellColor({
-                                            cellKey: getColor,
-                                            isSelected: isSelectedCell(ri, ci),
-                                        }), 0.8),
-                                        ...(cellActive &&
-                                            ci > 0 && {
-                                            color: getCellTextColor(cellActive),
-                                        }),
-                                        padding: "5px 10px",
-                                        cursor: "pointer",
-                                        maxWidth,
-                                        minWidth,
-                                        width: cellWidth,
-                                        boxSizing: "border-box",
-                                    }, onMouseDown: (e) => handleCellMouseDown(ri, ci)(e), onMouseEnter: isNotDisabled
-                                        ? handleCellMouseEnter(ri, ci)
-                                        : undefined, onMouseUp: (e) => handleCellMouseUp(ri, ci)(e), onContextMenu: isNotDisabled
-                                        ? handleContextMenuCallback(ri, ci)
-                                        : undefined, children: tooltip ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: tooltip, children: content })) : (content) }, key));
-                            }) }, typeof row.id === "string" ? row.id : `row-${ri}`));
-                    }) }))] }) }));
-});
-exports.CellSelectionTable.displayName = "CellSelectionTable";