@infinite-table/infinite-react 7.4.1 → 7.4.2

package/index.dev.mjs

@@ -1328,6 +1328,13 @@ var toUpperFirst = (s) => {
   return s ? s.substr(0, 1).toUpperCase() + s.substr(1) : s;
 };
 
+// src/components/InfiniteTable/types/Utility.ts
+function notNullable(value) {
+  if (value === null || value === void 0) return false;
+  const testDummyForCompileError = value;
+  return true;
+}
+
 // src/components/utils/isControlledValue.ts
 function isControlledValue(value) {
   const controlled = value !== void 0;
@@ -1401,6 +1408,164 @@ var usePrevious = (value, initialValue) => {
   return ref.current;
 };
 
+// src/utils/devTools/devToolsTracks.ts
+var DevToolsTracks = {
+  DataSource: {
+    track: "DataSource",
+    labels: {
+      RemoteDataLoad: "Remote data load",
+      TreeUnfilteredTreePaths: "Computing unfiltered tree paths",
+      Filter: "Filter",
+      Sort: "Sort",
+      Group: "Group",
+      LazyGroup: "Lazy group",
+      Tree: "Tree",
+      FlattenTree: "Flatten tree",
+      Flatten: "Flatten groups",
+      PrepareData: "Preparing data",
+      ComputeSelectionCount: "Computing selection count",
+      ComputeSelectionCountLazy: "Computing selection count (lazy)",
+      PrepareRowInfo: "Preparing row info array"
+    }
+  },
+  InfiniteTable: {
+    track: "InfiniteTable",
+    labels: {
+      Render: "Rendering"
+    }
+  },
+  MatrixBrain: {
+    track: "Layout Computations",
+    labels: {
+      ComputeRenderRange: "Computing render range"
+    }
+  },
+  ComponentState: {
+    track: "ComponentState",
+    labels: {
+      PropUpdate: "Prop update"
+    }
+  }
+};
+
+// src/utils/devTools/index.ts
+var DevToolsMarker = class _DevToolsMarker {
+  constructor(debugId) {
+    this.debugId = debugId;
+    this.markerDetails = {
+      label: "",
+      track: "",
+      trackGroup: void 0,
+      color: void 0,
+      details: [],
+      tooltip: void 0
+    };
+    this.stopped = false;
+    this.start = (startDetails) => {
+      if (this.markerDetails.startTs) {
+        return this;
+      }
+      const start = performance.now();
+      this.markerDetails.details = startDetails?.details ?? [];
+      this.markerDetails.startTs = start;
+      return this;
+    };
+    this.end = (markerDetails = {}) => {
+      if (this.stopped) {
+        return this;
+      }
+      this.stopped = true;
+      const start = markerDetails.startTs ?? this.markerDetails.startTs;
+      const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
+      const color = markerDetails.color || this.markerDetails.color || "primary";
+      const trackGroup = markerDetails.trackGroup || this.markerDetails.trackGroup || `Infinite Table (${this.debugId})`;
+      const details = [
+        ...this.markerDetails.details || [],
+        ...markerDetails.details || []
+      ];
+      const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
+      const label = markerDetails.label || this.markerDetails.label || "Unknown";
+      const track = markerDetails.track || this.markerDetails.track || "Unknown";
+      performance.measure(label, {
+        start,
+        end,
+        detail: {
+          devtools: {
+            dataType: "track-entry",
+            trackGroup,
+            track,
+            color,
+            properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : void 0,
+            tooltipText: tooltip
+          }
+        }
+      });
+      return this;
+    };
+    this.debugId = debugId;
+  }
+  static create(debugId) {
+    return new _DevToolsMarker(debugId);
+  }
+  get startTimestamp() {
+    return this.markerDetails.startTs;
+  }
+  get track() {
+    const self = this;
+    return Object.keys(DevToolsTracks).reduce(
+      (acc, track) => {
+        const trackObj = {
+          start: self.start,
+          end: (markerDetails) => {
+            return self.end({
+              ...markerDetails,
+              track: DevToolsTracks[track].track,
+              label: markerDetails.label
+            });
+          },
+          get label() {
+            const currentTrack = DevToolsTracks[track];
+            return Object.keys(currentTrack.labels).reduce(
+              (labelAcc, label) => {
+                const labelObj = {
+                  start: self.start,
+                  end: (markerDetails) => {
+                    return self.end({
+                      ...markerDetails,
+                      track: currentTrack.track,
+                      label: currentTrack.labels[label]
+                    });
+                  }
+                };
+                Object.defineProperty(labelAcc, label, {
+                  get: () => {
+                    self.markerDetails.label = currentTrack.labels[label];
+                    return labelObj;
+                  }
+                });
+                return labelAcc;
+              },
+              {}
+            );
+          }
+        };
+        Object.defineProperty(acc, track, {
+          get: () => {
+            const currentTrack = DevToolsTracks[track];
+            self.markerDetails.track = currentTrack.track;
+            return trackObj;
+          }
+        });
+        return acc;
+      },
+      {}
+    );
+  }
+};
+function getMarker(debugId) {
+  return DevToolsMarker.create(debugId);
+}
+
 // src/components/hooks/useComponentState/index.tsx
 var notifyChange = (props, callbackPropName, values) => {
   const callbackProp = props[callbackPropName];
@@ -1657,9 +1822,10 @@ function buildManagedComponent(config) {
         }
       });
       if (updatedPropsToStateCount > 0 || newMappedStateCount > 0) {
-        const logger2 = config.debugName ? dbg(
-          typeof config.debugName === "function" ? `${config.debugName(currentProps)}:rerender` : `${config.debugName}:rerender`
-        ) : dbg("rerender");
+        const debugId = state.debugId;
+        const marker = debugId ? getMarker(debugId).track.ComponentState.label.PropUpdate.start() : void 0;
+        const debugChannelName = config.debugName ? typeof config.debugName === "function" ? `${config.debugName(currentProps)}:rerender` : `${config.debugName}:rerender` : "rerender";
+        const logger2 = dbg(debugChannelName);
         logger2(
           "Triggered by new values for the following props",
           ...[
@@ -1667,6 +1833,25 @@ function buildManagedComponent(config) {
             ...Object.keys(updatedPropsToState ?? {})
           ]
         );
+        if (marker) {
+          marker.end({
+            label: debugChannelName,
+            details: [
+              newMappedStateCount > 0 ? {
+                name: "Updated properties",
+                value: Object.keys(newMappedState).join(", ")
+              } : void 0,
+              updatedPropsToStateCount > 0 ? {
+                name: "Updated props",
+                value: Object.keys(updatedPropsToState).join(", ")
+              } : void 0,
+              updatedPropsToStateCount > 0 || updatedPropsToState ? {
+                name: "Details",
+                value: "The time for this marker is not accurate. The marker is only displayed so you can easily identify the props that triggered the rerender."
+              } : void 0
+            ].filter(notNullable)
+          });
+        }
         const action = {
           payload: {
             mappedState: newMappedStateCount ? newMappedState : null,
@@ -8450,28 +8635,39 @@ import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo6 } from "react"
 import * as React39 from "react";
 import { flushSync } from "react-dom";
 import { useLayoutEffect as useLayoutEffect7, useRef as useRef14, useState as useState12 } from "react";
+var SHOULD_FLUSH_SYNC = () => false;
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = useState12(props.updater.get);
   const rafId = useRef14(null);
+  const shouldFlushSync = props.shouldFlushSync ?? SHOULD_FLUSH_SYNC;
   useLayoutEffect7(() => {
     function onChange(children2) {
+      let FLUSH_SYNC = shouldFlushSync();
       if (props.useraf) {
         if (rafId.current != null) {
           cancelAnimationFrame(rafId.current);
         }
         rafId.current = requestAnimationFrame(() => {
+          if (FLUSH_SYNC) {
+            queueMicrotask(() => {
+              flushSync(() => {
+                setChildren(children2);
+              });
+            });
+          } else {
+            setChildren(children2);
+          }
+        });
+      } else {
+        if (FLUSH_SYNC) {
           queueMicrotask(() => {
             flushSync(() => {
               setChildren(children2);
             });
           });
-        });
-      } else {
-        queueMicrotask(() => {
-          flushSync(() => {
-            setChildren(children2);
-          });
-        });
+        } else {
+          setChildren(children2);
+        }
       }
     }
     const remove = props.updater.onChange(onChange);
@@ -8481,7 +8677,7 @@ function AvoidReactDiffFn(props) {
       }
       remove();
     };
-  }, [props.updater, props.useraf]);
+  }, [props.updater, props.useraf, shouldFlushSync]);
   return children ?? null;
 }
 var AvoidReactDiff = React39.memo(AvoidReactDiffFn);
