@infinite-table/infinite-react 1.3.19 → 1.3.21

package/index.d.ts

@@ -1222,6 +1222,7 @@ interface InfiniteTableMappedState<T> {
     showSeparatePivotColumnForSingleAggregation: NonUndefined<InfiniteTableProps<T>['showSeparatePivotColumnForSingleAggregation']>;
     domProps: InfiniteTableProps<T>['domProps'];
     editable: InfiniteTableProps<T>['editable'];
+    columnMenuRealignDelay: NonUndefined<InfiniteTableProps<T>['columnMenuRealignDelay']>;
     columnDefaultEditable: InfiniteTableProps<T>['columnDefaultEditable'];
     columnDefaultFilterable: InfiniteTableProps<T>['columnDefaultFilterable'];
     rowStyle: InfiniteTableProps<T>['rowStyle'];
@@ -2655,6 +2656,14 @@ interface InfiniteTableProps<T> {
     onSelfBlur?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
     onFocusWithin?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
     onBlurWithin?: (event: React$1.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * When a column is hidden by using the column menu, the column menu will stay open,
+     * so it needs (generally) to be realigned to the correct location. This prop
+     * configures the delay in milliseconds before the column menu is realigned.
+     *
+     * @default 50
+     */
+    columnMenuRealignDelay?: number;
     onScrollToTop?: () => void;
     onScrollToBottom?: () => void;
     scrollStopDelay?: number;

package/index.dev.js

@@ -13459,7 +13459,8 @@ function realignColumnContextMenu(param) {
   }
   function tryCol(diff2, sign2) {
     const colId2 = order2[index + diff2 * sign2];
-    if (visibleCols.has(colId2)) {
+    const col = visibleCols.get(colId2);
+    if (col && col.renderMenuIcon !== false) {
       return colId2;
     }
     return;
@@ -13792,12 +13793,21 @@ var InfiniteTableApiImpl = class {
     this.actions.contextMenuVisibleFor = null;
     this.actions.cellContextMenuVisibleFor = null;
   }
-  realignColumnContextMenu() {
-    realignColumnContextMenu({
+  realignColumnContextMenu(callback) {
+    const param = {
       actions: this.actions,
       getState: this.getState,
       getComputed: this.getComputed
-    });
+    };
+    const delay = this.getState().columnMenuRealignDelay;
+    if (!delay || delay < 0) {
+      realignColumnContextMenu(param);
+      callback == null ? void 0 : callback();
+    }
+    setTimeout(() => {
+      realignColumnContextMenu(param);
+      callback == null ? void 0 : callback();
+    }, delay);
   }
   getColumnOrder() {
     return this.getComputed().computedColumnOrder;
@@ -14967,6 +14977,7 @@ var forwardProps4 = (setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
@@ -16669,7 +16680,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react49.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.19"
+      version: "1.3.21"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19235,29 +19246,31 @@ function showMenuForColumn(options) {
   var _a;
   const { columnId, context, clearAll, showOverlay } = options;
   const { getState, actions } = context;
+  const { columnMenuTargetRef, domRef } = getState();
   function onHideIntent() {
     clearAll();
     actions.columnMenuVisibleForColumnId = null;
   }
   let target = options.target;
+  if (!target) {
+    target = (_a = columnMenuTargetRef.current) != null ? _a : void 0;
+    if (target && !domRef.current.contains(target)) {
+      target = void 0;
+    }
+  }
   if (!target) {
     const iconSelector = `[${InfiniteHeaderCellDataAttributes["data-column-id"]}="${columnId}"] ${menuIconSelector}`;
     target = getState().domRef.current.querySelector(
       iconSelector
     );
-    if (!target) {
-      target = (_a = getState().columnMenuTargetRef.current) != null ? _a : void 0;
-      if (!(target == null ? void 0 : target.parentElement)) {
-        target = void 0;
-      }
-    }
   }
   if (!target) {
     console.warn(`Cannot show column menu for column "${columnId}"`);
     return;
   }
+  columnMenuTargetRef.current = null;
   showOverlay(() => getMenuForColumn(columnId, context, onHideIntent), {
-    constrainTo: getState().domRef.current,
+    constrainTo: domRef.current,
     id: "column-menu",
     alignTo: target,
     alignPosition: [

package/index.dev.mjs

@@ -13445,7 +13445,8 @@ function realignColumnContextMenu(param) {
   }
   function tryCol(diff2, sign2) {
     const colId2 = order2[index + diff2 * sign2];
-    if (visibleCols.has(colId2)) {
+    const col = visibleCols.get(colId2);
+    if (col && col.renderMenuIcon !== false) {
       return colId2;
     }
     return;
@@ -13778,12 +13779,21 @@ var InfiniteTableApiImpl = class {
     this.actions.contextMenuVisibleFor = null;
     this.actions.cellContextMenuVisibleFor = null;
   }
-  realignColumnContextMenu() {
-    realignColumnContextMenu({
+  realignColumnContextMenu(callback) {
+    const param = {
       actions: this.actions,
       getState: this.getState,
       getComputed: this.getComputed
-    });
+    };
+    const delay = this.getState().columnMenuRealignDelay;
+    if (!delay || delay < 0) {
+      realignColumnContextMenu(param);
+      callback == null ? void 0 : callback();
+    }
+    setTimeout(() => {
+      realignColumnContextMenu(param);
+      callback == null ? void 0 : callback();
+    }, delay);
   }
   getColumnOrder() {
     return this.getComputed().computedColumnOrder;
@@ -14957,6 +14967,7 @@ var forwardProps4 = (setupState) => {
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
     columnDefaultFlex: 1,
+    columnMenuRealignDelay: (columnMenuRealignDelay) => columnMenuRealignDelay != null ? columnMenuRealignDelay : 50,
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
@@ -16659,7 +16670,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.19"
+      version: "1.3.21"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19235,29 +19246,31 @@ function showMenuForColumn(options) {
   var _a;
   const { columnId, context, clearAll, showOverlay } = options;
   const { getState, actions } = context;
+  const { columnMenuTargetRef, domRef } = getState();
   function onHideIntent() {
     clearAll();
     actions.columnMenuVisibleForColumnId = null;
   }
   let target = options.target;
+  if (!target) {
+    target = (_a = columnMenuTargetRef.current) != null ? _a : void 0;
+    if (target && !domRef.current.contains(target)) {
+      target = void 0;
+    }
+  }
   if (!target) {
     const iconSelector = `[${InfiniteHeaderCellDataAttributes["data-column-id"]}="${columnId}"] ${menuIconSelector}`;
     target = getState().domRef.current.querySelector(
       iconSelector
     );
-    if (!target) {
-      target = (_a = getState().columnMenuTargetRef.current) != null ? _a : void 0;
-      if (!(target == null ? void 0 : target.parentElement)) {
-        target = void 0;
-      }
-    }
   }
   if (!target) {
     console.warn(`Cannot show column menu for column "${columnId}"`);
     return;
   }
+  columnMenuTargetRef.current = null;
   showOverlay(() => getMenuForColumn(columnId, context, onHideIntent), {
-    constrainTo: getState().domRef.current,
+    constrainTo: domRef.current,
     id: "column-menu",
     alignTo: target,
     alignPosition: [