@legendapp/list 3.0.0-beta.20 → 3.0.0-beta.22

package/index.js

@@ -35,7 +35,7 @@ var Text = View;
 
 // src/state/getContentInsetEnd.ts
 function getContentInsetEnd(state) {
-  var _a3;
+  var _a3, _b;
   const { props } = state;
   const horizontal = props.horizontal;
   let contentInset = props.contentInset;
@@ -49,7 +49,16 @@ function getContentInsetEnd(state) {
       }
     }
   }
-  return (horizontal ? contentInset == null ? void 0 : contentInset.right : contentInset == null ? void 0 : contentInset.bottom) || 0;
+  const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
+  const overrideInset = (_b = state.contentInsetOverride) != null ? _b : void 0;
+  if (overrideInset) {
+    const mergedInset = { top: 0, left: 0, right: 0, bottom: 0, ...baseInset, ...overrideInset };
+    return (horizontal ? mergedInset.right : mergedInset.bottom) || 0;
+  }
+  if (baseInset) {
+    return (horizontal ? baseInset.right : baseInset.bottom) || 0;
+  }
+  return 0;
 }
 
 // src/state/getContentSize.ts
@@ -316,7 +325,7 @@ var PositionViewState = typedMemo(function PositionViewState2({
   };
   const composed = isArray(style) ? Object.assign({}, ...style) : style;
   const combinedStyle = horizontal ? { ...base, ...composed, left: position } : { ...base, ...composed, top: position };
-  const { animatedScrollY, stickyOffset, onLayout, ...webProps } = props;
+  const { animatedScrollY, stickyOffset, onLayout, index, ...webProps } = props;
   return /* @__PURE__ */ React3__namespace.createElement("div", { ref: refView, ...webProps, style: combinedStyle });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
@@ -1753,7 +1762,7 @@ function updateScroll(ctx, newScroll, forceUpdate) {
   const scrollDelta = Math.abs(newScroll - prevScroll);
   const scrollLength = state.scrollLength;
   const lastCalculated = state.scrollLastCalculate;
-  const shouldUpdate = state.dataChangeNeedsScrollUpdate || state.scrollLastCalculate === void 0 || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
+  const shouldUpdate = forceUpdate || state.dataChangeNeedsScrollUpdate || state.scrollLastCalculate === void 0 || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
   if (shouldUpdate) {
     state.scrollLastCalculate = state.scroll;
     state.ignoreScrollFromMVCPIgnored = false;
@@ -2532,7 +2541,7 @@ function getActiveStickyIndices(ctx, stickyHeaderIndices) {
     Array.from(state.stickyContainerPool).map((i) => peek$(ctx, `containerItemKey${i}`)).map((key) => key ? state.indexByKey.get(key) : void 0).filter((idx) => idx !== void 0 && stickyHeaderIndices.has(idx))
   );
 }
-function handleStickyActivation(ctx, stickyHeaderIndices, stickyArray, currentStickyIdx, needNewContainers, startBuffered, endBuffered) {
+function handleStickyActivation(ctx, stickyHeaderIndices, stickyArray, currentStickyIdx, needNewContainers, needNewContainersSet, startBuffered, endBuffered) {
   var _a3;
   const state = ctx.state;
   const activeIndices = getActiveStickyIndices(ctx, stickyHeaderIndices);
@@ -2542,18 +2551,20 @@ function handleStickyActivation(ctx, stickyHeaderIndices, stickyArray, currentSt
     if (idx < 0 || activeIndices.has(stickyArray[idx])) continue;
     const stickyIndex = stickyArray[idx];
     const stickyId = (_a3 = state.idCache[stickyIndex]) != null ? _a3 : getId(state, stickyIndex);
-    if (stickyId && !state.containerItemKeys.has(stickyId) && (stickyIndex < startBuffered || stickyIndex > endBuffered)) {
+    if (stickyId && !state.containerItemKeys.has(stickyId) && (stickyIndex < startBuffered || stickyIndex > endBuffered) && !needNewContainersSet.has(stickyIndex)) {
+      needNewContainersSet.add(stickyIndex);
       needNewContainers.push(stickyIndex);
     }
   }
 }
-function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentStickyIdx, pendingRemoval) {
+function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentStickyIdx, pendingRemoval, alwaysRenderIndicesSet) {
   var _a3, _b, _c;
   const state = ctx.state;
   for (const containerIndex of state.stickyContainerPool) {
     const itemKey = peek$(ctx, `containerItemKey${containerIndex}`);
     const itemIndex = itemKey ? state.indexByKey.get(itemKey) : void 0;
     if (itemIndex === void 0) continue;
+    if (alwaysRenderIndicesSet.has(itemIndex)) continue;
     const arrayIdx = stickyArray.indexOf(itemIndex);
     if (arrayIdx === -1) {
       state.stickyContainerPool.delete(containerIndex);
@@ -2585,7 +2596,7 @@ function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentSt
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   reactDom.unstable_batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     const {
       columns,
       containerItemKeys,
@@ -2595,7 +2606,15 @@ function calculateItemsInView(ctx, params = {}) {
       initialScroll,
       minIndexSizeChanged,
       positions,
-      props: { getItemType, itemsAreEqual, keyExtractor, onStickyHeaderChange, scrollBuffer },
+      props: {
+        alwaysRenderIndicesArr,
+        alwaysRenderIndicesSet,
+        getItemType,
+        itemsAreEqual,
+        keyExtractor,
+        onStickyHeaderChange,
+        scrollBuffer
+      },
       scrollForNextCalculateItemsInView,
       scrollLength,
       sizes,
@@ -2605,6 +2624,8 @@ function calculateItemsInView(ctx, params = {}) {
     const { data } = state.props;
     const stickyIndicesArr = state.props.stickyIndicesArr || [];
     const stickyIndicesSet = state.props.stickyIndicesSet || /* @__PURE__ */ new Set();
+    const alwaysRenderArr = alwaysRenderIndicesArr || [];
+    const alwaysRenderSet = alwaysRenderIndicesSet || /* @__PURE__ */ new Set();
     const prevNumContainers = peek$(ctx, "numContainers");
     if (!data || scrollLength === 0 || !prevNumContainers) {
       return;
@@ -2781,12 +2802,24 @@ function calculateItemsInView(ctx, params = {}) {
     }
     if (startBuffered !== null && endBuffered !== null) {
       const needNewContainers = [];
+      const needNewContainersSet = /* @__PURE__ */ new Set();
       for (let i = startBuffered; i <= endBuffered; i++) {
         const id = (_h = idCache[i]) != null ? _h : getId(state, i);
         if (!containerItemKeys.has(id)) {
+          needNewContainersSet.add(i);
           needNewContainers.push(i);
         }
       }
+      if (alwaysRenderArr.length > 0) {
+        for (const index of alwaysRenderArr) {
+          if (index < 0 || index >= dataLength) continue;
+          const id = (_i = idCache[index]) != null ? _i : getId(state, index);
+          if (id && !containerItemKeys.has(id) && !needNewContainersSet.has(index)) {
+            needNewContainersSet.add(index);
+            needNewContainers.push(index);
+          }
+        }
+      }
       if (stickyIndicesArr.length > 0) {
         handleStickyActivation(
           ctx,
@@ -2794,6 +2827,7 @@ function calculateItemsInView(ctx, params = {}) {
           stickyIndicesArr,
           currentStickyIdx,
           needNewContainers,
+          needNewContainersSet,
           startBuffered,
           endBuffered
         );
@@ -2817,7 +2851,7 @@ function calculateItemsInView(ctx, params = {}) {
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_i = idCache[i]) != null ? _i : getId(state, i);
+          const id = (_j = idCache[i]) != null ? _j : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -2829,14 +2863,23 @@ function calculateItemsInView(ctx, params = {}) {
           }
           containerItemKeys.set(id, containerIndex);
           const containerSticky = `containerSticky${containerIndex}`;
-          if (stickyIndicesSet.has(i)) {
+          const isSticky = stickyIndicesSet.has(i);
+          const isAlwaysRender = alwaysRenderSet.has(i);
+          if (isSticky) {
             set$(ctx, containerSticky, true);
             const topPadding = (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
             set$(ctx, `containerStickyOffset${containerIndex}`, topPadding);
             state.stickyContainerPool.add(containerIndex);
-          } else if (peek$(ctx, containerSticky)) {
-            set$(ctx, containerSticky, false);
-            state.stickyContainerPool.delete(containerIndex);
+          } else {
+            if (peek$(ctx, containerSticky)) {
+              set$(ctx, containerSticky, false);
+              set$(ctx, `containerStickyOffset${containerIndex}`, void 0);
+            }
+            if (isAlwaysRender) {
+              state.stickyContainerPool.add(containerIndex);
+            } else if (state.stickyContainerPool.has(containerIndex)) {
+              state.stickyContainerPool.delete(containerIndex);
+            }
           }
           if (containerIndex >= numContainers) {
             numContainers = containerIndex + 1;
@@ -2849,9 +2892,27 @@ function calculateItemsInView(ctx, params = {}) {
           }
         }
       }
+      if (alwaysRenderArr.length > 0) {
+        for (const index of alwaysRenderArr) {
+          if (index < 0 || index >= dataLength) continue;
+          const id = (_k = idCache[index]) != null ? _k : getId(state, index);
+          const containerIndex = containerItemKeys.get(id);
+          if (containerIndex !== void 0) {
+            state.stickyContainerPool.add(containerIndex);
+          }
+        }
+      }
     }
-    if (stickyIndicesArr.length > 0) {
-      handleStickyRecycling(ctx, stickyIndicesArr, scroll, scrollBuffer, currentStickyIdx, pendingRemoval);
+    if (state.stickyContainerPool.size > 0) {
+      handleStickyRecycling(
+        ctx,
+        stickyIndicesArr,
+        scroll,
+        scrollBuffer,
+        currentStickyIdx,
+        pendingRemoval,
+        alwaysRenderSet
+      );
     }
     let didChangePositions = false;
     for (let i = 0; i < numContainers; i++) {
@@ -2874,7 +2935,7 @@ function calculateItemsInView(ctx, params = {}) {
         const itemIndex = indexByKey.get(itemKey);
         const item = data[itemIndex];
         if (item !== void 0) {
-          const id = (_j = idCache[itemIndex]) != null ? _j : getId(state, itemIndex);
+          const id = (_l = idCache[itemIndex]) != null ? _l : getId(state, itemIndex);
           const positionValue = positions.get(id);
           if (positionValue === void 0) {
             set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
@@ -3191,7 +3252,7 @@ function handleLayout(ctx, layout, setCanRender) {
 
 // src/core/onScroll.ts
 function onScroll(ctx, event) {
-  var _a3, _b, _c;
+  var _a3, _b, _c, _d;
   const state = ctx.state;
   const {
     scrollProcessingEnabled,
@@ -3203,6 +3264,15 @@ function onScroll(ctx, event) {
   if (((_b = (_a3 = event.nativeEvent) == null ? void 0 : _a3.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
     return;
   }
+  let insetChanged = false;
+  if ((_d = event.nativeEvent) == null ? void 0 : _d.contentInset) {
+    const { contentInset } = event.nativeEvent;
+    const prevInset = state.nativeContentInset;
+    if (!prevInset || prevInset.top !== contentInset.top || prevInset.bottom !== contentInset.bottom || prevInset.left !== contentInset.left || prevInset.right !== contentInset.right) {
+      state.nativeContentInset = contentInset;
+      insetChanged = true;
+    }
+  }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
   if (state.scrollingTo) {
     const maxOffset = clampScrollOffset(ctx, newScroll);
@@ -3218,7 +3288,7 @@ function onScroll(ctx, event) {
     }
   }
   state.scrollPending = newScroll;
-  updateScroll(ctx, newScroll);
+  updateScroll(ctx, newScroll, insetChanged);
   if (state.scrollingTo) {
     checkFinishedScroll(ctx);
   }
@@ -3391,7 +3461,10 @@ function updateOneItemSize(ctx, itemKey, sizeObj) {
     if (!averages) {
       averages = averageSizes[itemType] = { avg: 0, num: 0 };
     }
-    if (prevSizeKnown !== void 0 && prevSizeKnown > 0) {
+    if (averages.num === 0) {
+      averages.avg = size;
+      averages.num++;
+    } else if (prevSizeKnown !== void 0 && prevSizeKnown > 0) {
       averages.avg += (size - prevSizeKnown) / averages.num;
     } else {
       averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
@@ -3476,7 +3549,7 @@ function createImperativeHandle(ctx) {
     getScrollResponder: () => refScroller.current.getScrollResponder(),
     getState: () => ({
       activeStickyIndex: peek$(ctx, "activeStickyIndex"),
-      contentLength: state.totalSize,
+      contentLength: getContentSize(ctx),
       data: state.props.data,
       elementAtIndex: (index) => {
         var _a3;
@@ -3492,6 +3565,7 @@ function createImperativeHandle(ctx) {
       positions: state.positions,
       scroll: state.scroll,
       scrollLength: state.scrollLength,
+      scrollVelocity: getScrollVelocity(state),
       sizeAtIndex: (index) => state.sizesKnown.get(getId(state, index)),
       sizes: state.sizesKnown,
       start: state.startNoBuffer,
@@ -3529,6 +3603,10 @@ function createImperativeHandle(ctx) {
       }
     },
     scrollToOffset: (params) => scrollTo(ctx, params),
+    reportContentInset: (inset) => {
+      state.contentInsetOverride = inset != null ? inset : void 0;
+      updateScroll(ctx, state.scroll, true);
+    },
     setScrollProcessingEnabled: (enabled) => {
       state.scrollProcessingEnabled = enabled;
     },
@@ -3538,6 +3616,54 @@ function createImperativeHandle(ctx) {
     }
   };
 }
+
+// src/utils/getAlwaysRenderIndices.ts
+var sortAsc = (a, b) => a - b;
+var toCount = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+var addIndex = (result, dataLength, index) => {
+  if (index >= 0 && index < dataLength) {
+    result.add(index);
+  }
+};
+function getAlwaysRenderIndices(config, data, keyExtractor) {
+  var _a3, _b;
+  if (!config || data.length === 0) {
+    return [];
+  }
+  const result = /* @__PURE__ */ new Set();
+  const dataLength = data.length;
+  const topCount = toCount(config.top);
+  if (topCount > 0) {
+    for (let i = 0; i < Math.min(topCount, dataLength); i++) {
+      addIndex(result, dataLength, i);
+    }
+  }
+  const bottomCount = toCount(config.bottom);
+  if (bottomCount > 0) {
+    for (let i = Math.max(0, dataLength - bottomCount); i < dataLength; i++) {
+      addIndex(result, dataLength, i);
+    }
+  }
+  if ((_a3 = config.indices) == null ? void 0 : _a3.length) {
+    for (const index of config.indices) {
+      if (!Number.isFinite(index)) continue;
+      addIndex(result, dataLength, Math.floor(index));
+    }
+  }
+  if ((_b = config.keys) == null ? void 0 : _b.length) {
+    const keys = new Set(config.keys);
+    for (let i = 0; i < dataLength && keys.size > 0; i++) {
+      const key = keyExtractor(data[i], i);
+      if (keys.has(key)) {
+        addIndex(result, dataLength, i);
+        keys.delete(key);
+      }
+    }
+  }
+  const indices = Array.from(result);
+  indices.sort(sortAsc);
+  return indices;
+}
 function getRenderedItem(ctx, key) {
   var _a3;
   const state = ctx.state;
@@ -3654,9 +3780,10 @@ var LegendList = typedMemo(
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a3, _b;
+  var _a3, _b, _c, _d;
   const {
     alignItemsAtEnd = false,
+    alwaysRender,
     columnWrapperStyle,
     contentContainerStyle: contentContainerStyleProp,
     contentInset,
@@ -3685,6 +3812,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onEndReached,
     onEndReachedThreshold = 0.5,
     onItemSizeChanged,
+    onMetricsChange,
     onLayout: onLayoutProp,
     onLoad,
     onMomentumScrollEnd,
@@ -3733,6 +3861,18 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const scrollBuffer = (drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE) || 1;
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : (_item, index) => index.toString();
   const stickyHeaderIndices = stickyHeaderIndicesProp != null ? stickyHeaderIndicesProp : stickyIndicesDeprecated;
+  const alwaysRenderIndices = React3.useMemo(() => {
+    const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor);
+    return { arr: indices, set: new Set(indices) };
+  }, [
+    alwaysRender == null ? void 0 : alwaysRender.top,
+    alwaysRender == null ? void 0 : alwaysRender.bottom,
+    (_a3 = alwaysRender == null ? void 0 : alwaysRender.indices) == null ? void 0 : _a3.join(","),
+    (_b = alwaysRender == null ? void 0 : alwaysRender.keys) == null ? void 0 : _b.join(","),
+    dataProp,
+    dataVersion,
+    keyExtractor
+  ]);
   if (IS_DEV && stickyIndicesDeprecated && !stickyHeaderIndicesProp) {
     warnDevOnce(
       "stickyIndices",
@@ -3764,7 +3904,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           attempts: 0,
           index: initialScrollProp.index,
           settledTicks: 0,
-          viewOffset: (_a3 = initialScrollProp.viewOffset) != null ? _a3 : 0,
+          viewOffset: (_c = initialScrollProp.viewOffset) != null ? _c : 0,
           viewPosition: initialScrollProp.viewPosition
         } : void 0,
         initialScroll: initialScrollProp,
@@ -3778,6 +3918,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         lastScrollDelta: 0,
         loadStartTime: Date.now(),
         minIndexSizeChanged: 0,
+        contentInsetOverride: void 0,
+        nativeContentInset: void 0,
         nativeMarginTop: 0,
         positions: /* @__PURE__ */ new Map(),
         props: {},
@@ -3824,6 +3966,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? useThrottledOnScroll(onScrollProp, scrollEventThrottle) : onScrollProp;
   state.props = {
     alignItemsAtEnd,
+    alwaysRender,
+    alwaysRenderIndicesArr: alwaysRenderIndices.arr,
+    alwaysRenderIndicesSet: alwaysRenderIndices.set,
     animatedProps: animatedPropsInternal,
     contentInset,
     data: dataProp,
@@ -3989,6 +4134,34 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     stylePaddingBottomState,
     stylePaddingTopState
   ]);
+  React3.useEffect(() => {
+    if (!onMetricsChange) {
+      return;
+    }
+    let lastMetrics;
+    const emitMetrics = () => {
+      const metrics = {
+        alignItemsAtEndPadding: peek$(ctx, "alignItemsPaddingTop") || 0,
+        footerSize: peek$(ctx, "footerSize") || 0,
+        headerSize: peek$(ctx, "headerSize") || 0
+      };
+      if (!lastMetrics || metrics.alignItemsAtEndPadding !== lastMetrics.alignItemsAtEndPadding || metrics.headerSize !== lastMetrics.headerSize || metrics.footerSize !== lastMetrics.footerSize) {
+        lastMetrics = metrics;
+        onMetricsChange(metrics);
+      }
+    };
+    emitMetrics();
+    const unsubscribe = [
+      listen$(ctx, "alignItemsPaddingTop", emitMetrics),
+      listen$(ctx, "headerSize", emitMetrics),
+      listen$(ctx, "footerSize", emitMetrics)
+    ];
+    return () => {
+      for (const unsub of unsubscribe) {
+        unsub();
+      }
+    };
+  }, [ctx, onMetricsChange]);
   React3.useEffect(() => {
     const viewability = setupViewability({
       onViewableItemsChanged,
@@ -4046,7 +4219,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       ),
       refScrollView: combinedRef,
-      scrollAdjustHandler: (_b = refState.current) == null ? void 0 : _b.scrollAdjustHandler,
+      scrollAdjustHandler: (_d = refState.current) == null ? void 0 : _d.scrollAdjustHandler,
       scrollEventThrottle: 0,
       snapToIndices,
       stickyHeaderConfig,