@infinite-table/infinite-react 1.3.16 → 1.3.18

package/index.dev.mjs

@@ -4940,6 +4940,15 @@ import * as React42 from "react";
 import { useCallback as useCallback14, useContext as useContext6, useEffect as useEffect15, useRef as useRef16 } from "react";
 import { createPortal } from "react-dom";
 
+// src/utils/keyMirror.ts
+function keyMirror(obj) {
+  const result = {};
+  Object.keys(obj).forEach((key) => {
+    result[key] = key;
+  });
+  return result;
+}
+
 // src/components/InfiniteTable/components/icons/Icon.tsx
 import * as React16 from "react";
 var Icon = (props) => {
@@ -5117,22 +5126,22 @@ var createRuntimeFn = (config) => (options) => {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw21 utilities_whiteSpace_nowrap__16lm1iw22 utilities_userSelect_none__16lm1iw16";
-var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob11t utilities_height_100%__16lm1iw18 utilities_width_100%__16lm1iw1a utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_justifyContent_start__16lm1iw1u", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob11u", true: "header_HeaderCellContentRecipe_filtered_true__12zfob11v" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob11w", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob11x", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob11y" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob11z", end: "header_HeaderCellContentRecipe_align_end__12zfob120", center: "header_HeaderCellContentRecipe_align_center__12zfob121" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob11v utilities_height_100%__16lm1iw18 utilities_width_100%__16lm1iw1a utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_justifyContent_start__16lm1iw1u", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob11w", true: "header_HeaderCellContentRecipe_filtered_true__12zfob11x" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob11y", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob11z", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob120" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob121", end: "header_HeaderCellContentRecipe_align_end__12zfob122", center: "header_HeaderCellContentRecipe_align_center__12zfob123" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderCellProxy = "header_HeaderCellProxy__12zfob1m utilities_whiteSpace_nowrap__16lm1iw22 utilities_textOverflow_ellipsis__16lm1iw23 utilities_overflow_hidden__16lm1iw1w";
 var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1n utilities_display_block__16lm1iw11", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1o", true: "header_HeaderCellRecipe_rowActive_true__12zfob1p" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1q", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1r", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1s" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob1t", true: "header_HeaderCellRecipe_groupRow_true__12zfob1u" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob1v", true: "header_HeaderCellRecipe_groupCell_true__12zfob1w" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob1x", end: "header_HeaderCellRecipe_align_end__12zfob1y", center: "header_HeaderCellRecipe_align_center__12zfob1z" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob110", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob111", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob112" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob113", even: "header_HeaderCellRecipe_zebra_even__12zfob114", odd: "header_HeaderCellRecipe_zebra_odd__12zfob115" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob116", false: "header_HeaderCellRecipe_dragging_false__12zfob117" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob118", false: "header_HeaderCellRecipe_first_false__12zfob119" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11a", false: "header_HeaderCellRecipe_last_false__12zfob11b" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11c", false: "header_HeaderCellRecipe_groupByField_false__12zfob11d" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11e", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11f" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11g", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11h" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11i", end: "header_HeaderCellRecipe_pinned_end__12zfob11j", false: "header_HeaderCellRecipe_pinned_false__12zfob11k" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11l", false: "header_HeaderCellRecipe_filtered_false__12zfob11m" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11n"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11o"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob11p"]] });
 var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "header_HeaderClsRecipe__12zfob18 utilities_display_block__16lm1iw11 utilities_position_absolute__16lm1iw2", variantClassNames: { pinned: { start: "header_HeaderClsRecipe_pinned_start__12zfob19", end: "header_HeaderClsRecipe_pinned_end__12zfob1a", false: "header_HeaderClsRecipe_pinned_false__12zfob1b" }, firstInCategory: { true: "header_HeaderClsRecipe_firstInCategory_true__12zfob1c", false: "header_HeaderClsRecipe_firstInCategory_false__12zfob1d" }, lastInCategory: { true: "header_HeaderClsRecipe_lastInCategory_true__12zfob1e", false: "header_HeaderClsRecipe_lastInCategory_false__12zfob1f" }, overflow: { true: "header_HeaderClsRecipe_overflow_true__12zfob1g", false: "header_HeaderClsRecipe_overflow_false__12zfob1h" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "header_HeaderClsRecipe_compound_0__12zfob1i"], [{ pinned: "start", firstInCategory: true }, "header_HeaderClsRecipe_compound_1__12zfob1j"], [{ overflow: true, pinned: "end" }, "header_HeaderClsRecipe_compound_2__12zfob1k"], [{ pinned: "end", lastInCategory: true }, "header_HeaderClsRecipe_compound_3__12zfob1l"]] });
