@natoora-libs/core 0.1.16-dev-doug-1 → 0.1.16-dev-doug-3

package/dist/components/index.cjs

@@ -7064,6 +7064,7 @@ var useStyles47 = (0, import_mui53.makeStyles)()((theme) => ({
   tableHeaderContent: {
     borderBottom: "1px solid",
     borderBottomColor: colors.neutral300,
+    backgroundColor: colors.neutral100,
     whiteSpace: "nowrap",
     "& .filter-menu-trigger": {
       visibility: "hidden",
@@ -7114,7 +7115,7 @@ var SmartTableHeader = ({
   };
   const isSortActive = (headCellId) => orderBy === headCellId;
   return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableHead, { className: classes.root, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_material59.TableRow, { children: [
-    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableCell, { padding: "checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+    enableCheckboxSelection ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_material59.TableCell, { padding: "checkbox", sx: { backgroundColor: colors.neutral100 }, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       import_material59.Checkbox,
       {
         color: "primary",
@@ -7569,16 +7570,28 @@ var import_material64 = require("@mui/material");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 var TableDesktopRowSelectionBar = ({
   isEveryRowInPageSelected,
-  isRowsInAllPagesSelected,
+  isRowsFromAllPagesSelected,
   numSelectedRows,
   totalRowCount,
-  handleRowSelectionBarClick
+  onSelectRowsFromAllPagesClick,
+  onClearSelectionClick
 }) => {
-  return isEveryRowInPageSelected ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
+  const isAnyRowSelected = numSelectedRows > 0;
+  const getSelectedRowsText = () => {
+    if (isRowsFromAllPagesSelected) {
+      return `All ${totalRowCount} rows from all pages are selected based on your filters.`;
+    }
+    if (isEveryRowInPageSelected) {
+      return `All ${numSelectedRows} rows on this page are selected.`;
+    }
+    return `${numSelectedRows} row${numSelectedRows > 1 ? "s" : ""} selected.`;
+  };
+  return isAnyRowSelected ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     import_material64.Box,
     {
       sx: {
         p: 1,
+        height: 40,
         gap: 2,
         display: "flex",
         justifyContent: "center",
@@ -7586,8 +7599,13 @@ var TableDesktopRowSelectionBar = ({
         backgroundColor: colors.neutral150
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { children: isRowsInAllPagesSelected ? `All ${totalRowCount} rows are selected based on your filters.` : `All ${numSelectedRows} rows on this page are selected.` }),
-        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Button, { onClick: handleRowSelectionBarClick, children: isRowsInAllPagesSelected ? "Clear Selection" : `Select all ${totalRowCount} rows from all pages based on your filters.` })
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Typography, { children: getSelectedRowsText() }),
+        !isRowsFromAllPagesSelected ? /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_material64.Button, { onClick: onSelectRowsFromAllPagesClick, children: [
+          "Select all ",
+          totalRowCount,
+          " rows from all pages based on your filters"
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_material64.Button, { onClick: onClearSelectionClick, children: "Clear Selection" })
       ]
     }
   ) : null;
@@ -7674,7 +7692,7 @@ var TableDesktop = ({
     appliedFilters?.sortField || "delivery_date"
   );
   const [selectedRows, setSelectedRows] = (0, import_react35.useState)(/* @__PURE__ */ new Set());
-  const [isRowsInAllPagesSelected, setIsRowsInAllPagesSelected] = (0, import_react35.useState)(false);
+  const [isRowsFromAllPagesSelected, setIsRowsFromAllPagesSelected] = (0, import_react35.useState)(false);
   const { toolbar: Toolbar2 } = components ?? {};
   const { toolbarProps, footerProps } = componentsProps ?? {};
   const numRows = (0, import_react35.useMemo)(
@@ -7702,15 +7720,18 @@ var TableDesktop = ({
       updateSort(property, orderDir);
     }
   };
+  const selectAllRowsInPage = () => {
+    const allRowsIds = new Set(data.map((n) => n[keyField]));
+    ;
+    setSelectedRows(allRowsIds);
+  };
   const resetSelectedRows = () => {
     setSelectedRows(/* @__PURE__ */ new Set());
-    setIsRowsInAllPagesSelected(false);
+    setIsRowsFromAllPagesSelected(false);
   };
   const handleSelectAllClick = (event) => {
     if (event.target.checked) {
-      const allRowsIds = new Set(data.map((n) => n[keyField]));
-      ;
-      setSelectedRows(allRowsIds);
+      selectAllRowsInPage();
       return;
     }
     resetSelectedRows();
@@ -7724,15 +7745,22 @@ var TableDesktop = ({
       } else {
         newSelected.add(rowId);
       }
+      if (newSelected.size < numRows) {
+        setIsRowsFromAllPagesSelected(false);
+      }
       return newSelected;
     });
   };
-  const handleRowSelectionBarClick = () => {
-    if (isRowsInAllPagesSelected) {
-      resetSelectedRows();
-      return;
-    }
-    setIsRowsInAllPagesSelected(true);
+  const handleSelectRowsFromAllPagesClick = () => {
+    setIsRowsFromAllPagesSelected(true);
+    selectAllRowsInPage();
+  };
+  const handleClearSelectionClick = () => {
+    resetSelectedRows();
+  };
+  const handleApplyFilters = (updatedFilters, shouldSave) => {
+    resetSelectedRows();
+    onApplyFilters?.(updatedFilters, shouldSave);
   };
   const handlePageChange = (event, page) => {
     resetSelectedRows();
@@ -7744,13 +7772,13 @@ var TableDesktop = ({
     }
   }, [enableCheckboxSelection]);
   (0, import_react35.useEffect)(() => {
-    if (isEveryRowInPageSelected || isRowsInAllPagesSelected) {
+    if (isEveryRowInPageSelected || isRowsFromAllPagesSelected) {
       const rowsIdsSet = new Set(data.map((obj) => obj[keyField]));
       setSelectedRows(
         (prev) => new Set([...prev].filter((value) => rowsIdsSet.has(value)))
       );
     }
-  }, [data, setSelectedRows, isEveryRowInPageSelected, isRowsInAllPagesSelected]);
+  }, [data, setSelectedRows, isEveryRowInPageSelected, isRowsFromAllPagesSelected]);
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     import_material66.Box,
     {
@@ -7774,7 +7802,7 @@ var TableDesktop = ({
               Toolbar2,
               {
                 selectedRows: [...selectedRows],
-                isRowsInAllPagesSelected,
+                isRowsInAllPagesSelected: isRowsFromAllPagesSelected,
                 ...toolbarProps
               }
             ) : null,
@@ -7782,10 +7810,11 @@ var TableDesktop = ({
               TableDesktopRowSelectionBar,
               {
                 isEveryRowInPageSelected,
-                isRowsInAllPagesSelected,
+                isRowsFromAllPagesSelected,
                 numSelectedRows: selectedRows.size,
                 totalRowCount: totalDataCount ?? 0,
-                handleRowSelectionBarClick
+                onSelectRowsFromAllPagesClick: handleSelectRowsFromAllPagesClick,
+                onClearSelectionClick: handleClearSelectionClick
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
@@ -7829,7 +7858,7 @@ var TableDesktop = ({
                           headerFilters: headerFilters ?? {},
                           onRequestSort: handleRequestSort,
                           onSelectAllClick: handleSelectAllClick,
-                          onApplyFilters,
+                          onApplyFilters: handleApplyFilters,
                           shouldShowCheckOnFilter
                         }
                       ),