@infinite-table/infinite-react 3.2.3 → 3.2.5

package/index.dev.js

@@ -149,6 +149,7 @@ __export(src_exports, {
   useInfiniteColumnEditor: () => useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor: () => useInfiniteColumnFilterEditor,
   useInfiniteHeaderCell: () => useInfiniteHeaderCell,
+  useMasterRowInfo: () => useMasterRowInfo,
   useOverlay: () => useOverlay,
   useOverlayPortal: () => useOverlayPortal,
   useRowInfoReducers: () => useRowInfoReducers
@@ -170,7 +171,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React66 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -4841,6 +4842,7 @@ var position = { relative: "utilities_position_relative__16lm1iw1", absolute: "u
 var top = { "0": "utilities_top_0__16lm1iw1c", "100%": "utilities_top_100%__16lm1iw1d" };
 var transformTranslateZero = "utilities_transformTranslateZero__16lm1iwe";
 var userSelect = { none: "utilities_userSelect_none__16lm1iw17" };
+var visibility = { visible: "utilities_visibility_visible__16lm1iw20", hidden: "utilities_visibility_hidden__16lm1iw21" };
 var zIndex = { "1": "utilities_zIndex_1__16lm1iwo", "10": "utilities_zIndex_10__16lm1iwp", "100": "utilities_zIndex_100__16lm1iwq", "1000": "utilities_zIndex_1000__16lm1iwr", "10000": "utilities_zIndex_10000__16lm1iws", "100000": "utilities_zIndex_100000__16lm1iwt", "1000000": "utilities_zIndex_1000000__16lm1iwu", "10000000": "utilities_zIndex_10000000__16lm1iwv", "1k": "utilities_zIndex_1k__16lm1iww", "10k": "utilities_zIndex_10k__16lm1iwx", "100k": "utilities_zIndex_100k__16lm1iwy" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
@@ -5945,7 +5947,7 @@ var getComputedColumns = ({
       contentFocusable: colType.contentFocusable,
       renderMenuIcon: colType.renderMenuIcon,
       renderSortIcon: colType.renderSortIcon,
-      renderRowDetailsIcon: colType.renderRowDetailsIcon,
+      renderRowDetailIcon: colType.renderRowDetailIcon,
       renderSelectionCheckBox: colType.renderSelectionCheckBox,
       renderHeaderSelectionCheckBox: colType.renderHeaderSelectionCheckBox,
       headerStyle: colType.headerStyle,
@@ -7953,7 +7955,7 @@ function getColumnRenderingParams(options) {
     renderFunctions: {
       renderGroupIcon: column.renderGroupIcon || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderGroupIcon),
       renderSelectionCheckBox: column.renderSelectionCheckBox,
-      renderRowDetailsIcon: column.renderRowDetailsIcon,
+      renderRowDetailIcon: column.renderRowDetailIcon,
       renderValue: column.renderValue || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderValue),
       renderGroupValue: column.renderGroupValue || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderGroupValue),
       renderLeafValue: column.renderLeafValue || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderLeafValue)
@@ -8266,7 +8268,7 @@ var { rootClassName: rootClassName6 } = internalProps;
 var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
 var InfiniteTableColumnCellContext = React37.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
-var defaultRenderRowDetailsIcon = (params) => {
+var defaultRenderRowDetailIcon = (params) => {
   const { toggleCurrentRowDetails, rowDetailState } = params;
   return /* @__PURE__ */ React37.createElement(
     ExpanderIcon,
@@ -8482,21 +8484,21 @@ function InfiniteTableColumnCellFn(props) {
           );
         }
       }
-      if (renderFunctions.renderRowDetailsIcon) {
+      if (renderFunctions.renderRowDetailIcon) {
         renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
-            render: defaultRenderRowDetailsIcon,
+            render: defaultRenderRowDetailIcon,
             renderParam: __spreadProps(__spreadValues({}, renderParam), {
               renderBag: __spreadValues({}, renderParam.renderBag)
             })
           }
         );
-        if (typeof renderFunctions.renderRowDetailsIcon === "function") {
+        if (typeof renderFunctions.renderRowDetailIcon === "function") {
           renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
-              render: renderFunctions.renderRowDetailsIcon,
+              render: renderFunctions.renderRowDetailIcon,
               renderParam: __spreadProps(__spreadValues({}, renderParam), {
                 renderBag: __spreadValues({}, renderParam.renderBag)
               })
@@ -15084,12 +15086,21 @@ function DataSourceCmp({
 }
 function DataSource(props) {
   const masterContext = useMasterDetailContext();
-  return /* @__PURE__ */ React51.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React51.createElement(DataSourceCmp, { children: props.children, isDetail: !!masterContext }));
+  const isDetail = !!masterContext;
+  const key = isDetail ? masterContext.masterRowInfo.id : "master";
+  return /* @__PURE__ */ React51.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React51.createElement(DataSourceCmp, { children: props.children, isDetail }));
 }
 function useRowInfoReducers() {
   const { rowInfoReducerResults } = useDataSource();
   return rowInfoReducerResults;
 }
+function useMasterRowInfo() {
+  const context = useMasterDetailContext();
+  if (!context) {
+    return void 0;
+  }
+  return context.masterRowInfo;
+}
 
 // src/components/InfiniteTable/api/realignColumnContextMenu.ts
 function realignColumnContextMenu(param) {
@@ -16527,6 +16538,7 @@ function useRegisterDetail(props) {
     getState: getMasterDataSourceState,
     componentActions: masterActions
   } = useDataSourceContextValue();
+  const { getState: getMasterState } = useInfiniteTable();
   const { currentRowCache, cacheCalledByRowDetailRenderer } = useCurrentRowCache(rowInfo.id, rowDetailsCache);
   const masterDetailContextValue = (0, import_react38.useMemo)(() => {
     const shouldRestoreState = getMasterDataSourceState().detailDataSourcesStateToRestore.has(
@@ -16576,6 +16588,8 @@ function useRegisterDetail(props) {
     };
   }, [rowInfo.id, currentRowCache]);
   masterDetailContextValue.masterRowInfo = rowInfo;
+  masterDetailContextValue.getMasterDataSourceState = getMasterDataSourceState;
+  masterDetailContextValue.getMasterState = getMasterState;
   return { masterDetailContextValue, currentRowCache };
 }
 
@@ -16802,7 +16816,7 @@ function useCellRendering(param) {
       const dataArray2 = getData();
       const rowInfo = dataArray2[rowIndex];
       if (!rowInfo || !isRowDetailsExpanded(rowInfo) || !computedRowSizeCacheForDetails) {
-        return null;
+        return /* @__PURE__ */ React53.createElement("div", { ref: domRef, className: visibility.hidden });
       }
       const { rowDetailHeight: rowDetailHeight2, rowHeight: rowHeight2 } = computedRowSizeCacheForDetails.getSize(rowIndex);
       return /* @__PURE__ */ React53.createElement(
@@ -17255,6 +17269,14 @@ function toMap(mapOrObject, weakMapCache) {
   return result;
 }
 
+// src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
+var React54 = __toESM(require("react"));
+function getRowDetailRendererFromComponent(RowDetail) {
+  return (rowInfo, cache) => {
+    return /* @__PURE__ */ React54.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
+  };
+}
+
 // src/components/InfiniteTable/state/getInitialState.ts
 function createRenderer2(brain) {
   const renderer = new ReactHeadlessTableRenderer(brain);
@@ -17386,7 +17408,6 @@ var forwardProps4 = (setupState) => {
     columnDefaultEditable: 1,
     columnDefaultFilterable: 1,
     columnDefaultSortable: 1,
-    rowDetailRenderer: 1,
     rowStyle: 1,
     cellStyle: 1,
     rowProps: 1,
@@ -17501,7 +17522,7 @@ function getGroupByMap(groupBy) {
 }
 var weakMap = /* @__PURE__ */ new WeakMap();
 var mapPropsToState = (params) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
   const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
@@ -17512,7 +17533,17 @@ var mapPropsToState = (params) => {
     groupColumn: props.groupColumn
   });
   let rowDetailState = void 0;
-  if (props.rowDetailRenderer) {
+  let rowDetailRenderer = props.rowDetailRenderer;
+  const RowDetailComponent = (_a = props.components) == null ? void 0 : _a.RowDetail;
+  if (!rowDetailRenderer && RowDetailComponent) {
+    let rowDetailRendererFromComponent = weakMap.get(RowDetailComponent);
+    if (!rowDetailRendererFromComponent) {
+      rowDetailRendererFromComponent = getRowDetailRendererFromComponent(RowDetailComponent);
+      weakMap.set(RowDetailComponent, rowDetailRendererFromComponent);
+    }
+    rowDetailRenderer = rowDetailRendererFromComponent;
+  }
+  if (rowDetailRenderer) {
     rowDetailState = props.rowDetailState || state.rowDetailState || props.defaultRowDetailState;
     if (rowDetailState && !(rowDetailState instanceof RowDetailState)) {
       rowDetailState = new RowDetailState(rowDetailState);
@@ -17534,19 +17565,20 @@ var mapPropsToState = (params) => {
       }
     }
   }
-  const isRowDetailEnabled = !props.rowDetailRenderer ? false : props.isRowDetailEnabled || true;
+  const isRowDetailEnabled = !rowDetailRenderer ? false : props.isRowDetailEnabled || true;
   return {
+    rowDetailRenderer,
     rowDetailState,
     isRowDetailExpanded,
     isRowDetailEnabled,
-    showColumnFilters: (_a = props.showColumnFilters) != null ? _a : !!parentState.filterValue,
+    showColumnFilters: (_b = props.showColumnFilters) != null ? _b : !!parentState.filterValue,
     controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,
     computedColumns,
     initialColumns: props.columns,
-    keyboardNavigation: (_b = props.keyboardNavigation) != null ? _b : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
-    columnHeaderCssEllipsis: (_d = (_c = props.columnHeaderCssEllipsis) != null ? _c : props.columnCssEllipsis) != null ? _d : true,
+    keyboardNavigation: (_c = props.keyboardNavigation) != null ? _c : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
+    columnHeaderCssEllipsis: (_e = (_d = props.columnHeaderCssEllipsis) != null ? _d : props.columnCssEllipsis) != null ? _e : true,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
     computedColumnGroups,
@@ -18731,7 +18763,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react53.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.2.3"
+      version: "3.2.5"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19630,7 +19662,7 @@ function useDOMEventHandlers() {
 var import_react61 = require("react");
 
 // src/components/hooks/useOverlay/index.tsx
-var React54 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 var import_react57 = require("react");
 var import_react_dom2 = require("react-dom");
 
@@ -20016,10 +20048,10 @@ function retrieveElement(elementGetter) {
   });
 }
 function DefaultOverlayPortal(props) {
-  return /* @__PURE__ */ React54.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
+  return /* @__PURE__ */ React55.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
 }
 function OverlayContent(props) {
-  const nodeRef = React54.useRef(null);
+  const nodeRef = React55.useRef(null);
   (0, import_react57.useEffect)(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
@@ -20027,7 +20059,7 @@ function OverlayContent(props) {
       }
     });
   }, [props.realign]);
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
@@ -20098,22 +20130,22 @@ function useOverlayPortal(content, portalContainer) {
   }, [portalContainer]);
   return portalContainer ? container ? (0, import_react_dom2.createPortal)(content, container) : (
     // we're probably still fetching the container
-    /* @__PURE__ */ React54.createElement(React54.Fragment, null)
-  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React54.createElement(DefaultOverlayPortal, null, content);
+    /* @__PURE__ */ React55.createElement(React55.Fragment, null)
+  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React55.createElement(DefaultOverlayPortal, null, content);
 }
 function getIdForReactOnlyChild(children) {
-  if (React54.Children.count(children) === 1) {
-    const child = React54.Children.only(children);
-    if (React54.isValidElement(child)) {
+  if (React55.Children.count(children) === 1) {
+    const child = React55.Children.only(children);
+    if (React55.isValidElement(child)) {
       return child.props.id || child.key;
     }
   }
   return null;
 }
 function injectPortalContainerAndConstrainInMenuChild(children, portalContainer, constrainTo) {
-  if (React54.Children.count(children) === 1) {
-    const child = React54.Children.only(children);
-    if (React54.isValidElement(child) && child.props[propToIdentifyMenu]) {
+  if (React55.Children.count(children) === 1) {
+    const child = React55.Children.only(children);
+    if (React55.isValidElement(child) && child.props[propToIdentifyMenu]) {
       const newProps = {};
       if (child.props.portalContainer === void 0) {
         newProps.portalContainer = portalContainer;
@@ -20121,7 +20153,7 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
       if (child.props.constrainTo === void 0) {
         newProps.constrainTo = constrainTo;
       }
-      return React54.cloneElement(child, newProps);
+      return React55.cloneElement(child, newProps);
     }
   }
   return children;
@@ -20137,7 +20169,7 @@ function useOverlay(params) {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
-        /* @__PURE__ */ React54.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
+        /* @__PURE__ */ React55.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
       );
     }
     return contentForPortal;
@@ -20182,7 +20214,7 @@ function useOverlay(params) {
     },
     [handles, rootParams.portalContainer, updateContent]
   );
-  React54.useEffect(() => {
+  React55.useEffect(() => {
     if (handleToRealign) {
       const handle = handles.get(handleToRealign);
       if (handle) {
@@ -20201,7 +20233,7 @@ function useOverlay(params) {
     handles.clear();
     updateContent();
   };
-  React54.useEffect(() => {
+  React55.useEffect(() => {
   }, []);
   return {
     portal,
@@ -20213,16 +20245,16 @@ function useOverlay(params) {
 }
 
 // src/components/InfiniteTable/utils/getMenuForColumn.tsx
-var React60 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 
 // src/components/Menu/index.tsx
-var React58 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 
 // src/components/Menu/getMenuState.tsx
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 
 // src/components/Menu/childrenToRuntimeItems.tsx
-var React55 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 
 // src/components/Menu/MenuCls.css.ts
 var MenuCls = "MenuCls_MenuCls__db3arf0 utilities_boxSizingBorderBox__16lm1iw0 utilities_position_relative__16lm1iw1 utilities_display_inlineGrid__16lm1iw16 utilities_flexFlow_column__16lm1iw1m utilities_margin_none__16lm1iw8";
@@ -20233,7 +20265,7 @@ var MenuSeparatorCls = "MenuCls_MenuSeparatorCls__db3arfd";
 // src/components/Menu/childrenToRuntimeItems.tsx
 var SEPARATOR = "-";
 function MenuSeparator() {
-  return /* @__PURE__ */ React55.createElement("hr", { className: MenuSeparatorCls });
+  return /* @__PURE__ */ React56.createElement("hr", { className: MenuSeparatorCls });
 }
 var toRuntimeItem = ({
   columns,
@@ -20242,7 +20274,7 @@ var toRuntimeItem = ({
   menuId
 }, item) => {
   const menuItem = item && (item.key != null || item.label != null) ? item : null;
-  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React55.createElement(MenuSeparator, null) : item : null;
+  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React56.createElement(MenuSeparator, null) : item : null;
   const runtimeItem = menuItem != null ? {
     type: "item",
     parentMenuId: menuId,
@@ -20270,7 +20302,7 @@ var toRuntimeItem = ({
   return runtimeItem;
 };
 function childrenToRuntimeItems(context, children) {
-  return React55.Children.map(children, (child) => {
+  return React56.Children.map(children, (child) => {
     if (child == null ? void 0 : child.props.__is_menu_item) {
       const itemProps = __spreadValues({}, child.props);
       if (!itemProps.key) {
@@ -20291,7 +20323,7 @@ function childrenToRuntimeItems(context, children) {
 // src/components/Menu/getMenuState.tsx
 var SUBMENU_COL_NAME = "submenu";
 function getInitialMenuState() {
-  const domRef = React56.createRef();
+  const domRef = React57.createRef();
   return {
     keyboardActiveItemKey: null,
     activeItemKey: null,
@@ -20346,7 +20378,7 @@ var deriveStateFromProps2 = (params) => {
       columns.push({
         name: SUBMENU_COL_NAME,
         render: ({ domProps, item }) => {
-          return item.menu ? /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React56.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps));
+          return item.menu ? /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React57.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps));
         }
       });
     }
@@ -20363,7 +20395,7 @@ var deriveStateFromProps2 = (params) => {
 };
 
 // src/components/Menu/Menu.tsx
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 var import_react60 = require("react");
 
 // src/utils/pageGeometry/Triangle.ts
@@ -20623,7 +20655,7 @@ function renderSubmenuForItem(item, config) {
   if (typeof itemMenu === "function") {
     itemMenu = itemMenu();
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     Menu,
     __spreadProps(__spreadValues({
       key: overlayId,
@@ -20836,7 +20868,7 @@ function MenuComponent(props) {
       setActiveItemKey(key);
     }
   });
-  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React57.createElement(
+  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React58.createElement(
     RuntimeItemRenderer,
     {
       key: runtimeItem.type === "item" ? runtimeItem.key : index,
@@ -21021,7 +21053,7 @@ function MenuComponent(props) {
       domRef.current = node;
     }
   }, []);
-  const result = /* @__PURE__ */ React57.createElement("div", { className: display.contents }, /* @__PURE__ */ React57.createElement(
+  const result = /* @__PURE__ */ React58.createElement("div", { className: display.contents }, /* @__PURE__ */ React58.createElement(
     "div",
     __spreadProps(__spreadValues({}, domProps), {
       "data-menu-id": menuId,
@@ -21053,12 +21085,12 @@ function MenuComponent(props) {
   return destroyed ? null : result;
 }
 function RuntimeItemRenderer(props) {
-  const [pressed, setPressed] = React57.useState(false);
+  const [pressed, setPressed] = React58.useState(false);
   const { columns, item, index, active, keyboardActive } = props;
   const key = item.type === "item" ? item.value.key : index;
   let content = null;
   if (item.type === "decoration") {
-    content = /* @__PURE__ */ React57.createElement("div", { style: item.style }, item.value);
+    content = /* @__PURE__ */ React58.createElement("div", { style: item.style }, item.value);
   } else {
     let spanIndex = 0;
     content = columns.map((col, i) => {
@@ -21119,7 +21151,7 @@ function RuntimeItemRenderer(props) {
           }
         }
       };
-      return col.render ? /* @__PURE__ */ React57.createElement(
+      return col.render ? /* @__PURE__ */ React58.createElement(
         RenderHookComponent,
         {
           key: `${key}-${field}`,
@@ -21131,10 +21163,10 @@ function RuntimeItemRenderer(props) {
             domProps
           }
         }
-      ) : /* @__PURE__ */ React57.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
+      ) : /* @__PURE__ */ React58.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
     }).filter(Boolean);
   }
-  return /* @__PURE__ */ React57.createElement("div", { className: MenuRowCls }, content);
+  return /* @__PURE__ */ React58.createElement("div", { className: MenuRowCls }, content);
 }
 function MenuItem(_props) {
   return null;
@@ -21154,12 +21186,12 @@ var MenuRoot = getComponentStateRoot({
 function MenuContextProvider(props) {
   const { componentActions, componentState } = useComponentState();
   const getState = useLatest(componentState);
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     MenuContext.Provider,
     {
       value: { componentActions, componentState, getState }
     },
-    /* @__PURE__ */ React58.createElement(MenuComponent, { domProps: props.domProps })
+    /* @__PURE__ */ React59.createElement(MenuComponent, { domProps: props.domProps })
   );
 }
 function Menu(props) {
@@ -21201,9 +21233,9 @@ function Menu(props) {
     //@ts-ignore
     "__is_infinite_menu_component"
   ]);
-  const menu = /* @__PURE__ */ React58.createElement(MenuRoot, __spreadValues({}, props), /* @__PURE__ */ React58.createElement(MenuContextProvider, { domProps }));
+  const menu = /* @__PURE__ */ React59.createElement(MenuRoot, __spreadValues({}, props), /* @__PURE__ */ React59.createElement(MenuContextProvider, { domProps }));
   if (false) {
-    return /* @__PURE__ */ React58.createElement(React58.StrictMode, null, menu);
+    return /* @__PURE__ */ React59.createElement(React59.StrictMode, null, menu);
   }
   return menu;
 }
@@ -21220,7 +21252,7 @@ var menuDefaultProps = {
 Menu.defaultProps = menuDefaultProps;
 
 // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
-var React59 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 function defaultGetColumnMenuItems(_items, params) {
   const { columnApi, column, getComputed, api } = params;
   const sortable = columnApi.isSortable();
@@ -21307,7 +21339,7 @@ function defaultGetColumnMenuItems(_items, params) {
           colItems.push({
             key: id,
             label,
-            check: /* @__PURE__ */ React59.createElement(
+            check: /* @__PURE__ */ React60.createElement(
               InfiniteCheckBox,
               {
                 key: col.id,
@@ -21370,7 +21402,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
   if (!items || !items.length) {
     return null;
   }
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -21432,13 +21464,14 @@ function showMenuForColumn(options) {
 }
 function useColumnMenu() {
   const context = useInfiniteTable();
+  const masterContext = useMasterDetailContext();
   const { getState, actions } = context;
   const {
     showOverlay,
     portal: menuPortal,
     clearAll
   } = useOverlay({
-    portalContainer: false
+    portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
   (0, import_react61.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
@@ -21489,7 +21522,7 @@ function useColumnMenu() {
 }
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 var import_react62 = require("react");
 var style = {
   width: 0,
@@ -21523,7 +21556,7 @@ function FocusDetect() {
     };
     focusLastFocusableCell(context);
   }), []);
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       onFocus,
@@ -21654,18 +21687,18 @@ function useEditingCallbackProps() {
 var import_react64 = require("react");
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
-var React64 = __toESM(require("react"));
+var React65 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/icons/ClearIcon.tsx
-var React62 = __toESM(require("react"));
+var React63 = __toESM(require("react"));
 var ClearIcon = (props) => {
-  return /* @__PURE__ */ React62.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React62.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+  return /* @__PURE__ */ React63.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React63.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 };
 
 // src/components/InfiniteTable/components/icons/DoneIcon.tsx
-var React63 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 var DoneIcon = (props) => {
-  return /* @__PURE__ */ React63.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React63.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
+  return /* @__PURE__ */ React64.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React64.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
 };
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
@@ -21711,12 +21744,12 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     const IconCmp = (_b = (_a2 = operator.components) == null ? void 0 : _a2.Icon) != null ? _b : FilterIcon;
     return {
       key,
-      icon: /* @__PURE__ */ React64.createElement(IconCmp, null),
-      label: /* @__PURE__ */ React64.createElement(React64.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
+      icon: /* @__PURE__ */ React65.createElement(IconCmp, null),
+      label: /* @__PURE__ */ React65.createElement(React65.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
       onAction: () => {
         api.setColumnFilterOperator(columnId, key);
       },
-      checked: checked ? /* @__PURE__ */ React64.createElement(DoneIcon, { size: 16 }) : null
+      checked: checked ? /* @__PURE__ */ React65.createElement(DoneIcon, { size: 16 }) : null
     };
   });
   const firstItems = [
@@ -21731,7 +21764,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     {
       key: "reset",
       label: "Reset",
-      icon: /* @__PURE__ */ React64.createElement(ClearIcon, null),
+      icon: /* @__PURE__ */ React65.createElement(ClearIcon, null),
       disabled: !column.computedFiltered,
       onAction: () => {
         api.clearColumnFilter(columnId);
@@ -21753,7 +21786,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     filterTypes
   };
   const items = getFilterOperatorMenuItems ? getFilterOperatorMenuItems(defaultItems, param) : defaultItems;
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -21785,13 +21818,14 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
 var OFFSET2 = 10;
 function useColumnFilterOperatorMenu() {
   const context = useInfiniteTable();
+  const masterContext = useMasterDetailContext();
   const { getState, actions } = context;
   const {
     showOverlay,
     portal: menuPortal,
     clearAll
   } = useOverlay({
-    portalContainer: false
+    portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
   (0, import_react64.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
@@ -21859,7 +21893,7 @@ function useColumnFilterOperatorMenu() {
 var import_react65 = require("react");
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
-var React65 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   var _a;
   const { columnId, rowIndex, event } = cellLocation;
@@ -21899,7 +21933,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React65.createElement(
+    menu: /* @__PURE__ */ React66.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -21954,7 +21988,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React65.createElement(
+    menu: /* @__PURE__ */ React66.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -21992,13 +22026,14 @@ var ALIGN_POSITIONS = [
 ];
 function useCellContextMenu() {
   const context = useInfiniteTable();
+  const masterContext = useMasterDetailContext();
   const { getState, actions } = context;
   const {
     showOverlay,
     portal: menuPortal,
     clearAll
   } = useOverlay({
-    portalContainer: false
+    portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
   (0, import_react65.useEffect)(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
@@ -22077,13 +22112,14 @@ function useCellContextMenu() {
 }
 function useTableContextMenu() {
   const context = useInfiniteTable();
+  const masterContext = useMasterDetailContext();
   const { getState, actions } = context;
   const {
     showOverlay,
     portal: menuPortal,
     clearAll
   } = useOverlay({
-    portalContainer: false
+    portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
   (0, import_react65.useEffect)(() => {
     const { actions: actions2, getState: getState2 } = context;
@@ -22177,10 +22213,11 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React66.memo(
+var InfiniteTableComponent = React67.memo(
   function InfiniteTableComponent2() {
     var _a;
     const context = useInfiniteTable();
+    const masterContext = useMasterDetailContext();
     const { state: componentState, getComputed, computed, api } = context;
     const {
       componentState: { loading, dataArray },
@@ -22225,7 +22262,7 @@ var InfiniteTableComponent = React66.memo(
       bodySize,
       computed
     });
-    React66.useEffect(() => {
+    React67.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -22241,7 +22278,7 @@ var InfiniteTableComponent = React66.memo(
     const licenseValid = useLicense(licenseKey);
     const domProps = useDOMProps(componentState.domProps);
     const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
-    React66.useEffect(() => {
+    React67.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -22251,7 +22288,7 @@ var InfiniteTableComponent = React66.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React66.useEffect(() => {
+    React67.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -22264,9 +22301,15 @@ var InfiniteTableComponent = React66.memo(
         globalThis.infiniteApi = context.api;
       }
     }, [componentState.ready]);
-    const onContextMenu = React66.useCallback((event) => {
+    const onContextMenu = React67.useCallback((event) => {
       const state = context.getState();
       const target = event.target;
+      if (!masterContext && event._from_row_detail) {
+        return;
+      }
+      if (masterContext) {
+        event._from_row_detail = true;
+      }
       const cell = selectParentUntil(
         target,
         getCellSelector(),
@@ -22295,14 +22338,19 @@ var InfiniteTableComponent = React66.memo(
       }
       state.contextMenu(param);
     }, []);
-    return /* @__PURE__ */ React66.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), header ? /* @__PURE__ */ React66.createElement(
+    React67.useEffect(() => {
+      if (masterContext) {
+        portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
+      }
+    }, []);
+    return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), header ? /* @__PURE__ */ React67.createElement(
       TableHeaderWrapper,
       {
         bodyBrain: brain,
         headerBrain,
         scrollbars
       }
-    ) : null, /* @__PURE__ */ React66.createElement(InfiniteTableBody, { onContextMenu }, /* @__PURE__ */ React66.createElement(
+    ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableBody, { onContextMenu }, /* @__PURE__ */ React67.createElement(
       HeadlessTable,
       {
         debugId,
@@ -22320,7 +22368,7 @@ var InfiniteTableComponent = React66.memo(
         cellHoverClassNames: HOVERED_CLASS_NAMES,
         scrollerDOMRef
       }
-    ), /* @__PURE__ */ React66.createElement(LoadMaskCmp, { visible: loading }, loadingText)), /* @__PURE__ */ React66.createElement(
+    ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText)), /* @__PURE__ */ React67.createElement(
       "div",
       {
         ref: portalDOMRef,
@@ -22336,25 +22384,25 @@ var InfiniteTableComponent = React66.memo(
       cellContextMenuPortal,
       tableContextMenuPortal,
       filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React66.createElement(
+    ), rowHeightCSSVar ? /* @__PURE__ */ React67.createElement(
       CSSNumericVariableWatch,
       {
         varName: rowHeightCSSVar,
         onChange: onRowHeightCSSVarChange
       }
-    ) : null, rowDetailHeightCSSVar ? /* @__PURE__ */ React66.createElement(
+    ) : null, rowDetailHeightCSSVar ? /* @__PURE__ */ React67.createElement(
       CSSNumericVariableWatch,
       {
         varName: rowDetailHeightCSSVar,
         onChange: onRowDetailHeightCSSVarChange
       }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React66.createElement(
+    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React67.createElement(
       CSSNumericVariableWatch,
       {
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
-    ) : null, /* @__PURE__ */ React66.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React66.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React66.createElement(FocusDetect, null));
+    ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
   }
 );
 function InfiniteTableContextProvider() {
@@ -22368,6 +22416,7 @@ function InfiniteTableContextProvider() {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
     globalThis.componentActions = componentActions;
+    globalThis.masterBrain = componentState.brain;
   }
   const {
     getState: getDataSourceState,
@@ -22375,7 +22424,7 @@ function InfiniteTableContextProvider() {
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React66.useState(() => {
+  const [imperativeApi] = React67.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -22410,21 +22459,21 @@ function InfiniteTableContextProvider() {
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React66.useEffect(() => {
+  React67.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React66.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React66.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React67.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React67.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React66.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React66.createElement(InfiniteTableContextProvider, null))
+    /* @__PURE__ */ React67.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, null))
   );
   if (false) {
-    return /* @__PURE__ */ React66.createElement(React66.StrictMode, null, table);
+    return /* @__PURE__ */ React67.createElement(React67.StrictMode, null, table);
   }
   return table;
 }
@@ -22594,6 +22643,7 @@ var components = {
   useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor,
   useInfiniteHeaderCell,
+  useMasterRowInfo,
   useOverlay,
   useOverlayPortal,
   useRowInfoReducers