schummar-table 0.9.0 → 0.10.2

package/dist/cjs/index.js

@@ -622,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: "outlined",
+      onClick: () => {
+        table.update((state) => {
+          state.activeColumns.forEach((column) => {
+            state.filterValues.delete(column.id);
+          });
+        });
+      },
+      children: textClearFilters
+    })
+  });
+}
 function ColumnFooter() {
   const table = useTableContext();
   const columnId = useColumnContext();
@@ -1655,8 +1674,6 @@ const TableInner = react.memo(function TableInner2({
   const enableExport = table.useState((state) => !!state.props.enableExport.copy || !!state.props.enableExport.download);
   const cssVariables = useCssVariables();
   const enableClearFiltersButton = table.useState("props.enableClearFiltersButton");
-  const Button2 = useTheme((t) => t.components.Button);
-  const textClearFilters = useTheme((t) => t.text.clearFilters);
   react.useLayoutEffect(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table inner");
@@ -1683,7 +1700,11 @@ const TableInner = react.memo(function TableInner2({
       }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
         className: classes == null ? void 0 : classes.headerCell,
         css: [tableTheme.defaultClasses.headerCell, stickyHeader && tableTheme.defaultClasses.sticky, stickyHeader instanceof Object && stickyHeader],
-        children: [enableSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && /* @__PURE__ */ jsxRuntime.jsx(ColumnSelection, {}), enableExport && /* @__PURE__ */ jsxRuntime.jsx(Export$1, {}), /* @__PURE__ */ jsxRuntime.jsx(ResizeHandleView, {})]
+        children: [enableSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectComponent, {}), enableColumnSelection && /* @__PURE__ */ jsxRuntime.jsx(ColumnSelection, {}), enableExport && /* @__PURE__ */ jsxRuntime.jsx(Export$1, {}), /* @__PURE__ */ jsxRuntime.jsx("div", {
+          css: {
+            flex: 1
+          }
+        }), /* @__PURE__ */ jsxRuntime.jsx(ResizeHandleView, {})]
       }), /* @__PURE__ */ jsxRuntime.jsx(ColumnHeaderContext.Provider, {
         children: activeColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(ColumnContext.Provider, {
           value: column.id,
@@ -1695,20 +1716,7 @@ const TableInner = react.memo(function TableInner2({
       })]
     }),
     footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [enableClearFiltersButton && hasActiveFilters && /* @__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
-        })
-      }), hasFooter && /* @__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]
@@ -2156,7 +2164,7 @@ const defaultTexts = {
   clearFilters: "Clear all filters",
   reset: "Reset",
   loading: "Loading",
-  selected: (count) => `${count} selected`
+  deselectAll: "Deselect all"
 };
 const defaultTableTheme = {
   text: defaultTexts,
@@ -2175,14 +2183,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) => {
@@ -2690,7 +2695,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();
@@ -2717,6 +2722,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)",
@@ -2733,28 +2739,28 @@ function SelectFilter(_m) {
       css: {
         marginBottom: "var(--spacing)"
       }
-    }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    }), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
+      disabled: !(value.size > 0),
+      onClick: () => onChange(/* @__PURE__ */ new Set()),
+      variant: "outlined",
+      css: {
+        justifyContent: "center",
+        width: "100%",
+        marginBottom: "var(--spacing)"
+      },
+      children: deselectAll
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
       css: {
         maxHeight: "20em",
         overflowY: "auto"
       },
-      children: [/* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
-        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), ">"]
-        })
-      }), filtered.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
+      children: filtered.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, {
         control: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, {
           checked: value.has(option),
           onChange: () => onChange(toggle(value, option, singleSelect))
         }),
         label: render(option)
-      }, index))]
+      }, index))
     }), filtered.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", {
       css: {
         textAlign: "center"