@infinite-table/infinite-react 7.2.4 → 7.2.5-canary.1

package/index.d.ts

@@ -2534,7 +2534,7 @@ declare class GridRenderer extends Logger {
     private scrolling;
     cellHoverClassNames: string[];
     cellDetachedClassNames: string[];
-    protected cellManager: GridCellManager<{
+    cellManager: GridCellManager<{
         renderRowIndex: number;
         renderColIndex: number;
     }>;
@@ -7547,6 +7547,11 @@ type FlashingCellOptions = {
 declare const createFlashingColumnCellComponent: (options?: FlashingCellOptions) => React$1.ForwardRefExoticComponent<Omit<React$1.HTMLProps<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const FlashingColumnCell: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLProps<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
+type MatrixDebuggerProps = {
+    debugTarget: string;
+};
+declare function INTERNAL_MatrixDebugger(props: MatrixDebuggerProps): React$1.JSX.Element | null;
+
 declare const components: {
     CheckBox: typeof InfiniteCheckBox;
     LoadMask: (props: LoadMaskProps) => React$1.JSX.Element;
@@ -7555,4 +7560,4 @@ declare const components: {
     NumberFilterEditor: typeof NumberFilterEditor;
 };
 
-export { type AdvancedAlignable, CellSelectionState, type CellSelectionStateObject, type ColumnTypeWithInherit, DataClient, DataSource, type DataSourceAction, DataSourceActionType, type DataSourceAggregationReducer, type DataSourceApi, type DataSourceCRUDParam, type DataSourceCallback_BaseParam, type DataSourceComponentActions, type DataSourceContextValue, type DataSourceData, type DataSourceDataParams, type DataSourceDataParamsChanges, type DataSourceDebugWarningKey, type DataSourceDerivedState, type DataSourceFilterFunctionParam, type DataSourceFilterOperator, type DataSourceFilterOperatorFunction, type DataSourceFilterOperatorFunctionParam, type DataSourceFilterType, type DataSourceFilterValueItem, type DataSourceFilterValueItemValueGetter, type DataSourceGroupBy, type DataSourceGroupRowsList, type DataSourceInsertParam, type DataSourceLivePaginationCursorFn, type DataSourceLivePaginationCursorParams, type DataSourceLivePaginationCursorValue, type DataSourceMappedState, type DataSourceMappings, type DataSourceMasterDetailContextValue, type DataSourcePivotBy, type DataSourcePropAggregationReducers, type DataSourcePropCellSelection, type DataSourcePropCellSelection_MultiCell, type DataSourcePropCellSelection_SingleCell, type DataSourcePropFilterFunction, type DataSourcePropFilterTypes, type DataSourcePropFilterValue, type DataSourcePropGroupBy, type DataSourcePropGroupRowsState, type DataSourcePropGroupRowsStateObject, type DataSourcePropIsNodeExpanded, type DataSourcePropIsNodeReadOnly, type DataSourcePropIsNodeSelectable, type DataSourcePropIsNodeSelected, type DataSourcePropIsRowSelected, type DataSourcePropLivePaginationCursor, type DataSourcePropMultiRowSelectionChangeParamType, type DataSourcePropOnCellSelectionChange, type DataSourcePropOnCellSelectionChange_MultiCell, type DataSourcePropOnCellSelectionChange_SingleCell, type DataSourcePropOnRowSelectionChange, type DataSourcePropOnRowSelectionChange_MultiRow, type DataSourcePropOnRowSelectionChange_SingleRow, type DataSourcePropOnTreeSelectionChange, type DataSourcePropOnTreeSelectionChange_MultiNode, type DataSourcePropOnTreeSelectionChange_SingleNode, type DataSourcePropPivotBy, type DataSourcePropRowInfoReducers, type DataSourcePropRowSelection, type DataSourcePropRowSelection_MultiRow, type DataSourcePropRowSelection_SingleRow, type DataSourcePropSelectionMode, type DataSourcePropShouldReloadData, type DataSourcePropShouldReloadDataObject, type DataSourcePropSortFn, type DataSourcePropSortInfo, type DataSourcePropSortTypes, type DataSourcePropTreeFilterFunction, type DataSourcePropTreeSelection, type DataSourcePropTreeSelection_MultiNode, type DataSourcePropTreeSelection_SingleNode, type DataSourceProps, type DataSourcePropsNotAvailableInTreeDataSource, type DataSourcePropsWithChildren, type DataSourceRawReducer, type DataSourceRemoteData, type DataSourceRowInfoReducer, type DataSourceSetupState, type DataSourceSingleSortInfo, type DataSourceSortInfo, type DataSourceState, type DataSourceUpdateParam, type DebugLogger, type DebugTimingKey, type DebugWarningPayload, DeepMap, type DevToolsDataSourceOverrides, type DevToolsGenericMessage, type DevToolsHookFn, type DevToolsHookFnOptions, type DevToolsHostPageLogMessage, type DevToolsHostPageLogMessagePayload, type DevToolsHostPageMessage, type DevToolsHostPageMessagePayload, type DevToolsHostPageMessageType, type DevToolsInfiniteOverrides, type DevToolsMessageAddress, type DevToolsOverrides, type ElementContainerGetter, type ErrorCodeKey, FixedSizeSet, FlashingColumnCell, GroupRowsState, type InfiniteColumnEditorContextType, InfiniteTable, type InfiniteTableAction, InfiniteTableActionType, type InfiniteTableApi, type InfiniteTableCellSelectionApi, InfiniteTableClassName, type InfiniteTableColumn, type InfiniteTableColumnAggregator, type InfiniteTableColumnApi, type InfiniteTableColumnCellContextType, type InfiniteTableColumnComparer, type InfiniteTableColumnGroup, type InfiniteTableColumnRenderFunctionForGroupRows, type InfiniteTableColumnRenderFunctionForNormalRows, type InfiniteTableColumnRenderValueParam, type InfiniteTableColumnRowspanParam, type InfiniteTableColumnSizingOptions, type InfiniteTableColumnValueFormatterParams, type InfiniteTableColumnValueGetterParams, InfiniteTableComponent, type InfiniteTableComputedColumn, type InfiniteTableComputedValues, type InfiniteTableContextValue, type InfiniteTableDebugWarningKey, type InfiniteTableGroupColumnBase, type InfiniteTableGroupColumnFunction, type InfiniteTableGroupColumnGetterOptions, type InfiniteTableKeyboardNavigationApi, type InfiniteTablePivotColumn, type InfiniteTablePropAutoSizeColumnsKey, type InfiniteTablePropColumnGroupVisibility, type InfiniteTablePropColumnGroups, type InfiniteTablePropColumnOrder, type InfiniteTablePropColumnPinning, type InfiniteTablePropColumnSizing, type InfiniteTablePropColumnTypes, type InfiniteTablePropColumnVisibility, type InfiniteTablePropColumns, type InfiniteTablePropComponents, type InfiniteTablePropGetCellContextMenuItems, type InfiniteTablePropGetColumnMenuItems, type InfiniteTablePropGetContextMenuItems, type InfiniteTablePropGroupColumn, type InfiniteTablePropGroupRenderStrategy, type InfiniteTablePropHeaderOptions, type InfiniteTablePropKeyboardNavigation, type InfiniteTablePropKeyboardShorcut, type InfiniteTablePropMultiSortBehavior, type InfiniteTablePropRowClassName, type InfiniteTablePropRowStyle, type InfiniteTableProps, type InfiniteTablePropsNotAvailableInTreeGrid, type InfiniteTableRowClassNameFn, type InfiniteTableRowDetailApi, type InfiniteTableRowInfo, type InfiniteTableRowSelectionApi, type InfiniteTableRowStyleFn, type InfiniteTableState, type InfiniteTable_HasGrouping_RowInfoGroup, type InfiniteTable_HasGrouping_RowInfoNormal, type InfiniteTable_Tree_RowInfoLeafNode, type InfiniteTable_Tree_RowInfoNode, type InfiniteTable_Tree_RowInfoParentNode, type LazyGroupDataDeepMap, type LazyGroupDataItem, type LazyRowInfoGroup, Menu, type MenuChildrenFnParam, type MenuColumn, type MenuColumnRenderParam, type MenuDecoration, type MenuIconProps, type MenuItemActionContext, type MenuItemDefinition, type MenuItemObject, type MenuProps, type MenuRenderable, type MenuRuntimeItem, type MenuRuntimeItemSelectable, type MenuSeparator, type OverlayShowParams, RowDetailCache, RowDetailState, type RowDetailStateObject, RowDisabledState, type RowDisabledStateObject, RowSelectionState, type ScrollStopInfo, type Scrollbars, type ShowOverlayFn, type TableRenderRange, TreeDataSource, type TreeDataSourceProps, TreeExpandState, type TreeExpandStateValue, TreeGrid, type TreeGridOnlyProps, type TreeGridProps, TreeSelectionState, type TreeSelectionValue, type UpdateChildrenFn, type UpdateOverlayContentFn, type WaitForNodeOptions, WeakFixedSizeSet, alignNode, components, createFlashingColumnCellComponent, debounce, debug, defaultFilterTypes, eventMatchesKeyboardShortcut, filterDataArray, defaultFilterTypes as filterTypes, flatten, buildManagedComponent as getComponentStateRoot, group, interceptMap, keyboardShortcuts, multisort, multisortNested, queryKeyToCacheKey, toTreeDataArray, useManagedComponentState as useComponentState, useDataSourceInternal, useDataSourceState, useEffectWhen, useEffectWhenSameDeps, useEffectWithChanges, useEffectWithObject, useGridScroll, useInfiniteColumnCell, useInfiniteColumnEditor, useInfiniteColumnFilterEditor, useInfiniteHeaderCell, useInfinitePortalContainer, useLayoutEffectWithChanges, useManagedDataSource, useMasterRowInfo, useOverlay, useOverlayPortal, usePrevious, useRowInfoReducers, useVisibleColumnSizes };
+export { type AdvancedAlignable, CellSelectionState, type CellSelectionStateObject, type ColumnTypeWithInherit, DataClient, DataSource, type DataSourceAction, DataSourceActionType, type DataSourceAggregationReducer, type DataSourceApi, type DataSourceCRUDParam, type DataSourceCallback_BaseParam, type DataSourceComponentActions, type DataSourceContextValue, type DataSourceData, type DataSourceDataParams, type DataSourceDataParamsChanges, type DataSourceDebugWarningKey, type DataSourceDerivedState, type DataSourceFilterFunctionParam, type DataSourceFilterOperator, type DataSourceFilterOperatorFunction, type DataSourceFilterOperatorFunctionParam, type DataSourceFilterType, type DataSourceFilterValueItem, type DataSourceFilterValueItemValueGetter, type DataSourceGroupBy, type DataSourceGroupRowsList, type DataSourceInsertParam, type DataSourceLivePaginationCursorFn, type DataSourceLivePaginationCursorParams, type DataSourceLivePaginationCursorValue, type DataSourceMappedState, type DataSourceMappings, type DataSourceMasterDetailContextValue, type DataSourcePivotBy, type DataSourcePropAggregationReducers, type DataSourcePropCellSelection, type DataSourcePropCellSelection_MultiCell, type DataSourcePropCellSelection_SingleCell, type DataSourcePropFilterFunction, type DataSourcePropFilterTypes, type DataSourcePropFilterValue, type DataSourcePropGroupBy, type DataSourcePropGroupRowsState, type DataSourcePropGroupRowsStateObject, type DataSourcePropIsNodeExpanded, type DataSourcePropIsNodeReadOnly, type DataSourcePropIsNodeSelectable, type DataSourcePropIsNodeSelected, type DataSourcePropIsRowSelected, type DataSourcePropLivePaginationCursor, type DataSourcePropMultiRowSelectionChangeParamType, type DataSourcePropOnCellSelectionChange, type DataSourcePropOnCellSelectionChange_MultiCell, type DataSourcePropOnCellSelectionChange_SingleCell, type DataSourcePropOnRowSelectionChange, type DataSourcePropOnRowSelectionChange_MultiRow, type DataSourcePropOnRowSelectionChange_SingleRow, type DataSourcePropOnTreeSelectionChange, type DataSourcePropOnTreeSelectionChange_MultiNode, type DataSourcePropOnTreeSelectionChange_SingleNode, type DataSourcePropPivotBy, type DataSourcePropRowInfoReducers, type DataSourcePropRowSelection, type DataSourcePropRowSelection_MultiRow, type DataSourcePropRowSelection_SingleRow, type DataSourcePropSelectionMode, type DataSourcePropShouldReloadData, type DataSourcePropShouldReloadDataObject, type DataSourcePropSortFn, type DataSourcePropSortInfo, type DataSourcePropSortTypes, type DataSourcePropTreeFilterFunction, type DataSourcePropTreeSelection, type DataSourcePropTreeSelection_MultiNode, type DataSourcePropTreeSelection_SingleNode, type DataSourceProps, type DataSourcePropsNotAvailableInTreeDataSource, type DataSourcePropsWithChildren, type DataSourceRawReducer, type DataSourceRemoteData, type DataSourceRowInfoReducer, type DataSourceSetupState, type DataSourceSingleSortInfo, type DataSourceSortInfo, type DataSourceState, type DataSourceUpdateParam, type DebugLogger, type DebugTimingKey, type DebugWarningPayload, DeepMap, type DevToolsDataSourceOverrides, type DevToolsGenericMessage, type DevToolsHookFn, type DevToolsHookFnOptions, type DevToolsHostPageLogMessage, type DevToolsHostPageLogMessagePayload, type DevToolsHostPageMessage, type DevToolsHostPageMessagePayload, type DevToolsHostPageMessageType, type DevToolsInfiniteOverrides, type DevToolsMessageAddress, type DevToolsOverrides, type ElementContainerGetter, type ErrorCodeKey, FixedSizeSet, FlashingColumnCell, GroupRowsState, INTERNAL_MatrixDebugger, type InfiniteColumnEditorContextType, InfiniteTable, type InfiniteTableAction, InfiniteTableActionType, type InfiniteTableApi, type InfiniteTableCellSelectionApi, InfiniteTableClassName, type InfiniteTableColumn, type InfiniteTableColumnAggregator, type InfiniteTableColumnApi, type InfiniteTableColumnCellContextType, type InfiniteTableColumnComparer, type InfiniteTableColumnGroup, type InfiniteTableColumnRenderFunctionForGroupRows, type InfiniteTableColumnRenderFunctionForNormalRows, type InfiniteTableColumnRenderValueParam, type InfiniteTableColumnRowspanParam, type InfiniteTableColumnSizingOptions, type InfiniteTableColumnValueFormatterParams, type InfiniteTableColumnValueGetterParams, InfiniteTableComponent, type InfiniteTableComputedColumn, type InfiniteTableComputedValues, type InfiniteTableContextValue, type InfiniteTableDebugWarningKey, type InfiniteTableGroupColumnBase, type InfiniteTableGroupColumnFunction, type InfiniteTableGroupColumnGetterOptions, type InfiniteTableKeyboardNavigationApi, type InfiniteTablePivotColumn, type InfiniteTablePropAutoSizeColumnsKey, type InfiniteTablePropColumnGroupVisibility, type InfiniteTablePropColumnGroups, type InfiniteTablePropColumnOrder, type InfiniteTablePropColumnPinning, type InfiniteTablePropColumnSizing, type InfiniteTablePropColumnTypes, type InfiniteTablePropColumnVisibility, type InfiniteTablePropColumns, type InfiniteTablePropComponents, type InfiniteTablePropGetCellContextMenuItems, type InfiniteTablePropGetColumnMenuItems, type InfiniteTablePropGetContextMenuItems, type InfiniteTablePropGroupColumn, type InfiniteTablePropGroupRenderStrategy, type InfiniteTablePropHeaderOptions, type InfiniteTablePropKeyboardNavigation, type InfiniteTablePropKeyboardShorcut, type InfiniteTablePropMultiSortBehavior, type InfiniteTablePropRowClassName, type InfiniteTablePropRowStyle, type InfiniteTableProps, type InfiniteTablePropsNotAvailableInTreeGrid, type InfiniteTableRowClassNameFn, type InfiniteTableRowDetailApi, type InfiniteTableRowInfo, type InfiniteTableRowSelectionApi, type InfiniteTableRowStyleFn, type InfiniteTableState, type InfiniteTable_HasGrouping_RowInfoGroup, type InfiniteTable_HasGrouping_RowInfoNormal, type InfiniteTable_Tree_RowInfoLeafNode, type InfiniteTable_Tree_RowInfoNode, type InfiniteTable_Tree_RowInfoParentNode, type LazyGroupDataDeepMap, type LazyGroupDataItem, type LazyRowInfoGroup, Menu, type MenuChildrenFnParam, type MenuColumn, type MenuColumnRenderParam, type MenuDecoration, type MenuIconProps, type MenuItemActionContext, type MenuItemDefinition, type MenuItemObject, type MenuProps, type MenuRenderable, type MenuRuntimeItem, type MenuRuntimeItemSelectable, type MenuSeparator, type OverlayShowParams, RowDetailCache, RowDetailState, type RowDetailStateObject, RowDisabledState, type RowDisabledStateObject, RowSelectionState, type ScrollStopInfo, type Scrollbars, type ShowOverlayFn, type TableRenderRange, TreeDataSource, type TreeDataSourceProps, TreeExpandState, type TreeExpandStateValue, TreeGrid, type TreeGridOnlyProps, type TreeGridProps, TreeSelectionState, type TreeSelectionValue, type UpdateChildrenFn, type UpdateOverlayContentFn, type WaitForNodeOptions, WeakFixedSizeSet, alignNode, components, createFlashingColumnCellComponent, debounce, debug, defaultFilterTypes, eventMatchesKeyboardShortcut, filterDataArray, defaultFilterTypes as filterTypes, flatten, buildManagedComponent as getComponentStateRoot, group, interceptMap, keyboardShortcuts, multisort, multisortNested, queryKeyToCacheKey, toTreeDataArray, useManagedComponentState as useComponentState, useDataSourceInternal, useDataSourceState, useEffectWhen, useEffectWhenSameDeps, useEffectWithChanges, useEffectWithObject, useGridScroll, useInfiniteColumnCell, useInfiniteColumnEditor, useInfiniteColumnFilterEditor, useInfiniteHeaderCell, useInfinitePortalContainer, useLayoutEffectWithChanges, useManagedDataSource, useMasterRowInfo, useOverlay, useOverlayPortal, usePrevious, useRowInfoReducers, useVisibleColumnSizes };

package/index.dev.js

@@ -76,6 +76,7 @@ __export(index_exports, {
   FixedSizeSet: () => FixedSizeSet,
   FlashingColumnCell: () => FlashingColumnCell,
   GroupRowsState: () => GroupRowsState,
+  INTERNAL_MatrixDebugger: () => INTERNAL_MatrixDebugger,
   InfiniteTable: () => InfiniteTable,
   InfiniteTableClassName: () => InfiniteTableClassName,
   InfiniteTableComponent: () => InfiniteTableComponent,
@@ -1470,6 +1471,7 @@ var import_react6 = require("react");
 
 // src/components/RawList/AvoidReactDiff.tsx
 var React8 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_react5 = require("react");
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = (0, import_react5.useState)(props.updater.get);
@@ -1481,10 +1483,14 @@ function AvoidReactDiffFn(props) {
           cancelAnimationFrame(rafId.current);
         }
         rafId.current = requestAnimationFrame(() => {
-          setChildren(children2);
+          (0, import_react_dom.flushSync)(() => {
+            setChildren(children2);
+          });
         });
       } else {
-        setChildren(children2);
+        (0, import_react_dom.flushSync)(() => {
+          setChildren(children2);
+        });
       }
     }
     const remove = props.updater.onChange(onChange);
@@ -6134,7 +6140,7 @@ function InfiniteTableFooter(props) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React52 = __toESM(require("react"));
 var import_react34 = require("react");
-var import_react_dom = require("react-dom");
+var import_react_dom2 = require("react-dom");
 
 // src/utils/keyMirror.ts
 function keyMirror(obj) {
@@ -13431,7 +13437,7 @@ function InfiniteTableHeaderCell(props) {
       ),
       currentHeader
     );
-    draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
+    draggingProxy = (0, import_react_dom2.createPortal)(draggingProxy, portalDOMRef.current);
   }
   return /* @__PURE__ */ React52.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React52.createElement(
     InfiniteTableCell,
@@ -25720,7 +25726,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.2.4"
+      version: "7.2.5-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -26583,7 +26589,7 @@ var import_react60 = require("react");
 // src/components/hooks/useOverlay/index.tsx
 var React60 = __toESM(require("react"));
 var import_react56 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 
 // src/utils/pageGeometry/alignment/index.ts
 function isHTMLElement(v) {
@@ -26835,7 +26841,7 @@ function useOverlayPortal(content, portalContainer) {
     }
     getContainer();
   }, [portalContainer]);
-  return portalContainer ? container ? (0, import_react_dom2.createPortal)(content, container) : (
+  return portalContainer ? container ? (0, import_react_dom3.createPortal)(content, container) : (
     // we're probably still fetching the container
     /* @__PURE__ */ React60.createElement(React60.Fragment, null)
   ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React60.createElement(DefaultOverlayPortal, null, content);
@@ -30740,6 +30746,131 @@ var createFlashingColumnCellComponent = (options = {}) => {
 };
 var FlashingColumnCell = createFlashingColumnCellComponent();
 
+// src/components/HeadlessTable/MatrixDebugger.tsx
+var React80 = __toESM(require("react"));
+var import_react74 = require("react");
+var import_react_dom4 = require("react-dom");
+function INTERNAL_MatrixDebugger(props) {
+  const [getState, setGetState] = React80.useState(null);
+  (0, import_react74.useEffect)(() => {
+    const { debugTarget } = props;
+    const intervalId = setInterval(() => {
+      if (globalThis.INFINITE && globalThis.INFINITE[debugTarget]) {
+        const getState2 = globalThis.INFINITE[debugTarget].getState;
+        clearInterval(intervalId);
+        setGetState(() => getState2);
+      }
+    }, 100);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [props.debugTarget]);
+  return typeof getState === "function" ? /* @__PURE__ */ React80.createElement(MatrixDebuggerContext.Provider, { value: { getState } }, /* @__PURE__ */ React80.createElement(MatrixDebuggerUI, null)) : null;
+}
+var MatrixDebuggerContext = React80.createContext({
+  getState: () => null
+});
+function MatrixDebuggerUI() {
+  const contextValue = React80.useContext(MatrixDebuggerContext);
+  const { getState } = contextValue;
+  const [, rerender] = useRerender();
+  const cellManager = getState().renderer.cellManager;
+  (0, import_react74.useEffect)(() => {
+    const delayedRerender = debounce(
+      () => {
+        console.log("rerender");
+        rerender();
+      },
+      { wait: 500 }
+    );
+    return cellManager.onCellAttachmentChange(delayedRerender);
+  }, [cellManager, rerender]);
+  const rowIndexes = cellManager.getRowsWithCells();
+  const columnsIndexes = cellManager.getColumnsWithCells();
+  const domRef = (0, import_react74.useRef)(null);
+  const displayTimeoutRef = (0, import_react74.useRef)(null);
+  return /* @__PURE__ */ React80.createElement("div", { style: { overflow: "auto" } }, (0, import_react_dom4.createPortal)(
+    /* @__PURE__ */ React80.createElement(
+      "div",
+      {
+        ref: domRef,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "0px",
+          height: "0px",
+          pointerEvents: "none",
+          background: "rgba(255, 0, 0, 0.5)",
+          opacity: "0"
+        }
+      }
+    ),
+    document.body
+  ), /* @__PURE__ */ React80.createElement(
+    "table",
+    {
+      style: {
+        borderCollapse: "collapse"
+      }
+    },
+    /* @__PURE__ */ React80.createElement("thead", null, /* @__PURE__ */ React80.createElement("tr", null, columnsIndexes.map((columnIndex) => {
+      return /* @__PURE__ */ React80.createElement("th", { key: columnIndex, "data-col-index": columnIndex }, columnIndex);
+    }))),
+    /* @__PURE__ */ React80.createElement("tbody", null, rowIndexes.map((rowIndex) => {
+      return /* @__PURE__ */ React80.createElement("tr", { key: rowIndex, "data-row-index": rowIndex }, columnsIndexes.map((columnIndex) => {
+        return /* @__PURE__ */ React80.createElement(
+          "td",
+          {
+            key: columnIndex,
+            style: {
+              padding: 5,
+              border: "1px solid gray",
+              background: cellManager.getCellAt([rowIndex, columnIndex])?.getNode() ? "rgba(0, 255, 0, 0.3)" : "rgba(255, 0, 0, 0.3)"
+              // with 0.3 opacity
+            },
+            "data-col-index": columnIndex
+          },
+          /* @__PURE__ */ React80.createElement(
+            "button",
+            {
+              onClick: () => {
+                const el = cellManager.getCellAt([rowIndex, columnIndex])?.getElement();
+                if (!el) {
+                  return;
+                }
+                const rect = el.getBoundingClientRect();
+                domRef.current.style.top = `${rect.top}px`;
+                domRef.current.style.left = `${rect.left}px`;
+                domRef.current.style.width = `${rect.width}px`;
+                domRef.current.style.height = `${rect.height}px`;
+                domRef.current.style.opacity = "0.5";
+                domRef.current.style.transition = "opacity 0.5s";
+                if (displayTimeoutRef.current) {
+                  clearTimeout(displayTimeoutRef.current);
+                }
+                displayTimeoutRef.current = setTimeout(() => {
+                  domRef.current.style.opacity = "0";
+                  displayTimeoutRef.current = null;
+                }, 2e3);
+                console.log(el);
+              },
+              style: {
+                cursor: "pointer"
+              }
+            },
+            "(",
+            rowIndex,
+            ",",
+            columnIndex,
+            ")"
+          )
+        );
+      }));
+    }))
+  ));
+}
+
 // src/index.tsx
 var components = {
   CheckBox: InfiniteCheckBox,
@@ -30758,6 +30889,7 @@ var components = {
   FixedSizeSet,
   FlashingColumnCell,
   GroupRowsState,
+  INTERNAL_MatrixDebugger,
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,

package/index.dev.mjs

@@ -1404,6 +1404,7 @@ import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo2 } from "react"
 
 // src/components/RawList/AvoidReactDiff.tsx
 import * as React8 from "react";
+import { flushSync } from "react-dom";
 import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState } from "react";
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = useState(props.updater.get);
@@ -1415,10 +1416,14 @@ function AvoidReactDiffFn(props) {
           cancelAnimationFrame(rafId.current);
         }
         rafId.current = requestAnimationFrame(() => {
-          setChildren(children2);
+          flushSync(() => {
+            setChildren(children2);
+          });
         });
       } else {
-        setChildren(children2);
+        flushSync(() => {
+          setChildren(children2);
+        });
       }
     }
     const remove = props.updater.onChange(onChange);
@@ -25671,7 +25676,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.2.4"
+      version: "7.2.5-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -30701,6 +30706,131 @@ var createFlashingColumnCellComponent = (options = {}) => {
 };
 var FlashingColumnCell = createFlashingColumnCellComponent();
 
+// src/components/HeadlessTable/MatrixDebugger.tsx
+import * as React80 from "react";
+import { useEffect as useEffect44, useRef as useRef37 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+function INTERNAL_MatrixDebugger(props) {
+  const [getState, setGetState] = React80.useState(null);
+  useEffect44(() => {
+    const { debugTarget } = props;
+    const intervalId = setInterval(() => {
+      if (globalThis.INFINITE && globalThis.INFINITE[debugTarget]) {
+        const getState2 = globalThis.INFINITE[debugTarget].getState;
+        clearInterval(intervalId);
+        setGetState(() => getState2);
+      }
+    }, 100);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [props.debugTarget]);
+  return typeof getState === "function" ? /* @__PURE__ */ React80.createElement(MatrixDebuggerContext.Provider, { value: { getState } }, /* @__PURE__ */ React80.createElement(MatrixDebuggerUI, null)) : null;
+}
+var MatrixDebuggerContext = React80.createContext({
+  getState: () => null
+});
+function MatrixDebuggerUI() {
+  const contextValue = React80.useContext(MatrixDebuggerContext);
+  const { getState } = contextValue;
+  const [, rerender] = useRerender();
+  const cellManager = getState().renderer.cellManager;
+  useEffect44(() => {
+    const delayedRerender = debounce(
+      () => {
+        console.log("rerender");
+        rerender();
+      },
+      { wait: 500 }
+    );
+    return cellManager.onCellAttachmentChange(delayedRerender);
+  }, [cellManager, rerender]);
+  const rowIndexes = cellManager.getRowsWithCells();
+  const columnsIndexes = cellManager.getColumnsWithCells();
+  const domRef = useRef37(null);
+  const displayTimeoutRef = useRef37(null);
+  return /* @__PURE__ */ React80.createElement("div", { style: { overflow: "auto" } }, createPortal3(
+    /* @__PURE__ */ React80.createElement(
+      "div",
+      {
+        ref: domRef,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "0px",
+          height: "0px",
+          pointerEvents: "none",
+          background: "rgba(255, 0, 0, 0.5)",
+          opacity: "0"
+        }
+      }
+    ),
+    document.body
+  ), /* @__PURE__ */ React80.createElement(
+    "table",
+    {
+      style: {
+        borderCollapse: "collapse"
+      }
+    },
+    /* @__PURE__ */ React80.createElement("thead", null, /* @__PURE__ */ React80.createElement("tr", null, columnsIndexes.map((columnIndex) => {
+      return /* @__PURE__ */ React80.createElement("th", { key: columnIndex, "data-col-index": columnIndex }, columnIndex);
+    }))),
+    /* @__PURE__ */ React80.createElement("tbody", null, rowIndexes.map((rowIndex) => {
+      return /* @__PURE__ */ React80.createElement("tr", { key: rowIndex, "data-row-index": rowIndex }, columnsIndexes.map((columnIndex) => {
+        return /* @__PURE__ */ React80.createElement(
+          "td",
+          {
+            key: columnIndex,
+            style: {
+              padding: 5,
+              border: "1px solid gray",
+              background: cellManager.getCellAt([rowIndex, columnIndex])?.getNode() ? "rgba(0, 255, 0, 0.3)" : "rgba(255, 0, 0, 0.3)"
+              // with 0.3 opacity
+            },
+            "data-col-index": columnIndex
+          },
+          /* @__PURE__ */ React80.createElement(
+            "button",
+            {
+              onClick: () => {
+                const el = cellManager.getCellAt([rowIndex, columnIndex])?.getElement();
+                if (!el) {
+                  return;
+                }
+                const rect = el.getBoundingClientRect();
+                domRef.current.style.top = `${rect.top}px`;
+                domRef.current.style.left = `${rect.left}px`;
+                domRef.current.style.width = `${rect.width}px`;
+                domRef.current.style.height = `${rect.height}px`;
+                domRef.current.style.opacity = "0.5";
+                domRef.current.style.transition = "opacity 0.5s";
+                if (displayTimeoutRef.current) {
+                  clearTimeout(displayTimeoutRef.current);
+                }
+                displayTimeoutRef.current = setTimeout(() => {
+                  domRef.current.style.opacity = "0";
+                  displayTimeoutRef.current = null;
+                }, 2e3);
+                console.log(el);
+              },
+              style: {
+                cursor: "pointer"
+              }
+            },
+            "(",
+            rowIndex,
+            ",",
+            columnIndex,
+            ")"
+          )
+        );
+      }));
+    }))
+  ));
+}
+
 // src/index.tsx
 var components = {
   CheckBox: InfiniteCheckBox,
@@ -30718,6 +30848,7 @@ export {
   FixedSizeSet,
   FlashingColumnCell,
   GroupRowsState,
+  INTERNAL_MatrixDebugger,
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,