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

package/dist/components/index.d.cts

@@ -863,6 +863,7 @@ type HeadCell = {
     label?: string;
     numeric?: boolean;
     disablePadding?: boolean;
+    width?: number | string;
     enabled?: boolean;
     renderHeader?: ReactNode;
     filterOptionsQuery?: UseQueryResult<unknown[], unknown>;
@@ -884,14 +885,17 @@ interface ITableDesktopProps {
     handleClickOnClearFiltersButton?: () => void;
     deleteItem?: (id: string) => void;
     keyField?: string;
+    tableLayout?: 'fixed' | 'auto';
     onApplyFilters?: (updatedFilters: HeaderFilters, shouldSave: boolean) => void;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption: HeaderFilterObject) => boolean;
 }
-declare const TableDesktop: ({ data, headCells, RenderItem, appliedFilters, headerFilters, children, height, isLoading, rowsPerPage, enableCheckboxSelection, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, onApplyFilters, }: ITableDesktopProps) => react_jsx_runtime.JSX.Element;
+declare const TableDesktop: ({ data, headCells, RenderItem, appliedFilters, headerFilters, children, height, isLoading, rowsPerPage, enableCheckboxSelection, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, tableLayout, onApplyFilters, shouldShowCheckOnFilter, }: ITableDesktopProps) => react_jsx_runtime.JSX.Element;
 
 interface SmartTableHeaderFilterMenuProps {
     headCell: HeadCell;
     headerFilters: HeaderFilters;
-    hasActiveFilters: boolean;
+    numActiveFilters: number;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption: HeaderFilterObject) => boolean;
     onApplyFilters?: (...args: unknown[]) => void;
 }
 declare const _default$4: React__default.NamedExoticComponent<SmartTableHeaderFilterMenuProps>;
@@ -907,6 +911,7 @@ interface SmartTableHeaderProps {
     onRequestSort: (event: MouseEvent<unknown>, property: string) => void;
     onSelectAllClick: (event: ChangeEvent<HTMLInputElement>) => void;
     onApplyFilters?: (...args: unknown[]) => void;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption: HeaderFilterObject) => boolean;
 }
 declare const _default$3: React.NamedExoticComponent<SmartTableHeaderProps>;
 

package/dist/components/index.d.ts

@@ -863,6 +863,7 @@ type HeadCell = {
     label?: string;
     numeric?: boolean;
     disablePadding?: boolean;
+    width?: number | string;
     enabled?: boolean;
     renderHeader?: ReactNode;
     filterOptionsQuery?: UseQueryResult<unknown[], unknown>;
@@ -884,14 +885,17 @@ interface ITableDesktopProps {
     handleClickOnClearFiltersButton?: () => void;
     deleteItem?: (id: string) => void;
     keyField?: string;
+    tableLayout?: 'fixed' | 'auto';
     onApplyFilters?: (updatedFilters: HeaderFilters, shouldSave: boolean) => void;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption: HeaderFilterObject) => boolean;
 }
-declare const TableDesktop: ({ data, headCells, RenderItem, appliedFilters, headerFilters, children, height, isLoading, rowsPerPage, enableCheckboxSelection, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, onApplyFilters, }: ITableDesktopProps) => react_jsx_runtime.JSX.Element;
+declare const TableDesktop: ({ data, headCells, RenderItem, appliedFilters, headerFilters, children, height, isLoading, rowsPerPage, enableCheckboxSelection, disableInternalSort, updateSort, showClearFilterButton, handleClickOnClearFiltersButton, deleteItem, keyField, tableLayout, onApplyFilters, shouldShowCheckOnFilter, }: ITableDesktopProps) => react_jsx_runtime.JSX.Element;
 
 interface SmartTableHeaderFilterMenuProps {
     headCell: HeadCell;
     headerFilters: HeaderFilters;
-    hasActiveFilters: boolean;
+    numActiveFilters: number;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption: HeaderFilterObject) => boolean;
     onApplyFilters?: (...args: unknown[]) => void;
 }
 declare const _default$4: React__default.NamedExoticComponent<SmartTableHeaderFilterMenuProps>;
