@natoora-libs/core 0.1.2 → 0.1.4-dev-doug-1

package/dist/components/index.cjs

@@ -7332,6 +7332,7 @@ var Switch_default = (0, import_react31.memo)(LabelledSwitch);
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
 var import_react32 = __toESM(require("react"), 1);
 var import_icons_material14 = require("@mui/icons-material");
+var import_Check = __toESM(require("@mui/icons-material/Check"), 1);
 var import_material58 = require("@mui/material");
 var import_classnames3 = __toESM(require("classnames"), 1);
 var import_mui51 = require("tss-react/mui");
@@ -7342,14 +7343,18 @@ var useStyles45 = (0, import_mui51.makeStyles)()((theme) => ({
     flexDirection: "column",
     gap: theme.spacing(0.5)
   },
-  filterCheckboxDropdown: {
+  filter: {
     display: "flex",
-    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "space-between",
     padding: theme.spacing(0, 3)
   },
   applyFilterButtonsContainer: {
     display: "flex",
     padding: theme.spacing(0, 1)
+  },
+  saveAsDefaultButton: {
+    color: theme.palette.primary.main
   }
 }));
 var resolveFilterOption = (filterOption) => {
@@ -7369,18 +7374,21 @@ var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
 });
 var SmartTableHeaderFilterMenu = ({
   headCell,
-  hasActiveFilters,
+  numActiveFilters,
   headerFilters,
+  shouldShowCheckOnFilter,
   onApplyFilters
 }) => {
   const { classes } = useStyles45();
   const [anchorEl, setAnchorEl] = (0, import_react32.useState)(null);
-  const [shouldSave, setShouldSave] = (0, import_react32.useState)(false);
   const [selectedFilters, setSelectedFilters] = (0, import_react32.useState)(
     headerFilters[headCell.id] ?? []
   );
+  const filterOptions = headCell.filterOptionsQuery?.data ?? [];
+  const numFilterOptions = filterOptions.length ?? 0;
+  const numCurrentSelectedFilters = selectedFilters.length;
   const handleFilterMenuOpen = (event) => {
-    if (!headCell.filterOptionsQuery?.data?.length) {
+    if (!numFilterOptions) {
       headCell.filterOptionsQuery?.refetch();
     }
     setAnchorEl(event.currentTarget);
@@ -7388,7 +7396,6 @@ var SmartTableHeaderFilterMenu = ({
   const handleFilterMenuClose = () => {
     setSelectedFilters(headerFilters[headCell.id]);
     setAnchorEl(null);
-    setShouldSave(false);
   };
   const handleFilterOptionClick = (option) => {
     const selectedIndex = findFilterIndex(selectedFilters, option);
@@ -7406,6 +7413,20 @@ var SmartTableHeaderFilterMenu = ({
     }
     setSelectedFilters(newSelected);
   };
+  const handleApplyFilters = (shouldSave) => {
+    const updatedFilters = {
+      ...headerFilters,
+      [headCell.id]: [...selectedFilters]
+    };
+    onApplyFilters?.(updatedFilters, shouldSave);
+    setAnchorEl(null);
+  };
+  (0, import_react32.useEffect)(() => {
+    setSelectedFilters(headerFilters[headCell.id] ?? []);
+  }, [headerFilters, headCell.id]);
+  const isOptionChecked = (0, import_react32.useMemo)(() => (resolvedOption) => !!selectedFilters?.some(
+    (value) => resolveFilterOption(value) === resolvedOption
+  ), [selectedFilters]);
   return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
       import_material58.IconButton,
@@ -7415,13 +7436,13 @@ var SmartTableHeaderFilterMenu = ({
         "data-testid": "filter-menu-button",
         style: { padding: 0 },
         className: (0, import_classnames3.default)("filter-menu-trigger", {
-          "has-active-filters": hasActiveFilters
+          "has-active-filters": numActiveFilters
         }),
-        children: hasActiveFilters ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        children: numActiveFilters ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
           import_material58.Chip,
           {
             sx: { height: 24 },
-            label: headerFilters[headCell.id]?.length,
+            label: numActiveFilters,
             icon: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material14.FilterList, { style: { fontSize: 18 }, color: "primary" })
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_icons_material14.FilterList, { style: { fontSize: 18 } })
@@ -7437,61 +7458,69 @@ var SmartTableHeaderFilterMenu = ({
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
         children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.filterMenu, children: [
-          headCell.filterOptionsQuery?.data?.map(
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Box, { px: 3, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+            import_material58.FormControlLabel,
+            {
+              label: "Select All",
+              control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                import_material58.Checkbox,
+                {
+                  disableRipple: true,
+                  checked: numCurrentSelectedFilters === numFilterOptions,
+                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
+                  onChange: ({ target: { checked } }) => {
+                    if (checked) {
+                      setSelectedFilters([...filterOptions]);
+                    } else {
+                      setSelectedFilters([]);
+                    }
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
+          filterOptions.map(
             (option) => {
               const resolvedOption = resolveFilterOption(option);
-              return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                import_material58.FormControl,
+              return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+                import_material58.Box,
                 {
-                  className: classes.filterCheckboxDropdown,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                    import_material58.FormControlLabel,
-                    {
-                      label: resolvedOption,
-                      control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                        import_material58.Checkbox,
-                        {
-                          disableRipple: true,
-                          onChange: () => handleFilterOptionClick(option),
-                          checked: selectedFilters?.some(
-                            (value) => resolveFilterOption(value) === resolvedOption
-                          ) ?? false
-                        }
-                      )
-                    }
-                  )
+                  className: classes.filter,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                      import_material58.FormControlLabel,
+                      {
+                        label: resolvedOption,
+                        control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+                          import_material58.Checkbox,
+                          {
+                            disableRipple: true,
+                            onChange: () => handleFilterOptionClick(option),
+                            checked: isOptionChecked(resolvedOption)
+                          }
+                        )
+                      },
+                      resolvedOption
+                    ),
+                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_Check.default, { fontSize: "small", color: "action" }) : null
+                  ]
                 },
                 resolvedOption
               );
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.FormControl, { className: classes.filterCheckboxDropdown, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-              import_material58.FormControlLabel,
-              {
-                label: "Save Filters",
-                control: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                  import_material58.Checkbox,
-                  {
-                    disableRipple: true,
-                    checked: shouldSave,
-                    onChange: (e) => setShouldSave(e.target.checked)
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.FormHelperText, { sx: { margin: 0 }, children: "Filters auto-apply on return." })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(import_material58.Divider, {}),
           /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_material58.Box, { className: classes.applyFilterButtonsContainer, children: [
             /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
               ExtendedButton_default,
               {
+                copy: "Save as Default",
                 buttonType: "button",
-                copy: "Deselect All",
                 variant: "text",
-                onClick: () => setSelectedFilters([])
+                tooltip: "Persists those filters for future visits",
+                className: classes.saveAsDefaultButton,
+                onClick: () => handleApplyFilters(true)
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
@@ -7500,15 +7529,7 @@ var SmartTableHeaderFilterMenu = ({
                 copy: "Apply",
                 color: "primary",
                 buttonType: "submit",
-                onClick: () => {
-                  const updatedFilters = {
-                    ...headerFilters,
-                    [headCell.id]: [...selectedFilters]
-                  };
-                  onApplyFilters?.(updatedFilters, shouldSave);
-                  setAnchorEl(null);
-                  setShouldSave(false);
-                }
+                onClick: () => handleApplyFilters(false)
               }
             )
           ] })
@@ -7588,7 +7609,8 @@ var SmartTableHeader = ({
   headerFilters,
   onRequestSort,
   onSelectAllClick,
-  onApplyFilters
+  onApplyFilters,
+  shouldShowCheckOnFilter
 }) => {
   const { classes } = useStyles46();
   const createSortHandler = (property) => (event) => {
@@ -7610,6 +7632,7 @@ var SmartTableHeader = ({
       {
         className: classes.tableHeaderContent,
         align: "left",
+        sx: { width: headCell.width ?? "auto" },
         sortDirection: orderBy === headCell.id ? order : false,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
@@ -7630,8 +7653,9 @@ var SmartTableHeader = ({
             {
               headCell,
               headerFilters,
-              hasActiveFilters: !!headerFilters[headCell.id]?.length,
-              onApplyFilters
+              numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
+              onApplyFilters,
+              shouldShowCheckOnFilter
             }
           ) : null
         ]
@@ -7949,7 +7973,9 @@ var TableDesktop = ({
   handleClickOnClearFiltersButton,
   deleteItem,
   keyField = "id",
-  onApplyFilters
+  tableLayout = "auto",
+  onApplyFilters,
+  shouldShowCheckOnFilter
 }) => {
   const [order, setOrder] = (0, import_react35.useState)(appliedFilters?.sortDir || "desc");
   const [orderBy, setOrderBy] = (0, import_react35.useState)(
@@ -8060,6 +8086,7 @@ var TableDesktop = ({
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         stickyHeader: true,
+        style: { tableLayout },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
             SmartTableHeader_default,
@@ -8073,7 +8100,8 @@ var TableDesktop = ({
               headerFilters: headerFilters ?? {},
               onRequestSort: handleRequestSort,
               onSelectAllClick: handleSelectAllClick,
-              onApplyFilters
+              onApplyFilters,
+              shouldShowCheckOnFilter
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_material63.TableBody, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(