schummar-table 0.10.3 → 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)), []);
@@ -543,6 +561,39 @@ function filterColumns(state) {
     draft.activeColumns = orderBy(columns.filter((column) => !hiddenColumns.has(column.id)), [(column) => columnOrder.indexOf(column.id)]);
   }, { runNow: true }), [state]);
 }
+function normalizeExpanded(table) {
+  react.useEffect(() => table.addReaction((state) => [state.props.expandOnlyOne, state.expanded, state.itemsById], ([expandOnlyOne, , itemsById], state) => {
+    var _a, _b, _c, _d, _e;
+    let expanded = state.expanded;
+    let hasChanged = false;
+    const allAncestors = [...expanded].map((id) => {
+      const item = itemsById.get(id);
+      return {
+        id,
+        ancestors: item ? getAncestors(itemsById, item) : /* @__PURE__ */ new Set()
+      };
+    });
+    if (expandOnlyOne) {
+      const withMostAncestors = orderBy(allAncestors, [(x) => x.ancestors.size], ["desc"])[0];
+      if ([...expanded].some((id) => id !== (withMostAncestors == null ? void 0 : withMostAncestors.id) && !(withMostAncestors == null ? void 0 : withMostAncestors.ancestors.has(id)))) {
+        expanded = state.expanded = (_a = withMostAncestors == null ? void 0 : withMostAncestors.ancestors) != null ? _a : /* @__PURE__ */ new Set();
+        (_c = (_b = state.props).onExpandedChange) == null ? void 0 : _c.call(_b, expanded);
+        return;
+      }
+    }
+    for (const { ancestors } of allAncestors) {
+      for (const ancestor of ancestors != null ? ancestors : []) {
+        if (!expanded.has(ancestor)) {
+          expanded.add(ancestor);
+          hasChanged = true;
+        }
+      }
+    }
+    if (hasChanged) {
+      (_e = (_d = state.props).onExpandedChange) == null ? void 0 : _e.call(_d, new Set(expanded));
+    }
+  }, { runNow: true }), [table]);
+}
 function syncSelections(table) {
   react.useEffect(() => table.addReaction((state) => [state.props.selectSyncChildren, state.selection, state.activeItems], ([selectSyncChildren, selection, activeItems], state) => {
     if (!selectSyncChildren)
@@ -563,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({
@@ -585,9 +640,10 @@ function useTableState(_props) {
       activeItemsById: /* @__PURE__ */ new Map(),
       lastSelectedId: void 0
     });
-  }, []);
+  }, [key]);
   filterColumns(state);
   calcItems(state);
+  normalizeExpanded(state);
   syncSelections(state);
   cleanupState(state);
   react.useEffect(() => {
@@ -609,7 +665,7 @@ function useTableState(_props) {
       }
     });
   }, [state, props]);
-  return state;
+  return [state, reset];
 }
 function useCssVariables() {
   return useTheme(({ spacing, colors }) => ({
@@ -1060,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);
@@ -1112,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
+        })]
       })
     })]
   });
@@ -1604,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);
@@ -1618,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);
@@ -2165,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,