@infinite-table/infinite-react 1.3.18 → 1.3.19

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)
           })
@@ -14876,6 +14888,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 +15038,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 +16669,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react49.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.18"
+      version: "1.3.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19138,7 +19152,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,6 +19232,7 @@ 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;
   function onHideIntent() {
@@ -19229,6 +19245,12 @@ function showMenuForColumn(options) {
     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}"`);
@@ -19261,6 +19283,7 @@ function useColumnMenu() {
       if (!info) {
         return;
       }
+      state.columnMenuTargetRef.current = info.target;
       actions2.contextMenuVisibleFor = null;
       actions2.cellContextMenuVisibleFor = null;
       actions2.filterOperatorMenuVisibleForColumnId = null;
@@ -19269,10 +19292,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 +19303,7 @@ function useColumnMenu() {
       var handleMouseDown = handleMouseDown2;
       document.documentElement.addEventListener("mousedown", handleMouseDown2);
       showMenuForColumn({
-        columnId: columnContextMenuVisibleForColumnId,
+        columnId: columnMenuVisibleForColumnId2,
         context,
         clearAll,
         showOverlay
@@ -19294,6 +19315,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)
           })
@@ -14866,6 +14878,7 @@ function initSetupState2() {
     brain,
     headerBrain,
     domRef,
+    columnMenuTargetRef: createRef(),
     editingValueRef: createRef(),
     scrollerDOMRef: createRef(),
     portalDOMRef: createRef(),
@@ -15015,6 +15028,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 +16659,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.18"
+      version: "1.3.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19138,7 +19152,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,6 +19232,7 @@ 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;
   function onHideIntent() {
@@ -19229,6 +19245,12 @@ function showMenuForColumn(options) {
     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}"`);
@@ -19261,6 +19283,7 @@ function useColumnMenu() {
       if (!info) {
         return;
       }
+      state.columnMenuTargetRef.current = info.target;
       actions2.contextMenuVisibleFor = null;
       actions2.cellContextMenuVisibleFor = null;
       actions2.filterOperatorMenuVisibleForColumnId = null;
@@ -19269,10 +19292,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 +19303,7 @@ function useColumnMenu() {
       var handleMouseDown = handleMouseDown2;
       document.documentElement.addEventListener("mousedown", handleMouseDown2);
       showMenuForColumn({
-        columnId: columnContextMenuVisibleForColumnId,
+        columnId: columnMenuVisibleForColumnId2,
         context,
         clearAll,
         showOverlay
@@ -19294,6 +19315,7 @@ function useColumnMenu() {
         );
       };
     } else {
+      columnMenuTargetRef.current = null;
       clearAll();
     }
     return () => {