more enhancements

Author: radubrehar

examples/src/pages/tests/table/props/data/lazy-load-grouped-example.page.tsx

@@ -106,7 +106,6 @@ function Cmp() {
   const { dataArrayLength } = useDataSourceSelector((ctx) => {
     return {
       dataArrayLength: ctx.dataSourceState.dataArray.length,
-      loading: ctx.dataSourceState.loading,
     };
   });
   (globalThis as any).dataArrayLength = dataArrayLength;

source/src/components/DataSource/publicHooks/useDataSourceMasterDetailSelector.ts

@@ -3,13 +3,21 @@ import { useCallback, useContext } from 'react';
 import type { DataSourceMasterDetailContextValue } from '../types';
 
 import {
+  createComponentStore,
   useComponentStoreSelector,
   useComponentStoreSingleValue,
 } from '../../../utils/ComponentStore';
 import { getDataSourceMasterDetailStoreContext } from '../DataSourceMasterDetailContext';
 import { DataSourceMasterDetailStore } from '../DataSourceMasterDetailStore';
 import { InfiniteTableRowInfo } from '../../InfiniteTable';
 
+/**
+ * A stable no-op store used as a fallback so that hooks are called
+ * unconditionally (Rules of Hooks) even when outside a detail context.
+ */
+const NOOP_STORE = createComponentStore<any>();
+const NOOP_SELECTOR = () => undefined;
+
 /**
  * Returns the raw master-detail store (or undefined when outside a detail row).
  *
@@ -79,10 +87,15 @@ export function useDataSourceMasterDetailSelector<R extends object>(
   const StoreContext = getDataSourceMasterDetailStoreContext<any>();
   const store = useContext(StoreContext) as DataSourceMasterDetailStore<any>;
 
-  if (!store) {
-    return undefined;
-  }
-  return useComponentStoreSelector(store, selector) ?? undefined;
+  // Always call the hook to satisfy the Rules of Hooks.
+  // When no store exists, use a no-op store + no-op selector so
+  // useSyncExternalStore is still invoked unconditionally.
+  const result = useComponentStoreSelector(
+    store || NOOP_STORE,
+    store ? selector : (NOOP_SELECTOR as unknown as typeof selector),
+  );
+
+  return store ? result ?? undefined : undefined;
 }
 
 export function useMasterRowInfo<T = any>():
@@ -91,11 +104,15 @@ export function useMasterRowInfo<T = any>():
   const StoreContext = getDataSourceMasterDetailStoreContext<any>();
   const store = useContext(StoreContext) as DataSourceMasterDetailStore<any>;
 
-  if (!store) {
-    return undefined;
-  }
-  return useComponentStoreSingleValue(
-    store,
-    (ctx) => ctx.masterRowInfo as InfiniteTableRowInfo<T>,
+  // Always call the hook to satisfy the Rules of Hooks.
+  const masterRowInfoSelector = store
+    ? (ctx: any) => ctx.masterRowInfo as InfiniteTableRowInfo<T>
+    : (NOOP_SELECTOR as unknown as (ctx: any) => InfiniteTableRowInfo<T>);
+
+  const result = useComponentStoreSingleValue(
+    store || NOOP_STORE,
+    masterRowInfoSelector,
   );
+
+  return store ? result : undefined;
 }

source/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx

@@ -67,7 +67,6 @@ function InfiniteTableInternalHeaderFn<T>(
         string,
         InfiniteTableComputedColumn<T>
       >,
-      computed: ctx.computed,
       getState: ctx.getState,
       headerOptions: ctx.state.headerOptions,
       headerRenderer: ctx.state.headerRenderer,

source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx

@@ -53,6 +53,9 @@ function InfiniteTableDetailRowFn<T>(props: InfiniteTableDetailRowProps<T>) {
 
   React.useLayoutEffect(() => {
     masterDetailStore.notify();
+    // this value is different whenever masterRowInfo.id changes
+    // so we're fine with this not triggering a notification
+    // on all renders
   }, [masterDetailContextValue]);
 
   return (

source/src/components/InfiniteTable/hooks/useCellRendering.tsx

@@ -78,7 +78,6 @@ export function useCellRendering<T>(
   } = useInfiniteTableSelector((ctx) => {
     return {
       actions: ctx.actions,
-      state: ctx.state,
       getState: ctx.getState,
       getComputed: ctx.getComputed,
       getDataSourceMasterContext: ctx.getDataSourceMasterContext,