@infinite-table/infinite-react 3.2.0 → 3.2.2

package/index.dev.mjs

@@ -1102,6 +1102,7 @@ function getDataSourceContext() {
     api: null,
     getState: () => null,
     assignState: () => null,
+    getDataSourceMasterContext: () => void 0,
     componentState: null,
     componentActions: null
   });
@@ -8319,7 +8320,8 @@ function InfiniteTableColumnCellFn(props) {
     getState,
     actions: componentActions,
     computed,
-    api: imperativeApi
+    api: imperativeApi,
+    getDataSourceMasterContext
   } = useInfiniteTable();
   const {
     componentState: dataSourceState,
@@ -8332,6 +8334,7 @@ function InfiniteTableColumnCellFn(props) {
   const renderingContext = {
     getState,
     getDataSourceState,
+    getDataSourceMasterContext,
     actions: componentActions,
     dataSourceActions,
     api: imperativeApi,
@@ -9228,7 +9231,8 @@ function InfiniteTableHeaderCell(props) {
       columnHeaderHeight,
       columnReorderDragColumnId,
       columnMenuVisibleForColumnId
-    }
+    },
+    getDataSourceMasterContext
   } = useInfiniteTable();
   const {
     api: dataSourceApi,
@@ -9260,6 +9264,7 @@ function InfiniteTableHeaderCell(props) {
     dataSourceApi,
     getComputed,
     getDataSourceState,
+    getDataSourceMasterContext,
     getState
   });
   const computedSortable = columnApi.isSortable();
@@ -13526,7 +13531,7 @@ var DATA_CHANGES_COMPARE_FUNCTIONS = {
     return JSON.stringify(a) === JSON.stringify(b);
   }
 };
