schummar-table 0.10.5 → 0.11.0

package/dist/cjs/index.js

@@ -83,6 +83,9 @@ class Queue {
         this.start();
     });
   }
+  clear() {
+    this.q = [];
+  }
   async start() {
     this.isRunning = true;
     let next;
@@ -134,9 +137,9 @@ function parse(value) {
     return value2;
   });
 }
-function useTableStateStorage() {
-  const table = useTableContext();
+function useTableStateStorage(table) {
   const [isHydrated, setIsHydrated] = react.useState(false);
+  const [q] = react.useState(() => new Queue());
   react.useEffect(() => {
     const { persist } = table.getState().props;
     if (!persist) {
@@ -185,7 +188,6 @@ function useTableStateStorage() {
   react.useEffect(() => {
     if (!isHydrated)
       return;
-    const q = new Queue();
     return table.subscribe((state) => {
       var _a, _b;
       if (!state.props.persist)
@@ -218,7 +220,23 @@ function useTableStateStorage() {
       }, true);
     }, { throttle: 1e3 });
   }, [isHydrated]);
-  return isHydrated;
+  async function clear() {
+    await q.run(async () => {
+      const persist = table.getState().props.persist;
+      if (!persist) {
+        return;
+      }
+      const { storage } = persist;
+      const keys = "keys" in storage ? await storage.keys() : await Promise.all(Array(storage.length).fill(0).map((_x, i) => storage.key(i)));
+      for (const key of keys) {
+        if (key !== null) {
+          await storage.removeItem(key);
+        }
+      }
+      q.clear();
+    });
+  }
+  return [isHydrated, clear];
 }
 const flatMap = (arr, flatMap2) => {
   return [...arr].reduce((out, cur) => out.concat(flatMap2(cur)), []);
@@ -596,7 +614,11 @@ function syncSelections(table) {
   }, { runNow: true }), [table]);
 }
 function useTableState(_props) {
+  const [key, setKey] = react.useState({});
   const props = calcProps(_props);
+  function reset() {
+    setKey({});
+  }
   const state = react.useMemo(() => {
     var _a, _b, _c, _d;
     return new react$1.Store({
@@ -618,7 +640,7 @@ function useTableState(_props) {
       activeItemsById: /* @__PURE__ */ new Map(),
       lastSelectedId: void 0
     });
-  }, []);
+  }, [key]);
   filterColumns(state);
   calcItems(state);
   normalizeExpanded(state);
@@ -643,7 +665,7 @@ function useTableState(_props) {
       }
     });
   }, [state, props]);
-  return state;
+  return [state, reset];
 }
 function useCssVariables() {
   return useTheme(({ spacing, colors }) => ({
@@ -1094,10 +1116,13 @@ function ColumnSelection() {
   const IconButton2 = useTheme((t) => t.components.IconButton);
   const Popover = useTheme((t) => t.components.Popover);
   const Checkbox2 = useTheme((t) => t.components.Checkbox);
+  const Button2 = useTheme((t) => t.components.Button);
   const Settings2 = useTheme((t) => t.icons.Settings);
   const selectColumns = useTheme((t) => t.text.selectColumns);
+  const resetAll = useTheme((t) => t.text.resetAll);
   const cssVariables = useCssVariables();
   const table = useTableContext();
+  const reset = react.useContext(TableResetContext);
   const columns = table.useState("props.columns");
   const hiddenColumns = table.useState("hiddenColumns");
   const [anchorEl, setAnchorEl] = react.useState(null);
@@ -1146,7 +1171,11 @@ function ColumnSelection() {
             disabled: column.cannotHide
           }),
           label: column.header
-        }, column.id))]
+        }, column.id)), /* @__PURE__ */ jsxRuntime.jsx(Button2, {
+          variant: "outlined",
+          onClick: reset,
+          children: resetAll
+        })]
       })
     })]
   });
@@ -1638,6 +1667,7 @@ function Virtualized(_c) {
   }));
 }
 const TableContext = react.createContext(null);
+const TableResetContext = react.createContext(() => void 0);
 const ColumnContext = react.createContext(null);
 function useTableContext() {
   const value = react.useContext(TableContext);
@@ -1652,21 +1682,32 @@ function useColumnContext() {
   return value;
 }
 function Table(props) {
-  const table = useTableState(props);
+  const [table, resetState] = useTableState(props);
+  const [isHydrated, clearStorage] = useTableStateStorage(table);
+  async function reset() {
+    await clearStorage();
+    resetState();
+  }
   react.useLayoutEffect(() => {
     var _a, _b;
     return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render table");
   });
   return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, {
     value: table,
-    children: /* @__PURE__ */ jsxRuntime.jsx(TableMemoContextProvider, {
-      children: /* @__PURE__ */ jsxRuntime.jsx(TableLoadingState, {})
+    children: /* @__PURE__ */ jsxRuntime.jsx(TableResetContext.Provider, {
+      value: reset,
+      children: /* @__PURE__ */ jsxRuntime.jsx(TableMemoContextProvider, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(TableLoadingState, {
+          isHydrated
+        })
+      })
     })
   });
 }
-function TableLoadingState() {
+function TableLoadingState({
+  isHydrated
+}) {
   const loadingText = useTheme((t) => t.text.loading);
-  const isHydrated = useTableStateStorage();
   const [showLoading, setShowLoading] = react.useState(false);
   react.useEffect(() => {
     const handle = setTimeout(() => setShowLoading(true), 500);
@@ -2199,7 +2240,8 @@ const defaultTexts = {
   clearFilters: "Clear all filters",
   reset: "Reset",
   loading: "Loading",
-  deselectAll: "Deselect all"
+  deselectAll: "Deselect all",
+  resetAll: "Reset table state"
 };
 const defaultTableTheme = {
   text: defaultTexts,