@infinite-table/infinite-react 1.3.18 → 1.3.20

package/index.d.ts

@@ -1125,6 +1125,7 @@ interface InfiniteTableSetupState<T> {
         point: PointCoords;
     }) | null;
     columnMenuVisibleForColumnId: string | null;
+    columnMenuTargetRef: MutableRefObject<HTMLElement | null>;
     columnMenuVisibleKey: string | number;
     filterOperatorMenuVisibleForColumnId: string | null;
     onColumnHeaderHeightCSSVarChange: SubscriptionCallback<number>;

package/index.dev.js

@@ -8680,7 +8680,19 @@ function InfiniteTableHeaderCell(props) {
       renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
-          render: column.renderMenuIcon,
+          render: (param) => {
+            if (typeof column.renderMenuIcon !== "function") {
+              return null;
+            }
+            const result = column.renderMenuIcon(param);
+            if (result) {
+              if (result.type === MenuIconCmp || result.type === MenuIcon) {
+                return result;
+              }
+              return /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
+            }
+            return null;
+          },
           renderParam: __spreadProps(__spreadValues({}, renderParam2), {
             renderBag: __spreadValues({}, renderParam2.renderBag)
           })
@@ -13447,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;
@@ -14876,6 +14889,7 @@ function initSetupState2() {
     brain,
     headerBrain,
     domRef,
+    columnMenuTargetRef: (0, import_react42.createRef)(),
     editingValueRef: (0, import_react42.createRef)(),
     scrollerDOMRef: (0, import_react42.createRef)(),
     portalDOMRef: (0, import_react42.createRef)(),
@@ -15025,6 +15039,7 @@ var cleanupState = (state) => {
   state.onColumnMenuClick.destroy();
   state.onFilterOperatorMenuClick.destroy();
   state.domRef.current = null;
+  state.columnMenuTargetRef.current = null;
   state.scrollerDOMRef.current = null;
   state.portalDOMRef.current = null;
   state.onRowHeightCSSVarChange.destroy();
@@ -16655,7 +16670,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react49.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.18"
+      version: "1.3.20"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19138,7 +19153,8 @@ function defaultGetColumnMenuItems(_items, params) {
                 disabled: col.computedVisible && api.getVisibleColumnsCount() === 1,
                 checked: col.computedVisible,
                 onChange: (checked) => {
-                  api.setVisibilityForColumn(col.id, !!checked);
+                  const visible = !!checked;
+                  api.setVisibilityForColumn(col.id, visible);
                   requestAnimationFrame(() => {
                     api.realignColumnContextMenu();
                   });
@@ -19217,13 +19233,21 @@ function getMenuForColumn(columnId, context, onHideIntent) {
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
 var menuIconSelector = `[${MenuIconDataAttributes["data-name"]}="${MenuIconDataAttributesValues["data-name"]}"]`;
 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(
@@ -19234,8 +19258,9 @@ function showMenuForColumn(options) {
     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: [
@@ -19261,6 +19286,7 @@ function useColumnMenu() {
       if (!info) {
         return;
       }
+      state.columnMenuTargetRef.current = info.target;
       actions2.contextMenuVisibleFor = null;
       actions2.cellContextMenuVisibleFor = null;
       actions2.filterOperatorMenuVisibleForColumnId = null;
@@ -19269,10 +19295,8 @@ function useColumnMenu() {
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
   (0, import_react57.useEffect)(() => {
-    const {
-      columnMenuVisibleForColumnId: columnContextMenuVisibleForColumnId
-    } = getState();
-    if (columnContextMenuVisibleForColumnId) {
+    const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
+    if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
         if (event.__insideMenu !== true) {
           clearAll();
@@ -19282,7 +19306,7 @@ function useColumnMenu() {
       var handleMouseDown = handleMouseDown2;
       document.documentElement.addEventListener("mousedown", handleMouseDown2);
       showMenuForColumn({
-        columnId: columnContextMenuVisibleForColumnId,
+        columnId: columnMenuVisibleForColumnId2,
         context,
         clearAll,
         showOverlay
@@ -19294,6 +19318,7 @@ function useColumnMenu() {
         );
       };
     } else {
+      columnMenuTargetRef.current = null;
       clearAll();
     }
     return () => {

package/index.dev.mjs

@@ -8666,7 +8666,19 @@ function InfiniteTableHeaderCell(props) {
       renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
-          render: column.renderMenuIcon,
+          render: (param) => {
+            if (typeof column.renderMenuIcon !== "function") {
+              return null;
+            }
+            const result = column.renderMenuIcon(param);
+            if (result) {
+              if (result.type === MenuIconCmp || result.type === MenuIcon) {
+                return result;
+              }
+              return /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
+            }
+            return null;
+          },
           renderParam: __spreadProps(__spreadValues({}, renderParam2), {
             renderBag: __spreadValues({}, renderParam2.renderBag)
           })
@@ -13433,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;
@@ -14866,6 +14879,7 @@ function initSetupState2() {
     brain,
     headerBrain,
     domRef,
+    columnMenuTargetRef: createRef(),
     editingValueRef: createRef(),
     scrollerDOMRef: createRef(),
     portalDOMRef: createRef(),
@@ -15015,6 +15029,7 @@ var cleanupState = (state) => {
   state.onColumnMenuClick.destroy();
   state.onFilterOperatorMenuClick.destroy();
   state.domRef.current = null;
+  state.columnMenuTargetRef.current = null;
   state.scrollerDOMRef.current = null;
   state.portalDOMRef.current = null;
   state.onRowHeightCSSVarChange.destroy();
@@ -16645,7 +16660,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.18"
+      version: "1.3.20"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19138,7 +19153,8 @@ function defaultGetColumnMenuItems(_items, params) {
                 disabled: col.computedVisible && api.getVisibleColumnsCount() === 1,
                 checked: col.computedVisible,
                 onChange: (checked) => {
-                  api.setVisibilityForColumn(col.id, !!checked);
+                  const visible = !!checked;
+                  api.setVisibilityForColumn(col.id, visible);
                   requestAnimationFrame(() => {
                     api.realignColumnContextMenu();
                   });
@@ -19217,13 +19233,21 @@ function getMenuForColumn(columnId, context, onHideIntent) {
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
 var menuIconSelector = `[${MenuIconDataAttributes["data-name"]}="${MenuIconDataAttributesValues["data-name"]}"]`;
 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(
@@ -19234,8 +19258,9 @@ function showMenuForColumn(options) {
     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: [
@@ -19261,6 +19286,7 @@ function useColumnMenu() {
       if (!info) {
         return;
       }
+      state.columnMenuTargetRef.current = info.target;
       actions2.contextMenuVisibleFor = null;
       actions2.cellContextMenuVisibleFor = null;
       actions2.filterOperatorMenuVisibleForColumnId = null;
@@ -19269,10 +19295,8 @@ function useColumnMenu() {
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
   useEffect35(() => {
-    const {
-      columnMenuVisibleForColumnId: columnContextMenuVisibleForColumnId
-    } = getState();
-    if (columnContextMenuVisibleForColumnId) {
+    const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
+    if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
         if (event.__insideMenu !== true) {
           clearAll();
@@ -19282,7 +19306,7 @@ function useColumnMenu() {
       var handleMouseDown = handleMouseDown2;
       document.documentElement.addEventListener("mousedown", handleMouseDown2);
       showMenuForColumn({
-        columnId: columnContextMenuVisibleForColumnId,
+        columnId: columnMenuVisibleForColumnId2,
         context,
         clearAll,
         showOverlay
@@ -19294,6 +19318,7 @@ function useColumnMenu() {
         );
       };
     } else {
+      columnMenuTargetRef.current = null;
       clearAll();
     }
     return () => {