@infinite-table/infinite-react 3.0.8 → 3.0.10

package/index.dev.js

@@ -1381,7 +1381,7 @@ function stripVar(cssVariableWithVarString) {
 
 // src/components/InfiniteTable/theme.css.ts
 var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__1slvgu90)", currentColumnTransformY: "var(--currentColumnTransformY__1slvgu91)", activeCellRowOffset: "var(--activeCellRowOffset__1slvgu92)", activeCellRowHeight: "var(--activeCellRowHeight__1slvgu93)", activeCellOffsetX: "var(--activeCellOffsetX__1slvgu94)", activeCellOffsetY: "var(--activeCellOffsetY__1slvgu95)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__1slvgu96)", activeCellColWidth: "var(--activeCellColWidth__1slvgu97)", activeCellColOffset: "var(--activeCellColOffset__1slvgu98)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__1slvgu99)", columnWidthAtIndex: "var(--columnWidthAtIndex__1slvgu9a)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__1slvgu9b)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__1slvgu9c)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__1slvgu9d)", pinnedStartWidth: "var(--pinnedStartWidth__1slvgu9e)", pinnedEndWidth: "var(--pinnedEndWidth__1slvgu9f)", pinnedEndOffset: "var(--pinnedEndOffset__1slvgu9g)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__1slvgu9h)", baseZIndexForCells: "var(--baseZIndexForCells__1slvgu9i)", bodyWidth: "var(--bodyWidth__1slvgu9j)", bodyHeight: "var(--bodyHeight__1slvgu9k)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__1slvgu9l)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__1slvgu9m)", scrollLeft: "var(--scrollLeft__1slvgu9n)", scrollTop: "var(--scrollTop__1slvgu9o)" };
-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)", 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)", 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)", 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)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", 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)", 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)", 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)", 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)" }, 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)", 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)", 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)", 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)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", 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)", 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)", 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)", 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)" }, 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/utils/selectParent.ts
@@ -4952,7 +4952,7 @@ var InfiniteTableFooter = React15.forwardRef(
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React42 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/keyMirror.ts
@@ -5040,7 +5040,7 @@ var React29 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 var React28 = __toESM(require("react"));
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
 var import_react16 = require("react");
@@ -5063,12 +5063,37 @@ var useInfiniteTable = () => {
   return (0, import_react16.useContext)(TableContext2);
 };
 
+// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
+var import_react17 = require("react");
+var useInfiniteTableState = () => {
+  const TableContext2 = getInfiniteTableContext();
+  const { state } = (0, import_react17.useContext)(TableContext2);
+  return state;
+};
+
 // src/components/InfiniteTable/components/icons/FilterIcon.tsx
 var React26 = __toESM(require("react"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 
-// ../node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js
+// ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-f8e161c6.esm.js
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null)
+    return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== void 0) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object")
+      return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -5102,6 +5127,13 @@ function _objectSpread2(target) {
   }
   return target;
 }
+function mapValues(input, fn) {
+  var result = {};
+  for (var _key in input) {
+    result[_key] = fn(input[_key], _key);
+  }
+  return result;
+}
 var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
   for (var key of Object.keys(compoundCheck)) {
     var _selections$key;
@@ -5111,52 +5143,64 @@ var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
   }
   return true;
 };
-var createRuntimeFn = (config) => (options) => {
-  var className = config.defaultClassName;
-  var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
-  for (var variantName in selections) {
-    var _selections$variantNa;
-    var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
-    if (variantSelection != null) {
-      var selection = variantSelection;
-      if (typeof selection === "boolean") {
-        selection = selection === true ? "true" : "false";
-      }
-      var selectionClassName = (
-        // @ts-expect-error
-        config.variantClassNames[variantName][selection]
-      );
-      if (selectionClassName) {
-        className += " " + selectionClassName;
+var createRuntimeFn = (config) => {
+  var runtimeFn = (options) => {
+    var className = config.defaultClassName;
+    var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+    for (var variantName in selections) {
+      var _selections$variantNa;
+      var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+      if (variantSelection != null) {
+        var selection = variantSelection;
+        if (typeof selection === "boolean") {
+          selection = selection === true ? "true" : "false";
+        }
+        var selectionClassName = (
+          // @ts-expect-error
+          config.variantClassNames[variantName][selection]
+        );
+        if (selectionClassName) {
+          className += " " + selectionClassName;
+        }
       }
     }
-  }
-  for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
-    if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
-      className += " " + compoundClassName;
+    for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+      if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
+        className += " " + compoundClassName;
+      }
     }
-  }
-  return className;
+    return className;
+  };
+  runtimeFn.variants = () => Object.keys(config.variantClassNames);
+  runtimeFn.classNames = {
+    get base() {
+      return config.defaultClassName.split(" ")[0];
+    },
+    get variants() {
+      return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
+    }
+  };
+  return runtimeFn;
 };
 
 // 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__12zfob11x 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__12zfob11y", true: "header_HeaderCellContentRecipe_filtered_true__12zfob11z" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob120", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob121", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob122" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob123", end: "header_HeaderCellContentRecipe_align_end__12zfob124", center: "header_HeaderCellContentRecipe_align_center__12zfob125" } }, 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" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1q", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1r" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1s", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1t", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1u" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob1v", true: "header_HeaderCellRecipe_groupRow_true__12zfob1w" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob1x", true: "header_HeaderCellRecipe_groupCell_true__12zfob1y" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob1z", end: "header_HeaderCellRecipe_align_end__12zfob110", center: "header_HeaderCellRecipe_align_center__12zfob111" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob112", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob113", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob114" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob115", even: "header_HeaderCellRecipe_zebra_even__12zfob116", odd: "header_HeaderCellRecipe_zebra_odd__12zfob117" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob118", false: "header_HeaderCellRecipe_dragging_false__12zfob119" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11a", false: "header_HeaderCellRecipe_first_false__12zfob11b" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11c", false: "header_HeaderCellRecipe_last_false__12zfob11d" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11e", false: "header_HeaderCellRecipe_groupByField_false__12zfob11f" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11g", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11h" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11i", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11j" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11k", end: "header_HeaderCellRecipe_pinned_end__12zfob11l", false: "header_HeaderCellRecipe_pinned_false__12zfob11m" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11n", false: "header_HeaderCellRecipe_filtered_false__12zfob11o" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11p"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11q"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob11r"]] });
