@infinite-table/infinite-react 6.2.10 → 6.2.12

package/index.dev.js

@@ -143,7 +143,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React71 = __toESM(require("react"));
+var React70 = __toESM(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -152,6 +152,49 @@ var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
 var React2 = __toESM(require("react"));
 var import_react2 = require("react");
 
+// src/components/utils/buildSubscriptionCallback.tsx
+function buildSubscriptionCallback(withRaf = false) {
+  let lastCallValue = null;
+  let fns = [];
+  let rafId = null;
+  const updater = (items, callback) => {
+    const results = [];
+    if (withRaf) {
+      if (rafId != null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      requestAnimationFrame(() => {
+        lastCallValue = items;
+        rafId = null;
+        for (let i = 0, len = fns.length; i < len; i++) {
+          results.push(fns[i](items));
+        }
+        callback?.(results);
+      });
+    } else {
+      lastCallValue = items;
+      for (let i = 0, len = fns.length; i < len; i++) {
+        results.push(fns[i](items));
+      }
+      callback?.(results);
+    }
+  };
+  updater.get = () => lastCallValue;
+  updater.onChange = (fn) => {
+    fns.push(fn);
+    return () => {
+      fns = fns.filter((f) => f !== fn);
+    };
+  };
+  updater.destroy = () => {
+    updater(null);
+    fns.length = 0;
+  };
+  updater.getListenersCount = () => fns.length;
+  return updater;
+}
+
 // src/utils/DeepMap/once.ts
 function once(fn) {
   let called = false;
@@ -782,6 +825,7 @@ var COLORS = [
 ];
 var COLOR_SYMBOL = Symbol("color");
 var USED_COLORS_MAP = /* @__PURE__ */ new WeakMap();
+var GLOBAL_LOG_INTENT = buildSubscriptionCallback();
 function initUsedColors(colors = COLORS) {
   USED_COLORS_MAP.set(
     colors,
@@ -832,7 +876,7 @@ function isChannelTargeted(channel, permissionToken) {
   }
   return void 0;
 }
-function isLoggingEnabled(channel, permissions) {
+function isChannelEnabled(channel, permissions) {
   const cacheKey = `channel=${channel}_permissions=${permissions}`;
   if (enabledChannelsCache.has(cacheKey)) {
     return enabledChannelsCache.get(cacheKey);
@@ -893,20 +937,32 @@ function debugPackage(channelName) {
   function debugFactory(channelName2, parentChannel) {
     const channel = parentChannel ? `${parentChannel}${CHANNEL_SEPARATOR}${channelName2}` : channelName2;
     const channelParts = channel.split(CHANNEL_SEPARATOR);
-    if (loggers.has(channelParts)) {
-      return loggers.get(channelParts);
+    const foundLogger = loggers.get(channelParts);
+    if (foundLogger) {
+      return foundLogger;
     }
     const parentLogger = loggers.get(channelParts.slice(0, -1));
     const defaultLogFn = (parentLogger ? parentLogger.logFn : debug.logFn) ?? defaultLogger;
     let logFn = defaultLogFn;
     let enabled;
     let lastMessageTimestamp = 0;
-    const isEnabled = () => enabled ?? isLoggingEnabled(channel, storageKeyValue);
+    const isEnabled = () => enabled ?? isChannelEnabled(channel, storageKeyValue);
     const color = getNextColor(debug.colors);
-    const logger3 = Object.defineProperties(
+    const logger2 = Object.defineProperties(
       (...args) => {
-        if (isLoggingEnabled(channel, storageKeyValue)) {
-          const now = Date.now();
+        const intentListenersCount = GLOBAL_LOG_INTENT.getListenersCount();
+        let now;
+        if (intentListenersCount > 0) {
+          now = now ?? Date.now();
+          GLOBAL_LOG_INTENT({
+            color,
+            channel,
+            args,
+            timestamp: now
+          });
+        }
+        if (isEnabled()) {
+          now = now ?? Date.now();
           if (lastMessageTimestamp && logDiffs) {
             const diff = now - lastMessageTimestamp;
             logFn(`%c[${channel}]`, `color: ${color}`, `+${diff}ms:`);
@@ -964,7 +1020,10 @@ function debugPackage(channelName) {
           }
         },
         enabled: {
-          get: () => isEnabled()
+          get: () => isEnabled(),
+          set: (value) => {
+            enabled = value;
+          }
         },
         logFn: {
           configurable: false,
@@ -980,8 +1039,8 @@ function debugPackage(channelName) {
         }
       }
     );
-    loggers.set(channelParts, logger3);
-    return logger3;
+    loggers.set(channelParts, logger2);
+    return logger2;
   }
   return debugFactory(channelName);
 }
@@ -997,22 +1056,45 @@ Object.defineProperty(debugPackage, "enable", {
 var debug = debugPackage;
 debug.colors = COLORS;
 debug.logFn = defaultLogger;
+var onLogIntentGlobal = (intentChannel, fn) => {
+  return GLOBAL_LOG_INTENT.onChange((options) => {
+    if (!options) {
+      return;
+    }
+    const { channel, args, color, timestamp } = options;
+    if (isChannelTargeted(channel, intentChannel)) {
+      fn({
+        channel,
+        color,
+        args,
+        timestamp
+      });
+    }
+  });
+};
+debug.onLogIntent = onLogIntentGlobal;
 debug.destroyAll = () => {
   initUsedColors();
   initUsedColors(debug.colors);
   loggers.clear();
   enabledChannelsCache.clear();
 };
+if (false) {
+  globalThis.debugPackage = debug;
+}
 
-// src/utils/debug.ts
-var debugTable = debug(`InfiniteTable`);
+// src/utils/debugLoggers.ts
 var dbg = (channelName) => {
-  const result = debugTable.extend(channelName);
+  const result = debug(
+    channelName ? `${channelName}:TYPE=debug` : "TYPE=debug"
+  );
   result.logFn = console.log.bind(console);
   return result;
 };
 var err = (channelName) => {
-  const result = debugTable.extend(`${channelName}:error`);
+  const result = debug(
+    channelName ? `${channelName}:TYPE=error` : "TYPE=error"
+  );
   result.logFn = console.error.bind(console);
   return result;
 };
@@ -1363,49 +1445,6 @@ function AvoidReactDiffFn(props) {
 }
 var AvoidReactDiff = React8.memo(AvoidReactDiffFn);
 
-// src/components/utils/buildSubscriptionCallback.tsx
-function buildSubscriptionCallback(withRaf = false) {
-  let lastCallValue = null;
-  let fns = [];
-  let rafId = null;
-  const updater = (items, callback) => {
-    const results = [];
-    if (withRaf) {
-      if (rafId != null) {
-        cancelAnimationFrame(rafId);
-        rafId = null;
-      }
-      requestAnimationFrame(() => {
-        lastCallValue = items;
-        rafId = null;
-        for (let i = 0, len = fns.length; i < len; i++) {
-          results.push(fns[i](items));
-        }
-        callback?.(results);
-      });
-    } else {
-      lastCallValue = items;
-      for (let i = 0, len = fns.length; i < len; i++) {
-        results.push(fns[i](items));
-      }
-      callback?.(results);
-    }
-  };
-  updater.get = () => lastCallValue;
-  updater.onChange = (fn) => {
-    fns.push(fn);
-    return () => {
-      fns = fns.filter((f) => f !== fn);
-    };
-  };
-  updater.destroy = () => {
-    updater(null);
-    fns.length = 0;
-  };
-  updater.getListenersCount = () => fns.length;
-  return updater;
-}
-
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
   let node = el;
@@ -1453,7 +1492,7 @@ var internalProps = {
 };
 
 // src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)", virtualScrollLeftOffset: "var(--_16hkbkct)", virtualScrollTopOffset: "var(--_16hkbkcu)" };
+var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)" };
 
 // src/components/InfiniteTable/vars.css.ts
 var CSS_LOADED_VALUE = "true";
@@ -1623,6 +1662,15 @@ function getGreatestCountVisibleInSize(availableSize, itemSizes) {
   return maxCount < 0 ? len : Math.min(maxCount, len);
 }
 
+// src/utils/debugChannel.ts
+var PREFIX = "DebugID=";
+function getDebugChannel(debugId, channel) {
+  if (channel && channel.startsWith(PREFIX)) {
+    return channel;
+  }
+  return channel ? `${PREFIX}${debugId}:${channel}` : `${PREFIX}${debugId}`;
+}
+
 // src/components/VirtualBrain/MatrixBrain.ts
 var DEFAULT_EXTEND_BY = {
   start: 0,
@@ -1652,7 +1700,7 @@ function defaultShouldUpdateRenderCount(options) {
 }
 var MatrixBrain = class extends Logger {
   constructor(name) {
-    const logName = `MatrixBrain${name ? `:${name}` : ""}`;
+    const logName = getDebugChannel(name, `${name}:MatrixBrain`);
     super(logName);
     this.scrolling = false;
     this.RENDER_COUNT_SAFETY_MARGIN_START = 1;
@@ -2442,7 +2490,7 @@ var MatrixBrain = class extends Logger {
         height: this.availableRenderHeight ?? this.availableHeight
       };
     };
-    this.name = name || "MatrixBrain";
+    this.name = logName;
     this.update = this.update.bind(this);
     this.destroy = this.destroy.bind(this);
     this.getCellOffset = this.getCellOffset.bind(this);
@@ -5044,9 +5092,9 @@ var HorizontalLayoutTableRenderer = class extends GridRenderer {
 
 // src/components/HeadlessTable/createRenderer.ts
 function createRenderer(brain) {
-  const renderer = !brain.isHorizontalLayoutBrain ? new GridRenderer(brain, `ReactHeadlessTableRenderer:${brain.name}`) : new HorizontalLayoutTableRenderer(
+  const renderer = !brain.isHorizontalLayoutBrain ? new GridRenderer(brain, `${brain.name}:ReactHeadlessTableRenderer`) : new HorizontalLayoutTableRenderer(
     brain,
-    `HorizontalLayoutTableRenderer:${brain.name}`
+    `${brain.name}:HorizontalLayoutTableRenderer`
   );
   const onRenderUpdater = buildSubscriptionCallback();
   brain.onDestroy(() => {
@@ -5407,8 +5455,6 @@ var CELL_DETACHED_CLASSNAMES = [
 ];
 
 // src/components/HeadlessTable/index.tsx
-var virtualScrollLeftOffset = stripVar(InternalVars.virtualScrollLeftOffset);
-var virtualScrollTopOffset = stripVar(InternalVars.virtualScrollTopOffset);
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
     brain.updateFixedCells({
@@ -5482,25 +5528,14 @@ function HeadlessTable(props) {
   }, [wrapRowsHorizontally, brain]);
   const updateDOMTransform = (0, import_react10.useCallback)((scrollPos) => {
     requestAnimationFrame(() => {
-      const scrollVarHost = scrollVarHostRef?.current;
-      if (!scrollVarHost) {
-        if (!domRef.current) {
-          return;
-        }
-        domRef.current.style.setProperty(
-          "transform",
-          `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
-        );
+      if (!domRef.current) {
         return;
       }
-      scrollVarHost.style.setProperty(
-        virtualScrollLeftOffset,
-        `-${scrollPos.scrollLeft}px`
-      );
-      scrollVarHost.style.setProperty(
-        virtualScrollTopOffset,
-        `-${scrollPos.scrollTop}px`
+      domRef.current.style.setProperty(
+        "transform",
+        `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
       );
+      return;
     });
   }, []);
   const onContainerScroll = (0, import_react10.useCallback)(
@@ -5918,8 +5953,10 @@ function buildManagedComponent(config) {
         }
       });
       if (updatedPropsToStateCount > 0 || newMappedStateCount > 0) {
-        const logger3 = config.debugName ? dbg(`${config.debugName}:rerender`) : dbg("rerender");
-        logger3(
+        const logger2 = config.debugName ? dbg(
+          typeof config.debugName === "function" ? `${config.debugName(currentProps)}:rerender` : `${config.debugName}:rerender`
+        ) : dbg("rerender");
+        logger2(
           "Triggered by new values for the following props",
           ...[
             ...Object.keys(newMappedState ?? {}),
@@ -9718,6 +9755,8 @@ function InfiniteTableColumnCellFn(props) {
     column,
     onMouseLeave,
     onMouseEnter,
+    onRowMouseEnter,
+    onRowMouseLeave,
     // toggleGroupRow,
     rowIndex,
     rowHeight,
@@ -9789,6 +9828,24 @@ function InfiniteTableColumnCellFn(props) {
   const { align: align2, verticalAlign } = renderParams;
   const renderParam = renderParams;
   const renderParamRef = React37.useRef(renderParam);
+  const handleMouseEnter = onRowMouseEnter && onMouseEnter ? (event) => {
+    const rowInfoDiscriminator = formattedValueContext;
+    const rowContext = {
+      ...rowInfoDiscriminator,
+      rowIndex
+    };
+    onRowMouseEnter(rowContext, event);
+    onMouseEnter(event);
+  } : onMouseEnter;
+  const handleMouseLeave = onRowMouseLeave && onMouseLeave ? (event) => {
+    const rowContext = {
+      ...formattedValueContext,
+      rowIndex,
+      rowInfo
+    };
+    onRowMouseLeave(rowContext, event);
+    onMouseLeave(event);
+  } : onMouseLeave;
   const onClick = (0, import_react24.useCallback)(
     (event) => {
       const colIndex = column.computedVisibleIndex;
@@ -10142,8 +10199,8 @@ function InfiniteTableColumnCellFn(props) {
     rowId: rowInfo.id,
     horizontalLayoutPageIndex,
     style: memoizedStyle,
-    onMouseLeave,
-    onMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter,
     onClick,
     afterChildren,
     onMouseDown,
@@ -11543,6 +11600,18 @@ function InfiniteTableHeaderFn(props) {
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
   const domRef = (0, import_react31.useRef)(null);
+  const updateDOMTransform = (0, import_react31.useCallback)((scrollPosition) => {
+    if (domRef.current) {
+      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
+    }
+  }, []);
+  (0, import_react31.useEffect)(() => {
+    const removeOnScroll = headerBrain.onScroll(updateDOMTransform);
+    updateDOMTransform(
+      headerBrain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
+    );
+    return removeOnScroll;
+  }, [headerBrain]);
   const domProps = {
     ref: domRef,
     className: join(
@@ -13835,7 +13904,6 @@ var RowSelectionState = class {
 };
 
 // src/components/DataSource/CellSelectionState.ts
-var debug3 = dbg("CellSelectionState");
 var WILDCARD = "*";
 var CellSelectionState = class {
   constructor(clone) {
@@ -13846,6 +13914,7 @@ var CellSelectionState = class {
     this.deselectedRowsToColumns = /* @__PURE__ */ new Map();
     this.deselectedColumnsToRows = /* @__PURE__ */ new Map();
     this.defaultSelection = false;
+    this.debugId = "";
     this.deselectAll = () => {
       this.update({
         defaultSelection: false,
@@ -14091,12 +14160,17 @@ var CellSelectionState = class {
     }
     return false;
   }
+  // private debug(message: string) {
+  //   const debug = dbg(`${this.debugId}:CellSelectionState`);
+  //   debug(message);
+  // }
+  error(message) {
+    const error4 = err(`${this.debugId}:CellSelectionState`);
+    error4(message);
+  }
   isCellSelected(rowId, colId) {
     if (rowId === this.wildcard || colId === this.wildcard) {
-      console.error(
-        `CellSelectionState.isCellSelected should not be called with wildcard`
-      );
-      debug3(
+      this.error(
         `CellSelectionState.isCellSelected should not be called with wildcard`
       );
       return false;
@@ -14179,6 +14253,7 @@ var CellSelectionState = class {
 
 // src/utils/logger.ts
 var log = debug("InfiniteTable");
+var COLOR_ERROR_VALUE = `#dc3545`;
 var COLOR_WARN_VALUE = `#eb9316`;
 var warnChannel = "Warn";
 var errorChannel = "Error";
@@ -14191,9 +14266,18 @@ var warnLogger = logger.extend(warnChannel);
 var errorLogger = logger.extend(errorChannel);
 var successLogger = logger.extend(successChannel);
 var logColorWarn = COLOR_WARN_VALUE;
-var warn = (message, logger3) => {
-  logger3 = logger3 ? logger3.extend(warnChannel) : warnLogger;
-  logger3(log.color(logColorWarn, message));
+var logColorError = COLOR_ERROR_VALUE;
+var warn = (message, logger2) => {
+  logger2 = logger2 ? logger2.extend ? logger2.extend(warnChannel) : logger2 : warnLogger;
+  logger2(
+    typeof logger2.color === "function" ? logger2.color(logColorWarn, message) : message
+  );
+};
+var error2 = (message, logger2) => {
+  logger2 = logger2 ? logger2.extend ? logger2.extend(errorChannel) : logger2 : errorLogger;
+  logger2(
+    typeof logger2.color === "function" ? logger2.color(logColorError, message) : message
+  );
 };
 var doOnceFlags = new DeepMap();
 var doOnce = (func, ...keys) => {
@@ -14203,8 +14287,11 @@ var doOnce = (func, ...keys) => {
   doOnceFlags.set(keys, true);
   func();
 };
-var warnOnce = (message, key = message, logger3) => {
-  doOnce(() => warn(message, logger3), key, "warn");
+var warnOnce = (message, key = message, logger2) => {
+  doOnce(() => warn(message, logger2), key, "warn");
+};
+var errorOnce = (message, key = message, logger2) => {
+  doOnce(() => error2(message, logger2), key, "error");
 };
 
 // src/components/InfiniteTable/api/getRowSelectionApi.ts
@@ -16108,12 +16195,12 @@ var DataSourceApiImpl = class {
         }
         return this.waitForNodePath(nodePath, { timeout }).then((okay) => {
           if (!okay) {
-            const error2 = `Cannot find node path "${nodePath.join(
+            const error4 = `Cannot find node path "${nodePath.join(
               "/"
             )}" (we waited for it ${timeout}ms)`;
-            console.error(error2);
+            console.error(error4);
             return fn({
-              error: error2,
+              error: error4,
               resolved: false
             });
           }
@@ -16130,8 +16217,8 @@ var DataSourceApiImpl = class {
     this.updateChildrenByNodePath = (childrenOrFn, nodePath, options) => {
       return this.withWaitForNode(
         nodePath,
-        ({ error: error2 }) => {
-          if (error2) {
+        ({ error: error4 }) => {
+          if (error4) {
             return false;
           }
           return this.updateChildrenByNodePath_Internal(
@@ -16159,8 +16246,8 @@ var DataSourceApiImpl = class {
       if (!this.isNodePathAvailable(nodePath)) {
         return this.withWaitForNode(
           nodePath,
-          ({ error: error2 }) => {
-            if (error2) {
+          ({ error: error4 }) => {
+            if (error4) {
               return false;
             }
             return this.updateDataArrayByNodePath_Internal(
@@ -16193,7 +16280,7 @@ var DataSourceApiImpl = class {
       const allNodePaths = updateInfo.map((info) => info.nodePath);
       const promiseWithAll = Promise.allSettled(
         allNodePaths.map((nodePath) => {
-          return this.withWaitForNode(nodePath, ({ error: error2 }) => !error2, options);
+          return this.withWaitForNode(nodePath, ({ error: error4 }) => !error4, options);
         })
       );
       return promiseWithAll.then((allGood) => {
@@ -16312,8 +16399,8 @@ var DataSourceApiImpl = class {
       if (isTree && nodePath?.length) {
         return this.withWaitForNode(
           nodePath,
-          ({ error: error2 }) => {
-            if (error2) {
+          ({ error: error4 }) => {
+            if (error4) {
               return false;
             }
             if (options.position === "before" || options.position === "after") {
@@ -16376,8 +16463,8 @@ var DataSourceApiImpl = class {
       if (nodePath.length && !this.isNodePathAvailable(nodePath)) {
         return this.withWaitForNode(
           nodePath,
-          ({ error: error2 }) => {
-            if (error2) {
+          ({ error: error4 }) => {
+            if (error4) {
               return false;
             }
             const result2 = this.batchOperation({
@@ -16416,6 +16503,9 @@ var DataSourceApiImpl = class {
       this.actions.sortInfo = sortInfo;
       return;
     };
+    this.setGroupBy = (groupBy) => {
+      this.actions.groupBy = groupBy;
+    };
     this.isRowDisabledAt = (rowIndex) => {
       const rowInfo = this.getRowInfoByIndex(rowIndex);
       return rowInfo?.rowDisabled ?? false;
@@ -17162,20 +17252,31 @@ function concludeReducer(params) {
   }
   if (shouldFilterClientSide) {
     state.unfilteredCount = dataArray.length;
-    dataArray = shouldFilterAgain ? filterDataSource({
-      // tree-related stuff
-      getNodeChildren,
-      isLeafNode,
-      nodesKey,
-      treeFilterFunction,
-      // ---
-      dataArray,
-      toPrimaryKey,
-      filterTypes,
-      operatorsByFilterType,
-      filterFunction,
-      filterValue
-    }) : state.lastFilterDataArray;
+    let filterTimestamp = now;
+    if (shouldFilterAgain) {
+      if (state.devToolsDetected) {
+        filterTimestamp = Date.now();
+      }
+      dataArray = filterDataSource({
+        // tree-related stuff
+        getNodeChildren,
+        isLeafNode,
+        nodesKey,
+        treeFilterFunction,
+        // ---
+        dataArray,
+        toPrimaryKey,
+        filterTypes,
+        operatorsByFilterType,
+        filterFunction,
+        filterValue
+      });
+      if (state.devToolsDetected) {
+        state.debugTimings.set("filter", Date.now() - filterTimestamp);
+      }
+    } else {
+      dataArray = state.lastFilterDataArray;
+    }
     state.lastFilterDataArray = dataArray;
     state.filteredAt = now;
   }
@@ -17185,6 +17286,10 @@ function concludeReducer(params) {
     const prevKnownTypes = multisort.knownTypes;
     multisort.knownTypes = { ...prevKnownTypes, ...state.sortTypes };
     if (shouldSortAgain) {
+      let sortTimestamp = now;
+      if (state.devToolsDetected) {
+        sortTimestamp = Date.now();
+      }
       if (state.sortFunction) {
         dataArray = state.sortFunction(sortInfo, [...dataArray]);
       } else {
@@ -17200,6 +17305,10 @@ function concludeReducer(params) {
           dataArray = multisort(sortInfo, [...dataArray]);
         }
       }
+      if (state.devToolsDetected) {
+        const sortDuration = Date.now() - sortTimestamp;
+        state.debugTimings.set("sort", sortDuration);
+      }
     } else {
       dataArray = state.lastSortDataArray;
     }
@@ -17246,6 +17355,10 @@ function concludeReducer(params) {
   const rowInfoReducers = state.rowInfoReducers;
   if (shouldGroup) {
     if (shouldGroupAgain) {
+      let groupTimestamp = now;
+      if (state.devToolsDetected) {
+        groupTimestamp = Date.now();
+      }
       let aggregationReducers = state.aggregationReducers;
       const groupResult = state.lazyLoad ? lazyGroup(
         {
@@ -17328,6 +17441,9 @@ function concludeReducer(params) {
       }) : void 0;
       state.pivotColumns = pivotGroupsAndCols?.columns;
       state.pivotColumnGroups = pivotGroupsAndCols?.columnGroups;
+      if (state.devToolsDetected) {
+        state.debugTimings.set("group-and-pivot", Date.now() - groupTimestamp);
+      }
     } else {
       rowInfoDataArray = state.lastGroupDataArray;
     }
@@ -17335,6 +17451,10 @@ function concludeReducer(params) {
     state.groupedAt = now;
   } else if (shouldTree) {
     if (shouldTreeAgain) {
+      let treeTimestamp = now;
+      if (state.devToolsDetected) {
+        treeTimestamp = Date.now();
+      }
       let aggregationReducers = state.aggregationReducers;
       const treeParams = {
         isLeafNode,
@@ -17404,6 +17524,9 @@ function concludeReducer(params) {
       state.reducerResults = treeResult.reducerResults;
       state.totalLeafNodesCount = treeResult.deepMap.get([])?.totalLeafNodesCount ?? 0;
       state.treeAt = now;
+      if (state.devToolsDetected) {
+        state.debugTimings.set("tree", Date.now() - treeTimestamp);
+      }
     } else {
       rowInfoDataArray = state.lastTreeDataArray;
     }
@@ -17501,6 +17624,155 @@ function getChangeDetect() {
   return `${Date.now()}:${perfNow}`;
 }
 
+// src/components/InfiniteTable/errorCodes.ts
+function buildErrorPayload(code, message, type) {
+  message = message.replaceAll("$ERR_CODE", code);
+  message = `${message}
+
+ERROR_CODE = ${code}
+
+See http://infinite-table.com/docs/reference/error-codes#${code} for more info.`;
+  return {
+    code,
+    message,
+    type: type ?? "error"
+  };
+}
+function buildErrors(errors) {
+  return Object.entries(errors).reduce((acc, [key, message]) => {
+    const code = key;
+    const payload = buildErrorPayload(
+      code,
+      typeof message === "string" ? message : message.message,
+      typeof message === "string" ? void 0 : message.type
+    );
+    acc[code] = payload;
+    return acc;
+  }, {});
+}
+function warn2(strings) {
+  return {
+    message: strings.join(""),
+    type: "warning"
+  };
+}
+function error3(strings) {
+  return {
+    message: strings.join(""),
+    type: "error"
+  };
+}
+var DS_ERROR_CODES = buildErrors({
+  DS001: warn2`The "data" prop of your DataSource seems to be updating too frequently.
+Make sure you don't pass a new reference on every render.`
+});
+var INFINITE_ERROR_CODES = buildErrors({
+  CSS001_CSS: error3`It appears you have not loaded the CSS file for InfiniteTable.
+In most environments, you should be able to fix this by adding the following line:
+  
+import '@infinite-table/infinite-react/index.css'
+  `
+});
+var ERROR_CODES = {
+  ...DS_ERROR_CODES,
+  ...INFINITE_ERROR_CODES
+};
+
+// src/DEV_TOOLS_OVERRIDES.ts
+var DEV_TOOLS_INFINITE_OVERRIDES = /* @__PURE__ */ new Map();
+var DEV_TOOLS_DATASOURCE_OVERRIDES = /* @__PURE__ */ new Map();
+var DEV_TOOLS_INFINITE_INITIALS = /* @__PURE__ */ new Map();
+var DEV_TOOLS_DATASOURCE_INITIALS = /* @__PURE__ */ new Map();
+
+// src/utils/debugModeUtils.ts
+var INSTANCES = /* @__PURE__ */ new Map();
+var deleteInstanceFromDevTools = (debugId) => {
+  INSTANCES.delete(debugId);
+  DEV_TOOLS_INFINITE_INITIALS.delete(debugId);
+  DEV_TOOLS_INFINITE_OVERRIDES.delete(debugId);
+  DEV_TOOLS_DATASOURCE_INITIALS.delete(debugId);
+  DEV_TOOLS_DATASOURCE_OVERRIDES.delete(debugId);
+};
+function setDevToolInfinitePropertyOverride(debugId, property, value) {
+  const instance = INSTANCES.get(debugId);
+  if (!instance) {
+    return;
+  }
+  const initial = DEV_TOOLS_INFINITE_INITIALS.get(debugId);
+  if (!initial || !Object.hasOwn(initial, property)) {
+    DEV_TOOLS_INFINITE_INITIALS.set(debugId, {
+      ...initial || {},
+      [property]: instance.getState()[property]
+    });
+  }
+  DEV_TOOLS_INFINITE_OVERRIDES.set(debugId, {
+    ...DEV_TOOLS_INFINITE_OVERRIDES.get(debugId) || {},
+    [property]: value
+  });
+  instance.actions[property] = value;
+}
+function setDevToolDataSourcePropertyOverride(debugId, property, value) {
+  const instance = INSTANCES.get(debugId);
+  if (!instance) {
+    return;
+  }
+  const initial = DEV_TOOLS_DATASOURCE_INITIALS.get(debugId);
+  if (!initial || !Object.hasOwn(initial, property)) {
+    DEV_TOOLS_DATASOURCE_INITIALS.set(debugId, {
+      ...initial || {},
+      [property]: instance.getDataSourceState()[property]
+    });
+  }
+  DEV_TOOLS_DATASOURCE_OVERRIDES.set(debugId, {
+    ...DEV_TOOLS_DATASOURCE_OVERRIDES.get(debugId) || {},
+    [property]: value
+  });
+  instance.dataSourceActions[property] = value;
+}
+var warnKnownErrorOnce = (error4) => {
+  const logger2 = error4.type === "error" ? err(error4.debugId) : dbg(error4.debugId);
+  const onceLogger = error4.type === "error" ? errorOnce : warnOnce;
+  const onceKey = error4.debugId ? `${error4.code}-${error4.debugId}` : error4.code;
+  let message = error4.message;
+  if (error4.debugId) {
+    message = `${message}
+
+Component DEBUG_ID = "${error4.debugId}"`;
+  }
+  onceLogger(message, onceKey, logger2);
+};
+var logDevToolsWarning = (options) => {
+  const { debugId, key } = options;
+  const knownError = ERROR_CODES[key];
+  if (!knownError) {
+    return;
+  }
+  warnKnownErrorOnce({ ...knownError, debugId });
+  if (debugId && key) {
+    const instance = INSTANCES.get(debugId);
+    if (instance && instance.getState().devToolsDetected && knownError) {
+      instance.getState().debugWarnings.set(key, {
+        ...knownError,
+        debugId,
+        status: "new"
+      });
+      updateDevToolsForInstance(debugId);
+    }
+  }
+};
+globalThis.logDevToolsWarning = logDevToolsWarning;
+var updateDevToolsForInstance = (debugId) => {
+  const hookFn = window.__INFINITE_TABLE_DEVTOOLS_HOOK__;
+  if (!hookFn) {
+    return;
+  }
+  const instance = INSTANCES.get(debugId);
+  if (!instance) {
+    return;
+  }
+  hookFn(debugId, instance);
+};
+
 // src/components/DataSource/privateHooks/useLoadData.ts
 var CACHE_DEFAULT = true;
 var getRafPromise = () => new Promise((resolve) => {
@@ -17658,7 +17930,7 @@ function loadData(data, componentState, actions, overrides, masterContext) {
           const theKey = [LAZY_ROOT_KEY_FOR_GROUPS, ...keys];
           const dataArray2 = remoteData2.data;
           const newGroupRowInfo = {
-            cache: !!remoteData2.cache,
+            cache: remoteData2.cache ?? CACHE_DEFAULT,
             childrenLoading: false,
             childrenAvailable: true,
             totalCount: remoteData2.totalCount ?? dataArray2.length,
@@ -17891,11 +18163,10 @@ function useLoadData(options) {
       timestamps.push(now);
       const timeDiff = now - timestamps[0];
       if (timeDiff < 200 && timestamps.length >= 10) {
-        console.warn(
-          `The "data" prop of your DataSource seems to be updating too frequently.
-Make sure you don't pass a new reference on every render. ERROR_CODE = DS001
-See http://infinite-table.com/docs/reference/error-codes#DS001 for more info.`
-        );
+        logDevToolsWarning({
+          debugId: componentState2.debugId,
+          key: "DS001"
+        });
       }
       if (typeof componentState2.data !== "function") {
         loadData(
@@ -18164,7 +18435,6 @@ var normalizeSortInfo = (initialSortInfo, weakMap3) => {
 };
 
 // src/components/DataSource/state/getInitialState.ts
-var DataSourceLogger = dbg("DataSource");
 var defaultCursorId = Symbol("cursorId");
 var isNodeReadOnly = (rowInfo) => {
   return rowInfo.totalLeafNodesCount === 0;
@@ -18172,12 +18442,17 @@ var isNodeReadOnly = (rowInfo) => {
 var isNodeSelectable = (rowInfo) => {
   return rowInfo.isParentNode ? !isNodeReadOnly(rowInfo) : true;
 };
-function initSetupState() {
+function initSetupState(props) {
   const now = Date.now();
   const originalDataArray = [];
   const dataArray = [];
   const originalLazyGroupData = new DeepMap();
+  const DataSourceLogger = dbg(`${props.debugId}:DataSource`);
   return {
+    logger: DataSourceLogger,
+    debugTimings: /* @__PURE__ */ new Map(),
+    debugWarnings: /* @__PURE__ */ new Map(),
+    devToolsDetected: !!globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__,
     // TODO cleanup indexer on unmount
     indexer: new Indexer(),
     totalLeafNodesCount: 0,
@@ -18248,7 +18523,8 @@ function initSetupState() {
     postSortDataArray: void 0,
     postGroupDataArray: void 0,
     lastSortDataArray: void 0,
-    lastGroupDataArray: void 0
+    lastGroupDataArray: void 0,
+    forceRerenderTimestamp: 0
   };
 }
 function getCompareObjectForDataParams(dataParams) {
@@ -18284,13 +18560,11 @@ var forwardProps3 = (setupState, props) => {
     isNodeReadOnly: (isReadOnly) => isReadOnly ?? isNodeReadOnly,
     isNodeSelectable: (isSelectable) => isSelectable ?? isNodeSelectable,
     data: 1,
-    debugId: 1,
     nodesKey: 1,
     isNodeExpanded: 1,
     isNodeCollapsed: 1,
     pivotBy: 1,
     primaryKey: 1,
-    debugMode: 1,
     livePagination: 1,
     treeSelection: 1,
     refetchKey: (refetchKey) => refetchKey ?? "",
@@ -18313,7 +18587,7 @@ var forwardProps3 = (setupState, props) => {
           state.idToIndexMap.clear();
         },
         reducer: (_, rowInfo) => {
-          if (props.debugMode && !props.nodesKey && state.idToIndexMap.has(rowInfo.id)) {
+          if (props.debugId && !props.nodesKey && state.idToIndexMap.has(rowInfo.id)) {
             console.warn(`Duplicate id found in data source: ${rowInfo.id}`);
           }
           state.idToIndexMap.set(rowInfo.id, rowInfo.indexInAll);
@@ -18334,7 +18608,7 @@ var forwardProps3 = (setupState, props) => {
           reducer: (_, rowInfo) => {
             if (rowInfo.isTreeNode) {
               state.idToPathMap.set(rowInfo.id, rowInfo.nodePath);
-              if (props.debugMode && state.pathToIndexMap.has(rowInfo.nodePath)) {
+              if (props.debugId && state.pathToIndexMap.has(rowInfo.nodePath)) {
                 console.warn(
                   `Duplicate node path found in data source (debugId: ${props.debugId || "none"}): ${rowInfo.nodePath}`
                 );
@@ -18564,21 +18838,21 @@ function deriveStateFromProps(params) {
     warnOnce(
       `"groupMode" prop is deprecated for the <DataSource />, use "shouldReloadData.groupBy: true|false" instead`,
       "groupMode deprecated",
-      DataSourceLogger
+      state.logger
     );
   }
   if (props.sortMode) {
     warnOnce(
       `"sortMode" prop is deprecated for the <DataSource />, use "shouldReloadData.sortInfo: true|false" instead`,
       "sortMode deprecated",
-      DataSourceLogger
+      state.logger
     );
   }
   if (props.filterMode) {
     warnOnce(
       `"filterMode" prop is deprecated for the <DataSource />, use "shouldReloadData.filterValue: true|false" instead`,
       "filterMode deprecated",
-      DataSourceLogger
+      state.logger
     );
   }
   const groupMode = typeof props.data === "function" ? propsGroupMode ?? "local" : "local";
@@ -18598,7 +18872,8 @@ function deriveStateFromProps(params) {
       weakMap.set(rowDisabledState, isRowDisabled);
     }
   }
-  const result = {
+  let result = {
+    debugId: state.debugId ?? props.debugId,
     isTree,
     selectionMode,
     groupRowsState,
@@ -18638,6 +18913,17 @@ function deriveStateFromProps(params) {
     const livePaginationCursor = typeof props.livePaginationCursor === "function" ? dataArrayChanged ? getLivePaginationCursorValue(props.livePaginationCursor, state) : state.livePaginationCursor : props.livePaginationCursor;
     result.livePaginationCursor = livePaginationCursor;
   }
+  if (state.devToolsDetected && state.debugId) {
+    const devToolsDataSourceOverrides = DEV_TOOLS_DATASOURCE_OVERRIDES.get(
+      state.debugId
+    );
+    if (devToolsDataSourceOverrides) {
+      result = {
+        ...result,
+        ...devToolsDataSourceOverrides
+      };
+    }
+  }
   return result;
 }
 var debugFullLazyLoad = dbg("DataSource:fullLazyLoad");
@@ -18655,7 +18941,6 @@ function onPropChange(params, props, actions) {
     }
   }
 }
-var debugDataParams = dbg("DataSource:dataParams");
 function getMappedCallbacks() {
   return {
     rowSelection: (rowSelection, state) => {
@@ -18831,6 +19116,9 @@ function getInterceptActions() {
       )) {
         return false;
       }
+      const debugDataParams = dbg(
+        getDebugChannel(state.debugId, "DataSource:dataParams")
+      );
       debugDataParams(
         "onDataParamsChange triggered because the following values have changed",
         dataParams?.changes
@@ -19312,6 +19600,7 @@ var InfiniteTableCellSelectionApiImpl = class {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       const [startRowId, startColId] = this.getCellSelectionPosition(startOptions);
       const [endRowId, endColId] = this.getCellSelectionPosition(endOptions);
       const startCol = this.getComputed().computedVisibleColumnsMap.get(startColId);
@@ -19403,6 +19692,7 @@ var InfiniteTableCellSelectionApiImpl = class {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.deselectAll();
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19416,6 +19706,7 @@ var InfiniteTableCellSelectionApiImpl = class {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.selectAll();
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19430,22 +19721,26 @@ var InfiniteTableCellSelectionApiImpl = class {
       return this.getDataSourceState().cellSelection?.isCellSelected(pk, colId) ?? false;
     };
     this.selectCell = (options) => {
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const [pk, colId] = this.getCellSelectionPosition(options);
       const newCellSelection = options.clear ? new CellSelectionState() : new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.selectCell(pk, colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
     this.deselectCell = (options) => {
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const [pk, colId] = this.getCellSelectionPosition(options);
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.deselectCell(pk, colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19453,20 +19748,24 @@ var InfiniteTableCellSelectionApiImpl = class {
       if (options?.clear) {
         this.deselectAll();
       }
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.selectColumn(colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
     this.deselectColumn = (colId) => {
-      const cellSelection = this.getDataSourceState().cellSelection;
+      const dataSourceState = this.getDataSourceState();
+      const cellSelection = dataSourceState.cellSelection;
       if (!cellSelection) {
         return;
       }
       const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.debugId = dataSourceState.debugId ?? "";
       newCellSelection.deselectColumn(colId);
       this.dataSourceActions.cellSelection = newCellSelection;
     };
@@ -19964,6 +20263,9 @@ var InfiniteTableApiImpl = class {
     this.hideFilterOperatorMenu = () => {
       this.actions.filterOperatorMenuVisibleForColumnId = null;
     };
+    this.setGroupRenderStrategy = (groupRenderStrategy) => {
+      this.actions.groupRenderStrategy = groupRenderStrategy;
+    };
     this.getColumnOrder = () => {
       return this.getComputed().computedColumnOrder;
     };
@@ -21235,6 +21537,8 @@ function useCellRendering(param) {
   const {
     rowHeight,
     rowDetailHeight,
+    onRowMouseEnter,
+    onRowMouseLeave,
     groupRenderStrategy,
     brain,
     showZebraRows,
@@ -21376,6 +21680,8 @@ function useCellRendering(param) {
         rowDetailState,
         onMouseEnter,
         onMouseLeave,
+        onRowMouseEnter,
+        onRowMouseLeave,
         domRef,
         width,
         column,
@@ -21391,6 +21697,8 @@ function useCellRendering(param) {
     [
       rowHeight,
       rowDetailHeight,
+      onRowMouseEnter,
+      onRowMouseLeave,
       computedRowSizeCacheForDetails,
       computedRowHeight,
       isRowDetailsExpanded,
@@ -21709,13 +22017,13 @@ function useColumnRowspan(computedVisibleColumns) {
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
 var import_react41 = require("react");
-var debug4 = dbg("useColumnSizeFn");
+var debug3 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
   const columnSize = (0, import_react41.useCallback)(
     (index) => {
       const column = columns[index];
       if (false) {
-        debug4("cannot find column at index", index, columns);
+        debug3("cannot find column at index", index, columns);
       }
       return column ? column.computedWidth : 0;
     },
@@ -21807,7 +22115,7 @@ function getRowDetailRendererFromComponent(RowDetail) {
 // src/components/VirtualBrain/HorizontalLayoutMatrixBrain.ts
 var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
   constructor(name, opts) {
-    super(`HorizontalLayout${name ? `:${name}` : ""}`);
+    super(`${name}:HorizontalLayout`);
     this.visiblePageCount = 0;
     this.isHorizontalLayoutBrain = true;
     this._totalPageCount = 0;
@@ -22086,10 +22394,11 @@ function getCellSelector(cellPosition) {
   return selector2;
 }
 function createBrains(debugId, wrapRowsHorizontally) {
-  const brain = !wrapRowsHorizontally ? new MatrixBrain(debugId) : new HorizontalLayoutMatrixBrain(debugId, {
+  const debugChannel = getDebugChannel(debugId);
+  const brain = !wrapRowsHorizontally ? new MatrixBrain(debugChannel) : new HorizontalLayoutMatrixBrain(debugChannel, {
     isHeader: false
   });
-  const headerBrain = !wrapRowsHorizontally ? new MatrixBrain("header") : new HorizontalLayoutMatrixBrain("header", {
+  const headerBrain = !wrapRowsHorizontally ? new MatrixBrain(debugChannel) : new HorizontalLayoutMatrixBrain(debugChannel, {
     isHeader: true,
     masterBrain: brain
   });
@@ -22120,8 +22429,10 @@ function initSetupState2({
   );
   const domRef = (0, import_react42.createRef)();
   return {
+    debugWarnings: /* @__PURE__ */ new Map(),
     renderer,
     onRenderUpdater,
+    devToolsDetected: !!globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__,
     propsCache: /* @__PURE__ */ new Map([]),
     lastRowToCollapseRef: { current: null },
     lastRowToExpandRef: { current: null },
@@ -22191,7 +22502,6 @@ var forwardProps4 = (_setupState) => {
     groupColumn: 1,
     onReady: 1,
     domProps: 1,
-    debugMode: 1,
     onKeyDown: 1,
     onCellClick: 1,
     onCellDoubleClick: 1,
@@ -22206,6 +22516,8 @@ var forwardProps4 = (_setupState) => {
     onContextMenu: 1,
     onCellContextMenu: 1,
     onRenderRangeChange: 1,
+    onRowMouseEnter: 1,
+    onRowMouseLeave: 1,
     onScrollToTop: 1,
     onScrollToBottom: 1,
     onScrollStop: 1,
@@ -22401,7 +22713,7 @@ var mapPropsToState = (params) => {
     }
   }
   const isRowDetailEnabled = !rowDetailRenderer ? false : props.isRowDetailEnabled || true;
-  return {
+  let result = {
     isTree: parentState.isTree,
     rowDetailRenderer,
     rowDetailState,
@@ -22426,6 +22738,16 @@ var mapPropsToState = (params) => {
     rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
     columnHeaderHeightCSSVar: typeof props.columnHeaderHeight === "string" ? props.columnHeaderHeight || ThemeVars.components.Header.columnHeaderHeight : ""
   };
+  if (state.devToolsDetected && state.debugId) {
+    const devToolsOverrides = DEV_TOOLS_INFINITE_OVERRIDES.get(state.debugId);
+    if (devToolsOverrides) {
+      result = {
+        ...result,
+        ...devToolsOverrides
+      };
+    }
+  }
+  return result;
 };
 
 // src/components/InfiniteTable/state/getColumnVisibilityForHideEmptyGroupColumns.ts
@@ -23603,7 +23925,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.2.10"
+      version: "6.2.12"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23743,10 +24065,11 @@ function updateCellSelectionOnCellClick(context, event) {
     return;
   }
   const { multiCellSelector, computedVisibleColumns } = getComputed();
-  const { brain } = getState();
+  const { brain, debugId } = getState();
   const { rowsPerPage } = brain;
   const columnsPerSet = computedVisibleColumns.length;
   const cellSelection = new CellSelectionState(existingCellSelection);
+  cellSelection.debugId = debugId ?? "";
   multiCellSelector.cellSelectionState = cellSelection;
   const position2 = {
     rowIndex,
@@ -27165,37 +27488,414 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-var React70 = __toESM(require("react"));
-var logWarning = once(() => {
-  console.warn(
-    `It appears you have not loaded the CSS file for InfiniteTable.
-In most environments, you should be able to fix this by adding the following line:
+var import_react66 = require("react");
 
-import '@infinite-table/infinite-react/index.css'
+// src/components/InfiniteTable/hooks/debugModeDevToolsOverlay.css.ts
+var DevToolsOverlay = createRuntimeFn({ defaultClassName: "_143ofgf0", variantClassNames: { active: { true: "_143ofgf1", false: "_143ofgf2" } }, defaultVariants: {}, compoundVariants: [] });
+var DevToolsOverlayBg = "_143ofgf5";
+var DevToolsOverlayText = "_143ofgf3";
 
-`
-  );
-});
+// src/components/InfiniteTable/hooks/useDebugMode.ts
 var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
-function useDebugMode() {
-  const { getState } = useInfiniteTable();
-  React70.useEffect(() => {
-    runDebugMode(getState);
-  }, []);
+var messageBase = {
+  source: "infinite-table-page",
+  target: "infinite-table-devtools-background"
+};
+function buildMessageForExtension(params, options) {
+  const { type, debugId } = params;
+  if (type === "unmount") {
+    return {
+      ...messageBase,
+      url: getPageUrlOfWindow(),
+      type,
+      payload: {
+        debugId
+      }
+    };
+  }
+  const opts = options;
+  const computedValues = opts.getComputed();
+  const dataSourceState = opts.getDataSourceState();
+  const state = opts.getState();
+  const message = {
+    ...messageBase,
+    url: getPageUrlOfWindow(),
+    type,
+    payload: {
+      debugId,
+      columnVisibility: state.columnVisibility,
+      columnOrder: computedValues.computedColumnOrder,
+      visibleColumnIds: computedValues.computedVisibleColumns.map((c) => c.id),
+      selectionMode: dataSourceState.selectionMode,
+      columns: Object.fromEntries(
+        computedValues.computedVisibleColumns.map((c) => [
+          c.id,
+          {
+            field: c.field,
+            dataType: c.computedDataType,
+            sortType: c.computedSortType,
+            filtered: c.computedFiltered,
+            sorted: c.computedSorted,
+            width: c.computedWidth
+          }
+        ])
+      ),
+      groupRenderStrategy: state.groupRenderStrategy,
+      groupBy: dataSourceState.groupBy.map(
+        (g) => g.field ? `${g.field}` : "<fn>"
+      ),
+      sortInfo: (dataSourceState.sortInfo || []).filter((sortInfo) => typeof sortInfo.field === "string").map((s) => {
+        return {
+          field: `${s.field}`,
+          dir: s.dir,
+          type: Array.isArray(s.type) ? s.type[0] : s.type ?? "string"
+        };
+      }),
+      multiSort: dataSourceState.multiSort,
+      devToolsDetected: state.devToolsDetected,
+      debugTimings: Object.fromEntries(dataSourceState.debugTimings),
+      debugWarnings: {
+        ...Object.fromEntries(dataSourceState.debugWarnings),
+        ...Object.fromEntries(state.debugWarnings)
+      }
+    }
+  };
+  return message;
 }
-function runDebugMode(getState) {
+var getPageUrlOfWindow = once(function() {
+  const url = new URL(window.location.href);
+  return url.origin + url.pathname;
+});
+function postMessage(message) {
+  window.postMessage(message);
+}
+var setupHook = once(() => {
+  console.log("Infinite Table DevTools detected!");
+  const hookFn = (debugId, options) => {
+    if (options) {
+      INSTANCES.set(debugId, options);
+      const { devToolsDetected } = options.getState();
+      if (!devToolsDetected) {
+        options.actions.devToolsDetected = true;
+      }
+      const dataSourceState = options.getDataSourceState();
+      if (dataSourceState.debugId !== debugId) {
+        options.dataSourceActions.debugId = debugId;
+      }
+      if (!dataSourceState.devToolsDetected) {
+        options.dataSourceActions.devToolsDetected = true;
+      }
+      window.postMessage(
+        buildMessageForExtension({ type: "update", debugId }, options)
+      );
+    } else {
+      deleteInstanceFromDevTools(debugId);
+      window.postMessage(
+        buildMessageForExtension({ type: "unmount", debugId }, null)
+      );
+    }
+  };
+  window.__INFINITE_TABLE_DEVTOOLS_HOOK__ = hookFn;
+  debug.onLogIntent("*", (options) => {
+    postMessage({
+      ...messageBase,
+      url: getPageUrlOfWindow(),
+      type: "log",
+      payload: {
+        debugId: void 0,
+        channel: options.channel,
+        color: options.color,
+        args: options.args.map((arg) => {
+          if (typeof arg === "object" && arg !== null) {
+            return JSON.stringify(arg);
+          }
+          return String(arg);
+        }),
+        timestamp: options.timestamp
+      }
+    });
+  });
+  return hookFn;
+});
+function useDebugMode() {
+  const { getState, getDataSourceState, dataSourceActions } = useInfiniteTable();
   const state = getState();
-  const { debugMode, domRef } = state;
-  if (debugMode) {
+  const { domRef, debugId } = state;
+  if (debugId) {
     if (domRef.current) {
       const value = getComputedStyle(domRef.current).getPropertyValue(
         cssFileLoadedVarName
       );
       if (value !== `${CSS_LOADED_VALUE}`) {
-        logWarning();
+        logDevToolsWarning({
+          debugId,
+          key: "CSS001_CSS"
+        });
       }
     }
   }
+  (0, import_react66.useEffect)(() => {
+    const dataSourceState = getDataSourceState();
+    if (dataSourceState.debugId !== debugId) {
+      dataSourceActions.debugId = debugId;
+    }
+  }, [debugId]);
+  return useDevTools();
+}
+var HOOK_FN_SETUP_CALLBACK = buildSubscriptionCallback();
+var DEVTOOLS_MESSAGES = {
+  revertAll: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const infiniteInitials = DEV_TOOLS_INFINITE_INITIALS.get(payload.debugId);
+      DEV_TOOLS_INFINITE_INITIALS.delete(payload.debugId);
+      DEV_TOOLS_INFINITE_OVERRIDES.delete(payload.debugId);
+      if (infiniteInitials) {
+        Object.keys(infiniteInitials).forEach((key) => {
+          instance.actions[key] = infiniteInitials[key];
+          delete infiniteInitials[key];
+        });
+      }
+      const dataSourceInitials = DEV_TOOLS_DATASOURCE_INITIALS.get(
+        payload.debugId
+      );
+      DEV_TOOLS_DATASOURCE_INITIALS.delete(payload.debugId);
+      DEV_TOOLS_DATASOURCE_OVERRIDES.delete(payload.debugId);
+      if (dataSourceInitials) {
+        Object.keys(dataSourceInitials).forEach((key) => {
+          instance.dataSourceActions[key] = dataSourceInitials[key];
+          delete dataSourceInitials[key];
+        });
+      }
+    }
+  },
+  revertProperty: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const property = payload.property;
+      const infiniteOverrides = DEV_TOOLS_INFINITE_OVERRIDES.get(
+        payload.debugId
+      );
+      const infiniteInitials = DEV_TOOLS_INFINITE_INITIALS.get(payload.debugId);
+      const dataSourceOverrides = DEV_TOOLS_DATASOURCE_OVERRIDES.get(
+        payload.debugId
+      );
+      const dataSourceInitials = DEV_TOOLS_DATASOURCE_INITIALS.get(
+        payload.debugId
+      );
+      const infiniteStateProp = property;
+      if (infiniteInitials && infiniteOverrides && infiniteOverrides[infiniteStateProp] !== void 0) {
+        delete infiniteOverrides[infiniteStateProp];
+        instance.actions[infiniteStateProp] = infiniteInitials[infiniteStateProp];
+        delete infiniteInitials[infiniteStateProp];
+      }
+      const dataSourceStateProp = property;
+      if (dataSourceInitials && dataSourceOverrides && dataSourceOverrides[dataSourceStateProp] !== void 0) {
+        const dataSourceInitials2 = DEV_TOOLS_DATASOURCE_INITIALS.get(payload.debugId) || {};
+        delete dataSourceOverrides[dataSourceStateProp];
+        instance.dataSourceActions[dataSourceStateProp] = dataSourceInitials2[dataSourceStateProp];
+        delete dataSourceInitials2[dataSourceStateProp];
+      }
+    }
+  },
+  discardWarning: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const dsWarningKey = payload.warning;
+      const dsWarnings = instance.getDataSourceState().debugWarnings;
+      const obj = dsWarnings.get(dsWarningKey);
+      if (obj) {
+        dsWarnings.delete(dsWarningKey);
+        updateDevToolsForInstance(payload.debugId);
+      } else {
+        const itWarningKey = payload.warning;
+        const infiniteWarnings = instance.getState().debugWarnings;
+        const obj2 = infiniteWarnings.get(itWarningKey);
+        if (obj2) {
+          infiniteWarnings.delete(itWarningKey);
+          updateDevToolsForInstance(payload.debugId);
+        }
+      }
+    }
+  },
+  discardAllWarnings: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      instance.getDataSourceState().debugWarnings.clear();
+      instance.getState().debugWarnings.clear();
+      updateDevToolsForInstance(payload.debugId);
+    }
+  },
+  setColumnVisibility: (payload) => {
+    setDevToolInfinitePropertyOverride(
+      payload.debugId,
+      "columnVisibility",
+      payload.columnVisibility
+    );
+  },
+  setGroupBy: (payload) => {
+    setDevToolDataSourcePropertyOverride(
+      payload.debugId,
+      "groupBy",
+      payload.groupBy
+    );
+  },
+  setGroupRenderStrategy: (payload) => {
+    setDevToolInfinitePropertyOverride(
+      payload.debugId,
+      "groupRenderStrategy",
+      payload.groupRenderStrategy
+    );
+  },
+  setSortInfo: (payload) => {
+    setDevToolDataSourcePropertyOverride(
+      payload.debugId,
+      "sortInfo",
+      payload.sortInfo
+    );
+  },
+  setMultiSort: (payload) => {
+    setDevToolDataSourcePropertyOverride(
+      payload.debugId,
+      "multiSort",
+      payload.multiSort
+    );
+  },
+  highlight: (payload) => {
+    const instance = INSTANCES.get(payload.debugId);
+    if (instance) {
+      const domNode = instance.getState().domRef.current;
+      if (domNode) {
+        const rect = domNode.getBoundingClientRect();
+        let overlay = document.querySelector(
+          `.${DevToolsOverlay.classNames.base}`
+        );
+        if (!overlay) {
+          overlay = document.createElement("div");
+          overlay.classList.add(DevToolsOverlay.classNames.base);
+          overlay.innerHTML = [
+            `<div class="${DevToolsOverlayText}"></div>`,
+            `<div class="${DevToolsOverlayBg}"></div>`
+          ].join("");
+          document.body.appendChild(overlay);
+        }
+        let textDiv = overlay.firstElementChild;
+        if (overlay) {
+          overlay.style.left = `${rect.left}px`;
+          overlay.style.top = `${rect.top}px`;
+          overlay.style.width = `${rect.width}px`;
+          overlay.style.height = `${rect.height}px`;
+          textDiv.innerHTML = payload.debugId;
+          const overlayBg = overlay.lastElementChild;
+          const handleAnimationEnd = () => {
+            overlay.classList.remove(
+              DevToolsOverlay.classNames.variants.active.true
+            );
+            overlayBg.removeEventListener("animationend", handleAnimationEnd);
+          };
+          overlayBg.addEventListener("animationend", handleAnimationEnd);
+          overlay.classList.add(
+            DevToolsOverlay.classNames.variants.active.true
+          );
+        }
+      }
+    }
+  }
+};
+function listenForDevTools() {
+  if (typeof window !== "undefined") {
+    window.addEventListener("message", (event) => {
+      if (event && event.data && typeof event.data.source === "string" && event.data.source.startsWith("infinite-table-devtools-contentscript") && event.data.target === "infinite-table-page") {
+        if (!window.__INFINITE_TABLE_DEVTOOLS_HOOK__) {
+          setupHook();
+          HOOK_FN_SETUP_CALLBACK(
+            window.__INFINITE_TABLE_DEVTOOLS_HOOK__
+          );
+        }
+        if (typeof event.data.type === "string") {
+          const eventType = event.data.type;
+          const fn = DEVTOOLS_MESSAGES[eventType];
+          if (fn) {
+            fn(event.data.payload);
+          }
+        }
+      }
+    });
+  }
+}
+listenForDevTools();
+function useDevTools() {
+  const {
+    getState,
+    getComputed,
+    getDataSourceState,
+    dataSourceActions,
+    actions,
+    dataSourceApi,
+    api
+  } = useInfiniteTable();
+  const state = getState();
+  const debugId = state.debugId;
+  const debugIdRef = (0, import_react66.useRef)(debugId);
+  debugIdRef.current = debugId;
+  (0, import_react66.useEffect)(() => {
+    const debugId2 = debugIdRef.current;
+    if (!debugId2) {
+      return;
+    }
+    const withHookFn = (hookFn2) => {
+      hookFn2(debugId2, {
+        getState,
+        getDataSourceState,
+        getComputed,
+        dataSourceActions,
+        actions,
+        api,
+        dataSourceApi
+      });
+    };
+    const hookFn = HOOK_FN_SETUP_CALLBACK.get();
+    if (hookFn) {
+      withHookFn(hookFn);
+      return;
+    }
+    return HOOK_FN_SETUP_CALLBACK.onChange((hookFn2) => {
+      if (!hookFn2) {
+        return;
+      }
+      withHookFn(hookFn2);
+    });
+  }, []);
+  (0, import_react66.useEffect)(() => {
+    const debugId2 = debugIdRef.current;
+    if (!debugId2) {
+      return;
+    }
+    const hookFn = HOOK_FN_SETUP_CALLBACK.get();
+    if (hookFn) {
+      hookFn(debugId2, {
+        getState,
+        getDataSourceState,
+        getComputed,
+        dataSourceActions,
+        actions,
+        api,
+        dataSourceApi
+      });
+    }
+  });
+  (0, import_react66.useEffect)(() => {
+    if (!debugId) {
+      return;
+    }
+    return () => {
+      const devtoolsHookFn = globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__;
+      if (devtoolsHookFn) {
+        devtoolsHookFn(debugId, null);
+      }
+    };
+  }, [debugId]);
+  return debugId;
 }
 
 // src/components/InfiniteTable/hooks/useInfinitePortalContainer.ts
@@ -27228,14 +27928,16 @@ var { ManagedComponentContextProvider: InfiniteTableRoot } = buildManagedCompone
   mappedCallbacks: getMappedCallbacks2(),
   // @ts-ignore
   getParentState: () => useDataSourceState(),
-  debugName: DEBUG_NAME
+  debugName: (props) => {
+    return getDebugChannel(props.debugId, DEBUG_NAME);
+  }
 });
 function InfiniteTableHeader2() {
   const context = useInfiniteTable();
   const { state: componentState, getComputed } = context;
   const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
   const { scrollbars } = getComputed();
-  return header ? /* @__PURE__ */ React71.createElement(
+  return header ? /* @__PURE__ */ React70.createElement(
     TableHeaderWrapper,
     {
       wrapRowsHorizontally: !!wrapRowsHorizontally,
@@ -27252,7 +27954,7 @@ var InfiniteTableBodyCls = join(
   transformTranslateZero
 );
 function InfiniteTableBodyContainer(props) {
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       ...props,
@@ -27290,7 +27992,7 @@ function InfiniteTableBody() {
   const {
     componentState: { loading }
   } = useDataSourceContextValue();
-  const onContextMenu = React71.useCallback((event) => {
+  const onContextMenu = React70.useCallback((event) => {
     const state = context.getState();
     const target = event.target;
     if (!masterContext && event._from_row_detail) {
@@ -27336,7 +28038,7 @@ function InfiniteTableBody() {
   });
   const { autoFocus, tabIndex } = domProps ?? {};
   useToggleWrapRowsHorizontally();
-  return /* @__PURE__ */ React71.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React70.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React70.createElement(
     HeadlessTable,
     {
       forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
@@ -27358,9 +28060,9 @@ function InfiniteTableBody() {
       scrollerDOMRef,
       scrollVarHostRef: domRef
     }
-  ), /* @__PURE__ */ React71.createElement(LoadMaskCmp, { visible: loading }, loadingText));
+  ), /* @__PURE__ */ React70.createElement(LoadMaskCmp, { visible: loading }, loadingText));
 }
-var InfiniteTableComponent = React71.memo(
+var InfiniteTableComponent = React70.memo(
   function InfiniteTableComponent2() {
     const context = useInfiniteTable();
     const masterContext = useMasterDetailContext();
@@ -27392,7 +28094,7 @@ var InfiniteTableComponent = React71.memo(
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
-    React71.useEffect(() => {
+    React70.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -27415,7 +28117,7 @@ var InfiniteTableComponent = React71.memo(
       ...initialDOMProps
     } = componentState.domProps ?? {};
     const domProps = useDOMProps(initialDOMProps);
-    React71.useEffect(() => {
+    React70.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -27426,7 +28128,7 @@ var InfiniteTableComponent = React71.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React71.useEffect(() => {
+    React70.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -27439,59 +28141,75 @@ var InfiniteTableComponent = React71.memo(
         globalThis.infiniteApi = context.api;
       }
     }, [componentState.ready]);
-    useDebugMode();
-    React71.useEffect(() => {
+    const debugId = useDebugMode();
+    React70.useEffect(() => {
       if (masterContext) {
         portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
       }
     }, []);
-    const children = initialChildren ?? /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React71.createElement(InfiniteTableBody, null));
-    return /* @__PURE__ */ React71.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React71.createElement(
+    const children = initialChildren ?? /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React70.createElement(InfiniteTableBody, null));
+    return /* @__PURE__ */ React70.createElement(
       "div",
       {
-        ref: portalDOMRef,
-        className: join(
-          `${rootClassName2}Portal`,
-          zIndex[1e7],
-          position.absolute,
-          top[0],
-          left[0]
-        )
+        "data-debug-id": debugId,
+        onKeyDown: onKeyDown2,
+        ref: domRef,
+        ...domProps
       },
-      menuPortal,
-      cellContextMenuPortal,
-      tableContextMenuPortal,
-      filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "row-height",
-        varName: rowHeightCSSVar,
-        onChange: onRowHeightCSSVarChange
-      }
-    ) : null, /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "flashing-duration",
-        allowInts: true,
-        varName: ThemeVars.components.Cell.flashingDuration,
-        onChange: onFlashingDurationCSSVarChange
-      }
-    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "row-detail-height",
-        varName: rowDetailHeightCSSVar,
-        onChange: onRowDetailHeightCSSVarChange
-      }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React71.createElement(
-      CSSNumericVariableWatch,
-      {
-        key: "column-header-height",
-        varName: columnHeaderHeightCSSVar,
-        onChange: onColumnHeaderHeightCSSVarChange
-      }
-    ) : null, licenseValid ? null : /* @__PURE__ */ React71.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React71.createElement(FocusDetect, null));
+      children,
+      /* @__PURE__ */ React70.createElement(
+        "div",
+        {
+          ref: portalDOMRef,
+          className: join(
+            `${rootClassName2}Portal`,
+            zIndex[1e7],
+            position.absolute,
+            top[0],
+            left[0]
+          )
+        },
+        menuPortal,
+        cellContextMenuPortal,
+        tableContextMenuPortal,
+        filterOperatorMenuPortal
+      ),
+      rowHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "row-height",
+          varName: rowHeightCSSVar,
+          onChange: onRowHeightCSSVarChange
+        }
+      ) : null,
+      /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "flashing-duration",
+          allowInts: true,
+          varName: ThemeVars.components.Cell.flashingDuration,
+          onChange: onFlashingDurationCSSVarChange
+        }
+      ),
+      rowDetailHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "row-detail-height",
+          varName: rowDetailHeightCSSVar,
+          onChange: onRowDetailHeightCSSVarChange
+        }
+      ) : null,
+      columnHeaderHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+        CSSNumericVariableWatch,
+        {
+          key: "column-header-height",
+          varName: columnHeaderHeightCSSVar,
+          onChange: onColumnHeaderHeightCSSVarChange
+        }
+      ) : null,
+      licenseValid ? null : /* @__PURE__ */ React70.createElement(InfiniteTableLicenseFooter, null),
+      /* @__PURE__ */ React70.createElement(FocusDetect, null)
+    );
   }
 );
 function InfiniteTableContextProvider({
@@ -27508,6 +28226,16 @@ function InfiniteTableContextProvider({
     globalThis.getComputed = getComputed;
     globalThis.componentActions = componentActions;
     globalThis.masterBrain = componentState.brain;
+    globalThis.INFINITE = globalThis.INFINITE || {};
+    if (getState().debugId) {
+      const debugId = getState().debugId;
+      globalThis.INFINITE[debugId] = {
+        // @ts-ignore
+        ...globalThis.INFINITE[debugId] || {},
+        getState,
+        actions: componentActions
+      };
+    }
   }
   const {
     getState: getDataSourceState,
@@ -27515,7 +28243,7 @@ function InfiniteTableContextProvider({
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React71.useState(() => {
+  const [imperativeApi] = React70.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -27551,20 +28279,20 @@ function InfiniteTableContextProvider({
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React71.useEffect(() => {
+  React70.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React71.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React71.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React70.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React70.createElement(InfiniteTableComponent, null));
 }
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
 var InfiniteTable = function(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React70.createElement(
       InfiniteTableRoot,
       {
         repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
@@ -27572,34 +28300,33 @@ var InfiniteTable = function(props) {
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
         ...props
       },
-      /* @__PURE__ */ React71.createElement(InfiniteTableContextProvider, { children: props.children })
+      /* @__PURE__ */ React70.createElement(InfiniteTableContextProvider, { children: props.children })
     )
   );
   if (false) {
-    return /* @__PURE__ */ React71.createElement(React71.StrictMode, null, table);
+    return /* @__PURE__ */ React70.createElement(React70.StrictMode, null, table);
   }
   return table;
 };
 InfiniteTable.Header = InfiniteTableHeader2;
 InfiniteTable.Body = InfiniteTableBody;
 InfiniteTable.HScrollSyncContent = HScrollSyncContent;
-InfiniteTable.Footer = () => /* @__PURE__ */ React71.createElement(InfiniteTableFooter, null);
+InfiniteTable.Footer = () => /* @__PURE__ */ React70.createElement(InfiniteTableFooter, null);
 
 // src/components/TreeGrid/TreeDataSource.tsx
-var React72 = __toESM(require("react"));
+var React71 = __toESM(require("react"));
 function TreeDataSource(props) {
   const { DataSource: DataSourceComponent } = useDataSourceInternal({ nodesKey: "children", ...props });
-  return /* @__PURE__ */ React72.createElement(DataSourceComponent, null, props.children ?? null);
+  return /* @__PURE__ */ React71.createElement(DataSourceComponent, null, props.children ?? null);
 }
 
 // src/components/TreeGrid/TreeGrid.tsx
-var React73 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 function TreeGrid(props) {
-  return /* @__PURE__ */ React73.createElement(InfiniteTable, { ...props });
+  return /* @__PURE__ */ React72.createElement(InfiniteTable, { ...props });
 }
 
 // src/components/DataSource/DataLoader/DataQuery.ts
-var logger2 = debug("InfiniteTable:DataQuery");
 var DataQuery = class {
   constructor(debugName) {
     this.state = "idle";
@@ -27613,21 +28340,21 @@ var DataQuery = class {
       let resolvePending = () => {
       };
       try {
-        logger2(`Fetching query ${this.debugName}...`);
+        this.logger(`Fetching query ${this.debugName}...`);
         this.pendingPromise = new Promise((resolve) => {
           resolvePending = resolve;
         });
         this.result = await loadFn(...key);
         this.state = "success";
-      } catch (error2) {
+      } catch (error4) {
         this.result = void 0;
-        this.error = error2;
+        this.error = error4;
         this.state = "error";
       }
       this.doneAt = Date.now();
       this.pendingPromise = void 0;
       resolvePending(this);
-      logger2(`Fetched query ${this.debugName}. State: ${this.state}.`);
+      this.logger(`Fetched query ${this.debugName}. State: ${this.state}.`);
       return this.getDoneSnapshot();
     };
     this.getCurrentSnapshot = () => {
@@ -27667,6 +28394,7 @@ var DataQuery = class {
     this.isDone = () => this.state === "success" || this.state === "error";
     this.isSuccess = () => this.state === "success";
     this.debugName = debugName || "";
+    this.logger = debug(`${debugName}:DataQuery`);
   }
 };
 
@@ -27725,7 +28453,7 @@ var _DataClient = class {
           this.removeQueryIfErrored(cachedQuery, stringifiedCacheKey);
         }
       }
-      const dataQuery = new DataQuery(options.name || "");
+      const dataQuery = new DataQuery(`${this.name}:${options.name}`);
       this.queryCache.set(stringifiedCacheKey, dataQuery);
       dataQuery.fetch(options.fn, options.key);
       dataQuery.getCurrentSnapshot().promise?.then(() => {
@@ -27837,7 +28565,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-var import_react66 = require("react");
+var import_react67 = require("react");
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -27999,21 +28727,21 @@ var WeakFixedSizeSet = _WeakFixedSizeSet;
 WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-var import_react67 = require("react");
+var import_react68 = require("react");
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
 var useEffectWhenSameDeps = (callback, deps) => {
-  const depsRef = (0, import_react67.useRef)(deps);
+  const depsRef = (0, import_react68.useRef)(deps);
   const sameDeps = isSameDeps(deps, depsRef.current);
-  const isInitialRef = (0, import_react67.useRef)(true);
+  const isInitialRef = (0, import_react68.useRef)(true);
   depsRef.current = deps;
-  const effectDepsRef = (0, import_react67.useRef)(["same"]);
+  const effectDepsRef = (0, import_react68.useRef)(["same"]);
   const effectDeps = sameDeps ? [Date.now()] : effectDepsRef.current;
   effectDepsRef.current = effectDeps;
-  const callbackRef = (0, import_react67.useRef)(callback);
+  const callbackRef = (0, import_react68.useRef)(callback);
   callbackRef.current = callback;
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -28023,7 +28751,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-var import_react68 = require("react");
+var import_react69 = require("react");
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -28034,26 +28762,26 @@ var isSameDeps2 = (deps, prevDeps, compare) => {
 };
 var useEffectWhen = (callback, options) => {
   const { same: depsForSame, different: depsForDifferent, compare } = options;
-  const sameDepsRef = (0, import_react68.useRef)(depsForSame);
-  const differentDepsRef = (0, import_react68.useRef)(depsForDifferent);
+  const sameDepsRef = (0, import_react69.useRef)(depsForSame);
+  const differentDepsRef = (0, import_react69.useRef)(depsForDifferent);
   const sameRespected = isSameDeps2(depsForSame, sameDepsRef.current, compare);
   const differentRespected = !isSameDeps2(
     depsForDifferent,
     differentDepsRef.current,
     compare
   );
-  const isInitialRef = (0, import_react68.useRef)(true);
+  const isInitialRef = (0, import_react69.useRef)(true);
   sameDepsRef.current = depsForSame;
   differentDepsRef.current = depsForDifferent;
-  const effectDepsRef = (0, import_react68.useRef)(["same"]);
+  const effectDepsRef = (0, import_react69.useRef)(["same"]);
   const effectDeps = sameRespected && differentRespected ? [Date.now()] : effectDepsRef.current;
   effectDepsRef.current = effectDeps;
-  const callbackRef = (0, import_react68.useRef)(callback);
+  const callbackRef = (0, import_react69.useRef)(callback);
   callbackRef.current = callback;
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (isInitialRef.current) {
       return;
     }
@@ -28062,12 +28790,12 @@ var useEffectWhen = (callback, options) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
-var React74 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 var currentFlashingDurationVar = stripVar(
   InternalVars.currentFlashingDuration
 );
 var defaultRender = ({ children }) => {
-  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, children);
+  return /* @__PURE__ */ React73.createElement(React73.Fragment, null, children);
 };
 var DEFAULT_FLASH_DURATION = 1e3;
 var INTERNAL_FLASH_CLS_FOR_DIRECTION = {
@@ -28089,7 +28817,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
     // fadeClassName,
     render = defaultRender
   } = options;
-  const FlashingColumnCell2 = React74.forwardRef(
+  const FlashingColumnCell2 = React73.forwardRef(
     (props, _ref) => {
       const cellContext = useInfiniteColumnCell();
       const {
@@ -28099,13 +28827,13 @@ var createFlashingColumnCellComponent = (options = {}) => {
       const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
       const rowId = rowInfo.id;
       const columnId = column.id;
-      const initialRef = React74.useRef(true);
-      const oldValueRef = React74.useRef(value);
+      const initialRef = React73.useRef(true);
+      const oldValueRef = React73.useRef(value);
       const oldValue = initialRef.current ? null : oldValueRef.current;
       initialRef.current = false;
-      const flashTimeoutIdRef = React74.useRef();
-      const flashDirectionRef = React74.useRef();
-      const fadeTimeoutIdRef = React74.useRef();
+      const flashTimeoutIdRef = React73.useRef();
+      const flashDirectionRef = React73.useRef();
+      const fadeTimeoutIdRef = React73.useRef();
       useEffectWhen(
         () => {
           if (value === oldValueRef.current) {
@@ -28152,7 +28880,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
           different: [value]
         }
       );
-      return /* @__PURE__ */ React74.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
+      return /* @__PURE__ */ React73.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
     }
   );
   return FlashingColumnCell2;