@infinite-table/infinite-react 3.3.3 → 4.0.0

package/index.dev.js

@@ -5711,11 +5711,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.`
@@ -5732,7 +5732,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;
     }
@@ -5753,7 +5753,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,
@@ -5844,7 +5844,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);
@@ -9623,7 +9624,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];
@@ -10065,10 +10066,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(
@@ -11801,46 +11802,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") {
@@ -11860,18 +11840,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;
@@ -11897,42 +11874,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`;
@@ -11957,10 +11928,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;
         });
       }
     }
@@ -16879,7 +16847,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react52 = require("react");
+var import_react49 = require("react");
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -17070,134 +17038,11 @@ var MultiRowSelector = class {
   }
 };
 
-// src/components/InfiniteTable/hooks/useColumnGroups.ts
-var import_react42 = require("react");
-
-// src/components/hooks/useInterceptedMap.ts
-var import_react41 = require("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();
-  (0, import_react42.useEffect)(() => {
-    const recompute = () => {
-      componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
-    };
-    const update = rafFn(recompute);
-    return interceptMap(computedColumnGroups, {
-      clear: update,
-      delete: update,
-      set: update
-    });
-  }, [computedColumnGroups]);
-  (0, import_react42.useEffect)(() => {
-    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
-var import_react43 = require("react");
+var import_react41 = require("react");
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = (0, import_react43.useMemo)(() => {
+  const rowspan = (0, import_react41.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter(
       (col) => typeof col.rowspan === "function"
     );
@@ -17225,10 +17070,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react44 = require("react");
+var import_react42 = require("react");
 var debug5 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = (0, import_react44.useCallback)(
+  const columnSize = (0, import_react42.useCallback)(
     (index) => {
       const column = columns[index];
       if (false) {
@@ -17242,10 +17087,10 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react47 = require("react");
+var import_react45 = require("react");
 
 // src/components/InfiniteTable/state/getInitialState.ts
-var import_react45 = require("react");
+var import_react43 = require("react");
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -17282,22 +17127,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
@@ -17328,7 +17178,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) => {
@@ -17348,7 +17198,7 @@ function initSetupState2({
   if (false) {
     globalThis.renderer = renderer;
   }
-  const domRef = (0, import_react45.createRef)();
+  const domRef = (0, import_react43.createRef)();
   return {
     renderer,
     onRenderUpdater,
@@ -17368,12 +17218,12 @@ function initSetupState2({
     brain,
     headerBrain,
     domRef,
-    columnMenuTargetRef: (0, import_react45.createRef)(),
-    editingValueRef: (0, import_react45.createRef)(),
-    scrollerDOMRef: (0, import_react45.createRef)(),
-    portalDOMRef: (0, import_react45.createRef)(),
-    focusDetectDOMRef: (0, import_react45.createRef)(),
-    activeCellIndicatorDOMRef: (0, import_react45.createRef)(),
+    columnMenuTargetRef: (0, import_react43.createRef)(),
+    editingValueRef: (0, import_react43.createRef)(),
+    scrollerDOMRef: (0, import_react43.createRef)(),
+    portalDOMRef: (0, import_react43.createRef)(),
+    focusDetectDOMRef: (0, import_react43.createRef)(),
+    activeCellIndicatorDOMRef: (0, import_react43.createRef)(),
     onColumnMenuClick: buildSubscriptionCallback(),
     cellContextMenu: buildSubscriptionCallback(),
     contextMenu: buildSubscriptionCallback(),
@@ -17404,7 +17254,7 @@ function initSetupState2({
     editingCell: null
   };
 }
-var forwardProps4 = (setupState) => {
+var forwardProps4 = (_setupState) => {
   return {
     debugId: 1,
     scrollTopKey: 1,
@@ -17490,7 +17340,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 || {},
@@ -17504,7 +17354,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) {
@@ -17621,26 +17471,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) {
@@ -17654,13 +17500,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) {
@@ -17683,42 +17527,41 @@ 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;
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react46 = require("react");
+var import_react44 = require("react");
 function useToggleGroupRow() {
   const {
     getState: getDataSourceState,
     componentActions: dataSourceActions,
     getDataSourceMasterContext
   } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react46.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react44.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -17758,7 +17601,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  return (0, import_react47.useMemo)(() => getGroupByMap(groupBy), [groupBy]);
+  return (0, import_react45.useMemo)(() => getGroupByMap(groupBy), [groupBy]);
 }
 function useColumnsWhen() {
   const {
@@ -17772,13 +17615,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useComponentState();
-  (0, import_react47.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -17796,12 +17639,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") {
@@ -17855,11 +17699,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;
   }
-  (0, import_react47.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -17869,11 +17713,6 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
       );
     };
     update();
-    return interceptMap(columns, {
-      set: update,
-      delete: update,
-      clear: update
-    });
   }, [columns, groupByMap, groupRenderStrategy, toggleGroupRow]);
 }
 function useColumnsWhenGrouping() {
@@ -17895,7 +17734,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react47.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -17930,11 +17769,6 @@ function useColumnsWhenGrouping() {
       }
     };
     update();
-    return interceptMap(columns, {
-      set: update,
-      delete: update,
-      clear: update
-    });
   }, [
     columns,
     groupBy,
@@ -17971,12 +17805,12 @@ function useHideColumns(groupByMap) {
       groupRenderStrategy
     }
   } = useComponentState();
-  (0, import_react47.useLayoutEffect)(() => {
+  (0, import_react45.useLayoutEffect)(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
     const currentState = getComponentState();
-    const computedGroupColumns = getGroupColumnsMapForComputedColumns(
+    const computedGroupColumns = getGroupColumnsForComputedColumns(
       computedColumns,
       groupByMap
     );
@@ -18004,7 +17838,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -18017,7 +17851,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),
@@ -18076,7 +17911,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) => {
@@ -18095,7 +17930,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(
@@ -18111,17 +17946,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) {
@@ -18143,7 +17980,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) {
@@ -18151,38 +17988,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
-var import_react49 = require("react");
-
-// src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var import_react48 = require("react");
-var useRerenderOnKeyChange = (map2) => {
-  const [renderId, rerender] = useRerender();
-  (0, import_react48.useEffect)(() => {
-    const update = rafFn(rerender);
-    return interceptMap(map2, {
-      set: update,
-      clear: update,
-      delete: update
-    });
-  }, [map2]);
-  return renderId;
-};
-
-// src/components/InfiniteTable/hooks/useComputedColumns.ts
+var import_react46 = require("react");
 var useComputedColumns = ({
   columns,
   bodySize,
@@ -18214,7 +18035,7 @@ var useComputedColumns = ({
   columnVisibilityAssumeVisible,
   columnSizing
 }) => {
-  const columnsRenderId = useRerenderOnKeyChange(columns);
+  const columnsRenderId = 1;
   const {
     computedRemainingSpace,
     computedColumnOrder,
@@ -18234,7 +18055,7 @@ var useComputedColumns = ({
     computedColumnsMap,
     computedColumnsMapInInitialOrder,
     fieldsToColumn
-  } = (0, import_react49.useMemo)(() => {
+  } = (0, import_react46.useMemo)(() => {
     return getComputedColumns({
       columns,
       scrollbarWidth: scrollbarWidth2,
@@ -18318,7 +18139,7 @@ var useComputedColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useComputedRowHeight.ts
-var import_react50 = require("react");
+var import_react47 = require("react");
 var RowSizeCache = class {
   constructor() {
     this.rowHeight = /* @__PURE__ */ new Map();
@@ -18404,7 +18225,7 @@ function getComputedRowHeight(param, cache) {
   return result;
 }
 function useComputedRowHeight(param) {
-  return (0, import_react50.useMemo)(() => {
+  return (0, import_react47.useMemo)(() => {
     const computedRowSizeCache = new RowSizeCache();
     const computedRowHeight = getComputedRowHeight(param, computedRowSizeCache);
     return {
@@ -18421,7 +18242,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-var import_react51 = require("react");
+var import_react48 = require("react");
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -18429,8 +18250,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = (0, import_react51.useState)(INITIAL_SCROLLBARS);
-  (0, import_react51.useEffect)(() => {
+  const [scrollbars, setScrollbars] = (0, import_react48.useState)(INITIAL_SCROLLBARS);
+  (0, import_react48.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -18439,7 +18260,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  (0, import_react51.useLayoutEffect)(() => {
+  (0, import_react48.useLayoutEffect)(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -18479,7 +18300,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react52.useState)(() => {
+  (0, import_react49.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight2) => {
       if (rowHeight2) {
         componentActions.rowHeight = rowHeight2;
@@ -18498,11 +18319,10 @@ function useComputed() {
       }
     );
   });
-  (0, import_react52.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
-  useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
   const columns = componentState.computedColumns;
   const {
@@ -18566,14 +18386,14 @@ function useComputed() {
   const scrollbars = useScrollbars(brain);
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
-  const [multiRowSelector] = (0, import_react52.useState)(() => {
+  const [multiRowSelector] = (0, import_react49.useState)(() => {
     const multiRowSelector2 = new MultiRowSelector({
       getIdForIndex: (index) => getDataSourceState().dataArray[index].id
     });
     return multiRowSelector2;
   });
   const getComputedVisibleColumns = useLatest(computedVisibleColumns);
-  const [multiCellSelector] = (0, import_react52.useState)(() => {
+  const [multiCellSelector] = (0, import_react49.useState)(() => {
     return new MultiCellSelector({
       getPrimaryKeyByIndex: dataSourceApi.getPrimaryKeyByIndex,
       getColumnIdByIndex: (colIndex) => {
@@ -18623,7 +18443,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react53 = require("react");
+var import_react50 = require("react");
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -18794,13 +18614,13 @@ var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
   const masterContext = useMasterDetailContext();
   const isDetail = !!masterContext;
-  const valid = (0, import_react53.useMemo)(() => {
+  const valid = (0, import_react50.useMemo)(() => {
     if (isDetail) {
       return true;
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.3.3"
+      version: "4.0.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -18811,18 +18631,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-var import_react54 = require("react");
+var import_react51 = require("react");
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
-  const didScrollRef = (0, import_react54.useRef)(false);
-  const rafId = (0, import_react54.useRef)(null);
-  (0, import_react54.useEffect)(() => {
+  const didScrollRef = (0, import_react51.useRef)(false);
+  const rafId = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -18850,18 +18670,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-var import_react55 = require("react");
+var import_react52 = require("react");
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
-  const didScrollRef = (0, import_react55.useRef)(false);
-  const rafId = (0, import_react55.useRef)(null);
-  (0, import_react55.useEffect)(() => {
+  const didScrollRef = (0, import_react52.useRef)(false);
+  const rafId = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -18890,7 +18710,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-var import_react56 = require("react");
+var import_react53 = require("react");
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -19753,7 +19573,7 @@ function useEventHandlersContext() {
     componentActions: dataSourceActions,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const context = (0, import_react56.useMemo)(() => {
+  const context = (0, import_react53.useMemo)(() => {
     const context2 = {
       getComputed,
       getDataSourceMasterContext,
@@ -19781,7 +19601,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  (0, import_react56.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -19825,7 +19645,7 @@ function handleDOMEvents() {
 }
 function subscribeToDOMEvents() {
   const { getState } = useInfiniteTable();
-  const onKeyDown2 = (0, import_react56.useCallback)((event) => {
+  const onKeyDown2 = (0, import_react53.useCallback)((event) => {
     getState().keyDown(event);
   }, []);
   return { onKeyDown: onKeyDown2 };
@@ -19836,11 +19656,11 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-var import_react61 = require("react");
+var import_react58 = require("react");
 
 // src/components/hooks/useOverlay/index.tsx
 var React55 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react54 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/utils/pageGeometry/Point.ts
@@ -20229,7 +20049,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React55.useRef(null);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignOverlayNode(nodeRef.current, handle);
@@ -20240,7 +20060,7 @@ function OverlayContent(props) {
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
-      ref: (0, import_react57.useCallback)((node) => {
+      ref: (0, import_react54.useCallback)((node) => {
         if (node) {
           alignOverlayNode(node, props);
         }
@@ -20290,8 +20110,8 @@ function alignOverlayNode(node, params) {
   });
 }
 function useOverlayPortal(content, portalContainer) {
-  const [container, setContainer] = (0, import_react57.useState)(null);
-  (0, import_react57.useLayoutEffect)(() => {
+  const [container, setContainer] = (0, import_react54.useState)(null);
+  (0, import_react54.useLayoutEffect)(() => {
     function getContainer() {
       return __async(this, null, function* () {
         const container2 = portalContainer ? yield retrieveElement(portalContainer) : null;
@@ -20339,10 +20159,10 @@ globalThis.allhandles = {};
 globalThis.thehandles = {};
 function useOverlay(params) {
   const rootParams = params;
-  const [handles] = (0, import_react57.useState)(() => /* @__PURE__ */ new Map());
-  const [handleToRealign, setHandleToRealign] = (0, import_react57.useState)(null);
-  const [realignTimestamp, setRealignTimestamp] = (0, import_react57.useState)(0);
-  const getContentForPortal = (0, import_react57.useCallback)(() => {
+  const [handles] = (0, import_react54.useState)(() => /* @__PURE__ */ new Map());
+  const [handleToRealign, setHandleToRealign] = (0, import_react54.useState)(null);
+  const [realignTimestamp, setRealignTimestamp] = (0, import_react54.useState)(0);
+  const getContentForPortal = (0, import_react54.useCallback)(() => {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
@@ -20356,7 +20176,7 @@ function useOverlay(params) {
     getContentForPortal(),
     params.portalContainer
   );
-  const showOverlay = (0, import_react57.useCallback)(
+  const showOverlay = (0, import_react54.useCallback)(
     (content, params2) => {
       const id = params2.id || getIdForReactOnlyChild(content) || getChangeDetect();
       const key = `${id}`;
@@ -20583,7 +20403,7 @@ var deriveStateFromProps2 = (params) => {
 
 // src/components/Menu/Menu.tsx
 var React58 = __toESM(require("react"));
-var import_react60 = require("react");
+var import_react57 = require("react");
 
 // src/utils/pageGeometry/Triangle.ts
 var Triangle = class extends ConvexPoly {
@@ -20802,24 +20622,24 @@ var MenuTriangleContext = class {
 };
 
 // src/components/Menu/MenuContext.ts
-var import_react58 = require("react");
-var MenuContext = (0, import_react58.createContext)(null);
+var import_react55 = require("react");
+var MenuContext = (0, import_react55.createContext)(null);
 function useMenuContext() {
-  const contextValue = (0, import_react58.useContext)(MenuContext);
+  const contextValue = (0, import_react55.useContext)(MenuContext);
   return contextValue;
 }
 
 // src/components/hooks/useMounted.ts
-var import_react59 = require("react");
+var import_react56 = require("react");
 function useMounted() {
-  let mountedRef = (0, import_react59.useRef)(true);
-  (0, import_react59.useEffect)(() => {
+  let mountedRef = (0, import_react56.useRef)(true);
+  (0, import_react56.useEffect)(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const isMounted = (0, import_react59.useCallback)(() => mountedRef.current, []);
+  const isMounted = (0, import_react56.useCallback)(() => mountedRef.current, []);
   return isMounted;
 }
 
@@ -20915,7 +20735,7 @@ function useSubmenus({
   onItemActivate
 }) {
   const { getState } = useMenuContext();
-  const [{ onItemEnter, onItemLeave }] = (0, import_react60.useState)(() => {
+  const [{ onItemEnter, onItemLeave }] = (0, import_react57.useState)(() => {
     return new MenuTriangleContext({
       parentMenuId: getState().parentMenuId,
       onItemActivate: (itemKey) => {
@@ -20946,8 +20766,8 @@ function useSubmenus({
     }).getHandlers();
   });
   return {
-    onItemEnter: (0, import_react60.useCallback)(onItemEnter, []),
-    onItemLeave: (0, import_react60.useCallback)(onItemLeave, [])
+    onItemEnter: (0, import_react57.useCallback)(onItemEnter, []),
+    onItemLeave: (0, import_react57.useCallback)(onItemLeave, [])
   };
 }
 function MenuComponent(props) {
@@ -20972,16 +20792,16 @@ function MenuComponent(props) {
     componentActions,
     getState
   } = useMenuContext();
-  const setKeyboardActiveItemKey = (0, import_react60.useCallback)((key) => {
+  const setKeyboardActiveItemKey = (0, import_react57.useCallback)((key) => {
     componentActions.keyboardActiveItemKey = key;
   }, []);
-  const setActiveItemKey = (0, import_react60.useCallback)((key) => {
+  const setActiveItemKey = (0, import_react57.useCallback)((key) => {
     componentActions.activeItemKey = key;
   }, []);
   const isMounted = useMounted();
-  const [submenuApi, setSubmenuApi] = (0, import_react60.useState)(null);
+  const [submenuApi, setSubmenuApi] = (0, import_react57.useState)(null);
   let renderedChildren = null;
-  (0, import_react60.useLayoutEffect)(() => {
+  (0, import_react57.useLayoutEffect)(() => {
     const { runtimeItems: runtimeItems2 } = getState();
     const activeItem = runtimeItems2.filter(
       (item) => item.type === "item" && activeItemKey === item.key
@@ -21192,7 +21012,7 @@ function MenuComponent(props) {
   function onMenuBlur() {
     componentActions.focused = false;
   }
-  const onMenuFocus = (0, import_react60.useCallback)(function() {
+  const onMenuFocus = (0, import_react57.useCallback)(function() {
     componentActions.focused = true;
     setTimeout(() => {
       var _a, _b;
@@ -21203,13 +21023,13 @@ function MenuComponent(props) {
       }
     });
   }, []);
-  const shouldSelectFirstItemOnFocus = (0, import_react60.useRef)(true);
-  const hideAll = (0, import_react60.useCallback)(() => {
+  const shouldSelectFirstItemOnFocus = (0, import_react57.useRef)(true);
+  const hideAll = (0, import_react57.useCallback)(() => {
     var _a;
     const state = getState();
     (_a = state.onHideIntent) == null ? void 0 : _a.call(state, state);
   }, [getState]);
-  const [api] = (0, import_react60.useState)(() => {
+  const [api] = (0, import_react57.useState)(() => {
     const result2 = {
       hideMenu: hideAll,
       focus: () => {
@@ -21228,7 +21048,7 @@ function MenuComponent(props) {
     };
     return result2;
   });
-  const refCallback = (0, import_react60.useCallback)((node) => {
+  const refCallback = (0, import_react57.useCallback)((node) => {
     if (node) {
       domRef.current = node;
       onShow == null ? void 0 : onShow(getState(), api);
@@ -21652,7 +21472,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react61.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -21667,7 +21487,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  (0, import_react61.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -21702,7 +21522,7 @@ function useColumnMenu() {
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
 var React62 = __toESM(require("react"));
-var import_react62 = require("react");
+var import_react59 = require("react");
 var style = {
   width: 0,
   height: 0,
@@ -21722,7 +21542,7 @@ function FocusDetect() {
   } = useInfiniteTable();
   const { getState: getDataSourceState, getDataSourceMasterContext } = useDataSourceContextValue();
   const { focusDetectDOMRef } = getState();
-  const onFocus = (0, import_react62.useCallback)(() => __async(this, null, function* () {
+  const onFocus = (0, import_react59.useCallback)(() => __async(this, null, function* () {
     const context = {
       getDataSourceState,
       getDataSourceMasterContext,
@@ -21747,13 +21567,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-var import_react63 = require("react");
+var import_react60 = require("react");
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  (0, import_react63.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -21773,7 +21593,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  (0, import_react63.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -21795,7 +21615,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell == null ? void 0 : editingCell.active;
   const prevActive = usePrevious(active);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -21808,7 +21628,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  (0, import_react63.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     var _a, _b;
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
@@ -21832,7 +21652,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  (0, import_react63.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -21863,7 +21683,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-var import_react64 = require("react");
+var import_react61 = require("react");
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 var React65 = __toESM(require("react"));
@@ -22006,7 +21826,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react64.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -22042,7 +21862,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -22069,7 +21889,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-var import_react65 = require("react");
+var import_react62 = require("react");
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 var React66 = __toESM(require("react"));
@@ -22214,7 +22034,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react65.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -22264,7 +22084,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -22300,7 +22120,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react65.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -22345,7 +22165,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -22713,6 +22533,49 @@ var keyboardShortcuts = {
   instantEdit
 };
 
+// src/components/hooks/useInterceptedMap.ts
+var import_react63 = require("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) {