@legendapp/list 1.0.0-beta.5 → 1.0.0-beta.7

package/index.d.mts

@@ -120,6 +120,7 @@ interface InternalState {
         bottom: number;
     } | undefined;
     enableScrollForNextCalculateItemsInView: boolean;
+    minIndexSizeChanged: number | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.d.ts

@@ -120,6 +120,7 @@ interface InternalState {
         bottom: number;
     } | undefined;
     enableScrollForNextCalculateItemsInView: boolean;
+    minIndexSizeChanged: number | undefined;
 }
 interface ViewableRange<T> {
     startBuffered: number;

package/index.js

@@ -229,7 +229,7 @@ var Container = ({
   if (isNewArchitecture) {
     React5.useLayoutEffect(() => {
       var _a, _b;
-      if (itemKey) {
+      if (itemKey !== void 0) {
         const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
@@ -254,12 +254,24 @@ var Container = ({
 var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
   return React5.useRef(new reactNative.Animated.Value(initialValue)).current;
 });
-function useValue$(key, getValue, key2) {
+function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
   React5.useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(getValue ? getValue(v) : v));
+    let newValue = void 0;
+    listen$(ctx, key, (v) => {
+      if (useMicrotask && newValue === void 0) {
+        queueMicrotask(() => {
+          animValue.setValue(newValue);
+          newValue = void 0;
+        });
+      }
+      newValue = getValue ? getValue(v) : v;
+      if (!useMicrotask) {
+        animValue.setValue(newValue);
+      }
+    });
   }, []);
   return animValue;
 }
@@ -274,7 +286,12 @@ var Containers = React5__namespace.memo(function Containers2({
   getRenderedItem
 }) {
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSize",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
@@ -343,7 +360,7 @@ var ListComponent = React5__namespace.memo(function ListComponent2({
     {
       ...rest,
       style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -694,7 +711,8 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -856,8 +874,11 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    const originalStartId = startBufferedIdOrig && state.indexByKey.get(startBufferedIdOrig);
-    let loopStart = originalStartId || 0;
+    let loopStart = startBufferedIdOrig ? state.indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    if (state.minIndexSizeChanged !== void 0) {
+      loopStart = Math.min(state.minIndexSizeChanged, loopStart);
+      state.minIndexSizeChanged = void 0;
+    }
     const anchorElementIndex = getAnchorElementIndex();
     for (let i = loopStart; i >= 0; i--) {
       const id = getId(i);
@@ -1152,12 +1173,12 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerItemData${i}`, void 0);
             set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${i}`, -1);
           }
         }
         if (!keyExtractorProp) {
-          state.sizes.clear();
           state.positions.clear();
         }
         calculateItemsInView(state.scrollVelocity);
@@ -1173,7 +1194,6 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
-      refState.current.sizes.clear();
       refState.current.positions.clear();
     }
     refState.current.data = data;
@@ -1185,6 +1205,13 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     let maxSizeInRow = 0;
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
+      if (__DEV__) {
+        if (indexByKey.has(key)) {
+          console.error(
+            `[legend-list] Error: Detected overlapping key (${key}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
+          );
+        }
+      }
       indexByKey.set(key, i);
       if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
         newPositions.set(key, refState.current.positions.get(key));
@@ -1323,6 +1350,7 @@ var LegendListInner = React5.forwardRef(function LegendListInner2(props, forward
     const { sizes, indexByKey, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
+    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {

package/index.mjs

@@ -208,7 +208,7 @@ var Container = ({
   if (isNewArchitecture) {
     useLayoutEffect(() => {
       var _a, _b;
-      if (itemKey) {
+      if (itemKey !== void 0) {
         const measured = (_b = (_a = ref.current) == null ? void 0 : _a.unstable_getBoundingClientRect) == null ? void 0 : _b.call(_a);
         if (measured) {
           const size = Math.floor(measured[horizontal ? "width" : "height"] * 8) / 8;
@@ -233,12 +233,24 @@ var Container = ({
 var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
 });
-function useValue$(key, getValue, key2) {
+function useValue$(key, getValue, useMicrotask) {
   var _a;
   const ctx = useStateContext();
   const animValue = useAnimatedValue((_a = getValue ? getValue(peek$(ctx, key)) : peek$(ctx, key)) != null ? _a : 0);
   useMemo(() => {
-    listen$(ctx, key, (v) => animValue.setValue(getValue ? getValue(v) : v));
+    let newValue = void 0;
+    listen$(ctx, key, (v) => {
+      if (useMicrotask && newValue === void 0) {
+        queueMicrotask(() => {
+          animValue.setValue(newValue);
+          newValue = void 0;
+        });
+      }
+      newValue = getValue ? getValue(v) : v;
+      if (!useMicrotask) {
+        animValue.setValue(newValue);
+      }
+    });
   }, []);
   return animValue;
 }
@@ -253,7 +265,12 @@ var Containers = React5.memo(function Containers2({
   getRenderedItem
 }) {
   const numContainers = use$("numContainersPooled");
-  const animSize = useValue$("totalSize");
+  const animSize = useValue$(
+    "totalSize",
+    void 0,
+    /*useMicrotask*/
+    true
+  );
   const animOpacity = waitForInitialLayout ? useValue$("containersDidLayout", (value) => value ? 1 : 0) : void 0;
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
@@ -322,7 +339,7 @@ var ListComponent = React5.memo(function ListComponent2({
     {
       ...rest,
       style,
-      maintainVisibleContentPosition: maintainVisibleContentPosition ? { minIndexForVisible: 0 } : void 0,
+      maintainVisibleContentPosition: maintainVisibleContentPosition && !ListEmptyComponent ? { minIndexForVisible: 0 } : void 0,
       contentContainerStyle: [
         contentContainerStyle,
         horizontal ? {
@@ -673,7 +690,8 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
       rowHeights: /* @__PURE__ */ new Map(),
       startReachedBlockedByTimer: false,
       scrollForNextCalculateItemsInView: void 0,
-      enableScrollForNextCalculateItemsInView: true
+      enableScrollForNextCalculateItemsInView: true,
+      minIndexSizeChanged: 0
     };
     refState.current.idsInFirstRender = new Set(data.map((_, i) => getId(i)));
     if (maintainVisibleContentPosition) {
@@ -835,8 +853,11 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    const originalStartId = startBufferedIdOrig && state.indexByKey.get(startBufferedIdOrig);
-    let loopStart = originalStartId || 0;
+    let loopStart = startBufferedIdOrig ? state.indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    if (state.minIndexSizeChanged !== void 0) {
+      loopStart = Math.min(state.minIndexSizeChanged, loopStart);
+      state.minIndexSizeChanged = void 0;
+    }
     const anchorElementIndex = getAnchorElementIndex();
     for (let i = loopStart; i >= 0; i--) {
       const id = getId(i);
@@ -1131,12 +1152,12 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
           const itemKey = peek$(ctx, `containerItemKey${i}`);
           if (!keyExtractorProp || itemKey && state.indexByKey.get(itemKey) === void 0) {
             set$(ctx, `containerItemKey${i}`, void 0);
+            set$(ctx, `containerItemData${i}`, void 0);
             set$(ctx, `containerPosition${i}`, ANCHORED_POSITION_OUT_OF_VIEW);
             set$(ctx, `containerColumn${i}`, -1);
           }
         }
         if (!keyExtractorProp) {
-          state.sizes.clear();
           state.positions.clear();
         }
         calculateItemsInView(state.scrollVelocity);
@@ -1152,7 +1173,6 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
   const isFirst = !refState.current.renderItem;
   if (isFirst || data !== refState.current.data || numColumnsProp !== peek$(ctx, "numColumns")) {
     if (!keyExtractorProp && !isFirst && data !== refState.current.data) {
-      refState.current.sizes.clear();
       refState.current.positions.clear();
     }
     refState.current.data = data;
@@ -1164,6 +1184,13 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     let maxSizeInRow = 0;
     for (let i = 0; i < data.length; i++) {
       const key = getId(i);
+      if (__DEV__) {
+        if (indexByKey.has(key)) {
+          console.error(
+            `[legend-list] Error: Detected overlapping key (${key}) which causes missing items and gaps and other terrrible things. Check that keyExtractor returns unique values.`
+          );
+        }
+      }
       indexByKey.set(key, i);
       if (refState.current.positions.get(key) != null && refState.current.indexByKey.get(key) === i) {
         newPositions.set(key, refState.current.positions.get(key));
@@ -1302,6 +1329,7 @@ var LegendListInner = forwardRef(function LegendListInner2(props, forwardedRef)
     const { sizes, indexByKey, columns, sizesLaidOut } = state;
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
+    state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const row = Math.floor(index / numColumns);
     const prevSize = getRowHeight(row);
     if (!prevSize || Math.abs(prevSize - size) > 0.5) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "description": "legend-list",
   "sideEffects": false,
   "private": false,