@codezee/sixtify-brahma 0.2.185 → 0.2.186

package/package.json

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

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

@@ -1 +1 @@
-{"version":3,"file":"useAgGridSelection.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,sBAAsB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IACtD,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,gBAAgB,EAAE,CAAC,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,OAAO,CAAC;QAC5C,IAAI,EAAE,CAAC,EAAE,CAAC;QACV,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IACH,cAAc,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC;CACpD,CAAC;AAEF,KAAK,wBAAwB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IACxD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,YAAY,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IACzB,kBAAkB,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE;QACb,OAAO,EAAE,OAAO,CAAC;QACjB,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;IACF,OAAO,EAAE;QACP,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,aAAa,EAAE,MAAM,IAAI,CAAC;KAC3B,GAAG,IAAI,CAAC;CACV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,2GAQ1D,sBAAsB,CAAC,CAAC,CAAC,KAAG,wBAAwB,CAAC,CAAC,CA6RxD,CAAC"}
+{"version":3,"file":"useAgGridSelection.d.ts","sourceRoot":"","sources":["../../../src/AgGrid/hooks/useAgGridSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,sBAAsB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IACtD,OAAO,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACnC,gBAAgB,EAAE,CAAC,EAAE,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,OAAO,CAAC;QAC5C,IAAI,EAAE,CAAC,EAAE,CAAC;QACV,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC,CAAC;IACH,cAAc,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,CAAC,CAAA;KAAE,KAAK,OAAO,CAAC;CACpD,CAAC;AAEF,KAAK,wBAAwB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI;IACxD,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,YAAY,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IACzB,kBAAkB,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACrD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,EAAE;QACb,OAAO,EAAE,OAAO,CAAC;QACjB,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;IACF,OAAO,EAAE;QACP,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC;QACnB,aAAa,EAAE,MAAM,IAAI,CAAC;KAC3B,GAAG,IAAI,CAAC;CACV,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAAE,2GAQ1D,sBAAsB,CAAC,CAAC,CAAC,KAAG,wBAAwB,CAAC,CAAC,CAuUxD,CAAC"}

package/packages/shared-components/dist/AgGrid/hooks/useAgGridSelection.js

@@ -5,14 +5,23 @@ const react_1 = require("react");
 const useAgGridSelection = ({ gridRef, currentPageItems, totalRecords, selectedEmployee, fetchAll, getExtraParams, isRowSelectable, }) => {
     const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
     const [allDataCache, setAllDataCache] = (0, react_1.useState)(null);
-    const [selectableCount, setSelectableCount] = (0, react_1.useState)(null);
     const originalSelectableCountRef = (0, react_1.useRef)(null);
     const lastQueryParamsRef = (0, react_1.useRef)(null);
+    const previousTotalRecordsRef = (0, react_1.useRef)(totalRecords);
     (0, react_1.useEffect)(() => {
-        if (originalSelectableCountRef.current === null && totalRecords > 0) {
+        if ((originalSelectableCountRef.current === null && totalRecords > 0) ||
+            (originalSelectableCountRef.current !== null &&
+                totalRecords > originalSelectableCountRef.current)) {
             originalSelectableCountRef.current = totalRecords;
         }
-    }, [totalRecords]);
+        const totalRecordsChanged = previousTotalRecordsRef.current !== totalRecords;
+        if (totalRecordsChanged) {
+            if (allDataCache) {
+                setAllDataCache(null);
+            }
+        }
+        previousTotalRecordsRef.current = totalRecords;
+    }, [totalRecords, allDataCache, selectedIds.length]);
     const currentPageState = (0, react_1.useMemo)(() => {
         if (!currentPageItems.length) {
             return { selected: 0, checked: false, indeterminate: false };
@@ -73,28 +82,27 @@ const useAgGridSelection = ({ gridRef, currentPageItems, totalRecords, selectedE
             startRow: 0,
             endRow: totalRecords ?? 0,
             ...extraParams,
-            quickFilter: null,
         });
         const selectableList = isRowSelectable
             ? list.filter((item) => isRowSelectable({ data: item }))
             : list;
         const allIds = Array.from(new Set(selectableList.map(({ id }) => id)));
         setAllDataCache(list);
+        const calculatedSelectableCount = isRowSelectable
+            ? list.filter((item) => isRowSelectable({ data: item })).length
+            : list.length;
         if (apiSelectableCount !== undefined) {
-            setSelectableCount(apiSelectableCount);
             if (originalSelectableCountRef.current === null) {
                 originalSelectableCountRef.current = apiSelectableCount;
             }
         }
-        else {
-            const calculatedSelectableCount = isRowSelectable
-                ? list.filter((item) => isRowSelectable({ data: item })).length
-                : list.length;
-            if (originalSelectableCountRef.current === null) {
-                originalSelectableCountRef.current = calculatedSelectableCount;
-            }
+        else if (originalSelectableCountRef.current === null) {
+            originalSelectableCountRef.current = calculatedSelectableCount;
         }
-        setSelectedIds(allIds);
+        setSelectedIds((prev) => {
+            const merged = new Set([...prev, ...allIds]);
+            return Array.from(merged);
+        });
         if (totalRecords === 0 && totalCount) {
             gridRef.current?.api?.setRowCount(totalCount, false);
         }
@@ -102,7 +110,6 @@ const useAgGridSelection = ({ gridRef, currentPageItems, totalRecords, selectedE
     const clearSelection = (0, react_1.useCallback)(() => {
         setSelectedIds([]);
         setAllDataCache(null);
-        setSelectableCount(null);
         if (gridRef.current) {
             gridRef.current.api.deselectAll();
         }
@@ -128,22 +135,11 @@ const useAgGridSelection = ({ gridRef, currentPageItems, totalRecords, selectedE
     }, []);
     const selectedRecords = selectedEmployee.length;
     const getTotalRecordsCount = () => {
-        if (selectedRecords === 0) {
-            return totalRecords;
-        }
-        if (originalSelectableCountRef.current !== null) {
-            return originalSelectableCountRef.current;
-        }
-        if (selectableCount && selectableCount > totalRecords) {
-            return selectableCount;
-        }
         if (allDataCache?.length) {
             const calculatedSelectableCount = isRowSelectable
                 ? allDataCache.filter((item) => isRowSelectable({ data: item })).length
                 : allDataCache.length;
-            if (calculatedSelectableCount > totalRecords) {
-                return calculatedSelectableCount;
-            }
+            return calculatedSelectableCount;
         }
         return totalRecords;
     };
@@ -152,6 +148,16 @@ const useAgGridSelection = ({ gridRef, currentPageItems, totalRecords, selectedE
         if (!selectedRecords) {
             return null;
         }
+        const originalCount = originalSelectableCountRef.current;
+        const allOriginalRowsSelected = originalCount !== null && selectedRecords === originalCount;
+        if (allOriginalRowsSelected) {
+            return {
+                show: true,
+                text: `All ${originalCount} rows are selected.`,
+                buttonText: "Clear selection",
+                onButtonClick: clearSelection,
+            };
+        }
         if (displayRecordsCount === selectedRecords) {
             return {
                 show: true,
@@ -167,34 +173,56 @@ const useAgGridSelection = ({ gridRef, currentPageItems, totalRecords, selectedE
             onButtonClick: () => void selectAll(),
         };
     }, [selectedRecords, displayRecordsCount, clearSelection, selectAll]);
+    const isInputFieldActive = (0, react_1.useCallback)(() => {
+        const activeElement = document.activeElement;
+        return (activeElement?.tagName === "INPUT" ||
+            activeElement?.tagName === "TEXTAREA" ||
+            activeElement?.contentEditable === "true");
+    }, []);
+    const isHeaderCheckboxActive = (0, react_1.useCallback)(() => {
+        const activeElement = document.activeElement;
+        return (activeElement?.closest(".ag-header-cell") !== null ||
+            activeElement?.closest(".ag-selection-checkbox") !== null ||
+            activeElement?.getAttribute("role") === "columnheader");
+    }, []);
     (0, react_1.useEffect)(() => {
         const handleKeyDown = (event) => {
-            if (event.key.toLowerCase() === "a" && (event.ctrlKey || event.metaKey)) {
-                const activeElement = document.activeElement;
-                const isInputField = activeElement?.tagName === "INPUT" ||
-                    activeElement?.tagName === "TEXTAREA" ||
-                    activeElement?.contentEditable === "true";
-                if (isInputField || !currentPageItems.length) {
-                    return;
-                }
+            if (isInputFieldActive() || !currentPageItems.length) {
+                return;
+            }
+            const key = event.key.toLowerCase();
+            if (key === "a" && (event.ctrlKey || event.metaKey)) {
                 event.preventDefault();
                 selectCurrentPage();
+                return;
             }
-            if (event.key.toLowerCase() === "a" && event.altKey) {
-                const activeElement = document.activeElement;
-                const isInputField = activeElement?.tagName === "INPUT" ||
-                    activeElement?.tagName === "TEXTAREA" ||
-                    activeElement?.contentEditable === "true";
-                if (isInputField || !currentPageItems.length) {
-                    return;
-                }
+            if (key === "a" && event.altKey) {
                 event.preventDefault();
                 deselectCurrentPage();
+                return;
+            }
+            if ((event.code === "Space" || event.key === " ") &&
+                isHeaderCheckboxActive() &&
+                gridRef.current) {
+                event.preventDefault();
+                if (currentPageState.checked) {
+                    deselectCurrentPage();
+                }
+                else {
+                    selectCurrentPage();
+                }
             }
         };
         document.addEventListener("keydown", handleKeyDown, true);
         return () => document.removeEventListener("keydown", handleKeyDown, true);
-    }, [currentPageItems.length, selectCurrentPage, deselectCurrentPage]);
+    }, [
+        currentPageItems.length,
+        selectCurrentPage,
+        deselectCurrentPage,
+        currentPageState.checked,
+        isInputFieldActive,
+        isHeaderCheckboxActive,
+    ]);
     return {
         selectedIds,
         allDataCache,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/utils/CheckboxInput.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,GAAI;;CAAW,4CAgCxC,CAAC"}
+{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/utils/CheckboxInput.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,GAAI;;CAAW,4CA0CxC,CAAC"}

package/packages/shared-components/dist/utils/CheckboxInput.js

@@ -10,7 +10,7 @@ const material_1 = require("@mui/material");
 const CheckboxInput = ({ ...rest }) => {
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue, iron } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { disableRipple: true, checkedIcon: (0, jsx_runtime_1.jsx)(CheckBoxRounded_1.default, { fontSize: "small", htmlColor: butterflyBlue[900], sx: {
+    return ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { checkedIcon: (0, jsx_runtime_1.jsx)(CheckBoxRounded_1.default, { fontSize: "small", htmlColor: butterflyBlue[900], sx: {
                 borderRadius: 100,
                 marginLeft: "-1px",
             } }), icon: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
@@ -19,6 +19,16 @@ const CheckboxInput = ({ ...rest }) => {
                 border: "1px solid",
                 borderColor: iron[800],
                 borderRadius: "4px",
-            } }), ...rest }));
+            } }), sx: {
+            "&:hover": {
+                backgroundColor: "action.hover",
+            },
+            "&.Mui-checked:hover": {
+                backgroundColor: "action.hover",
+            },
+            "& .MuiTouchRipple-root": {
+                color: butterflyBlue[900],
+            },
+        }, ...rest }));
 };
 exports.CheckboxInput = CheckboxInput;