-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__12zfob128 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_stretch__16lm1iw1q utilities_position_relative__16lm1iw1";
-var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12d utilities_width_100%__16lm1iw1a utilities_height_100%__16lm1iw18";
-var HeaderFilterIconIndexCls = "header_HeaderFilterIconIndexCls__12zfob16";
-var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob129 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_relative__16lm1iw1";
-var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12a utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1b", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12b", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12c" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderGroupCls = "header_HeaderGroupCls__12zfob127 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p";
-var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11s 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__12zfob11t" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob11u", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob11v" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob11w"]] });
-var HeaderScrollbarPlaceholderCls = "header_HeaderScrollbarPlaceholderCls__12zfob17 utilities_position_absolute__16lm1iw2";
+var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob11y 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__12zfob11z", true: "header_HeaderCellContentRecipe_filtered_true__12zfob120" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob121", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob122", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob123" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob124", end: "header_HeaderCellContentRecipe_align_end__12zfob125", center: "header_HeaderCellContentRecipe_align_center__12zfob126" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellProxy = "header_HeaderCellProxy__12zfob1n utilities_whiteSpace_nowrap__16lm1iw22 utilities_textOverflow_ellipsis__16lm1iw23 utilities_overflow_hidden__16lm1iw1w";
+var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw11", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob1w", true: "header_HeaderCellRecipe_groupRow_true__12zfob1x" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob1y", true: "header_HeaderCellRecipe_groupCell_true__12zfob1z" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob110", end: "header_HeaderCellRecipe_align_end__12zfob111", center: "header_HeaderCellRecipe_align_center__12zfob112" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob113", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob114", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob115" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob116", even: "header_HeaderCellRecipe_zebra_even__12zfob117", odd: "header_HeaderCellRecipe_zebra_odd__12zfob118" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob119", false: "header_HeaderCellRecipe_dragging_false__12zfob11a" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11b", false: "header_HeaderCellRecipe_first_false__12zfob11c" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11d", false: "header_HeaderCellRecipe_last_false__12zfob11e" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11f", false: "header_HeaderCellRecipe_groupByField_false__12zfob11g" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11h", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11i" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11j", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11k" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11l", end: "header_HeaderCellRecipe_pinned_end__12zfob11m", false: "header_HeaderCellRecipe_pinned_false__12zfob11n" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11o", false: "header_HeaderCellRecipe_filtered_false__12zfob11p" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11q"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11r"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob11s"]] });
+var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "header_HeaderClsRecipe__12zfob19 utilities_display_block__16lm1iw11 utilities_position_absolute__16lm1iw2", variantClassNames: { pinned: { start: "header_HeaderClsRecipe_pinned_start__12zfob1a", end: "header_HeaderClsRecipe_pinned_end__12zfob1b", false: "header_HeaderClsRecipe_pinned_false__12zfob1c" }, firstInCategory: { true: "header_HeaderClsRecipe_firstInCategory_true__12zfob1d", false: "header_HeaderClsRecipe_firstInCategory_false__12zfob1e" }, lastInCategory: { true: "header_HeaderClsRecipe_lastInCategory_true__12zfob1f", false: "header_HeaderClsRecipe_lastInCategory_false__12zfob1g" }, overflow: { true: "header_HeaderClsRecipe_overflow_true__12zfob1h", false: "header_HeaderClsRecipe_overflow_false__12zfob1i" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "header_HeaderClsRecipe_compound_0__12zfob1j"], [{ pinned: "start", firstInCategory: true }, "header_HeaderClsRecipe_compound_1__12zfob1k"], [{ overflow: true, pinned: "end" }, "header_HeaderClsRecipe_compound_2__12zfob1l"], [{ pinned: "end", lastInCategory: true }, "header_HeaderClsRecipe_compound_3__12zfob1m"]] });
+var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12g utilities_width_100%__16lm1iw1a utilities_height_100%__16lm1iw18";
+var HeaderFilterIconIndexCls = "header_HeaderFilterIconIndexCls__12zfob17";
+var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob12c utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_relative__16lm1iw1";
+var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12d utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1b", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12e", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12f" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderFilterRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterRecipe__12zfob129 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_stretch__16lm1iw1q utilities_position_relative__16lm1iw1", variantClassNames: { active: { true: "header_HeaderFilterRecipe_active_true__12zfob12a", false: "header_HeaderFilterRecipe_active_false__12zfob12b" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderGroupCls = "header_HeaderGroupCls__12zfob128 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p";
+var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11t 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__12zfob11u" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob11v", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob11w" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob11x"]] });
+var HeaderScrollbarPlaceholderCls = "header_HeaderScrollbarPlaceholderCls__12zfob18 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__12zfob126 utilities_overflow_hidden__16lm1iw1w utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n";
+var HeaderSortIconIndexCls = "header_HeaderSortIconIndexCls__12zfob16";
+var HeaderSortIconRecipe = createRuntimeFn({ defaultClassName: "header__12zfob12", variantClassNames: { align: { start: "header_HeaderSortIconRecipe_align_start__12zfob13", center: "header_HeaderSortIconRecipe_align_center__12zfob14", end: "header_HeaderSortIconRecipe_align_end__12zfob15" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob127 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";
@@ -5172,8 +5216,8 @@ var defaultLineStyle = {
 };
 function FilterIcon(props) {
   var _a;
-  const [rendered, setRendered] = (0, import_react17.useState)(true);
-  const [opacity, setOpacity] = (0, import_react17.useState)(0);
+  const [rendered, setRendered] = (0, import_react18.useState)(true);
+  const [opacity, setOpacity] = (0, import_react18.useState)(0);
   const { lineWidth = 1, style: style2, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -5184,7 +5228,7 @@ function FilterIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (!rendered) {
       return;
     }
@@ -5195,7 +5239,7 @@ function FilterIcon(props) {
       cancelAnimationFrame(rafId);
     };
   }, [rendered]);
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     setRendered(true);
   }, []);
   if (!rendered) {
@@ -6173,7 +6217,7 @@ function getColumnApiForColumn(colOrColId, param) {
       getState().onFilterOperatorMenuClick({ target, column });
     },
     hideFilterOperatorMenu() {
-      actions.filterOperatorMenuVisibleForColumnId = null;
+      api.hideFilterOperatorMenu();
     },
     showContextMenu(target) {
       getState().onColumnMenuClick({ target, column });
@@ -6268,22 +6312,39 @@ function getColumnLabel(colIdOrCol, context) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilterContext.ts
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName2}HeaderCell__filter`;
 var InfiniteTableColumnHeaderFilterOperatorClassName = `${rootClassName2}HeaderCell__filterOperator`;
-var InfiniteTableColumnHeaderFilterContext = import_react18.default.createContext(null);
+var InfiniteTableColumnHeaderFilterContext = import_react19.default.createContext(null);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
+var InfiniteTableColumnHeaderFilterInputClassName = `${InfiniteTableColumnHeaderFilterClassName}__input`;
 var stopPropagation = (e) => e.stopPropagation();
 function InfiniteTableColumnHeaderFilter(props) {
+  const { filterOperatorMenuVisibleForColumnId } = useInfiniteTableState();
+  const { column } = useInfiniteHeaderCell();
   const FilterEditor = props.filterEditor;
   const FilterOperatorSwitch = props.filterOperatorSwitch;
+  const [focused, setFocused] = (0, import_react20.useState)(false);
+  const onFocus = React28.useCallback(() => {
+    setFocused(true);
+  }, []);
+  const onBlur = React28.useCallback(() => {
+    setFocused(false);
+  }, []);
+  const active = filterOperatorMenuVisibleForColumnId === column.id || focused;
   return /* @__PURE__ */ React28.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
       onPointerDown: stopPropagation,
-      className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+      onFocus,
+      onBlur,
+      className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterRecipe(
+        {
+          active
+        }
+      )}`,
       style: { height: props.columnHeaderHeight }
     },
     /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React28.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React28.createElement(FilterEditor, null))
@@ -6305,7 +6366,11 @@ function InfiniteTableFilterOperatorSwitch() {
         }
         columnApi.toggleFilterOperatorMenu(event.target);
       },
