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

package/index.mjs

@@ -295,7 +295,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.createElement("div", { ref: refView, ...webProps, style: combinedStyle });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
@@ -2511,7 +2511,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);
@@ -2521,18 +2521,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);
@@ -2564,7 +2566,7 @@ function handleStickyRecycling(ctx, stickyArray, scroll, scrollBuffer, currentSt
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   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,
@@ -2574,7 +2576,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,
@@ -2584,6 +2594,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;
@@ -2760,12 +2772,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,
@@ -2773,6 +2797,7 @@ function calculateItemsInView(ctx, params = {}) {
           stickyIndicesArr,
           currentStickyIdx,
           needNewContainers,
+          needNewContainersSet,
           startBuffered,
           endBuffered
         );
@@ -2796,7 +2821,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);
@@ -2808,14 +2833,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;
@@ -2828,9 +2862,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++) {
@@ -2853,7 +2905,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);
@@ -3517,6 +3569,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;
@@ -3633,9 +3733,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,
@@ -3664,6 +3765,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onEndReached,
     onEndReachedThreshold = 0.5,
     onItemSizeChanged,
+    onMetricsChange,
     onLayout: onLayoutProp,
     onLoad,
     onMomentumScrollEnd,
@@ -3712,6 +3814,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 = 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",
@@ -3743,7 +3857,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,
@@ -3803,6 +3917,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,
@@ -3968,6 +4085,34 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     stylePaddingBottomState,
     stylePaddingTopState
   ]);
+  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]);
   useEffect(() => {
     const viewability = setupViewability({
       onViewableItemsChanged,
@@ -4025,7 +4170,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,