@infinite-table/infinite-react 4.3.7 → 4.3.9

package/index.dev.js

@@ -1447,7 +1447,7 @@ var internalProps = {
 };
 
 // src/components/InfiniteTable/vars.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 var columnHeaderHeightName = "column-header-height";
 
 // src/components/InfiniteTable/utils/infiniteDOMUtils.ts
@@ -2980,11 +2980,16 @@ var ReactHeadlessTableRenderer = class extends Logger {
     }, zIndex2) => {
       const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
-      element.style.setProperty(
-        currentTransformY,
-        scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`
-      );
-      element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
+      const currentTransformYValue = scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`;
+      if (element.__currentTransformY !== currentTransformYValue) {
+        element.__currentTransformY = currentTransformYValue;
+        element.style.setProperty(currentTransformY, currentTransformYValue);
+      }
+      const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
+      if (element.__transformValue !== transformValue) {
+        element.__transformValue = transformValue;
+        element.style.transform = transformValue;
+      }
       if (zIndex2 != null) {
       }
     };
@@ -3638,11 +3643,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          itemElement.style.zIndex = hidden ? "-1" : (
+          const zIndex2 = hidden ? "-1" : (
             // #updatezindex - we need to allow elements use their own zIndex, so we
             // resort to allowing them to have it as a data-z-index attribute
             itemElement.dataset.zIndex || "auto"
           );
+          if (itemElement.__zIndex !== zIndex2) {
+            itemElement.__zIndex = zIndex2;
+            itemElement.style.zIndex = zIndex2;
+          }
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -4160,7 +4169,7 @@ var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicator
 var ActiveIndicatorWrapperCls = "ActiveCellIndicator_ActiveIndicatorWrapperCls__nxbq1c0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1b utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", hidden: "ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1b utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e" };
+var ActiveRowIndicatorCls = { visible: "ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", hidden: "ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
@@ -4168,7 +4177,8 @@ var baseCls = `${rootClassName3}-ActiveRowIndicator`;
 var ActiveStyle = {
   [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
   transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
-  height: InternalVars.activeCellRowHeight
+  height: InternalVars.activeCellRowHeight,
+  maxWidth: ThemeVars.runtime.totalVisibleColumnsWidth
 };
 var ActiveRowIndicatorFn = (props) => {
   const { brain } = props;
@@ -4592,8 +4602,8 @@ function forwardProps(propsToForward, props, setupState) {
   return mappedState;
 }
 function buildManagedComponent(config) {
+  const useParentStateFn = config.getParentState || (() => null);
   function useManagedComponent(props) {
-    var _a, _b;
     const [initialSetupState] = (0, import_react14.useState)(() => {
       return config.initSetupState ? config.initSetupState(props) : {};
     });
@@ -4602,7 +4612,7 @@ function buildManagedComponent(config) {
       () => config.forwardProps ? config.forwardProps(initialSetupState) : {},
       [initialSetupState]
     );
-    const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
+    const parentState = useParentStateFn();
     const getParentState = useLatest(parentState);
     function initStateOnce() {
       let mappedState = {};
@@ -4638,11 +4648,11 @@ function buildManagedComponent(config) {
     const [wholeState] = (0, import_react14.useState)(initStateOnce);
     const getProps = useLatest(props);
     const theReducer = (previousState, action) => {
-      var _a2;
+      var _a;
       if (action.type === "REPLACE_STATE") {
         return action.payload;
       }
-      const parentState2 = (_a2 = getParentState == null ? void 0 : getParentState()) != null ? _a2 : null;
+      const parentState2 = (_a = getParentState == null ? void 0 : getParentState()) != null ? _a : null;
       const mappedState = action.payload.mappedState;
       const updatedProps = action.payload.updatedPropsToState;
       const newState = Object.assign({}, previousState);
@@ -4727,6 +4737,8 @@ function buildManagedComponent(config) {
       [state, actions, getComponentState]
     );
     const prevProps = usePrevious(props);
+    const skipTriggerParentStateChangeRef = (0, import_react14.useRef)(false);
+    skipTriggerParentStateChangeRef.current = false;
     const effectFn = config.layoutEffect ? import_react14.useLayoutEffect : import_react14.useEffect;
     effectFn(() => {
       const currentProps = props;
@@ -4784,6 +4796,7 @@ function buildManagedComponent(config) {
             updatedPropsToState: updatedPropsToStateCount ? updatedPropsToState : null
           }
         };
+        skipTriggerParentStateChangeRef.current = true;
         dispatch(action);
         if (config.onPropChange) {
           for (var prop in rawUpdatedProps)
@@ -4802,10 +4815,18 @@ function buildManagedComponent(config) {
         }
       }
     });
+    effectFn(() => {
+      if (parentState != null && !skipTriggerParentStateChangeRef.current) {
+        dispatch({
+          type: "PARENT_STATE_CHANGE",
+          payload: {}
+        });
+      }
+    }, [parentState]);
     useEffectOnce(() => {
       return () => {
-        var _a2;
-        (_a2 = config.cleanup) == null ? void 0 : _a2.call(config, getComponentState());
+        var _a;
+        (_a = config.cleanup) == null ? void 0 : _a.call(config, getComponentState());
       };
     });
     return { contextValue, ContextComponent: Context };
@@ -6650,6 +6671,10 @@ var publicRuntimeVars = {
   visibleColumnsCount: {
     name: stripVar(ThemeVars.runtime.visibleColumnsCount),
     value: ""
+  },
+  browserScrollbarWidth: {
+    name: stripVar(ThemeVars.runtime.browserScrollbarWidth),
+    value: ""
   }
 };
 var scrollbarWidthHorizontal = stripVar(
@@ -6733,6 +6758,9 @@ function useDOMProps(initialDOMProps) {
     },
     {}
   );
+  if (bodySize.width) {
+    cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
+  }
   cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
   cssVars[publicRuntimeVars.totalVisibleColumnsWidth.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
   cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
@@ -8249,7 +8277,7 @@ function InfiniteTableCellFn(props) {
   }
   const RenderComponent = cellType === "body" ? (_b = column.components) == null ? void 0 : _b.ColumnCell : (_c = column.components) == null ? void 0 : _c.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
   }
   return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
 }
@@ -12903,6 +12931,10 @@ function getDataSourceApi(param) {
 var DataSourceApiImpl = class {
   constructor(param) {
     this.pendingOperations = [];
+    //@ts-ignore
+    this.batchOperationRafId = 0;
+    //@ts-ignore
+    this.batchOperationTimeoutId = 0;
     this.pendingPromise = null;
     this.resolvePendingPromise = null;
     this.toPrimaryKey = (data) => {
@@ -13049,13 +13081,23 @@ var DataSourceApiImpl = class {
     this.actions = param.actions;
   }
   batchOperation(operation) {
+    var _a;
     if (!this.pendingPromise) {
       this.pendingPromise = new Promise((resolve) => {
         this.resolvePendingPromise = resolve;
       });
-      raf(() => {
-        this.commit();
-      });
+      const delay = Math.max(0, (_a = this.getState().batchOperationDelay) != null ? _a : 0);
+      if (delay === 0) {
+        this.batchOperationRafId = raf(() => {
+          this.commit();
+        });
+      } else {
+        this.batchOperationTimeoutId = setTimeout(() => {
+          this.batchOperationRafId = raf(() => {
+            this.commit();
+          });
+        }, delay);
+      }
     }
     this.pendingOperations.push(operation);
     return this.pendingPromise;
@@ -14464,6 +14506,7 @@ var forwardProps3 = (setupState) => {
         __idToIndex: idToIndexReducer
       };
     },
+    batchOperationDelay: 1,
     isRowSelected: 1,
     onDataArrayChange: 1,
     onDataMutations: 1,
@@ -18909,7 +18952,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.7"
+      version: "4.3.9"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.dev.mjs

@@ -1402,7 +1402,7 @@ var internalProps = {
 };
 
 // src/components/InfiniteTable/vars.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 var columnHeaderHeightName = "column-header-height";
 
 // src/components/InfiniteTable/utils/infiniteDOMUtils.ts
@@ -2935,11 +2935,16 @@ var ReactHeadlessTableRenderer = class extends Logger {
     }, zIndex2) => {
       const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
-      element.style.setProperty(
-        currentTransformY,
-        scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`
-      );
-      element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
+      const currentTransformYValue = scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`;
+      if (element.__currentTransformY !== currentTransformYValue) {
+        element.__currentTransformY = currentTransformYValue;
+        element.style.setProperty(currentTransformY, currentTransformYValue);
+      }
+      const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
+      if (element.__transformValue !== transformValue) {
+        element.__transformValue = transformValue;
+        element.style.transform = transformValue;
+      }
       if (zIndex2 != null) {
       }
     };
@@ -3593,11 +3598,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          itemElement.style.zIndex = hidden ? "-1" : (
+          const zIndex2 = hidden ? "-1" : (
             // #updatezindex - we need to allow elements use their own zIndex, so we
             // resort to allowing them to have it as a data-z-index attribute
             itemElement.dataset.zIndex || "auto"
           );
+          if (itemElement.__zIndex !== zIndex2) {
+            itemElement.__zIndex = zIndex2;
+            itemElement.style.zIndex = zIndex2;
+          }
         } else {
           itemElement.style.display = "";
           itemElement.style.left = `${x}px`;
@@ -4115,7 +4124,7 @@ var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicator
 var ActiveIndicatorWrapperCls = "ActiveCellIndicator_ActiveIndicatorWrapperCls__nxbq1c0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1b utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", hidden: "ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1b utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e" };
+var ActiveRowIndicatorCls = { visible: "ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", hidden: "ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
@@ -4123,7 +4132,8 @@ var baseCls = `${rootClassName3}-ActiveRowIndicator`;
 var ActiveStyle = {
   [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
   transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + var(${stripVar(InternalVars.scrollTopForActiveRow)}, 0px)), 0px)`,
-  height: InternalVars.activeCellRowHeight
+  height: InternalVars.activeCellRowHeight,
+  maxWidth: ThemeVars.runtime.totalVisibleColumnsWidth
 };
 var ActiveRowIndicatorFn = (props) => {
   const { brain } = props;
@@ -4555,8 +4565,8 @@ function forwardProps(propsToForward, props, setupState) {
   return mappedState;
 }
 function buildManagedComponent(config) {
+  const useParentStateFn = config.getParentState || (() => null);
   function useManagedComponent(props) {
-    var _a, _b;
     const [initialSetupState] = useState4(() => {
       return config.initSetupState ? config.initSetupState(props) : {};
     });
@@ -4565,7 +4575,7 @@ function buildManagedComponent(config) {
       () => config.forwardProps ? config.forwardProps(initialSetupState) : {},
       [initialSetupState]
     );
-    const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
+    const parentState = useParentStateFn();
     const getParentState = useLatest(parentState);
     function initStateOnce() {
       let mappedState = {};
@@ -4601,11 +4611,11 @@ function buildManagedComponent(config) {
     const [wholeState] = useState4(initStateOnce);
     const getProps = useLatest(props);
     const theReducer = (previousState, action) => {
-      var _a2;
+      var _a;
       if (action.type === "REPLACE_STATE") {
         return action.payload;
       }
-      const parentState2 = (_a2 = getParentState == null ? void 0 : getParentState()) != null ? _a2 : null;
+      const parentState2 = (_a = getParentState == null ? void 0 : getParentState()) != null ? _a : null;
       const mappedState = action.payload.mappedState;
       const updatedProps = action.payload.updatedPropsToState;
       const newState = Object.assign({}, previousState);
@@ -4690,6 +4700,8 @@ function buildManagedComponent(config) {
       [state, actions, getComponentState]
     );
     const prevProps = usePrevious(props);
+    const skipTriggerParentStateChangeRef = useRef11(false);
+    skipTriggerParentStateChangeRef.current = false;
     const effectFn = config.layoutEffect ? useLayoutEffect7 : useEffect9;
     effectFn(() => {
       const currentProps = props;
@@ -4747,6 +4759,7 @@ function buildManagedComponent(config) {
             updatedPropsToState: updatedPropsToStateCount ? updatedPropsToState : null
           }
         };
+        skipTriggerParentStateChangeRef.current = true;
         dispatch(action);
         if (config.onPropChange) {
           for (var prop in rawUpdatedProps)
@@ -4765,10 +4778,18 @@ function buildManagedComponent(config) {
         }
       }
     });
+    effectFn(() => {
+      if (parentState != null && !skipTriggerParentStateChangeRef.current) {
+        dispatch({
+          type: "PARENT_STATE_CHANGE",
+          payload: {}
+        });
+      }
+    }, [parentState]);
     useEffectOnce(() => {
       return () => {
-        var _a2;
-        (_a2 = config.cleanup) == null ? void 0 : _a2.call(config, getComponentState());
+        var _a;
+        (_a = config.cleanup) == null ? void 0 : _a.call(config, getComponentState());
       };
     });
     return { contextValue, ContextComponent: Context };
@@ -6613,6 +6634,10 @@ var publicRuntimeVars = {
   visibleColumnsCount: {
     name: stripVar(ThemeVars.runtime.visibleColumnsCount),
     value: ""
+  },
+  browserScrollbarWidth: {
+    name: stripVar(ThemeVars.runtime.browserScrollbarWidth),
+    value: ""
   }
 };
 var scrollbarWidthHorizontal = stripVar(
@@ -6696,6 +6721,9 @@ function useDOMProps(initialDOMProps) {
     },
     {}
   );
+  if (bodySize.width) {
+    cssVars[publicRuntimeVars.browserScrollbarWidth.name] = `${getScrollbarWidth()}px`;
+  }
   cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
   cssVars[publicRuntimeVars.totalVisibleColumnsWidth.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
   cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
@@ -8212,7 +8240,7 @@ function InfiniteTableCellFn(props) {
   }
   const RenderComponent = cellType === "body" ? (_b = column.components) == null ? void 0 : _b.ColumnCell : (_c = column.components) == null ? void 0 : _c.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
   }
   return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
 }
@@ -12866,6 +12894,10 @@ function getDataSourceApi(param) {
 var DataSourceApiImpl = class {
   constructor(param) {
     this.pendingOperations = [];
+    //@ts-ignore
+    this.batchOperationRafId = 0;
+    //@ts-ignore
+    this.batchOperationTimeoutId = 0;
     this.pendingPromise = null;
     this.resolvePendingPromise = null;
     this.toPrimaryKey = (data) => {
@@ -13012,13 +13044,23 @@ var DataSourceApiImpl = class {
     this.actions = param.actions;
   }
   batchOperation(operation) {
+    var _a;
     if (!this.pendingPromise) {
       this.pendingPromise = new Promise((resolve) => {
         this.resolvePendingPromise = resolve;
       });
-      raf(() => {
-        this.commit();
-      });
+      const delay = Math.max(0, (_a = this.getState().batchOperationDelay) != null ? _a : 0);
+      if (delay === 0) {
+        this.batchOperationRafId = raf(() => {
+          this.commit();
+        });
+      } else {
+        this.batchOperationTimeoutId = setTimeout(() => {
+          this.batchOperationRafId = raf(() => {
+            this.commit();
+          });
+        }, delay);
+      }
     }
     this.pendingOperations.push(operation);
     return this.pendingPromise;
@@ -14427,6 +14469,7 @@ var forwardProps3 = (setupState) => {
         __idToIndex: idToIndexReducer
       };
     },
+    batchOperationDelay: 1,
     isRowSelected: 1,
     onDataArrayChange: 1,
     onDataMutations: 1,
@@ -18881,7 +18924,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.3.7"
+      version: "4.3.9"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;