@@ -907,6 +911,7 @@ interface SmartTableHeaderProps {
     onRequestSort: (event: MouseEvent<unknown>, property: string) => void;
     onSelectAllClick: (event: ChangeEvent<HTMLInputElement>) => void;
     onApplyFilters?: (...args: unknown[]) => void;
+    shouldShowCheckOnFilter?: (columnId: string, filterOption: HeaderFilterObject) => boolean;
 }
 declare const _default$3: React.NamedExoticComponent<SmartTableHeaderProps>;
 

package/dist/components/index.js

@@ -7053,16 +7053,15 @@ var LabelledSwitch = withStyles6(LSwitch, (theme) => ({
 var Switch_default = memo20(LabelledSwitch);
 
 // src/components/SmartTableHeaderFilterMenu/SmartTableHeaderFilterMenu.tsx
-import React4, { useState as useState15 } from "react";
+import React4, { useMemo as useMemo2, useState as useState15, useEffect as useEffect9 } from "react";
 import { FilterList } from "@mui/icons-material";
+import CheckIcon from "@mui/icons-material/Check";
 import {
   Box as Box28,
   Checkbox as Checkbox4,
   Chip as Chip2,
   Divider as Divider9,
-  FormControl as FormControl5,
   FormControlLabel as FormControlLabel3,
-  FormHelperText as FormHelperText4,
   IconButton as IconButton3,
   Menu as Menu4
 } from "@mui/material";
@@ -7075,14 +7074,18 @@ var useStyles44 = makeStyles44()((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) => {
@@ -7102,18 +7105,21 @@ var findFilterIndex = (filters, filterOption) => filters.findIndex((item) => {
 });
 var SmartTableHeaderFilterMenu = ({
   headCell,
-  hasActiveFilters,
+  numActiveFilters,
   headerFilters,
+  shouldShowCheckOnFilter,
   onApplyFilters
 }) => {
   const { classes } = useStyles44();
   const [anchorEl, setAnchorEl] = useState15(null);
-  const [shouldSave, setShouldSave] = useState15(false);
   const [selectedFilters, setSelectedFilters] = useState15(
     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);
@@ -7121,7 +7127,6 @@ var SmartTableHeaderFilterMenu = ({
   const handleFilterMenuClose = () => {
     setSelectedFilters(headerFilters[headCell.id]);
     setAnchorEl(null);
-    setShouldSave(false);
   };
   const handleFilterOptionClick = (option) => {
     const selectedIndex = findFilterIndex(selectedFilters, option);
@@ -7139,6 +7144,20 @@ var SmartTableHeaderFilterMenu = ({
     }
     setSelectedFilters(newSelected);
   };
+  const handleApplyFilters = (shouldSave) => {
+    const updatedFilters = {
+      ...headerFilters,
+      [headCell.id]: [...selectedFilters]
+    };
+    onApplyFilters?.(updatedFilters, shouldSave);
+    setAnchorEl(null);
+  };
+  useEffect9(() => {
+    setSelectedFilters(headerFilters[headCell.id] ?? []);
+  }, [headerFilters, headCell.id]);
+  const isOptionChecked = useMemo2(() => (resolvedOption) => !!selectedFilters?.some(
+    (value) => resolveFilterOption(value) === resolvedOption
+  ), [selectedFilters]);
   return /* @__PURE__ */ jsxs74(Fragment12, { children: [
     /* @__PURE__ */ jsx108(
       IconButton3,
@@ -7148,13 +7167,13 @@ var SmartTableHeaderFilterMenu = ({
         "data-testid": "filter-menu-button",
         style: { padding: 0 },
         className: classNames3("filter-menu-trigger", {
-          "has-active-filters": hasActiveFilters
+          "has-active-filters": numActiveFilters
         }),
-        children: hasActiveFilters ? /* @__PURE__ */ jsx108(
+        children: numActiveFilters ? /* @__PURE__ */ jsx108(
           Chip2,
           {
             sx: { height: 24 },
-            label: headerFilters[headCell.id]?.length,
+            label: numActiveFilters,
             icon: /* @__PURE__ */ jsx108(FilterList, { style: { fontSize: 18 }, color: "primary" })
           }
         ) : /* @__PURE__ */ jsx108(FilterList, { style: { fontSize: 18 } })
@@ -7170,61 +7189,69 @@ var SmartTableHeaderFilterMenu = ({
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
         transformOrigin: { vertical: "top", horizontal: "right" },
         children: /* @__PURE__ */ jsxs74(Box28, { className: classes.filterMenu, children: [
-          headCell.filterOptionsQuery?.data?.map(
+          /* @__PURE__ */ jsx108(Box28, { px: 3, children: /* @__PURE__ */ jsx108(
+            FormControlLabel3,
+            {
+              label: "Select All",
+              control: /* @__PURE__ */ jsx108(
+                Checkbox4,
+                {
+                  disableRipple: true,
+                  checked: numCurrentSelectedFilters === numFilterOptions,
+                  indeterminate: numCurrentSelectedFilters > 0 && numCurrentSelectedFilters < numFilterOptions,
+                  onChange: ({ target: { checked } }) => {
+                    if (checked) {
+                      setSelectedFilters([...filterOptions]);
+                    } else {
+                      setSelectedFilters([]);
+                    }
+                  }
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx108(Divider9, {}),
+          filterOptions.map(
             (option) => {
               const resolvedOption = resolveFilterOption(option);
-              return /* @__PURE__ */ jsx108(
-                FormControl5,
+              return /* @__PURE__ */ jsxs74(
+                Box28,
                 {
-                  className: classes.filterCheckboxDropdown,
-                  children: /* @__PURE__ */ jsx108(
-                    FormControlLabel3,
-                    {
-                      label: resolvedOption,
-                      control: /* @__PURE__ */ jsx108(
-                        Checkbox4,
-                        {
-                          disableRipple: true,
-                          onChange: () => handleFilterOptionClick(option),
-                          checked: selectedFilters?.some(
-                            (value) => resolveFilterOption(value) === resolvedOption
-                          ) ?? false
-                        }
-                      )
-                    }
-                  )
+                  className: classes.filter,
+                  children: [
+                    /* @__PURE__ */ jsx108(
+                      FormControlLabel3,
+                      {
+                        label: resolvedOption,
+                        control: /* @__PURE__ */ jsx108(
+                          Checkbox4,
+                          {
+                            disableRipple: true,
+                            onChange: () => handleFilterOptionClick(option),
+                            checked: isOptionChecked(resolvedOption)
+                          }
+                        )
+                      },
+                      resolvedOption
+                    ),
+                    shouldShowCheckOnFilter?.(headCell.id, option) ? /* @__PURE__ */ jsx108(CheckIcon, { fontSize: "small", color: "action" }) : null
+                  ]
                 },
                 resolvedOption
               );
             }
           ),
           /* @__PURE__ */ jsx108(Divider9, {}),
-          /* @__PURE__ */ jsxs74(FormControl5, { className: classes.filterCheckboxDropdown, children: [
-            /* @__PURE__ */ jsx108(
-              FormControlLabel3,
-              {
-                label: "Save Filters",
-                control: /* @__PURE__ */ jsx108(
-                  Checkbox4,
-                  {
-                    disableRipple: true,
-                    checked: shouldSave,
-                    onChange: (e) => setShouldSave(e.target.checked)
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx108(FormHelperText4, { sx: { margin: 0 }, children: "Filters auto-apply on return." })
-          ] }),
-          /* @__PURE__ */ jsx108(Divider9, {}),
           /* @__PURE__ */ jsxs74(Box28, { className: classes.applyFilterButtonsContainer, children: [
             /* @__PURE__ */ jsx108(
               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__ */ jsx108(
@@ -7233,15 +7260,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)
               }
             )
           ] })
@@ -7327,7 +7346,8 @@ var SmartTableHeader = ({
   headerFilters,
   onRequestSort,
   onSelectAllClick,
-  onApplyFilters
+  onApplyFilters,
+  shouldShowCheckOnFilter
 }) => {
   const { classes } = useStyles45();
   const createSortHandler = (property) => (event) => {
@@ -7349,6 +7369,7 @@ var SmartTableHeader = ({
       {
         className: classes.tableHeaderContent,
         align: "left",
+        sx: { width: headCell.width ?? "auto" },
         sortDirection: orderBy === headCell.id ? order : false,
         children: [
           /* @__PURE__ */ jsxs75(
@@ -7369,8 +7390,9 @@ var SmartTableHeader = ({
             {
               headCell,
               headerFilters,
-              hasActiveFilters: !!headerFilters[headCell.id]?.length,
-              onApplyFilters
+              numActiveFilters: headerFilters[headCell.id]?.length ?? 0,
+              onApplyFilters,
+              shouldShowCheckOnFilter
             }
           ) : null
         ]
@@ -7571,7 +7593,7 @@ var Table_default = Table;
 // src/components/TableDesktop/TableDesktop.tsx
 import {
   useCallback as useCallback2,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useState as useState17
 } from "react";
 import {
@@ -7708,7 +7730,9 @@ var TableDesktop = ({
   handleClickOnClearFiltersButton,
   deleteItem,
   keyField = "id",
-  onApplyFilters
+  tableLayout = "auto",
+  onApplyFilters,
+  shouldShowCheckOnFilter
 }) => {
   const [order, setOrder] = useState17(appliedFilters?.sortDir || "desc");
   const [orderBy, setOrderBy] = useState17(
@@ -7718,11 +7742,11 @@ var TableDesktop = ({
   const [page] = useState17(0);
   const { classes } = useStyles48();
   const rowHeight = 56;
-  const emptyRows = useMemo2(
+  const emptyRows = useMemo3(
     () => rowsPerPage - data.length,
     [rowsPerPage, data]
   );
-  const visibleHeadCells = useMemo2(
+  const visibleHeadCells = useMemo3(
     () => headCells.filter((headCell) => headCell?.enabled ?? true),
     [headCells]
   );
@@ -7766,7 +7790,7 @@ var TableDesktop = ({
     },
     [selected]
   );
-  const renderTableRows = useMemo2(() => {
+  const renderTableRows = useMemo3(() => {
     const sortedData = disableInternalSort ? data : stableSort2(data, getComparator(order, orderBy));
     return sortedData.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
       const isItemSelected = selected.includes(row[keyField]);
@@ -7819,6 +7843,7 @@ var TableDesktop = ({
         "aria-labelledby": "tableTitle",
         "aria-label": "sticky table",
         stickyHeader: true,
+        style: { tableLayout },
         children: [
           /* @__PURE__ */ jsx113(
             SmartTableHeader_default,
@@ -7832,7 +7857,8 @@ var TableDesktop = ({
               headerFilters: headerFilters ?? {},
               onRequestSort: handleRequestSort,
               onSelectAllClick: handleSelectAllClick,
-              onApplyFilters
+              onApplyFilters,
+              shouldShowCheckOnFilter
             }
           ),
           /* @__PURE__ */ jsx113(TableBody2, { children: rowsPerPage !== emptyRows ? renderTableRows : /* @__PURE__ */ jsx113(
@@ -7852,7 +7878,7 @@ var TableDesktop = ({
 var TableDesktop_default = TableDesktop;
 
 // src/components/TableHeader/TableHeader.tsx
-import { memo as memo22, useEffect as useEffect9, useState as useState18 } from "react";
+import { memo as memo22, useEffect as useEffect10, useState as useState18 } from "react";
 import { ImportExport as ImportExportIcon } from "@mui/icons-material";
 import { TableCell as TableCell4, TableHead as TableHead3, TableRow as TableRow4, TableSortLabel as TableSortLabel3 } from "@mui/material";
 import { makeStyles as makeStyles49 } from "tss-react/mui";
@@ -7867,7 +7893,7 @@ var useStyles49 = makeStyles49()(() => ({
 var TableHeader = ({ cells, onSort = null }) => {
   const [sortableCells, setSortableCells] = useState18([]);
   const { classes } = useStyles49();
-  useEffect9(() => {
+  useEffect10(() => {
     setSortableCells(cells);
   }, []);
   const getNewSortDirection = (direction) => {