@@ -9810,14 +10006,26 @@ var GridCellForReact = class {
   constructor(debugId, cellInfo) {
     this.element = null;
     this.mounted = false;
+    this.IS_UPDATED_WHILE_SCROLLING = false;
     this.mountSubscription = buildSubscriptionCallback();
+    this.isUpdatedWhileScrolling = () => {
+      return this.IS_UPDATED_WHILE_SCROLLING;
+    };
     const count = CELL_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
     const key = `${debugId}:GridCellReact:${count}`;
     CELL_COUNT_BY_DEBUG_ID.set(debugId, count + 1);
     this.debugId = key;
     this.cellInfo = cellInfo;
     this.updater = buildSubscriptionCallback();
-    this.node = /* @__PURE__ */ React40.createElement(AvoidReactDiff, { key, name: key, updater: this.updater });
+    this.node = /* @__PURE__ */ React40.createElement(
+      AvoidReactDiff,
+      {
+        key,
+        name: key,
+        updater: this.updater,
+        shouldFlushSync: this.isUpdatedWhileScrolling
+      }
+    );
     this.ref = (htmlElement) => {
       this.element = htmlElement;
       if (htmlElement) {
@@ -9849,7 +10057,8 @@ var GridCellForReact = class {
   getNode() {
     return this.node;
   }
-  update(content, additionalInfo) {
+  update(content, additionalInfo, scrollingObjectParam) {
+    this.IS_UPDATED_WHILE_SCROLLING = scrollingObjectParam ? scrollingObjectParam.scrolling : false;
     this.updater(content);
     this.cellInfo = additionalInfo;
   }
@@ -10141,14 +10350,14 @@ var GridCellManager = class extends Logger {
     }
     this.addCellToMatrix(cell, cellPos);
   }
-  renderNodeAtCell(node, cell, cellPos, additionalInfo) {
+  renderNodeAtCell(node, cell, cellPos, additionalInfo, scrollingObjectParam) {
     const currentCellAtPos = this.getCellAt(cellPos);
     if (currentCellAtPos && currentCellAtPos !== cell) {
       this.detachCellAt(cellPos);
     }
     this.pool.attachCell(cell);
     this.setCellPositionInMatrix(cell, cellPos);
-    cell.update(node, additionalInfo);
+    cell.update(node, additionalInfo, scrollingObjectParam);
     return cell;
   }
   getCellPosition(cell) {
@@ -10731,6 +10940,9 @@ var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnOffsetAtIndexWhileReordering2 = stripVar(
   InternalVars.columnOffsetAtIndexWhileReordering
 );
+var SCROLLING_OBJECT_PARAM_FLYWEIGHT = {
+  scrolling: false
+};
 var GridRenderer = class extends Logger {
   constructor(brain, debugId) {
     debugId = debugId || "ReactHeadlessTableRenderer";
@@ -11885,11 +12097,13 @@ var GridRenderer = class extends Logger {
       }
       return;
     }
+    SCROLLING_OBJECT_PARAM_FLYWEIGHT.scrolling = this.scrolling;
     this.cellManager.renderNodeAtCell(
       renderedNode,
       cell,
       [rowIndex, colIndex],
-      cellAdditionalInfo
+      cellAdditionalInfo,
+      SCROLLING_OBJECT_PARAM_FLYWEIGHT
     );
     this.updateElementPosition(cell, { hidden, rowspan, colspan });
     return;
@@ -18772,165 +18986,6 @@ function finishRowInfoReducersFor(params) {
   return results;
 }
 
-// src/utils/devTools/devToolsTracks.ts
-var DevToolsTracks = {
-  DataSource: {
-    track: "DataSource",
-    labels: {
-      RemoteDataLoad: "Remote data load",
-      TreeUnfilteredTreePaths: "Computing unfiltered tree paths",
-      Filter: "Filter",
-      Sort: "Sort",
-      Group: "Group",
-      LazyGroup: "Lazy group",
-      Tree: "Tree",
-      FlattenTree: "Flatten tree",
-      Flatten: "Flatten groups",
-      PrepareData: "Preparing data",
-      ComputeSelectionCount: "Computing selection count",
-      ComputeSelectionCountLazy: "Computing selection count (lazy)",
-      PrepareRowInfo: "Preparing row info array"
-    }
-  },
-  InfiniteTable: {
-    track: "InfiniteTable",
-    labels: {
-      Render: "Rendering"
-    }
-  },
-  MatrixBrain: {
-    track: "Layout Computations",
-    labels: {
-      ComputeRenderRange: "Computing render range"
-    }
-  }
-};
-
-// src/utils/devTools/index.ts
-var DevToolsMarker = class _DevToolsMarker {
-  constructor(debugId) {
-    this.debugId = debugId;
-    this.markerDetails = {
-      label: "",
-      track: "",
-      trackGroup: void 0,
-      color: void 0,
-      details: [],
-      tooltip: void 0
-    };
-    this.stopped = false;
-    this.start = (startDetails) => {
-      if (this.markerDetails.startTs) {
-        return this;
-      }
-      const start = performance.now();
-      this.markerDetails.details = startDetails?.details ?? [];
-      this.markerDetails.startTs = start;
-      return this;
-    };
-    this.end = (markerDetails = {}) => {
-      if (this.stopped) {
-        return this;
-      }
-      this.stopped = true;
-      const start = markerDetails.startTs ?? this.markerDetails.startTs;
-      const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
-      const color = markerDetails.color || this.markerDetails.color || "primary";
-      const trackGroup = markerDetails.trackGroup || this.markerDetails.trackGroup || `Infinite Table (${this.debugId})`;
-      const details = [
-        ...this.markerDetails.details || [],
-        ...markerDetails.details || []
-      ];
-      const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
-      const label = markerDetails.label || this.markerDetails.label || "Unknown";
-      const track = markerDetails.track || this.markerDetails.track || "Unknown";
-      performance.measure(label, {
-        start,
-        end,
-        detail: {
-          devtools: {
-            dataType: "track-entry",
-            trackGroup,
-            track,
-            color,
-            properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : void 0,
-            tooltipText: tooltip
-          }
-        }
-      });
-      return this;
-    };
-    this.debugId = debugId;
-  }
-  static create(debugId) {
-    return new _DevToolsMarker(debugId);
-  }
-  get startTimestamp() {
-    return this.markerDetails.startTs;
-  }
-  get track() {
-    const self = this;
-    return Object.keys(DevToolsTracks).reduce(
-      (acc, track) => {
-        const trackObj = {
-          start: self.start,
-          end: (markerDetails) => {
-            return self.end({
-              ...markerDetails,
-              track: DevToolsTracks[track].track,
-              label: markerDetails.label
-            });
-          },
-          get label() {
-            const currentTrack = DevToolsTracks[track];
-            return Object.keys(currentTrack.labels).reduce(
-              (labelAcc, label) => {
-                const labelObj = {
-                  start: self.start,
-                  end: (markerDetails) => {
-                    return self.end({
-                      ...markerDetails,
-                      track: currentTrack.track,
-                      label: currentTrack.labels[label]
-                    });
-                  }
-                };
-                Object.defineProperty(labelAcc, label, {
-                  get: () => {
-                    self.markerDetails.label = currentTrack.labels[label];
-                    return labelObj;
-                  }
-                });
-                return labelAcc;
-              },
-              {}
-            );
-          }
-        };
-        Object.defineProperty(acc, track, {
-          get: () => {
-            const currentTrack = DevToolsTracks[track];
-            self.markerDetails.track = currentTrack.track;
-            return trackObj;
-          }
-        });
-        return acc;
-      },
-      {}
-    );
-  }
-};
-function getMarker(debugId) {
-  return DevToolsMarker.create(debugId);
-}
-
-// src/components/InfiniteTable/types/Utility.ts
-function notNullable(value) {
-  if (value === null || value === void 0) return false;
-  const testDummyForCompileError = value;
-  return true;
-}
-
 // src/components/DataSource/state/reducer.ts
 function cleanupEmptyFilterValues(filterValue, filterTypes) {
   if (!filterValue) {
@@ -22392,6 +22447,9 @@ function isSortInfoForColumn(sortInfo, col) {
 }
 var InfiniteTableApiImpl = class {
   constructor(context) {
+    this.getVisibleRenderRange = () => {
+      return this.getState().brain.getRenderRange();
+    };
     this.hideFilterOperatorMenu = () => {
       this.actions.filterOperatorMenuVisibleForColumnId = null;
     };
@@ -25637,7 +25695,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.4.1"
+      version: "7.4.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;