-var HeaderFilterCls = "header_HeaderFilterCls__12zfob124 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_stretch__16lm1iw1q utilities_position_relative__16lm1iw1";
-var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob129 utilities_width_100%__16lm1iw1a utilities_height_100%__16lm1iw18";
+var HeaderFilterCls = "header_HeaderFilterCls__12zfob126 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_stretch__16lm1iw1q utilities_position_relative__16lm1iw1";
+var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12b utilities_width_100%__16lm1iw1a utilities_height_100%__16lm1iw18";
 var HeaderFilterIconIndexCls = "header_HeaderFilterIconIndexCls__12zfob16";
-var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob125 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_relative__16lm1iw1";
-var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob126 utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1b", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob127", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob128" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderGroupCls = "header_HeaderGroupCls__12zfob123 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p";
-var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11q utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_justifyContent_spaceAround__16lm1iw1t utilities_visibility_hidden__16lm1iw20", variantClassNames: { reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob11r", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob11s" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob127 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_relative__16lm1iw1";
+var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob128 utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1b", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob129", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12a" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderGroupCls = "header_HeaderGroupCls__12zfob125 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p";
+var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11q utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_justifyContent_spaceAround__16lm1iw1t utilities_visibility_hidden__16lm1iw20", variantClassNames: { menuVisible: { true: "header_HeaderMenuIconCls_menuVisible_true__12zfob11r" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob11s", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob11t" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob11u"]] });
 var HeaderScrollbarPlaceholderCls = "header_HeaderScrollbarPlaceholderCls__12zfob17 utilities_position_absolute__16lm1iw2";
 var HeaderSortIconCls = "utilities_position_relative__16lm1iw1";
 var HeaderSortIconIndexCls = "header_HeaderSortIconIndexCls__12zfob15";
 var HeaderSortIconRecipe = createRuntimeFn({ defaultClassName: "", variantClassNames: { align: { start: "header_HeaderSortIconRecipe_align_start__12zfob12", center: "header_HeaderSortIconRecipe_align_center__12zfob13", end: "header_HeaderSortIconRecipe_align_end__12zfob14" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob122 utilities_overflow_hidden__16lm1iw1w utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n";
+var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob124 utilities_overflow_hidden__16lm1iw1w utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n";
 
 // src/components/InfiniteTable/components/icons/InfiniteTableIconClassName.ts
 var InfiniteTableIconClassName = "InfiniteTableIcon";
@@ -5252,6 +5261,9 @@ function getColumnApiForColumn(colOrColId, param) {
     hideContextMenu() {
       actions.columnMenuVisibleForColumnId = null;
     },
+    isVisible() {
+      return getComputed().computedVisibleColumnsMap.has(column.id);
+    },
     toggleSort(params = {
       multiSortBehavior: "replace"
     }) {
@@ -7699,20 +7711,34 @@ var defaultLineStyle2 = {
   pointerEvents: "none"
 };
 var lineClassName = `${InfiniteTableIconClassName}-menu`;
+var MenuIconDataAttributes = keyMirror({
+  "data-name": ""
+});
+var MenuIconDataAttributesValues = {
+  [MenuIconDataAttributes["data-name"]]: "menu-icon"
+};
 function MenuIcon(props) {
-  const { style: style2, className, domProps, reserveSpaceWhenHidden, children } = props;
+  const {
+    style: style2,
+    className,
+    domProps,
+    reserveSpaceWhenHidden,
+    menuVisible,
+    children
+  } = props;
   const lineStyle = __spreadValues(__spreadProps(__spreadValues({}, defaultLineStyle2), {
     borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`
   }), props.lineStyle);
   return /* @__PURE__ */ React38.createElement(
     "div",
-    __spreadProps(__spreadValues({}, domProps), {
-      style: style2,
-      "data-name": "menu-icon",
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, domProps), {
+      style: style2
+    }), MenuIconDataAttributesValues), {
       onPointerDown: (e) => e.stopPropagation(),
       className: join(
         className,
         HeaderMenuIconCls({
+          menuVisible,
           reserveSpaceWhenHidden
         }),
         InfiniteTableIconClassName,
@@ -8493,6 +8519,11 @@ var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellClassName = `${rootClassName8}HeaderCell`;
 var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
 var spacer = /* @__PURE__ */ React42.createElement("div", { className: flex["1"] });
+var InfiniteHeaderCellDataAttributes = keyMirror({
+  "data-name": ``,
+  "data-header-align": "",
+  "data-column-id": ""
+});
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
   const column = props.column;
@@ -8506,7 +8537,8 @@ function InfiniteTableHeaderCell(props) {
       components: components2,
       portalDOMRef,
       columnHeaderHeight,
-      columnReorderDragColumnId
+      columnReorderDragColumnId,
+      columnMenuVisibleForColumnId
     }
   } = useInfiniteTable();
   const {
@@ -8553,6 +8585,7 @@ function InfiniteTableHeaderCell(props) {
   const headerCSSEllipsis = (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true;
   const menuIconProps = {
     reserveSpaceWhenHidden: align2 === "center",
+    menuVisible: columnMenuVisibleForColumnId === column.id,
     style: align2 === "end" ? {
       marginInlineStart: `calc(${ThemeVars.components.HeaderCell.resizeHandleActiveAreaWidth} / 2)`,
       marginInlineEnd: ThemeVars.spacing[2]
@@ -8596,6 +8629,7 @@ function InfiniteTableHeaderCell(props) {
       sortIcon,
       filterIcon,
       menuIcon,
+      menuIconProps,
       selectionCheckBox: null,
       header: column.header && typeof column.header !== "function" ? column.header : column.name
     }
@@ -8632,16 +8666,7 @@ function InfiniteTableHeaderCell(props) {
       renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
-          render: (param) => {
-            if (typeof column.renderMenuIcon !== "function") {
-              return null;
-            }
-            const result = column.renderMenuIcon(param);
-            if (result) {
-              return /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
-            }
-            return null;
-          },
+          render: column.renderMenuIcon,
           renderParam: __spreadProps(__spreadValues({}, renderParam2), {
             renderBag: __spreadValues({}, renderParam2.renderBag)
           })
@@ -8765,15 +8790,18 @@ function InfiniteTableHeaderCell(props) {
   const resizeHandle = useColumnResizeHandle(column);
   const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
   style2.zIndex = zIndex2;
+  const dataAttrs = {
+    "data-column-id": column.id,
+    "data-header-align": align2,
+    "data-name": "HeaderCell"
+  };
   return /* @__PURE__ */ React42.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React42.createElement(
     InfiniteTableCell,
-    {
+    __spreadProps(__spreadValues({
       domRef: ref,
       cellType: "header",
-      column,
-      "data-name": `HeaderCell`,
-      "data-header-align": align2,
-      "data-column-id": column.id,
+      column
+    }, dataAttrs), {
       "data-z-index": zIndex2,
       style: style2,
       width,
@@ -8822,7 +8850,7 @@ function InfiniteTableHeaderCell(props) {
         }
       ) : /* @__PURE__ */ React42.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
       renderChildren
-    }
+    })
   ), draggingProxy);
 }
 function useInfiniteHeaderCell() {
@@ -13389,6 +13417,48 @@ function useRowInfoReducers() {
   return rowInfoReducerResults;
 }
 
+// src/components/InfiniteTable/api/realignColumnContextMenu.ts
+function realignColumnContextMenu(param) {
+  const { getComputed, getState, actions } = param;
+  const columnMenuVisibleForColumnId = getState().columnMenuVisibleForColumnId;
+  if (!columnMenuVisibleForColumnId) {
+    return;
+  }
+  const computed = getComputed();
+  const visibleCols = computed.computedVisibleColumnsMap;
+  const order2 = computed.computedColumnOrder;
+  if (visibleCols.has(columnMenuVisibleForColumnId)) {
+    actions.columnMenuVisibleKey = Date.now();
+    return;
+  }
+  function tryCol(diff2, sign2) {
+    const colId2 = order2[index + diff2 * sign2];
+    if (visibleCols.has(colId2)) {
+      return colId2;
+    }
+    return;
+  }
+  const index = order2.indexOf(columnMenuVisibleForColumnId);
+  let diff = 0;
+  let sign = -1;
+  let colId;
+  while (!colId && diff < order2.length) {
+    diff++;
+    colId = tryCol(diff, sign);
+    if (!colId) {
+      sign *= -1;
+      colId = tryCol(diff, sign);
+    }
+    if (colId) {
+      break;
+    }
+  }
+  if (colId) {
+    actions.columnMenuVisibleForColumnId = colId;
+  }
+  return colId;
+}
+
 // src/components/InfiniteTable/api/getImperativeApi.ts
 var InfiniteTableApiImpl = class {
   constructor(context) {
@@ -13696,6 +13766,21 @@ var InfiniteTableApiImpl = class {
     this.actions.contextMenuVisibleFor = null;
     this.actions.cellContextMenuVisibleFor = null;
   }
+  realignColumnContextMenu() {
+    realignColumnContextMenu({
+      actions: this.actions,
+      getState: this.getState,
+      getComputed: this.getComputed
+    });
+  }
+  getColumnOrder() {
+    return this.getComputed().computedColumnOrder;
+  }
+  getVisibleColumnOrder() {
+    const order2 = this.getColumnOrder();
+    const visibleColumns = this.getComputed().computedVisibleColumnsMap;
+    return order2.filter((id) => visibleColumns.has(id));
+  }
   startEdit(params) {
     return __async(this, null, function* () {
       const { columnId, rowIndex: index, primaryKey } = params;
@@ -14769,6 +14854,7 @@ function initSetupState2() {
     cellContextMenuVisibleFor: null,
     contextMenuVisibleFor: null,
     columnMenuVisibleForColumnId: null,
+    columnMenuVisibleKey: 0,
     filterOperatorMenuVisibleForColumnId: null,
     getDOMNodeForCell: (cellPosition) => {
       if (!domRef.current) {
@@ -16559,7 +16645,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "1.3.16"
+      version: "1.3.18"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19053,6 +19139,9 @@ function defaultGetColumnMenuItems(_items, params) {
                 checked: col.computedVisible,
                 onChange: (checked) => {
                   api.setVisibilityForColumn(col.id, !!checked);
+                  requestAnimationFrame(() => {
+                    api.realignColumnContextMenu();
+                  });
                 }
               }
             )
@@ -19126,6 +19215,35 @@ function getMenuForColumn(columnId, context, onHideIntent) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
+var menuIconSelector = `[${MenuIconDataAttributes["data-name"]}="${MenuIconDataAttributesValues["data-name"]}"]`;
+function showMenuForColumn(options) {
+  const { columnId, context, clearAll, showOverlay } = options;
+  const { getState, actions } = context;
+  function onHideIntent() {
+    clearAll();
+    actions.columnMenuVisibleForColumnId = null;
+  }
+  let target = options.target;
+  if (!target) {
+    const iconSelector = `[${InfiniteHeaderCellDataAttributes["data-column-id"]}="${columnId}"] ${menuIconSelector}`;
+    target = getState().domRef.current.querySelector(
+      iconSelector
+    );
+  }
+  if (!target) {
+    console.warn(`Cannot show column menu for column "${columnId}"`);
+    return;
+  }
+  showOverlay(() => getMenuForColumn(columnId, context, onHideIntent), {
+    constrainTo: getState().domRef.current,
+    id: "column-menu",
+    alignTo: target,
+    alignPosition: [
+      ["TopLeft", "BottomLeft"],
+      ["TopRight", "BottomRight"]
+    ]
+  });
+}
 function useColumnMenu() {
   const context = useInfiniteTable();
   const { getState, actions } = context;
@@ -19143,26 +19261,13 @@ function useColumnMenu() {
       if (!info) {
         return;
       }
-      const { target, column } = info;
-      function onHideIntent() {
-        clearAll();
-        actions2.columnMenuVisibleForColumnId = null;
-      }
-      showOverlay(() => getMenuForColumn(column.id, context, onHideIntent), {
-        constrainTo: getState2().domRef.current,
-        id: "column-menu",
-        alignTo: target,
-        alignPosition: [
-          ["TopLeft", "BottomLeft"],
-          ["TopRight", "BottomRight"]
-        ]
-      });
       actions2.contextMenuVisibleFor = null;
       actions2.cellContextMenuVisibleFor = null;
       actions2.filterOperatorMenuVisibleForColumnId = null;
-      actions2.columnMenuVisibleForColumnId = column.id;
+      actions2.columnMenuVisibleForColumnId = info.column.id;
     });
   }, []);
+  const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
   useEffect35(() => {
     const {
       columnMenuVisibleForColumnId: columnContextMenuVisibleForColumnId
@@ -19176,6 +19281,12 @@ function useColumnMenu() {
       };
       var handleMouseDown = handleMouseDown2;
       document.documentElement.addEventListener("mousedown", handleMouseDown2);
+      showMenuForColumn({
+        columnId: columnContextMenuVisibleForColumnId,
+        context,
+        clearAll,
+        showOverlay
+      });
       return () => {
         document.documentElement.removeEventListener(
           "mousedown",
@@ -19187,7 +19298,7 @@ function useColumnMenu() {
     }
     return () => {
     };
-  }, [getState().columnMenuVisibleForColumnId]);
+  }, [columnMenuVisibleForColumnId, columnMenuVisibleKey]);
   return { menuPortal };
 }
 
@@ -20125,6 +20236,7 @@ InfiniteTable.defaultProps = {
 var components = {
   CheckBox: InfiniteCheckBox,
   LoadMask,
+  MenuIcon,
   StringFilterEditor,
   NumberFilterEditor
 };
@@ -20137,7 +20249,6 @@ export {
   InfiniteTableClassName,
   InfiniteTableComponent,
   Menu,
-  MenuIcon,
   RowSelectionState,
   components,
   debounce,