schummar-table 0.8.2 → 0.10.0

package/dist/cjs/index.js

@@ -401,7 +401,7 @@ const noopParentId = () => void 0;
 function calcProps(props) {
   const cache = useTableMemo();
   return react.useMemo(() => {
-    var _f, _g, _h, _i, _j, _k, _l;
+    var _f, _g, _h, _i, _j, _k, _l, _m;
     let id;
     if (props.id instanceof Function || Array.isArray(props.id)) {
       id = cache("id", props.id);
@@ -480,8 +480,9 @@ function calcProps(props) {
       stickyFooter: (_i = props.stickyFooter) != null ? _i : true,
       enableExport,
       enableColumnSelection: (_j = props.enableColumnSelection) != null ? _j : true,
-      enableColumnResize: (_k = props.enableColumnResize) != null ? _k : true,
-      enableColumnReorder: (_l = props.enableColumnReorder) != null ? _l : true
+      enableClearFiltersButton: (_k = props.enableClearFiltersButton) != null ? _k : false,
+      enableColumnResize: (_l = props.enableColumnResize) != null ? _l : true,
+      enableColumnReorder: (_m = props.enableColumnReorder) != null ? _m : true
     });
   }, [props]);
 }
@@ -621,6 +622,25 @@ function useCssVariables() {
     "--secondaryContrastText": colors.secondary.contrastText
   }));
 }
+function ClearFiltersButton() {
+  const Button2 = useTheme((t) => t.components.Button);
+  const textClearFilters = useTheme((t) => t.text.clearFilters);
+  const table = useTableContext();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    css: tableTheme.defaultClasses.clearFiltersButton,
+    children: /* @__PURE__ */ jsxRuntime.jsx(Button2, {
+      variant: "text",
+      onClick: () => {
+        table.update((state) => {
+          state.activeColumns.forEach((column) => {
+            state.filterValues.delete(column.id);
+          });
+        });
+      },
+      children: textClearFilters
+    })
+  });
+}
 function ColumnFooter() {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -1635,6 +1655,13 @@ const TableInner = react.memo(function TableInner2({
     width: column.width,
     classes: column.classes
   })));
+  const hasActiveFilters = table.useState((state) => {
+    return state.activeColumns.some((column) => {
+      const filter = state.filters.get(column.id);
+      const filterValue = state.filterValues.get(column.id);
+      return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
+    });
+  });
   const columnWidths = table.useState("columnWidths", {
     throttle: 16
   });
@@ -1646,6 +1673,7 @@ const TableInner = react.memo(function TableInner2({
   const enableColumnSelection = table.useState("props.enableColumnSelection");
   const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
   const cssVariables = useCssVariables();
+  const enableClearFiltersButton = table.useState("props.enableClearFiltersButton");
   react.useLayoutEffect(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
@@ -1683,19 +1711,21 @@ const TableInner = react.memo(function TableInner2({
         css: [tableTheme.defaultClasses.headerFill, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader]
       })]
     }),
-    footer: hasFooter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
-      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
-      }), activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
-        value: column.id,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ColumnFooter, {})
-      }, column.id)), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: classes == null ? void 0 : classes.footerCell,
-        css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+    footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(ClearFiltersButton, {}), hasFooter && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        }), activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
+          value: column.id,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ColumnFooter, {})
+        }, column.id)), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: classes == null ? void 0 : classes.footerCell,
+          css: [tableTheme.defaultClasses.footerFill, stickyFooter && tableTheme.defaultClasses.stickyBottom, stickyFooter instanceof Object && stickyFooter]
+        })]
       })]
     }),
     children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsxRuntime.jsx(Row, {
@@ -2127,9 +2157,10 @@ const defaultTexts = {
   exportDownload: "Download",
   today: "Today",
   thisWeek: "This week",
+  clearFilters: "Clear all filters",
   reset: "Reset",
   loading: "Loading",
-  selected: (count) => `${count} selected`
+  deselectAll: "Deselect all"
 };
 const defaultTableTheme = {
   text: defaultTexts,
@@ -2148,14 +2179,11 @@ function useTheme(selector) {
   const process = (t) => {
     var _a2;
     const cell = (_a2 = t.classes) == null ? void 0 : _a2.cell;
-    const selected = t.text.selected;
     return __spreadProps(__spreadValues({}, t), {
       classes: __spreadProps(__spreadValues({}, t.classes), {
         cell: cell instanceof Function || Array.isArray(cell) ? memo("theme.classes.cell", cell) : cell
       }),
-      text: __spreadProps(__spreadValues({}, t.text), {
-        selected: selected instanceof Function || Array.isArray(selected) ? memo("theme.text.selected", selected) : selected
-      })
+      text: __spreadValues({}, t.text)
     });
   };
   const theme = (_b = (_a = table == null ? void 0 : table.useState((state) => {
@@ -2343,6 +2371,7 @@ function DatePicker({
   const textToday = useTheme((t) => t.text.today);
   const textThisWeek = useTheme((t) => t.text.thisWeek);
   const textReset = useTheme((t) => t.text.reset);
+  const cssVariables = useCssVariables();
   const [baseDate] = react.useState(new Date());
   const [dateInView, setDateInView] = react.useState(baseDate);
   const [dirty, setDirty] = react.useState();
@@ -2420,6 +2449,7 @@ function DatePicker({
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    css: cssVariables,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       css: {
         display: "grid",
@@ -2661,7 +2691,7 @@ function SelectFilter(_m) {
   const Checkbox2 = useTheme((t) => t.components.Checkbox);
   const Search2 = useTheme((t) => t.icons.Search);
   const Clear2 = useTheme((t) => t.icons.Clear);
-  const selected = useTheme((t) => t.text.selected);
+  const deselectAll = useTheme((t) => t.text.deselectAll);
   const noResults = useTheme((t) => t.text.noResults);
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -2688,6 +2718,7 @@ function SelectFilter(_m) {
   });
   const [query, setQuery] = react.useState("");
   const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
+  const Button2 = useTheme((t) => t.components.Button);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     css: {
       padding: "calc(var(--spacing) * 2)",
@@ -2709,16 +2740,16 @@ function SelectFilter(_m) {
         maxHeight: "20em",
         overflowY: "auto"
       },
-      children: [/* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Button2, {
         disabled: value.size === 0,
-        control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
-          disabled: value.size === 0,
-          checked: value.size > 0,
-          onChange: () => onChange(/* @__PURE__ */ new Set())
-        }),
-        label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: ["<", selected(value.size), ">"]
-        })
+        onClick: () => onChange(/* @__PURE__ */ new Set()),
+        variant: "outlined",
+        css: {
+          justifyContent: "center",
+          width: "calc(100% - 5px)",
+          marginRight: "5px"
+        },
+        children: deselectAll
       }), filtered.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
         control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
           checked: value.has(option),