@infinite-table/infinite-react 4.2.1-canary.0 → 4.3.0

package/index.js

@@ -127,6 +127,7 @@ var require_binary_search = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   CellSelectionState: () => CellSelectionState,
+  DataClient: () => DataClient,
   DataSource: () => DataSource,
   DataSourceActionType: () => DataSourceActionType,
   DeepMap: () => DeepMap,
@@ -147,13 +148,15 @@ __export(src_exports, {
   eventMatchesKeyboardShortcut: () => eventMatchesKeyboardShortcut,
   filterTypes: () => defaultFilterTypes2,
   flatten: () => flatten,
-  getComponentStateRoot: () => getComponentStateRoot,
+  getComponentStateRoot: () => buildManagedComponent,
   group: () => group,
   interceptMap: () => interceptMap,
   keyboardShortcuts: () => keyboardShortcuts,
   multisort: () => multisort,
-  useComponentState: () => useComponentState,
-  useDataSource: () => useDataSource,
+  queryKeyToCacheKey: () => queryKeyToCacheKey,
+  useComponentState: () => useManagedComponentState,
+  useDataSourceInternal: () => useDataSourceInternal,
+  useDataSourceState: () => useDataSourceState,
   useEffectWithChanges: () => useEffectWithChanges,
   useEffectWithObject: () => useEffectWithObject,
   useGridScroll: () => useGridScroll,
@@ -161,6 +164,7 @@ __export(src_exports, {
   useInfiniteColumnEditor: () => useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor: () => useInfiniteColumnFilterEditor,
   useInfiniteHeaderCell: () => useInfiniteHeaderCell,
+  useManagedDataSource: () => useManagedDataSource,
   useMasterRowInfo: () => useMasterRowInfo,
   useOverlay: () => useOverlay,
   useOverlayPortal: () => useOverlayPortal,
@@ -184,7 +188,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React67 = __toESM(require("react"));
+var React68 = __toESM(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -730,10 +734,13 @@ var COLORS = [
 ];
 var COLOR_SYMBOL = Symbol("color");
 var USED_COLORS_MAP = /* @__PURE__ */ new WeakMap();
-USED_COLORS_MAP.set(
-  COLORS,
-  COLORS.map((_) => 0)
-);
+function initUsedColors(colors = COLORS) {
+  USED_COLORS_MAP.set(
+    colors,
+    colors.map((_) => 0)
+  );
+}
+initUsedColors();
 var getNextColor = (colors = COLORS) => {
   var _a, _b;
   let usedColors = [];
@@ -767,8 +774,13 @@ function isChannelTargeted(channel, permissionToken) {
   partsMap.set(parts, true);
   const tokenParts = permissionToken.split(CHANNEL_SEPARATOR);
   const hasWildcard = new Set(tokenParts).has(CHANNEL_WILDCARD);
-  const storagePartsWithoutWildcard = hasWildcard ? tokenParts.slice(0, tokenParts.indexOf(CHANNEL_WILDCARD)) : tokenParts;
+  const indexOfToken = tokenParts.indexOf(CHANNEL_WILDCARD);
+  const storagePartsWithoutWildcard = hasWildcard ? tokenParts.slice(0, indexOfToken) : tokenParts;
   if (partsMap.getKeysStartingWith(storagePartsWithoutWildcard, hasWildcard).length > 0) {
+    const remainingParts = tokenParts.slice(indexOfToken + 1);
+    if (remainingParts.length) {
+      return channel.endsWith(remainingParts.join(CHANNEL_SEPARATOR));
+    }
     return true;
   }
   return void 0;
@@ -851,7 +863,7 @@ function debugPackage(channelName) {
     let lastMessageTimestamp = 0;
     const isEnabled = () => enabled != null ? enabled : isLoggingEnabled(channel, storageKeyValue);
     const color = getNextColor(debug.colors);
-    const logger2 = Object.defineProperties(
+    const logger3 = Object.defineProperties(
       (...args) => {
         if (isLoggingEnabled(channel, storageKeyValue)) {
           const now = Date.now();
@@ -928,8 +940,8 @@ function debugPackage(channelName) {
         }
       }
     );
-    loggers.set(channelParts, logger2);
-    return logger2;
+    loggers.set(channelParts, logger3);
+    return logger3;
   }
   return debugFactory(channelName);
 }
@@ -945,6 +957,12 @@ Object.defineProperty(debugPackage, "enable", {
 var debug = debugPackage;
 debug.colors = COLORS;
 debug.logFn = defaultLogger;
+debug.destroyAll = () => {
+  initUsedColors();
+  initUsedColors(debug.colors);
+  loggers.clear();
+  enabledChannelsCache.clear();
+};
 
 // src/utils/debug.ts
 var debugTable = debug(`InfiniteTable`);
@@ -1111,7 +1129,7 @@ var CSSNumericVariableWatch = (props) => {
   );
 };
 
-// src/components/DataSource/publicHooks/useDataSource.ts
+// src/components/DataSource/publicHooks/useDataSourceState.ts
 var React5 = __toESM(require("react"));
 
 // src/components/DataSource/DataSourceContext.ts
@@ -1141,8 +1159,8 @@ function getDataSourceMasterDetailContext() {
   return DSMasterDetailContext = React4.createContext(void 0);
 }
 
-// src/components/DataSource/publicHooks/useDataSource.ts
-function useDataSource() {
+// src/components/DataSource/publicHooks/useDataSourceState.ts
+function useDataSourceState() {
   const DataSourceContext = getDataSourceContext();
   const contextValue = React5.useContext(DataSourceContext);
   return contextValue.componentState;
@@ -4573,8 +4591,8 @@ function forwardProps(propsToForward, props, setupState) {
     }
   return mappedState;
 }
-function getComponentStateRoot(config) {
-  return React14.memo(function ComponentStateRoot(props) {
+function buildManagedComponent(config) {
+  function useManagedComponent(props) {
     var _a, _b;
     const [initialSetupState] = (0, import_react14.useState)(() => {
       return config.initSetupState ? config.initSetupState(props) : {};
@@ -4752,8 +4770,8 @@ function getComponentStateRoot(config) {
         }
       });
       if (updatedPropsToStateCount > 0 || newMappedStateCount > 0) {
-        const logger2 = config.debugName ? dbg(`${config.debugName}:rerender`) : dbg("rerender");
-        logger2(
+        const logger3 = config.debugName ? dbg(`${config.debugName}:rerender`) : dbg("rerender");
+        logger3(
           "Triggered by new values for the following props",
           ...[
             ...Object.keys(newMappedState != null ? newMappedState : {}),
@@ -4790,10 +4808,18 @@ function getComponentStateRoot(config) {
         (_a2 = config.cleanup) == null ? void 0 : _a2.call(config, getComponentState());
       };
     });
-    return /* @__PURE__ */ React14.createElement(Context.Provider, { value: contextValue }, props.children);
+    return { contextValue, ContextComponent: Context };
+  }
+  const ManagedComponentContextProvider = React14.memo(function CSR(props) {
+    const { contextValue, ContextComponent } = useManagedComponent(props);
+    return /* @__PURE__ */ React14.createElement(ContextComponent.Provider, { value: contextValue }, props.children);
   });
+  return {
+    ManagedComponentContextProvider,
+    useManagedComponent
+  };
 }
-function useComponentState() {
+function useManagedComponentState() {
   const Context = getComponentStateContext();
   return React14.useContext(Context);
 }
@@ -7765,7 +7791,7 @@ function forwardProps2() {
     domProps: 1
   };
 }
-var InfiniteCheckBoxRoot = getComponentStateRoot({
+var { ManagedComponentContextProvider: InfiniteCheckBoxRoot } = buildManagedComponent({
   // @ts-ignore
   forwardProps: forwardProps2,
   // @ts-ignore
@@ -7784,7 +7810,7 @@ var InfiniteCheckBoxRoot = getComponentStateRoot({
   debugName: "InfiniteCheckBox"
 });
 function InfiniteCheckBoxComponent() {
-  const { componentState, componentActions } = useComponentState();
+  const { componentState, componentActions } = useManagedComponentState();
   const { checked, domProps, disabled } = componentState;
   const inputRef = (0, import_react23.useRef)(null);
   (0, import_react23.useEffect)(() => {
@@ -9252,7 +9278,7 @@ function InfiniteTableHeaderCell(props) {
     getState: getDataSourceState,
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
-  const { allRowsSelected, someRowsSelected, selectionMode } = useDataSource();
+  const { allRowsSelected, someRowsSelected, selectionMode } = useDataSourceState();
   const dragging = columnReorderDragColumnId === column.id;
   const { onResize, height, width, headerOptions, columnsMap } = props;
   const sortInfo = column.computedSortInfo;
@@ -10969,8 +10995,7 @@ function enhancedFlatten(param) {
 }
 
 // src/components/DataSource/index.tsx
-var React50 = __toESM(require("react"));
-var import_react36 = require("react");
+var React51 = __toESM(require("react"));
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -11076,558 +11101,154 @@ var getMultisortFunction = (sortInfo, get) => {
   };
 };
 
-// src/components/DataSource/DataSourceCache.ts
-var DataSourceCache = class {
-  constructor() {
-    this.affectedFields = /* @__PURE__ */ new Set();
-    this.allFieldsAffected = false;
-    this.primaryKeyToData = /* @__PURE__ */ new Map();
-    this.getAffectedFields = () => {
-      if (this.allFieldsAffected) {
-        return true;
-      }
-      return this.affectedFields;
-    };
-    this.delete = (primaryKey, originalData, metadata) => {
-      this.allFieldsAffected = true;
-      const pk = primaryKey;
-      const value = this.primaryKeyToData.get(pk) || [];
-      value.push({
-        type: "delete",
-        primaryKey,
-        originalData,
-        metadata
-      });
-      this.primaryKeyToData.set(pk, value);
-    };
-    this.insert = (primaryKey, data, position2, metadata) => {
-      const pk = primaryKey;
-      const value = this.primaryKeyToData.get(pk) || [];
-      this.allFieldsAffected = true;
-      value.push({
-        type: "insert",
-        primaryKey,
-        data,
-        position: position2,
-        originalData: null,
-        metadata
-      });
-      this.primaryKeyToData.set(pk, value);
-    };
-    this.update = (primaryKey, data, originalData, metadata) => {
-      if (!this.allFieldsAffected) {
-        const keys = Object.keys(data);
-        keys.forEach((key) => this.affectedFields.add(key));
-      }
-      const pk = primaryKey;
-      const value = this.primaryKeyToData.get(pk) || [];
-      value.push({
-        type: "update",
-        primaryKey,
-        data,
-        originalData,
-        metadata
-      });
-      this.primaryKeyToData.set(primaryKey, value);
-    };
-    this.clear = () => {
-      this.allFieldsAffected = false;
-      this.affectedFields.clear();
-      this.primaryKeyToData.clear();
-    };
-    this.isEmpty = () => {
-      return this.primaryKeyToData.size === 0;
-    };
-    this.removeInfo = (primaryKey) => {
-      this.primaryKeyToData.delete(primaryKey);
-    };
-    this.getMutationsForPrimaryKey = (primaryKey) => {
-      const data = this.primaryKeyToData.get(primaryKey);
-      return data;
-    };
-    this.getMutations = () => {
-      return new Map(this.primaryKeyToData);
-    };
+// src/components/DataSource/BooleanDeepCollectionState.ts
+var BooleanDeepCollectionState = class {
+  constructor(state) {
+    const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
+      //@ts-ignore
+      state.getState()
+    ) : state;
+    const positiveItems = this.getPositiveFromState(stateObject);
+    const negativeItems = this.getNegativeFromState(stateObject);
+    this.update({
+      negativeItems,
+      positiveItems
+    });
   }
-  static clone(cache, { light = false } = {}) {
-    const clone = new DataSourceCache();
-    clone.allFieldsAffected = cache.allFieldsAffected;
-    clone.affectedFields = new Set(cache.affectedFields);
-    clone.primaryKeyToData = light ? cache.primaryKeyToData : new Map(
-      cache.primaryKeyToData
-    );
-    return clone;
+  getInitialState() {
+    return this.initialState;
   }
-};
-
-// src/components/DataSource/dataSourceGetters.ts
-function getRowInfoAt(rowIndex, getState) {
-  return getState().dataArray[rowIndex];
-}
-function getRowInfoArray(getState) {
-  return getState().dataArray;
-}
-
-// src/components/DataSource/getDataSourceApi.ts
-function getDataSourceApi(param) {
-  return new DataSourceApiImpl(param);
-}
-var DataSourceApiImpl = class {
-  constructor(param) {
-    this.pendingOperations = [];
-    this.pendingPromise = null;
-    this.resolvePendingPromise = null;
-    this.toPrimaryKey = (data) => {
-      return this.getState().toPrimaryKey(data);
-    };
-    this.getRowInfoArray = () => {
-      return getRowInfoArray(this.getState);
-    };
-    this.getRowInfoByIndex = (index) => {
-      var _a;
-      return (_a = getRowInfoAt(index, this.getState)) != null ? _a : null;
-    };
-    this.getRowInfoByPrimaryKey = (id) => {
-      const index = this.getIndexByPrimaryKey(id);
-      return this.getRowInfoByIndex(index);
-    };
-    this.getIndexByPrimaryKey = (id) => {
-      var _a;
-      const map2 = this.getState().idToIndexMap;
-      return (_a = map2.get(id)) != null ? _a : -1;
-    };
-    this.getPrimaryKeyByIndex = (index) => {
-      const rowInfo = this.getRowInfoByIndex(index);
-      return rowInfo ? rowInfo.id : void 0;
-    };
-    this.getOriginalDataArray = () => {
-      return this.getState().originalDataArray;
-    };
-    this.getDataByPrimaryKey = (id) => {
-      var _a;
-      const { indexer } = this.getState();
-      return (_a = indexer.getDataForPrimaryKey(id)) != null ? _a : null;
-    };
-    this.updateData = (data, options) => {
-      return this.updateDataArray([data], options);
-    };
-    this.updateDataArray = (data, options) => {
-      const result = this.batchOperation({
-        type: "update",
-        array: data,
-        primaryKeys: data.map((d) => {
-          return this.toPrimaryKey(d);
-        }),
-        metadata: options == null ? void 0 : options.metadata
-      });
-      if (options == null ? void 0 : options.flush) {
-        this.commit();
-      }
-      return result;
-    };
-    this.removeDataByPrimaryKey = (id, options) => {
-      const result = this.batchOperation({
-        type: "delete",
-        primaryKeys: [id],
-        metadata: options == null ? void 0 : options.metadata
-      });
-      if (options == null ? void 0 : options.flush) {
-        this.commit();
+  // protected getState(): BooleanDeepCollectionStateObject<KeyType> {
+  //   return {
+  //     positiveItems: this.allPositive
+  //       ? true
+  //       : this.positiveMap?.topDownKeys() ?? [],
+  //     negativeItems: this.allNegative
+  //       ? true
+  //       : this.negativeMap?.topDownKeys() ?? [],
+  //   };
+  // }
+  destroy() {
+    var _a, _b;
+    (_a = this.positiveMap) == null ? void 0 : _a.clear();
+    (_b = this.negativeMap) == null ? void 0 : _b.clear();
+    delete this.positiveMap;
+    delete this.negativeMap;
+  }
+  update(state) {
+    const { positiveItems, negativeItems } = state;
+    this.allNegative = negativeItems === true;
+    this.allPositive = positiveItems === true;
+    if (this.allNegative && this.allPositive) {
+      throw `Cannot have both negativeItems and positiveItems be true!`;
+    }
+    if (negativeItems !== true) {
+      if (this.negativeMap) {
+        this.negativeMap.clear();
+        this.negativeMap.fill(negativeItems.map((keys) => [keys, true]));
+      } else {
+        this.negativeMap = new DeepMap(
+          negativeItems.map((keys) => [keys, true])
+        );
       }
-      return result;
-    };
-    this.removeData = (data, options) => {
-      const result = this.batchOperation({
-        type: "delete",
-        primaryKeys: [this.toPrimaryKey(data)],
-        metadata: options == null ? void 0 : options.metadata
-      });
-      if (options == null ? void 0 : options.flush) {
-        this.commit();
+      if (this.positiveMap) {
+        this.positiveMap.clear();
       }
-      return result;
-    };
-    this.removeDataArrayByPrimaryKeys = (ids, options) => {
-      const result = this.batchOperation({
-        type: "delete",
-        primaryKeys: ids,
-        metadata: options == null ? void 0 : options.metadata
-      });
-      if (options == null ? void 0 : options.flush) {
-        this.commit();
+    }
+    if (positiveItems !== true) {
+      if (this.positiveMap) {
+        this.positiveMap.clear();
+        this.positiveMap.fill(positiveItems.map((keys) => [keys, true]));
+      } else {
+        this.positiveMap = new DeepMap(
+          positiveItems.map((keys) => [keys, true])
+        );
       }
-      return result;
-    };
-    this.removeDataArray = (data, options) => {
-      const result = this.batchOperation({
-        type: "delete",
-        primaryKeys: data.map(this.toPrimaryKey),
-        metadata: options == null ? void 0 : options.metadata
-      });
-      if (options == null ? void 0 : options.flush) {
-        this.commit();
+      if (this.negativeMap) {
+        this.negativeMap.clear();
       }
-      return result;
-    };
-    this.addData = (data, options) => {
-      return this.addDataArray([data], options);
-    };
-    this.addDataArray = (data, options) => {
-      return this.insertDataArray(data, __spreadProps(__spreadValues({}, options), {
-        position: "end"
-      }));
-    };
-    this.insertData = (data, options) => {
-      return this.insertDataArray([data], options);
-    };
-    this.insertDataArray = (data, options) => {
-      let position2 = "before";
-      let primaryKey = void 0;
-      if (options.position === "before" || options.position === "after") {
-        position2 = options.position;
-        primaryKey = options.primaryKey;
-      } else {
-        const arr = this.getOriginalDataArray();
-        if (options.position === "start") {
-          position2 = "before";
-          primaryKey = this.toPrimaryKey(arr[0]);
-        } else {
-          position2 = "after";
-          primaryKey = this.toPrimaryKey(arr[arr.length - 1]);
-        }
-      }
-      const result = this.batchOperation({
-        type: "insert",
-        array: data,
-        position: position2,
-        metadata: options == null ? void 0 : options.metadata,
-        primaryKey
-      });
-      if (options == null ? void 0 : options.flush) {
-        this.commit();
-      }
-      return result;
-    };
-    this.setSortInfo = (sortInfo) => {
-      const multiSort = this.getState().multiSort;
-      if (Array.isArray(sortInfo)) {
-        this.actions.sortInfo = sortInfo.length ? multiSort ? sortInfo : sortInfo[0] : null;
-        return;
-      }
-      this.actions.sortInfo = sortInfo;
-      return;
-    };
-    this.getState = param.getState;
-    this.actions = param.actions;
-  }
-  batchOperation(operation) {
-    if (!this.pendingPromise) {
-      this.pendingPromise = new Promise((resolve) => {
-        this.resolvePendingPromise = resolve;
-      });
-      raf(() => {
-        this.commit();
-      });
     }
-    this.pendingOperations.push(operation);
-    return this.pendingPromise;
   }
-  batchOperations(operations) {
-    this.pendingOperations.push(...operations);
+  areAllNegative() {
+    return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
   }
-  commitOperations(operations) {
-    if (!operations.length) {
-      return;
-    }
-    const currentCache = this.getState().cache;
-    let cache = currentCache ? DataSourceCache.clone(currentCache, { light: true }) : new DataSourceCache();
-    operations.forEach((operation) => {
-      switch (operation.type) {
-        case "update":
-          operation.array.forEach((data, index) => {
-            const key = operation.primaryKeys[index];
-            const rowInfo = this.getRowInfoByPrimaryKey(key);
-            if (rowInfo && !rowInfo.isGroupRow) {
-              cache.update(
-                operation.primaryKeys[index],
-                data,
-                rowInfo.data,
-                operation.metadata
-              );
-            }
-          });
-          break;
-        case "delete":
-          operation.primaryKeys.forEach((key) => {
-            const rowInfo = this.getRowInfoByPrimaryKey(key);
-            if (rowInfo && !rowInfo.isGroupRow) {
-              cache.delete(key, rowInfo.data, operation.metadata);
-            }
-          });
-          break;
-        case "insert":
-          let pk = operation.primaryKey;
-          let position2 = operation.position;
-          operation.array.forEach((data) => {
-            cache.insert(pk, data, position2, operation.metadata);
-            pk = this.toPrimaryKey(data);
-            position2 = "after";
-          });
-          break;
-      }
-    });
-    this.actions.cache = cache;
+  areAllPositive() {
+    return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
   }
-  commit() {
-    this.commitOperations(this.pendingOperations);
-    this.pendingOperations.length = 0;
-    if (this.pendingPromise && this.resolvePendingPromise) {
-      const resolve = this.resolvePendingPromise;
-      requestAnimationFrame(() => {
-        resolve(true);
-      });
-      this.pendingPromise = null;
-      this.resolvePendingPromise = null;
-    }
+  makeAllNegative() {
+    this.update({
+      negativeItems: true,
+      positiveItems: []
+    });
   }
-};
-function getCacheAffectedParts(state) {
-  const cache = state.cache;
-  if (!cache) {
-    return {
-      sortInfo: false,
-      groupBy: false,
-      filterValue: false,
-      aggregationReducers: false
-    };
+  makeAllPositive() {
+    this.update({
+      positiveItems: true,
+      negativeItems: []
+    });
   }
-  let sortInfoAffected = false;
-  let groupByAffected = false;
-  let filterAffected = false;
-  let aggregationsAffected = false;
-  const keys = cache.getAffectedFields();
-  const { sortInfo, groupBy, filterValue, aggregationReducers } = state;
-  if (sortInfo && sortInfo.length) {
-    if (keys === true) {
-      sortInfoAffected = true;
-    } else {
-      for (const sort of sortInfo) {
-        let field = sort.field;
-        if (field) {
-          field = Array.isArray(field) ? field : [field];
-          sortInfoAffected = field.reduce((result, f) => {
-            return result || typeof f !== "function" ? keys.has(f) : false;
-          }, false);
-          if (sortInfoAffected) {
-            break;
-          }
-        }
+  isItemPositive(keys) {
+    var _a, _b;
+    if (this.allPositive === true) {
+      if (this.allNegative === true) {
+        throw 'Cannot have both positiveItems and negativeItems be "true"';
       }
+      return !((_a = this.negativeMap) == null ? void 0 : _a.has(keys));
     }
+    return (_b = this.positiveMap) == null ? void 0 : _b.has(keys);
   }
-  if (groupBy && groupBy.length) {
-    if (keys === true) {
-      groupByAffected = true;
-    } else {
-      for (const group2 of groupBy) {
-        if (group2.field && keys.has(group2.field)) {
-          groupByAffected = true;
-          break;
+  isItemNegative(keys) {
+    return !this.isItemPositive(keys);
+  }
+  setItemValue(keys, shouldMakePositive) {
+    var _a;
+    if (shouldMakePositive === this.isItemPositive(keys)) {
+      return;
+    }
+    if (shouldMakePositive) {
+      if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${keys.join(
+            ","
+          )} be positive`;
+        }
+        this.positiveMap.set(keys, true);
+      } else if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${keys.join(
+            ","
+          )} be positive`;
         }
+        this.negativeMap.delete(keys);
       }
-    }
-  }
-  if (filterValue && filterValue.length) {
-    if (keys === true) {
-      filterAffected = true;
     } else {
-      for (const filter of filterValue) {
-        if (filter.id) {
-          filterAffected = true;
-          break;
+      if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${keys.join(
+            ","
+          )} be negative`;
         }
-        if (filter.field && keys.has(filter.field)) {
-          filterAffected = true;
-          break;
+        this.negativeMap.set(keys, true);
+      } else if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${keys.join(
+            ","
+          )} be negative`;
         }
+        (_a = this.positiveMap) == null ? void 0 : _a.delete(keys);
       }
     }
   }
-  if (aggregationReducers && Object.keys(aggregationReducers).length) {
-    if (keys === true) {
-      aggregationsAffected = true;
-    } else {
-      for (const key in aggregationReducers)
-        if (aggregationReducers.hasOwnProperty(key)) {
-          const reducer = aggregationReducers[key];
-          if (!reducer.field) {
-            aggregationsAffected = true;
-            break;
-          } else {
-            if (keys.has(reducer.field)) {
-              aggregationsAffected = true;
-              break;
-            }
-          }
-        }
-    }
+  makeItemNegative(keys) {
+    this.setItemValue(keys, false);
   }
-  return {
-    sortInfo: sortInfoAffected,
-    groupBy: groupByAffected,
-    filterValue: filterAffected,
-    aggregationReducers: aggregationsAffected
-  };
-}
-
-// src/components/DataSource/BooleanDeepCollectionState.ts
-var BooleanDeepCollectionState = class {
-  constructor(state) {
-    const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
-      //@ts-ignore
-      state.getState()
-    ) : state;
-    const positiveItems = this.getPositiveFromState(stateObject);
-    const negativeItems = this.getNegativeFromState(stateObject);
-    this.update({
-      negativeItems,
-      positiveItems
-    });
-  }
-  getInitialState() {
-    return this.initialState;
-  }
-  // protected getState(): BooleanDeepCollectionStateObject<KeyType> {
-  //   return {
-  //     positiveItems: this.allPositive
-  //       ? true
-  //       : this.positiveMap?.topDownKeys() ?? [],
-  //     negativeItems: this.allNegative
-  //       ? true
-  //       : this.negativeMap?.topDownKeys() ?? [],
-  //   };
-  // }
-  destroy() {
-    var _a, _b;
-    (_a = this.positiveMap) == null ? void 0 : _a.clear();
-    (_b = this.negativeMap) == null ? void 0 : _b.clear();
-    delete this.positiveMap;
-    delete this.negativeMap;
-  }
-  update(state) {
-    const { positiveItems, negativeItems } = state;
-    this.allNegative = negativeItems === true;
-    this.allPositive = positiveItems === true;
-    if (this.allNegative && this.allPositive) {
-      throw `Cannot have both negativeItems and positiveItems be true!`;
-    }
-    if (negativeItems !== true) {
-      if (this.negativeMap) {
-        this.negativeMap.clear();
-        this.negativeMap.fill(negativeItems.map((keys) => [keys, true]));
-      } else {
-        this.negativeMap = new DeepMap(
-          negativeItems.map((keys) => [keys, true])
-        );
-      }
-      if (this.positiveMap) {
-        this.positiveMap.clear();
-      }
-    }
-    if (positiveItems !== true) {
-      if (this.positiveMap) {
-        this.positiveMap.clear();
-        this.positiveMap.fill(positiveItems.map((keys) => [keys, true]));
-      } else {
-        this.positiveMap = new DeepMap(
-          positiveItems.map((keys) => [keys, true])
-        );
-      }
-      if (this.negativeMap) {
-        this.negativeMap.clear();
-      }
-    }
-  }
-  areAllNegative() {
-    return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
-  }
-  areAllPositive() {
-    return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
-  }
-  makeAllNegative() {
-    this.update({
-      negativeItems: true,
-      positiveItems: []
-    });
-  }
-  makeAllPositive() {
-    this.update({
-      positiveItems: true,
-      negativeItems: []
-    });
-  }
-  isItemPositive(keys) {
-    var _a, _b;
-    if (this.allPositive === true) {
-      if (this.allNegative === true) {
-        throw 'Cannot have both positiveItems and negativeItems be "true"';
-      }
-      return !((_a = this.negativeMap) == null ? void 0 : _a.has(keys));
-    }
-    return (_b = this.positiveMap) == null ? void 0 : _b.has(keys);
-  }
-  isItemNegative(keys) {
-    return !this.isItemPositive(keys);
-  }
-  setItemValue(keys, shouldMakePositive) {
-    var _a;
-    if (shouldMakePositive === this.isItemPositive(keys)) {
-      return;
-    }
-    if (shouldMakePositive) {
-      if (this.allNegative === true) {
-        if (!this.positiveMap) {
-          throw `No positiveMap found when trying to set item ${keys.join(
-            ","
-          )} be positive`;
-        }
-        this.positiveMap.set(keys, true);
-      } else if (this.allPositive === true) {
-        if (!this.negativeMap) {
-          throw `No negativeMap found when trying to set item ${keys.join(
-            ","
-          )} be positive`;
-        }
-        this.negativeMap.delete(keys);
-      }
-    } else {
-      if (this.allPositive === true) {
-        if (!this.negativeMap) {
-          throw `No negativeMap found when trying to set item ${keys.join(
-            ","
-          )} be negative`;
-        }
-        this.negativeMap.set(keys, true);
-      } else if (this.allNegative === true) {
-        if (!this.positiveMap) {
-          throw `No positiveMap found when trying to set item ${keys.join(
-            ","
-          )} be negative`;
-        }
-        (_a = this.positiveMap) == null ? void 0 : _a.delete(keys);
-      }
-    }
-  }
-  makeItemNegative(keys) {
-    this.setItemValue(keys, false);
-  }
-  makeItemPositive(keys) {
-    this.setItemValue(keys, true);
-  }
-  toggleItem(keys) {
-    this.setItemValue(keys, !this.isItemPositive(keys));
-  }
-};
+  makeItemPositive(keys) {
+    this.setItemValue(keys, true);
+  }
+  toggleItem(keys) {
+    this.setItemValue(keys, !this.isItemPositive(keys));
+  }
+};
 
 // src/components/DataSource/GroupRowsState.ts
 var GroupRowsState = class extends BooleanDeepCollectionState {
@@ -11679,554 +11300,548 @@ var GroupRowsState = class extends BooleanDeepCollectionState {
   }
 };
 
-// src/components/DataSource/privateHooks/useLoadData.ts
-var import_react35 = require("react");
+// src/utils/groupAndPivot/getGroupKeysForDataItem.ts
+function getGroupKeysForDataItem(data, groupBy) {
+  return groupBy.reduce((groupKeys, groupBy2) => {
+    const { field: groupByProperty, valueGetter, toKey: groupToKey } = groupBy2;
+    const value = groupByProperty ? data[groupByProperty] : valueGetter == null ? void 0 : valueGetter({ data, field: groupByProperty });
+    const key = (groupToKey || DEFAULT_TO_KEY)(
+      value,
+      data
+    );
+    groupKeys.push(key);
+    return groupKeys;
+  }, []);
+}
 
-// src/components/hooks/useEffectWithChanges.ts
-var import_react34 = require("react");
-function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react34.useRef)({});
-  const oldValuesRef = (0, import_react34.useRef)({});
-  const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react34.useRef)({});
-  const changes = changesRef.current;
-  const useEffectDeps = [];
-  for (const k in deps) {
-    if (deps.hasOwnProperty(k)) {
-      if (deps[k] !== prevRef.current[k]) {
-        changes[k] = deps[k];
-        oldValues[k] = prevRef.current[k];
+// src/components/DataSource/RowSelectionState.ts
+var RowSelectionState = class {
+  constructor(state, getConfig, _forTestingOnly) {
+    this.selectedRows = null;
+    this.deselectedRows = null;
+    this.defaultSelection = false;
+    this.selectedMap = new DeepMap();
+    this.deselectedMap = new DeepMap();
+    this.onlyUsePrimaryKeys = false;
+    // TODO make it easy to share the cache with another instance
+    this.selectionCache = new DeepMap();
+    this.selectionCountCache = new DeepMap();
+    this.mapSet = (name, key) => {
+      if (!Array.isArray(key)) {
+        if (this.onlyUsePrimaryKeys) {
+          key = [key];
+        } else {
+          key = [...this.getGroupKeysForPrimaryKey(key), key];
+        }
       }
-      useEffectDeps.push(deps[k]);
+      this.xcache();
+      if (name === "selected") {
+        this.selectedMap.set(key, true);
+      } else {
+        this.deselectedMap.set(key, true);
+      }
+    };
+    this._selectedMapSet = (key) => {
+      this.mapSet("selected", key);
+    };
+    this._deselectedMapSet = (key) => {
+      this.mapSet("deselected", key);
+    };
+    const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
+      //@ts-ignore
+      state.getState()
+    ) : state;
+    this.getConfig = getConfig;
+    this.onlyUsePrimaryKeys = getConfig().onlyUsePrimaryKeys;
+    if (_forTestingOnly) {
+      Object.assign(this, _forTestingOnly);
     }
+    this.update(stateObject);
   }
-  prevRef.current = deps;
-  (0, import_react34.useEffect)(() => {
-    const changes2 = changesRef.current;
-    let result = void 0;
-    if (Object.keys(changes2).length !== 0) {
-      result = fn(changes2, oldValues);
+  getGroupKeysForPrimaryKey(pk) {
+    const { indexer, groupBy } = this.getConfig();
+    const data = indexer.getDataForPrimaryKey(pk);
+    return data ? getGroupKeysForDataItem(data, groupBy) : [];
+  }
+  getGroupDeepMap() {
+    return this.getConfig().groupDeepMap;
+  }
+  getGroupCount(groupKeys) {
+    var _a;
+    if (groupKeys.length == 0) {
+      return this.getConfig().totalCount;
     }
-    changesRef.current = {};
-    oldValuesRef.current = {};
-    return result;
-  }, useEffectDeps);
-}
-function useEffectWithObject(fn, deps) {
-  const useEffectDeps = [];
-  for (const k in deps) {
-    if (deps.hasOwnProperty(k)) {
-      useEffectDeps.push(deps[k]);
+    const groupDeepMap = this.getGroupDeepMap();
+    const deepMapValue = groupDeepMap == null ? void 0 : groupDeepMap.get(groupKeys);
+    if (!deepMapValue) {
+      return 0;
     }
+    return (_a = deepMapValue.totalChildrenCount) != null ? _a : deepMapValue.items.length || 0;
   }
-  (0, import_react34.useEffect)(fn, useEffectDeps);
-}
-
-// src/utils/composeFunctions.ts
-function composeFunctions(...fns) {
-  const f = (...args) => {
-    fns.forEach((fn) => {
-      if (typeof fn === "function") {
-        fn(...args);
-      }
-    });
-  };
-  return f;
-}
-
-// src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
-function prepareColumn(column) {
-  const { pivotByAtIndex: pivotByForColumn, pivotAggregator } = column;
-  if (pivotByForColumn == null ? void 0 : pivotByForColumn.column) {
-    if (typeof pivotByForColumn.column === "function") {
-      Object.assign(column, pivotByForColumn.column({ column }));
-    } else {
-      Object.assign(column, pivotByForColumn.column);
-    }
+  getGroupKeysDirectlyInsideGroup(groupKeys) {
+    const { groupDeepMap } = this.getConfig();
+    return (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith(groupKeys, true, 1)) || [];
   }
-  if (pivotAggregator == null ? void 0 : pivotAggregator.pivotColumn) {
-    if (typeof pivotAggregator.pivotColumn === "function") {
-      Object.assign(column, pivotAggregator.pivotColumn({ column }));
-    } else {
-      Object.assign(column, pivotAggregator.pivotColumn);
+  getAllPrimaryKeysInsideGroup(groupKeys) {
+    const { groupDeepMap } = this.getConfig();
+    if (!groupKeys.length) {
+      const topLevelKeys = (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith([], true, 1)) || [];
+      return topLevelKeys.map((groupKeys2) => this.getAllPrimaryKeysInsideGroup(groupKeys2)).flat();
     }
+    const group2 = groupDeepMap == null ? void 0 : groupDeepMap.get(groupKeys);
+    return group2 ? group2.items.map(this.getConfig().toPrimaryKey) : [];
   }
-  return column;
-}
-function prepareColumnGroup(columnGroup) {
-  const { pivotByAtIndex: pivotByForColumnGroup } = columnGroup;
-  if (pivotByForColumnGroup == null ? void 0 : pivotByForColumnGroup.columnGroup) {
-    if (typeof pivotByForColumnGroup.columnGroup === "function") {
-      Object.assign(
-        columnGroup,
-        pivotByForColumnGroup.columnGroup({ columnGroup })
-      );
-    } else {
-      Object.assign(columnGroup, pivotByForColumnGroup.columnGroup);
-    }
+  getGroupByLength() {
+    return this.getConfig().groupBy.length;
   }
-  return columnGroup;
-}
-function getPivotColumnsAndColumnGroups({
-  deepMap,
-  pivotBy,
-  pivotTotalColumnPosition,
-  pivotGrandTotalColumnPosition,
-  reducers = {},
-  showSeparatePivotColumnForSingleAggregation = false
-}) {
-  const pivotLength = pivotBy.length;
-  const aggregationReducers = Object.keys(
-    reducers
-  ).map((key) => {
-    return __spreadProps(__spreadValues({}, reducers[key]), { id: key });
-  });
-  if (!aggregationReducers.length) {
-    showSeparatePivotColumnForSingleAggregation = true;
-    pivotGrandTotalColumnPosition = false;
-    pivotTotalColumnPosition = false;
-    aggregationReducers.push({
-      id: "__empty-aggregation-reducer__",
-      name: "-",
-      initialValue: null,
-      reducer: () => null
-    });
+  static from(rowSeleStateObject, getConfig, overrides) {
+    return new RowSelectionState(rowSeleStateObject, getConfig, overrides);
   }
-  const columns = {};
-  const columnGroups = {};
-  const addGrandTotalColumns = once(function() {
-    aggregationReducers.forEach((reducer, index) => {
-      columns[`total:${reducer.id}`] = prepareColumn({
-        header: `${reducer.name || reducer.id} total`,
-        pivotBy,
-        pivotColumn: true,
-        pivotTotalColumn: true,
-        pivotAggregator: reducer,
-        pivotAggregatorIndex: index,
-        pivotGroupKeys: [],
-        pivotGroupKey: "",
-        pivotIndex: -1,
-        valueFormatter: ({ rowInfo }) => {
-          var _a;
-          return rowInfo.isGroupRow ? (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id] : null;
+  update(stateObject) {
+    var _a, _b;
+    this.selectedRows = stateObject.selectedRows || null;
+    this.deselectedRows = stateObject.deselectedRows || null;
+    this.selectedMap.clear();
+    this.deselectedMap.clear();
+    (_a = this.selectedRows) == null ? void 0 : _a.forEach(this._selectedMapSet);
+    (_b = this.deselectedRows) == null ? void 0 : _b.forEach(this._deselectedMapSet);
+    this.defaultSelection = stateObject.defaultSelection;
+    this.xcache();
+  }
+  xcache() {
+    this.selectionCache.clear();
+    this.selectionCountCache.clear();
+  }
+  getState() {
+    const normalize = (allKeys) => {
+      const groupByLength = this.getGroupByLength();
+      return allKeys.map((keys) => {
+        if (this.onlyUsePrimaryKeys) {
+          return keys[0];
         }
+        return keys.length > groupByLength ? keys.pop() : keys;
       });
+    };
+    const selectedRows = normalize(this.selectedMap.topDownKeys());
+    const deselectedRows = normalize(this.deselectedMap.topDownKeys());
+    return {
+      defaultSelection: this.defaultSelection,
+      selectedRows,
+      deselectedRows
+    };
+  }
+  deselectAll() {
+    this.update({
+      defaultSelection: false,
+      selectedRows: [],
+      deselectedRows: []
     });
-  });
-  if (!pivotLength && pivotTotalColumnPosition === "start" || pivotGrandTotalColumnPosition === "start") {
-    addGrandTotalColumns();
   }
-  const isSingleAggregationColumn = !showSeparatePivotColumnForSingleAggregation && aggregationReducers.length === 1;
-  deepMap.visitDepthFirst((_value, keys, _indexInGroup, next) => {
-    keys = [...keys];
-    if (pivotTotalColumnPosition === "end") {
-      next == null ? void 0 : next();
+  selectAll() {
+    this.update({
+      defaultSelection: true,
+      deselectedRows: [],
+      selectedRows: []
+    });
+  }
+  isRowDefaultSelected() {
+    return this.defaultSelection === true;
+  }
+  isRowDefaultDeselected() {
+    return this.defaultSelection === false;
+  }
+  /**
+   *
+   * @param key the id of the row - if a row in a grouped datasource, this is the final row id, without the group keys
+   * @param groupKeys the keys of row parents, in order
+   * @returns Whether the row is selected or not.
+   */
+  isRowSelected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      return this.defaultSelection ? !this.deselectedMap.has([key]) : this.selectedMap.has([key]);
     }
-    if (keys.length === pivotLength) {
-      const pivotByForColumn = pivotBy[keys.length - 1];
-      const parentKeys = keys.slice(0, -1);
-      let parentColumnGroupId = parentKeys.join("/");
-      if (!isSingleAggregationColumn) {
-        const columnGroupId = parentColumnGroupId;
-        parentColumnGroupId = keys.join("/");
-        const pivotGroupKey = keys[keys.length - 1];
-        columnGroups[parentColumnGroupId] = prepareColumnGroup({
-          header: `${pivotGroupKey}`,
-          columnGroup: columnGroupId,
-          pivotBy,
-          pivotGroupKeys: keys,
-          pivotByAtIndex: pivotByForColumn,
-          pivotIndex: keys.length - 1,
-          pivotGroupKey
-        });
+    groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
+    const finalKey = [...groupKeys, key];
+    const cachedResult = this.selectionCache.get(finalKey);
+    if (cachedResult !== void 0) {
+      return cachedResult;
+    }
+    const inSelected = this.selectedMap.has(finalKey);
+    const inDeselected = this.deselectedMap.has(finalKey);
+    if (inSelected) {
+      this.selectionCache.set(finalKey, true);
+      return true;
+    }
+    if (inDeselected) {
+      this.selectionCache.set(finalKey, false);
+      return false;
+    }
+    if (this.selectedMap.has(groupKeys)) {
+      this.selectionCache.set(finalKey, true);
+      return true;
+    }
+    if (this.deselectedMap.has(groupKeys)) {
+      this.selectionCache.set(finalKey, false);
+      return false;
+    }
+    groupKeys = [...groupKeys];
+    while (groupKeys.length) {
+      groupKeys.pop();
+      const inSelected2 = this.selectedMap.has(groupKeys);
+      const inDeselected2 = this.deselectedMap.has(groupKeys);
+      if (inSelected2) {
+        this.selectionCache.set(finalKey, true);
+        return true;
       }
-      aggregationReducers.forEach((reducer, index) => {
-        const header = isSingleAggregationColumn ? `${keys[keys.length - 1]}` : reducer.name || reducer.id;
-        const computedPivotColumn = prepareColumn({
-          pivotBy,
-          pivotColumn: true,
-          pivotTotalColumn: false,
-          pivotAggregator: reducer,
-          pivotAggregatorIndex: index,
-          pivotGroupKeys: keys,
-          pivotGroupKey: keys[keys.length - 1],
-          pivotIndex: keys.length - 1,
-          pivotByAtIndex: pivotByForColumn,
-          defaultSortable: false,
-          columnGroup: parentColumnGroupId,
-          header,
-          valueFormatter: ({ rowInfo }) => {
-            var _a, _b;
-            if (!rowInfo.isGroupRow) {
-              return null;
-            }
-            return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
-          }
-        });
-        const columnId = `${reducer.id}:${keys.join("/")}`;
-        columns[columnId] = computedPivotColumn;
-      });
+      if (inDeselected2) {
+        this.selectionCache.set(finalKey, false);
+        return false;
+      }
+    }
+    this.selectionCache.set(finalKey, this.defaultSelection);
+    return this.defaultSelection;
+  }
+  isRowDeselected(key, groupKeys) {
+    return !this.isRowSelected(key, groupKeys);
+  }
+  setRowSelected(key, selected, groupKeys) {
+    if (selected) {
+      this.setRowAsSelected(key, groupKeys);
     } else {
-      const colGroupId = keys.join("/");
-      const parentKeys = keys.slice(0, -1);
-      columnGroups[colGroupId] = prepareColumnGroup({
-        columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
-        header: `${keys[keys.length - 1]}`,
-        pivotBy,
-        pivotGroupKeys: keys,
-        pivotIndex: keys.length - 1,
-        pivotByAtIndex: pivotBy[keys.length - 1],
-        pivotGroupKey: keys[keys.length - 1]
-      });
-      if (pivotTotalColumnPosition !== false) {
-        const pivotByForColumn = pivotBy[keys.length - 1];
-        let columnGroupId = parentKeys.length ? parentKeys.join("/") : void 0;
-        if (!isSingleAggregationColumn) {
-          const parentGroupForTotalsGroup = columnGroupId;
-          columnGroupId = `total:${keys.join("/")}`;
-          columnGroups[columnGroupId] = prepareColumnGroup({
-            header: `${keys[keys.length - 1]} total`,
-            columnGroup: parentGroupForTotalsGroup,
-            pivotBy,
-            pivotTotalColumnGroup: true,
-            pivotGroupKeys: keys,
-            pivotIndex: keys.length - 1,
-            pivotByAtIndex: pivotByForColumn,
-            pivotGroupKey: keys[keys.length - 1]
-          });
+      this.setRowAsDeselected(key, groupKeys);
+    }
+  }
+  /**
+   * Returns if the selection state ('full','partial','none') for the current group
+   *
+   * The selection state will be full (true) if either of those are true:
+   *  * the group keys are specified as selected
+   *  * all the children are specified as selected
+   *
+   * The selection state will be partial (null) if either of those are true:
+   *  * the group keys are partially selected
+   *  * some of the children are specified as selected
+   *
+   *
+   * @param groupKeys the keys of the group row
+   * @param children leaf children that belong to the group
+   * @returns boolean
+   */
+  getGroupRowSelectionState(initialGroupKeys) {
+    const cachedResult = this.selectionCache.get(initialGroupKeys);
+    if (cachedResult !== void 0) {
+      return cachedResult;
+    }
+    const { selectedCount, deselectedCount } = this.getSelectionCountFor(
+      initialGroupKeys,
+      this.onlyUsePrimaryKeys ? (
+        // there is no need for the state from the parent group
+        // when we are in this case, so don't do that
+        void 0
+      ) : this.getGroupRowBooleanSelectionStateFromParent(initialGroupKeys)
+    );
+    const result = selectedCount && deselectedCount ? null : selectedCount ? true : false;
+    this.selectionCache.set(initialGroupKeys, result);
+    return result;
+  }
+  getGroupRowBooleanSelectionStateFromParent(initialGroupKeys) {
+    if (!initialGroupKeys.length) {
+      return this.defaultSelection;
+    }
+    const groupKeys = [...initialGroupKeys];
+    const selfDeselected = this.deselectedMap.has(groupKeys);
+    const selfSelected = this.selectedMap.has(groupKeys);
+    let selectionState = selfSelected && !selfDeselected ? true : selfDeselected && !selfSelected ? false : void 0;
+    if (selectionState === void 0) {
+      while (groupKeys.length) {
+        groupKeys.pop();
+        if (this.deselectedMap.has(groupKeys)) {
+          selectionState = false;
+          break;
+        }
+        if (this.selectedMap.has(groupKeys)) {
+          selectionState = true;
+          break;
         }
-        aggregationReducers.forEach((reducer, index) => {
-          const header = isSingleAggregationColumn ? `${keys[keys.length - 1]} total ` : `${reducer.name || reducer.id} total`;
-          const computedPivotColumn = prepareColumn({
-            columnGroup: columnGroupId,
-            header,
-            pivotAggregator: reducer,
-            pivotAggregatorIndex: index,
-            pivotColumn: true,
-            pivotTotalColumn: true,
-            pivotGroupKeys: keys,
-            pivotGroupKey: keys[keys.length - 1],
-            pivotByAtIndex: pivotByForColumn,
-            pivotIndex: keys.length - 1,
-            pivotBy,
-            defaultSortable: false,
-            valueFormatter: ({ rowInfo }) => {
-              var _a, _b;
-              if (!rowInfo.isGroupRow) {
-                return null;
-              }
-              return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
-            }
-          });
-          columns[`total:${reducer.id}:${keys.join("/")}`] = computedPivotColumn;
-        });
       }
     }
-    if (pivotTotalColumnPosition === "start" || pivotTotalColumnPosition === false) {
-      next == null ? void 0 : next();
+    if (selectionState === void 0) {
+      selectionState = this.defaultSelection;
     }
-  });
-  if (!pivotLength && pivotTotalColumnPosition === "end" || pivotGrandTotalColumnPosition === "end") {
-    addGrandTotalColumns();
+    return selectionState;
   }
-  const result = {
-    columns,
-    columnGroups
-  };
-  return result;
-}
-
-// src/utils/groupAndPivot/getGroupKeysForDataItem.ts
-function getGroupKeysForDataItem(data, groupBy) {
-  return groupBy.reduce((groupKeys, groupBy2) => {
-    const { field: groupByProperty, valueGetter, toKey: groupToKey } = groupBy2;
-    const value = groupByProperty ? data[groupByProperty] : valueGetter == null ? void 0 : valueGetter({ data, field: groupByProperty });
-    const key = (groupToKey || DEFAULT_TO_KEY)(
-      value,
-      data
+  isGroupRowPartlySelected(groupKeys) {
+    return this.getGroupRowSelectionState(groupKeys) === null;
+  }
+  isGroupRowSelected(groupKeys) {
+    return this.getGroupRowSelectionState(groupKeys) === true;
+  }
+  isGroupRowDeselected(groupKeys) {
+    return this.getGroupRowSelectionState(groupKeys) === false;
+  }
+  selectGroupRow(groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      keys.forEach((key) => {
+        if (this.defaultSelection === true) {
+          this.deselectedMap.delete([key]);
+        } else {
+          this._selectedMapSet(key);
+        }
+      });
+      this.xcache();
+      return;
+    }
+    const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys, true);
+    selectedKeys.forEach((groupKeys2) => {
+      this.selectedMap.delete(groupKeys2);
+    });
+    if (groupKeys.length === 1 && this.defaultSelection === true) {
+    } else {
+      this._selectedMapSet(groupKeys);
+    }
+    const deselectedKeys = this.deselectedMap.getKeysStartingWith(groupKeys);
+    deselectedKeys.forEach((groupKeys2) => {
+      this.deselectedMap.delete(groupKeys2);
+    });
+  }
+  deselectGroupRow(groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      keys.forEach((key) => {
+        if (this.defaultSelection === false) {
+          this.selectedMap.delete([key]);
+        } else {
+          this._deselectedMapSet(key);
+        }
+      });
+      this.xcache();
+      return;
+    }
+    const deselectedKeys = this.deselectedMap.getKeysStartingWith(
+      groupKeys,
+      true
     );
-    groupKeys.push(key);
-    return groupKeys;
-  }, []);
-}
-
-// src/components/InfiniteTable/api/getRowSelectionApi.ts
-function cloneRowSelection(rowSelection, stateOrGetDataSourceState) {
-  return new RowSelectionState(
-    rowSelection,
-    rowSelectionStateConfigGetter(stateOrGetDataSourceState)
-  );
-}
-function rowSelectionStateConfigGetter(stateOrStateGetter) {
-  return () => {
-    const state = typeof stateOrStateGetter === "function" ? stateOrStateGetter() : stateOrStateGetter;
-    return {
-      lazyLoad: !!state.lazyLoad,
-      toPrimaryKey: state.toPrimaryKey,
-      onlyUsePrimaryKeys: !state.useGroupKeysForMultiRowSelection,
-      groupBy: state.groupBy,
-      groupDeepMap: state.groupDeepMap,
-      indexer: state.indexer,
-      totalCount: state.unfilteredCount
-    };
-  };
-}
-function getRowSelectionApi(param) {
-  const {
-    // getComputed,
-    // getState,
-    getDataSourceState,
-    // componentActions,
-    dataSourceActions
-  } = param;
-  const rowSelectionApi = {
-    get allRowsSelected() {
-      return getDataSourceState().allRowsSelected;
-    },
-    selectAll() {
-      const { rowSelection, selectionMode } = getDataSourceState();
-      if (selectionMode !== "multi-row") {
-        throw "Selection mode is not multi-row";
+    deselectedKeys.forEach((groupKeys2) => {
+      this.deselectedMap.delete(groupKeys2);
+    });
+    if (groupKeys.length === 1 && this.defaultSelection === false) {
+    } else {
+      this._deselectedMapSet(groupKeys);
+    }
+    const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys);
+    selectedKeys.forEach((groupKeys2) => {
+      this.selectedMap.delete(groupKeys2);
+    });
+  }
+  setRowAsSelected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      if (this.defaultSelection) {
+        this.deselectedMap.delete([key]);
+      } else {
+        this._selectedMapSet(key);
       }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
+      this.xcache();
+      return;
+    }
+    groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
+    const finalKey = [...groupKeys, key];
+    this.deselectedMap.delete(finalKey);
+    this.xcache();
+    if (this.getGroupRowSelectionState(groupKeys) !== true) {
+      this._selectedMapSet(finalKey);
+      if (this.getGroupRowSelectionState(groupKeys) === true) {
+        this.selectGroupRow(groupKeys);
       }
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState)
-      );
-      rowSelectionState.selectAll();
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-    deselectAll() {
-      const { rowSelection, selectionMode } = getDataSourceState();
-      if (selectionMode !== "multi-row") {
-        throw "Selection mode is not multi-row";
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
-      }
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState)
-      );
-      rowSelectionState.deselectAll();
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-    isRowSelected(pk, groupKeys) {
-      const { rowSelection, selectionMode, indexer, groupBy } = getDataSourceState();
-      if (selectionMode === "single-row") {
-        return rowSelection === pk;
-      }
-      if (selectionMode !== "multi-row") {
-        throw "Selection mode is not multi-row or single-row";
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
-      }
-      if (!groupKeys) {
-        const data = indexer.getDataForPrimaryKey(pk);
-        groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
-      }
-      return rowSelection.isRowSelected(pk, groupKeys);
-    },
-    isRowDeselected(pk, groupKeys) {
-      return !this.isRowSelected(pk, groupKeys);
-    },
-    selectRow(pk, groupKeys) {
-      const { rowSelection, selectionMode, indexer, groupBy } = getDataSourceState();
-      if (selectionMode === "single-row") {
-        dataSourceActions.rowSelection = pk;
-        return;
-      }
-      if (selectionMode !== "multi-row") {
-        throw "Selection mode is not multi-row or single-row";
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
-      }
-      if (!groupKeys) {
-        const data = indexer.getDataForPrimaryKey(pk);
-        groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
-      }
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState)
-      );
-      rowSelectionState.selectRow(pk, groupKeys);
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-    deselectRow(pk, groupKeys) {
-      const { selectionMode, rowSelection, indexer, groupBy } = getDataSourceState();
-      if (selectionMode === "single-row") {
-        dataSourceActions.rowSelection = null;
-        return;
-      }
-      if (selectionMode !== "multi-row") {
-        throw "Selection mode is not multi-row or single-row";
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
-      }
-      if (selectionMode === "multi-row") {
-        if (!groupKeys) {
-          const data = indexer.getDataForPrimaryKey(pk);
-          groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
-        }
-        const rowSelectionState = new RowSelectionState(
-          rowSelection,
-          rowSelectionStateConfigGetter(getDataSourceState)
-        );
-        rowSelectionState.deselectRow(pk, groupKeys);
-        dataSourceActions.rowSelection = rowSelectionState;
-      }
-    },
-    toggleRowSelection(pk, groupKeys) {
-      if (this.isRowSelected(pk, groupKeys)) {
-        this.deselectRow(pk, groupKeys);
+    }
+  }
+  setRowAsDeselected(key, groupKeys) {
+    if (this.onlyUsePrimaryKeys) {
+      if (this.defaultSelection) {
+        this._deselectedMapSet(key);
       } else {
-        this.selectRow(pk, groupKeys);
-      }
-    },
-    selectGroupRow(groupKeys) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
-      if (selectionMode !== "multi-row") {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw "No grouping specified";
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
-      }
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState)
-      );
-      rowSelectionState.selectGroupRow(groupKeys);
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-    deselectGroupRow(groupKeys) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
-      if (selectionMode !== "multi-row") {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw "No grouping specified";
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
-      }
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState)
-      );
-      rowSelectionState.deselectGroupRow(groupKeys);
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-    toggleGroupRowSelection(groupKeys) {
-      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
-      if (selectionMode !== "multi-row") {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw "No grouping specified";
-      }
-      if (!(rowSelection instanceof RowSelectionState)) {
-        throw "Invalid row selection";
-      }
-      const rowSelectionState = new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(getDataSourceState)
-      );
-      rowSelectionState.toggleGroupRowSelection(groupKeys);
-      dataSourceActions.rowSelection = rowSelectionState;
-    },
-    getGroupRowSelectionState(groupKeys, rowSelection) {
-      const state = getDataSourceState();
-      const { selectionMode, groupBy } = state;
-      const rowSelectionState = rowSelection ? new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(state)
-      ) : state.rowSelection;
-      if (selectionMode !== "multi-row") {
-        throw 'Selection mode should be "multi-row"';
-      }
-      if (!groupBy) {
-        throw "No grouping specified";
-      }
-      if (!(rowSelectionState instanceof RowSelectionState)) {
-        throw "Invalid row selection";
+        this.selectedMap.delete([key]);
       }
-      return rowSelectionState.getGroupRowSelectionState(groupKeys);
-    },
-    getSelectedPrimaryKeys: (rowSelection) => {
-      const state = getDataSourceState();
-      const rowSelectionState = rowSelection ? new RowSelectionState(
-        rowSelection,
-        rowSelectionStateConfigGetter(state)
-      ) : state.rowSelection;
-      const selected = [];
-      if (state.lazyLoad) {
-        console.error(
-          `getSelectedPrimaryKeys  should not be called for lazy-loaded datasources as it wont return reliable results`
-        );
+      this.xcache();
+      return;
+    }
+    groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
+    const finalKey = [...groupKeys, key];
+    this.selectedMap.delete(finalKey);
+    this.xcache();
+    if (this.getGroupRowSelectionState(groupKeys) !== false) {
+      this._deselectedMapSet(finalKey);
+      if (this.getGroupRowSelectionState(groupKeys) === false) {
+        this.deselectGroupRow(groupKeys);
       }
-      state.originalDataArray.forEach((data) => {
-        const id = state.toPrimaryKey(data);
-        if (rowSelectionState.isRowSelected(id)) {
-          selected.push(id);
-        }
-      });
-      return selected;
     }
-  };
-  if (false) {
-    globalThis.rowSelectionApi = rowSelectionApi;
   }
-  return rowSelectionApi;
-}
-
-// src/components/DataSource/CellSelectionState.ts
-var debug3 = dbg("CellSelectionState");
-var WILDCARD = "*";
-var CellSelectionState = class {
-  constructor(clone) {
-    this.wildcard = WILDCARD;
-    this.cache = new DeepMap();
-    this.selectedRowsToColumns = /* @__PURE__ */ new Map();
-    this.selectedColumnsToRows = /* @__PURE__ */ new Map();
-    this.deselectedRowsToColumns = /* @__PURE__ */ new Map();
-    this.deselectedColumnsToRows = /* @__PURE__ */ new Map();
-    this.defaultSelection = false;
-    this.deselectAll = () => {
-      this.update({
-        defaultSelection: false,
-        selectedCells: []
-      });
-    };
-    this.selectAll = () => {
-      this.update({
-        defaultSelection: true,
-        deselectedCells: []
-      });
-    };
-    const stateObject = clone && clone instanceof Object.getPrototypeOf(this).constructor ? clone.getState() : clone;
-    if (stateObject) {
-      this.update(stateObject);
-    }
+  deselectRow(key, groupKeys) {
+    this.setRowSelected(key, false, groupKeys);
   }
-  selectCell(rowId, colId) {
-    this.setCellSelected(rowId, colId, true);
+  selectRow(key, groupKeys) {
+    this.setRowSelected(key, true, groupKeys);
   }
-  deselectCell(rowId, colId) {
-    this.setCellSelected(rowId, colId, false);
+  toggleGroupRowSelection(groupKeys) {
+    const groupRowSelectionState = this.getGroupRowSelectionState(groupKeys);
+    if (groupRowSelectionState === true) {
+      this.deselectGroupRow(groupKeys);
+    } else {
+      this.selectGroupRow(groupKeys);
+    }
   }
-  selectColumn(colId) {
-    this.setCellSelected(this.wildcard, colId, true);
+  toggleRowSelection(key, groupKeys) {
+    if (this.isRowSelected(key, groupKeys)) {
+      this.deselectRow(key, groupKeys);
+    } else {
+      this.selectRow(key, groupKeys);
+    }
   }
-  deselectColumn(colId) {
-    this.setCellSelected(this.wildcard, colId, false);
+  getSelectedCount() {
+    return this.getSelectionCountFor([]).selectedCount;
+  }
+  getDeselectedCount() {
+    return this.getSelectionCountFor([]).deselectedCount;
+  }
+  getSelectionCountFor(groupKeys = [], parentSelected) {
+    var _a, _b;
+    const cachedResult = this.selectionCountCache.get(groupKeys);
+    if (cachedResult != null) {
+      return cachedResult;
+    }
+    const groupByLength = this.getGroupByLength();
+    if (groupKeys.length > groupByLength) {
+      const result2 = this.isRowSelected(groupKeys) ? { selectedCount: 1, deselectedCount: 0 } : {
+        selectedCount: 0,
+        deselectedCount: 1
+      };
+      this.selectionCountCache.set(groupKeys, result2);
+      return result2;
+    }
+    if (groupByLength && this.onlyUsePrimaryKeys) {
+      const allKeys2 = this.getAllPrimaryKeysInsideGroup(groupKeys);
+      let selectedCount2 = 0;
+      let deselectedCount2 = 0;
+      allKeys2.forEach((key) => {
+        if (this.defaultSelection) {
+          if (this.deselectedMap.has([key])) {
+            deselectedCount2++;
+            return;
+          }
+          selectedCount2++;
+        } else {
+          if (this.selectedMap.has([key])) {
+            selectedCount2++;
+            return;
+          }
+          deselectedCount2++;
+        }
+      });
+      const result2 = {
+        selectedCount: selectedCount2,
+        deselectedCount: deselectedCount2
+      };
+      this.selectionCountCache.set(groupKeys, result2);
+      return result2;
+    }
+    parentSelected = parentSelected != null ? parentSelected : this.getGroupRowBooleanSelectionStateFromParent(groupKeys);
+    let allKeys = this.getGroupKeysDirectlyInsideGroup(groupKeys);
+    if (groupKeys.length === this.getGroupByLength()) {
+      const selectionState = this.selectedMap.has(groupKeys) ? true : this.deselectedMap.has(groupKeys) ? false : parentSelected;
+      const totalCount = this.getGroupCount(groupKeys);
+      let selectedCount2 = this.selectedMap.getKeysStartingWith(
+        groupKeys,
+        true,
+        1
+      ).length;
+      let deselectedCount2 = this.deselectedMap.getKeysStartingWith(
+        groupKeys,
+        true,
+        1
+      ).length;
+      const notSpecifiedCount = totalCount - (selectedCount2 + deselectedCount2);
+      const result2 = {
+        selectedCount: selectedCount2 + (selectionState ? notSpecifiedCount : 0),
+        deselectedCount: deselectedCount2 + (selectionState ? 0 : notSpecifiedCount)
+      };
+      this.selectionCountCache.set(groupKeys, result2);
+      return result2;
+    }
+    let selectedCount = 0;
+    let deselectedCount = 0;
+    if (this.getConfig().lazyLoad && !allKeys.length) {
+      const totalChildrenCount = ((_b = (_a = this.getConfig().groupDeepMap) == null ? void 0 : _a.get(groupKeys)) == null ? void 0 : _b.totalChildrenCount) || 0;
+      if (parentSelected) {
+        selectedCount = totalChildrenCount;
+        deselectedCount = this.deselectedMap.getAllChildrenSizeFor(groupKeys);
+        if (deselectedCount === totalChildrenCount) {
+          selectedCount = 0;
+        }
+      } else {
+        deselectedCount = totalChildrenCount;
+        selectedCount = this.selectedMap.getAllChildrenSizeFor(groupKeys);
+        if (selectedCount === totalChildrenCount) {
+          deselectedCount = 0;
+        }
+      }
+    }
+    allKeys.forEach((keys) => {
+      let isSelected = this.selectedMap.get(keys);
+      let isDeselected = this.deselectedMap.get(keys);
+      const selected = isSelected ? true : isDeselected ? false : parentSelected;
+      const { selectedCount: selCount, deselectedCount: deselCount } = this.getSelectionCountFor(keys, selected);
+      selectedCount += selCount;
+      deselectedCount += deselCount;
+    });
+    const result = {
+      selectedCount,
+      deselectedCount
+    };
+    this.selectionCountCache.set(groupKeys, result);
+    return result;
+  }
+};
+
+// src/components/DataSource/CellSelectionState.ts
+var debug3 = dbg("CellSelectionState");
+var WILDCARD = "*";
+var CellSelectionState = class {
+  constructor(clone) {
+    this.wildcard = WILDCARD;
+    this.cache = new DeepMap();
+    this.selectedRowsToColumns = /* @__PURE__ */ new Map();
+    this.selectedColumnsToRows = /* @__PURE__ */ new Map();
+    this.deselectedRowsToColumns = /* @__PURE__ */ new Map();
+    this.deselectedColumnsToRows = /* @__PURE__ */ new Map();
+    this.defaultSelection = false;
+    this.deselectAll = () => {
+      this.update({
+        defaultSelection: false,
+        selectedCells: []
+      });
+    };
+    this.selectAll = () => {
+      this.update({
+        defaultSelection: true,
+        deselectedCells: []
+      });
+    };
+    const stateObject = clone && clone instanceof Object.getPrototypeOf(this).constructor ? clone.getState() : clone;
+    if (stateObject) {
+      this.update(stateObject);
+    }
+  }
+  selectCell(rowId, colId) {
+    this.setCellSelected(rowId, colId, true);
+  }
+  deselectCell(rowId, colId) {
+    this.setCellSelected(rowId, colId, false);
+  }
+  selectColumn(colId) {
+    this.setCellSelected(this.wildcard, colId, true);
+  }
+  deselectColumn(colId) {
+    this.setCellSelected(this.wildcard, colId, false);
   }
   setCellSelected(rowId, colId, selected) {
     const wildcardRow = rowId === this.wildcard;
@@ -12531,493 +12146,1038 @@ var CellSelectionState = class {
   }
 };
 
-// src/components/DataSource/RowSelectionState.ts
-var RowSelectionState = class {
-  constructor(state, getConfig, _forTestingOnly) {
-    this.selectedRows = null;
-    this.deselectedRows = null;
-    this.defaultSelection = false;
-    this.selectedMap = new DeepMap();
-    this.deselectedMap = new DeepMap();
-    this.onlyUsePrimaryKeys = false;
-    // TODO make it easy to share the cache with another instance
-    this.selectionCache = new DeepMap();
-    this.selectionCountCache = new DeepMap();
-    this.mapSet = (name, key) => {
-      if (!Array.isArray(key)) {
-        if (this.onlyUsePrimaryKeys) {
-          key = [key];
-        } else {
-          key = [...this.getGroupKeysForPrimaryKey(key), key];
-        }
+// src/utils/logger.ts
+var log = debug("InfiniteTable");
+var COLOR_WARN_VALUE = `#eb9316`;
+var warnChannel = "Warn";
+var errorChannel = "Error";
+var infoChannel = "Info";
+var successChannel = "Success";
+var logChannel = "Logs";
+var logger = log.extend(logChannel);
+var infoLogger = logger.extend(infoChannel);
+var warnLogger = logger.extend(warnChannel);
+var errorLogger = logger.extend(errorChannel);
+var successLogger = logger.extend(successChannel);
+var logColorWarn = COLOR_WARN_VALUE;
+var warn = (message, logger3) => {
+  logger3 = logger3 ? logger3.extend(warnChannel) : warnLogger;
+  logger3(log.color(logColorWarn, message));
+};
+var doOnceFlags = new DeepMap();
+var doOnce = (func, ...keys) => {
+  if (doOnceFlags.has(keys)) {
+    return;
+  }
+  doOnceFlags.set(keys, true);
+  func();
+};
+var warnOnce = (message, key = message, logger3) => {
+  doOnce(() => warn(message, logger3), key, "warn");
+};
+
+// src/components/InfiniteTable/api/getRowSelectionApi.ts
+function cloneRowSelection(rowSelection, stateOrGetDataSourceState) {
+  return new RowSelectionState(
+    rowSelection,
+    rowSelectionStateConfigGetter(stateOrGetDataSourceState)
+  );
+}
+function rowSelectionStateConfigGetter(stateOrStateGetter) {
+  return () => {
+    const state = typeof stateOrStateGetter === "function" ? stateOrStateGetter() : stateOrStateGetter;
+    return {
+      lazyLoad: !!state.lazyLoad,
+      toPrimaryKey: state.toPrimaryKey,
+      onlyUsePrimaryKeys: !state.useGroupKeysForMultiRowSelection,
+      groupBy: state.groupBy,
+      groupDeepMap: state.groupDeepMap,
+      indexer: state.indexer,
+      totalCount: state.unfilteredCount
+    };
+  };
+}
+function getRowSelectionApi(param) {
+  const {
+    // getComputed,
+    // getState,
+    getDataSourceState,
+    // componentActions,
+    dataSourceActions
+  } = param;
+  const rowSelectionApi = {
+    get allRowsSelected() {
+      return getDataSourceState().allRowsSelected;
+    },
+    selectAll() {
+      const { rowSelection, selectionMode } = getDataSourceState();
+      if (selectionMode !== "multi-row") {
+        throw "Selection mode is not multi-row";
       }
-      this.xcache();
-      if (name === "selected") {
-        this.selectedMap.set(key, true);
-      } else {
-        this.deselectedMap.set(key, true);
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
       }
-    };
-    this._selectedMapSet = (key) => {
-      this.mapSet("selected", key);
-    };
-    this._deselectedMapSet = (key) => {
-      this.mapSet("deselected", key);
-    };
-    const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
-      //@ts-ignore
-      state.getState()
-    ) : state;
-    this.getConfig = getConfig;
-    this.onlyUsePrimaryKeys = getConfig().onlyUsePrimaryKeys;
-    if (_forTestingOnly) {
-      Object.assign(this, _forTestingOnly);
-    }
-    this.update(stateObject);
-  }
-  getGroupKeysForPrimaryKey(pk) {
-    const { indexer, groupBy } = this.getConfig();
-    const data = indexer.getDataForPrimaryKey(pk);
-    return data ? getGroupKeysForDataItem(data, groupBy) : [];
-  }
-  getGroupDeepMap() {
-    return this.getConfig().groupDeepMap;
-  }
-  getGroupCount(groupKeys) {
-    var _a;
-    if (groupKeys.length == 0) {
-      return this.getConfig().totalCount;
-    }
-    const groupDeepMap = this.getGroupDeepMap();
-    const deepMapValue = groupDeepMap == null ? void 0 : groupDeepMap.get(groupKeys);
-    if (!deepMapValue) {
-      return 0;
+      const rowSelectionState = new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(getDataSourceState)
+      );
+      rowSelectionState.selectAll();
+      dataSourceActions.rowSelection = rowSelectionState;
+    },
+    deselectAll() {
+      const { rowSelection, selectionMode } = getDataSourceState();
+      if (selectionMode !== "multi-row") {
+        throw "Selection mode is not multi-row";
+      }
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      const rowSelectionState = new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(getDataSourceState)
+      );
+      rowSelectionState.deselectAll();
+      dataSourceActions.rowSelection = rowSelectionState;
+    },
+    isRowSelected(pk, groupKeys) {
+      const { rowSelection, selectionMode, indexer, groupBy } = getDataSourceState();
+      if (selectionMode === "single-row") {
+        return rowSelection === pk;
+      }
+      if (selectionMode !== "multi-row") {
+        throw "Selection mode is not multi-row or single-row";
+      }
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      if (!groupKeys) {
+        const data = indexer.getDataForPrimaryKey(pk);
+        groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
+      }
+      return rowSelection.isRowSelected(pk, groupKeys);
+    },
+    isRowDeselected(pk, groupKeys) {
+      return !this.isRowSelected(pk, groupKeys);
+    },
+    selectRow(pk, groupKeys) {
+      const { rowSelection, selectionMode, indexer, groupBy } = getDataSourceState();
+      if (selectionMode === "single-row") {
+        dataSourceActions.rowSelection = pk;
+        return;
+      }
+      if (selectionMode !== "multi-row") {
+        throw "Selection mode is not multi-row or single-row";
+      }
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      if (!groupKeys) {
+        const data = indexer.getDataForPrimaryKey(pk);
+        groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
+      }
+      const rowSelectionState = new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(getDataSourceState)
+      );
+      rowSelectionState.selectRow(pk, groupKeys);
+      dataSourceActions.rowSelection = rowSelectionState;
+    },
+    deselectRow(pk, groupKeys) {
+      const { selectionMode, rowSelection, indexer, groupBy } = getDataSourceState();
+      if (selectionMode === "single-row") {
+        dataSourceActions.rowSelection = null;
+        return;
+      }
+      if (selectionMode !== "multi-row") {
+        throw "Selection mode is not multi-row or single-row";
+      }
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      if (selectionMode === "multi-row") {
+        if (!groupKeys) {
+          const data = indexer.getDataForPrimaryKey(pk);
+          groupKeys = data ? getGroupKeysForDataItem(data, groupBy) : [];
+        }
+        const rowSelectionState = new RowSelectionState(
+          rowSelection,
+          rowSelectionStateConfigGetter(getDataSourceState)
+        );
+        rowSelectionState.deselectRow(pk, groupKeys);
+        dataSourceActions.rowSelection = rowSelectionState;
+      }
+    },
+    toggleRowSelection(pk, groupKeys) {
+      if (this.isRowSelected(pk, groupKeys)) {
+        this.deselectRow(pk, groupKeys);
+      } else {
+        this.selectRow(pk, groupKeys);
+      }
+    },
+    selectGroupRow(groupKeys) {
+      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
+      if (selectionMode !== "multi-row") {
+        throw 'Selection mode should be "multi-row"';
+      }
+      if (!groupBy) {
+        throw "No grouping specified";
+      }
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      const rowSelectionState = new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(getDataSourceState)
+      );
+      rowSelectionState.selectGroupRow(groupKeys);
+      dataSourceActions.rowSelection = rowSelectionState;
+    },
+    deselectGroupRow(groupKeys) {
+      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
+      if (selectionMode !== "multi-row") {
+        throw 'Selection mode should be "multi-row"';
+      }
+      if (!groupBy) {
+        throw "No grouping specified";
+      }
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      const rowSelectionState = new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(getDataSourceState)
+      );
+      rowSelectionState.deselectGroupRow(groupKeys);
+      dataSourceActions.rowSelection = rowSelectionState;
+    },
+    toggleGroupRowSelection(groupKeys) {
+      const { selectionMode, rowSelection, groupBy } = getDataSourceState();
+      if (selectionMode !== "multi-row") {
+        throw 'Selection mode should be "multi-row"';
+      }
+      if (!groupBy) {
+        throw "No grouping specified";
+      }
+      if (!(rowSelection instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      const rowSelectionState = new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(getDataSourceState)
+      );
+      rowSelectionState.toggleGroupRowSelection(groupKeys);
+      dataSourceActions.rowSelection = rowSelectionState;
+    },
+    getGroupRowSelectionState(groupKeys, rowSelection) {
+      const state = getDataSourceState();
+      const { selectionMode, groupBy } = state;
+      const rowSelectionState = rowSelection ? new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(state)
+      ) : state.rowSelection;
+      if (selectionMode !== "multi-row") {
+        throw 'Selection mode should be "multi-row"';
+      }
+      if (!groupBy) {
+        throw "No grouping specified";
+      }
+      if (!(rowSelectionState instanceof RowSelectionState)) {
+        throw "Invalid row selection";
+      }
+      return rowSelectionState.getGroupRowSelectionState(groupKeys);
+    },
+    getSelectedPrimaryKeys: (rowSelection) => {
+      const state = getDataSourceState();
+      const rowSelectionState = rowSelection ? new RowSelectionState(
+        rowSelection,
+        rowSelectionStateConfigGetter(state)
+      ) : state.rowSelection;
+      const selected = [];
+      if (state.lazyLoad) {
+        console.error(
+          `getSelectedPrimaryKeys  should not be called for lazy-loaded datasources as it wont return reliable results`
+        );
+      }
+      state.originalDataArray.forEach((data) => {
+        const id = state.toPrimaryKey(data);
+        if (rowSelectionState.isRowSelected(id)) {
+          selected.push(id);
+        }
+      });
+      return selected;
     }
-    return (_a = deepMapValue.totalChildrenCount) != null ? _a : deepMapValue.items.length || 0;
-  }
-  getGroupKeysDirectlyInsideGroup(groupKeys) {
-    const { groupDeepMap } = this.getConfig();
-    return (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith(groupKeys, true, 1)) || [];
+  };
+  if (false) {
+    globalThis.rowSelectionApi = rowSelectionApi;
   }
-  getAllPrimaryKeysInsideGroup(groupKeys) {
-    const { groupDeepMap } = this.getConfig();
-    if (!groupKeys.length) {
-      const topLevelKeys = (groupDeepMap == null ? void 0 : groupDeepMap.getKeysStartingWith([], true, 1)) || [];
-      return topLevelKeys.map((groupKeys2) => this.getAllPrimaryKeysInsideGroup(groupKeys2)).flat();
+  return rowSelectionApi;
+}
+
+// src/components/utils/discardCallsWithEqualArg.ts
+var map = /* @__PURE__ */ new WeakMap();
+var getCompareDefault = (a) => a;
+function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
+  map.set(fn, {
+    lastCallTime: 0,
+    lastCallArg: null
+  });
+  const getCompare = getCompareObject != null ? getCompareObject : getCompareDefault;
+  return (arg) => {
+    const { lastCallTime, lastCallArg } = map.get(fn) || {
+      lastCallTime: 0,
+      lastCallArg: null
+    };
+    const now = Date.now();
+    const diff = now - lastCallTime;
+    const objectsEqual = shallowEqualObjects(
+      getCompare(lastCallArg),
+      getCompare(arg)
+    );
+    if (diff < timeframe && objectsEqual) {
+      return;
     }
-    const group2 = groupDeepMap == null ? void 0 : groupDeepMap.get(groupKeys);
-    return group2 ? group2.items.map(this.getConfig().toPrimaryKey) : [];
-  }
-  getGroupByLength() {
-    return this.getConfig().groupBy.length;
-  }
-  static from(rowSeleStateObject, getConfig, overrides) {
-    return new RowSelectionState(rowSeleStateObject, getConfig, overrides);
-  }
-  update(stateObject) {
-    var _a, _b;
-    this.selectedRows = stateObject.selectedRows || null;
-    this.deselectedRows = stateObject.deselectedRows || null;
-    this.selectedMap.clear();
-    this.deselectedMap.clear();
-    (_a = this.selectedRows) == null ? void 0 : _a.forEach(this._selectedMapSet);
-    (_b = this.deselectedRows) == null ? void 0 : _b.forEach(this._deselectedMapSet);
-    this.defaultSelection = stateObject.defaultSelection;
-    this.xcache();
-  }
-  xcache() {
-    this.selectionCache.clear();
-    this.selectionCountCache.clear();
-  }
-  getState() {
-    const normalize = (allKeys) => {
-      const groupByLength = this.getGroupByLength();
-      return allKeys.map((keys) => {
-        if (this.onlyUsePrimaryKeys) {
-          return keys[0];
-        }
-        return keys.length > groupByLength ? keys.pop() : keys;
-      });
+    map.set(fn, {
+      lastCallTime: now,
+      lastCallArg: arg
+    });
+    fn(arg);
+  };
+}
+
+// src/components/DataSource/Indexer.ts
+var Indexer = class {
+  constructor() {
+    this.primaryKeyToData = /* @__PURE__ */ new Map();
+    this.add = (primaryKey, data) => {
+      this.primaryKeyToData.set(primaryKey, data);
     };
-    const selectedRows = normalize(this.selectedMap.topDownKeys());
-    const deselectedRows = normalize(this.deselectedMap.topDownKeys());
-    return {
-      defaultSelection: this.defaultSelection,
-      selectedRows,
-      deselectedRows
+    this.clear = () => {
+      this.primaryKeyToData.clear();
     };
-  }
-  deselectAll() {
-    this.update({
-      defaultSelection: false,
-      selectedRows: [],
-      deselectedRows: []
-    });
-  }
-  selectAll() {
-    this.update({
-      defaultSelection: true,
-      deselectedRows: [],
-      selectedRows: []
-    });
-  }
-  isRowDefaultSelected() {
-    return this.defaultSelection === true;
-  }
-  isRowDefaultDeselected() {
-    return this.defaultSelection === false;
-  }
-  /**
-   *
-   * @param key the id of the row - if a row in a grouped datasource, this is the final row id, without the group keys
-   * @param groupKeys the keys of row parents, in order
-   * @returns Whether the row is selected or not.
-   */
-  isRowSelected(key, groupKeys) {
-    if (this.onlyUsePrimaryKeys) {
-      return this.defaultSelection ? !this.deselectedMap.has([key]) : this.selectedMap.has([key]);
-    }
-    groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
-    const finalKey = [...groupKeys, key];
-    const cachedResult = this.selectionCache.get(finalKey);
-    if (cachedResult !== void 0) {
-      return cachedResult;
-    }
-    const inSelected = this.selectedMap.has(finalKey);
-    const inDeselected = this.deselectedMap.has(finalKey);
-    if (inSelected) {
-      this.selectionCache.set(finalKey, true);
-      return true;
-    }
-    if (inDeselected) {
-      this.selectionCache.set(finalKey, false);
-      return false;
-    }
-    if (this.selectedMap.has(groupKeys)) {
-      this.selectionCache.set(finalKey, true);
-      return true;
-    }
-    if (this.deselectedMap.has(groupKeys)) {
-      this.selectionCache.set(finalKey, false);
-      return false;
-    }
-    groupKeys = [...groupKeys];
-    while (groupKeys.length) {
-      groupKeys.pop();
-      const inSelected2 = this.selectedMap.has(groupKeys);
-      const inDeselected2 = this.deselectedMap.has(groupKeys);
-      if (inSelected2) {
-        this.selectionCache.set(finalKey, true);
-        return true;
+    this.getDataForPrimaryKey = (primaryKey) => {
+      return this.primaryKeyToData.get(primaryKey);
+    };
+    this.indexArray = (arr, options) => {
+      const { cache, toPrimaryKey } = options;
+      if (cache && !cache.isEmpty()) {
+        arr = arr.concat();
       }
-      if (inDeselected2) {
-        this.selectionCache.set(finalKey, false);
-        return false;
+      if (!arr.length && cache) {
+        const cacheInfo = [...cache.getMutations().values()].flatMap((x) => x);
+        if (cacheInfo && cacheInfo.length) {
+          for (let cacheIndex = 0, cacheLength = cacheInfo.length; cacheIndex < cacheLength; cacheIndex++) {
+            const info = cacheInfo[cacheIndex];
+            if (info.type === "insert") {
+              const insertPK = toPrimaryKey(info.data);
+              this.add(insertPK, info.data);
+              arr.push(info.data);
+            }
+          }
+          cache == null ? void 0 : cache.removeInfo(void 0);
+        }
+      } else {
+        for (let i = 0; i < arr.length; i++) {
+          let item = arr[i];
+          let deleted = false;
+          if (item != null) {
+            const pk = toPrimaryKey(item);
+            const cacheInfo = cache == null ? void 0 : cache.getMutationsForPrimaryKey(pk);
+            if (cacheInfo && cacheInfo.length) {
+              for (let cacheIndex = 0, cacheLength = cacheInfo.length; cacheIndex < cacheLength; cacheIndex++) {
+                const info = cacheInfo[cacheIndex];
+                if (info.type === "delete" && !deleted) {
+                  this.primaryKeyToData.delete(pk);
+                  deleted = true;
+                  arr.splice(i, 1);
+                }
+                if (info.type === "update" && !deleted) {
+                  item = __spreadValues(__spreadValues({}, item), info.data);
+                  arr[i] = item;
+                }
+                if (info.type === "insert") {
+                  const insertPK = toPrimaryKey(info.data);
+                  this.add(insertPK, info.data);
+                  if (info.position === "before") {
+                    arr.splice(i, 0, info.data);
+                    i--;
+                  } else {
+                    arr.splice(i + 1, 0, info.data);
+                  }
+                }
+              }
+              cache == null ? void 0 : cache.removeInfo(pk);
+            }
+            if (!deleted) {
+              this.add(pk, item);
+            }
+          }
+        }
+      }
+      return arr;
+    };
+  }
+};
+
+// src/components/DataSource/privateHooks/useLoadData.ts
+var import_react35 = require("react");
+
+// src/components/hooks/useEffectWithChanges.ts
+var import_react34 = require("react");
+function useEffectWithChanges(fn, deps) {
+  const prevRef = (0, import_react34.useRef)({});
+  const oldValuesRef = (0, import_react34.useRef)({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = (0, import_react34.useRef)({});
+  const changes = changesRef.current;
+  const useEffectDeps = [];
+  for (const k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      if (deps[k] !== prevRef.current[k]) {
+        changes[k] = deps[k];
+        oldValues[k] = prevRef.current[k];
       }
+      useEffectDeps.push(deps[k]);
     }
-    this.selectionCache.set(finalKey, this.defaultSelection);
-    return this.defaultSelection;
   }
-  isRowDeselected(key, groupKeys) {
-    return !this.isRowSelected(key, groupKeys);
+  prevRef.current = deps;
+  (0, import_react34.useEffect)(() => {
+    const changes2 = changesRef.current;
+    let result = void 0;
+    if (Object.keys(changes2).length !== 0) {
+      result = fn(changes2, oldValues);
+    }
+    changesRef.current = {};
+    oldValuesRef.current = {};
+    return result;
+  }, useEffectDeps);
+}
+function useEffectWithObject(fn, deps) {
+  const useEffectDeps = [];
+  for (const k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      useEffectDeps.push(deps[k]);
+    }
   }
-  setRowSelected(key, selected, groupKeys) {
-    if (selected) {
-      this.setRowAsSelected(key, groupKeys);
+  (0, import_react34.useEffect)(fn, useEffectDeps);
+}
+
+// src/utils/composeFunctions.ts
+function composeFunctions(...fns) {
+  const f = (...args) => {
+    fns.forEach((fn) => {
+      if (typeof fn === "function") {
+        fn(...args);
+      }
+    });
+  };
+  return f;
+}
+
+// src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
+function prepareColumn(column) {
+  const { pivotByAtIndex: pivotByForColumn, pivotAggregator } = column;
+  if (pivotByForColumn == null ? void 0 : pivotByForColumn.column) {
+    if (typeof pivotByForColumn.column === "function") {
+      Object.assign(column, pivotByForColumn.column({ column }));
     } else {
-      this.setRowAsDeselected(key, groupKeys);
+      Object.assign(column, pivotByForColumn.column);
     }
   }
-  /**
-   * Returns if the selection state ('full','partial','none') for the current group
-   *
-   * The selection state will be full (true) if either of those are true:
-   *  * the group keys are specified as selected
-   *  * all the children are specified as selected
-   *
-   * The selection state will be partial (null) if either of those are true:
-   *  * the group keys are partially selected
-   *  * some of the children are specified as selected
-   *
-   *
-   * @param groupKeys the keys of the group row
-   * @param children leaf children that belong to the group
-   * @returns boolean
-   */
-  getGroupRowSelectionState(initialGroupKeys) {
-    const cachedResult = this.selectionCache.get(initialGroupKeys);
-    if (cachedResult !== void 0) {
-      return cachedResult;
+  if (pivotAggregator == null ? void 0 : pivotAggregator.pivotColumn) {
+    if (typeof pivotAggregator.pivotColumn === "function") {
+      Object.assign(column, pivotAggregator.pivotColumn({ column }));
+    } else {
+      Object.assign(column, pivotAggregator.pivotColumn);
     }
-    const { selectedCount, deselectedCount } = this.getSelectionCountFor(
-      initialGroupKeys,
-      this.onlyUsePrimaryKeys ? (
-        // there is no need for the state from the parent group
-        // when we are in this case, so don't do that
-        void 0
-      ) : this.getGroupRowBooleanSelectionStateFromParent(initialGroupKeys)
-    );
-    const result = selectedCount && deselectedCount ? null : selectedCount ? true : false;
-    this.selectionCache.set(initialGroupKeys, result);
-    return result;
   }
-  getGroupRowBooleanSelectionStateFromParent(initialGroupKeys) {
-    if (!initialGroupKeys.length) {
-      return this.defaultSelection;
+  return column;
+}
+function prepareColumnGroup(columnGroup) {
+  const { pivotByAtIndex: pivotByForColumnGroup } = columnGroup;
+  if (pivotByForColumnGroup == null ? void 0 : pivotByForColumnGroup.columnGroup) {
+    if (typeof pivotByForColumnGroup.columnGroup === "function") {
+      Object.assign(
+        columnGroup,
+        pivotByForColumnGroup.columnGroup({ columnGroup })
+      );
+    } else {
+      Object.assign(columnGroup, pivotByForColumnGroup.columnGroup);
     }
-    const groupKeys = [...initialGroupKeys];
-    const selfDeselected = this.deselectedMap.has(groupKeys);
-    const selfSelected = this.selectedMap.has(groupKeys);
-    let selectionState = selfSelected && !selfDeselected ? true : selfDeselected && !selfSelected ? false : void 0;
-    if (selectionState === void 0) {
-      while (groupKeys.length) {
-        groupKeys.pop();
-        if (this.deselectedMap.has(groupKeys)) {
-          selectionState = false;
-          break;
+  }
+  return columnGroup;
+}
+function getPivotColumnsAndColumnGroups({
+  deepMap,
+  pivotBy,
+  pivotTotalColumnPosition,
+  pivotGrandTotalColumnPosition,
+  reducers = {},
+  showSeparatePivotColumnForSingleAggregation = false
+}) {
+  const pivotLength = pivotBy.length;
+  const aggregationReducers = Object.keys(
+    reducers
+  ).map((key) => {
+    return __spreadProps(__spreadValues({}, reducers[key]), { id: key });
+  });
+  if (!aggregationReducers.length) {
+    showSeparatePivotColumnForSingleAggregation = true;
+    pivotGrandTotalColumnPosition = false;
+    pivotTotalColumnPosition = false;
+    aggregationReducers.push({
+      id: "__empty-aggregation-reducer__",
+      name: "-",
+      initialValue: null,
+      reducer: () => null
+    });
+  }
+  const columns = {};
+  const columnGroups = {};
+  const addGrandTotalColumns = once(function() {
+    aggregationReducers.forEach((reducer, index) => {
+      columns[`total:${reducer.id}`] = prepareColumn({
+        header: `${reducer.name || reducer.id} total`,
+        pivotBy,
+        pivotColumn: true,
+        pivotTotalColumn: true,
+        pivotAggregator: reducer,
+        pivotAggregatorIndex: index,
+        pivotGroupKeys: [],
+        pivotGroupKey: "",
+        pivotIndex: -1,
+        valueFormatter: ({ rowInfo }) => {
+          var _a;
+          return rowInfo.isGroupRow ? (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id] : null;
         }
-        if (this.selectedMap.has(groupKeys)) {
-          selectionState = true;
-          break;
+      });
+    });
+  });
+  if (!pivotLength && pivotTotalColumnPosition === "start" || pivotGrandTotalColumnPosition === "start") {
+    addGrandTotalColumns();
+  }
+  const isSingleAggregationColumn = !showSeparatePivotColumnForSingleAggregation && aggregationReducers.length === 1;
+  deepMap.visitDepthFirst((_value, keys, _indexInGroup, next) => {
+    keys = [...keys];
+    if (pivotTotalColumnPosition === "end") {
+      next == null ? void 0 : next();
+    }
+    if (keys.length === pivotLength) {
+      const pivotByForColumn = pivotBy[keys.length - 1];
+      const parentKeys = keys.slice(0, -1);
+      let parentColumnGroupId = parentKeys.join("/");
+      if (!isSingleAggregationColumn) {
+        const columnGroupId = parentColumnGroupId;
+        parentColumnGroupId = keys.join("/");
+        const pivotGroupKey = keys[keys.length - 1];
+        columnGroups[parentColumnGroupId] = prepareColumnGroup({
+          header: `${pivotGroupKey}`,
+          columnGroup: columnGroupId,
+          pivotBy,
+          pivotGroupKeys: keys,
+          pivotByAtIndex: pivotByForColumn,
+          pivotIndex: keys.length - 1,
+          pivotGroupKey
+        });
+      }
+      aggregationReducers.forEach((reducer, index) => {
+        const header = isSingleAggregationColumn ? `${keys[keys.length - 1]}` : reducer.name || reducer.id;
+        const computedPivotColumn = prepareColumn({
+          pivotBy,
+          pivotColumn: true,
+          pivotTotalColumn: false,
+          pivotAggregator: reducer,
+          pivotAggregatorIndex: index,
+          pivotGroupKeys: keys,
+          pivotGroupKey: keys[keys.length - 1],
+          pivotIndex: keys.length - 1,
+          pivotByAtIndex: pivotByForColumn,
+          defaultSortable: false,
+          columnGroup: parentColumnGroupId,
+          header,
+          valueFormatter: ({ rowInfo }) => {
+            var _a, _b;
+            if (!rowInfo.isGroupRow) {
+              return null;
+            }
+            return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
+          }
+        });
+        const columnId = `${reducer.id}:${keys.join("/")}`;
+        columns[columnId] = computedPivotColumn;
+      });
+    } else {
+      const colGroupId = keys.join("/");
+      const parentKeys = keys.slice(0, -1);
+      columnGroups[colGroupId] = prepareColumnGroup({
+        columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
+        header: `${keys[keys.length - 1]}`,
+        pivotBy,
+        pivotGroupKeys: keys,
+        pivotIndex: keys.length - 1,
+        pivotByAtIndex: pivotBy[keys.length - 1],
+        pivotGroupKey: keys[keys.length - 1]
+      });
+      if (pivotTotalColumnPosition !== false) {
+        const pivotByForColumn = pivotBy[keys.length - 1];
+        let columnGroupId = parentKeys.length ? parentKeys.join("/") : void 0;
+        if (!isSingleAggregationColumn) {
+          const parentGroupForTotalsGroup = columnGroupId;
+          columnGroupId = `total:${keys.join("/")}`;
+          columnGroups[columnGroupId] = prepareColumnGroup({
+            header: `${keys[keys.length - 1]} total`,
+            columnGroup: parentGroupForTotalsGroup,
+            pivotBy,
+            pivotTotalColumnGroup: true,
+            pivotGroupKeys: keys,
+            pivotIndex: keys.length - 1,
+            pivotByAtIndex: pivotByForColumn,
+            pivotGroupKey: keys[keys.length - 1]
+          });
         }
+        aggregationReducers.forEach((reducer, index) => {
+          const header = isSingleAggregationColumn ? `${keys[keys.length - 1]} total ` : `${reducer.name || reducer.id} total`;
+          const computedPivotColumn = prepareColumn({
+            columnGroup: columnGroupId,
+            header,
+            pivotAggregator: reducer,
+            pivotAggregatorIndex: index,
+            pivotColumn: true,
+            pivotTotalColumn: true,
+            pivotGroupKeys: keys,
+            pivotGroupKey: keys[keys.length - 1],
+            pivotByAtIndex: pivotByForColumn,
+            pivotIndex: keys.length - 1,
+            pivotBy,
+            defaultSortable: false,
+            valueFormatter: ({ rowInfo }) => {
+              var _a, _b;
+              if (!rowInfo.isGroupRow) {
+                return null;
+              }
+              return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
+            }
+          });
+          columns[`total:${reducer.id}:${keys.join("/")}`] = computedPivotColumn;
+        });
       }
     }
-    if (selectionState === void 0) {
-      selectionState = this.defaultSelection;
+    if (pivotTotalColumnPosition === "start" || pivotTotalColumnPosition === false) {
+      next == null ? void 0 : next();
     }
-    return selectionState;
-  }
-  isGroupRowPartlySelected(groupKeys) {
-    return this.getGroupRowSelectionState(groupKeys) === null;
+  });
+  if (!pivotLength && pivotTotalColumnPosition === "end" || pivotGrandTotalColumnPosition === "end") {
+    addGrandTotalColumns();
   }
-  isGroupRowSelected(groupKeys) {
-    return this.getGroupRowSelectionState(groupKeys) === true;
+  const result = {
+    columns,
+    columnGroups
+  };
+  return result;
+}
+
+// src/components/DataSource/DataSourceCache.ts
+var DataSourceCache = class {
+  constructor() {
+    this.affectedFields = /* @__PURE__ */ new Set();
+    this.allFieldsAffected = false;
+    this.primaryKeyToData = /* @__PURE__ */ new Map();
+    this.getAffectedFields = () => {
+      if (this.allFieldsAffected) {
+        return true;
+      }
+      return this.affectedFields;
+    };
+    this.delete = (primaryKey, originalData, metadata) => {
+      this.allFieldsAffected = true;
+      const pk = primaryKey;
+      const value = this.primaryKeyToData.get(pk) || [];
+      value.push({
+        type: "delete",
+        primaryKey,
+        originalData,
+        metadata
+      });
+      this.primaryKeyToData.set(pk, value);
+    };
+    this.insert = (primaryKey, data, position2, metadata) => {
+      const pk = primaryKey;
+      const value = this.primaryKeyToData.get(pk) || [];
+      this.allFieldsAffected = true;
+      value.push({
+        type: "insert",
+        primaryKey,
+        data,
+        position: position2,
+        originalData: null,
+        metadata
+      });
+      this.primaryKeyToData.set(pk, value);
+    };
+    this.update = (primaryKey, data, originalData, metadata) => {
+      if (!this.allFieldsAffected) {
+        const keys = Object.keys(data);
+        keys.forEach((key) => this.affectedFields.add(key));
+      }
+      const pk = primaryKey;
+      const value = this.primaryKeyToData.get(pk) || [];
+      value.push({
+        type: "update",
+        primaryKey,
+        data,
+        originalData,
+        metadata
+      });
+      this.primaryKeyToData.set(primaryKey, value);
+    };
+    this.clear = () => {
+      this.allFieldsAffected = false;
+      this.affectedFields.clear();
+      this.primaryKeyToData.clear();
+    };
+    this.isEmpty = () => {
+      return this.primaryKeyToData.size === 0;
+    };
+    this.removeInfo = (primaryKey) => {
+      this.primaryKeyToData.delete(primaryKey);
+    };
+    this.getMutationsForPrimaryKey = (primaryKey) => {
+      const data = this.primaryKeyToData.get(primaryKey);
+      return data;
+    };
+    this.getMutations = () => {
+      return new Map(this.primaryKeyToData);
+    };
   }
-  isGroupRowDeselected(groupKeys) {
-    return this.getGroupRowSelectionState(groupKeys) === false;
+  static clone(cache, { light = false } = {}) {
+    const clone = new DataSourceCache();
+    clone.allFieldsAffected = cache.allFieldsAffected;
+    clone.affectedFields = new Set(cache.affectedFields);
+    clone.primaryKeyToData = light ? cache.primaryKeyToData : new Map(
+      cache.primaryKeyToData
+    );
+    return clone;
   }
-  selectGroupRow(groupKeys) {
-    if (this.onlyUsePrimaryKeys) {
-      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
-      keys.forEach((key) => {
-        if (this.defaultSelection === true) {
-          this.deselectedMap.delete([key]);
+};
+
+// src/components/DataSource/dataSourceGetters.ts
+function getRowInfoAt(rowIndex, getState) {
+  return getState().dataArray[rowIndex];
+}
+function getRowInfoArray(getState) {
+  return getState().dataArray;
+}
+
+// src/components/DataSource/getDataSourceApi.ts
+function getDataSourceApi(param) {
+  return new DataSourceApiImpl(param);
+}
+var DataSourceApiImpl = class {
+  constructor(param) {
+    this.pendingOperations = [];
+    this.pendingPromise = null;
+    this.resolvePendingPromise = null;
+    this.toPrimaryKey = (data) => {
+      return this.getState().toPrimaryKey(data);
+    };
+    this.getRowInfoArray = () => {
+      return getRowInfoArray(this.getState);
+    };
+    this.getRowInfoByIndex = (index) => {
+      var _a;
+      return (_a = getRowInfoAt(index, this.getState)) != null ? _a : null;
+    };
+    this.getRowInfoByPrimaryKey = (id) => {
+      const index = this.getIndexByPrimaryKey(id);
+      return this.getRowInfoByIndex(index);
+    };
+    this.getIndexByPrimaryKey = (id) => {
+      var _a;
+      const map2 = this.getState().idToIndexMap;
+      return (_a = map2.get(id)) != null ? _a : -1;
+    };
+    this.getPrimaryKeyByIndex = (index) => {
+      const rowInfo = this.getRowInfoByIndex(index);
+      return rowInfo ? rowInfo.id : void 0;
+    };
+    this.getOriginalDataArray = () => {
+      return this.getState().originalDataArray;
+    };
+    this.getDataByPrimaryKey = (id) => {
+      var _a;
+      const { indexer } = this.getState();
+      return (_a = indexer.getDataForPrimaryKey(id)) != null ? _a : null;
+    };
+    this.updateData = (data, options) => {
+      return this.updateDataArray([data], options);
+    };
+    this.updateDataArray = (data, options) => {
+      const result = this.batchOperation({
+        type: "update",
+        array: data,
+        primaryKeys: data.map((d) => {
+          return this.toPrimaryKey(d);
+        }),
+        metadata: options == null ? void 0 : options.metadata
+      });
+      if (options == null ? void 0 : options.flush) {
+        this.commit();
+      }
+      return result;
+    };
+    this.removeDataByPrimaryKey = (id, options) => {
+      const result = this.batchOperation({
+        type: "delete",
+        primaryKeys: [id],
+        metadata: options == null ? void 0 : options.metadata
+      });
+      if (options == null ? void 0 : options.flush) {
+        this.commit();
+      }
+      return result;
+    };
+    this.removeData = (data, options) => {
+      const result = this.batchOperation({
+        type: "delete",
+        primaryKeys: [this.toPrimaryKey(data)],
+        metadata: options == null ? void 0 : options.metadata
+      });
+      if (options == null ? void 0 : options.flush) {
+        this.commit();
+      }
+      return result;
+    };
+    this.removeDataArrayByPrimaryKeys = (ids, options) => {
+      const result = this.batchOperation({
+        type: "delete",
+        primaryKeys: ids,
+        metadata: options == null ? void 0 : options.metadata
+      });
+      if (options == null ? void 0 : options.flush) {
+        this.commit();
+      }
+      return result;
+    };
+    this.removeDataArray = (data, options) => {
+      const result = this.batchOperation({
+        type: "delete",
+        primaryKeys: data.map(this.toPrimaryKey),
+        metadata: options == null ? void 0 : options.metadata
+      });
+      if (options == null ? void 0 : options.flush) {
+        this.commit();
+      }
+      return result;
+    };
+    this.addData = (data, options) => {
+      return this.addDataArray([data], options);
+    };
+    this.addDataArray = (data, options) => {
+      return this.insertDataArray(data, __spreadProps(__spreadValues({}, options), {
+        position: "end"
+      }));
+    };
+    this.insertData = (data, options) => {
+      return this.insertDataArray([data], options);
+    };
+    this.insertDataArray = (data, options) => {
+      let position2 = "before";
+      let primaryKey = void 0;
+      if (options.position === "before" || options.position === "after") {
+        position2 = options.position;
+        primaryKey = options.primaryKey;
+      } else {
+        const arr = this.getOriginalDataArray();
+        if (options.position === "start") {
+          position2 = "before";
+          primaryKey = !arr.length ? void 0 : this.toPrimaryKey(arr[0]);
         } else {
-          this._selectedMapSet(key);
+          position2 = "after";
+          primaryKey = !arr.length ? void 0 : this.toPrimaryKey(arr[arr.length - 1]);
         }
+      }
+      const result = this.batchOperation({
+        type: "insert",
+        array: data,
+        position: position2,
+        metadata: options == null ? void 0 : options.metadata,
+        primaryKey
       });
-      this.xcache();
+      if (options == null ? void 0 : options.flush) {
+        this.commit();
+      }
+      return result;
+    };
+    this.setSortInfo = (sortInfo) => {
+      const multiSort = this.getState().multiSort;
+      if (Array.isArray(sortInfo)) {
+        this.actions.sortInfo = sortInfo.length ? multiSort ? sortInfo : sortInfo[0] : null;
+        return;
+      }
+      this.actions.sortInfo = sortInfo;
       return;
-    }
-    const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys, true);
-    selectedKeys.forEach((groupKeys2) => {
-      this.selectedMap.delete(groupKeys2);
-    });
-    if (groupKeys.length === 1 && this.defaultSelection === true) {
-    } else {
-      this._selectedMapSet(groupKeys);
-    }
-    const deselectedKeys = this.deselectedMap.getKeysStartingWith(groupKeys);
-    deselectedKeys.forEach((groupKeys2) => {
-      this.deselectedMap.delete(groupKeys2);
-    });
+    };
+    this.getState = param.getState;
+    this.actions = param.actions;
   }
-  deselectGroupRow(groupKeys) {
-    if (this.onlyUsePrimaryKeys) {
-      const keys = this.getAllPrimaryKeysInsideGroup(groupKeys);
-      keys.forEach((key) => {
-        if (this.defaultSelection === false) {
-          this.selectedMap.delete([key]);
-        } else {
-          this._deselectedMapSet(key);
-        }
+  batchOperation(operation) {
+    if (!this.pendingPromise) {
+      this.pendingPromise = new Promise((resolve) => {
+        this.resolvePendingPromise = resolve;
+      });
+      raf(() => {
+        this.commit();
       });
-      this.xcache();
-      return;
-    }
-    const deselectedKeys = this.deselectedMap.getKeysStartingWith(
-      groupKeys,
-      true
-    );
-    deselectedKeys.forEach((groupKeys2) => {
-      this.deselectedMap.delete(groupKeys2);
-    });
-    if (groupKeys.length === 1 && this.defaultSelection === false) {
-    } else {
-      this._deselectedMapSet(groupKeys);
     }
-    const selectedKeys = this.selectedMap.getKeysStartingWith(groupKeys);
-    selectedKeys.forEach((groupKeys2) => {
-      this.selectedMap.delete(groupKeys2);
-    });
+    this.pendingOperations.push(operation);
+    return this.pendingPromise;
   }
-  setRowAsSelected(key, groupKeys) {
-    if (this.onlyUsePrimaryKeys) {
-      if (this.defaultSelection) {
-        this.deselectedMap.delete([key]);
-      } else {
-        this._selectedMapSet(key);
-      }
-      this.xcache();
-      return;
-    }
-    groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
-    const finalKey = [...groupKeys, key];
-    this.deselectedMap.delete(finalKey);
-    this.xcache();
-    if (this.getGroupRowSelectionState(groupKeys) !== true) {
-      this._selectedMapSet(finalKey);
-      if (this.getGroupRowSelectionState(groupKeys) === true) {
-        this.selectGroupRow(groupKeys);
-      }
-    }
+  batchOperations(operations) {
+    this.pendingOperations.push(...operations);
   }
-  setRowAsDeselected(key, groupKeys) {
-    if (this.onlyUsePrimaryKeys) {
-      if (this.defaultSelection) {
-        this._deselectedMapSet(key);
-      } else {
-        this.selectedMap.delete([key]);
-      }
-      this.xcache();
+  commitOperations(operations) {
+    if (!operations.length) {
       return;
     }
-    groupKeys = groupKeys || this.getGroupKeysForPrimaryKey(key);
-    const finalKey = [...groupKeys, key];
-    this.selectedMap.delete(finalKey);
-    this.xcache();
-    if (this.getGroupRowSelectionState(groupKeys) !== false) {
-      this._deselectedMapSet(finalKey);
-      if (this.getGroupRowSelectionState(groupKeys) === false) {
-        this.deselectGroupRow(groupKeys);
+    const currentCache = this.getState().cache;
+    let cache = currentCache ? DataSourceCache.clone(currentCache, { light: true }) : new DataSourceCache();
+    operations.forEach((operation) => {
+      switch (operation.type) {
+        case "update":
+          operation.array.forEach((data, index) => {
+            const key = operation.primaryKeys[index];
+            const rowInfo = this.getRowInfoByPrimaryKey(key);
+            if (rowInfo && !rowInfo.isGroupRow) {
+              cache.update(
+                operation.primaryKeys[index],
+                data,
+                rowInfo.data,
+                operation.metadata
+              );
+            }
+          });
+          break;
+        case "delete":
+          operation.primaryKeys.forEach((key) => {
+            const rowInfo = this.getRowInfoByPrimaryKey(key);
+            if (rowInfo && !rowInfo.isGroupRow) {
+              cache.delete(key, rowInfo.data, operation.metadata);
+            }
+          });
+          break;
+        case "insert":
+          let pk = operation.primaryKey;
+          let position2 = operation.position;
+          operation.array.forEach((data) => {
+            cache.insert(pk, data, position2, operation.metadata);
+            pk = this.toPrimaryKey(data);
+            position2 = "after";
+          });
+          break;
       }
-    }
-  }
-  deselectRow(key, groupKeys) {
-    this.setRowSelected(key, false, groupKeys);
-  }
-  selectRow(key, groupKeys) {
-    this.setRowSelected(key, true, groupKeys);
-  }
-  toggleGroupRowSelection(groupKeys) {
-    const groupRowSelectionState = this.getGroupRowSelectionState(groupKeys);
-    if (groupRowSelectionState === true) {
-      this.deselectGroupRow(groupKeys);
-    } else {
-      this.selectGroupRow(groupKeys);
-    }
+    });
+    this.actions.cache = cache;
   }
-  toggleRowSelection(key, groupKeys) {
-    if (this.isRowSelected(key, groupKeys)) {
-      this.deselectRow(key, groupKeys);
-    } else {
-      this.selectRow(key, groupKeys);
+  commit() {
+    this.commitOperations(this.pendingOperations);
+    this.pendingOperations.length = 0;
+    if (this.pendingPromise && this.resolvePendingPromise) {
+      const resolve = this.resolvePendingPromise;
+      requestAnimationFrame(() => {
+        resolve(true);
+      });
+      this.pendingPromise = null;
+      this.resolvePendingPromise = null;
     }
   }
-  getSelectedCount() {
-    return this.getSelectionCountFor([]).selectedCount;
-  }
-  getDeselectedCount() {
-    return this.getSelectionCountFor([]).deselectedCount;
-  }
-  getSelectionCountFor(groupKeys = [], parentSelected) {
-    var _a, _b;
-    const cachedResult = this.selectionCountCache.get(groupKeys);
-    if (cachedResult != null) {
-      return cachedResult;
-    }
-    const groupByLength = this.getGroupByLength();
-    if (groupKeys.length > groupByLength) {
-      const result2 = this.isRowSelected(groupKeys) ? { selectedCount: 1, deselectedCount: 0 } : {
-        selectedCount: 0,
-        deselectedCount: 1
-      };
-      this.selectionCountCache.set(groupKeys, result2);
-      return result2;
-    }
-    if (groupByLength && this.onlyUsePrimaryKeys) {
-      const allKeys2 = this.getAllPrimaryKeysInsideGroup(groupKeys);
-      let selectedCount2 = 0;
-      let deselectedCount2 = 0;
-      allKeys2.forEach((key) => {
-        if (this.defaultSelection) {
-          if (this.deselectedMap.has([key])) {
-            deselectedCount2++;
-            return;
-          }
-          selectedCount2++;
-        } else {
-          if (this.selectedMap.has([key])) {
-            selectedCount2++;
-            return;
+};
+function getCacheAffectedParts(state) {
+  const cache = state.cache;
+  if (!cache) {
+    return {
+      sortInfo: false,
+      groupBy: false,
+      filterValue: false,
+      aggregationReducers: false
+    };
+  }
+  let sortInfoAffected = false;
+  let groupByAffected = false;
+  let filterAffected = false;
+  let aggregationsAffected = false;
+  const keys = cache.getAffectedFields();
+  const { sortInfo, groupBy, filterValue, aggregationReducers } = state;
+  if (sortInfo && sortInfo.length) {
+    if (keys === true) {
+      sortInfoAffected = true;
+    } else {
+      for (const sort of sortInfo) {
+        let field = sort.field;
+        if (field) {
+          field = Array.isArray(field) ? field : [field];
+          sortInfoAffected = field.reduce((result, f) => {
+            return result || typeof f !== "function" ? keys.has(f) : false;
+          }, false);
+          if (sortInfoAffected) {
+            break;
           }
-          deselectedCount2++;
         }
-      });
-      const result2 = {
-        selectedCount: selectedCount2,
-        deselectedCount: deselectedCount2
-      };
-      this.selectionCountCache.set(groupKeys, result2);
-      return result2;
+      }
     }
-    parentSelected = parentSelected != null ? parentSelected : this.getGroupRowBooleanSelectionStateFromParent(groupKeys);
-    let allKeys = this.getGroupKeysDirectlyInsideGroup(groupKeys);
-    if (groupKeys.length === this.getGroupByLength()) {
-      const selectionState = this.selectedMap.has(groupKeys) ? true : this.deselectedMap.has(groupKeys) ? false : parentSelected;
-      const totalCount = this.getGroupCount(groupKeys);
-      let selectedCount2 = this.selectedMap.getKeysStartingWith(
-        groupKeys,
-        true,
-        1
-      ).length;
-      let deselectedCount2 = this.deselectedMap.getKeysStartingWith(
-        groupKeys,
-        true,
-        1
-      ).length;
-      const notSpecifiedCount = totalCount - (selectedCount2 + deselectedCount2);
-      const result2 = {
-        selectedCount: selectedCount2 + (selectionState ? notSpecifiedCount : 0),
-        deselectedCount: deselectedCount2 + (selectionState ? 0 : notSpecifiedCount)
-      };
-      this.selectionCountCache.set(groupKeys, result2);
-      return result2;
+  }
+  if (groupBy && groupBy.length) {
+    if (keys === true) {
+      groupByAffected = true;
+    } else {
+      for (const group2 of groupBy) {
+        if (group2.field && keys.has(group2.field)) {
+          groupByAffected = true;
+          break;
+        }
+      }
     }
-    let selectedCount = 0;
-    let deselectedCount = 0;
-    if (this.getConfig().lazyLoad && !allKeys.length) {
-      const totalChildrenCount = ((_b = (_a = this.getConfig().groupDeepMap) == null ? void 0 : _a.get(groupKeys)) == null ? void 0 : _b.totalChildrenCount) || 0;
-      if (parentSelected) {
-        selectedCount = totalChildrenCount;
-        deselectedCount = this.deselectedMap.getAllChildrenSizeFor(groupKeys);
-        if (deselectedCount === totalChildrenCount) {
-          selectedCount = 0;
+  }
+  if (filterValue && filterValue.length) {
+    if (keys === true) {
+      filterAffected = true;
+    } else {
+      for (const filter of filterValue) {
+        if (filter.id) {
+          filterAffected = true;
+          break;
         }
-      } else {
-        deselectedCount = totalChildrenCount;
-        selectedCount = this.selectedMap.getAllChildrenSizeFor(groupKeys);
-        if (selectedCount === totalChildrenCount) {
-          deselectedCount = 0;
+        if (filter.field && keys.has(filter.field)) {
+          filterAffected = true;
+          break;
         }
       }
     }
-    allKeys.forEach((keys) => {
-      let isSelected = this.selectedMap.get(keys);
-      let isDeselected = this.deselectedMap.get(keys);
-      const selected = isSelected ? true : isDeselected ? false : parentSelected;
-      const { selectedCount: selCount, deselectedCount: deselCount } = this.getSelectionCountFor(keys, selected);
-      selectedCount += selCount;
-      deselectedCount += deselCount;
-    });
-    const result = {
-      selectedCount,
-      deselectedCount
-    };
-    this.selectionCountCache.set(groupKeys, result);
-    return result;
   }
-};
+  if (aggregationReducers && Object.keys(aggregationReducers).length) {
+    if (keys === true) {
+      aggregationsAffected = true;
+    } else {
+      for (const key in aggregationReducers)
+        if (aggregationReducers.hasOwnProperty(key)) {
+          const reducer = aggregationReducers[key];
+          if (!reducer.field) {
+            aggregationsAffected = true;
+            break;
+          } else {
+            if (keys.has(reducer.field)) {
+              aggregationsAffected = true;
+              break;
+            }
+          }
+        }
+    }
+  }
+  return {
+    sortInfo: sortInfoAffected,
+    groupBy: groupByAffected,
+    filterValue: filterAffected,
+    aggregationReducers: aggregationsAffected
+  };
+}
 
 // src/components/DataSource/state/initRowInfoReducers.ts
 function initRowInfoReducers(reducers) {
@@ -13196,11 +13356,7 @@ function concludeReducer(params) {
     "originalDataArray",
     "originalLazyGroupDataChangeDetect"
   ]);
-  const dataSourceChange = previousState && state.data !== previousState.data;
-  let lazyLoadGroupDataChange = state.lazyLoad && previousState && (previousState.groupBy !== state.groupBy || previousState.sortInfo !== state.sortInfo);
-  if (dataSourceChange) {
-    lazyLoadGroupDataChange = true;
-  }
+  const lazyLoadGroupDataChange = false;
   if (lazyLoadGroupDataChange) {
     state.originalLazyGroupData = new DeepMap();
     originalDataArrayChanged = true;
@@ -13629,7 +13785,7 @@ function loadData(data, componentState, actions, overrides, masterContext) {
     //@ts-ignore
     typeof data === "object" && typeof data.then === "function"
   );
-  if (dataIsPromise && !componentState.lazyLoad) {
+  if (dataIsPromise && (!componentState.lazyLoad || componentState.lazyLoad && !append)) {
     actions.loading = true;
   }
   return Promise.resolve(data).then((dataParam) => {
@@ -13738,7 +13894,7 @@ function loadData(data, componentState, actions, overrides, masterContext) {
     if (!skipAssign) {
       actions.originalDataArray = append ? componentState.originalDataArray.concat(dataArray) : dataArray;
     }
-    if (dataIsPromise && !componentState.lazyLoad) {
+    if (dataIsPromise && (!componentState.lazyLoad || componentState.lazyLoad && !append)) {
       actions.loading = false;
     }
   });
@@ -13767,12 +13923,12 @@ function getDetailReady(masterContext, getDataSourceState) {
     isDetailReady
   };
 }
-function useLoadData() {
+function useLoadData(options) {
   const {
     getComponentState,
     componentActions: actions,
     componentState
-  } = useComponentState();
+  } = options;
   const {
     data,
     dataArray,
@@ -13859,8 +14015,16 @@ function useLoadData() {
     cursorId: livePagination ? stateCursorId : null
   };
   const initialRef = (0, import_react35.useRef)(true);
-  useLazyLoadRange();
+  useLazyLoadRange(options, {
+    sortInfo,
+    groupBy,
+    pivotBy,
+    filterValue,
+    refetchKey,
+    cursorId: livePagination ? stateCursorId : null
+  });
   const getMasterContext = useLatest(useMasterDetailContext());
+  const dataChangeTimestampsRef = (0, import_react35.useRef)([]);
   useEffectWithChanges(
     () => {
       const componentState2 = getComponentState();
@@ -13872,6 +14036,20 @@ function useLoadData() {
       if (isDetail && !isDetailReady) {
         return;
       }
+      const now = Date.now();
+      const timestamps = dataChangeTimestampsRef.current;
+      if (timestamps.length >= 10) {
+        timestamps.splice(0, 1);
+      }
+      timestamps.push(now);
+      const timeDiff = now - timestamps[0];
+      if (timeDiff < 200 && timestamps.length >= 10) {
+        console.warn(
+          `The "data" prop of your DataSource seems to be updating too frequently.
+Make sure you don't pass a new reference on every render. ERROR_CODE = DS001
+See http://infinite-table.com/docs/reference/error-codes#DS001 for more info.`
+        );
+      }
       if (typeof componentState2.data !== "function") {
         loadData(
           componentState2.data,
@@ -13930,12 +14108,12 @@ function useLoadData() {
     }
   }, depsObject);
 }
-function useLazyLoadRange() {
+function useLazyLoadRange(options, dependencies) {
   const {
     getComponentState,
     componentActions: actions,
     componentState
-  } = useComponentState();
+  } = options;
   (0, import_react35.useEffect)(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
@@ -13949,7 +14127,8 @@ function useLazyLoadRange() {
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = (0, import_react35.useRef)(null);
-  const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
+  const loadRange = (renderRange, options2, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
+    var _a;
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
     if (!renderRange) {
@@ -13971,7 +14150,8 @@ function useLazyLoadRange() {
         endIndex,
         lazyLoadBatchSize: lazyLoadBatchSize2,
         componentState: componentState2,
-        componentActions: actions
+        componentActions: actions,
+        dismissLoadedRows: (_a = options2 == null ? void 0 : options2.dismissLoadedRows) != null ? _a : false
       },
       cache
     );
@@ -13983,8 +14163,16 @@ function useLazyLoadRange() {
   useEffectWithChanges(
     (changes) => {
       if (lazyLoad) {
-        if (changes.originalLazyGroupDataChangeDetect || changes.groupRowsState) {
-          loadRange(notifyRenderRangeChange.get());
+        if (changes.sortInfo || changes.filterValue || changes.groupBy || changes.pivotBy || changes.refetchKey || changes.cursorId) {
+          getComponentState().lazyLoadCacheOfLoadedBatches.clear();
+          getComponentState().originalLazyGroupData.clear();
+          loadRange(notifyRenderRangeChange.get(), {
+            dismissLoadedRows: true
+          });
+        } else {
+          if (changes.originalLazyGroupDataChangeDetect || changes.groupRowsState) {
+            loadRange(notifyRenderRangeChange.get());
+          }
         }
         return notifyRenderRangeChange.onChange(
           (renderRange) => {
@@ -13996,6 +14184,12 @@ function useLazyLoadRange() {
       return;
     },
     {
+      sortInfo: dependencies.sortInfo,
+      filterValue: dependencies.filterValue,
+      groupBy: dependencies.groupBy,
+      pivotBy: dependencies.pivotBy,
+      refetchKey: dependencies.refetchKey,
+      cursorId: dependencies.cursorId,
       lazyLoadBatchSize,
       lazyLoad,
       originalLazyGroupDataChangeDetect,
@@ -14014,13 +14208,15 @@ function lazyLoadRange(options, cache) {
     endIndex,
     lazyLoadBatchSize,
     componentState,
-    componentActions
+    componentActions,
+    dismissLoadedRows
   } = options;
   const { dataArray } = componentState;
-  const isRowLoaded = (index) => {
+  const isRowLoaded = dismissLoadedRows ? () => false : (index) => {
     const rowInfo = dataArray[index];
     return rowInfo.data != null;
   };
+  const append = !dismissLoadedRows;
   const perGroupFnCalls = new DeepMap();
   const rootGroupKeys = ["_______xxx______"];
   for (let i = startIndex; i <= endIndex; i++) {
@@ -14039,7 +14235,8 @@ function lazyLoadRange(options, cache) {
       const currentFnCall = {
         lazyLoadStartIndex: 0,
         lazyLoadBatchSize,
-        groupKeys: rowInfo.groupKeys
+        groupKeys: rowInfo.groupKeys,
+        append
       };
       const cacheKeys2 = rowInfo.groupKeys;
       let cachedFnCalls = perGroupFnCalls.get(cacheKeys2);
@@ -14069,7 +14266,8 @@ function lazyLoadRange(options, cache) {
       const currentFnCall = {
         lazyLoadStartIndex: batchStartIndexInGroup,
         lazyLoadBatchSize,
-        groupKeys: theGroupKeys
+        groupKeys: theGroupKeys,
+        append
       };
       if (!cachedFnCalls[batchStartRowId]) {
         cachedFnCalls[batchStartRowId] = currentFnCall;
@@ -14077,143 +14275,23 @@ function lazyLoadRange(options, cache) {
       if (shouldSetFnCalls) {
         perGroupFnCalls.set(cacheKeys, cachedFnCalls);
       }
-    }
-  }
-  const initialPromise = Promise.resolve(true);
-  const allFnCalls = [];
-  perGroupFnCalls.topDownValues().forEach((record) => {
-    allFnCalls.push(...Object.values(record));
-  });
-  allFnCalls.reduce((promise, fnCall) => {
-    const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
-    if (cache && cache.has(cacheKey)) {
-      return promise;
-    }
-    cache == null ? void 0 : cache.set(cacheKey, true);
-    const args = [componentState.data, componentState, componentActions, fnCall];
-    return promise.then(() => getRafPromise()).then(() => loadData(...args));
-  }, initialPromise);
-}
-
-// src/utils/logger.ts
-var log = debug("InfiniteTable");
-var COLOR_WARN_VALUE = `#eb9316`;
-var warnChannel = "Warn";
-var errorChannel = "Error";
-var infoChannel = "Info";
-var successChannel = "Success";
-var logChannel = "Logs";
-var logger = log.extend(logChannel);
-var infoLogger = logger.extend(infoChannel);
-var warnLogger = logger.extend(warnChannel);
-var errorLogger = logger.extend(errorChannel);
-var successLogger = logger.extend(successChannel);
-var logColorWarn = COLOR_WARN_VALUE;
-var warn = (message, logger2) => {
-  logger2 = logger2 ? logger2.extend(warnChannel) : warnLogger;
-  logger2(log.color(logColorWarn, message));
-};
-var doOnceFlags = new DeepMap();
-var doOnce = (func, ...keys) => {
-  if (doOnceFlags.has(keys)) {
-    return;
-  }
-  doOnceFlags.set(keys, true);
-  func();
-};
-var warnOnce = (message, key = message, logger2) => {
-  doOnce(() => warn(message, logger2), key, "warn");
-};
-
-// src/components/utils/discardCallsWithEqualArg.ts
-var map = /* @__PURE__ */ new WeakMap();
-var getCompareDefault = (a) => a;
-function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject) {
-  map.set(fn, {
-    lastCallTime: 0,
-    lastCallArg: null
-  });
-  const getCompare = getCompareObject != null ? getCompareObject : getCompareDefault;
-  return (arg) => {
-    const { lastCallTime, lastCallArg } = map.get(fn) || {
-      lastCallTime: 0,
-      lastCallArg: null
-    };
-    const now = Date.now();
-    const diff = now - lastCallTime;
-    const objectsEqual = shallowEqualObjects(
-      getCompare(lastCallArg),
-      getCompare(arg)
-    );
-    if (diff < timeframe && objectsEqual) {
-      return;
-    }
-    map.set(fn, {
-      lastCallTime: now,
-      lastCallArg: arg
-    });
-    fn(arg);
-  };
-}
-
-// src/components/DataSource/Indexer.ts
-var Indexer = class {
-  constructor() {
-    this.primaryKeyToData = /* @__PURE__ */ new Map();
-    this.add = (primaryKey, data) => {
-      this.primaryKeyToData.set(primaryKey, data);
-    };
-    this.clear = () => {
-      this.primaryKeyToData.clear();
-    };
-    this.getDataForPrimaryKey = (primaryKey) => {
-      return this.primaryKeyToData.get(primaryKey);
-    };
-    this.indexArray = (arr, options) => {
-      const { cache, toPrimaryKey } = options;
-      if (cache && !cache.isEmpty()) {
-        arr = arr.concat();
-      }
-      for (let i = 0; i < arr.length; i++) {
-        let item = arr[i];
-        let deleted = false;
-        if (item != null) {
-          const pk = toPrimaryKey(item);
-          const cacheInfo = cache == null ? void 0 : cache.getMutationsForPrimaryKey(pk);
-          if (cacheInfo && cacheInfo.length) {
-            for (let cacheIndex = 0, cacheLength = cacheInfo.length; cacheIndex < cacheLength; cacheIndex++) {
-              const info = cacheInfo[cacheIndex];
-              if (info.type === "delete" && !deleted) {
-                this.primaryKeyToData.delete(pk);
-                deleted = true;
-                arr.splice(i, 1);
-              }
-              if (info.type === "update" && !deleted) {
-                item = __spreadValues(__spreadValues({}, item), info.data);
-                arr[i] = item;
-              }
-              if (info.type === "insert") {
-                const insertPK = toPrimaryKey(info.data);
-                this.add(insertPK, info.data);
-                if (info.position === "before") {
-                  arr.splice(i, 0, info.data);
-                  i--;
-                } else {
-                  arr.splice(i + 1, 0, info.data);
-                }
-              }
-            }
-            cache == null ? void 0 : cache.removeInfo(pk);
-          }
-          if (!deleted) {
-            this.add(pk, item);
-          }
-        }
-      }
-      return arr;
-    };
+    }
   }
-};
+  const initialPromise = Promise.resolve(true);
+  const allFnCalls = [];
+  perGroupFnCalls.topDownValues().forEach((record) => {
+    allFnCalls.push(...Object.values(record));
+  });
+  allFnCalls.reduce((promise, fnCall) => {
+    const cacheKey = [...fnCall.groupKeys, fnCall.lazyLoadStartIndex];
+    if (cache && cache.has(cacheKey)) {
+      return promise;
+    }
+    cache == null ? void 0 : cache.set(cacheKey, true);
+    const args = [componentState.data, componentState, componentActions, fnCall];
+    return promise.then(() => getRafPromise()).then(() => loadData(...args));
+  }, initialPromise);
+}
 
 // src/components/DataSource/state/normalizeSortInfo.ts
 var EMPTY_ARRAY = Object.freeze(
@@ -14698,6 +14776,102 @@ function getDataSourceStateRestoreForDetails(state) {
   };
 }
 
+// src/components/DataSource/privateHooks/useDataSource.tsx
+var import_react36 = __toESM(require("react"));
+function useDataSourceInternal(props) {
+  const masterContext = useMasterDetailContext();
+  const getDataSourceMasterContext = useLatest(masterContext);
+  const isDetail = !!masterContext;
+  const key = isDetail ? masterContext.masterRowInfo.id : "master";
+  const { contextValue: managedContextValue, ContextComponent } = useManagedDataSource(props);
+  const { componentActions, componentState, assignState } = managedContextValue;
+  componentState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
+  const getState = useLatest(componentState);
+  const [api] = (0, import_react36.useState)(
+    () => getDataSourceApi({ getState, actions: componentActions })
+  );
+  const contextValue = {
+    componentState,
+    componentActions,
+    getDataSourceMasterContext,
+    getState,
+    assignState,
+    api
+  };
+  const getLatestManagedContextValue = useLatest(managedContextValue);
+  const getLatestContextValue = useLatest(contextValue);
+  const DataSourceContext = getDataSourceContext();
+  const DataSource2 = (0, import_react36.useCallback)(
+    ({ children }) => {
+      if (typeof children === "function") {
+        children = children(getState());
+      }
+      return /* @__PURE__ */ import_react36.default.createElement(
+        ContextComponent.Provider,
+        {
+          key,
+          value: getLatestManagedContextValue()
+        },
+        /* @__PURE__ */ import_react36.default.createElement(DataSourceContext.Provider, { value: getLatestContextValue() }, children)
+      );
+    },
+    [ContextComponent, isDetail, key]
+  );
+  (0, import_react36.useLayoutEffect)(() => {
+    if (masterContext) {
+      masterContext.registerDetail(contextValue);
+    }
+  }, []);
+  (0, import_react36.useLayoutEffect)(() => {
+    return () => {
+      const state = getState();
+      state.onCleanup(state);
+    };
+  }, []);
+  if (false) {
+    globalThis.getDataSourceState = getState;
+    globalThis.dataSourceActions = componentActions;
+    globalThis.dataSourceApi = api;
+  }
+  if (false) {
+    globalThis.dataSources = globalThis.dataSources || {};
+    globalThis["dataSources"][componentState.debugId] = {
+      getState,
+      actions: componentActions,
+      api
+    };
+  }
+  useLoadData({
+    componentState,
+    componentActions,
+    getComponentState: getState
+  });
+  (0, import_react36.useEffect)(() => {
+    var _a;
+    (_a = componentState.onDataArrayChange) == null ? void 0 : _a.call(
+      componentState,
+      componentState.originalDataArray,
+      componentState.originalDataArrayChangedInfo
+    );
+    if (componentState.onDataMutations && componentState.originalDataArrayChangedInfo.mutations && componentState.originalDataArrayChangedInfo.mutations.size) {
+      componentState.onDataMutations({
+        primaryKeyField: typeof componentState.primaryKey === "string" ? componentState.primaryKey : void 0,
+        dataArray: componentState.originalDataArray,
+        mutations: componentState.originalDataArrayChangedInfo.mutations,
+        timestamp: componentState.originalDataArrayChangedInfo.timestamp
+      });
+    }
+  }, [componentState.originalDataArrayChangedInfo]);
+  (0, import_react36.useEffect)(() => {
+    var _a;
+    (_a = componentState.onReady) == null ? void 0 : _a.call(componentState, api);
+  }, []);
+  return {
+    DataSource: DataSource2,
+    state: contextValue.componentState
+  };
+}
+
 // src/utils/FixedSizeMap.ts
 var _FixedSizeMap = class {
   constructor(clone, size) {
@@ -15032,19 +15206,10 @@ var DataSourceActionType = /* @__PURE__ */ ((DataSourceActionType2) => {
 })(DataSourceActionType || {});
 
 // src/components/DataSource/index.tsx
-function DataSourceWithContext(props) {
-  let { children } = props;
-  const { api, componentState } = useDataSourceContextValue();
-  if (typeof children === "function") {
-    children = children(componentState);
-  }
-  (0, import_react36.useEffect)(() => {
-    var _a;
-    (_a = componentState.onReady) == null ? void 0 : _a.call(componentState, api);
-  }, []);
-  return /* @__PURE__ */ React50.createElement(React50.Fragment, null, children);
-}
-var DataSourceRoot = getComponentStateRoot({
+var {
+  // ManagedComponentContextProvider: ManagedDataSourceContextProvider,
+  useManagedComponent: useManagedDataSource
+} = buildManagedComponent({
   debugName: "DataSource",
   //@ts-ignore
   initSetupState,
@@ -15063,78 +15228,12 @@ var DataSourceRoot = getComponentStateRoot({
   //@ts-ignore
   mappedCallbacks: getMappedCallbacks()
 });
-function DataSourceCmp({
-  children,
-  isDetail
-}) {
-  const DataSourceContext = getDataSourceContext();
-  const masterContext = useMasterDetailContext();
-  const getDataSourceMasterContext = useLatest(masterContext);
-  const { componentState, componentActions, assignState } = useComponentState();
-  componentState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
-  const getState = useLatest(componentState);
-  const [api] = React50.useState(() => {
-    return getDataSourceApi({ getState, actions: componentActions });
-  });
-  const contextValue = {
-    componentState,
-    componentActions,
-    getDataSourceMasterContext,
-    getState,
-    assignState,
-    api
-  };
-  (0, import_react36.useLayoutEffect)(() => {
-    if (masterContext) {
-      masterContext.registerDetail(contextValue);
-    }
-  }, []);
-  (0, import_react36.useLayoutEffect)(() => {
-    return () => {
-      const state = getState();
-      state.onCleanup(state);
-    };
-  }, []);
-  if (false) {
-    globalThis.getDataSourceState = getState;
-    globalThis.dataSourceActions = componentActions;
-    globalThis.dataSourceApi = api;
-  }
-  if (false) {
-    globalThis.dataSources = globalThis.dataSources || {};
-    globalThis["dataSources"][componentState.debugId] = {
-      getState,
-      actions: componentActions,
-      api
-    };
-  }
-  useLoadData();
-  (0, import_react36.useEffect)(() => {
-    var _a;
-    (_a = componentState.onDataArrayChange) == null ? void 0 : _a.call(
-      componentState,
-      componentState.originalDataArray,
-      componentState.originalDataArrayChangedInfo
-    );
-    if (componentState.onDataMutations && componentState.originalDataArrayChangedInfo.mutations && componentState.originalDataArrayChangedInfo.mutations.size) {
-      componentState.onDataMutations({
-        primaryKeyField: typeof componentState.primaryKey === "string" ? componentState.primaryKey : void 0,
-        dataArray: componentState.originalDataArray,
-        mutations: componentState.originalDataArrayChangedInfo.mutations,
-        timestamp: componentState.originalDataArrayChangedInfo.timestamp
-      });
-    }
-  }, [componentState.originalDataArrayChangedInfo]);
-  return /* @__PURE__ */ React50.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React50.createElement(DataSourceWithContext, { children }));
-}
 function DataSource(props) {
-  const masterContext = useMasterDetailContext();
-  const isDetail = !!masterContext;
-  const key = isDetail ? masterContext.masterRowInfo.id : "master";
-  return /* @__PURE__ */ React50.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React50.createElement(DataSourceCmp, { children: props.children, isDetail }));
+  const { DataSource: DataSourceComponent } = useDataSourceInternal(props);
+  return /* @__PURE__ */ React51.createElement(DataSourceComponent, null, props.children);
 }
 function useRowInfoReducers() {
-  const { rowInfoReducerResults } = useDataSource();
+  const { rowInfoReducerResults } = useDataSourceState();
   return rowInfoReducerResults;
 }
 function useMasterRowInfo() {
@@ -16443,7 +16542,7 @@ function useAutoSizeColumns() {
     getComponentState,
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
-  } = useComponentState();
+  } = useManagedComponentState();
   const [refreshId, setRefreshId] = (0, import_react37.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
@@ -16508,7 +16607,7 @@ function useAutoSizeColumns() {
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 var import_react39 = require("react");
 var import_react40 = require("react");
-var React52 = __toESM(require("react"));
+var React53 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -16545,7 +16644,7 @@ function useYourBrain(param) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
-var React51 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/rowDetail.css.ts
 var RowDetailRecipe = createRuntimeFn({ defaultClassName: "rowDetail_RowDetailRecipe__evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
@@ -16682,7 +16781,7 @@ function InfiniteTableDetailRowFn(props) {
     rowDetailsCache,
     rowInfo
   });
-  return /* @__PURE__ */ React51.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React52.createElement(
     "div",
     {
       ref: domRef,
@@ -16699,7 +16798,7 @@ function InfiniteTableDetailRowFn(props) {
     rowDetailRenderer(rowInfo, currentRowCache)
   ));
 }
-var InfiniteTableDetailRow = React51.memo(
+var InfiniteTableDetailRow = React52.memo(
   InfiniteTableDetailRowFn
 );
 
@@ -16858,7 +16957,7 @@ function useCellRendering(param) {
         cellStyle,
         cellClassName
       };
-      return /* @__PURE__ */ React52.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+      return /* @__PURE__ */ React53.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
     },
     [
       rowHeight,
@@ -16889,10 +16988,10 @@ function useCellRendering(param) {
       const dataArray2 = getData();
       const rowInfo = dataArray2[rowIndex];
       if (!rowInfo || !isRowDetailsExpanded(rowInfo) || !computedRowSizeCacheForDetails) {
-        return /* @__PURE__ */ React52.createElement("div", { ref: domRef, className: visibility.hidden });
+        return /* @__PURE__ */ React53.createElement("div", { ref: domRef, className: visibility.hidden });
       }
       const { rowDetailHeight: rowDetailHeight2, rowHeight: rowHeight2 } = computedRowSizeCacheForDetails.getSize(rowIndex);
-      return /* @__PURE__ */ React52.createElement(
+      return /* @__PURE__ */ React53.createElement(
         InfiniteTableDetailRow,
         {
           rowInfo,
@@ -17225,10 +17324,10 @@ function computeColumnGroupsDepths(columnGroups) {
 }
 
 // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
-var React53 = __toESM(require("react"));
+var React54 = __toESM(require("react"));
 function getRowDetailRendererFromComponent(RowDetail) {
   return (rowInfo, cache) => {
-    return /* @__PURE__ */ React53.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
+    return /* @__PURE__ */ React54.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
   };
 }
 
@@ -17705,7 +17804,7 @@ function useColumnsWhen() {
       pivotTotalColumnPosition,
       pivotGrandTotalColumnPosition
     }
-  } = useComponentState();
+  } = useManagedComponentState();
   (0, import_react45.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
@@ -17728,7 +17827,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
   const {
     componentActions,
     componentState: { columns, groupRenderStrategy }
-  } = useComponentState();
+  } = useManagedComponentState();
   function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupByMap2, groupRenderStrategy2, toggleGroupRow2) {
     const computedColumns = {};
     if (groupRenderStrategy2 !== "inline") {
@@ -17823,7 +17922,7 @@ function useColumnsWhenGrouping() {
       pivotGrandTotalColumnPosition
     },
     getComponentState
-  } = useComponentState();
+  } = useManagedComponentState();
   const toggleGroupRow = useToggleGroupRow();
   (0, import_react45.useEffect)(() => {
     const update = () => {
@@ -17895,7 +17994,7 @@ function useHideColumns(groupByMap) {
       hideEmptyGroupColumns,
       groupRenderStrategy
     }
-  } = useComponentState();
+  } = useManagedComponentState();
   (0, import_react45.useLayoutEffect)(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
@@ -18339,7 +18438,7 @@ var INITIAL_SCROLLBARS = {
   horizontal: false
 };
 function useScrollbars(brain) {
-  const { getComponentState: getInfiniteTableState } = useComponentState();
+  const { getComponentState: getInfiniteTableState } = useManagedComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const [scrollbars, setScrollbars] = (0, import_react48.useState)(INITIAL_SCROLLBARS);
   (0, import_react48.useEffect)(() => {
@@ -18367,7 +18466,7 @@ function useScrollbars(brain) {
 // src/components/InfiniteTable/hooks/useComputed.ts
 function useComputed() {
   var _a;
-  const { componentActions, componentState } = useComponentState();
+  const { componentActions, componentState } = useManagedComponentState();
   const {
     componentActions: dataSourceActions,
     componentState: dataSourceState,
@@ -18711,7 +18810,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.2.1-canary.0"
+      version: "4.3.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19750,7 +19849,7 @@ function useDOMEventHandlers() {
 var import_react58 = require("react");
 
 // src/components/hooks/useOverlay/index.tsx
-var React54 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 var import_react54 = require("react");
 var import_react_dom2 = require("react-dom");
 
@@ -20136,10 +20235,10 @@ function retrieveElement(elementGetter) {
   });
 }
 function DefaultOverlayPortal(props) {
-  return /* @__PURE__ */ React54.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
+  return /* @__PURE__ */ React55.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
 }
 function OverlayContent(props) {
-  const nodeRef = React54.useRef(null);
+  const nodeRef = React55.useRef(null);
   (0, import_react54.useEffect)(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
@@ -20147,7 +20246,7 @@ function OverlayContent(props) {
       }
     });
   }, [props.realign]);
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
@@ -20218,22 +20317,22 @@ function useOverlayPortal(content, portalContainer) {
   }, [portalContainer]);
   return portalContainer ? container ? (0, import_react_dom2.createPortal)(content, container) : (
     // we're probably still fetching the container
-    /* @__PURE__ */ React54.createElement(React54.Fragment, null)
-  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React54.createElement(DefaultOverlayPortal, null, content);
+    /* @__PURE__ */ React55.createElement(React55.Fragment, null)
+  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React55.createElement(DefaultOverlayPortal, null, content);
 }
 function getIdForReactOnlyChild(children) {
-  if (React54.Children.count(children) === 1) {
-    const child = React54.Children.only(children);
-    if (React54.isValidElement(child)) {
+  if (React55.Children.count(children) === 1) {
+    const child = React55.Children.only(children);
+    if (React55.isValidElement(child)) {
       return child.props.id || child.key;
     }
   }
   return null;
 }
 function injectPortalContainerAndConstrainInMenuChild(children, portalContainer, constrainTo) {
-  if (React54.Children.count(children) === 1) {
-    const child = React54.Children.only(children);
-    if (React54.isValidElement(child) && child.type[propToIdentifyMenu]) {
+  if (React55.Children.count(children) === 1) {
+    const child = React55.Children.only(children);
+    if (React55.isValidElement(child) && child.type[propToIdentifyMenu]) {
       const newProps = {};
       if (child.props.portalContainer === void 0) {
         newProps.portalContainer = portalContainer;
@@ -20241,7 +20340,7 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
       if (child.props.constrainTo === void 0) {
         newProps.constrainTo = constrainTo;
       }
-      return React54.cloneElement(child, newProps);
+      return React55.cloneElement(child, newProps);
     }
   }
   return children;
@@ -20257,7 +20356,7 @@ function useOverlay(params) {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
-        /* @__PURE__ */ React54.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
+        /* @__PURE__ */ React55.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
       );
     }
     return contentForPortal;
@@ -20302,7 +20401,7 @@ function useOverlay(params) {
     },
     [handles, rootParams.portalContainer, updateContent]
   );
-  React54.useEffect(() => {
+  React55.useEffect(() => {
     if (handleToRealign) {
       const handle = handles.get(handleToRealign);
       if (handle) {
@@ -20321,7 +20420,7 @@ function useOverlay(params) {
     handles.clear();
     updateContent();
   };
-  React54.useEffect(() => {
+  React55.useEffect(() => {
   }, []);
   return {
     portal,
@@ -20333,16 +20432,16 @@ function useOverlay(params) {
 }
 
 // src/components/InfiniteTable/utils/getMenuForColumn.tsx
-var React60 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 
 // src/components/Menu/index.tsx
-var React58 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 
 // src/components/Menu/getMenuState.tsx
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 
 // src/components/Menu/childrenToRuntimeItems.tsx
-var React55 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 
 // src/components/Menu/MenuItem.tsx
 function MenuItem(_props) {
@@ -20361,7 +20460,7 @@ var MenuSeparatorCls = "MenuCls_MenuSeparatorCls__db3arfd";
 // src/components/Menu/childrenToRuntimeItems.tsx
 var SEPARATOR = "-";
 function MenuSeparator() {
-  return /* @__PURE__ */ React55.createElement("hr", { className: MenuSeparatorCls });
+  return /* @__PURE__ */ React56.createElement("hr", { className: MenuSeparatorCls });
 }
 var toRuntimeItem = ({
   columns,
@@ -20370,7 +20469,7 @@ var toRuntimeItem = ({
   menuId
 }, item) => {
   const menuItem = item && (item.key != null || item.label != null) ? item : null;
-  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React55.createElement(MenuSeparator, null) : item : null;
+  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React56.createElement(MenuSeparator, null) : item : null;
   const runtimeItem = menuItem != null ? {
     type: "item",
     parentMenuId: menuId,
@@ -20398,7 +20497,7 @@ var toRuntimeItem = ({
   return runtimeItem;
 };
 function childrenToRuntimeItems(context, children) {
-  return React55.Children.map(children, (child) => {
+  return React56.Children.map(children, (child) => {
     if (child) {
       if (child.props.__is_menu_item || child.type === MenuItem) {
         const itemProps = __spreadValues({}, child.props);
@@ -20421,7 +20520,7 @@ function childrenToRuntimeItems(context, children) {
 // src/components/Menu/getMenuState.tsx
 var SUBMENU_COL_NAME = "submenu";
 function getInitialMenuState() {
-  const domRef = React56.createRef();
+  const domRef = React57.createRef();
   return {
     keyboardActiveItemKey: null,
     activeItemKey: null,
@@ -20476,7 +20575,7 @@ var deriveStateFromProps2 = (params) => {
       columns.push({
         name: SUBMENU_COL_NAME,
         render: ({ domProps, item }) => {
-          return item.menu ? /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React56.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps));
+          return item.menu ? /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React57.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps));
         }
       });
     }
@@ -20493,7 +20592,7 @@ var deriveStateFromProps2 = (params) => {
 };
 
 // src/components/Menu/Menu.tsx
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 var import_react57 = require("react");
 
 // src/utils/pageGeometry/Triangle.ts
@@ -20753,7 +20852,7 @@ function renderSubmenuForItem(item, config) {
   if (typeof itemMenu === "function") {
     itemMenu = itemMenu();
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     Menu,
     __spreadProps(__spreadValues({
       key: overlayId,
@@ -20966,7 +21065,7 @@ function MenuComponent(props) {
       setActiveItemKey(key);
     }
   });
-  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React57.createElement(
+  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React58.createElement(
     RuntimeItemRenderer,
     {
       key: runtimeItem.type === "item" ? runtimeItem.key : index,
@@ -21151,7 +21250,7 @@ function MenuComponent(props) {
       domRef.current = node;
     }
   }, []);
-  const result = /* @__PURE__ */ React57.createElement("div", { className: display.contents }, /* @__PURE__ */ React57.createElement(
+  const result = /* @__PURE__ */ React58.createElement("div", { className: display.contents }, /* @__PURE__ */ React58.createElement(
     "div",
     __spreadProps(__spreadValues({}, domProps), {
       "data-menu-id": menuId,
@@ -21183,12 +21282,12 @@ function MenuComponent(props) {
   return destroyed ? null : result;
 }
 function RuntimeItemRenderer(props) {
-  const [pressed, setPressed] = React57.useState(false);
+  const [pressed, setPressed] = React58.useState(false);
   const { columns, item, index, active, keyboardActive } = props;
   const key = item.type === "item" ? item.value.key : index;
   let content = null;
   if (item.type === "decoration") {
-    content = /* @__PURE__ */ React57.createElement("div", { style: item.style }, item.value);
+    content = /* @__PURE__ */ React58.createElement("div", { style: item.style }, item.value);
   } else {
     let spanIndex = 0;
     content = columns.map((col, i) => {
@@ -21249,7 +21348,7 @@ function RuntimeItemRenderer(props) {
           }
         }
       };
-      return col.render ? /* @__PURE__ */ React57.createElement(
+      return col.render ? /* @__PURE__ */ React58.createElement(
         RenderHookComponent,
         {
           key: `${key}-${field}`,
@@ -21261,14 +21360,14 @@ function RuntimeItemRenderer(props) {
             domProps
           }
         }
-      ) : /* @__PURE__ */ React57.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
+      ) : /* @__PURE__ */ React58.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
     }).filter(Boolean);
   }
-  return /* @__PURE__ */ React57.createElement("div", { className: MenuRowCls }, content);
+  return /* @__PURE__ */ React58.createElement("div", { className: MenuRowCls }, content);
 }
 
 // src/components/Menu/index.tsx
-var MenuRoot = getComponentStateRoot({
+var { ManagedComponentContextProvider: MenuRoot } = buildManagedComponent({
   initSetupState: getInitialMenuState,
   forwardProps: forwardProps5,
   // @ts-ignore
@@ -21276,14 +21375,14 @@ var MenuRoot = getComponentStateRoot({
   layoutEffect: true
 });
 function MenuContextProvider(props) {
-  const { componentActions, componentState } = useComponentState();
+  const { componentActions, componentState } = useManagedComponentState();
   const getState = useLatest(componentState);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     MenuContext.Provider,
     {
       value: { componentActions, componentState, getState }
     },
-    /* @__PURE__ */ React58.createElement(MenuComponent, { domProps: props.domProps })
+    /* @__PURE__ */ React59.createElement(MenuComponent, { domProps: props.domProps })
   );
 }
 function Menu(props) {
@@ -21325,24 +21424,24 @@ function Menu(props) {
     //@ts-ignore
     "__is_infinite_menu_component"
   ]);
-  const menu = /* @__PURE__ */ React58.createElement(
+  const menu = /* @__PURE__ */ React59.createElement(
     MenuRoot,
     __spreadValues({
       addSubmenuColumnIfNeeded,
       bubbleActionsFromSubmenus,
       wrapLabels
     }, props),
-    /* @__PURE__ */ React58.createElement(MenuContextProvider, { domProps })
+    /* @__PURE__ */ React59.createElement(MenuContextProvider, { domProps })
   );
   if (false) {
-    return /* @__PURE__ */ React58.createElement(React58.StrictMode, null, menu);
+    return /* @__PURE__ */ React59.createElement(React59.StrictMode, null, menu);
   }
   return menu;
 }
 Menu[propToIdentifyMenu] = true;
 
 // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
-var React59 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 function defaultGetColumnMenuItems(_items, params) {
   const { columnApi, column, getComputed, api } = params;
   const sortable = columnApi.isSortable();
@@ -21429,7 +21528,7 @@ function defaultGetColumnMenuItems(_items, params) {
           colItems.push({
             key: id,
             label,
-            check: /* @__PURE__ */ React59.createElement(
+            check: /* @__PURE__ */ React60.createElement(
               InfiniteCheckBox,
               {
                 key: col.id,
@@ -21492,7 +21591,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
   if (!items || !items.length) {
     return null;
   }
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -21612,7 +21711,7 @@ function useColumnMenu() {
 }
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 var import_react59 = require("react");
 var style = {
   width: 0,
@@ -21646,7 +21745,7 @@ function FocusDetect() {
     };
     focusLastFocusableCell(context);
   }), []);
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       onFocus,
@@ -21777,18 +21876,18 @@ function useEditingCallbackProps() {
 var import_react61 = require("react");
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
-var React64 = __toESM(require("react"));
+var React65 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/icons/ClearIcon.tsx
-var React62 = __toESM(require("react"));
+var React63 = __toESM(require("react"));
 var ClearIcon = (props) => {
-  return /* @__PURE__ */ React62.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React62.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+  return /* @__PURE__ */ React63.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React63.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 };
 
 // src/components/InfiniteTable/components/icons/DoneIcon.tsx
-var React63 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 var DoneIcon = (props) => {
-  return /* @__PURE__ */ React63.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React63.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
+  return /* @__PURE__ */ React64.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React64.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
 };
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
@@ -21834,12 +21933,12 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     const IconCmp = (_b = (_a2 = operator.components) == null ? void 0 : _a2.Icon) != null ? _b : FilterIcon;
     return {
       key,
-      icon: /* @__PURE__ */ React64.createElement(IconCmp, null),
-      label: /* @__PURE__ */ React64.createElement(React64.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
+      icon: /* @__PURE__ */ React65.createElement(IconCmp, null),
+      label: /* @__PURE__ */ React65.createElement(React65.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
       onAction: () => {
         api.setColumnFilterOperator(columnId, key);
       },
-      checked: checked ? /* @__PURE__ */ React64.createElement(DoneIcon, { size: 16 }) : null
+      checked: checked ? /* @__PURE__ */ React65.createElement(DoneIcon, { size: 16 }) : null
     };
   });
   const firstItems = [
@@ -21854,7 +21953,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     {
       key: "reset",
       label: "Reset",
-      icon: /* @__PURE__ */ React64.createElement(ClearIcon, null),
+      icon: /* @__PURE__ */ React65.createElement(ClearIcon, null),
       disabled: !column.computedFiltered,
       onAction: () => {
         api.clearColumnFilter(columnId);
@@ -21876,7 +21975,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     filterTypes
   };
   const items = getFilterOperatorMenuItems ? getFilterOperatorMenuItems(defaultItems, param) : defaultItems;
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -21983,7 +22082,7 @@ function useColumnFilterOperatorMenu() {
 var import_react62 = require("react");
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
-var React65 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   var _a;
   const { columnId, rowIndex, event } = cellLocation;
@@ -22023,7 +22122,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React65.createElement(
+    menu: /* @__PURE__ */ React66.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -22078,7 +22177,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React65.createElement(
+    menu: /* @__PURE__ */ React66.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -22284,7 +22383,7 @@ function useTableContextMenu() {
 
 // src/components/InfiniteTable/components/HScrollSyncContent.tsx
 var import_react64 = require("react");
-var React66 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
 var import_react63 = require("react");
@@ -22330,7 +22429,7 @@ function HScrollSyncContent(props) {
   } else if (maxWidth === "viewport") {
     style2.maxWidth = ThemeVars.runtime.bodyWidth;
   }
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement(
     "div",
     __spreadProps(__spreadValues({
       ref: domRef
@@ -22362,7 +22461,7 @@ function useVisibleColumnSizes() {
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
 var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
-var InfiniteTableRoot = getComponentStateRoot({
+var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedComponent({
   // @ts-ignore
   initSetupState: initSetupState2,
   // @ts-ignore
@@ -22379,7 +22478,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   //@ts-ignore
   mappedCallbacks: getMappedCallbacks2(),
   // @ts-ignore
-  getParentState: () => useDataSource(),
+  getParentState: () => useDataSourceState(),
   debugName: "InfiniteTable"
 });
 function InfiniteTableHeader2() {
@@ -22387,7 +22486,7 @@ function InfiniteTableHeader2() {
   const { state: componentState, getComputed } = context;
   const { header, brain, headerBrain } = componentState;
   const { scrollbars } = getComputed();
-  return header ? /* @__PURE__ */ React67.createElement(
+  return header ? /* @__PURE__ */ React68.createElement(
     TableHeaderWrapper,
     {
       bodyBrain: brain,
@@ -22403,7 +22502,7 @@ var InfiniteTableBodyCls = join(
   transformTranslateZero
 );
 function InfiniteTableBodyContainer(props) {
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "div",
     __spreadProps(__spreadValues({}, props), {
       className: props.className ? join(InfiniteTableBodyCls, props.className) : InfiniteTableBodyCls
@@ -22437,7 +22536,7 @@ function InfiniteTableBody() {
   const {
     componentState: { loading }
   } = useDataSourceContextValue();
-  const onContextMenu = React67.useCallback((event) => {
+  const onContextMenu = React68.useCallback((event) => {
     const state = context.getState();
     const target = event.target;
     if (!masterContext && event._from_row_detail) {
@@ -22481,7 +22580,7 @@ function InfiniteTableBody() {
     bodySize,
     computed
   });
-  return /* @__PURE__ */ React67.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React68.createElement(
     HeadlessTable,
     {
       debugId,
@@ -22499,9 +22598,9 @@ function InfiniteTableBody() {
       cellHoverClassNames: HOVERED_CLASS_NAMES,
       scrollerDOMRef
     }
-  ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText));
+  ), /* @__PURE__ */ React68.createElement(LoadMaskCmp, { visible: loading }, loadingText));
 }
-var InfiniteTableComponent = React67.memo(
+var InfiniteTableComponent = React68.memo(
   function InfiniteTableComponent2() {
     const context = useInfiniteTable();
     const masterContext = useMasterDetailContext();
@@ -22532,7 +22631,7 @@ var InfiniteTableComponent = React67.memo(
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -22547,7 +22646,7 @@ var InfiniteTableComponent = React67.memo(
     }, [brain, scrollStopDelay]);
     const licenseValid = useLicense(licenseKey);
     const domProps = useDOMProps(componentState.domProps);
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -22557,7 +22656,7 @@ var InfiniteTableComponent = React67.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -22570,13 +22669,13 @@ var InfiniteTableComponent = React67.memo(
         globalThis.infiniteApi = context.api;
       }
     }, [componentState.ready]);
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (masterContext) {
         portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
       }
     }, []);
-    const children = initialChildren != null ? initialChildren : /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React67.createElement(InfiniteTableBody, null));
-    return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), children, /* @__PURE__ */ React67.createElement(
+    const children = initialChildren != null ? initialChildren : /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React68.createElement(InfiniteTableBody, null));
+    return /* @__PURE__ */ React68.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), children, /* @__PURE__ */ React68.createElement(
       "div",
       {
         ref: portalDOMRef,
@@ -22592,31 +22691,31 @@ var InfiniteTableComponent = React67.memo(
       cellContextMenuPortal,
       tableContextMenuPortal,
       filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React67.createElement(
+    ), rowHeightCSSVar ? /* @__PURE__ */ React68.createElement(
       CSSNumericVariableWatch,
       {
         varName: rowHeightCSSVar,
         onChange: onRowHeightCSSVarChange
       }
-    ) : null, rowDetailHeightCSSVar ? /* @__PURE__ */ React67.createElement(
+    ) : null, rowDetailHeightCSSVar ? /* @__PURE__ */ React68.createElement(
       CSSNumericVariableWatch,
       {
         varName: rowDetailHeightCSSVar,
         onChange: onRowDetailHeightCSSVarChange
       }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React67.createElement(
+    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React68.createElement(
       CSSNumericVariableWatch,
       {
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
-    ) : null, licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
+    ) : null, licenseValid ? null : /* @__PURE__ */ React68.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React68.createElement(FocusDetect, null));
   }
 );
 function InfiniteTableContextProvider({
   children
 }) {
-  const { componentActions, componentState } = useComponentState();
+  const { componentActions, componentState } = useManagedComponentState();
   const { scrollerDOMRef, scrollTopKey } = componentState;
   const computed = useComputed();
   const getComputed = useLatest(computed);
@@ -22634,7 +22733,7 @@ function InfiniteTableContextProvider({
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React67.useState(() => {
+  const [imperativeApi] = React68.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -22670,37 +22769,233 @@ function InfiniteTableContextProvider({
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React67.useEffect(() => {
+  React68.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React67.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React67.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React68.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React68.createElement(InfiniteTableComponent, null));
 }
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
 var InfiniteTable = function(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement(
       InfiniteTableRoot,
       __spreadValues({
         rowHeight: DEFAULT_ROW_HEIGHT,
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT
       }, props),
-      /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, { children: props.children })
+      /* @__PURE__ */ React68.createElement(InfiniteTableContextProvider, { children: props.children })
     )
   );
   if (false) {
-    return /* @__PURE__ */ React67.createElement(React67.StrictMode, null, table);
+    return /* @__PURE__ */ React68.createElement(React68.StrictMode, null, table);
   }
   return table;
 };
 InfiniteTable.Header = InfiniteTableHeader2;
 InfiniteTable.Body = InfiniteTableBody;
 InfiniteTable.HScrollSyncContent = HScrollSyncContent;
-InfiniteTable.Footer = () => /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null);
+InfiniteTable.Footer = () => /* @__PURE__ */ React68.createElement(InfiniteTableFooter, null);
+
+// src/components/DataSource/DataLoader/DataQuery.ts
+var logger2 = debug("InfiniteTable:DataQuery");
+var DataQuery = class {
+  constructor(debugName) {
+    this.state = "idle";
+    this.result = void 0;
+    this.error = void 0;
+    this.doneAt = 0;
+    this.pendingPromise = void 0;
+    this.debugName = "";
+    this.fetch = (loadFn, ...key) => __async(this, null, function* () {
+      this.state = "loading";
+      let resolvePending = () => {
+      };
+      try {
+        logger2(`Fetching query ${this.debugName}...`);
+        this.pendingPromise = new Promise((resolve) => {
+          resolvePending = resolve;
+        });
+        this.result = yield loadFn(...key);
+        this.state = "success";
+      } catch (error2) {
+        this.result = void 0;
+        this.error = error2;
+        this.state = "error";
+      }
+      this.doneAt = Date.now();
+      this.pendingPromise = void 0;
+      resolvePending(this);
+      logger2(`Fetched query ${this.debugName}. State: ${this.state}.`);
+      return this.getDoneSnapshot();
+    });
+    this.getCurrentSnapshot = () => {
+      const result = {
+        state: this.state,
+        result: this.result,
+        doneAt: this.doneAt,
+        error: this.error,
+        done: this.isDone()
+      };
+      if (!result.done) {
+        result.promise = this.pendingPromise;
+      }
+      return result;
+    };
+    this.getDoneSnapshot = () => __async(this, null, function* () {
+      if (this.state === "idle") {
+        throw new Error("DataQuery is still idle");
+      }
+      if (this.pendingPromise) {
+        yield this.pendingPromise;
+      }
+      return {
+        state: this.state,
+        result: this.result,
+        error: this.error,
+        done: this.isDone(),
+        doneAt: this.doneAt
+      };
+    });
+    this.getResult = () => {
+      if (!this.isDone()) {
+        throw new Error("DataQuery is not done yet");
+      }
+      return this.result;
+    };
+    this.isDone = () => this.state === "success" || this.state === "error";
+    this.isSuccess = () => this.state === "success";
+    this.debugName = debugName || "";
+  }
+};
+
+// src/components/DataSource/DataLoader/DataClient.ts
+function queryKeyToCacheKey(key) {
+  if (Array.isArray(key)) {
+    return key.map(queryKeyToCacheKey);
+  }
+  if (typeof key === "object") {
+    if (key === null) {
+      return key;
+    }
+    const current = key;
+    const keys = Object.keys(current).sort((a, b) => a.localeCompare(b));
+    const result = {};
+    keys.forEach((k) => {
+      const value = current[k];
+      if (value !== void 0) {
+        result[k] = queryKeyToCacheKey(value);
+      }
+    });
+    return JSON.stringify(result);
+  }
+  if (key instanceof Date) {
+    return key.toISOString();
+  }
+  return key;
+}
+var _DataClient = class {
+  constructor(options) {
+    this.queryCache = new DeepMap();
+    this.removeQueryIfErrored = (query, stringifiedQueryKey) => {
+      if (query.getCurrentSnapshot().state !== "success") {
+        const currentCachedQuery = this.queryCache.get(stringifiedQueryKey);
+        if (query === currentCachedQuery) {
+          this.queryCache.delete(stringifiedQueryKey);
+          return true;
+        }
+      }
+      return false;
+    };
+    this.fireQuery = (options) => {
+      var _a;
+      const stringifiedCacheKey = queryKeyToCacheKey(
+        options.key
+      );
+      const cachedQuery = this.options.cache ? this.queryCache.get(stringifiedCacheKey) : null;
+      if (cachedQuery != null) {
+        const currentSnapshot = cachedQuery.getCurrentSnapshot();
+        if (currentSnapshot.state === "success") {
+          return { query: cachedQuery, fromCache: true };
+        }
+        if (currentSnapshot.state === "loading") {
+          return { query: cachedQuery, fromCache: true };
+        }
+        if (currentSnapshot.state === "error") {
+          this.removeQueryIfErrored(cachedQuery, stringifiedCacheKey);
+        }
+      }
+      const dataQuery = new DataQuery(options.name || "");
+      this.queryCache.set(stringifiedCacheKey, dataQuery);
+      dataQuery.fetch(options.fn, options.key);
+      (_a = dataQuery.getCurrentSnapshot().promise) == null ? void 0 : _a.then(() => {
+        this.removeQueryIfErrored(dataQuery, stringifiedCacheKey);
+      });
+      return { query: dataQuery, fromCache: false };
+    };
+    this.query = (options) => {
+      return this.fireQuery(options).query.getCurrentSnapshot();
+    };
+    this.awaitQuery = (options) => __async(this, null, function* () {
+      const { query, fromCache } = this.fireQuery(options);
+      let snapshot = query.getCurrentSnapshot();
+      if (snapshot.promise) {
+        snapshot = yield query.getDoneSnapshot();
+        if (snapshot.state === "error" && fromCache) {
+          return yield this.fireQuery(options).query.getDoneSnapshot();
+        }
+      }
+      return snapshot;
+    });
+    this.isQueryInProgress = (key) => {
+      var _a;
+      const stringifiedCacheKey = queryKeyToCacheKey(
+        key
+      );
+      const cachedQuery = this.queryCache.get(stringifiedCacheKey);
+      return (_a = cachedQuery == null ? void 0 : cachedQuery.getCurrentSnapshot().done) != null ? _a : false;
+    };
+    this.hasQueryForKey = (key) => {
+      const stringifiedCacheKey = queryKeyToCacheKey(
+        key
+      );
+      return this.queryCache.has(stringifiedCacheKey);
+    };
+    this.discardQueryForKey = (key) => {
+      const stringifiedCacheKey = queryKeyToCacheKey(
+        key
+      );
+      this.queryCache.delete(stringifiedCacheKey);
+    };
+    this.options = options;
+    if (_DataClient.clients.has(options.name)) {
+      const errMsg = `There's already a DataClient with name "${options.name}". Specify a different name for the client`;
+      throw new Error(errMsg);
+    }
+    _DataClient.clients.set(options.name, this);
+    this.name = options.name;
+  }
+  static destroy(clientName) {
+    const client = _DataClient.clients.get(clientName);
+    if (client) {
+      client.destroy();
+    }
+  }
+  static destroyAll() {
+    _DataClient.clients.forEach((client) => {
+      _DataClient.destroy(client.name);
+    });
+  }
+  destroy() {
+    _DataClient.clients.delete(this.options.name);
+  }
+};
+var DataClient = _DataClient;
+DataClient.clients = /* @__PURE__ */ new Map();
 
 // src/components/InfiniteTable/eventHandlers/keyboardShortcuts.ts
 var instantEdit = {
@@ -22919,6 +23214,7 @@ var components = {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CellSelectionState,
+  DataClient,
   DataSource,
   DataSourceActionType,
   DeepMap,
@@ -22944,8 +23240,10 @@ var components = {
   interceptMap,
   keyboardShortcuts,
   multisort,
+  queryKeyToCacheKey,
   useComponentState,
-  useDataSource,
+  useDataSourceInternal,
+  useDataSourceState,
   useEffectWithChanges,
   useEffectWithObject,
   useGridScroll,
@@ -22953,6 +23251,7 @@ var components = {
   useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor,
   useInfiniteHeaderCell,
+  useManagedDataSource,
   useMasterRowInfo,
   useOverlay,
   useOverlayPortal,