schummar-table 0.9.0 → 0.10.0

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: "text",
+      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");
@@ -1695,20 +1712,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 +2160,7 @@ const defaultTexts = {
   clearFilters: "Clear all filters",
   reset: "Reset",
   loading: "Loading",
-  selected: (count) => `${count} selected`
+  deselectAll: "Deselect all"
 };
 const defaultTableTheme = {
   text: defaultTexts,
@@ -2175,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) => {
@@ -2690,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();
@@ -2717,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)",
@@ -2738,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),