@legendapp/list 3.3.1 → 3.3.2

package/react-native.web.d.ts

@@ -31,7 +31,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemInfo${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -71,6 +71,8 @@ type ListenerTypeValueMap = {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
+} & {
+    [K in ListenerType as K extends `containerItemInfo${number}` ? K : never]: ContainerItemInfo;
 } & {
     [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
 } & {
@@ -80,6 +82,11 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
+interface ContainerItemInfo {
+    index: number;
+    itemKey: string;
+    value: any;
+}
 
 interface Insets {
     top: number;

package/react-native.web.js

@@ -148,6 +148,7 @@ var createAnimatedValue = (value) => value;
 
 // src/state/state.tsx
 var ContextState = React3__namespace.createContext(null);
+var SIGNAL_NAMES_SEPARATOR = "\0";
 var contextNum = 0;
 function StateProvider({ children }) {
   const [value] = React3__namespace.useState(() => ({
@@ -219,6 +220,12 @@ function createSelectorFunctionsArr(ctx, signalNames) {
     }
   };
 }
+function getSignalNamesKey(signalNames) {
+  return signalNames.length === 1 ? signalNames[0] : signalNames.join(SIGNAL_NAMES_SEPARATOR);
+}
+function getSignalNamesFromKey(signalNamesKey) {
+  return signalNamesKey.split(SIGNAL_NAMES_SEPARATOR);
+}
 function listen$(ctx, signalName, cb) {
   const { listeners } = ctx;
   let setListeners = listeners.get(signalName);
@@ -266,7 +273,11 @@ function notifyPosition$(ctx, key, value) {
 }
 function useArr$(signalNames) {
   const ctx = React3__namespace.useContext(ContextState);
-  const { subscribe, get } = React3__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const signalNamesKey = getSignalNamesKey(signalNames);
+  const { subscribe, get } = React3__namespace.useMemo(
+    () => createSelectorFunctionsArr(ctx, getSignalNamesFromKey(signalNamesKey)),
+    [ctx, signalNamesKey]
+  );
   const value = shim.useSyncExternalStore(subscribe, get, get);
   return value;
 }
@@ -553,9 +564,22 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = React3.createContext(null);
+var NO_CONTAINER_ID = -1;
 function useContextContainer() {
   return React3.useContext(ContextContainer);
 }
+function useContainerItemInfo(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemInfo] = useArr$([`containerItemInfo${containerId}`]);
+  return containerContext ? itemInfo : void 0;
+}
+function useContainerItemKey(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemKey] = useArr$([`containerItemKey${containerId}`]);
+  return containerContext ? itemKey : void 0;
+}
 function useAdaptiveRender() {
   const [mode] = useArr$(["adaptiveRender"]);
   return mode;
@@ -626,40 +650,35 @@ function useViewabilityAmount(callback) {
 }
 function useRecyclingEffect(effect) {
   const containerContext = useContextContainer();
-  const prevValues = React3.useRef({
-    prevIndex: void 0,
-    prevItem: void 0
-  });
+  const itemInfo = useContainerItemInfo(containerContext);
+  const prevInfo = React3.useRef(void 0);
   React3.useEffect(() => {
-    if (!containerContext) {
+    if (!itemInfo) {
       return;
     }
-    const { index, value } = containerContext;
     let ret;
-    if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
+    if (prevInfo.current) {
       ret = effect({
-        index,
-        item: value,
-        prevIndex: prevValues.current.prevIndex,
-        prevItem: prevValues.current.prevItem
+        index: itemInfo.index,
+        item: itemInfo.value,
+        prevIndex: prevInfo.current.index,
+        prevItem: prevInfo.current.value
       });
     }
-    prevValues.current = {
-      prevIndex: index,
-      prevItem: value
-    };
+    prevInfo.current = itemInfo;
     return ret;
-  }, [effect, containerContext]);
+  }, [effect, itemInfo]);
 }
 function useRecyclingState(valueOrFun) {
-  var _a3, _b;
+  var _a3;
   const containerContext = useContextContainer();
-  const computeValue = (ctx) => {
+  const itemInfo = useContainerItemInfo(containerContext);
+  const computeValue = (info) => {
     if (isFunction(valueOrFun)) {
       const initializer = valueOrFun;
-      return ctx ? initializer({
-        index: ctx.index,
-        item: ctx.value,
+      return info ? initializer({
+        index: info.index,
+        item: info.value,
         prevIndex: void 0,
         prevItem: void 0
       }) : initializer();
@@ -667,13 +686,12 @@ function useRecyclingState(valueOrFun) {
     return valueOrFun;
   };
   const [stateValue, setStateValue] = React3.useState(() => {
-    return computeValue(containerContext);
+    return computeValue(itemInfo);
   });
-  const prevItemKeyRef = React3.useRef((_a3 = containerContext == null ? void 0 : containerContext.itemKey) != null ? _a3 : null);
-  const currentItemKey = (_b = containerContext == null ? void 0 : containerContext.itemKey) != null ? _b : null;
-  if (currentItemKey !== null && prevItemKeyRef.current !== currentItemKey) {
-    prevItemKeyRef.current = currentItemKey;
-    setStateValue(computeValue(containerContext));
+  const prevItemKeyRef = React3.useRef((_a3 = itemInfo == null ? void 0 : itemInfo.itemKey) != null ? _a3 : null);
+  if (itemInfo && prevItemKeyRef.current !== itemInfo.itemKey) {
+    prevItemKeyRef.current = itemInfo.itemKey;
+    setStateValue(computeValue(itemInfo));
   }
   const triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = React3.useCallback(
@@ -692,12 +710,10 @@ function useRecyclingState(valueOrFun) {
 }
 function useIsLastItem() {
   const containerContext = useContextContainer();
+  const itemKey = useContainerItemKey(containerContext);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
-    if (containerContext) {
-      const { itemKey } = containerContext;
-      if (!isNullOrUndefined(itemKey)) {
-        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
-      }
+    if (containerContext && !isNullOrUndefined(itemKey)) {
+      return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
     }
     return false;
   });
@@ -711,12 +727,7 @@ var noop = () => {
 };
 function useSyncLayout() {
   const containerContext = useContextContainer();
-  if (containerContext) {
-    const { triggerLayout: syncLayout } = containerContext;
-    return syncLayout;
-  } else {
-    return noop;
-  }
+  return containerContext ? containerContext.triggerLayout : noop;
 }
 
 // src/components/Separator.tsx
@@ -3356,22 +3367,28 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       set$(ctx, `containerSpan${containerIndex}`, span);
     }
   }
+  const prevItemInfo = peek$(ctx, `containerItemInfo${containerIndex}`);
   const prevData = peek$(ctx, `containerItemData${containerIndex}`);
+  let itemInfoValue = prevData;
+  let didChangeItemInfo = (prevItemInfo == null ? void 0 : prevItemInfo.itemKey) !== itemKey || (prevItemInfo == null ? void 0 : prevItemInfo.index) !== itemIndex || (prevItemInfo == null ? void 0 : prevItemInfo.value) !== prevData;
+  const updateData = () => {
+    set$(ctx, `containerItemData${containerIndex}`, item);
+    itemInfoValue = item;
+    didChangeItemInfo = true;
+    didRefreshData = true;
+  };
   if (prevData !== item) {
     const pendingDataComparison = ((_e = state.pendingDataComparison) == null ? void 0 : _e.previousData) === state.previousData && ((_f = state.pendingDataComparison) == null ? void 0 : _f.nextData) === data ? state.pendingDataComparison : void 0;
     const cachedComparison = (_g = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _g : 0;
     if (cachedComparison === 2) {
-      set$(ctx, `containerItemData${containerIndex}`, item);
-      didRefreshData = true;
+      updateData();
     } else if (cachedComparison !== 1) {
       const nextItemKey = (_h = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _h : itemKey;
       const prevKey = keyExtractor == null ? void 0 : keyExtractor(prevData, itemIndex);
       if (prevData === void 0 || !keyExtractor || prevKey !== nextItemKey) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else if (!itemsAreEqual) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else {
         const isEqual = itemsAreEqual(prevData, item, itemIndex, data);
         if (!state.pendingDataComparison || state.pendingDataComparison.previousData !== state.previousData || state.pendingDataComparison.nextData !== data) {
@@ -3387,12 +3404,18 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
           state.pendingDataComparison.byIndex[itemIndex] = isEqual ? 1 : 2;
         }
         if (!isEqual) {
-          set$(ctx, `containerItemData${containerIndex}`, item);
-          didRefreshData = true;
+          updateData();
         }
       }
     }
   }
+  if (didChangeItemInfo) {
+    set$(ctx, `containerItemInfo${containerIndex}`, {
+      index: itemIndex,
+      itemKey,
+      value: itemInfoValue
+    });
+  }
   return { didChangePosition, didRefreshData };
 }
 
@@ -4638,6 +4661,11 @@ function calculateItemsInView(ctx, params = {}) {
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          set$(ctx, `containerItemInfo${containerIndex}`, {
+            index: i,
+            itemKey: id,
+            value: data[i]
+          });
           if (allocation.itemType !== void 0) {
             state.containerItemTypes.set(containerIndex, allocation.itemType);
           }
@@ -4704,6 +4732,7 @@ function calculateItemsInView(ctx, params = {}) {
         }
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerItemData${i}`, void 0);
+        set$(ctx, `containerItemInfo${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
         set$(ctx, `containerSpan${i}`, 1);
@@ -5324,12 +5353,9 @@ var Container = typedMemo(function Container2({
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
-      index,
-      itemKey,
-      triggerLayout,
-      value: data
+      triggerLayout
     };
-  }, [id, itemKey, index, data, triggerLayout]);
+  }, [id, triggerLayout]);
   React3.useLayoutEffect(() => {
     ctx.containerLayoutTriggers.set(id, triggerLayout);
     return () => {

package/react-native.web.mjs

@@ -127,6 +127,7 @@ var createAnimatedValue = (value) => value;
 
 // src/state/state.tsx
 var ContextState = React3.createContext(null);
+var SIGNAL_NAMES_SEPARATOR = "\0";
 var contextNum = 0;
 function StateProvider({ children }) {
   const [value] = React3.useState(() => ({
@@ -198,6 +199,12 @@ function createSelectorFunctionsArr(ctx, signalNames) {
     }
   };
 }
+function getSignalNamesKey(signalNames) {
+  return signalNames.length === 1 ? signalNames[0] : signalNames.join(SIGNAL_NAMES_SEPARATOR);
+}
+function getSignalNamesFromKey(signalNamesKey) {
+  return signalNamesKey.split(SIGNAL_NAMES_SEPARATOR);
+}
 function listen$(ctx, signalName, cb) {
   const { listeners } = ctx;
   let setListeners = listeners.get(signalName);
@@ -245,7 +252,11 @@ function notifyPosition$(ctx, key, value) {
 }
 function useArr$(signalNames) {
   const ctx = React3.useContext(ContextState);
-  const { subscribe, get } = React3.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const signalNamesKey = getSignalNamesKey(signalNames);
+  const { subscribe, get } = React3.useMemo(
+    () => createSelectorFunctionsArr(ctx, getSignalNamesFromKey(signalNamesKey)),
+    [ctx, signalNamesKey]
+  );
   const value = useSyncExternalStore(subscribe, get, get);
   return value;
 }
@@ -532,9 +543,22 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+var NO_CONTAINER_ID = -1;
 function useContextContainer() {
   return useContext(ContextContainer);
 }
+function useContainerItemInfo(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemInfo] = useArr$([`containerItemInfo${containerId}`]);
+  return containerContext ? itemInfo : void 0;
+}
+function useContainerItemKey(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemKey] = useArr$([`containerItemKey${containerId}`]);
+  return containerContext ? itemKey : void 0;
+}
 function useAdaptiveRender() {
   const [mode] = useArr$(["adaptiveRender"]);
   return mode;
@@ -605,40 +629,35 @@ function useViewabilityAmount(callback) {
 }
 function useRecyclingEffect(effect) {
   const containerContext = useContextContainer();
-  const prevValues = useRef({
-    prevIndex: void 0,
-    prevItem: void 0
-  });
+  const itemInfo = useContainerItemInfo(containerContext);
+  const prevInfo = useRef(void 0);
   useEffect(() => {
-    if (!containerContext) {
+    if (!itemInfo) {
       return;
     }
-    const { index, value } = containerContext;
     let ret;
-    if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
+    if (prevInfo.current) {
       ret = effect({
-        index,
-        item: value,
-        prevIndex: prevValues.current.prevIndex,
-        prevItem: prevValues.current.prevItem
+        index: itemInfo.index,
+        item: itemInfo.value,
+        prevIndex: prevInfo.current.index,
+        prevItem: prevInfo.current.value
       });
     }
-    prevValues.current = {
-      prevIndex: index,
-      prevItem: value
-    };
+    prevInfo.current = itemInfo;
     return ret;
-  }, [effect, containerContext]);
+  }, [effect, itemInfo]);
 }
 function useRecyclingState(valueOrFun) {
-  var _a3, _b;
+  var _a3;
   const containerContext = useContextContainer();
-  const computeValue = (ctx) => {
+  const itemInfo = useContainerItemInfo(containerContext);
+  const computeValue = (info) => {
     if (isFunction(valueOrFun)) {
       const initializer = valueOrFun;
-      return ctx ? initializer({
-        index: ctx.index,
-        item: ctx.value,
+      return info ? initializer({
+        index: info.index,
+        item: info.value,
         prevIndex: void 0,
         prevItem: void 0
       }) : initializer();
@@ -646,13 +665,12 @@ function useRecyclingState(valueOrFun) {
     return valueOrFun;
   };
   const [stateValue, setStateValue] = useState(() => {
-    return computeValue(containerContext);
+    return computeValue(itemInfo);
   });
-  const prevItemKeyRef = useRef((_a3 = containerContext == null ? void 0 : containerContext.itemKey) != null ? _a3 : null);
-  const currentItemKey = (_b = containerContext == null ? void 0 : containerContext.itemKey) != null ? _b : null;
-  if (currentItemKey !== null && prevItemKeyRef.current !== currentItemKey) {
-    prevItemKeyRef.current = currentItemKey;
-    setStateValue(computeValue(containerContext));
+  const prevItemKeyRef = useRef((_a3 = itemInfo == null ? void 0 : itemInfo.itemKey) != null ? _a3 : null);
+  if (itemInfo && prevItemKeyRef.current !== itemInfo.itemKey) {
+    prevItemKeyRef.current = itemInfo.itemKey;
+    setStateValue(computeValue(itemInfo));
   }
   const triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = useCallback(
@@ -671,12 +689,10 @@ function useRecyclingState(valueOrFun) {
 }
 function useIsLastItem() {
   const containerContext = useContextContainer();
+  const itemKey = useContainerItemKey(containerContext);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
-    if (containerContext) {
-      const { itemKey } = containerContext;
-      if (!isNullOrUndefined(itemKey)) {
-        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
-      }
+    if (containerContext && !isNullOrUndefined(itemKey)) {
+      return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
     }
     return false;
   });
@@ -690,12 +706,7 @@ var noop = () => {
 };
 function useSyncLayout() {
   const containerContext = useContextContainer();
-  if (containerContext) {
-    const { triggerLayout: syncLayout } = containerContext;
-    return syncLayout;
-  } else {
-    return noop;
-  }
+  return containerContext ? containerContext.triggerLayout : noop;
 }
 
 // src/components/Separator.tsx
@@ -3335,22 +3346,28 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       set$(ctx, `containerSpan${containerIndex}`, span);
     }
   }
+  const prevItemInfo = peek$(ctx, `containerItemInfo${containerIndex}`);
   const prevData = peek$(ctx, `containerItemData${containerIndex}`);
+  let itemInfoValue = prevData;
+  let didChangeItemInfo = (prevItemInfo == null ? void 0 : prevItemInfo.itemKey) !== itemKey || (prevItemInfo == null ? void 0 : prevItemInfo.index) !== itemIndex || (prevItemInfo == null ? void 0 : prevItemInfo.value) !== prevData;
+  const updateData = () => {
+    set$(ctx, `containerItemData${containerIndex}`, item);
+    itemInfoValue = item;
+    didChangeItemInfo = true;
+    didRefreshData = true;
+  };
   if (prevData !== item) {
     const pendingDataComparison = ((_e = state.pendingDataComparison) == null ? void 0 : _e.previousData) === state.previousData && ((_f = state.pendingDataComparison) == null ? void 0 : _f.nextData) === data ? state.pendingDataComparison : void 0;
     const cachedComparison = (_g = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _g : 0;
     if (cachedComparison === 2) {
-      set$(ctx, `containerItemData${containerIndex}`, item);
-      didRefreshData = true;
+      updateData();
     } else if (cachedComparison !== 1) {
       const nextItemKey = (_h = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _h : itemKey;
       const prevKey = keyExtractor == null ? void 0 : keyExtractor(prevData, itemIndex);
       if (prevData === void 0 || !keyExtractor || prevKey !== nextItemKey) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else if (!itemsAreEqual) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else {
         const isEqual = itemsAreEqual(prevData, item, itemIndex, data);
         if (!state.pendingDataComparison || state.pendingDataComparison.previousData !== state.previousData || state.pendingDataComparison.nextData !== data) {
@@ -3366,12 +3383,18 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
           state.pendingDataComparison.byIndex[itemIndex] = isEqual ? 1 : 2;
         }
         if (!isEqual) {
-          set$(ctx, `containerItemData${containerIndex}`, item);
-          didRefreshData = true;
+          updateData();
         }
       }
     }
   }
+  if (didChangeItemInfo) {
+    set$(ctx, `containerItemInfo${containerIndex}`, {
+      index: itemIndex,
+      itemKey,
+      value: itemInfoValue
+    });
+  }
   return { didChangePosition, didRefreshData };
 }
 
@@ -4617,6 +4640,11 @@ function calculateItemsInView(ctx, params = {}) {
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          set$(ctx, `containerItemInfo${containerIndex}`, {
+            index: i,
+            itemKey: id,
+            value: data[i]
+          });
           if (allocation.itemType !== void 0) {
             state.containerItemTypes.set(containerIndex, allocation.itemType);
           }
@@ -4683,6 +4711,7 @@ function calculateItemsInView(ctx, params = {}) {
         }
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerItemData${i}`, void 0);
+        set$(ctx, `containerItemInfo${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
         set$(ctx, `containerSpan${i}`, 1);
@@ -5303,12 +5332,9 @@ var Container = typedMemo(function Container2({
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
-      index,
-      itemKey,
-      triggerLayout,
-      value: data
+      triggerLayout
     };
-  }, [id, itemKey, index, data, triggerLayout]);
+  }, [id, triggerLayout]);
   useLayoutEffect(() => {
     ctx.containerLayoutTriggers.set(id, triggerLayout);
     return () => {

package/react.d.ts

@@ -31,7 +31,7 @@ interface MaintainVisibleContentPositionNormalized<ItemT = any> {
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
 
-type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type ListenerType = "activeStickyIndex" | "alignItemsAtEndPadding" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemInfo${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
 type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "adaptiveRender" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
 type ListenerTypeValueMap = {
     activeStickyIndex: number;
@@ -71,6 +71,8 @@ type ListenerTypeValueMap = {
     [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
 } & {
     [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
+} & {
+    [K in ListenerType as K extends `containerItemInfo${number}` ? K : never]: ContainerItemInfo;
 } & {
     [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
 } & {
@@ -80,6 +82,11 @@ type ListenerTypeValueMap = {
 } & {
     [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
 };
+interface ContainerItemInfo {
+    index: number;
+    itemKey: string;
+    value: any;
+}
 
 interface Insets {
     top: number;