@infinite-table/infinite-react 3.2.0 → 3.2.2

package/index.d.ts

@@ -1629,6 +1629,7 @@ declare type InfiniteTableEventHandlerContext<T> = {
     actions: InfiniteTableActions<T>;
     cloneRowSelection: (rowSelection: RowSelectionState<T>) => RowSelectionState<T>;
     getDataSourceState: () => DataSourceState<T>;
+    getDataSourceMasterContext: () => DataSourceMasterDetailContextValue | undefined;
     dataSourceActions: DataSourceComponentActions<T>;
     api: InfiniteTableApi<T>;
     dataSourceApi: DataSourceApi<T>;
@@ -1653,6 +1654,7 @@ interface InfiniteTableContextValue<T> {
     getComputed: () => InfiniteTableComputedValues<T>;
     getState: () => InfiniteTableState<T>;
     getDataSourceState: () => DataSourceState<T>;
+    getDataSourceMasterContext: () => DataSourceMasterDetailContextValue | undefined;
 }
 interface InfiniteTablePublicContext<T> {
     api: InfiniteTableApi<T>;
@@ -1793,6 +1795,7 @@ declare class Indexer<DataType, PrimaryKeyType = string> {
 
 interface DataSourceDataParams<T> {
     originalDataArray: T[];
+    masterRowInfo?: InfiniteTableRowInfo<any>;
     sortInfo?: DataSourceSortInfo<T>;
     groupBy?: DataSourcePropGroupBy<T>;
     pivotBy?: DataSourcePropPivotBy<T>;
@@ -1910,6 +1913,7 @@ declare type LazyRowInfoGroup<DataType> = {
 declare type LazyGroupDataDeepMap<DataType, KeyType = string> = DeepMap<KeyType, LazyRowInfoGroup<DataType>>;
 interface DataSourceSetupState<T> {
     indexer: Indexer<T, any>;
+    getDataSourceMasterContextRef: React$1.MutableRefObject<() => DataSourceMasterDetailContextValue | undefined>;
     destroyedRef: React$1.MutableRefObject<boolean>;
     idToIndexMap: Map<any, number>;
     detailDataSourcesStateToRestore: Map<any, Partial<DataSourceStateRestoreForDetails<any>>>;
@@ -2178,12 +2182,14 @@ interface DataSourceContextValue<T> {
     api: DataSourceApi<T>;
     getState: () => DataSourceState<T>;
     assignState: (state: Partial<DataSourceState<T>>) => void;
+    getDataSourceMasterContext: () => DataSourceMasterDetailContextValue | undefined;
     componentState: DataSourceState<T>;
     componentActions: DataSourceComponentActions<T>;
 }
 interface DataSourceMasterDetailContextValue {
     registerDetail: (detail: DataSourceContextValue<any>) => void;
     shouldRestoreState: boolean;
+    masterRowInfo: InfiniteTableRowInfo<any>;
 }
 declare enum DataSourceActionType {
     INIT = "INIT"

package/index.dev.js

@@ -1142,6 +1142,7 @@ function getDataSourceContext() {
     api: null,
     getState: () => null,
     assignState: () => null,
+    getDataSourceMasterContext: () => void 0,
     componentState: null,
     componentActions: null
   });
@@ -8346,7 +8347,8 @@ function InfiniteTableColumnCellFn(props) {
     getState,
     actions: componentActions,
     computed,
-    api: imperativeApi
+    api: imperativeApi,
+    getDataSourceMasterContext
   } = useInfiniteTable();
   const {
     componentState: dataSourceState,
@@ -8359,6 +8361,7 @@ function InfiniteTableColumnCellFn(props) {
   const renderingContext = {
     getState,
     getDataSourceState,
+    getDataSourceMasterContext,
     actions: componentActions,
     dataSourceActions,
     api: imperativeApi,
@@ -9255,7 +9258,8 @@ function InfiniteTableHeaderCell(props) {
       columnHeaderHeight,
       columnReorderDragColumnId,
       columnMenuVisibleForColumnId
-    }
+    },
+    getDataSourceMasterContext
   } = useInfiniteTable();
   const {
     api: dataSourceApi,
@@ -9287,6 +9291,7 @@ function InfiniteTableHeaderCell(props) {
     dataSourceApi,
     getComputed,
     getDataSourceState,
+    getDataSourceMasterContext,
     getState
   });
   const computedSortable = columnApi.isSortable();
@@ -13553,7 +13558,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 = {
@@ -13566,6 +13571,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();
   }
@@ -13612,8 +13620,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;
@@ -13793,6 +13805,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,
@@ -13813,8 +13834,7 @@ function useLoadData() {
     livePagination,
     livePaginationCursor,
     filterTypes,
-    cursorId: stateCursorId,
-    stateReadyAsDetails
+    cursorId: stateCursorId
   } = componentState;
   const [scrollbars, setScrollbars] = (0, import_react35.useState)({
     vertical: false,
@@ -13886,21 +13906,26 @@ function useLoadData() {
   };
   const initialRef = (0, import_react35.useRef)(true);
   useLazyLoadRange();
-  const masterContext = useMasterDetailContext();
-  const isDetail = !!masterContext;
-  const isDetailRef = (0, import_react35.useRef)(!!masterContext);
-  isDetailRef.current = isDetail;
-  const isDetailReady = isDetail ? masterContext.shouldRestoreState ? stateReadyAsDetails : true : true;
-  const isDetailReadyRef = (0, import_react35.useRef)(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 }
@@ -13915,14 +13940,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 })
@@ -13931,7 +13967,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);
@@ -14224,6 +14264,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(),
@@ -14491,10 +14532,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(() => {
@@ -14503,10 +14549,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(() => {
@@ -14515,10 +14566,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(() => {
@@ -14527,10 +14583,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(() => {
@@ -14539,15 +14600,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 }) => {
@@ -14556,7 +14627,8 @@ function getInterceptActions() {
         state.dataParams,
         /* @__PURE__ */ new Set([
           "changes",
-          "originalDataArray"
+          "originalDataArray",
+          "masterRowInfo"
         ])
       )) {
         return false;
@@ -14754,7 +14826,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 });
@@ -14762,6 +14836,7 @@ function DataSourceCmp({
   const contextValue = {
     componentState,
     componentActions,
+    getDataSourceMasterContext,
     getState,
     assignState,
     api
@@ -15657,9 +15732,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)) {
@@ -16493,6 +16574,7 @@ function useRegisterDetail(props) {
       shouldRestoreState
     };
   }, [rowInfo.id, currentRowCache]);
+  masterDetailContextValue.masterRowInfo = rowInfo;
   return { masterDetailContextValue, currentRowCache };
 }
 
@@ -17352,7 +17434,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 : {},
@@ -17566,7 +17648,11 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 var import_react46 = require("react");
 function useToggleGroupRow() {
-  const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
+  const {
+    getState: getDataSourceState,
+    componentActions: dataSourceActions,
+    getDataSourceMasterContext
+  } = useDataSourceContextValue();
   const toggleGroupRow = (0, import_react46.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
@@ -17577,9 +17663,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)) {
@@ -18638,7 +18730,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react53.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.2.0"
+      version: "3.2.2"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19443,7 +19535,8 @@ function useEventHandlersContext() {
     getState,
     actions,
     api,
-    getComputed
+    getComputed,
+    getDataSourceMasterContext
   } = useInfiniteTable();
   const {
     getState: getDataSourceState,
@@ -19453,6 +19546,7 @@ function useEventHandlersContext() {
   const context = (0, import_react56.useMemo)(() => {
     const context2 = {
       getComputed,
+      getDataSourceMasterContext,
       dataSourceApi,
       api,
       getState,
@@ -21413,11 +21507,12 @@ function FocusDetect() {
     dataSourceApi,
     dataSourceActions
   } = useInfiniteTable();
-  const { getState: getDataSourceState } = useDataSourceContextValue();
+  const { getState: getDataSourceState, getDataSourceMasterContext } = useDataSourceContextValue();
   const { focusDetectDOMRef } = getState();
   const onFocus = (0, import_react62.useCallback)(() => __async(this, null, function* () {
     const context = {
       getDataSourceState,
+      getDataSourceMasterContext,
       getComputed,
       actions,
       dataSourceActions,
@@ -22276,6 +22371,7 @@ function InfiniteTableContextProvider() {
   const {
     getState: getDataSourceState,
     componentActions: dataSourceActions,
+    getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
   const [imperativeApi] = React66.useState(() => {
@@ -22283,6 +22379,7 @@ function InfiniteTableContextProvider() {
       getComputed,
       getState,
       getDataSourceState,
+      getDataSourceMasterContext,
       dataSourceApi,
       actions: componentActions,
       dataSourceActions
@@ -22293,6 +22390,7 @@ function InfiniteTableContextProvider() {
     state: componentState,
     computed,
     dataSourceActions,
+    getDataSourceMasterContext,
     getDataSourceState,
     getComputed,
     getState,