@infinite-table/infinite-react 6.2.2 → 6.2.4

package/index.js

@@ -6025,7 +6025,7 @@ function InfiniteTableFooter(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React43 = __toESM(require("react"));
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/utils/keyMirror.ts
@@ -6113,7 +6113,7 @@ var React30 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 var React29 = __toESM(require("react"));
-var import_react20 = require("react");
+var import_react19 = require("react");
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
 var import_react16 = require("react");
@@ -7281,10 +7281,10 @@ function getColumnLabel(colIdOrCol, context) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilterContext.ts
-var import_react19 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName2}HeaderCell__filter`;
 var InfiniteTableColumnHeaderFilterOperatorClassName = `${rootClassName2}HeaderCell__filterOperator`;
-var InfiniteTableColumnHeaderFilterContext = import_react19.default.createContext(null);
+var InfiniteTableColumnHeaderFilterContext = React28.createContext(null);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 var InfiniteTableColumnHeaderFilterInputClassName = `${InfiniteTableColumnHeaderFilterClassName}__input`;
@@ -7294,7 +7294,7 @@ function InfiniteTableColumnHeaderFilter(props) {
   const { column } = useInfiniteHeaderCell();
   const FilterEditor = props.filterEditor;
   const FilterOperatorSwitch = props.filterOperatorSwitch;
-  const [focused, setFocused] = (0, import_react20.useState)(false);
+  const [focused, setFocused] = (0, import_react19.useState)(false);
   const onFocus = React29.useCallback(() => {
     setFocused(true);
   }, []);
@@ -7372,7 +7372,7 @@ function useInfiniteColumnFilterEditor() {
   );
   const { columnFilterType, filterTypes, columnFilterValue } = filterContextValue;
   const filterType = filterTypes[columnFilterType];
-  const [theValue, setTheValue] = (0, import_react20.useState)(
+  const [theValue, setTheValue] = (0, import_react19.useState)(
     columnFilterValue?.filter.value ?? ""
   );
   const onInputChange = React29.useCallback(
@@ -7388,7 +7388,7 @@ function useInfiniteColumnFilterEditor() {
   const removeColumnFilter = React29.useCallback(() => {
     context.api.removeColumnFilter(column.id);
   }, [column.id]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (columnFilterValue) {
       if (theValue !== columnFilterValue.filter.value) {
         setTheValue(columnFilterValue.filter.value);
@@ -7678,7 +7678,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var import_react21 = require("react");
+var import_react20 = require("react");
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var FooterCls = "_16lm1iw1";
@@ -8497,7 +8497,7 @@ var useColumnPointerEvents = ({
   domRef,
   horizontalLayoutPageIndex
 }) => {
-  const [proxyPosition, setProxyPosition] = (0, import_react21.useState)(null);
+  const [proxyPosition, setProxyPosition] = (0, import_react20.useState)(null);
   const {
     actions,
     computed,
@@ -8506,7 +8506,7 @@ var useColumnPointerEvents = ({
     api,
     state: { domRef: rootRef }
   } = useInfiniteTable();
-  const defaultPointerDown = (0, import_react21.useCallback)((e) => {
+  const defaultPointerDown = (0, import_react20.useCallback)((e) => {
     const computedCol = getComputed().computedVisibleColumnsMap.get(columnId);
     if (!computedCol || !computedCol.computedSortable) {
       return;
@@ -8516,7 +8516,7 @@ var useColumnPointerEvents = ({
       multiSortBehavior: multiSortBehavior === "replace" && (e.ctrlKey || e.metaKey) ? "append" : multiSortBehavior
     });
   }, []);
-  const onPointerDown = (0, import_react21.useCallback)(
+  const onPointerDown = (0, import_react20.useCallback)(
     (e) => {
       const tagName = e.target?.tagName;
       if (tagName === "INPUT" || tagName === "BUTTON") {
@@ -8707,7 +8707,7 @@ var React38 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var React37 = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react24 = require("react");
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 var React33 = __toESM(require("react"));
@@ -8722,7 +8722,7 @@ var showLoadingIcon = (rowInfo) => {
 
 // src/components/InfiniteTable/components/icons/ExpandCollapseIcon.tsx
 var React31 = __toESM(require("react"));
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // src/components/InfiniteTable/components/icons/ExpandCollapseIcon.css.ts
 var ExpanderIconCls = "_6rdmyg0 _16lm1iwn _16lm1iwi _16lm1iw9";
@@ -8732,7 +8732,7 @@ var ExpanderIconClsVariants = createRuntimeFn({ defaultClassName: "_6rdmyg1", va
 var THIS_ICON = `${InfiniteIconClassName}-expand-collapse`;
 function ExpandCollapseIcon(props) {
   const { size = 24, direction = "start", disabled = false } = props;
-  const [expanded, setExpanded] = (0, import_react22.useState)(
+  const [expanded, setExpanded] = (0, import_react21.useState)(
     props.expanded ?? props.defaultExpanded
   );
   const onClick = () => {
@@ -9011,7 +9011,7 @@ function objectValuesExcept(obj, exceptList) {
 
 // src/components/InfiniteTable/components/CheckBox.tsx
 var React34 = __toESM(require("react"));
-var import_react23 = require("react");
+var import_react22 = require("react");
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
 var CheckBoxCls = "qz8ht90 _16lm1iwi";
@@ -9045,8 +9045,8 @@ var { ManagedComponentContextProvider: InfiniteCheckBoxRoot } = buildManagedComp
 function InfiniteCheckBoxComponent() {
   const { componentState, componentActions } = useManagedComponentState();
   const { checked, domProps, disabled } = componentState;
-  const inputRef = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => {
+  const inputRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
   return /* @__PURE__ */ React34.createElement(
@@ -9567,17 +9567,17 @@ var InfiniteTableCell = React35.memo(
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnEditor.tsx
 var React36 = __toESM(require("react"));
-var import_react24 = require("react");
+var import_react23 = require("react");
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
-  const domRef = (0, import_react24.useRef)();
+  const domRef = (0, import_react23.useRef)();
   const refCallback = React36.useCallback((node) => {
     domRef.current = node;
     if (node) {
       node.focus();
     }
   }, []);
-  const onKeyDown2 = (0, import_react24.useCallback)((event) => {
+  const onKeyDown2 = (0, import_react23.useCallback)((event) => {
     const { key } = event;
     if (key === "Enter" || key === "Tab") {
       confirmEdit();
@@ -9597,7 +9597,7 @@ function InfiniteTableColumnEditor() {
       className: join(absoluteCover, outline.none),
       type: "text",
       defaultValue: initialValue,
-      onChange: (0, import_react24.useCallback)((event) => {
+      onChange: (0, import_react23.useCallback)((event) => {
         setValue(event.target.value);
       }, [])
     }
@@ -9722,7 +9722,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   const htmlElementRef = React37.useRef(null);
-  const domRef = (0, import_react25.useCallback)(
+  const domRef = (0, import_react24.useCallback)(
     (node) => {
       htmlElementRef.current = node;
       if (initialDomRef) {
@@ -9783,7 +9783,7 @@ function InfiniteTableColumnCellFn(props) {
   const { align: align2, verticalAlign } = renderParams;
   const renderParam = renderParams;
   const renderParamRef = React37.useRef(renderParam);
-  const onClick = (0, import_react25.useCallback)(
+  const onClick = (0, import_react24.useCallback)(
     (event) => {
       const colIndex = column.computedVisibleIndex;
       getState().cellClick({
@@ -9794,7 +9794,7 @@ function InfiniteTableColumnCellFn(props) {
     },
     [rowIndex, column.computedVisibleIndex, keyboardNavigation]
   );
-  const onMouseDown = (0, import_react25.useCallback)(
+  const onMouseDown = (0, import_react24.useCallback)(
     (event) => {
       const colIndex = column.computedVisibleIndex;
       getState().cellMouseDown({
@@ -9818,37 +9818,37 @@ function InfiniteTableColumnCellFn(props) {
   const cellSelected = renderParam.cellSelected;
   renderParam.domRef = domRef;
   renderParam.htmlElementRef = htmlElementRef;
-  renderParam.toggleCurrentTreeNode = (0, import_react25.useCallback)(
+  renderParam.toggleCurrentTreeNode = (0, import_react24.useCallback)(
     renderParam.toggleCurrentTreeNode,
     [rowInfo]
   );
-  renderParam.selectCell = (0, import_react25.useCallback)(renderParam.selectCell, [rowInfo]);
-  renderParam.deselectCell = (0, import_react25.useCallback)(renderParam.deselectCell, [rowInfo]);
-  renderParam.selectCurrentRow = (0, import_react25.useCallback)(renderParam.selectCurrentRow, [
+  renderParam.selectCell = (0, import_react24.useCallback)(renderParam.selectCell, [rowInfo]);
+  renderParam.deselectCell = (0, import_react24.useCallback)(renderParam.deselectCell, [rowInfo]);
+  renderParam.selectCurrentRow = (0, import_react24.useCallback)(renderParam.selectCurrentRow, [
     rowInfo
   ]);
-  renderParam.deselectCurrentRow = (0, import_react25.useCallback)(renderParam.deselectCurrentRow, [
+  renderParam.deselectCurrentRow = (0, import_react24.useCallback)(renderParam.deselectCurrentRow, [
     rowInfo
   ]);
-  renderParam.toggleCurrentGroupRow = (0, import_react25.useCallback)(
+  renderParam.toggleCurrentGroupRow = (0, import_react24.useCallback)(
     renderParam.toggleCurrentGroupRow,
     [rowInfo]
   );
-  renderParam.toggleCurrentRowSelection = (0, import_react25.useCallback)(
+  renderParam.toggleCurrentRowSelection = (0, import_react24.useCallback)(
     renderParam.toggleCurrentRowSelection,
     [rowInfo]
   );
-  renderParam.toggleCurrentGroupRowSelection = (0, import_react25.useCallback)(
+  renderParam.toggleCurrentGroupRowSelection = (0, import_react24.useCallback)(
     renderParam.toggleCurrentGroupRowSelection,
     [rowInfo]
   );
-  renderParam.toggleCurrentTreeNodeSelection = (0, import_react25.useCallback)(
+  renderParam.toggleCurrentTreeNodeSelection = (0, import_react24.useCallback)(
     renderParam.toggleCurrentTreeNodeSelection,
     [rowInfo]
   );
   const EditorComponent = column.components?.Editor ?? InfiniteTableColumnEditor;
   const editor = inEdit ? /* @__PURE__ */ React37.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React37.createElement(EditorComponent, null)) : null;
-  const renderChildren = (0, import_react25.useCallback)(
+  const renderChildren = (0, import_react24.useCallback)(
     once(() => {
       if (hidden) {
         return null;
@@ -10090,7 +10090,7 @@ function InfiniteTableColumnCellFn(props) {
   style2 = style2 || {};
   style2.height = rowHeight;
   style2.zIndex = `var(${columnZIndexAtIndex4}-${column.computedVisibleIndex})`;
-  const memoizedStyle = (0, import_react25.useMemo)(
+  const memoizedStyle = (0, import_react24.useMemo)(
     () => style2,
     [!style2 ? null : JSON.stringify(style2)]
   );
@@ -10169,7 +10169,7 @@ function InfiniteTableColumnCellFn(props) {
       colClassName,
       rowComputedClassName
     ),
-    renderChildren: (0, import_react25.useCallback)(() => theChildren, [renderChildren])
+    renderChildren: (0, import_react24.useCallback)(() => theChildren, [renderChildren])
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
   return (
@@ -10188,7 +10188,7 @@ var InfiniteTableColumnCell = React37.memo(
   InfiniteTableColumnCellFn
 );
 function useInfiniteColumnCell() {
-  const result = (0, import_react25.useContext)(
+  const result = (0, import_react24.useContext)(
     InfiniteTableColumnCellContext
   );
   return result;
@@ -10307,7 +10307,7 @@ function MenuIcon(props) {
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var React40 = __toESM(require("react"));
-var import_react26 = require("react");
+var import_react25 = require("react");
 
 // src/components/InfiniteTable/components/icons/SortIcon.css.ts
 var SortIconCls = "_1ek6mqy0 _16lm1iwz _16lm1iw1n _16lm1iw1 _16lm1iw1v";
@@ -10319,8 +10319,8 @@ var defaultLineStyle3 = {
   transition: `width 0.25s, opacity 0.25s`
 };
 function SortIcon(props) {
-  const [rendered, setRendered] = (0, import_react26.useState)(true);
-  const [opacity, setOpacity] = (0, import_react26.useState)(0);
+  const [rendered, setRendered] = (0, import_react25.useState)(true);
+  const [opacity, setOpacity] = (0, import_react25.useState)(0);
   const { direction, lineWidth = 1, style: style2, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = props.size ?? 16;
@@ -10335,7 +10335,7 @@ function SortIcon(props) {
     ...props.lineStyle,
     opacity
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -10400,10 +10400,10 @@ function SortIcon(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 var React42 = __toESM(require("react"));
-var import_react28 = require("react");
+var import_react27 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var React41 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
@@ -10539,9 +10539,9 @@ function ResizeHandleFn(props) {
   const {
     state: { brain, headerBrain }
   } = useInfiniteTable();
-  const domRef = (0, import_react27.useRef)(null);
-  const [constrained, setConstrained] = (0, import_react27.useState)(false);
-  const constrainedRef = (0, import_react27.useRef)(constrained);
+  const domRef = (0, import_react26.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react26.useState)(false);
+  const constrainedRef = (0, import_react26.useRef)(constrained);
   constrainedRef.current = constrained;
   const col = props.columns[props.columnIndex];
   const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
@@ -10657,7 +10657,7 @@ function useColumnResizeHandle(column, opts) {
     getComputed,
     actions
   } = useInfiniteTable();
-  const computeResizeForDiff = (0, import_react28.useCallback)(
+  const computeResizeForDiff = (0, import_react27.useCallback)(
     ({
       diff,
       shareSpaceOnResize
@@ -10701,7 +10701,7 @@ function useColumnResizeHandle(column, opts) {
     },
     [column]
   );
-  const onColumnResize = (0, import_react28.useCallback)(
+  const onColumnResize = (0, import_react27.useCallback)(
     ({
       diff,
       shareSpaceOnResize
@@ -10807,7 +10807,7 @@ function InfiniteTableHeaderCell(props) {
   const { onResize, height: height2, width, headerOptions, columnsMap } = props;
   const sortInfo = column.computedSortInfo;
   const header = column.header;
-  const ref = (0, import_react29.useCallback)(
+  const ref = (0, import_react28.useCallback)(
     (node) => {
       domRef.current = node;
       props.domRef?.(node);
@@ -10867,7 +10867,7 @@ function InfiniteTableHeaderCell(props) {
   };
   const MenuIconCmp = column.components?.MenuIcon || components2?.MenuIcon || MenuIcon;
   const menuIcon = /* @__PURE__ */ React43.createElement(MenuIconCmp, { ...menuIconProps });
-  const domRef = (0, import_react29.useRef)(null);
+  const domRef = (0, import_react28.useRef)(null);
   const initialRenderParam = {
     horizontalLayoutPageIndex,
     dragging,
@@ -11014,7 +11014,7 @@ function InfiniteTableHeaderCell(props) {
     }
     return all;
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -11160,7 +11160,7 @@ function InfiniteTableHeaderCell(props) {
   ), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = (0, import_react29.useContext)(
+  const result = (0, import_react28.useContext)(
     InfiniteTableHeaderCellContext
   );
   return result;
@@ -11273,24 +11273,24 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var React47 = __toESM(require("react"));
-var import_react32 = require("react");
+var import_react31 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var React46 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
 var React45 = __toESM(require("react"));
-var import_react31 = require("react");
+var import_react30 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
-var import_react30 = require("react");
+var import_react29 = require("react");
 var React44 = __toESM(require("react"));
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName8}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
-  const domRef = (0, import_react30.useRef)(null);
-  const [constrained, setConstrained] = (0, import_react30.useState)(false);
-  const constrainedRef = (0, import_react30.useRef)(constrained);
+  const domRef = (0, import_react29.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react29.useState)(false);
+  const constrainedRef = (0, import_react29.useRef)(constrained);
   constrainedRef.current = constrained;
   const col = props.groupColumns[0];
   if (!col) {
@@ -11391,7 +11391,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     actions
   } = useInfiniteTable();
   const lastColumnInGroup = groupColumns[groupColumns.length - 1];
-  const computeResizeForDiff = (0, import_react31.useCallback)(
+  const computeResizeForDiff = (0, import_react30.useCallback)(
     (diff) => {
       const state = getState();
       const { columnSizing, viewportReservedWidth, bodySize } = state;
@@ -11433,7 +11433,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     },
     [lastColumnInGroup]
   );
-  const onColumnResize = (0, import_react31.useCallback)(
+  const onColumnResize = (0, import_react30.useCallback)(
     (diff) => {
       const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
       actions.viewportReservedWidth = reservedWidth;
@@ -11536,7 +11536,7 @@ function InfiniteTableHeaderFn(props) {
     state: { headerBrain, headerOptions, showColumnFilters }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
-  const domRef = (0, import_react32.useRef)(null);
+  const domRef = (0, import_react31.useRef)(null);
   const domProps = {
     ref: domRef,
     className: join(
@@ -11547,7 +11547,7 @@ function InfiniteTableHeaderFn(props) {
     ),
     style: { ...style2, height: columnHeaderHeight }
   };
-  const renderCell = (0, import_react32.useCallback)(
+  const renderCell = (0, import_react31.useCallback)(
     (params) => {
       const {
         rowIndex,
@@ -11767,7 +11767,7 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var React49 = __toESM(require("react"));
-var import_react33 = require("react");
+var import_react32 = require("react");
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -11824,7 +11824,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
         ref.current = node;
       }
     }, []);
-    (0, import_react33.useEffect)(() => {
+    (0, import_react32.useEffect)(() => {
       const forceStyle = () => {
         setTimeout(() => {
           enforceStyle(domRef.current, defaultStyle);
@@ -14652,15 +14652,15 @@ var Indexer = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-var import_react35 = require("react");
+var import_react34 = require("react");
 
 // src/components/hooks/useEffectWithChanges.ts
-var import_react34 = require("react");
+var import_react33 = require("react");
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react34.useRef)({});
-  const oldValuesRef = (0, import_react34.useRef)({});
+  const prevRef = (0, import_react33.useRef)({});
+  const oldValuesRef = (0, import_react33.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react34.useRef)({});
+  const changesRef = (0, import_react33.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -14673,7 +14673,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react34.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     const changes2 = changesRef.current;
     let result = void 0;
     if (Object.keys(changes2).length !== 0) {
@@ -14691,7 +14691,7 @@ function useEffectWithObject(fn, deps) {
       useEffectDeps.push(deps[k]);
     }
   }
-  (0, import_react34.useEffect)(fn, useEffectDeps);
+  (0, import_react33.useEffect)(fn, useEffectDeps);
 }
 
 // src/utils/composeFunctions.ts
@@ -17784,12 +17784,12 @@ function useLoadData(options) {
     filterTypes,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react35.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react34.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react35.useRef)(scrollbars);
-  (0, import_react35.useEffect)(() => {
+  const scrollbarsRef = (0, import_react34.useRef)(scrollbars);
+  (0, import_react34.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -17799,7 +17799,7 @@ function useLoadData(options) {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!livePagination) {
       return;
     }
@@ -17812,7 +17812,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -17825,7 +17825,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -17836,7 +17836,7 @@ function useLoadData(options) {
       }
     }
   }, [scrollbars.vertical]);
-  const computedFilterValue = (0, import_react35.useMemo)(() => {
+  const computedFilterValue = (0, import_react34.useMemo)(() => {
     return computeFilterValueForRemote(filterValue, {
       filterTypes,
       filterMode
@@ -17851,7 +17851,7 @@ function useLoadData(options) {
     filterValue: shouldReloadData.filterValue ? computedFilterValue : null,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react35.useRef)(true);
+  const initialRef = (0, import_react34.useRef)(true);
   useLazyLoadRange(options, {
     sortInfo,
     groupBy,
@@ -17861,7 +17861,7 @@ function useLoadData(options) {
     cursorId: livePagination ? stateCursorId : null
   });
   const getMasterContext = useLatest(useMasterDetailContext());
-  const dataChangeTimestampsRef = (0, import_react35.useRef)([]);
+  const dataChangeTimestampsRef = (0, import_react34.useRef)([]);
   useEffectWithChanges(
     () => {
       const componentState2 = getComponentState();
@@ -17956,7 +17956,7 @@ function useLazyLoadRange(options, dependencies) {
     componentActions: actions,
     componentState
   } = options;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -17968,7 +17968,7 @@ function useLazyLoadRange(options, dependencies) {
     groupRowsState,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react35.useRef)(null);
+  const latestRenderRangeRef = (0, import_react34.useRef)(null);
   const loadRange = (renderRange, options2, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -17997,7 +17997,7 @@ function useLazyLoadRange(options, dependencies) {
       cache
     );
   };
-  const debouncedLoadRange = (0, import_react35.useMemo)(
+  const debouncedLoadRange = (0, import_react34.useMemo)(
     () => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }),
     [scrollStopDelayUpdatedByTable]
   );
@@ -18037,7 +18037,7 @@ function useLazyLoadRange(options, dependencies) {
       groupRowsState
     }
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -18842,7 +18842,7 @@ function getDataSourceStateRestoreForDetails(state) {
 }
 
 // src/components/DataSource/privateHooks/useDataSource.tsx
-var import_react36 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 function useDataSourceInternal(props) {
   const masterContext = useMasterDetailContext();
   const getDataSourceMasterContext = useLatest(masterContext);
@@ -18852,7 +18852,7 @@ function useDataSourceInternal(props) {
   const { componentActions, componentState, assignState } = managedContextValue;
   componentState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
   const getState = useLatest(componentState);
-  const [api] = (0, import_react36.useState)(
+  const [api] = (0, import_react35.useState)(
     () => getDataSourceApi({ getState, actions: componentActions })
   );
   const contextValue = {
@@ -18866,28 +18866,28 @@ function useDataSourceInternal(props) {
   const getLatestManagedContextValue = useLatest(managedContextValue);
   const getLatestContextValue = useLatest(contextValue);
   const DataSourceContext = getDataSourceContext();
-  const DataSource2 = (0, import_react36.useCallback)(
+  const DataSource2 = (0, import_react35.useCallback)(
     ({ children }) => {
       if (typeof children === "function") {
         children = children(getState());
       }
-      return /* @__PURE__ */ import_react36.default.createElement(
+      return /* @__PURE__ */ import_react35.default.createElement(
         ContextComponent.Provider,
         {
           key,
           value: getLatestManagedContextValue()
         },
-        /* @__PURE__ */ import_react36.default.createElement(DataSourceContext.Provider, { value: getLatestContextValue() }, children)
+        /* @__PURE__ */ import_react35.default.createElement(DataSourceContext.Provider, { value: getLatestContextValue() }, children)
       );
     },
     [ContextComponent, isDetail, key]
   );
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     if (masterContext) {
       masterContext.registerDetail(contextValue);
     }
   }, []);
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     return () => {
       const state = getState();
       state.onCleanup(state);
@@ -18911,7 +18911,7 @@ function useDataSourceInternal(props) {
     componentActions,
     getComponentState: getState
   });
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     componentState.onDataArrayChange?.(
       componentState.originalDataArray,
       componentState.originalDataArrayChangedInfo
@@ -18933,7 +18933,7 @@ function useDataSourceInternal(props) {
       });
     }
   }, [componentState.originalDataArrayChangedInfo]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     componentState.onReady?.(api);
   }, []);
   return {
@@ -20867,7 +20867,7 @@ function getImperativeApi(context) {
 }
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react37 = require("react");
+var import_react36 = require("react");
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   const { includeHeader, columnsToResize, columnsToSkip } = options;
@@ -20938,11 +20938,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useManagedComponentState();
-  const [refreshId, setRefreshId] = (0, import_react37.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react36.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react37.useRef)(null);
-  (0, import_react37.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -20955,7 +20955,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (theKey == null) {
       return;
     }
@@ -21000,8 +21000,8 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
+var import_react38 = require("react");
 var import_react39 = require("react");
-var import_react40 = require("react");
 var React54 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -21045,7 +21045,7 @@ var React53 = __toESM(require("react"));
 var RowDetailRecipe = createRuntimeFn({ defaultClassName: "evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRegisterDetail.ts
-var import_react38 = require("react");
+var import_react37 = require("react");
 function restoreDetailStateForRowId(rowId, options) {
   const { masterState, detailContext } = options;
   const detailDataSourcesMap = masterState.detailDataSourcesStateToRestore;
@@ -21080,8 +21080,8 @@ function updateDetailStateToRestoreForRowId(rowId, options) {
   masterActions.detailDataSourcesStateToRestore = cacheMap;
 }
 function useCurrentRowCache(rowId, rowDetailsCache) {
-  const cacheCalledByRowDetailRenderer = (0, import_react38.useRef)(false);
-  const currentRowCache = (0, import_react38.useMemo)(() => {
+  const cacheCalledByRowDetailRenderer = (0, import_react37.useRef)(false);
+  const currentRowCache = (0, import_react37.useMemo)(() => {
     return {
       getRowId: () => rowId,
       add: (value) => {
@@ -21106,7 +21106,7 @@ function useRegisterDetail(props) {
   } = useDataSourceContextValue();
   const { getState: getMasterState } = useInfiniteTable();
   const { currentRowCache, cacheCalledByRowDetailRenderer } = useCurrentRowCache(rowInfo.id, rowDetailsCache);
-  const masterDetailContextValue = (0, import_react38.useMemo)(() => {
+  const masterDetailContextValue = (0, import_react37.useMemo)(() => {
     const shouldRestoreState = getMasterDataSourceState().detailDataSourcesStateToRestore.has(
       rowInfo.id
     ) && currentRowCache.has();
@@ -21255,18 +21255,18 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = (0, import_react40.useRef)(0);
-  (0, import_react40.useEffect)(() => {
+  const scrollTopMaxRef = (0, import_react39.useRef)(0);
+  (0, import_react39.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return brain.onRenderRangeChange((range) => {
       getState().onRenderRangeChange?.(range);
     });
   }, [brain]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2, scrollLeft: scrollLeft2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -21306,13 +21306,13 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom, onScrollStop]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
     actions.ready = true;
   }, [!!bodySize.height]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!ready) {
     }
     const { onReady } = getState();
@@ -21321,10 +21321,10 @@ function useCellRendering(param) {
     }
   }, [ready]);
   const [, rerender] = useRerender();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = (0, import_react40.useCallback)(
+  const renderCell = (0, import_react39.useCallback)(
     (params) => {
       const {
         rowIndex,
@@ -21401,7 +21401,7 @@ function useCellRendering(param) {
       cellStyle
     ]
   );
-  const renderDetailRow = (0, import_react39.useMemo)(() => {
+  const renderDetailRow = (0, import_react38.useMemo)(() => {
     if (!isRowDetailsExpanded) {
       return void 0;
     }
@@ -21442,7 +21442,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react49 = require("react");
+var import_react48 = require("react");
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -21667,10 +21667,10 @@ var MultiRowSelector = class {
 };
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-var import_react41 = require("react");
+var import_react40 = require("react");
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = (0, import_react41.useMemo)(() => {
+  const rowspan = (0, import_react40.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter(
       (col) => typeof col.rowspan === "function"
     );
@@ -21698,10 +21698,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react42 = require("react");
+var import_react41 = require("react");
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = (0, import_react42.useCallback)(
+  const columnSize = (0, import_react41.useCallback)(
     (index) => {
       const column = columns[index];
       if (false) {
@@ -21715,10 +21715,10 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react45 = require("react");
+var import_react44 = require("react");
 
 // src/components/InfiniteTable/state/getInitialState.ts
-var import_react43 = require("react");
+var import_react42 = require("react");
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -22108,7 +22108,7 @@ function initSetupState2({
     debugId,
     !!wrapRowsHorizontally
   );
-  const domRef = (0, import_react43.createRef)();
+  const domRef = (0, import_react42.createRef)();
   return {
     renderer,
     onRenderUpdater,
@@ -22130,12 +22130,12 @@ function initSetupState2({
     brain,
     headerBrain,
     domRef,
-    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)(),
+    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)(),
     onColumnMenuClick: buildSubscriptionCallback(),
     cellContextMenu: buildSubscriptionCallback(),
     contextMenu: buildSubscriptionCallback(),
@@ -22505,14 +22505,14 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react44 = require("react");
+var import_react43 = require("react");
 function useToggleGroupRow() {
   const {
     getState: getDataSourceState,
     componentActions: dataSourceActions,
     getDataSourceMasterContext
   } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react44.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react43.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -22552,7 +22552,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  return (0, import_react45.useMemo)(() => getGroupByMap(groupBy), [groupBy]);
+  return (0, import_react44.useMemo)(() => getGroupByMap(groupBy), [groupBy]);
 }
 function useColumnsWhen() {
   const {
@@ -22566,13 +22566,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useManagedComponentState();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -22655,7 +22655,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
   }
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = isTree ? void 0 : computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -22686,7 +22686,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useManagedComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -22757,7 +22757,7 @@ function useHideColumns(groupByMap) {
       groupRenderStrategy
     }
   } = useManagedComponentState();
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -22790,7 +22790,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -22960,7 +22960,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedColumns.ts
-var import_react46 = require("react");
+var import_react45 = require("react");
 var useComputedColumns = ({
   columns,
   bodySize,
@@ -23013,7 +23013,7 @@ var useComputedColumns = ({
     computedColumnsMap,
     computedColumnsMapInInitialOrder,
     fieldsToColumn
-  } = (0, import_react46.useMemo)(() => {
+  } = (0, import_react45.useMemo)(() => {
     return getComputedColumns({
       columns,
       scrollbarWidth: scrollbarWidth2,
@@ -23100,7 +23100,7 @@ var useComputedColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useComputedRowHeight.ts
-var import_react47 = require("react");
+var import_react46 = require("react");
 var RowSizeCache = class {
   constructor() {
     this.rowHeight = /* @__PURE__ */ new Map();
@@ -23184,7 +23184,7 @@ function getComputedRowHeight(param, cache) {
   return result;
 }
 function useComputedRowHeight(param) {
-  return (0, import_react47.useMemo)(() => {
+  return (0, import_react46.useMemo)(() => {
     const computedRowSizeCache = new RowSizeCache();
     const computedRowHeight = getComputedRowHeight(param, computedRowSizeCache);
     return {
@@ -23201,7 +23201,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-var import_react48 = require("react");
+var import_react47 = require("react");
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -23209,8 +23209,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useManagedComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = (0, import_react48.useState)(INITIAL_SCROLLBARS);
-  (0, import_react48.useEffect)(() => {
+  const [scrollbars, setScrollbars] = (0, import_react47.useState)(INITIAL_SCROLLBARS);
+  (0, import_react47.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -23219,7 +23219,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  (0, import_react48.useLayoutEffect)(() => {
+  (0, import_react47.useLayoutEffect)(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -23258,7 +23258,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react49.useState)(() => {
+  (0, import_react48.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight2) => {
       if (rowHeight2) {
         componentActions.rowHeight = rowHeight2;
@@ -23285,7 +23285,7 @@ function useComputed() {
       }
     );
   });
-  (0, import_react49.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
@@ -23353,7 +23353,7 @@ function useComputed() {
   const scrollbars = useScrollbars(brain);
   const computedPinnedStartOverflow = computedPinnedStartWidth ? computedPinnedStartColumnsWidth > computedPinnedStartWidth : false;
   const computedPinnedEndOverflow = computedPinnedEndWidth ? computedPinnedEndColumnsWidth > computedPinnedEndWidth : false;
-  const [multiRowSelector] = (0, import_react49.useState)(() => {
+  const [multiRowSelector] = (0, import_react48.useState)(() => {
     const multiRowSelector2 = new MultiRowSelector({
       isRowDisabledAt: (index) => {
         const dataItem = getDataSourceState().dataArray[index];
@@ -23367,7 +23367,7 @@ function useComputed() {
     return multiRowSelector2;
   });
   const getComputedVisibleColumns = useLatest(computedVisibleColumns);
-  const [multiCellSelector] = (0, import_react49.useState)(() => {
+  const [multiCellSelector] = (0, import_react48.useState)(() => {
     return new MultiCellSelector({
       getPrimaryKeyByIndex: dataSourceApi.getPrimaryKeyByIndex,
       getColumnIdByIndex: (colIndex) => {
@@ -23416,7 +23416,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react50 = require("react");
+var import_react49 = require("react");
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -23587,13 +23587,13 @@ var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
   const masterContext = useMasterDetailContext();
   const isDetail = !!masterContext;
-  const valid = (0, import_react50.useMemo)(() => {
+  const valid = (0, import_react49.useMemo)(() => {
     if (isDetail) {
       return true;
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.2.2"
+      version: "6.2.4"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23604,18 +23604,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-var import_react51 = require("react");
+var import_react50 = require("react");
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
-  const didScrollRef = (0, import_react51.useRef)(false);
-  const rafId = (0, import_react51.useRef)(null);
-  (0, import_react51.useEffect)(() => {
+  const didScrollRef = (0, import_react50.useRef)(false);
+  const rafId = (0, import_react50.useRef)(null);
+  (0, import_react50.useEffect)(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23643,18 +23643,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-var import_react52 = require("react");
+var import_react51 = require("react");
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
-  const didScrollRef = (0, import_react52.useRef)(false);
-  const rafId = (0, import_react52.useRef)(null);
-  (0, import_react52.useEffect)(() => {
+  const didScrollRef = (0, import_react51.useRef)(false);
+  const rafId = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  (0, import_react52.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23683,7 +23683,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-var import_react53 = require("react");
+var import_react52 = require("react");
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -24363,7 +24363,7 @@ function useEventHandlersContext() {
     componentActions: dataSourceActions,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const context = (0, import_react53.useMemo)(() => {
+  const context = (0, import_react52.useMemo)(() => {
     const context2 = {
       getComputed,
       getDataSourceMasterContext,
@@ -24394,7 +24394,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  (0, import_react53.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -24439,7 +24439,7 @@ function handleDOMEvents() {
 }
 function subscribeToDOMEvents() {
   const { getState } = useInfiniteTable();
-  const onKeyDown2 = (0, import_react53.useCallback)((event) => {
+  const onKeyDown2 = (0, import_react52.useCallback)((event) => {
     getState().keyDown(event);
   }, []);
   return { onKeyDown: onKeyDown2 };
@@ -24450,11 +24450,11 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-var import_react58 = require("react");
+var import_react57 = require("react");
 
 // src/components/hooks/useOverlay/index.tsx
 var React56 = __toESM(require("react"));
-var import_react54 = require("react");
+var import_react53 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/utils/pageGeometry/Point.ts
@@ -24842,7 +24842,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React56.useRef(null);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignNode(nodeRef.current, handle);
@@ -24853,7 +24853,7 @@ function OverlayContent(props) {
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
-      ref: (0, import_react54.useCallback)((node) => {
+      ref: (0, import_react53.useCallback)((node) => {
         if (node) {
           alignNode(node, props);
         }
@@ -24902,8 +24902,8 @@ async function alignNode(node, params) {
   }
 }
 function useOverlayPortal(content, portalContainer) {
-  const [container, setContainer] = (0, import_react54.useState)(null);
-  (0, import_react54.useLayoutEffect)(() => {
+  const [container, setContainer] = (0, import_react53.useState)(null);
+  (0, import_react53.useLayoutEffect)(() => {
     async function getContainer() {
       const container2 = portalContainer ? await retrieveElement(portalContainer) : null;
       if (container2 != null) {
@@ -24949,10 +24949,10 @@ globalThis.allhandles = {};
 globalThis.thehandles = {};
 function useOverlay(params) {
   const rootParams = params;
-  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 [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 contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
@@ -24966,7 +24966,7 @@ function useOverlay(params) {
     getContentForPortal(),
     params.portalContainer
   );
-  const showOverlay = (0, import_react54.useCallback)(
+  const showOverlay = (0, import_react53.useCallback)(
     (content, params2) => {
       const id = params2.id || getIdForReactOnlyChild(content) || getChangeDetect();
       const key = `${id}`;
@@ -25207,7 +25207,7 @@ var deriveStateFromProps2 = (params) => {
 
 // src/components/Menu/Menu.tsx
 var React59 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react56 = require("react");
 
 // src/utils/pageGeometry/Triangle.ts
 var Triangle = class extends ConvexPoly {
@@ -25426,24 +25426,24 @@ var MenuTriangleContext = class {
 };
 
 // src/components/Menu/MenuContext.ts
-var import_react55 = require("react");
-var MenuContext = (0, import_react55.createContext)(null);
+var import_react54 = require("react");
+var MenuContext = (0, import_react54.createContext)(null);
 function useMenuContext() {
-  const contextValue = (0, import_react55.useContext)(MenuContext);
+  const contextValue = (0, import_react54.useContext)(MenuContext);
   return contextValue;
 }
 
 // src/components/hooks/useMounted.ts
-var import_react56 = require("react");
+var import_react55 = require("react");
 function useMounted() {
-  let mountedRef = (0, import_react56.useRef)(true);
-  (0, import_react56.useEffect)(() => {
+  let mountedRef = (0, import_react55.useRef)(true);
+  (0, import_react55.useEffect)(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const isMounted = (0, import_react56.useCallback)(() => mountedRef.current, []);
+  const isMounted = (0, import_react55.useCallback)(() => mountedRef.current, []);
   return isMounted;
 }
 
@@ -25536,7 +25536,7 @@ function useSubmenus({
   onItemActivate
 }) {
   const { getState } = useMenuContext();
-  const [{ onItemEnter, onItemLeave }] = (0, import_react57.useState)(() => {
+  const [{ onItemEnter, onItemLeave }] = (0, import_react56.useState)(() => {
     return new MenuTriangleContext({
       parentMenuId: getState().parentMenuId,
       onItemActivate: (itemKey) => {
@@ -25567,8 +25567,8 @@ function useSubmenus({
     }).getHandlers();
   });
   return {
-    onItemEnter: (0, import_react57.useCallback)(onItemEnter, []),
-    onItemLeave: (0, import_react57.useCallback)(onItemLeave, [])
+    onItemEnter: (0, import_react56.useCallback)(onItemEnter, []),
+    onItemLeave: (0, import_react56.useCallback)(onItemLeave, [])
   };
 }
 function MenuComponent(props) {
@@ -25593,16 +25593,16 @@ function MenuComponent(props) {
     componentActions,
     getState
   } = useMenuContext();
-  const setKeyboardActiveItemKey = (0, import_react57.useCallback)((key) => {
+  const setKeyboardActiveItemKey = (0, import_react56.useCallback)((key) => {
     componentActions.keyboardActiveItemKey = key;
   }, []);
-  const setActiveItemKey = (0, import_react57.useCallback)((key) => {
+  const setActiveItemKey = (0, import_react56.useCallback)((key) => {
     componentActions.activeItemKey = key;
   }, []);
   const isMounted = useMounted();
-  const [submenuApi, setSubmenuApi] = (0, import_react57.useState)(null);
+  const [submenuApi, setSubmenuApi] = (0, import_react56.useState)(null);
   let renderedChildren = null;
-  (0, import_react57.useLayoutEffect)(() => {
+  (0, import_react56.useLayoutEffect)(() => {
     const { runtimeItems: runtimeItems2 } = getState();
     const activeItem = runtimeItems2.filter(
       (item) => item.type === "item" && activeItemKey === item.key
@@ -25812,7 +25812,7 @@ function MenuComponent(props) {
   function onMenuBlur() {
     componentActions.focused = false;
   }
-  const onMenuFocus = (0, import_react57.useCallback)(function() {
+  const onMenuFocus = (0, import_react56.useCallback)(function() {
     componentActions.focused = true;
     setTimeout(() => {
       if (shouldSelectFirstItemOnFocus.current && domRef.current && domRef.current === document.activeElement && getState().keyboardActiveItemKey == null) {
@@ -25822,12 +25822,12 @@ function MenuComponent(props) {
       }
     });
   }, []);
-  const shouldSelectFirstItemOnFocus = (0, import_react57.useRef)(true);
-  const hideAll = (0, import_react57.useCallback)(() => {
+  const shouldSelectFirstItemOnFocus = (0, import_react56.useRef)(true);
+  const hideAll = (0, import_react56.useCallback)(() => {
     const state = getState();
     state.onHideIntent?.(state);
   }, [getState]);
-  const [api] = (0, import_react57.useState)(() => {
+  const [api] = (0, import_react56.useState)(() => {
     const result2 = {
       hideMenu: hideAll,
       focus: () => {
@@ -25846,7 +25846,7 @@ function MenuComponent(props) {
     };
     return result2;
   });
-  const refCallback = (0, import_react57.useCallback)((node) => {
+  const refCallback = (0, import_react56.useCallback)((node) => {
     if (node) {
       domRef.current = node;
       onShow?.(getState(), api);
@@ -26249,7 +26249,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -26264,7 +26264,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  (0, import_react58.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -26299,7 +26299,7 @@ function useColumnMenu() {
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
 var React63 = __toESM(require("react"));
-var import_react59 = require("react");
+var import_react58 = require("react");
 var style = {
   width: 0,
   height: 0,
@@ -26319,7 +26319,7 @@ function FocusDetect() {
   } = useInfiniteTable();
   const { getState: getDataSourceState, getDataSourceMasterContext } = useDataSourceContextValue();
   const { focusDetectDOMRef } = getState();
-  const onFocus = (0, import_react59.useCallback)(async () => {
+  const onFocus = (0, import_react58.useCallback)(async () => {
     const context = {
       getDataSourceState,
       getDataSourceMasterContext,
@@ -26344,13 +26344,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-var import_react60 = require("react");
+var import_react59 = require("react");
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  (0, import_react60.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -26372,7 +26372,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  (0, import_react60.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -26396,7 +26396,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell?.active;
   const prevActive = usePrevious(active);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -26409,7 +26409,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  (0, import_react60.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
       const { value, rowIndex, columnId, initialValue } = editingCell2;
@@ -26434,7 +26434,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  (0, import_react60.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -26467,7 +26467,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-var import_react61 = require("react");
+var import_react60 = require("react");
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 var React66 = __toESM(require("react"));
@@ -26606,7 +26606,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react61.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -26642,7 +26642,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -26669,7 +26669,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-var import_react62 = require("react");
+var import_react61 = require("react");
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 var React68 = __toESM(require("react"));
@@ -26836,7 +26836,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react62.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -26887,7 +26887,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26923,7 +26923,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  (0, import_react62.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -26972,7 +26972,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26999,17 +26999,17 @@ function useTableContextMenu() {
 }
 
 // src/components/InfiniteTable/components/HScrollSyncContent.tsx
-var import_react64 = require("react");
+var import_react63 = require("react");
 var React69 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
-var import_react63 = require("react");
+var import_react62 = require("react");
 function useGridScroll(onScroll, deps) {
   const {
     state: { brain }
   } = useInfiniteTable();
-  const memoizedOnScroll = (0, import_react63.useCallback)(onScroll, deps);
-  (0, import_react63.useEffect)(() => {
+  const memoizedOnScroll = (0, import_react62.useCallback)(onScroll, deps);
+  (0, import_react62.useEffect)(() => {
     const removeOnScroll = brain.onScroll(memoizedOnScroll);
     return removeOnScroll;
   }, [brain, memoizedOnScroll]);
@@ -27021,7 +27021,7 @@ var HScrollSyncContentCls = "yzx0vj0";
 // src/components/InfiniteTable/components/HScrollSyncContent.tsx
 function HScrollSyncContent(props) {
   const { width, maxWidth, minWidth, scrollable, ...domProps } = props;
-  const domRef = (0, import_react64.useRef)(null);
+  const domRef = (0, import_react63.useRef)(null);
   useGridScroll(
     (scrollPos) => {
       if (domRef.current && scrollable !== false) {
@@ -27079,12 +27079,12 @@ function useVisibleColumnSizes() {
 var DEBUG_NAME = "InfiniteTable";
 
 // src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
-var import_react65 = require("react");
+var import_react64 = require("react");
 function useToggleWrapRowsHorizontally() {
   const { state, getState, actions } = useInfiniteTable();
   const { wrapRowsHorizontally } = state;
   const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
       const { brain, headerBrain, renderer, onRenderUpdater } = getState();
       brain.destroy();
@@ -27101,12 +27101,12 @@ function useToggleWrapRowsHorizontally() {
 }
 
 // src/components/InfiniteTable/hooks/useHorizontalLayout.ts
-var import_react66 = require("react");
+var import_react65 = require("react");
 function useHorizontalLayout() {
   const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTable();
   const { groupBy, isTree } = getDataSourceState();
   const { brain, wrapRowsHorizontally, repeatWrappedGroupRows } = getState();
-  (0, import_react66.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!wrapRowsHorizontally) {
       return;
     }
@@ -27819,7 +27819,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-var import_react67 = require("react");
+var import_react66 = require("react");
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -27981,21 +27981,21 @@ var WeakFixedSizeSet = _WeakFixedSizeSet;
 WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-var import_react68 = require("react");
+var import_react67 = require("react");
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
 var useEffectWhenSameDeps = (callback, deps) => {
-  const depsRef = (0, import_react68.useRef)(deps);
+  const depsRef = (0, import_react67.useRef)(deps);
   const sameDeps = isSameDeps(deps, depsRef.current);
-  const isInitialRef = (0, import_react68.useRef)(true);
+  const isInitialRef = (0, import_react67.useRef)(true);
   depsRef.current = deps;
-  const effectDepsRef = (0, import_react68.useRef)(["same"]);
+  const effectDepsRef = (0, import_react67.useRef)(["same"]);
   const effectDeps = sameDeps ? [Date.now()] : effectDepsRef.current;
   effectDepsRef.current = effectDeps;
-  const callbackRef = (0, import_react68.useRef)(callback);
+  const callbackRef = (0, import_react67.useRef)(callback);
   callbackRef.current = callback;
-  (0, import_react68.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -28005,7 +28005,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-var import_react69 = require("react");
+var import_react68 = require("react");
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -28016,26 +28016,26 @@ var isSameDeps2 = (deps, prevDeps, compare) => {
 };
 var useEffectWhen = (callback, options) => {
   const { same: depsForSame, different: depsForDifferent, compare } = options;
-  const sameDepsRef = (0, import_react69.useRef)(depsForSame);
-  const differentDepsRef = (0, import_react69.useRef)(depsForDifferent);
+  const sameDepsRef = (0, import_react68.useRef)(depsForSame);
+  const differentDepsRef = (0, import_react68.useRef)(depsForDifferent);
   const sameRespected = isSameDeps2(depsForSame, sameDepsRef.current, compare);
   const differentRespected = !isSameDeps2(
     depsForDifferent,
     differentDepsRef.current,
     compare
   );
-  const isInitialRef = (0, import_react69.useRef)(true);
+  const isInitialRef = (0, import_react68.useRef)(true);
   sameDepsRef.current = depsForSame;
   differentDepsRef.current = depsForDifferent;
-  const effectDepsRef = (0, import_react69.useRef)(["same"]);
+  const effectDepsRef = (0, import_react68.useRef)(["same"]);
   const effectDeps = sameRespected && differentRespected ? [Date.now()] : effectDepsRef.current;
   effectDepsRef.current = effectDeps;
-  const callbackRef = (0, import_react69.useRef)(callback);
+  const callbackRef = (0, import_react68.useRef)(callback);
   callbackRef.current = callback;
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  (0, import_react69.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     if (isInitialRef.current) {
       return;
     }