-function buildDataSourceDataParams(componentState, overrides) {
+function buildDataSourceDataParams(componentState, overrides, masterContext) {
   var _a, _b;
   const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
   const dataSourceParams = {
@@ -13539,6 +13544,9 @@ function buildDataSourceDataParams(componentState, overrides) {
     filterValue: componentState.filterValue,
     aggregationReducers: componentState.aggregationReducers
   };
+  if (masterContext) {
+    dataSourceParams.masterRowInfo = masterContext.masterRowInfo;
+  }
   if (dataSourceParams.groupBy) {
     dataSourceParams.groupRowsState = componentState.groupRowsState.getState();
   }
@@ -13585,8 +13593,12 @@ function buildDataSourceDataParams(componentState, overrides) {
   dataSourceParams.changes = changes;
   return dataSourceParams;
 }
-function loadData(data, componentState, actions, overrides) {
-  const dataParams = buildDataSourceDataParams(componentState, overrides);
+function loadData(data, componentState, actions, overrides, masterContext) {
+  const dataParams = buildDataSourceDataParams(
+    componentState,
+    overrides,
+    masterContext
+  );
   const append = dataParams.append;
   if (componentState.lazyLoad) {
     const lazyGroupData = componentState.originalLazyGroupData;
@@ -13766,6 +13778,15 @@ function computeFilterValueForRemote(filterValue, {
     }
   );
 }
+function getDetailReady(masterContext, getDataSourceState) {
+  const isDetail = !!masterContext;
+  const { stateReadyAsDetails } = getDataSourceState();
+  const isDetailReady = isDetail ? masterContext.shouldRestoreState ? stateReadyAsDetails : true : true;
+  return {
+    isDetail,
+    isDetailReady
+  };
+}
 function useLoadData() {
   const {
     getComponentState,
@@ -13786,8 +13807,7 @@ function useLoadData() {
     livePagination,
     livePaginationCursor,
     filterTypes,
-    cursorId: stateCursorId,
-    stateReadyAsDetails
+    cursorId: stateCursorId
   } = componentState;
   const [scrollbars, setScrollbars] = useState13({
     vertical: false,
@@ -13859,21 +13879,26 @@ function useLoadData() {
   };
   const initialRef = useRef21(true);
   useLazyLoadRange();
-  const masterContext = useMasterDetailContext();
-  const isDetail = !!masterContext;
-  const isDetailRef = useRef21(!!masterContext);
-  isDetailRef.current = isDetail;
-  const isDetailReady = isDetail ? masterContext.shouldRestoreState ? stateReadyAsDetails : true : true;
-  const isDetailReadyRef = useRef21(isDetailReady);
-  isDetailReadyRef.current = isDetailReady;
+  const getMasterContext = useLatest(useMasterDetailContext());
   useEffectWithChanges(
     () => {
       const componentState2 = getComponentState();
-      if (isDetailRef.current && !isDetailReadyRef.current) {
+      const masterContext = getMasterContext();
+      const { isDetail, isDetailReady } = getDetailReady(
+        masterContext,
+        getComponentState
+      );
+      if (isDetail && !isDetailReady) {
         return;
       }
       if (typeof componentState2.data !== "function") {
-        loadData(componentState2.data, componentState2, actions);
+        loadData(
+          componentState2.data,
+          componentState2,
+          actions,
+          void 0,
+          masterContext
+        );
       }
     },
     { data }
@@ -13888,14 +13913,25 @@ function useLoadData() {
           return;
         }
       }
-      if (isDetailRef.current && !isDetailReadyRef.current) {
+      const masterContext = getMasterContext();
+      const { isDetail, isDetailReady } = getDetailReady(
+        masterContext,
+        getComponentState
+      );
+      if (isDetail && !isDetailReady) {
         return;
       }
       const componentState2 = getComponentState();
       if (typeof componentState2.data === "function") {
-        loadData(componentState2.data, componentState2, actions, {
-          append: appendWhenLivePagination
-        });
+        loadData(
+          componentState2.data,
+          componentState2,
+          actions,
+          {
+            append: appendWhenLivePagination
+          },
+          masterContext
+        );
       }
     },
     __spreadProps(__spreadValues({}, depsObject), { data })
@@ -13904,7 +13940,11 @@ function useLoadData() {
     const componentState2 = getComponentState();
     if (initialRef.current) {
       initialRef.current = false;
-      const dataParams = buildDataSourceDataParams(componentState2);
+      const dataParams = buildDataSourceDataParams(
+        componentState2,
+        void 0,
+        getMasterContext()
+      );
       actions.dataParams = dataParams;
     }
   }, depsObject);
@@ -14197,6 +14237,7 @@ function initSetupState() {
       current: false
     },
     idToIndexMap: /* @__PURE__ */ new Map(),
+    getDataSourceMasterContextRef: { current: () => void 0 },
     // TODO: cleanup cache on unmount
     cache: void 0,
     detailDataSourcesStateToRestore: /* @__PURE__ */ new Map(),
@@ -14464,10 +14505,15 @@ function getMappedCallbacks() {
 function getInterceptActions() {
   return {
     sortInfo: (sortInfo, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        sortInfo,
-        livePaginationCursor: null
-      });
+      const getDataSourceMasterContext = state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          sortInfo,
+          livePaginationCursor: null
+        },
+        getDataSourceMasterContext()
+      );
       actions.dataParams = dataParams;
       if (state.livePagination) {
         raf(() => {
@@ -14476,10 +14522,15 @@ function getInterceptActions() {
       }
     },
     groupBy: (groupBy, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        groupBy,
-        livePaginationCursor: null
-      });
+      const getDataSourceMasterContext = state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          groupBy,
+          livePaginationCursor: null
+        },
+        getDataSourceMasterContext()
+      );
       actions.dataParams = dataParams;
       if (state.livePagination) {
         raf(() => {
@@ -14488,10 +14539,15 @@ function getInterceptActions() {
       }
     },
     pivotBy: (pivotBy, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        pivotBy,
-        livePaginationCursor: null
-      });
+      const getDataSourceMasterContext = state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          pivotBy,
+          livePaginationCursor: null
+        },
+        getDataSourceMasterContext()
+      );
       actions.dataParams = dataParams;
       if (state.livePagination) {
         raf(() => {
@@ -14500,10 +14556,15 @@ function getInterceptActions() {
       }
     },
     filterValue: (filterValue, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        filterValue,
-        livePaginationCursor: null
-      });
+      const getDataSourceMasterContext = state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          filterValue,
+          livePaginationCursor: null
+        },
+        getDataSourceMasterContext()
+      );
       actions.dataParams = dataParams;
       if (state.livePagination) {
         raf(() => {
@@ -14512,15 +14573,25 @@ function getInterceptActions() {
       }
     },
     cursorId: (cursorId, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        __cursorId: cursorId
-      });
+      const getDataSourceMasterContext = state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          __cursorId: cursorId
+        },
+        getDataSourceMasterContext()
+      );
       actions.dataParams = dataParams;
     },
     livePaginationCursor: (livePaginationCursor, { actions, state }) => {
-      const dataParams = buildDataSourceDataParams(state, {
-        livePaginationCursor
-      });
+      const getDataSourceMasterContext = state.getDataSourceMasterContextRef.current;
+      const dataParams = buildDataSourceDataParams(
+        state,
+        {
+          livePaginationCursor
+        },
+        getDataSourceMasterContext()
+      );
       actions.dataParams = dataParams;
     },
     dataParams: (dataParams, { state }) => {
@@ -14529,7 +14600,8 @@ function getInterceptActions() {
         state.dataParams,
         /* @__PURE__ */ new Set([
           "changes",
-          "originalDataArray"
+          "originalDataArray",
+          "masterRowInfo"
         ])
       )) {
         return false;
@@ -14727,7 +14799,9 @@ function DataSourceCmp({
 }) {
   const DataSourceContext = getDataSourceContext();
   const masterContext = useMasterDetailContext();
+  const getDataSourceMasterContext = useLatest(masterContext);
   const { componentState, componentActions, assignState } = useComponentState();
+  componentState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
   const getState = useLatest(componentState);
   const [api] = React51.useState(() => {
     return getDataSourceApi({ getState, actions: componentActions });
@@ -14735,6 +14809,7 @@ function DataSourceCmp({
   const contextValue = {
     componentState,
     componentActions,
+    getDataSourceMasterContext,
     getState,
     assignState,
     api
@@ -15630,9 +15705,15 @@ var InfiniteTableApiImpl = class {
         const currentData = state.originalLazyGroupData.get(dataKeys);
         if (newState.isGroupRowExpanded(groupKeys)) {
           if (!(currentData == null ? void 0 : currentData.cache)) {
-            loadData(state.data, state, this.dataSourceActions, {
-              groupKeys
-            });
+            loadData(
+              state.data,
+              state,
+              this.dataSourceActions,
+              {
+                groupKeys
+              },
+              this.context.getDataSourceMasterContext()
+            );
           }
         } else {
           if (!(currentData == null ? void 0 : currentData.cache)) {
@@ -16470,6 +16551,7 @@ function useRegisterDetail(props) {
       shouldRestoreState
     };
   }, [rowInfo.id, currentRowCache]);
+  masterDetailContextValue.masterRowInfo = rowInfo;
   return { masterDetailContextValue, currentRowCache };
 }
 
@@ -17329,7 +17411,7 @@ var forwardProps4 = (setupState) => {
     showHoverRows: (showHoverRows) => showHoverRows != null ? showHoverRows : true,
     virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
     rowHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
-    rowDetailHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
+    rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
     columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
@@ -17543,7 +17625,11 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 import { useCallback as useCallback21 } from "react";
 function useToggleGroupRow() {
-  const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
+  const {
+    getState: getDataSourceState,
+    componentActions: dataSourceActions,
+    getDataSourceMasterContext
+  } = useDataSourceContextValue();
   const toggleGroupRow = useCallback21((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
@@ -17554,9 +17640,15 @@ function useToggleGroupRow() {
       const currentData = state.originalLazyGroupData.get(dataKeys);
       if (newState.isGroupRowExpanded(groupKeys)) {
         if (!(currentData == null ? void 0 : currentData.cache)) {
-          loadData(state.data, state, dataSourceActions, {
-            groupKeys
-          });
+          loadData(
+            state.data,
+            state,
+            dataSourceActions,
+            {
+              groupKeys
+            },
+            getDataSourceMasterContext()
+          );
         }
       } else {
         if (!(currentData == null ? void 0 : currentData.cache)) {
@@ -18615,7 +18707,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo14(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.2.0"
+      version: "3.2.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19420,7 +19512,8 @@ function useEventHandlersContext() {
     getState,
     actions,
     api,
-    getComputed
+    getComputed,
+    getDataSourceMasterContext
   } = useInfiniteTable();
   const {
     getState: getDataSourceState,
@@ -19430,6 +19523,7 @@ function useEventHandlersContext() {
   const context = useMemo15(() => {
     const context2 = {
       getComputed,
+      getDataSourceMasterContext,
       dataSourceApi,
       api,
       getState,
@@ -21400,11 +21494,12 @@ function FocusDetect() {
     dataSourceApi,
     dataSourceActions
   } = useInfiniteTable();
-  const { getState: getDataSourceState } = useDataSourceContextValue();
+  const { getState: getDataSourceState, getDataSourceMasterContext } = useDataSourceContextValue();
   const { focusDetectDOMRef } = getState();
   const onFocus = useCallback26(() => __async(this, null, function* () {
     const context = {
       getDataSourceState,
+      getDataSourceMasterContext,
       getComputed,
       actions,
       dataSourceActions,
@@ -22263,6 +22358,7 @@ function InfiniteTableContextProvider() {
   const {
     getState: getDataSourceState,
     componentActions: dataSourceActions,
+    getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
   const [imperativeApi] = React66.useState(() => {
@@ -22270,6 +22366,7 @@ function InfiniteTableContextProvider() {
       getComputed,
       getState,
       getDataSourceState,
+      getDataSourceMasterContext,
       dataSourceApi,
       actions: componentActions,
       dataSourceActions
@@ -22280,6 +22377,7 @@ function InfiniteTableContextProvider() {
     state: componentState,
     computed,
     dataSourceActions,
+    getDataSourceMasterContext,
     getDataSourceState,
     getComputed,
     getState,