@infinite-table/infinite-react 3.2.4 → 3.2.6

package/index.dev.mjs

@@ -123,7 +123,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-import * as React66 from "react";
+import * as React67 from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -4813,6 +4813,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
@@ -15056,12 +15057,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) {
@@ -15353,6 +15363,20 @@ function getRowDetailApi(param) {
       const expanded = isRowDetailExpanded(rowInfo);
       return !expanded;
     },
+    isRowDetailEnabledForRow(pk) {
+      const { isRowDetailEnabled } = getState();
+      if (!isRowDetailEnabled) {
+        return false;
+      }
+      if (typeof isRowDetailEnabled === "function") {
+        const rowInfo = dataSourceApi.getRowInfoByPrimaryKey(pk);
+        if (!rowInfo) {
+          return false;
+        }
+        return isRowDetailEnabled(rowInfo);
+      }
+      return true;
+    },
     isRowDetailExpanded(pk) {
       return !rowDetailApi.isRowDetailCollapsed(pk);
     },
@@ -16503,6 +16527,7 @@ function useRegisterDetail(props) {
     getState: getMasterDataSourceState,
     componentActions: masterActions
   } = useDataSourceContextValue();
+  const { getState: getMasterState } = useInfiniteTable();
   const { currentRowCache, cacheCalledByRowDetailRenderer } = useCurrentRowCache(rowInfo.id, rowDetailsCache);
   const masterDetailContextValue = useMemo8(() => {
     const shouldRestoreState = getMasterDataSourceState().detailDataSourcesStateToRestore.has(
@@ -16552,6 +16577,8 @@ function useRegisterDetail(props) {
     };
   }, [rowInfo.id, currentRowCache]);
   masterDetailContextValue.masterRowInfo = rowInfo;
+  masterDetailContextValue.getMasterDataSourceState = getMasterDataSourceState;
+  masterDetailContextValue.getMasterState = getMasterState;
   return { masterDetailContextValue, currentRowCache };
 }
 
@@ -16778,7 +16805,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(
@@ -17231,6 +17258,14 @@ function toMap(mapOrObject, weakMapCache) {
   return result;
 }
 
+// src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
+import * as React54 from "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);
@@ -17362,7 +17397,6 @@ var forwardProps4 = (setupState) => {
     columnDefaultEditable: 1,
     columnDefaultFilterable: 1,
     columnDefaultSortable: 1,
-    rowDetailRenderer: 1,
     rowStyle: 1,
     cellStyle: 1,
     rowProps: 1,
@@ -17477,7 +17511,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;
@@ -17488,7 +17522,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);
@@ -17510,19 +17554,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,
@@ -18707,7 +18752,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo14(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.2.4"
+      version: "3.2.6"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -18942,6 +18987,9 @@ function handleRowNavigation(options, event) {
       if (rowInfo && rowInfo.isGroupRow) {
         return api.collapseGroupRow(rowInfo.groupKeys);
       }
+      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
+        return api.rowDetailApi.collapseRowDetail(rowInfo.id);
+      }
       return false;
     },
     ArrowRight: () => {
@@ -18949,6 +18997,9 @@ function handleRowNavigation(options, event) {
       if (rowInfo && rowInfo.isGroupRow) {
         return api.expandGroupRow(rowInfo.groupKeys);
       }
+      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
+        return api.rowDetailApi.expandRowDetail(rowInfo.id);
+      }
       return false;
     },
     Enter: () => {
@@ -18956,6 +19007,12 @@ function handleRowNavigation(options, event) {
       if (rowInfo && rowInfo.isGroupRow) {
         return api.toggleGroupRow(rowInfo.groupKeys);
       }
+      const hasRowDetail = api.rowDetailApi.isRowDetailEnabledForRow(
+        rowInfo.id
+      );
+      if (hasRowDetail) {
+        return api.rowDetailApi.toggleRowDetail(rowInfo.id);
+      }
       return false;
     },
     PageDown: () => {
@@ -19046,6 +19103,9 @@ function handleCellNavigation(options, event) {
       if (rowInfo && rowInfo.isGroupRow) {
         return api.toggleGroupRow(rowInfo.groupKeys);
       }
+      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
+        return api.rowDetailApi.toggleRowDetail(rowInfo.id);
+      }
       return false;
     },
     PageDown: () => {
@@ -19606,7 +19666,7 @@ function useDOMEventHandlers() {
 import { useEffect as useEffect35 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
-import * as React54 from "react";
+import * as React55 from "react";
 import {
   useCallback as useCallback23,
   useEffect as useEffect33,
@@ -19997,10 +20057,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);
   useEffect33(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
@@ -20008,7 +20068,7 @@ function OverlayContent(props) {
       }
     });
   }, [props.realign]);
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
@@ -20079,22 +20139,22 @@ function useOverlayPortal(content, portalContainer) {
   }, [portalContainer]);
   return portalContainer ? container ? createPortal2(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;
@@ -20102,7 +20162,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;
@@ -20118,7 +20178,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;
@@ -20163,7 +20223,7 @@ function useOverlay(params) {
     },
     [handles, rootParams.portalContainer, updateContent]
   );
-  React54.useEffect(() => {
+  React55.useEffect(() => {
     if (handleToRealign) {
       const handle = handles.get(handleToRealign);
       if (handle) {
@@ -20182,7 +20242,7 @@ function useOverlay(params) {
     handles.clear();
     updateContent();
   };
-  React54.useEffect(() => {
+  React55.useEffect(() => {
   }, []);
   return {
     portal,
@@ -20194,16 +20254,16 @@ function useOverlay(params) {
 }
 
 // src/components/InfiniteTable/utils/getMenuForColumn.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 
 // src/components/Menu/index.tsx
-import * as React58 from "react";
+import * as React59 from "react";
 
 // src/components/Menu/getMenuState.tsx
-import * as React56 from "react";
+import * as React57 from "react";
 
 // src/components/Menu/childrenToRuntimeItems.tsx
-import * as React55 from "react";
+import * as React56 from "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";
@@ -20214,7 +20274,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,
@@ -20223,7 +20283,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,
@@ -20251,7 +20311,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) {
@@ -20272,7 +20332,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,
@@ -20327,7 +20387,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));
         }
       });
     }
@@ -20344,7 +20404,7 @@ var deriveStateFromProps2 = (params) => {
 };
 
 // src/components/Menu/Menu.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 import {
   useCallback as useCallback25,
   useLayoutEffect as useLayoutEffect14,
@@ -20609,7 +20669,7 @@ function renderSubmenuForItem(item, config) {
   if (typeof itemMenu === "function") {
     itemMenu = itemMenu();
   }
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     Menu,
     __spreadProps(__spreadValues({
       key: overlayId,
@@ -20822,7 +20882,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,
@@ -21007,7 +21067,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,
@@ -21039,12 +21099,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) => {
@@ -21105,7 +21165,7 @@ function RuntimeItemRenderer(props) {
           }
         }
       };
-      return col.render ? /* @__PURE__ */ React57.createElement(
+      return col.render ? /* @__PURE__ */ React58.createElement(
         RenderHookComponent,
         {
           key: `${key}-${field}`,
@@ -21117,10 +21177,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;
@@ -21140,12 +21200,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) {
@@ -21187,9 +21247,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;
 }
@@ -21206,7 +21266,7 @@ var menuDefaultProps = {
 Menu.defaultProps = menuDefaultProps;
 
 // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 function defaultGetColumnMenuItems(_items, params) {
   const { columnApi, column, getComputed, api } = params;
   const sortable = columnApi.isSortable();
@@ -21293,7 +21353,7 @@ function defaultGetColumnMenuItems(_items, params) {
           colItems.push({
             key: id,
             label,
-            check: /* @__PURE__ */ React59.createElement(
+            check: /* @__PURE__ */ React60.createElement(
               InfiniteCheckBox,
               {
                 key: col.id,
@@ -21356,7 +21416,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
   if (!items || !items.length) {
     return null;
   }
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -21418,13 +21478,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
   });
   useEffect35(() => {
     const { actions: actions2, getState: getState2 } = context;
@@ -21475,7 +21536,7 @@ function useColumnMenu() {
 }
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 import { useCallback as useCallback26 } from "react";
 var style = {
   width: 0,
@@ -21509,7 +21570,7 @@ function FocusDetect() {
     };
     focusLastFocusableCell(context);
   }), []);
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       onFocus,
@@ -21640,18 +21701,18 @@ function useEditingCallbackProps() {
 import { useEffect as useEffect37 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 
 // src/components/InfiniteTable/components/icons/ClearIcon.tsx
-import * as React62 from "react";
+import * as React63 from "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
-import * as React63 from "react";
+import * as React64 from "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
@@ -21697,12 +21758,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 = [
@@ -21717,7 +21778,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);
@@ -21739,7 +21800,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,
@@ -21771,13 +21832,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
   });
   useEffect37(() => {
     const { actions: actions2, getState: getState2 } = context;
@@ -21845,7 +21907,7 @@ function useColumnFilterOperatorMenu() {
 import { useEffect as useEffect38 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   var _a;
   const { columnId, rowIndex, event } = cellLocation;
@@ -21885,7 +21947,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React65.createElement(
+    menu: /* @__PURE__ */ React66.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -21940,7 +22002,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React65.createElement(
+    menu: /* @__PURE__ */ React66.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -21978,13 +22040,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
   });
   useEffect38(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
@@ -22063,13 +22126,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
   });
   useEffect38(() => {
     const { actions: actions2, getState: getState2 } = context;
@@ -22163,10 +22227,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 },
@@ -22211,7 +22276,7 @@ var InfiniteTableComponent = React66.memo(
       bodySize,
       computed
     });
-    React66.useEffect(() => {
+    React67.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -22227,7 +22292,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]);
@@ -22237,7 +22302,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,
@@ -22250,9 +22315,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(),
@@ -22281,14 +22352,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,
@@ -22306,7 +22382,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,
@@ -22322,25 +22398,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() {
@@ -22354,6 +22430,7 @@ function InfiniteTableContextProvider() {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
     globalThis.componentActions = componentActions;
+    globalThis.masterBrain = componentState.brain;
   }
   const {
     getState: getDataSourceState,
@@ -22361,7 +22438,7 @@ function InfiniteTableContextProvider() {
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React66.useState(() => {
+  const [imperativeApi] = React67.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -22396,21 +22473,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;
 }
@@ -22579,6 +22656,7 @@ export {
   useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor,
   useInfiniteHeaderCell,
+  useMasterRowInfo,
   useOverlay,
   useOverlayPortal,
   useRowInfoReducers