-      className: `${InfiniteTableColumnHeaderFilterOperatorClassName} ${HeaderFilterOperatorCls} ${disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""}`
+      className: join(
+        InfiniteTableColumnHeaderFilterOperatorClassName,
+        HeaderFilterOperatorCls,
+        disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""
+      )
     },
     /* @__PURE__ */ React28.createElement(
       Icon2,
@@ -6324,7 +6389,9 @@ function InfiniteTableColumnHeaderFilterEmpty() {
     {
       onPointerUp: stopPropagation,
       onPointerDown: stopPropagation,
-      className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterCls}`,
+      className: `${InfiniteTableColumnHeaderFilterClassName} ${HeaderFilterRecipe(
+        { active: false }
+      )}`,
       style: { height: "100%" }
     }
   );
@@ -6339,7 +6406,7 @@ function useInfiniteColumnFilterEditor() {
   );
   const { columnFilterType, filterTypes, columnFilterValue } = filterContextValue;
   const filterType = filterTypes[columnFilterType];
-  const [theValue, setTheValue] = (0, import_react19.useState)(
+  const [theValue, setTheValue] = (0, import_react20.useState)(
     (_a = columnFilterValue == null ? void 0 : columnFilterValue.filter.value) != null ? _a : ""
   );
   const onInputChange = React28.useCallback(
@@ -6349,7 +6416,7 @@ function useInfiniteColumnFilterEditor() {
     },
     [filterContextValue.onChange]
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (columnFilterValue) {
       if (theValue !== columnFilterValue.filter.value) {
         setTheValue(columnFilterValue.filter.value);
@@ -6380,7 +6447,7 @@ function useInfiniteColumnFilterEditor() {
     filtered: column.computedFiltered,
     setValue: onInputChange,
     ariaLabel: `Filter for ${columnLabel}`,
-    className: HeaderFilterEditorCls
+    className: `${HeaderFilterEditorCls} ${InfiniteTableColumnHeaderFilterInputClassName}`
   };
 }
 
@@ -6615,16 +6682,16 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var FooterCls = "utilities_position_relative__16lm1iw1";
 var InfiniteCls = "InfiniteCls_InfiniteCls__1yeub2v0 utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_boxSizingBorderBox__16lm1iw0";
-var InfiniteClsHasPinnedEnd = "InfiniteCls_InfiniteClsHasPinnedEnd__1yeub2vo";
-var InfiniteClsHasPinnedStart = "InfiniteCls_InfiniteClsHasPinnedStart__1yeub2vn";
-var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "", variantClassNames: { focused: { true: "InfiniteCls_InfiniteClsRecipe_focused_true__1yeub2v2", false: "InfiniteCls_InfiniteClsRecipe_focused_false__1yeub2v3" }, focusedWithin: { true: "InfiniteCls_InfiniteClsRecipe_focusedWithin_true__1yeub2v4", false: "InfiniteCls_InfiniteClsRecipe_focusedWithin_false__1yeub2v5" }, hasPinnedStart: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_true__1yeub2v6", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_false__1yeub2v7" }, hasPinnedEnd: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_true__1yeub2v8", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_false__1yeub2v9" }, hasPinnedStartOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_true__1yeub2va", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_false__1yeub2vb" }, hasPinnedEndOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_true__1yeub2vc", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_false__1yeub2vd" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "InfiniteCls_InfiniteClsRecipe_compound_0__1yeub2ve"]] });
-var InfiniteClsShiftingColumns = "InfiniteCls_shiftingcols__1yeub2vl";
-var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "", variantClassNames: { pinned: { start: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_start__1yeub2vi", end: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_end__1yeub2vj", false: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_false__1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteClsHasPinnedEnd = "InfiniteCls_InfiniteClsHasPinnedEnd__1yeub2vq";
+var InfiniteClsHasPinnedStart = "InfiniteCls_InfiniteClsHasPinnedStart__1yeub2vp";
+var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2v2", variantClassNames: { focused: { true: "InfiniteCls_InfiniteClsRecipe_focused_true__1yeub2v3", false: "InfiniteCls_InfiniteClsRecipe_focused_false__1yeub2v4" }, focusedWithin: { true: "InfiniteCls_InfiniteClsRecipe_focusedWithin_true__1yeub2v5", false: "InfiniteCls_InfiniteClsRecipe_focusedWithin_false__1yeub2v6" }, hasPinnedStart: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_true__1yeub2v7", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_false__1yeub2v8" }, hasPinnedEnd: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_true__1yeub2v9", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_false__1yeub2va" }, hasPinnedStartOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_true__1yeub2vb", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_false__1yeub2vc" }, hasPinnedEndOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_true__1yeub2vd", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_false__1yeub2ve" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "InfiniteCls_InfiniteClsRecipe_compound_0__1yeub2vf"]] });
+var InfiniteClsShiftingColumns = "InfiniteCls_shiftingcols__1yeub2vn";
+var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2vj", variantClassNames: { pinned: { start: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_start__1yeub2vk", end: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_end__1yeub2vl", false: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_false__1yeub2vm" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/utils/rafFn.ts
 var rafFn = (fn) => {
@@ -7291,7 +7358,7 @@ var useColumnPointerEvents = ({
   domRef
 }) => {
   var _a;
-  const [proxyPosition, setProxyPosition] = (0, import_react20.useState)(null);
+  const [proxyPosition, setProxyPosition] = (0, import_react21.useState)(null);
   const {
     actions,
     computed,
@@ -7300,13 +7367,13 @@ var useColumnPointerEvents = ({
     api,
     state: { domRef: rootRef }
   } = useInfiniteTable();
-  const defaultPointerDown = (0, import_react20.useCallback)((e) => {
+  const defaultPointerDown = (0, import_react21.useCallback)((e) => {
     const { multiSortBehavior } = getState();
     api.toggleSortingForColumn(columnId, {
       multiSortBehavior: multiSortBehavior === "replace" && (e.ctrlKey || e.metaKey) ? "append" : multiSortBehavior
     });
   }, []);
-  const onPointerDown = (0, import_react20.useCallback)(
+  const onPointerDown = (0, import_react21.useCallback)(
     (e) => {
       var _a2, _b;
       if (((_a2 = e.target) == null ? void 0 : _a2.tagName) === "INPUT") {
@@ -7460,7 +7527,7 @@ var React37 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var React36 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 var React32 = __toESM(require("react"));
@@ -7475,17 +7542,17 @@ var showLoadingIcon = (rowInfo) => {
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 var React30 = __toESM(require("react"));
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var ExpanderIconCls = "utilities_fill_accentColor__16lm1iw7 utilities_flex_none__16lm1iwm utilities_cursor_pointer__16lm1iwh";
-var ExpanderIconClsVariants = createRuntimeFn({ defaultClassName: "", variantClassNames: { expanded: { true: "utilities_transform_rotate90__16lm1iwf", false: "ExpanderIcon_ExpanderIconClsVariants_expanded_false__198z9782" }, direction: { end: "ExpanderIcon_ExpanderIconClsVariants_direction_end__198z9783", start: "ExpanderIcon_ExpanderIconClsVariants_direction_start__198z9784" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "utilities_transform_rotate180__16lm1iwg"]] });
+var ExpanderIconClsVariants = createRuntimeFn({ defaultClassName: "ExpanderIcon__198z9781", variantClassNames: { expanded: { true: "utilities_transform_rotate90__16lm1iwf", false: "ExpanderIcon_ExpanderIconClsVariants_expanded_false__198z9783" }, direction: { end: "ExpanderIcon_ExpanderIconClsVariants_direction_end__198z9784", start: "ExpanderIcon_ExpanderIconClsVariants_direction_start__198z9785" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "utilities_transform_rotate180__16lm1iwg"]] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
   var _a;
   const { size = 24, direction = "start" } = props;
-  const [expanded, setExpanded] = (0, import_react21.useState)(
+  const [expanded, setExpanded] = (0, import_react22.useState)(
     (_a = props.expanded) != null ? _a : props.defaultExpanded
   );
   const onClick = () => {
@@ -7581,8 +7648,8 @@ var LoadingIcon = (props) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
-var GroupRowExpanderCls = createRuntimeFn({ defaultClassName: "", variantClassNames: { align: { start: "row_GroupRowExpanderCls_align_start__7pupv0b", center: "row_GroupRowExpanderCls_align_center__7pupv0c", end: "row_GroupRowExpanderCls_align_end__7pupv0d" } }, defaultVariants: {}, compoundVariants: [] });
-var RowClsRecipe = createRuntimeFn({ defaultClassName: "row_RowCls__7pupv00", variantClassNames: { zebra: { false: "row_RowClsRecipe_zebra_false__7pupv02", even: "row_RowClsRecipe_zebra_even__7pupv03", odd: "row_RowClsRecipe_zebra_odd__7pupv04" }, groupRow: { true: "row_RowClsRecipe_groupRow_true__7pupv05", false: "row_RowClsRecipe_groupRow_false__7pupv06" }, inlineGroupRow: { true: "row_RowClsRecipe_inlineGroupRow_true__7pupv07", false: "row_RowClsRecipe_inlineGroupRow_false__7pupv08" }, showHoverRows: { true: "row_RowClsRecipe_showHoverRows_true__7pupv09", false: "row_RowClsRecipe_showHoverRows_false__7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
+var GroupRowExpanderCls = createRuntimeFn({ defaultClassName: "row__7pupv0c", variantClassNames: { align: { start: "row_GroupRowExpanderCls_align_start__7pupv0d", center: "row_GroupRowExpanderCls_align_center__7pupv0e", end: "row_GroupRowExpanderCls_align_end__7pupv0f" } }, defaultVariants: {}, compoundVariants: [] });
+var RowClsRecipe = createRuntimeFn({ defaultClassName: "row__7pupv02 row_RowCls__7pupv00", variantClassNames: { zebra: { false: "row_RowClsRecipe_zebra_false__7pupv03", even: "row_RowClsRecipe_zebra_even__7pupv04", odd: "row_RowClsRecipe_zebra_odd__7pupv05" }, groupRow: { true: "row_RowClsRecipe_groupRow_true__7pupv06", false: "row_RowClsRecipe_groupRow_false__7pupv07" }, inlineGroupRow: { true: "row_RowClsRecipe_inlineGroupRow_true__7pupv08", false: "row_RowClsRecipe_inlineGroupRow_false__7pupv09" }, showHoverRows: { true: "row_RowClsRecipe_showHoverRows_true__7pupv0a", false: "row_RowClsRecipe_showHoverRows_false__7pupv0b" } }, defaultVariants: {}, compoundVariants: [] });
 var RowHoverCls = "row_RowHoverCls__7pupv01";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
@@ -7767,7 +7834,7 @@ var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
 var React33 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
 var CheckBoxCls = "CheckBox_CheckBoxCls__qz8ht90 utilities_cursor_pointer__16lm1iwh";
@@ -7801,8 +7868,8 @@ var InfiniteCheckBoxRoot = getComponentStateRoot({
 function InfiniteCheckBoxComponent() {
   const { componentState, componentActions } = useComponentState();
   const { checked, domProps, disabled } = componentState;
-  const inputRef = (0, import_react22.useRef)(null);
-  (0, import_react22.useEffect)(() => {
+  const inputRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
   return /* @__PURE__ */ React33.createElement(
@@ -8192,17 +8259,17 @@ var InfiniteTableCell = React34.memo(
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnEditor.tsx
 var React35 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react24 = require("react");
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
-  const domRef = (0, import_react23.useRef)();
+  const domRef = (0, import_react24.useRef)();
   const refCallback = React35.useCallback((node) => {
     domRef.current = node;
     if (node) {
       node.focus();
     }
   }, []);
-  const onKeyDown2 = (0, import_react23.useCallback)((event) => {
+  const onKeyDown2 = (0, import_react24.useCallback)((event) => {
     const { key } = event;
     if (key === "Enter" || key === "Tab") {
       confirmEdit();
@@ -8222,7 +8289,7 @@ function InfiniteTableColumnEditor() {
       className: join(absoluteCover, outline.none),
       type: "text",
       defaultValue: initialValue,
-      onChange: (0, import_react23.useCallback)((event) => {
+      onChange: (0, import_react24.useCallback)((event) => {
         setValue(event.target.value);
       }, [])
     }
@@ -8339,7 +8406,7 @@ function InfiniteTableColumnCellFn(props) {
   const { align: align2, verticalAlign } = renderParams;
   const renderParam = renderParams;
   const renderParamRef = React36.useRef(renderParam);
-  const onClick = (0, import_react24.useCallback)(
+  const onClick = (0, import_react25.useCallback)(
     (event) => {
       const colIndex = column.computedVisibleIndex;
       getState().cellClick({
@@ -8350,7 +8417,7 @@ function InfiniteTableColumnCellFn(props) {
     },
     [rowIndex, column.computedVisibleIndex, keyboardNavigation]
   );
-  const onMouseDown = (0, import_react24.useCallback)(
+  const onMouseDown = (0, import_react25.useCallback)(
     (event) => {
       const colIndex = column.computedVisibleIndex;
       getState().cellMouseDown({
@@ -8371,27 +8438,27 @@ function InfiniteTableColumnCellFn(props) {
   const { selectionMode, cellSelection } = dataSourceState;
   const cellSelected = renderParam.cellSelected;
   renderParam.domRef = domRef;
-  renderParam.selectCurrentRow = (0, import_react24.useCallback)(renderParam.selectCurrentRow, [
+  renderParam.selectCurrentRow = (0, import_react25.useCallback)(renderParam.selectCurrentRow, [
     rowInfo
   ]);
-  renderParam.deselectCurrentRow = (0, import_react24.useCallback)(renderParam.deselectCurrentRow, [
+  renderParam.deselectCurrentRow = (0, import_react25.useCallback)(renderParam.deselectCurrentRow, [
     rowInfo
   ]);
-  renderParam.toggleCurrentGroupRow = (0, import_react24.useCallback)(
+  renderParam.toggleCurrentGroupRow = (0, import_react25.useCallback)(
     renderParam.toggleCurrentGroupRow,
     [rowInfo]
   );
-  renderParam.toggleCurrentRowSelection = (0, import_react24.useCallback)(
+  renderParam.toggleCurrentRowSelection = (0, import_react25.useCallback)(
     renderParam.toggleCurrentRowSelection,
     [rowInfo]
   );
-  renderParam.toggleCurrentGroupRowSelection = (0, import_react24.useCallback)(
+  renderParam.toggleCurrentGroupRowSelection = (0, import_react25.useCallback)(
     renderParam.toggleCurrentGroupRowSelection,
     [rowInfo]
   );
   const EditorComponent = (_b = (_a = column.components) == null ? void 0 : _a.Editor) != null ? _b : InfiniteTableColumnEditor;
   const editor = inEdit ? /* @__PURE__ */ React36.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React36.createElement(EditorComponent, null)) : null;
-  const renderChildren = (0, import_react24.useCallback)(() => {
+  const renderChildren = (0, import_react25.useCallback)(() => {
     if (hidden) {
       return null;
     }
@@ -8530,7 +8597,7 @@ function InfiniteTableColumnCellFn(props) {
   style2 = style2 || {};
   style2.height = rowHeight;
   style2.zIndex = `var(${columnZIndexAtIndex4}-${column.computedVisibleIndex})`;
-  const memoizedStyle = (0, import_react24.useMemo)(
+  const memoizedStyle = (0, import_react25.useMemo)(
     () => style2,
     [!style2 ? null : JSON.stringify(style2)]
   );
@@ -8620,7 +8687,7 @@ var InfiniteTableColumnCell = React36.memo(
   InfiniteTableColumnCellFn
 );
 function useInfiniteColumnCell() {
-  const result = (0, import_react24.useContext)(
+  const result = (0, import_react25.useContext)(
     InfiniteTableColumnCellContext
   );
   return result;
@@ -8737,7 +8804,7 @@ function MenuIcon(props) {
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var React39 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react26 = require("react");
 
 // src/components/InfiniteTable/components/icons/SortIcon.css.ts
 var SortIconCls = "SortIcon_SortIconCls__1ek6mqy0 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_position_relative__16lm1iw1 utilities_justifyContent_spaceAround__16lm1iw1t";
@@ -8750,8 +8817,8 @@ var defaultLineStyle3 = {
 };
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = (0, import_react25.useState)(true);
-  const [opacity, setOpacity] = (0, import_react25.useState)(0);
+  const [rendered, setRendered] = (0, import_react26.useState)(true);
+  const [opacity, setOpacity] = (0, import_react26.useState)(0);
   const { direction, lineWidth = 1, style: style2, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -8765,7 +8832,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -8830,10 +8897,10 @@ function SortIcon(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 var React41 = __toESM(require("react"));
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var React40 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
@@ -8947,16 +9014,16 @@ function getColumnGroupResizer(colIndexes, config) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
 var ResizeHandleCls = "ResizeHandle_ResizeHandleCls__zneyzh0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_right_0__16lm1iw1i utilities_bottom_0__16lm1iw1g utilities_cursor_colResize__16lm1iwj utilities_overflow_hidden__16lm1iw1w";
-var ResizeHandleDraggerClsRecipe = createRuntimeFn({ defaultClassName: "ResizeHandle_ResizeHandleDraggerClsRecipe__zneyzhb utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_bottom_0__16lm1iw1g", variantClassNames: { constrained: { false: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_false__zneyzhc", true: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_true__zneyzhd" }, computedPinned: { start: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_start__zneyzhe", end: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_end__zneyzhf", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_false__zneyzhg" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_true__zneyzhh", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_false__zneyzhi" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_true__zneyzhj", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_false__zneyzhk" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "start", computedLastInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_0__zneyzhl"], [{ computedPinned: "end", computedFirstInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_1__zneyzhm"]] });
-var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "", variantClassNames: { computedPinned: { start: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_start__zneyzh1", end: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_end__zneyzh2 utilities_left_0__16lm1iw1d utilities_right_auto__16lm1iw1k", false: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_false__zneyzh3" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_true__zneyzh4", false: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_false__zneyzh5" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_true__zneyzh6", false: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_false__zneyzh7" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_0__zneyzh8"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_1__zneyzh9"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_2__zneyzha"]] });
+var ResizeHandleDraggerClsRecipe = createRuntimeFn({ defaultClassName: "ResizeHandle_ResizeHandleDraggerClsRecipe__zneyzhc utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_bottom_0__16lm1iw1g", variantClassNames: { constrained: { false: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_false__zneyzhd", true: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_true__zneyzhe" }, computedPinned: { start: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_start__zneyzhf", end: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_end__zneyzhg", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_false__zneyzhh" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_true__zneyzhi", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_false__zneyzhj" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_true__zneyzhk", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_false__zneyzhl" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "start", computedLastInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_0__zneyzhm"], [{ computedPinned: "end", computedFirstInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_1__zneyzhn"]] });
+var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__zneyzh1", variantClassNames: { computedPinned: { start: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_start__zneyzh2", end: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_end__zneyzh3 utilities_left_0__16lm1iw1d utilities_right_auto__16lm1iw1k", false: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_false__zneyzh4" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_true__zneyzh5", false: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_false__zneyzh6" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_true__zneyzh7", false: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_false__zneyzh8" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_0__zneyzh9"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_1__zneyzha"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_2__zneyzhb"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var { rootClassName: rootClassName7 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
 function ResizeHandleFn(props) {
-  const domRef = (0, import_react26.useRef)(null);
-  const [constrained, setConstrained] = (0, import_react26.useState)(false);
-  const constrainedRef = (0, import_react26.useRef)(constrained);
+  const domRef = (0, import_react27.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react27.useState)(false);
+  const constrainedRef = (0, import_react27.useRef)(constrained);
   constrainedRef.current = constrained;
   const col = props.columns[props.columnIndex];
   if (!col) {
@@ -9046,7 +9113,7 @@ function useColumnResizeHandle(column) {
     getComputed,
     actions
   } = useInfiniteTable();
-  const computeResizeForDiff = (0, import_react27.useCallback)(
+  const computeResizeForDiff = (0, import_react28.useCallback)(
     ({
       diff,
       shareSpaceOnResize
@@ -9084,7 +9151,7 @@ function useColumnResizeHandle(column) {
     },
     [column]
   );
-  const onColumnResize = (0, import_react27.useCallback)(
+  const onColumnResize = (0, import_react28.useCallback)(
     ({
       diff,
       shareSpaceOnResize
@@ -9174,7 +9241,7 @@ function InfiniteTableHeaderCell(props) {
   const { onResize, height, width, headerOptions, columnsMap } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = (0, import_react28.useCallback)(
+  const ref = (0, import_react29.useCallback)(
     (node) => {
       var _a2;
       domRef.current = node;
@@ -9358,8 +9425,8 @@ function InfiniteTableHeaderCell(props) {
     }
     return all;
   };
-  const domRef = (0, import_react28.useRef)(null);
-  (0, import_react28.useEffect)(() => {
+  const domRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -9493,7 +9560,7 @@ function InfiniteTableHeaderCell(props) {
   ), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = (0, import_react28.useContext)(
+  const result = (0, import_react29.useContext)(
     InfiniteTableHeaderCellContext
   );
   return result;
@@ -9607,24 +9674,24 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var React46 = __toESM(require("react"));
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var React45 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
 var React44 = __toESM(require("react"));
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var React43 = __toESM(require("react"));
 var { rootClassName: rootClassName9 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName9}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
-  const domRef = (0, import_react29.useRef)(null);
-  const [constrained, setConstrained] = (0, import_react29.useState)(false);
-  const constrainedRef = (0, import_react29.useRef)(constrained);
+  const domRef = (0, import_react30.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react30.useState)(false);
+  const constrainedRef = (0, import_react30.useRef)(constrained);
   constrainedRef.current = constrained;
   const col = props.groupColumns[0];
   if (!col) {
@@ -9725,7 +9792,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     actions
   } = useInfiniteTable();
   const lastColumnInGroup = groupColumns[groupColumns.length - 1];
-  const computeResizeForDiff = (0, import_react30.useCallback)(
+  const computeResizeForDiff = (0, import_react31.useCallback)(
     (diff) => {
       const state = getState();
       const { columnSizing, viewportReservedWidth, bodySize } = state;
@@ -9761,7 +9828,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     },
     [lastColumnInGroup]
   );
-  const onColumnResize = (0, import_react30.useCallback)(
+  const onColumnResize = (0, import_react31.useCallback)(
     (diff) => {
       const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
       actions.viewportReservedWidth = reservedWidth;
@@ -9852,7 +9919,7 @@ function InfiniteTableHeaderFn(props) {
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -9861,7 +9928,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react31.useRef)(null);
+  const domRef = (0, import_react32.useRef)(null);
   const headerCls = HeaderClsRecipe({
     overflow: false
   });
@@ -9875,7 +9942,7 @@ function InfiniteTableHeaderFn(props) {
     ),
     style: __spreadProps(__spreadValues({}, style2), { height: columnHeaderHeight })
   };
-  const renderCell = (0, import_react31.useCallback)(
+  const renderCell = (0, import_react32.useCallback)(
     (params) => {
       const {
         rowIndex,
@@ -10088,7 +10155,7 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var React48 = __toESM(require("react"));
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -10145,7 +10212,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
         ref.current = node;
       }
     }, []);
-    (0, import_react32.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       const forceStyle = () => {
         raf(() => {
           var _a;
@@ -10883,7 +10950,7 @@ function enhancedFlatten(param) {
 
 // src/components/DataSource/index.tsx
 var React50 = __toESM(require("react"));
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -11593,15 +11660,15 @@ var GroupRowsState = class extends BooleanDeepCollectionState {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/hooks/useEffectWithChanges.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react33.useRef)({});
-  const oldValuesRef = (0, import_react33.useRef)({});
+  const prevRef = (0, import_react34.useRef)({});
+  const oldValuesRef = (0, import_react34.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react33.useRef)({});
+  const changesRef = (0, import_react34.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -11614,7 +11681,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const changes2 = changesRef.current;
     let result = void 0;
     if (Object.keys(changes2).length !== 0) {
@@ -13657,12 +13724,12 @@ function useLoadData() {
     filterTypes,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react34.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react35.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react34.useRef)(scrollbars);
-  (0, import_react34.useEffect)(() => {
+  const scrollbarsRef = (0, import_react35.useRef)(scrollbars);
+  (0, import_react35.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -13672,7 +13739,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!livePagination) {
       return;
     }
@@ -13686,7 +13753,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -13700,7 +13767,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -13711,7 +13778,7 @@ function useLoadData() {
       }
     }
   }, [scrollbars.vertical]);
-  const computedFilterValue = (0, import_react34.useMemo)(() => {
+  const computedFilterValue = (0, import_react35.useMemo)(() => {
     return computeFilterValueForRemote(filterValue, {
       filterTypes,
       filterMode
@@ -13725,7 +13792,7 @@ function useLoadData() {
     filterValue: computedFilterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react34.useRef)(true);
+  const initialRef = (0, import_react35.useRef)(true);
   useLazyLoadRange();
   useEffectWithChanges(
     () => {
@@ -13770,7 +13837,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -13782,7 +13849,7 @@ function useLazyLoadRange() {
     groupRowsState,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react34.useRef)(null);
+  const latestRenderRangeRef = (0, import_react35.useRef)(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -13810,7 +13877,7 @@ function useLazyLoadRange() {
       cache
     );
   };
-  const debouncedLoadRange = (0, import_react34.useMemo)(
+  const debouncedLoadRange = (0, import_react35.useMemo)(
     () => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }),
     [scrollStopDelayUpdatedByTable]
   );
@@ -13836,7 +13903,7 @@ function useLazyLoadRange() {
       groupRowsState
     }
   );
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -14400,7 +14467,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(componentState);
   }
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     var _a;
     (_a = componentState.onReady) == null ? void 0 : _a.call(componentState, api);
   }, []);
@@ -14441,7 +14508,7 @@ function DataSourceCmp({ children }) {
     globalThis.dataSourceApi = api;
   }
   useLoadData();
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     var _a;
     (_a = componentState.onDataArrayChange) == null ? void 0 : _a.call(
       componentState,
@@ -14742,6 +14809,9 @@ function isSortInfoForColumn(sortInfo, col) {
 }
 var InfiniteTableApiImpl = class {
   constructor(context) {
+    this.hideFilterOperatorMenu = () => {
+      this.actions.filterOperatorMenuVisibleForColumnId = null;
+    };
     this.getColumnOrder = () => {
       return this.getComputed().computedColumnOrder;
     };
@@ -15365,16 +15435,15 @@ var InfiniteTableApiImpl = class {
       };
       if (col.field || typeof col.groupByForColumn === "string") {
         filterValueForColumn.field = col.field || col.groupByForColumn;
-      } else {
-        filterValueForColumn.id = col.id;
       }
       newFilterValueForColumn = filterValueForColumn;
     }
+    newFilterValueForColumn.id = col.id;
     newFilterValueForColumn.filter.value = filterValue;
     this.setFilterValueForColumn(columnId, newFilterValueForColumn);
   }
   setColumnFilterOperator(columnId, newOperator) {
-    var _a, _b;
+    var _a;
     const col = this.getComputed().computedColumnsMap.get(columnId);
     if (!col) {
       return;
@@ -15382,29 +15451,34 @@ var InfiniteTableApiImpl = class {
     const dataSourceState = this.getDataSourceState();
     const { filterTypes } = dataSourceState;
     const filterType = col.computedFilterType;
-    const operator = (_b = (_a = filterTypes[filterType].operators.find((op) => op.name === newOperator)) == null ? void 0 : _a.name) != null ? _b : filterTypes[filterType].defaultOperator;
+    const filterTypeOperators = filterTypes[filterType].operators;
+    const operator = (_a = filterTypeOperators.find(
+      (op) => op.name === newOperator
+    )) != null ? _a : filterTypeOperators.find(
+      (op) => op.name === filterTypes[filterType].defaultOperator
+    );
+    const operatorName = operator.name;
     let newFilterValueForColumn;
     if (col.computedFilterValue) {
       newFilterValueForColumn = __spreadProps(__spreadValues({}, col.computedFilterValue), {
         filter: __spreadProps(__spreadValues({}, col.computedFilterValue.filter), {
-          operator
+          operator: operatorName
         })
       });
     } else {
       newFilterValueForColumn = {
         filter: {
-          operator,
+          operator: operatorName,
           type: filterType,
-          value: [...filterTypes[filterType].emptyValues.values()][0]
+          value: operator.defaultFilterValue !== void 0 ? operator.defaultFilterValue : [...filterTypes[filterType].emptyValues.values()][0]
         },
         valueGetter: col.valueGetter
       };
       if (col.field) {
         newFilterValueForColumn.field = col.field;
-      } else {
-        newFilterValueForColumn.id = col.id;
       }
     }
+    newFilterValueForColumn.id = col.id;
     this.setFilterValueForColumn(columnId, newFilterValueForColumn);
   }
   setFilterValueForColumn(columnId, filterValue) {
@@ -15530,7 +15604,7 @@ function getImperativeApi(context) {
 }
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -15602,11 +15676,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react36.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react37.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react36.useRef)(null);
-  (0, import_react36.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react37.useRef)(null);
+  (0, import_react37.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -15619,7 +15693,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -15664,7 +15738,7 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var React51 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -15749,13 +15823,13 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = (0, import_react37.useRef)(0);
-  (0, import_react37.useEffect)(() => {
+  const scrollTopMaxRef = (0, import_react38.useRef)(0);
+  (0, import_react38.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -15782,13 +15856,13 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
     actions.ready = true;
   }, [!!bodySize.height]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (!ready) {
     }
     const { onReady } = getState();
@@ -15797,10 +15871,10 @@ function useCellRendering(param) {
     }
   }, [ready]);
   const [, rerender] = useRerender();
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = (0, import_react37.useCallback)(
+  const renderCell = (0, import_react38.useCallback)(
     (params) => {
       const {
         rowIndex,
@@ -15865,7 +15939,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -16057,10 +16131,10 @@ var MultiRowSelector = class {
 };
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/hooks/useInterceptedMap.ts
-var import_react38 = require("react");
+var import_react39 = require("react");
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -16134,7 +16208,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -16145,7 +16219,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -16180,10 +16254,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = (0, import_react40.useMemo)(() => {
+  const rowspan = (0, import_react41.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter(
       (col) => typeof col.rowspan === "function"
     );
@@ -16211,10 +16285,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = (0, import_react41.useCallback)(
+  const columnSize = (0, import_react42.useCallback)(
     (index) => {
       const column = columns[index];
       if (false) {
@@ -16228,10 +16302,10 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/components/InfiniteTable/state/getInitialState.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -16324,7 +16398,7 @@ function initSetupState2() {
   if (false) {
     globalThis.renderer = renderer;
   }
-  const domRef = (0, import_react42.createRef)();
+  const domRef = (0, import_react43.createRef)();
   return {
     renderer,
     onRenderUpdater,
@@ -16344,12 +16418,12 @@ 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)(),
-    focusDetectDOMRef: (0, import_react42.createRef)(),
-    activeCellIndicatorDOMRef: (0, import_react42.createRef)(),
+    columnMenuTargetRef: (0, import_react43.createRef)(),
+    editingValueRef: (0, import_react43.createRef)(),
+    scrollerDOMRef: (0, import_react43.createRef)(),
+    portalDOMRef: (0, import_react43.createRef)(),
+    focusDetectDOMRef: (0, import_react43.createRef)(),
+    activeCellIndicatorDOMRef: (0, import_react43.createRef)(),
     onColumnMenuClick: buildSubscriptionCallback(),
     cellContextMenu: buildSubscriptionCallback(),
     contextMenu: buildSubscriptionCallback(),
@@ -16640,10 +16714,10 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react43.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react44.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -16677,7 +16751,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  return (0, import_react44.useMemo)(() => getGroupByMap(groupBy), [groupBy]);
+  return (0, import_react45.useMemo)(() => getGroupByMap(groupBy), [groupBy]);
 }
 function useColumnsWhen() {
   const {
@@ -16691,13 +16765,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useComponentState();
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -16778,7 +16852,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -16814,7 +16888,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -16890,7 +16964,7 @@ function useHideColumns(groupByMap) {
       groupRenderStrategy
     }
   } = useComponentState();
-  (0, import_react44.useLayoutEffect)(() => {
+  (0, import_react45.useLayoutEffect)(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -16923,7 +16997,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -17084,13 +17158,13 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedColumns.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -17153,7 +17227,7 @@ var useComputedColumns = ({
     computedColumnsMap,
     computedColumnsMapInInitialOrder,
     fieldsToColumn
-  } = (0, import_react46.useMemo)(() => {
+  } = (0, import_react47.useMemo)(() => {
     return getComputedColumns({
       columns,
       scrollbarWidth: scrollbarWidth2,
@@ -17237,7 +17311,7 @@ var useComputedColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -17245,8 +17319,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = (0, import_react47.useState)(INITIAL_SCROLLBARS);
-  (0, import_react47.useEffect)(() => {
+  const [scrollbars, setScrollbars] = (0, import_react48.useState)(INITIAL_SCROLLBARS);
+  (0, import_react48.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -17255,7 +17329,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  (0, import_react47.useLayoutEffect)(() => {
+  (0, import_react48.useLayoutEffect)(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -17291,7 +17365,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react48.useState)(() => {
+  (0, import_react49.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -17305,7 +17379,7 @@ function useComputed() {
       }
     );
   });
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
@@ -17373,14 +17447,14 @@ function useComputed() {
   const scrollbars = useScrollbars(brain);
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
-  const [multiRowSelector] = (0, import_react48.useState)(() => {
+  const [multiRowSelector] = (0, import_react49.useState)(() => {
     const multiRowSelector2 = new MultiRowSelector({
       getIdForIndex: (index) => getDataSourceState().dataArray[index].id
     });
     return multiRowSelector2;
   });
   const getComputedVisibleColumns = useLatest(computedVisibleColumns);
-  const [multiCellSelector] = (0, import_react48.useState)(() => {
+  const [multiCellSelector] = (0, import_react49.useState)(() => {
     return new MultiCellSelector({
       getPrimaryKeyByIndex: dataSourceApi.getPrimaryKeyByIndex,
       getColumnIdByIndex: (colIndex) => {
@@ -17421,7 +17495,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -17590,10 +17664,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react49.useMemo)(() => {
+  const valid = (0, import_react50.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.0.8"
+      version: "3.0.10"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -17604,18 +17678,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-var import_react50 = require("react");
+var import_react51 = require("react");
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
-  const didScrollRef = (0, import_react50.useRef)(false);
-  const rafId = (0, import_react50.useRef)(null);
-  (0, import_react50.useEffect)(() => {
+  const didScrollRef = (0, import_react51.useRef)(false);
+  const rafId = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -17643,18 +17717,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
-  const didScrollRef = (0, import_react51.useRef)(false);
-  const rafId = (0, import_react51.useRef)(null);
-  (0, import_react51.useEffect)(() => {
+  const didScrollRef = (0, import_react52.useRef)(false);
+  const rafId = (0, import_react52.useRef)(null);
+  (0, import_react52.useEffect)(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -17683,7 +17757,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -18402,7 +18476,7 @@ function useEventHandlersContext() {
     componentActions: dataSourceActions,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const context = (0, import_react52.useMemo)(() => {
+  const context = (0, import_react53.useMemo)(() => {
     const context2 = {
       getComputed,
       dataSourceApi,
@@ -18429,7 +18503,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -18473,7 +18547,7 @@ function handleDOMEvents() {
 }
 function subscribeToDOMEvents() {
   const { getState } = useInfiniteTable();
-  const onKeyDown2 = (0, import_react52.useCallback)((event) => {
+  const onKeyDown2 = (0, import_react53.useCallback)((event) => {
     getState().keyDown(event);
   }, []);
   return { onKeyDown: onKeyDown2 };
@@ -18484,11 +18558,11 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/components/hooks/useOverlay/index.tsx
 var React52 = __toESM(require("react"));
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/utils/pageGeometry/Point.ts
@@ -18877,7 +18951,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React52.useRef(null);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignOverlayNode(nodeRef.current, handle);
@@ -18888,7 +18962,7 @@ function OverlayContent(props) {
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
-      ref: (0, import_react53.useCallback)((node) => {
+      ref: (0, import_react54.useCallback)((node) => {
         if (node) {
           alignOverlayNode(node, props);
         }
@@ -18938,8 +19012,8 @@ function alignOverlayNode(node, params) {
   });
 }
 function useOverlayPortal(content, portalContainer) {
-  const [container, setContainer] = (0, import_react53.useState)(null);
-  (0, import_react53.useLayoutEffect)(() => {
+  const [container, setContainer] = (0, import_react54.useState)(null);
+  (0, import_react54.useLayoutEffect)(() => {
     function getContainer() {
       return __async(this, null, function* () {
         const container2 = portalContainer ? yield retrieveElement(portalContainer) : null;
@@ -18987,10 +19061,10 @@ globalThis.allhandles = {};
 globalThis.thehandles = {};
 function useOverlay(params) {
   const rootParams = params;
-  const [handles] = (0, import_react53.useState)(() => /* @__PURE__ */ new Map());
-  const [handleToRealign, setHandleToRealign] = (0, import_react53.useState)(null);
-  const [realignTimestamp, setRealignTimestamp] = (0, import_react53.useState)(0);
-  const getContentForPortal = (0, import_react53.useCallback)(() => {
+  const [handles] = (0, import_react54.useState)(() => /* @__PURE__ */ new Map());
+  const [handleToRealign, setHandleToRealign] = (0, import_react54.useState)(null);
+  const [realignTimestamp, setRealignTimestamp] = (0, import_react54.useState)(0);
+  const getContentForPortal = (0, import_react54.useCallback)(() => {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
@@ -19004,7 +19078,7 @@ function useOverlay(params) {
     getContentForPortal(),
     params.portalContainer
   );
-  const showOverlay = (0, import_react53.useCallback)(
+  const showOverlay = (0, import_react54.useCallback)(
     (content, params2) => {
       const id = params2.id || getIdForReactOnlyChild(content) || getChangeDetect();
       const key = `${id}`;
@@ -19221,7 +19295,7 @@ var deriveStateFromProps2 = (params) => {
 
 // src/components/Menu/Menu.tsx
 var React55 = __toESM(require("react"));
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/utils/pageGeometry/Triangle.ts
 var Triangle = class extends ConvexPoly {
@@ -19440,24 +19514,24 @@ var MenuTriangleContext = class {
 };
 
 // src/components/Menu/MenuContext.ts
-var import_react54 = require("react");
-var MenuContext = (0, import_react54.createContext)(null);
+var import_react55 = require("react");
+var MenuContext = (0, import_react55.createContext)(null);
 function useMenuContext() {
-  const contextValue = (0, import_react54.useContext)(MenuContext);
+  const contextValue = (0, import_react55.useContext)(MenuContext);
   return contextValue;
 }
 
 // src/components/hooks/useMounted.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 function useMounted() {
-  let mountedRef = (0, import_react55.useRef)(true);
-  (0, import_react55.useEffect)(() => {
+  let mountedRef = (0, import_react56.useRef)(true);
+  (0, import_react56.useEffect)(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const isMounted = (0, import_react55.useCallback)(() => mountedRef.current, []);
+  const isMounted = (0, import_react56.useCallback)(() => mountedRef.current, []);
   return isMounted;
 }
 
@@ -19547,7 +19621,7 @@ function useSubmenus({
   onItemActivate
 }) {
   const { getState } = useMenuContext();
-  const [{ onItemEnter, onItemLeave }] = (0, import_react56.useState)(() => {
+  const [{ onItemEnter, onItemLeave }] = (0, import_react57.useState)(() => {
     return new MenuTriangleContext({
       parentMenuId: getState().parentMenuId,
       onItemActivate: (itemKey) => {
@@ -19578,8 +19652,8 @@ function useSubmenus({
     }).getHandlers();
   });
   return {
-    onItemEnter: (0, import_react56.useCallback)(onItemEnter, []),
-    onItemLeave: (0, import_react56.useCallback)(onItemLeave, [])
+    onItemEnter: (0, import_react57.useCallback)(onItemEnter, []),
+    onItemLeave: (0, import_react57.useCallback)(onItemLeave, [])
   };
 }
 function MenuComponent(props) {
@@ -19604,16 +19678,16 @@ function MenuComponent(props) {
     componentActions,
     getState
   } = useMenuContext();
-  const setKeyboardActiveItemKey = (0, import_react56.useCallback)((key) => {
+  const setKeyboardActiveItemKey = (0, import_react57.useCallback)((key) => {
     componentActions.keyboardActiveItemKey = key;
   }, []);
-  const setActiveItemKey = (0, import_react56.useCallback)((key) => {
+  const setActiveItemKey = (0, import_react57.useCallback)((key) => {
     componentActions.activeItemKey = key;
   }, []);
   const isMounted = useMounted();
-  const [submenuApi, setSubmenuApi] = (0, import_react56.useState)(null);
+  const [submenuApi, setSubmenuApi] = (0, import_react57.useState)(null);
   let renderedChildren = null;
-  (0, import_react56.useLayoutEffect)(() => {
+  (0, import_react57.useLayoutEffect)(() => {
     const { runtimeItems: runtimeItems2 } = getState();
     const activeItem = runtimeItems2.filter(
       (item) => item.type === "item" && activeItemKey === item.key
@@ -19815,7 +19889,7 @@ function MenuComponent(props) {
   function onMenuBlur() {
     componentActions.focused = false;
   }
-  const onMenuFocus = (0, import_react56.useCallback)(function() {
+  const onMenuFocus = (0, import_react57.useCallback)(function() {
     componentActions.focused = true;
     setTimeout(() => {
       var _a, _b;
@@ -19826,8 +19900,8 @@ function MenuComponent(props) {
       }
     });
   }, []);
-  const shouldSelectFirstItemOnFocus = (0, import_react56.useRef)(true);
-  const [api] = (0, import_react56.useState)(() => {
+  const shouldSelectFirstItemOnFocus = (0, import_react57.useRef)(true);
+  const [api] = (0, import_react57.useState)(() => {
     const result2 = {
       focus: () => {
         if (domRef.current) {
@@ -19845,7 +19919,7 @@ function MenuComponent(props) {
     };
     return result2;
   });
-  const refCallback = (0, import_react56.useCallback)((node) => {
+  const refCallback = (0, import_react57.useCallback)((node) => {
     if (node) {
       domRef.current = node;
       onShow == null ? void 0 : onShow(getState(), api);
@@ -20276,7 +20350,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: false
   });
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -20291,7 +20365,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -20326,7 +20400,7 @@ function useColumnMenu() {
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
 var React59 = __toESM(require("react"));
-var import_react58 = require("react");
+var import_react59 = require("react");
 var style = {
   width: 0,
   height: 0,
@@ -20346,7 +20420,7 @@ function FocusDetect() {
   } = useInfiniteTable();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const { focusDetectDOMRef } = getState();
-  const onFocus = (0, import_react58.useCallback)(() => __async(this, null, function* () {
+  const onFocus = (0, import_react59.useCallback)(() => __async(this, null, function* () {
     const context = {
       getDataSourceState,
       getComputed,
@@ -20370,13 +20444,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-var import_react59 = require("react");
+var import_react60 = require("react");
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -20396,7 +20470,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -20418,7 +20492,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell == null ? void 0 : editingCell.active;
   const prevActive = usePrevious(active);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -20431,7 +20505,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     var _a, _b;
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
@@ -20455,7 +20529,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -20486,7 +20560,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 var React62 = __toESM(require("react"));
@@ -20555,6 +20629,14 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     };
   });
   const firstItems = [
+    {
+      key: "close",
+      label: "Close Menu",
+      icon: null,
+      onAction: () => {
+        api.hideFilterOperatorMenu();
+      }
+    },
     {
       key: "clear",
       label: "Clear",
@@ -20620,7 +20702,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: false
   });
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -20656,7 +20738,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -20683,7 +20765,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 var React63 = __toESM(require("react"));
@@ -20827,7 +20909,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: false
   });
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -20877,7 +20959,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -20912,7 +20994,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: false
   });
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -20957,7 +21039,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {