@infinite-table/infinite-react 3.3.3 → 4.0.0

package/index.dev.mjs

@@ -5680,11 +5680,11 @@ var getComputedColumns = ({
     {}
   );
   const normalizedColumnOrder = adjustColumnOrderForPinning(
-    columnOrder === true ? [...columns.keys()] : columnOrder,
+    columnOrder === true ? Object.keys(columns) : columnOrder,
     columnPinning
   );
   const visibleColumnOrder = normalizedColumnOrder.filter((colId) => {
-    const col = columns.get(colId);
+    const col = columns[colId];
     if (!col) {
       logError(
         `Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`
@@ -5701,7 +5701,7 @@ var getComputedColumns = ({
   const columnIdsToVisibleIndex = /* @__PURE__ */ new Map();
   const visibleColumnsArray = visibleColumnOrder.map(
     (columnId, index) => {
-      const col = columns.get(columnId);
+      const col = columns[columnId];
       columnIdsToVisibleIndex.set(columnId, index);
       return col;
     }
@@ -5722,7 +5722,7 @@ var getComputedColumns = ({
   );
   function getColSize(colId) {
     var _a, _b, _c, _d, _e, _f;
-    const column = columns.get(colId);
+    const column = columns[colId];
     const colType = getColumnComputedType(column, columnTypes);
     const colTypeSizing = {
       minWidth: colType == null ? void 0 : colType.minWidth,
@@ -5813,7 +5813,8 @@ var getComputedColumns = ({
     orderedColumns.set(id, c);
   });
   const columnIdsInitialColumnOrder = [];
-  columns.forEach((c, key) => {
+  Object.keys(columns).forEach((key) => {
+    const c = columns[key];
     columnIdsInitialColumnOrder.push(key);
     if (!orderedColumns.has(key)) {
       orderedColumns.set(key, c);
@@ -9592,7 +9593,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, c
     let colGroupItem;
     let prevGroupItem = colItem;
     while (groupId) {
-      const colGroup = columnGroups.get(groupId);
+      const colGroup = columnGroups[groupId];
       if (colGroup) {
         parentGroups.add(groupId);
         const groupAbsoluteId = [colId, ...parentGroups];
@@ -10034,10 +10035,10 @@ function TableHeaderWrapper(props) {
       showColumnFilters
     }
   } = tableContextValue;
-  const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
+  const rows = !computedColumnGroups || !Object.keys(computedColumnGroups).length ? 1 : columnGroupsMaxDepth + 2;
   const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
   const columnAndGroupTreeInfo = React48.useMemo(() => {
-    if (!computedColumnGroups || !computedColumnGroups.size) {
+    if (!computedColumnGroups || !Object.keys(computedColumnGroups).length) {
       return void 0;
     }
     return buildColumnAndGroupTree(
@@ -11770,46 +11771,25 @@ function getPivotColumnsAndColumnGroups({
       reducer: () => null
     });
   }
-  const columns = /* @__PURE__ */ new Map([
-    // [
-    //   'labels',
-    //   {
-    //     header: 'Row labels',
-    //     pivotBy,
-    //     valueGetter: (params) => {
-    //       const { rowInfo } = params;
-    //       if (!rowInfo.data) {
-    //         // TODO replace with loading spinner
-    //         return 'Loading ...';
-    //       }
-    //       return rowInfo.groupKeys
-    //         ? rowInfo.groupKeys[rowInfo.groupKeys?.length - 1]
-    //         : null;
-    //     },
-    //   },
-    // ],
-  ]);
-  const columnGroups = /* @__PURE__ */ new Map();
+  const columns = {};
+  const columnGroups = {};
   const addGrandTotalColumns = once(function() {
     aggregationReducers.forEach((reducer, index) => {
-      columns.set(
-        `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;
-          }
-        })
-      );
+      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 (!pivotLength && pivotTotalColumnPosition === "start" || pivotGrandTotalColumnPosition === "start") {
@@ -11829,18 +11809,15 @@ function getPivotColumnsAndColumnGroups({
         const columnGroupId = parentColumnGroupId;
         parentColumnGroupId = keys.join("/");
         const pivotGroupKey = keys[keys.length - 1];
-        columnGroups.set(
-          parentColumnGroupId,
-          prepareColumnGroup({
-            header: `${pivotGroupKey}`,
-            columnGroup: columnGroupId,
-            pivotBy,
-            pivotGroupKeys: keys,
-            pivotByAtIndex: pivotByForColumn,
-            pivotIndex: keys.length - 1,
-            pivotGroupKey
-          })
-        );
+        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;
@@ -11866,42 +11843,36 @@ function getPivotColumnsAndColumnGroups({
           }
         });
         const columnId = `${reducer.id}:${keys.join("/")}`;
-        columns.set(columnId, computedPivotColumn);
+        columns[columnId] = computedPivotColumn;
       });
     } else {
       const colGroupId = keys.join("/");
       const parentKeys = keys.slice(0, -1);
-      columnGroups.set(
-        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]
-        })
-      );
+      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.set(
-            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]
-            })
-          );
+          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`;
@@ -11926,10 +11897,7 @@ function getPivotColumnsAndColumnGroups({
               return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
             }
           });
-          columns.set(
-            `total:${reducer.id}:${keys.join("/")}`,
-            computedPivotColumn
-          );
+          columns[`total:${reducer.id}:${keys.join("/")}`] = computedPivotColumn;
         });
       }
     }
@@ -16852,7 +16820,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useEffect as useEffect28, useState as useState17 } from "react";
+import { useEffect as useEffect25, useState as useState17 } from "react";
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -17043,129 +17011,6 @@ var MultiRowSelector = class {
   }
 };
 
-// src/components/InfiniteTable/hooks/useColumnGroups.ts
-import { useEffect as useEffect24 } from "react";
-
-// src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect23 } from "react";
-function interceptMap(map2, fns) {
-  const { set, delete: deleteKey, clear } = map2;
-  if (fns.set) {
-    map2.set = (key, value) => {
-      set.call(map2, key, value);
-      fns.set(key, value);
-      return map2;
-    };
-  }
-  if (fns.delete) {
-    map2.delete = (key) => {
-      const removed = deleteKey.call(map2, key);
-      fns.delete(key);
-      return removed;
-    };
-  }
-  if (fns.clear || fns.beforeClear) {
-    map2.clear = () => {
-      if (fns.beforeClear) {
-        fns.beforeClear(map2);
-      }
-      const result = clear.call(map2);
-      if (fns.clear) {
-        fns.clear();
-      }
-      return result;
-    };
-  }
-  return () => {
-    if (set) {
-      map2.set = set;
-    }
-    if (deleteKey) {
-      map2.delete = deleteKey;
-    }
-    if (clear) {
-      map2.clear = clear;
-    }
-  };
-}
-
-// src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
-function computeColumnGroupsDepths(columnGroups) {
-  const map2 = /* @__PURE__ */ new Map();
-  columnGroups.forEach((colGroup, colGroupId) => {
-    let parentGroupId = colGroup.columnGroup;
-    let depth = 0;
-    while (parentGroupId) {
-      const parent = columnGroups.get(parentGroupId);
-      if (!parent) {
-        if (false) {
-          console.warn(`Cannot find column group ${parentGroupId}`);
-        }
-        break;
-      }
-      depth++;
-      parentGroupId = parent.columnGroup;
-    }
-    map2.set(colGroupId, depth);
-  });
-  return map2;
-}
-
-// src/components/InfiniteTable/hooks/useColumnGroups.ts
-function useColumnGroups() {
-  const {
-    componentState: {
-      computedColumnGroups,
-      collapsedColumnGroups
-    },
-    componentActions,
-    getComponentState
-  } = useComponentState();
-  useEffect24(() => {
-    const recompute = () => {
-      componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
-    };
-    const update = rafFn(recompute);
-    return interceptMap(computedColumnGroups, {
-      clear: update,
-      delete: update,
-      set: update
-    });
-  }, [computedColumnGroups]);
-  useEffect24(() => {
-    return interceptMap(collapsedColumnGroups, {
-      set: (key, visibleCol) => {
-        const colIds = key.slice(1);
-        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
-        colIds.forEach((colId) => {
-          columnVisibility[colId] = false;
-        });
-        delete columnVisibility[visibleCol];
-        componentActions.columnVisibility = columnVisibility;
-      },
-      beforeClear: (currentCollapsedGroups) => {
-        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
-        const keys = [...currentCollapsedGroups.keys()];
-        keys.forEach((key) => {
-          const colIds = key.slice(1);
-          colIds.forEach((colId) => {
-            delete columnVisibility[colId];
-          });
-        });
-        componentActions.columnVisibility = columnVisibility;
-      },
-      delete: (key) => {
-        const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
-        const colIds = key.slice(1);
-        colIds.forEach((colId) => {
-          delete columnVisibility[colId];
-        });
-        componentActions.columnVisibility = columnVisibility;
-      }
-    });
-  }, [collapsedColumnGroups]);
-}
-
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
 import { useMemo as useMemo10 } from "react";
 function useColumnRowspan(computedVisibleColumns) {
@@ -17215,7 +17060,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect25, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
@@ -17255,22 +17100,27 @@ var ScrollListener = class {
   }
 };
 
-// src/components/InfiniteTable/utils/toMap.ts
-function toMap(mapOrObject, weakMapCache) {
-  if (!mapOrObject) {
-    return /* @__PURE__ */ new Map();
-  }
-  if (mapOrObject instanceof Map) {
-    return mapOrObject;
-  }
-  if (weakMapCache && weakMapCache.has(mapOrObject)) {
-    return weakMapCache.get(mapOrObject);
-  }
-  const result = new Map(Object.entries(mapOrObject));
-  if (weakMapCache) {
-    weakMapCache.set(mapOrObject, result);
-  }
-  return result;
+// src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
+function computeColumnGroupsDepths(columnGroups) {
+  const map2 = /* @__PURE__ */ new Map();
+  Object.keys(columnGroups).forEach((colGroupId) => {
+    const colGroup = columnGroups[colGroupId];
+    let parentGroupId = colGroup.columnGroup;
+    let depth = 0;
+    while (parentGroupId) {
+      const parent = columnGroups[parentGroupId];
+      if (!parent) {
+        if (false) {
+          console.warn(`Cannot find column group ${parentGroupId}`);
+        }
+        break;
+      }
+      depth++;
+      parentGroupId = parent.columnGroup;
+    }
+    map2.set(colGroupId, depth);
+  });
+  return map2;
 }
 
 // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
@@ -17301,7 +17151,7 @@ function getCellSelector(cellPosition) {
 function initSetupState2({
   debugId
 }) {
-  const columnsGeneratedForGrouping = /* @__PURE__ */ new Map();
+  const columnsGeneratedForGrouping = {};
   const brain = new MatrixBrain(debugId);
   const headerBrain = new MatrixBrain("header");
   brain.onScroll((scrollPosition) => {
@@ -17377,7 +17227,7 @@ function initSetupState2({
     editingCell: null
   };
 }
-var forwardProps4 = (setupState) => {
+var forwardProps4 = (_setupState) => {
   return {
     debugId: 1,
     scrollTopKey: 1,
@@ -17463,7 +17313,7 @@ var forwardProps4 = (setupState) => {
     rowHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
     rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
-    columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
+    columns: 1,
     columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
     // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
     columnSizing: (columnSizing) => columnSizing || {},
@@ -17477,7 +17327,7 @@ var forwardProps4 = (setupState) => {
     onEditPersistSuccess: 1,
     multiSortBehavior: (multiSortBehavior) => multiSortBehavior != null ? multiSortBehavior : "replace",
     collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : /* @__PURE__ */ new Map(),
-    columnGroups: (columnGroups) => toMap(columnGroups, setupState.propsCache.get("columnGroups"))
+    columnGroups: 1
   };
 };
 function getGroupRenderStrategy(options) {
@@ -17594,26 +17444,22 @@ var mapPropsToState = (params) => {
 };
 
 // src/components/InfiniteTable/state/getColumnVisibilityForHideEmptyGroupColumns.ts
-function getGroupColumnsMapForComputedColumns(computedColumns, groupByMap) {
-  const computedGroupColumns = /* @__PURE__ */ new Map();
-  computedColumns.forEach(
-    (column, colId) => {
-      const col = column;
-      if (!col.groupByForColumn || Array.isArray(col.groupByForColumn)) {
-        return;
-      }
-      const { groupByForColumn } = col;
-      const field = groupByForColumn.field || groupByForColumn.groupField;
-      const groupInfoForColumn = field ? groupByMap.get(field) : null;
-      if (!groupInfoForColumn) {
-        return;
-      }
-      computedGroupColumns.set(
-        colId,
-        column
-      );
+function getGroupColumnsForComputedColumns(computedColumns, groupByMap) {
+  const computedGroupColumns = {};
+  Object.keys(computedColumns).forEach((colId) => {
+    const column = computedColumns[colId];
+    const col = column;
+    if (!col.groupByForColumn || Array.isArray(col.groupByForColumn)) {
+      return;
     }
-  );
+    const { groupByForColumn } = col;
+    const field = groupByForColumn.field || groupByForColumn.groupField;
+    const groupInfoForColumn = field ? groupByMap.get(field) : null;
+    if (!groupInfoForColumn) {
+      return;
+    }
+    computedGroupColumns[colId] = column;
+  });
   return computedGroupColumns;
 }
 function getColumnVisibilityForHideEmptyGroupColumns(params) {
@@ -17627,13 +17473,11 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
   } = params;
   const columnVisibility = __spreadValues({}, params.columnVisibility);
   if (!hideEmptyGroupColumns) {
-    computedGroupColumns.forEach(
-      (_column, colId) => {
-        if (columnVisibility[colId] === false) {
-          delete columnVisibility[colId];
-        }
+    Object.keys(computedGroupColumns).forEach((colId) => {
+      if (columnVisibility[colId] === false) {
+        delete columnVisibility[colId];
       }
-    );
+    });
     return columnVisibility;
   }
   if (!groupRowsIndexesInDataArray || !groupRowsIndexesInDataArray.length) {
@@ -17656,30 +17500,29 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
       break;
     }
   }
-  computedGroupColumns.forEach(
-    (column, colId) => {
-      const { groupByForColumn } = column;
-      if (Array.isArray(groupByForColumn)) {
-        return;
-      }
-      const field = groupByForColumn.field || groupByForColumn.groupField;
-      if (!field) {
-        return;
+  Object.keys(computedGroupColumns).forEach((colId) => {
+    const column = computedGroupColumns[colId];
+    const { groupByForColumn } = column;
+    if (Array.isArray(groupByForColumn)) {
+      return;
+    }
+    const field = groupByForColumn.field || groupByForColumn.groupField;
+    if (!field) {
+      return;
+    }
+    const groupInfoForColumn = groupByMap.get(field);
+    const index = groupInfoForColumn.groupIndex;
+    const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
+    if (shouldBeHidden) {
+      if (columnVisibility[colId] !== false) {
+        columnVisibility[colId] = false;
       }
-      const groupInfoForColumn = groupByMap.get(field);
-      const index = groupInfoForColumn.groupIndex;
-      const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
-      if (shouldBeHidden) {
-        if (columnVisibility[colId] !== false) {
-          columnVisibility[colId] = false;
-        }
-      } else {
-        if (columnVisibility.hasOwnProperty(colId)) {
-          delete columnVisibility[colId];
-        }
+    } else {
+      if (columnVisibility.hasOwnProperty(colId)) {
+        delete columnVisibility[colId];
       }
     }
-  );
+  });
   return columnVisibility;
 }
 
@@ -17745,13 +17588,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useComponentState();
-  useEffect25(() => {
+  useEffect23(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect25(() => {
+  useEffect23(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect25(() => {
+  useEffect23(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -17769,12 +17612,13 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     componentState: { columns, groupRenderStrategy }
   } = useComponentState();
   function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupByMap2, groupRenderStrategy2, toggleGroupRow2) {
-    const computedColumns = /* @__PURE__ */ new Map();
+    const computedColumns = {};
     if (groupRenderStrategy2 !== "inline") {
       return;
     }
-    columns2.forEach((column, id) => {
+    Object.keys(columns2).forEach((id) => {
       var _a, _b;
+      const column = columns2[id];
       let base = {};
       const groupByForColumn = groupByMap2.get(column.field);
       if (groupByForColumn && groupRenderStrategy2 === "inline") {
@@ -17828,11 +17672,11 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
         };
       }
       const clone = __spreadValues(__spreadValues({}, base), column);
-      computedColumns.set(id, clone);
+      computedColumns[id] = clone;
     });
-    return computedColumns.size === 0 ? void 0 : computedColumns;
+    return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
   }
-  useEffect25(() => {
+  useEffect23(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -17842,11 +17686,6 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
       );
     };
     update();
-    return interceptMap(columns, {
-      set: update,
-      delete: update,
-      clear: update
-    });
   }, [columns, groupByMap, groupRenderStrategy, toggleGroupRow]);
 }
 function useColumnsWhenGrouping() {
@@ -17868,7 +17707,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect25(() => {
+  useEffect23(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -17903,11 +17742,6 @@ function useColumnsWhenGrouping() {
       }
     };
     update();
-    return interceptMap(columns, {
-      set: update,
-      delete: update,
-      clear: update
-    });
   }, [
     columns,
     groupBy,
@@ -17949,7 +17783,7 @@ function useHideColumns(groupByMap) {
       return;
     }
     const currentState = getComponentState();
-    const computedGroupColumns = getGroupColumnsMapForComputedColumns(
+    const computedGroupColumns = getGroupColumnsForComputedColumns(
       computedColumns,
       groupByMap
     );
@@ -17977,7 +17811,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  useEffect25(() => {
+  useEffect23(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -17990,7 +17824,8 @@ function useHideColumns(groupByMap) {
     let updatedVisibilityWhenGrouping = false;
     let newlyHiddenColumns = /* @__PURE__ */ new Set();
     let newlyDisplayedColumns = /* @__PURE__ */ new Set();
-    computedColumns.forEach((col, id) => {
+    Object.keys(computedColumns).forEach((id) => {
+      const col = computedColumns[id];
       if (col.defaultHiddenWhenGroupedBy || hideColumnWhenGrouped2 != null) {
         const hideWhenGrouped = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || (col.defaultHiddenWhenGroupedBy === true || hideColumnWhenGrouped2) && col.field && groupByMap.get(col.field) || typeof col.defaultHiddenWhenGroupedBy === "string" && groupByMap.get(col.defaultHiddenWhenGroupedBy) || typeof col.defaultHiddenWhenGroupedBy === "object" && Object.keys(col.defaultHiddenWhenGroupedBy).reduce(
           (acc, field) => acc || groupByMap.has(field),
@@ -18049,7 +17884,7 @@ function getColumnsWhenGrouping(params) {
   if (groupRenderStrategy === "inline") {
     return { columns: void 0, groupColumnIds: [] };
   }
-  const computedColumns = /* @__PURE__ */ new Map();
+  const computedColumns = {};
   const groupColumnIds = [];
   if (groupRenderStrategy === "multi-column") {
     groupBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
@@ -18068,7 +17903,7 @@ function getColumnsWhenGrouping(params) {
       );
       const groupColumnId = generatedGroupColumn.id || `group-by-${groupByForColumn.field || groupByForColumn.groupField}`;
       groupColumnIds.push(groupColumnId);
-      computedColumns.set(groupColumnId, generatedGroupColumn);
+      computedColumns[groupColumnId] = generatedGroupColumn;
     });
   } else if (groupRenderStrategy === "single-column" && groupBy.length) {
     const singleGroupColumn = getSingleGroupColumn(
@@ -18084,17 +17919,19 @@ function getColumnsWhenGrouping(params) {
     );
     const groupColumnId = singleGroupColumn.id || "group-by";
     groupColumnIds.push(groupColumnId);
-    computedColumns.set(groupColumnId, singleGroupColumn);
+    computedColumns[groupColumnId] = singleGroupColumn;
   }
   if (pivotColumns) {
     const columnsByField = {};
-    columns.forEach((col) => {
+    Object.keys(columns).forEach((colId) => {
+      const col = columns[colId];
       if (col.field) {
         columnsByField[col.field] = col;
       }
     });
-    pivotColumns.forEach((col, key) => {
+    Object.keys(pivotColumns).forEach((key) => {
       var _a, _b;
+      const col = pivotColumns[key];
       const isSimpleTotalColumn = col.pivotTotalColumn && col.columnGroup;
       const isGrandTotalColumn = col.pivotTotalColumn && !col.columnGroup;
       if (isSimpleTotalColumn && pivotTotalColumnPosition === false) {
@@ -18116,7 +17953,7 @@ function getColumnsWhenGrouping(params) {
         }
       }
       if (column.inheritFromColumn !== false) {
-        const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns.get(column.inheritFromColumn) : ((_a = column.pivotAggregator) == null ? void 0 : _a.field) ? columnsByField[(_b = column.pivotAggregator) == null ? void 0 : _b.field] : void 0;
+        const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns[column.inheritFromColumn] : ((_a = column.pivotAggregator) == null ? void 0 : _a.field) ? columnsByField[(_b = column.pivotAggregator) == null ? void 0 : _b.field] : void 0;
         column = __spreadValues(__spreadValues({}, colToInheritFrom), column);
       }
       if (!column.render && column.renderValue) {
@@ -18124,38 +17961,22 @@ function getColumnsWhenGrouping(params) {
           return column.renderValue(renderOptions);
         };
       }
-      computedColumns.set(key, column);
+      computedColumns[key] = column;
     });
   } else {
-    columns.forEach((col, colId) => {
-      computedColumns.set(colId, col);
+    Object.keys(columns).forEach((colId) => {
+      const col = columns[colId];
+      computedColumns[colId] = col;
     });
   }
   return {
-    columns: computedColumns.size ? computedColumns : void 0,
+    columns: Object.keys(computedColumns).length ? computedColumns : void 0,
     groupColumnIds
   };
 }
 
 // src/components/InfiniteTable/hooks/useComputedColumns.ts
 import { useMemo as useMemo12 } from "react";
-
-// src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-import { useEffect as useEffect26 } from "react";
-var useRerenderOnKeyChange = (map2) => {
-  const [renderId, rerender] = useRerender();
-  useEffect26(() => {
-    const update = rafFn(rerender);
-    return interceptMap(map2, {
-      set: update,
-      clear: update,
-      delete: update
-    });
-  }, [map2]);
-  return renderId;
-};
-
-// src/components/InfiniteTable/hooks/useComputedColumns.ts
 var useComputedColumns = ({
   columns,
   bodySize,
@@ -18187,7 +18008,7 @@ var useComputedColumns = ({
   columnVisibilityAssumeVisible,
   columnSizing
 }) => {
-  const columnsRenderId = useRerenderOnKeyChange(columns);
+  const columnsRenderId = 1;
   const {
     computedRemainingSpace,
     computedColumnOrder,
@@ -18394,7 +18215,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState16, useEffect as useEffect27, useLayoutEffect as useLayoutEffect12 } from "react";
+import { useState as useState16, useEffect as useEffect24, useLayoutEffect as useLayoutEffect12 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -18403,7 +18224,7 @@ function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const [scrollbars, setScrollbars] = useState16(INITIAL_SCROLLBARS);
-  useEffect27(() => {
+  useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -18471,11 +18292,10 @@ function useComputed() {
       }
     );
   });
-  useEffect28(() => {
+  useEffect25(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
-  useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
   const columns = componentState.computedColumns;
   const {
@@ -18773,7 +18593,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.3.3"
+      version: "4.0.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -18784,18 +18604,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef25, useEffect as useEffect29 } from "react";
+import { useRef as useRef25, useEffect as useEffect26 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef25(false);
   const rafId = useRef25(null);
-  useEffect29(() => {
+  useEffect26(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  useEffect29(() => {
+  useEffect26(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -18823,18 +18643,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef26, useEffect as useEffect30 } from "react";
+import { useRef as useRef26, useEffect as useEffect27 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef26(false);
   const rafId = useRef26(null);
-  useEffect30(() => {
+  useEffect27(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  useEffect30(() => {
+  useEffect27(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -18863,7 +18683,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback22, useMemo as useMemo15, useEffect as useEffect31 } from "react";
+import { useCallback as useCallback22, useMemo as useMemo15, useEffect as useEffect28 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -19754,7 +19574,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  useEffect31(() => {
+  useEffect28(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -19809,13 +19629,13 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-import { useEffect as useEffect35 } from "react";
+import { useEffect as useEffect32 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
 import * as React55 from "react";
 import {
   useCallback as useCallback23,
-  useEffect as useEffect33,
+  useEffect as useEffect30,
   useLayoutEffect as useLayoutEffect13,
   useState as useState18
 } from "react";
@@ -20207,7 +20027,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React55.useRef(null);
-  useEffect33(() => {
+  useEffect30(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignOverlayNode(nodeRef.current, handle);
@@ -20793,10 +20613,10 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback24, useEffect as useEffect34, useRef as useRef28 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect31, useRef as useRef28 } from "react";
 function useMounted() {
   let mountedRef = useRef28(true);
-  useEffect34(() => {
+  useEffect31(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -21635,7 +21455,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect35(() => {
+  useEffect32(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -21650,7 +21470,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  useEffect35(() => {
+  useEffect32(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -21730,13 +21550,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-import { useEffect as useEffect36 } from "react";
+import { useEffect as useEffect33 } from "react";
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  useEffect36(() => {
+  useEffect33(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -21756,7 +21576,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  useEffect36(() => {
+  useEffect33(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -21778,7 +21598,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell == null ? void 0 : editingCell.active;
   const prevActive = usePrevious(active);
-  useEffect36(() => {
+  useEffect33(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -21791,7 +21611,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  useEffect36(() => {
+  useEffect33(() => {
     var _a, _b;
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
@@ -21815,7 +21635,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  useEffect36(() => {
+  useEffect33(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -21846,7 +21666,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect34 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 import * as React65 from "react";
@@ -21989,7 +21809,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect37(() => {
+  useEffect34(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -22025,7 +21845,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  useEffect37(() => {
+  useEffect34(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -22052,7 +21872,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-import { useEffect as useEffect38 } from "react";
+import { useEffect as useEffect35 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 import * as React66 from "react";
@@ -22197,7 +22017,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect38(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -22247,7 +22067,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  useEffect38(() => {
+  useEffect35(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -22283,7 +22103,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect38(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -22328,7 +22148,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  useEffect38(() => {
+  useEffect35(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -22696,6 +22516,49 @@ var keyboardShortcuts = {
   instantEdit
 };
 
+// src/components/hooks/useInterceptedMap.ts
+import { useEffect as useEffect37 } from "react";
+function interceptMap(map2, fns) {
+  const { set, delete: deleteKey, clear } = map2;
+  if (fns.set) {
+    map2.set = (key, value) => {
+      set.call(map2, key, value);
+      fns.set(key, value);
+      return map2;
+    };
+  }
+  if (fns.delete) {
+    map2.delete = (key) => {
+      const removed = deleteKey.call(map2, key);
+      fns.delete(key);
+      return removed;
+    };
+  }
+  if (fns.clear || fns.beforeClear) {
+    map2.clear = () => {
+      if (fns.beforeClear) {
+        fns.beforeClear(map2);
+      }
+      const result = clear.call(map2);
+      if (fns.clear) {
+        fns.clear();
+      }
+      return result;
+    };
+  }
+  return () => {
+    if (set) {
+      map2.set = set;
+    }
+    if (deleteKey) {
+      map2.delete = deleteKey;
+    }
+    if (clear) {
+      map2.clear = clear;
+    }
+  };
+}
+
 // src/utils/FixedSizeSet.ts
 var _FixedSizeSet = class {
   constructor(clone, size) {