@legendapp/list 3.0.0-beta.53 → 3.0.0-beta.55

package/index.mjs

@@ -13,6 +13,115 @@ var View = forwardRef(function View2(props, ref) {
 });
 var Text = View;
 
+// src/platform/Platform.ts
+var Platform = {
+  // Widen the type to avoid unreachable-branch lints in cross-platform code that compares against other OSes
+  OS: "web"
+};
+
+// src/utils/rtl.ts
+function clampHorizontalOffset(offset, maxOffset) {
+  if (maxOffset === void 0) {
+    return offset;
+  }
+  return Math.max(0, Math.min(maxOffset, offset));
+}
+function getHorizontalMaxOffset(state, contentWidth) {
+  if (contentWidth === void 0 || !Number.isFinite(contentWidth) || !Number.isFinite(state.scrollLength) || contentWidth <= state.scrollLength) {
+    return contentWidth !== void 0 && Number.isFinite(contentWidth) && Number.isFinite(state.scrollLength) ? 0 : void 0;
+  }
+  return Math.max(0, contentWidth - state.scrollLength);
+}
+function getDefaultHorizontalRTLScrollType() {
+  return "normal" ;
+}
+function getNativeHorizontalRTLScrollType(state) {
+  var _a3;
+  return (_a3 = state == null ? void 0 : state.horizontalRTLScrollType) != null ? _a3 : getDefaultHorizontalRTLScrollType();
+}
+function isRTLProps(props) {
+  var _a3;
+  return (_a3 = props == null ? void 0 : props.rtl) != null ? _a3 : false;
+}
+function isHorizontalRTL(state) {
+  return isHorizontalRTLProps(state == null ? void 0 : state.props);
+}
+function isHorizontalRTLProps(props) {
+  return !!(props == null ? void 0 : props.horizontal) && isRTLProps(props);
+}
+function getLogicalHorizontalMaxOffset(state, contentWidth) {
+  var _a3;
+  return (_a3 = getHorizontalMaxOffset(state, contentWidth)) != null ? _a3 : 0;
+}
+function getHorizontalInsetEnd(state, inset) {
+  if (!inset) {
+    return 0;
+  }
+  return (isHorizontalRTL(state) ? inset.left : inset.right) || 0;
+}
+function toPhysicalHorizontalItemPosition(state, logicalPosition, itemSize, listSize) {
+  if (!isHorizontalRTL(state) || listSize === void 0 || !Number.isFinite(listSize)) {
+    return logicalPosition;
+  }
+  return Math.max(0, listSize - logicalPosition - itemSize);
+}
+function toNativeHorizontalOffset(state, logicalOffset, contentWidth) {
+  if (!state || !isHorizontalRTL(state)) {
+    return logicalOffset;
+  }
+  const maxOffset = getHorizontalMaxOffset(state, contentWidth);
+  const clampedLogicalOffset = clampHorizontalOffset(logicalOffset, maxOffset);
+  const mode = getNativeHorizontalRTLScrollType(state);
+  if (mode === "negative") {
+    return clampedLogicalOffset === 0 ? 0 : -clampedLogicalOffset;
+  }
+  if (mode === "inverted") {
+    if (maxOffset === void 0) {
+      return clampedLogicalOffset;
+    }
+    return clampHorizontalOffset(maxOffset - clampedLogicalOffset, maxOffset);
+  }
+  return clampedLogicalOffset;
+}
+function toLogicalHorizontalOffset(state, rawOffset, contentWidth) {
+  if (!isHorizontalRTL(state)) {
+    state.horizontalRTLScrollType = void 0;
+    return rawOffset;
+  }
+  const maxOffset = getHorizontalMaxOffset(state, contentWidth);
+  if (rawOffset < 0) {
+    state.horizontalRTLScrollType = "negative";
+    return clampHorizontalOffset(-rawOffset, maxOffset);
+  }
+  if (maxOffset === void 0) {
+    return rawOffset;
+  }
+  const normalOffset = rawOffset;
+  const invertedOffset = maxOffset - rawOffset;
+  if (!Number.isFinite(invertedOffset)) {
+    state.horizontalRTLScrollType = "normal";
+    return normalOffset;
+  }
+  const previousMode = state.horizontalRTLScrollType;
+  if (previousMode === "inverted") {
+    return clampHorizontalOffset(invertedOffset, maxOffset);
+  }
+  if (previousMode === "normal") {
+    return clampHorizontalOffset(normalOffset, maxOffset);
+  }
+  if (!state.hasScrolled) {
+    const defaultMode = getDefaultHorizontalRTLScrollType();
+    state.horizontalRTLScrollType = defaultMode;
+    return clampHorizontalOffset(normalOffset, maxOffset);
+  }
+  const referenceScroll = state.scroll;
+  const distanceNormal = Math.abs(normalOffset - referenceScroll);
+  const distanceInverted = Math.abs(invertedOffset - referenceScroll);
+  const useInverted = distanceInverted + 0.5 < distanceNormal;
+  state.horizontalRTLScrollType = useInverted ? "inverted" : "normal";
+  return clampHorizontalOffset(useInverted ? invertedOffset : normalOffset, maxOffset);
+}
+
 // src/platform/Animated.tsx
 var createAnimatedValue = (value) => value;
 
@@ -155,7 +264,7 @@ function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
   const horizontal = props.horizontal;
   const contentInset = props.contentInset;
   const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
-  const baseEndInset = (horizontal ? baseInset == null ? void 0 : baseInset.right : baseInset == null ? void 0 : baseInset.bottom) || 0;
+  const baseEndInset = (horizontal ? getHorizontalInsetEnd(state, baseInset) : baseInset == null ? void 0 : baseInset.bottom) || 0;
   const contentInsetEndAdjustment = getContentInsetEndAdjustmentEnd(
     contentInsetEndAdjustmentOverride != null ? contentInsetEndAdjustmentOverride : props.contentInsetEndAdjustment
   );
@@ -164,9 +273,9 @@ function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
   const overrideInset = (_b = state.contentInsetOverride) != null ? _b : void 0;
   const adjustedBaseEndInset = baseEndInset + contentInsetEndAdjustment;
   if (overrideInset) {
-    const mergedInset = { bottom: 0, right: 0, ...baseInset, ...overrideInset };
+    const mergedInset = { bottom: 0, left: 0, right: 0, ...baseInset, ...overrideInset };
     return Math.max(
-      ((horizontal ? mergedInset.right : mergedInset.bottom) || 0) + contentInsetEndAdjustment,
+      ((horizontal ? getHorizontalInsetEnd(state, mergedInset) : mergedInset.bottom) || 0) + contentInsetEndAdjustment,
       anchoredEndInset
     );
   }
@@ -260,6 +369,15 @@ var ENABLE_DEVMODE = IS_DEV && false;
 var ENABLE_DEBUG_VIEW = IS_DEV && false;
 var typedForwardRef = React3.forwardRef;
 var typedMemo = React3.memo;
+var getComponent = (Component) => {
+  if (React3.isValidElement(Component)) {
+    return Component;
+  }
+  if (Component) {
+    return /* @__PURE__ */ React3.createElement(Component, null);
+  }
+  return null;
+};
 
 // src/utils/helpers.ts
 function isFunction(obj) {
@@ -286,7 +404,8 @@ function comparatorDefault(a, b) {
 }
 function getPadding(s, type) {
   var _a3, _b, _c;
-  return (_c = (_b = (_a3 = s[`padding${type}`]) != null ? _a3 : s.paddingVertical) != null ? _b : s.padding) != null ? _c : 0;
+  const axisPadding = type === "Left" || type === "Right" ? s.paddingHorizontal : s.paddingVertical;
+  return (_c = (_b = (_a3 = s[`padding${type}`]) != null ? _a3 : axisPadding) != null ? _b : s.padding) != null ? _c : 0;
 }
 function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
@@ -308,6 +427,14 @@ function findContainerId(ctx, key) {
 }
 
 // src/components/PositionView.tsx
+var isRNWeb = typeof document !== "undefined" && !!document.getElementById("react-native-stylesheet");
+var baseCss = {
+  contain: "paint layout style",
+  ...isRNWeb ? {
+    display: "flex",
+    flexDirection: "column"
+  } : {}
+};
 var PositionViewState = typedMemo(function PositionViewState2({
   id,
   horizontal,
@@ -316,11 +443,8 @@ var PositionViewState = typedMemo(function PositionViewState2({
   ...props
 }) {
   const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
-  const base = {
-    contain: "paint layout style"
-  };
   const composed = isArray(style) ? Object.assign({}, ...style) : style;
-  const combinedStyle = horizontal ? { ...base, ...composed, left: position } : { ...base, ...composed, top: position };
+  const combinedStyle = horizontal ? { ...baseCss, ...composed, left: position } : { ...baseCss, ...composed, top: position };
   const {
     animatedScrollY: _animatedScrollY,
     index,
@@ -348,9 +472,6 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     `containerPosition${id}`,
     "activeStickyIndex"
   ]);
-  const base = {
-    contain: "paint layout style"
-  };
   const composed = React3.useMemo(
     () => {
       var _a3;
@@ -360,10 +481,9 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   );
   const viewStyle = React3.useMemo(() => {
     var _a3;
-    const styleBase = { ...base, ...composed };
+    const styleBase = { ...baseCss, ...composed };
     delete styleBase.transform;
-    const stickyConfigOffset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
-    const offset = stickyConfigOffset != null ? stickyConfigOffset : 0;
+    const offset = (_a3 = stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset) != null ? _a3 : 0;
     const isActive = activeStickyIndex === index;
     styleBase.position = isActive ? "sticky" : "absolute";
     styleBase.zIndex = index + 1e3;
@@ -374,6 +494,20 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
     }
     return styleBase;
   }, [composed, horizontal, position, index, activeStickyIndex, stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.offset]);
+  const renderStickyHeaderBackdrop = React3.useMemo(
+    () => (stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent) ? /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        style: {
+          inset: 0,
+          pointerEvents: "none",
+          position: "absolute"
+        }
+      },
+      getComponent(stickyHeaderConfig.backdropComponent)
+    ) : null,
+    [stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent]
+  );
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
@@ -382,6 +516,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       style: viewStyle,
       ...webProps
     },
+    renderStickyHeaderBackdrop,
     children
   );
 });
@@ -643,12 +778,6 @@ function toLayout(rect) {
   };
 }
 
-// src/platform/Platform.ts
-var Platform = {
-  // Widen the type to avoid unreachable-branch lints in cross-platform code that compares against other OSes
-  OS: "web"
-};
-
 // src/utils/hasActiveMVCPAnchorLock.ts
 function hasActiveMVCPAnchorLock(state) {
   const lock = state.mvcpAnchorLock;
@@ -672,6 +801,7 @@ function getContainerPositionStyle({
   columnWrapperStyle,
   horizontal,
   hasItemSeparator,
+  isHorizontalRTLList,
   numColumns,
   otherAxisPos,
   otherAxisSize
@@ -695,6 +825,7 @@ function getContainerPositionStyle({
   }
   return horizontal ? {
     boxSizing: paddingStyles ? "border-box" : void 0,
+    direction: isHorizontalRTLList && Platform.OS === "web" ? "ltr" : void 0,
     flexDirection: hasItemSeparator ? "row" : void 0,
     height: otherAxisSize,
     left: 0,
@@ -713,6 +844,7 @@ function getContainerPositionStyle({
 }
 var Container = typedMemo(function Container2({
   id,
+  itemKey,
   recycleItems,
   horizontal,
   getRenderedItem: getRenderedItem2,
@@ -722,13 +854,13 @@ var Container = typedMemo(function Container2({
 }) {
   const ctx = useStateContext();
   const { columnWrapperStyle, animatedScrollY } = ctx;
+  const isHorizontalRTLList = isHorizontalRTL(ctx.state);
   const positionComponentInternal = ctx.state.props.positionComponentInternal;
   const stickyPositionComponentInternal = ctx.state.props.stickyPositionComponentInternal;
-  const [column = 0, span = 1, data, itemKey, numColumns = 1, extraData, isSticky] = useArr$([
+  const [column = 0, span = 1, data, numColumns = 1, extraData, isSticky] = useArr$([
     `containerColumn${id}`,
     `containerSpan${id}`,
     `containerItemData${id}`,
-    `containerItemKey${id}`,
     "numColumns",
     "extraData",
     `containerSticky${id}`
@@ -754,11 +886,20 @@ var Container = typedMemo(function Container2({
       columnWrapperStyle,
       hasItemSeparator: !!ItemSeparatorComponent,
       horizontal,
+      isHorizontalRTLList,
       numColumns,
       otherAxisPos,
       otherAxisSize
     }),
-    [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns, ItemSeparatorComponent]
+    [
+      horizontal,
+      isHorizontalRTLList,
+      otherAxisPos,
+      otherAxisSize,
+      columnWrapperStyle,
+      numColumns,
+      ItemSeparatorComponent
+    ]
   );
   const renderedItemInfo = useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
@@ -846,6 +987,39 @@ var Container = typedMemo(function Container2({
   );
 });
 
+// src/components/ContainerSlot.tsx
+function ContainerSlotBase({
+  id,
+  horizontal,
+  recycleItems,
+  ItemSeparatorComponent,
+  updateItemSize: updateItemSize2,
+  getRenderedItem: getRenderedItem2,
+  stickyHeaderConfig,
+  ContainerComponent = Container
+}) {
+  const [itemKey] = useArr$([`containerItemKey${id}`]);
+  if (itemKey === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(
+    ContainerComponent,
+    {
+      getRenderedItem: getRenderedItem2,
+      horizontal,
+      ItemSeparatorComponent,
+      id,
+      itemKey,
+      recycleItems,
+      stickyHeaderConfig,
+      updateItemSize: updateItemSize2
+    }
+  );
+}
+var ContainerSlot = typedMemo(function ContainerSlot2(props) {
+  return /* @__PURE__ */ React3.createElement(ContainerSlotBase, { ...props });
+});
+
 // src/utils/reordering.ts
 var mapFn = (element) => {
   const indexStr = element.getAttribute("data-index");
@@ -965,9 +1139,19 @@ var ContainersInner = typedMemo(function ContainersInner2({ horizontal, numColum
   const ref = useRef(null);
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const [otherAxisSize, totalSize] = useArr$(["otherAxisSize", "totalSize"]);
+  const isHorizontalRTLList = isHorizontalRTL(ctx.state);
+  const [otherAxisSize, readyToRender, totalSize] = useArr$(["otherAxisSize", "readyToRender", "totalSize"]);
   useDOMOrder(ref);
-  const style = horizontal ? { minHeight: otherAxisSize, position: "relative", width: totalSize } : { height: totalSize, minWidth: otherAxisSize, position: "relative" };
+  const style = horizontal ? {
+    direction: isHorizontalRTLList ? "ltr" : void 0,
+    minHeight: otherAxisSize,
+    opacity: readyToRender ? 1 : 0,
+    position: "relative",
+    width: totalSize
+  } : { height: totalSize, minWidth: otherAxisSize, opacity: readyToRender ? 1 : 0, position: "relative" };
+  if (!readyToRender) {
+    style.pointerEvents = "none";
+  }
   if (columnWrapperStyle && numColumns > 1) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     const gapX = columnGap || gap || 0;
@@ -995,12 +1179,12 @@ var Containers = typedMemo(function Containers2({
   getRenderedItem: getRenderedItem2,
   stickyHeaderConfig
 }) {
-  const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
+  const [numContainersPooled, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
   const containers = [];
-  for (let i = 0; i < numContainers; i++) {
+  for (let i = 0; i < numContainersPooled; i++) {
     containers.push(
       /* @__PURE__ */ React3.createElement(
-        Container,
+        ContainerSlot,
         {
           getRenderedItem: getRenderedItem2,
           horizontal,
@@ -1072,6 +1256,8 @@ function useRafCoalescer(callback) {
 
 // src/components/webConstants.ts
 var LEGEND_LIST_CONTENT_CONTAINER_CLASS = "legend-list-content-container";
+var LEGEND_LIST_SCROLLBAR_X_HIDDEN_CLASS = "legend-list-scrollbar-x-hidden";
+var LEGEND_LIST_SCROLLBAR_Y_HIDDEN_CLASS = "legend-list-scrollbar-y-hidden";
 
 // src/components/webScrollUtils.ts
 function getDocumentScrollerNode() {
@@ -1157,11 +1343,47 @@ function resolveWindowScrollTarget({ clampedOffset, horizontal, listPos, scroll
 }
 
 // src/components/ListComponentScrollView.tsx
+var SCROLLBAR_HIDDEN_STYLE_ID = "legend-list-scrollbar-axis-hidden-style";
+var SCROLLBAR_HIDDEN_STYLE = `.${LEGEND_LIST_SCROLLBAR_Y_HIDDEN_CLASS}::-webkit-scrollbar:vertical{width:0;display:none;}.${LEGEND_LIST_SCROLLBAR_X_HIDDEN_CLASS}::-webkit-scrollbar:horizontal{height:0;display:none;}`;
+function ensureScrollbarHiddenStyle() {
+  if (typeof document === "undefined" || document.getElementById(SCROLLBAR_HIDDEN_STYLE_ID)) {
+    return;
+  }
+  const styleElement = document.createElement("style");
+  styleElement.id = SCROLLBAR_HIDDEN_STYLE_ID;
+  styleElement.textContent = SCROLLBAR_HIDDEN_STYLE;
+  document.head.appendChild(styleElement);
+}
 function getContentInsetEndAdjustmentEnd2(ctx) {
   var _a3, _b;
   const adjustment = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.props) == null ? void 0 : _b.contentInsetEndAdjustment;
   return Math.max(0, adjustment != null ? adjustment : 0);
 }
+function getFiniteSnapOffsets(snapToOffsets) {
+  if (!(snapToOffsets == null ? void 0 : snapToOffsets.length)) {
+    return [];
+  }
+  const snapOffsets = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const offset of snapToOffsets) {
+    if (Number.isFinite(offset) && !seen.has(offset)) {
+      seen.add(offset);
+      snapOffsets.push(offset);
+    }
+  }
+  return snapOffsets;
+}
+function getSnapAnchorStyle(offset, horizontal) {
+  return {
+    height: horizontal ? "100%" : 1,
+    left: horizontal ? offset : 0,
+    pointerEvents: "none",
+    position: "absolute",
+    scrollSnapAlign: "start",
+    top: horizontal ? 0 : offset,
+    width: horizontal ? 1 : "100%"
+  };
+}
 var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
   children,
   style,
@@ -1179,7 +1401,7 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
   onLayout,
   ...props
 }, ref) {
-  var _a3, _b, _c;
+  var _a3, _b, _c, _d;
   const ctx = useStateContext();
   const [anchoredEndSpaceSize] = useArr$(["anchoredEndSpaceSize"]);
   const scrollRef = useRef(null);
@@ -1361,6 +1583,12 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
       }
     };
   }, [isWindowScroll, onLayout]);
+  const hiddenScrollIndicatorClassName = !isWindowScroll && (horizontal ? !showsHorizontalScrollIndicator && LEGEND_LIST_SCROLLBAR_X_HIDDEN_CLASS : !showsVerticalScrollIndicator && LEGEND_LIST_SCROLLBAR_Y_HIDDEN_CLASS);
+  useLayoutEffect(() => {
+    if (hiddenScrollIndicatorClassName) {
+      ensureScrollbarHiddenStyle();
+    }
+  }, [hiddenScrollIndicatorClassName]);
   const scrollViewStyle = {
     ...isWindowScroll ? {} : {
       overflow: "auto",
@@ -1388,11 +1616,59 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
     contentInset: _contentInset,
     scrollEventThrottle: _scrollEventThrottle,
     ScrollComponent: _ScrollComponent,
+    snapToOffsets,
     useWindowScroll: _useWindowScroll,
+    className: scrollViewClassNameProp,
     ...webProps
   } = props;
-  return /* @__PURE__ */ React3.createElement("div", { ref: scrollRef, ...webProps, style: scrollViewStyle }, refreshControl, /* @__PURE__ */ React3.createElement("div", { className, ref: contentRef, style: contentStyle }, children, contentInsetEndAdjustmentSpacerStyle ? /* @__PURE__ */ React3.createElement("div", { "aria-hidden": true, style: contentInsetEndAdjustmentSpacerStyle }) : null));
+  const snapOffsets = !isWindowScroll ? getFiniteSnapOffsets(snapToOffsets) : [];
+  if (snapOffsets.length > 0) {
+    scrollViewStyle.scrollSnapType = horizontal ? "x mandatory" : "y mandatory";
+    contentStyle.position = (_d = contentStyle.position) != null ? _d : "relative";
+  }
+  const scrollViewClassName = hiddenScrollIndicatorClassName ? scrollViewClassNameProp ? `${scrollViewClassNameProp} ${hiddenScrollIndicatorClassName}` : hiddenScrollIndicatorClassName : scrollViewClassNameProp;
+  if (IS_DEV) {
+    if (/(?:^|\s)(?:[a-z0-9_-]+:)*gap(?:-[xy])?-(?:\[[^\]]+\]|[^\s]+)/.test(
+      `${contentContainerClassName != null ? contentContainerClassName : ""} ${scrollViewClassNameProp != null ? scrollViewClassNameProp : ""}`
+    )) {
+      warnDevOnce(
+        "className-gap",
+        "className/contentContainerClassName gap classes are not supported in LegendList because it needs to use exact values internally. Use contentContainerStyle={{ gap: ... }} or columnWrapperStyle instead."
+      );
+    }
+  }
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: scrollViewClassName,
+      ref: scrollRef,
+      ...webProps,
+      style: scrollViewStyle
+    },
+    refreshControl,
+    /* @__PURE__ */ React3.createElement("div", { className, ref: contentRef, style: contentStyle }, snapOffsets.map((offset) => /* @__PURE__ */ React3.createElement(
+      "div",
+      {
+        "aria-hidden": true,
+        "data-legend-list-snap-anchor": offset,
+        key: `snap-${offset}`,
+        style: getSnapAnchorStyle(offset, horizontal)
+      }
+    )), children, contentInsetEndAdjustmentSpacerStyle ? /* @__PURE__ */ React3.createElement("div", { "aria-hidden": true, style: contentInsetEndAdjustmentSpacerStyle }) : null)
+  );
 });
+
+// src/components/listComponentStyles.ts
+function getAutoOtherAxisStyle({
+  horizontal,
+  needsOtherAxisSize,
+  otherAxisSize
+}) {
+  if (!needsOtherAxisSize || !otherAxisSize || otherAxisSize <= 0) {
+    return void 0;
+  }
+  return horizontal ? { height: otherAxisSize } : { width: otherAxisSize };
+}
 function useValueListener$(key, callback) {
   const ctx = useStateContext();
   useLayoutEffect(() => {
@@ -1419,11 +1695,18 @@ function getScrollAdjustAxis(horizontal) {
     y: 1
   };
 }
-function resolveScrollAdjustContentNode(el, contentNode) {
-  if ((contentNode == null ? void 0 : contentNode.isConnected) && contentNode.parentElement === el) {
-    return contentNode;
+function getScrollAdjustTarget(ctx, contentNode) {
+  var _a3, _b, _c;
+  const scrollView = (_a3 = ctx.state) == null ? void 0 : _a3.refScroller.current;
+  const scrollElement = (_c = (_b = scrollView == null ? void 0 : scrollView.getScrollableNode) == null ? void 0 : _b.call(scrollView)) != null ? _c : null;
+  let resolvedContentNode = null;
+  if (scrollElement) {
+    resolvedContentNode = (contentNode == null ? void 0 : contentNode.isConnected) && contentNode.parentElement === scrollElement ? contentNode : scrollElement.querySelector(`:scope > .${LEGEND_LIST_CONTENT_CONTAINER_CLASS}`);
   }
-  return el.querySelector(`:scope > .${LEGEND_LIST_CONTENT_CONTAINER_CLASS}`);
+  return scrollElement ? { contentNode: resolvedContentNode, scrollElement } : null;
+}
+function scrollAdjustBy(el, left, top) {
+  el.scrollBy({ behavior: "auto", left, top });
 }
 function ScrollAdjust() {
   const ctx = useStateContext();
@@ -1432,43 +1715,43 @@ function ScrollAdjust() {
   const resetPaddingBaselineRef = React3.useRef(void 0);
   const contentNodeRef = React3.useRef(null);
   const callback = React3.useCallback(() => {
-    var _a3, _b;
+    var _a3;
     const scrollAdjust = peek$(ctx, "scrollAdjust");
     const scrollAdjustUserOffset = peek$(ctx, "scrollAdjustUserOffset");
     const scrollOffset = (scrollAdjust || 0) + (scrollAdjustUserOffset || 0);
-    const scrollView = (_a3 = ctx.state) == null ? void 0 : _a3.refScroller.current;
-    if (scrollView && scrollOffset !== lastScrollOffsetRef.current) {
-      const scrollDelta = scrollOffset - lastScrollOffsetRef.current;
-      if (scrollDelta !== 0) {
-        const axis = getScrollAdjustAxis(!!ctx.state.props.horizontal);
-        const prevScroll = scrollView.getCurrentScrollOffset();
-        const el = scrollView.getScrollableNode();
-        const contentNode = resolveScrollAdjustContentNode(el, contentNodeRef.current);
+    const scrollDelta = scrollOffset - lastScrollOffsetRef.current;
+    if (scrollDelta !== 0) {
+      const target = getScrollAdjustTarget(ctx, contentNodeRef.current);
+      if (target) {
+        const horizontal = !!ctx.state.props.horizontal;
+        const axis = getScrollAdjustAxis(horizontal);
+        const { contentNode, scrollElement: el } = target;
+        const scrollBy = () => scrollAdjustBy(el, axis.x * scrollDelta, axis.y * scrollDelta);
         contentNodeRef.current = contentNode;
-        const scrollBy = () => scrollView.scrollBy(axis.x * scrollDelta, axis.y * scrollDelta);
-        if (!contentNode) {
-          scrollBy();
-          lastScrollOffsetRef.current = scrollOffset;
-          return;
-        }
-        const totalSize = contentNode[axis.contentSizeKey];
-        const viewportSize = el[axis.viewportSizeKey];
-        const nextScroll = prevScroll + scrollDelta;
-        if (scrollDelta > 0 && !ctx.state.adjustingFromInitialMount && totalSize < nextScroll + viewportSize) {
-          const previousPaddingEnd = (_b = resetPaddingBaselineRef.current) != null ? _b : contentNode.style[axis.paddingEndProp];
-          resetPaddingBaselineRef.current = previousPaddingEnd;
-          const pad = (nextScroll + viewportSize - totalSize) * 2;
-          contentNode.style[axis.paddingEndProp] = `${pad}px`;
-          void contentNode.offsetHeight;
-          scrollBy();
-          if (resetPaddingRafRef.current !== void 0) {
-            cancelAnimationFrame(resetPaddingRafRef.current);
+        if (contentNode) {
+          const prevScroll = horizontal ? el.scrollLeft : el.scrollTop;
+          const totalSize = contentNode[axis.contentSizeKey];
+          const viewportSize = el[axis.viewportSizeKey];
+          const nextScroll = prevScroll + scrollDelta;
+          const needsTemporaryPadding = scrollDelta > 0 && !ctx.state.adjustingFromInitialMount && totalSize < nextScroll + viewportSize;
+          if (needsTemporaryPadding) {
+            const previousPaddingEnd = (_a3 = resetPaddingBaselineRef.current) != null ? _a3 : contentNode.style[axis.paddingEndProp];
+            resetPaddingBaselineRef.current = previousPaddingEnd;
+            const pad = (nextScroll + viewportSize - totalSize) * 2;
+            contentNode.style[axis.paddingEndProp] = `${pad}px`;
+            void contentNode.offsetHeight;
+            scrollBy();
+            if (resetPaddingRafRef.current !== void 0) {
+              cancelAnimationFrame(resetPaddingRafRef.current);
+            }
+            resetPaddingRafRef.current = requestAnimationFrame(() => {
+              resetPaddingRafRef.current = void 0;
+              resetPaddingBaselineRef.current = void 0;
+              contentNode.style[axis.paddingEndProp] = previousPaddingEnd;
+            });
+          } else {
+            scrollBy();
           }
-          resetPaddingRafRef.current = requestAnimationFrame(() => {
-            resetPaddingRafRef.current = void 0;
-            resetPaddingBaselineRef.current = void 0;
-            contentNode.style[axis.paddingEndProp] = previousPaddingEnd;
-          });
         } else {
           scrollBy();
         }
@@ -1480,10 +1763,10 @@ function ScrollAdjust() {
   useValueListener$("scrollAdjustUserOffset", callback);
   return null;
 }
-function SnapWrapper({ ScrollComponent, ...props }) {
+var SnapWrapper = React3.forwardRef(function SnapWrapperInner({ ScrollComponent, ...props }, ref) {
   const [snapToOffsets] = useArr$(["snapToOffsets"]);
-  return /* @__PURE__ */ React3.createElement(ScrollComponent, { ...props, snapToOffsets });
-}
+  return /* @__PURE__ */ React3.createElement(ScrollComponent, { ...props, ref, snapToOffsets });
+});
 function WebAnchoredEndSpace({ horizontal }) {
   const ctx = useStateContext();
   const [anchoredEndSpaceSize] = useArr$(["anchoredEndSpaceSize"]);
@@ -1500,15 +1783,6 @@ var LayoutView = ({ onLayoutChange, refView, children, ...rest }) => {
   useOnLayoutSync({ onLayoutChange, ref });
   return /* @__PURE__ */ React3.createElement("div", { ...rest, ref }, children);
 };
-var getComponent = (Component) => {
-  if (React3.isValidElement(Component)) {
-    return Component;
-  }
-  if (Component) {
-    return /* @__PURE__ */ React3.createElement(Component, null);
-  }
-  return null;
-};
 
 // src/components/ListComponent.tsx
 var ListComponent = typedMemo(function ListComponent2({
@@ -1541,6 +1815,12 @@ var ListComponent = typedMemo(function ListComponent2({
 }) {
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
+  const [otherAxisSize = 0] = useArr$(["otherAxisSize"]);
+  const autoOtherAxisStyle = getAutoOtherAxisStyle({
+    horizontal,
+    needsOtherAxisSize: ctx.state.needsOtherAxisSize,
+    otherAxisSize
+  });
   const ScrollComponent = useMemo(() => {
     if (!renderScrollComponent) {
       return ListComponentScrollView;
@@ -1579,10 +1859,10 @@ var ListComponent = typedMemo(function ListComponent2({
       ...rest,
       ...ScrollComponent === ListComponentScrollView ? { useWindowScroll } : {},
       contentContainerStyle: [
-        contentContainerStyle,
         horizontal ? {
           height: "100%"
-        } : {}
+        } : {},
+        contentContainerStyle
       ],
       contentOffset: initialContentOffset !== void 0 ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       horizontal,
@@ -1591,7 +1871,7 @@ var ListComponent = typedMemo(function ListComponent2({
       onScroll: onScroll2,
       ref: refScrollView,
       ScrollComponent: snapToIndices ? ScrollComponent : void 0,
-      style
+      style: autoOtherAxisStyle ? [autoOtherAxisStyle, style] : style
     },
     /* @__PURE__ */ React3.createElement(ScrollAdjust, null),
     ListHeaderComponent && /* @__PURE__ */ React3.createElement(LayoutView, { onLayoutChange: onLayoutHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
@@ -1779,10 +2059,9 @@ var initialScrollWatchdog = {
   clear(state) {
     initialScrollWatchdog.set(state, void 0);
   },
-  didObserveProgress(newScroll, watchdog) {
-    const previousDistance = Math.abs(watchdog.startScroll - watchdog.targetOffset);
+  didReachTarget(newScroll, watchdog) {
     const nextDistance = Math.abs(newScroll - watchdog.targetOffset);
-    return nextDistance <= INITIAL_SCROLL_MIN_TARGET_OFFSET || nextDistance + INITIAL_SCROLL_MIN_TARGET_OFFSET < previousDistance;
+    return nextDistance <= INITIAL_SCROLL_MIN_TARGET_OFFSET;
   },
   get(state) {
     var _a3, _b;
@@ -1807,19 +2086,19 @@ var initialScrollWatchdog = {
   }
 };
 function setInitialScrollSession(state, options = {}) {
-  var _a3, _b, _c;
+  var _a3, _b, _c, _d;
   const existingSession = state.initialScrollSession;
   const kind = (_a3 = options.kind) != null ? _a3 : existingSession == null ? void 0 : existingSession.kind;
   const completion = existingSession == null ? void 0 : existingSession.completion;
-  const hasBootstrapOverride = Object.hasOwn(options, "bootstrap");
-  const bootstrap = kind === "bootstrap" ? hasBootstrapOverride ? options.bootstrap : (existingSession == null ? void 0 : existingSession.kind) === "bootstrap" ? existingSession.bootstrap : void 0 : void 0;
+  const existingBootstrap = (existingSession == null ? void 0 : existingSession.kind) === "bootstrap" ? existingSession.bootstrap : void 0;
+  const bootstrap = kind === "bootstrap" ? options.bootstrap === null ? void 0 : (_b = options.bootstrap) != null ? _b : existingBootstrap : void 0;
   if (!kind) {
     return clearInitialScrollSession(state);
   }
   if (!state.initialScroll && !bootstrap && !hasInitialScrollSessionCompletion(completion)) {
     return clearInitialScrollSession(state);
   }
-  const previousDataLength = (_c = (_b = options.previousDataLength) != null ? _b : existingSession == null ? void 0 : existingSession.previousDataLength) != null ? _c : 0;
+  const previousDataLength = (_d = (_c = options.previousDataLength) != null ? _c : existingSession == null ? void 0 : existingSession.previousDataLength) != null ? _d : 0;
   state.initialScrollSession = createInitialScrollSession({
     bootstrap,
     completion,
@@ -2309,7 +2588,8 @@ function doScrollTo(ctx, params) {
   }
   const isAnimated = !!animated;
   const isHorizontal = !!horizontal;
-  const left = isHorizontal ? offset : 0;
+  const contentSize = isHorizontal ? getContentSize(ctx) : void 0;
+  const left = isHorizontal ? toNativeHorizontalOffset(state, offset, contentSize) : 0;
   const top = isHorizontal ? 0 : offset;
   scroller.scrollTo({ animated: isAnimated, x: left, y: top });
   if (isAnimated) {
@@ -2571,7 +2851,7 @@ function advanceMeasuredInitialScroll(ctx, options) {
   const activeInitialTargetOffset = scrollingTo ? (_a3 = scrollingTo.targetOffset) != null ? _a3 : scrollingTo.offset : void 0;
   const didOffsetChange = initialScroll.contentOffset === void 0 || Math.abs(initialScroll.contentOffset - resolvedOffset) > 1;
   const didActiveInitialTargetChange = activeInitialTargetOffset !== void 0 && Math.abs(activeInitialTargetOffset - resolvedOffset) > 1;
-  const isAlreadyAtDesiredInitialTarget = activeInitialTargetOffset !== void 0 && Math.abs(state.scroll - activeInitialTargetOffset) <= 1 && Math.abs(state.scrollPending - activeInitialTargetOffset) <= 1;
+  const isAlreadyAtDesiredInitialTarget = activeInitialTargetOffset !== void 0 && Math.abs(state.scroll - resolvedOffset) <= 1 && Math.abs(state.scrollPending - resolvedOffset) <= 1;
   if (!(options == null ? void 0 : options.forceScroll) && !didOffsetChange && isInitialScrollInProgress && !didActiveInitialTargetChange) {
     return false;
   }
@@ -2643,6 +2923,30 @@ function checkAllSizesKnown(state, indices) {
   });
 }
 
+// src/utils/requestAdjust.ts
+function requestAdjust(ctx, positionDiff, dataChanged) {
+  const state = ctx.state;
+  if (Math.abs(positionDiff) > 0.1) {
+    const doit = () => {
+      {
+        state.scrollAdjustHandler.requestAdjust(positionDiff);
+        if (state.adjustingFromInitialMount) {
+          state.adjustingFromInitialMount--;
+        }
+      }
+    };
+    state.scroll += positionDiff;
+    state.scrollForNextCalculateItemsInView = void 0;
+    const readyToRender = peek$(ctx, "readyToRender");
+    if (readyToRender) {
+      doit();
+    } else {
+      state.adjustingFromInitialMount = (state.adjustingFromInitialMount || 0) + 1;
+      requestAnimationFrame(doit);
+    }
+  }
+}
+
 // src/core/bootstrapInitialScroll.ts
 var DEFAULT_BOOTSTRAP_REVEAL_EPSILON = 1;
 var DEFAULT_BOOTSTRAP_REVEAL_MAX_FRAMES = 8;
@@ -2736,7 +3040,7 @@ function clearBootstrapInitialScrollSession(state) {
     bootstrapInitialScroll.frameHandle = void 0;
   }
   setInitialScrollSession(state, {
-    bootstrap: void 0,
+    bootstrap: null,
     kind: (_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind
   });
 }
@@ -2892,15 +3196,18 @@ function clearFinishedBootstrapInitialScrollTargetIfMovedAway(ctx) {
     return;
   }
   if (didFinishedInitialScrollMoveAwayFromTarget(ctx, initialScroll)) {
-    if (shouldPreserveInitialScrollForFooterLayout(initialScroll)) {
-      clearPendingInitialScrollFooterLayout(ctx, {
-        dataLength: state.props.data.length,
-        stylePaddingBottom: (_b = state.props.stylePaddingBottom) != null ? _b : 0,
-        target: initialScroll
-      });
-      return;
+    const shouldKeepEndTargetAlive = isRetargetableBottomAlignedInitialScrollTarget(initialScroll) && peek$(ctx, "isAtEnd");
+    if (!shouldKeepEndTargetAlive) {
+      if (shouldPreserveInitialScrollForFooterLayout(initialScroll)) {
+        clearPendingInitialScrollFooterLayout(ctx, {
+          dataLength: state.props.data.length,
+          stylePaddingBottom: (_b = state.props.stylePaddingBottom) != null ? _b : 0,
+          target: initialScroll
+        });
+      } else {
+        clearFinishedViewportRetargetableInitialScroll(state);
+      }
     }
-    clearFinishedViewportRetargetableInitialScroll(state);
   }
 }
 function startBootstrapInitialScrollOnMount(ctx, options) {
@@ -2939,7 +3246,7 @@ function handleBootstrapInitialScrollDataChange(ctx, options) {
   }
   const shouldResetDidFinish = !!(state.didFinishInitialScroll && previousDataLength === 0 && dataLength > 0 && initialScroll.index !== void 0);
   const bootstrapInitialScroll = getBootstrapInitialScrollSession(state);
-  const shouldClearFinishedResizePreservation = didDataChange && dataLength > 0 && state.didFinishInitialScroll && !bootstrapInitialScroll && !shouldResetDidFinish;
+  const shouldClearFinishedResizePreservation = !initialScrollAtEnd && didDataChange && dataLength > 0 && state.didFinishInitialScroll && !bootstrapInitialScroll && !shouldResetDidFinish;
   if (shouldClearFinishedResizePreservation) {
     clearPreservedInitialScrollTarget(state);
     return;
@@ -3042,27 +3349,46 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
   }
 }
 function handleBootstrapInitialScrollLayoutChange(ctx) {
+  var _a3, _b, _c, _d;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (isOffsetInitialScrollSession(state) || state.props.data.length === 0 || !initialScroll) {
-    return;
-  }
   const bootstrapInitialScroll = getBootstrapInitialScrollSession(state);
-  if (!bootstrapInitialScroll && initialScroll.viewPosition !== 1) {
-    return;
-  }
-  const didFinishInitialScroll = state.didFinishInitialScroll;
-  if (didFinishInitialScroll) {
-    setInitialScrollTarget(state, initialScroll, {
-      resetDidFinish: true
-    });
-    state.clearPreservedInitialScrollOnNextFinish = true;
+  if (initialScroll && state.props.data.length > 0 && !isOffsetInitialScrollSession(state) && (bootstrapInitialScroll || initialScroll.viewPosition === 1)) {
+    const resolvedOffset = resolveInitialScrollOffset(ctx, initialScroll);
+    const scrollingTo = ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) ? state.scrollingTo : void 0;
+    if (!bootstrapInitialScroll && (scrollingTo || state.didFinishInitialScroll)) {
+      const currentOffset = scrollingTo ? (_b = scrollingTo.targetOffset) != null ? _b : scrollingTo.offset : getObservedBootstrapInitialScrollOffset(state);
+      const offsetDiff = resolvedOffset - currentOffset;
+      if (Math.abs(offsetDiff) > DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
+        if (scrollingTo) {
+          const existingWatchdog = initialScrollWatchdog.get(state);
+          scrollingTo.offset = resolvedOffset;
+          scrollingTo.targetOffset = resolvedOffset;
+          state.initialScroll = {
+            ...initialScroll,
+            contentOffset: resolvedOffset
+          };
+          state.hasScrolled = false;
+          initialScrollWatchdog.set(state, {
+            startScroll: (_c = existingWatchdog == null ? void 0 : existingWatchdog.startScroll) != null ? _c : state.scroll,
+            targetOffset: resolvedOffset
+          });
+        }
+        requestAdjust(ctx, offsetDiff);
+        if (state.didFinishInitialScroll) {
+          (_d = state.triggerCalculateItemsInView) == null ? void 0 : _d.call(state, { forceFullItemPositions: true });
+        }
+      }
+      if (state.didFinishInitialScroll) {
+        clearFinishedViewportRetargetableInitialScroll(state);
+      }
+    } else {
+      rearmBootstrapInitialScroll(ctx, {
+        scroll: resolvedOffset,
+        targetIndexSeed: initialScroll.index
+      });
+    }
   }
-  rearmBootstrapInitialScroll(ctx, {
-    scroll: resolveInitialScrollOffset(ctx, initialScroll),
-    seedContentOffset: didFinishInitialScroll && !bootstrapInitialScroll ? getObservedBootstrapInitialScrollOffset(state) : void 0,
-    targetIndexSeed: initialScroll.index
-  });
 }
 function evaluateBootstrapInitialScroll(ctx) {
   var _a3, _b;
@@ -3269,7 +3595,7 @@ function checkFinishedScrollFallback(ctx) {
       state.timeoutCheckFinishedScrollFallback = setTimeout(checkHasScrolled, delay);
     };
     const checkHasScrolled = () => {
-      var _c;
+      var _c, _d;
       state.timeoutCheckFinishedScrollFallback = void 0;
       const isStillScrollingTo = state.scrollingTo;
       if (isStillScrollingTo) {
@@ -3282,11 +3608,13 @@ function checkFinishedScrollFallback(ctx) {
           isStillScrollingTo
         );
         const completionState = getResolvedScrollCompletionState(ctx, isStillScrollingTo);
-        const canFinishAfterSilentNativeDispatch = silentInitialDispatch && completionState.isAtResolvedTarget && numChecks >= 1;
-        if (shouldFinishZeroTarget || state.hasScrolled || canFinishInitialScrollWithoutNativeProgress || canFinishAfterSilentNativeDispatch || numChecks > maxChecks) {
+        const canFinishAfterSilentNativeDispatch = Platform.OS === "android";
+        const shouldFinishAfterObservedScroll = state.hasScrolled && (!isStillScrollingTo.isInitialScroll || completionState.isAtResolvedTarget);
+        const shouldRetryUnalignedInitialScroll = isStillScrollingTo.isInitialScroll && !completionState.isAtResolvedTarget && numChecks <= maxChecks;
+        if (shouldFinishZeroTarget || shouldFinishAfterObservedScroll || canFinishInitialScrollWithoutNativeProgress || canFinishAfterSilentNativeDispatch || numChecks > maxChecks) {
           finishScrollTo(ctx);
-        } else if (isNativeInitialPending && numChecks <= maxChecks) {
-          const targetOffset = (_c = getInitialScrollWatchdogTargetOffset(state)) != null ? _c : state.scrollPending;
+        } else if ((isNativeInitialPending || shouldRetryUnalignedInitialScroll) && numChecks <= maxChecks) {
+          const targetOffset = (_d = (_c = getInitialScrollWatchdogTargetOffset(state)) != null ? _c : isStillScrollingTo.targetOffset) != null ? _d : state.scrollPending;
           scrollToFallbackOffset(ctx, targetOffset);
           scheduleFallbackCheck(silentInitialDispatch ? SILENT_INITIAL_SCROLL_RETRY_DELAY_MS : 100);
         } else {
@@ -3322,7 +3650,14 @@ function handleInitialScrollLayoutReady(ctx) {
 }
 function initializeInitialScrollOnMount(ctx, options) {
   var _a3, _b;
-  const { dataLength, hasFooterComponent, initialContentOffset, initialScrollAtEnd, useBootstrapInitialScroll } = options;
+  const {
+    alwaysDispatchInitialScroll,
+    dataLength,
+    hasFooterComponent,
+    initialContentOffset,
+    initialScrollAtEnd,
+    useBootstrapInitialScroll
+  } = options;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
   const resolvedInitialContentOffset = initialContentOffset != null ? initialContentOffset : 0;
@@ -3342,7 +3677,7 @@ function initializeInitialScrollOnMount(ctx, options) {
     return;
   }
   const hasPendingDataDependentInitialScroll = !!initialScroll && dataLength === 0 && !(resolvedInitialContentOffset === 0 && !initialScrollAtEnd);
-  if (!resolvedInitialContentOffset && !hasPendingDataDependentInitialScroll) {
+  if (!alwaysDispatchInitialScroll && !resolvedInitialContentOffset && !hasPendingDataDependentInitialScroll) {
     if (initialScroll && !initialScrollAtEnd) {
       finishInitialScroll(ctx, {
         resolvedOffset: resolvedInitialContentOffset
@@ -3381,30 +3716,6 @@ function handleInitialScrollDataChange(ctx, options) {
   advanceCurrentInitialScrollSession(ctx);
 }
 
-// src/utils/requestAdjust.ts
-function requestAdjust(ctx, positionDiff, dataChanged) {
-  const state = ctx.state;
-  if (Math.abs(positionDiff) > 0.1) {
-    const doit = () => {
-      {
-        state.scrollAdjustHandler.requestAdjust(positionDiff);
-        if (state.adjustingFromInitialMount) {
-          state.adjustingFromInitialMount--;
-        }
-      }
-    };
-    state.scroll += positionDiff;
-    state.scrollForNextCalculateItemsInView = void 0;
-    const readyToRender = peek$(ctx, "readyToRender");
-    if (readyToRender) {
-      doit();
-    } else {
-      state.adjustingFromInitialMount = (state.adjustingFromInitialMount || 0) + 1;
-      requestAnimationFrame(doit);
-    }
-  }
-}
-
 // src/core/mvcp.ts
 var MVCP_POSITION_EPSILON = 0.1;
 var MVCP_ANCHOR_LOCK_TTL_MS = 300;
@@ -3678,15 +3989,27 @@ function prepareMVCP(ctx, dataChanged) {
         return;
       }
       if (Math.abs(positionDiff) > MVCP_POSITION_EPSILON) {
-        requestAdjust(ctx, positionDiff);
+        const shouldSkipAdjustForMaintainedEnd = state.maintainingScrollAtEnd && peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
+        if (!shouldSkipAdjustForMaintainedEnd) {
+          requestAdjust(ctx, positionDiff);
+        }
       }
     };
   }
 }
 
+// src/core/resetLayoutCachesForDataChange.ts
+function resetLayoutCachesForDataChange(state) {
+  state.indexByKey.clear();
+  state.idCache.length = 0;
+  state.positions.length = 0;
+  state.columns.length = 0;
+  state.columnSpans.length = 0;
+}
+
 // src/core/syncMountedContainer.ts
 function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
-  var _a3, _b, _c, _d, _e, _f, _g, _h;
+  var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
   const state = ctx.state;
   const {
     columns,
@@ -3698,7 +4021,8 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
   if (item === void 0) {
     return { didChangePosition: false, didRefreshData: false };
   }
-  const updateLayout = (_a3 = options == null ? void 0 : options.updateLayout) != null ? _a3 : true;
+  const itemKey = (_a3 = state.idCache[itemIndex]) != null ? _a3 : getId(state, itemIndex);
+  const updateLayout = (_b = options == null ? void 0 : options.updateLayout) != null ? _b : true;
   let didChangePosition = false;
   let didRefreshData = false;
   if (updateLayout) {
@@ -3707,7 +4031,9 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       set$(ctx, `containerPosition${containerIndex}`, POSITION_OUT_OF_VIEW);
       return { didChangePosition: false, didRefreshData: false };
     }
-    const position = (positionValue || 0) - ((_b = options == null ? void 0 : options.scrollAdjustPending) != null ? _b : 0);
+    const logicalPosition = (positionValue || 0) - ((_c = options == null ? void 0 : options.scrollAdjustPending) != null ? _c : 0);
+    const itemSize = (_d = state.sizes.get(itemKey)) != null ? _d : getItemSize(ctx, itemKey, itemIndex, item);
+    const position = toPhysicalHorizontalItemPosition(state, logicalPosition, itemSize, peek$(ctx, "totalSize"));
     const column = columns[itemIndex] || 1;
     const span = columnSpans[itemIndex] || 1;
     const prevPos = peek$(ctx, `containerPosition${containerIndex}`);
@@ -3726,15 +4052,15 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
   }
   const prevData = peek$(ctx, `containerItemData${containerIndex}`);
   if (prevData !== item) {
-    const pendingDataComparison = ((_c = state.pendingDataComparison) == null ? void 0 : _c.previousData) === state.previousData && ((_d = state.pendingDataComparison) == null ? void 0 : _d.nextData) === data ? state.pendingDataComparison : void 0;
-    const cachedComparison = (_e = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _e : 0;
+    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;
     } else if (cachedComparison !== 1) {
-      const itemKey = (_g = (_f = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _f : state.idCache[itemIndex]) != null ? _g : getId(state, itemIndex);
+      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 !== itemKey) {
+      if (prevData === void 0 || !keyExtractor || prevKey !== nextItemKey) {
         set$(ctx, `containerItemData${containerIndex}`, item);
         didRefreshData = true;
       } else if (!itemsAreEqual) {
@@ -3751,7 +4077,7 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
             };
           }
         }
-        if ((_h = state.pendingDataComparison) == null ? void 0 : _h.byIndex) {
+        if ((_i = state.pendingDataComparison) == null ? void 0 : _i.byIndex) {
           state.pendingDataComparison.byIndex[itemIndex] = isEqual ? 1 : 2;
         }
         if (!isEqual) {
@@ -3916,11 +4242,13 @@ function updateSnapToOffsets(ctx) {
   const {
     props: { snapToIndices }
   } = state;
+  const contentSize = state.props.horizontal ? getContentSize(ctx) : void 0;
   const snapToOffsets = Array(snapToIndices.length);
   for (let i = 0; i < snapToIndices.length; i++) {
     const idx = snapToIndices[i];
     getId(state, idx);
-    snapToOffsets[i] = state.positions[idx];
+    const logicalOffset = state.positions[idx];
+    snapToOffsets[i] = toNativeHorizontalOffset(state, logicalOffset, contentSize);
   }
   set$(ctx, "snapToOffsets", snapToOffsets);
 }
@@ -4297,6 +4625,30 @@ function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
 var unstableBatchedUpdates = ReactDOM.unstable_batchedUpdates;
 var batchedUpdates = typeof unstableBatchedUpdates === "function" ? unstableBatchedUpdates : (fn) => fn();
 
+// src/utils/containerPool.ts
+var MIN_INITIAL_CONTAINER_POOL_SIZE = 32;
+var MAX_INITIAL_SPARE_CONTAINERS = 64;
+function getInitialContainerPoolSize(dataLength, numContainers, initialContainerPoolRatio) {
+  if (dataLength <= 0 || numContainers <= 0) {
+    return 0;
+  }
+  const ratioPoolSize = Math.ceil(numContainers * initialContainerPoolRatio);
+  const cappedSparePoolSize = numContainers + MAX_INITIAL_SPARE_CONTAINERS;
+  const targetPoolSize = Math.max(
+    numContainers,
+    Math.min(ratioPoolSize, cappedSparePoolSize),
+    Math.min(dataLength, MIN_INITIAL_CONTAINER_POOL_SIZE)
+  );
+  const maxUsefulPoolSize = Math.max(dataLength, numContainers);
+  return Math.min(maxUsefulPoolSize, targetPoolSize);
+}
+function getExpandedContainerPoolSize(dataLength, numContainers) {
+  if (dataLength <= 0 || numContainers <= 0) {
+    return 0;
+  }
+  return Math.min(Math.max(dataLength, numContainers), Math.max(numContainers, Math.ceil(numContainers * 1.5)));
+}
+
 // src/utils/findAvailableContainers.ts
 function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pendingRemoval, requiredItemTypes, needNewContainers, protectedKeys) {
   const numContainers = peek$(ctx, "numContainers");
@@ -4502,10 +4854,9 @@ function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentSt
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
     const {
       columns,
-      columnSpans,
       containerItemKeys,
       enableScrollForNextCalculateItemsInView,
       idCache,
@@ -4549,18 +4900,38 @@ function calculateItemsInView(ctx, params = {}) {
       // current initial-scroll target instead of transient native adjustments.
       resolveInitialScrollOffset(ctx, initialScroll)
     ) : state.scroll;
-    const scrollAdjustPending = (_c = peek$(ctx, "scrollAdjustPending")) != null ? _c : 0;
-    const scrollAdjustPad = scrollAdjustPending - topPad;
-    let scroll = Math.round(scrollState + scrollExtra + scrollAdjustPad);
-    if (scroll + scrollLength > totalSize) {
-      scroll = Math.max(0, totalSize - scrollLength);
-    }
+    let scrollAdjustPending = 0;
+    let scrollAdjustPad = 0;
+    let scroll = 0;
+    let scrollTopBuffered = 0;
+    let scrollBottom = 0;
+    let scrollBottomBuffered = 0;
+    let nativeScrollState = scrollState;
+    const updateScroll2 = (nextScrollState) => {
+      var _a4;
+      nativeScrollState = nextScrollState;
+      scrollAdjustPending = (_a4 = peek$(ctx, "scrollAdjustPending")) != null ? _a4 : 0;
+      scrollAdjustPad = scrollAdjustPending - topPad;
+      scroll = Math.round(nextScrollState + scrollExtra + scrollAdjustPad);
+      if (scroll + scrollLength > totalSize) {
+        scroll = Math.max(0, totalSize - scrollLength);
+      }
+    };
+    updateScroll2(scrollState);
     const previousStickyIndex = peek$(ctx, "activeStickyIndex");
     const currentStickyIdx = stickyIndicesArr.length > 0 ? findCurrentStickyIndex(stickyIndicesArr, scroll, state) : -1;
     const nextActiveStickyIndex = currentStickyIdx >= 0 ? stickyIndicesArr[currentStickyIdx] : -1;
+    const stickyIndexDidChange = previousStickyIndex !== nextActiveStickyIndex;
     if (currentStickyIdx >= 0 || previousStickyIndex >= 0) {
       set$(ctx, "activeStickyIndex", nextActiveStickyIndex);
     }
+    const shouldNotifyStickyHeaderChange = !!onStickyHeaderChange && stickyIndicesArr.length > 0 && stickyIndexDidChange;
+    const finishCalculateItemsInView = shouldNotifyStickyHeaderChange ? () => {
+      const item = data[nextActiveStickyIndex];
+      if (item !== void 0) {
+        onStickyHeaderChange == null ? void 0 : onStickyHeaderChange({ index: nextActiveStickyIndex, item });
+      }
+    } : void 0;
     let scrollBufferTop = drawDistance;
     let scrollBufferBottom = drawDistance;
     if (speed > 0 || speed === 0 && scroll < Math.max(50, drawDistance)) {
@@ -4570,28 +4941,30 @@ function calculateItemsInView(ctx, params = {}) {
       scrollBufferTop = drawDistance * 1.5;
       scrollBufferBottom = drawDistance * 0.5;
     }
-    const scrollTopBuffered = scroll - scrollBufferTop;
-    const scrollBottom = scroll + scrollLength + (scroll < 0 ? -scroll : 0);
-    const scrollBottomBuffered = scrollBottom + scrollBufferBottom;
+    const updateScrollRange = () => {
+      const scrollStart = Math.max(0, scroll);
+      const overscrollBeforeContent = Math.max(0, -nativeScrollState);
+      scrollTopBuffered = scrollStart - scrollBufferTop;
+      scrollBottom = Math.max(scrollStart, scroll + scrollLength + overscrollBeforeContent);
+      scrollBottomBuffered = scrollBottom + scrollBufferBottom;
+    };
+    updateScrollRange();
     if (!suppressInitialScrollSideEffects && !dataChanged && !forceFullItemPositions && scrollForNextCalculateItemsInView) {
       const { top, bottom } = scrollForNextCalculateItemsInView;
       if (top === null && bottom === null) {
         state.scrollForNextCalculateItemsInView = void 0;
       } else if ((top === null || scrollTopBuffered > top) && (bottom === null || scrollBottomBuffered < bottom)) {
         if (!isInMVCPActiveMode(state)) {
+          finishCalculateItemsInView == null ? void 0 : finishCalculateItemsInView();
           return;
         }
       }
     }
     const checkMVCP = doMVCP && !suppressInitialScrollSideEffects ? prepareMVCP(ctx, dataChanged) : void 0;
     if (dataChanged) {
-      indexByKey.clear();
-      idCache.length = 0;
-      positions.length = 0;
-      columns.length = 0;
-      columnSpans.length = 0;
+      resetLayoutCachesForDataChange(state);
     }
-    const startIndex = forceFullItemPositions || dataChanged ? 0 : (_d = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _d : 0;
+    const startIndex = forceFullItemPositions || dataChanged ? 0 : (_c = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _c : 0;
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
     updateItemPositions(ctx, dataChanged, {
       doMVCP,
@@ -4616,21 +4989,25 @@ function calculateItemsInView(ctx, params = {}) {
       }
     }
     const scrollBeforeMVCP = state.scroll;
-    const scrollAdjustPendingBeforeMVCP = (_e = peek$(ctx, "scrollAdjustPending")) != null ? _e : 0;
+    const scrollAdjustPendingBeforeMVCP = (_d = peek$(ctx, "scrollAdjustPending")) != null ? _d : 0;
     checkMVCP == null ? void 0 : checkMVCP();
-    const didMVCPAdjustScroll = !!checkMVCP && (state.scroll !== scrollBeforeMVCP || ((_f = peek$(ctx, "scrollAdjustPending")) != null ? _f : 0) !== scrollAdjustPendingBeforeMVCP);
+    const didMVCPAdjustScroll = !!checkMVCP && (state.scroll !== scrollBeforeMVCP || ((_e = peek$(ctx, "scrollAdjustPending")) != null ? _e : 0) !== scrollAdjustPendingBeforeMVCP);
+    if (didMVCPAdjustScroll && initialScroll) {
+      updateScroll2(state.scroll);
+      updateScrollRange();
+    }
     let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
     let endNoBuffer = null;
     let endBuffered = null;
-    let loopStart = (_g = suppressInitialScrollSideEffects ? bootstrapInitialScrollState == null ? void 0 : bootstrapInitialScrollState.targetIndexSeed : void 0) != null ? _g : !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
+    let loopStart = (_f = suppressInitialScrollSideEffects ? bootstrapInitialScrollState == null ? void 0 : bootstrapInitialScrollState.targetIndexSeed : void 0) != null ? _f : !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
-      const id = (_h = idCache[i]) != null ? _h : getId(state, i);
+      const id = (_g = idCache[i]) != null ? _g : getId(state, i);
       const top = positions[i];
-      const size = (_i = sizes.get(id)) != null ? _i : getItemSize(ctx, id, i, data[i]);
+      const size = (_h = sizes.get(id)) != null ? _h : getItemSize(ctx, id, i, data[i]);
       const bottom = top + size;
-      if (bottom > scroll - scrollBufferTop) {
+      if (bottom > scrollTopBuffered) {
         loopStart = i;
       } else {
         break;
@@ -4659,8 +5036,8 @@ function calculateItemsInView(ctx, params = {}) {
     let firstFullyOnScreenIndex;
     const dataLength = data.length;
     for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
-      const id = (_j = idCache[i]) != null ? _j : getId(state, i);
-      const size = (_k = sizes.get(id)) != null ? _k : getItemSize(ctx, id, i, data[i]);
+      const id = (_i = idCache[i]) != null ? _i : getId(state, i);
+      const size = (_j = sizes.get(id)) != null ? _j : getItemSize(ctx, id, i, data[i]);
       const top = positions[i];
       if (!foundEnd) {
         if (startNoBuffer === null && top + size > scroll) {
@@ -4699,7 +5076,7 @@ function calculateItemsInView(ctx, params = {}) {
     const firstVisibleAnchorIndex = firstFullyOnScreenIndex != null ? firstFullyOnScreenIndex : startNoBuffer;
     if (firstVisibleAnchorIndex !== null && firstVisibleAnchorIndex !== void 0 && endNoBuffer !== null) {
       for (let i = firstVisibleAnchorIndex; i <= endNoBuffer; i++) {
-        const id = (_l = idCache[i]) != null ? _l : getId(state, i);
+        const id = (_k = idCache[i]) != null ? _k : getId(state, i);
         idsInView.push(id);
       }
     }
@@ -4732,7 +5109,7 @@ function calculateItemsInView(ctx, params = {}) {
       const needNewContainers = [];
       const needNewContainersSet = /* @__PURE__ */ new Set();
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_m = idCache[i]) != null ? _m : getId(state, i);
+        const id = (_l = idCache[i]) != null ? _l : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainersSet.add(i);
           needNewContainers.push(i);
@@ -4741,7 +5118,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_n = idCache[index]) != null ? _n : getId(state, index);
+          const id = (_m = idCache[index]) != null ? _m : getId(state, index);
           if (id && !containerItemKeys.has(id) && !needNewContainersSet.has(index)) {
             needNewContainersSet.add(index);
             needNewContainers.push(index);
@@ -4780,7 +5157,7 @@ function calculateItemsInView(ctx, params = {}) {
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_o = idCache[i]) != null ? _o : getId(state, i);
+          const id = (_n = idCache[i]) != null ? _n : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -4791,7 +5168,7 @@ function calculateItemsInView(ctx, params = {}) {
             state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
           }
           containerItemKeys.set(id, containerIndex);
-          (_p = state.userScrollAnchorResetKeys) == null ? void 0 : _p.add(id);
+          (_o = state.userScrollAnchorResetKeys) == null ? void 0 : _o.add(id);
           const containerSticky = `containerSticky${containerIndex}`;
           const isSticky = stickyIndicesSet.has(i);
           const isAlwaysRender = alwaysRenderSet.has(i);
@@ -4815,17 +5192,17 @@ function calculateItemsInView(ctx, params = {}) {
         if (numContainers !== prevNumContainers) {
           set$(ctx, "numContainers", numContainers);
           if (numContainers > peek$(ctx, "numContainersPooled")) {
-            set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
+            set$(ctx, "numContainersPooled", getExpandedContainerPoolSize(dataLength, numContainers));
           }
         }
       }
-      if (((_q = state.userScrollAnchorResetKeys) == null ? void 0 : _q.size) === 0) {
+      if (((_p = state.userScrollAnchorResetKeys) == null ? void 0 : _p.size) === 0) {
         state.userScrollAnchorResetKeys = void 0;
       }
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_r = idCache[index]) != null ? _r : getId(state, index);
+          const id = (_q = idCache[index]) != null ? _q : getId(state, index);
           const containerIndex = containerItemKeys.get(id);
           if (containerIndex !== void 0) {
             state.stickyContainerPool.add(containerIndex);
@@ -4899,12 +5276,7 @@ function calculateItemsInView(ctx, params = {}) {
         );
       }
     }
-    if (onStickyHeaderChange && stickyIndicesArr.length > 0 && nextActiveStickyIndex !== void 0 && nextActiveStickyIndex !== previousStickyIndex) {
-      const item = data[nextActiveStickyIndex];
-      if (item !== void 0) {
-        onStickyHeaderChange({ index: nextActiveStickyIndex, item });
-      }
-    }
+    finishCalculateItemsInView == null ? void 0 : finishCalculateItemsInView();
   });
 }
 
@@ -4929,21 +5301,36 @@ function doMaintainScrollAtEnd(ctx) {
     if (contentSize < state.scrollLength) {
       state.scroll = 0;
     }
-    requestAnimationFrame(() => {
-      var _a3;
-      if (peek$(ctx, "isWithinMaintainScrollAtEndThreshold")) {
-        state.maintainingScrollAtEnd = true;
-        (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
-          animated: maintainScrollAtEnd.animated
-        });
-        setTimeout(
-          () => {
-            state.maintainingScrollAtEnd = false;
-          },
-          maintainScrollAtEnd.animated ? 500 : 0
-        );
-      }
-    });
+    if (!state.maintainingScrollAtEnd) {
+      state.maintainingScrollAtEnd = true;
+      requestAnimationFrame(() => {
+        if (peek$(ctx, "isWithinMaintainScrollAtEndThreshold")) {
+          const scroller = refScroller.current;
+          if (state.props.horizontal && isHorizontalRTL(state)) {
+            const currentContentSize = getContentSize(ctx);
+            const logicalEndOffset = getLogicalHorizontalMaxOffset(state, currentContentSize);
+            const nativeOffset = toNativeHorizontalOffset(state, logicalEndOffset, currentContentSize);
+            scroller == null ? void 0 : scroller.scrollTo({
+              animated: maintainScrollAtEnd.animated,
+              x: nativeOffset,
+              y: 0
+            });
+          } else {
+            scroller == null ? void 0 : scroller.scrollToEnd({
+              animated: maintainScrollAtEnd.animated
+            });
+          }
+          setTimeout(
+            () => {
+              state.maintainingScrollAtEnd = false;
+            },
+            maintainScrollAtEnd.animated ? 500 : 0
+          );
+        } else {
+          state.maintainingScrollAtEnd = false;
+        }
+      });
+    }
     return true;
   }
   return false;
@@ -5055,14 +5442,21 @@ function doInitialAllocateContainers(ctx) {
     } else {
       averageItemSize = estimatedItemSize;
     }
-    const numContainers = Math.ceil((scrollLength + drawDistance * 2) / averageItemSize * numColumns);
+    const numContainers = Math.max(
+      1,
+      Math.ceil((scrollLength + drawDistance * 2) / averageItemSize * numColumns)
+    );
     for (let i = 0; i < numContainers; i++) {
       set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
       set$(ctx, `containerColumn${i}`, -1);
       set$(ctx, `containerSpan${i}`, 1);
     }
     set$(ctx, "numContainers", numContainers);
-    set$(ctx, "numContainersPooled", numContainers * state.props.initialContainerPoolRatio);
+    set$(
+      ctx,
+      "numContainersPooled",
+      getInitialContainerPoolSize(data.length, numContainers, state.props.initialContainerPoolRatio)
+    );
     if (state.lastLayout) {
       if (state.initialScroll) {
         requestAnimationFrame(() => {
@@ -5125,7 +5519,8 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     }
     checkThresholds(ctx);
     if (state) {
-      state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
+      const crossAxisPadding = state.props.horizontal ? (state.props.stylePaddingTop || 0) + (state.props.stylePaddingBottom || 0) : (state.props.stylePaddingLeft || 0) + (state.props.stylePaddingRight || 0);
+      state.needsOtherAxisSize = otherAxisSize - crossAxisPadding < 10;
     }
     if (IS_DEV && measuredLength === 0) {
       warnDevOnce(
@@ -5213,8 +5608,8 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
 // src/core/onScroll.ts
 function trackInitialScrollNativeProgress(state, newScroll) {
   const initialNativeScrollWatchdog = initialScrollWatchdog.get(state);
-  const didInitialScrollProgress = !!initialNativeScrollWatchdog && initialScrollWatchdog.didObserveProgress(newScroll, initialNativeScrollWatchdog);
-  if (didInitialScrollProgress) {
+  const didInitialScrollReachTarget = !!initialNativeScrollWatchdog && initialScrollWatchdog.didReachTarget(newScroll, initialNativeScrollWatchdog);
+  if (didInitialScrollReachTarget) {
     initialScrollWatchdog.clear(state);
     return;
   }
@@ -5239,7 +5634,7 @@ function cloneScrollEvent(event) {
   };
 }
 function onScroll(ctx, event) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c, _d, _e;
   const state = ctx.state;
   const { scrollProcessingEnabled } = state;
   if (scrollProcessingEnabled === false) {
@@ -5258,6 +5653,9 @@ function onScroll(ctx, event) {
     }
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
+  if (state.props.horizontal) {
+    newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
+  }
   if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
@@ -5352,16 +5750,20 @@ function maybeUpdateAnchoredEndSpace(ctx) {
       let contentBelowAnchor = 0;
       const footerSize = ctx.values.get("footerSize") || 0;
       const stylePaddingBottom = state.props.stylePaddingBottom || 0;
+      let hasUnknownTailSize = false;
       for (let index = anchorIndex; index < data.length; index++) {
         const itemKey = getId(state, index);
         const size = itemKey ? state.sizesKnown.get(itemKey) : void 0;
         const effectiveSize = index === anchorIndex && anchorMaxSize !== void 0 ? Math.min(size || 0, Math.max(0, anchorMaxSize)) : size;
+        if (size === void 0) {
+          hasUnknownTailSize = true;
+        }
         if (effectiveSize !== null && effectiveSize !== void 0 && effectiveSize > 0) {
           contentBelowAnchor += effectiveSize;
         }
       }
       contentBelowAnchor += footerSize + stylePaddingBottom;
-      nextSize = Math.max(0, state.scrollLength - contentBelowAnchor - anchorOffset);
+      nextSize = hasUnknownTailSize ? previousSize || 0 : Math.max(0, state.scrollLength - contentBelowAnchor - anchorOffset);
     }
   }
   if (previousSize !== nextSize) {
@@ -5425,6 +5827,16 @@ function runOrScheduleMVCPRecalculate(ctx) {
     });
   }
 }
+function updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal) {
+  const state = ctx.state;
+  if (state.needsOtherAxisSize) {
+    const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
+    const currentOtherAxisSize = peek$(ctx, "otherAxisSize");
+    if (!currentOtherAxisSize || otherAxisSize > currentOtherAxisSize) {
+      set$(ctx, "otherAxisSize", otherAxisSize);
+    }
+  }
+}
 function updateItemSize(ctx, itemKey, sizeObj) {
   var _a3;
   const state = ctx.state;
@@ -5433,15 +5845,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
   const {
     didContainersLayout,
     sizesKnown,
-    props: {
-      getFixedItemSize,
-      getItemType,
-      horizontal,
-      suggestEstimatedItemSize,
-      onItemSizeChanged,
-      data,
-      maintainScrollAtEnd
-    }
+    props: { getFixedItemSize, getItemType, horizontal, onItemSizeChanged, data, maintainScrollAtEnd }
   } = state;
   if (!data) return;
   const index = state.indexByKey.get(itemKey);
@@ -5456,13 +5860,13 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     const type = getItemType ? (_a3 = getItemType(itemData, index)) != null ? _a3 : "" : "";
     const size2 = getFixedItemSize(itemData, index, type);
     if (size2 !== void 0 && size2 === sizesKnown.get(itemKey)) {
+      updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal);
       return;
     }
   }
   let needsRecalculate = !didContainersLayout;
   let shouldMaintainScrollAtEnd = false;
   let minIndexSizeChanged;
-  let maxOtherAxisSize = peek$(ctx, "otherAxisSize") || 0;
   const prevSizeKnown = state.sizesKnown.get(itemKey);
   const diff = updateOneItemSize(ctx, itemKey, sizeObj);
   const size = roundSize(horizontal ? sizeObj.width : sizeObj.height);
@@ -5473,10 +5877,6 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     if (!needsRecalculate && state.containerItemKeys.has(itemKey)) {
       needsRecalculate = true;
     }
-    if (state.needsOtherAxisSize) {
-      const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
-      maxOtherAxisSize = Math.max(maxOtherAxisSize, otherAxisSize);
-    }
     if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
       shouldMaintainScrollAtEnd = true;
     }
@@ -5492,22 +5892,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
   if (minIndexSizeChanged !== void 0) {
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, minIndexSizeChanged) : minIndexSizeChanged;
   }
-  if (IS_DEV && suggestEstimatedItemSize && minIndexSizeChanged !== void 0) {
-    if (state.timeoutSizeMessage) clearTimeout(state.timeoutSizeMessage);
-    state.timeoutSizeMessage = setTimeout(() => {
-      var _a4;
-      state.timeoutSizeMessage = void 0;
-      const num = state.sizesKnown.size;
-      const avg = (_a4 = state.averageSizes[""]) == null ? void 0 : _a4.avg;
-      console.warn(
-        `[legend-list] Based on the ${num} items rendered so far, the optimal estimated size is ${avg}.`
-      );
-    }, 1e3);
-  }
-  const cur = peek$(ctx, "otherAxisSize");
-  if (!cur || maxOtherAxisSize > cur) {
-    set$(ctx, "otherAxisSize", maxOtherAxisSize);
-  }
+  updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal);
   if (didContainersLayout || checkAllSizesKnown(state, getMountedBufferedIndices(state))) {
     if (needsRecalculate) {
       state.scrollForNextCalculateItemsInView = void 0;
@@ -5608,12 +5993,47 @@ function createColumnWrapperStyle(contentContainerStyle) {
 }
 
 // src/utils/createImperativeHandle.ts
+var DEFAULT_AVERAGE_ITEM_SIZE_TYPE = "default";
+function getAverageItemSizes(state) {
+  const averageItemSizes = {};
+  for (const itemType in state.averageSizes) {
+    const averageSize = state.averageSizes[itemType];
+    if (averageSize) {
+      averageItemSizes[itemType || DEFAULT_AVERAGE_ITEM_SIZE_TYPE] = {
+        average: averageSize.avg,
+        count: averageSize.num
+      };
+    }
+  }
+  return averageItemSizes;
+}
 function createImperativeHandle(ctx) {
   const state = ctx.state;
   const IMPERATIVE_SCROLL_SETTLE_MAX_WAIT_MS = 800;
   const IMPERATIVE_SCROLL_SETTLE_STABLE_FRAMES = 2;
   let imperativeScrollToken = 0;
   const isSettlingAfterDataChange = () => !!state.didDataChange || !!state.didColumnsChange || state.queuedMVCPRecalculate !== void 0 || state.ignoreScrollFromMVCP !== void 0;
+  const isScrollToIndexReady = (targetIndex, allowEmpty = false) => {
+    var _a3;
+    const props = state.props;
+    const dataLength = props.data.length;
+    const anchorIndex = (_a3 = props.anchoredEndSpace) == null ? void 0 : _a3.anchorIndex;
+    if (targetIndex < 0) {
+      return allowEmpty;
+    }
+    if (targetIndex >= dataLength) {
+      return false;
+    }
+    if (anchorIndex === void 0 || anchorIndex < 0 || anchorIndex >= dataLength || targetIndex < anchorIndex || props.getFixedItemSize) {
+      return true;
+    }
+    for (let index = anchorIndex; index < dataLength; index++) {
+      if (!state.sizesKnown.has(getId(state, index))) {
+        return false;
+      }
+    }
+    return true;
+  };
   const runWhenReady = (token, run, isReady) => {
     const startedAt = Date.now();
     let stableFrames = 0;
@@ -5635,11 +6055,10 @@ function createImperativeHandle(ctx) {
     };
     requestAnimationFrame(check);
   };
-  const runScrollWithPromise = (run, options) => new Promise((resolve) => {
-    var _a3, _b;
+  const runScrollWithPromise = (run, isReady = () => true) => new Promise((resolve) => {
+    var _a3;
     const token = ++imperativeScrollToken;
-    const isReady = (_a3 = options == null ? void 0 : options.isReady) != null ? _a3 : (() => true);
-    (_b = state.pendingScrollResolve) == null ? void 0 : _b.call(state);
+    (_a3 = state.pendingScrollResolve) == null ? void 0 : _a3.call(state);
     state.pendingScrollResolve = resolve;
     const runNow = () => {
       if (token !== imperativeScrollToken) {
@@ -5714,6 +6133,7 @@ function createImperativeHandle(ctx) {
       },
       end: state.endNoBuffer,
       endBuffered: state.endBuffered,
+      getAverageItemSizes: () => getAverageItemSizes(state),
       isAtEnd: peek$(ctx, "isAtEnd"),
       isAtStart: peek$(ctx, "isAtStart"),
       isEndReached: state.isEndReached,
@@ -5756,40 +6176,34 @@ function createImperativeHandle(ctx) {
       }
       return false;
     }),
-    scrollToEnd: (options) => runScrollWithPromise(() => {
-      const data = state.props.data;
-      const stylePaddingBottom = state.props.stylePaddingBottom;
-      const index = data.length - 1;
-      if (index !== -1) {
-        const paddingBottom = stylePaddingBottom || 0;
-        const footerSize = peek$(ctx, "footerSize") || 0;
-        scrollToIndex(ctx, {
-          ...options,
-          index,
-          viewOffset: -paddingBottom - footerSize + ((options == null ? void 0 : options.viewOffset) || 0),
-          viewPosition: 1
-        });
-        return true;
-      }
-      return false;
-    }),
-    scrollToIndex: (params) => {
-      const shouldWaitForOutOfRangeTarget = params.index >= 0 && params.index >= state.props.data.length;
-      const options = shouldWaitForOutOfRangeTarget ? {
-        isReady: () => {
-          var _a3;
-          const props = state.props;
-          const anchorIndex = (_a3 = props.anchoredEndSpace) == null ? void 0 : _a3.anchorIndex;
-          const lastIndex = props.data.length - 1;
-          const isInRange = params.index < props.data.length;
-          const shouldWaitForAnchorSize = isInRange && anchorIndex !== void 0 && anchorIndex >= 0 && params.index >= anchorIndex && !props.getFixedItemSize && !state.sizesKnown.has(getId(state, lastIndex));
-          return isInRange && !shouldWaitForAnchorSize;
+    scrollToEnd: (options) => runScrollWithPromise(
+      () => {
+        const data = state.props.data;
+        const stylePaddingBottom = state.props.stylePaddingBottom;
+        const index = data.length - 1;
+        if (index !== -1) {
+          const paddingBottom = stylePaddingBottom || 0;
+          const footerSize = peek$(ctx, "footerSize") || 0;
+          scrollToIndex(ctx, {
+            ...options,
+            index,
+            viewOffset: -paddingBottom - footerSize + ((options == null ? void 0 : options.viewOffset) || 0),
+            viewPosition: 1
+          });
+          return true;
         }
-      } : void 0;
-      return runScrollWithPromise(() => {
-        scrollToIndex(ctx, params);
-        return true;
-      }, options);
+        return false;
+      },
+      () => isScrollToIndexReady(state.props.data.length - 1, true)
+    ),
+    scrollToIndex: (params) => {
+      return runScrollWithPromise(
+        () => {
+          scrollToIndex(ctx, params);
+          return true;
+        },
+        params.index >= 0 ? () => isScrollToIndexReady(params.index) : void 0
+      );
     },
     scrollToItem: ({ item, ...props }) => runScrollWithPromise(() => {
       const data = state.props.data;
@@ -6053,7 +6467,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     getFixedItemSize,
     getItemType,
     horizontal,
-    initialContainerPoolRatio = 2,
+    rtl,
+    initialContainerPoolRatio = 3,
+    estimatedHeaderSize,
     initialScrollAtEnd = false,
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
@@ -6094,7 +6510,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     stickyIndices: stickyIndicesDeprecated,
     // TODOV3: Remove from v3 release
     style: styleProp,
-    suggestEstimatedItemSize,
     useWindowScroll = false,
     viewabilityConfig,
     viewabilityConfigCallbackPairs,
@@ -6122,13 +6537,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const style = { ...StyleSheet.flatten(styleProp) };
   const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
   const stylePaddingBottomState = extractPadding(style, contentContainerStyle, "Bottom");
+  const stylePaddingLeftState = extractPadding(style, contentContainerStyle, "Left");
+  const stylePaddingRightState = extractPadding(style, contentContainerStyle, "Right");
   const maintainScrollAtEndConfig = normalizeMaintainScrollAtEnd(maintainScrollAtEnd);
   const maintainVisibleContentPositionConfig = normalizeMaintainVisibleContentPosition(
     maintainVisibleContentPositionProp
   );
   const hasInitialScrollIndex = initialScrollIndexProp !== void 0 && initialScrollIndexProp !== null;
   const hasInitialScrollOffset = initialScrollOffsetProp !== void 0 && initialScrollOffsetProp !== null;
-  const initialScrollUsesOffsetOnly = !initialScrollAtEnd && !hasInitialScrollIndex && hasInitialScrollOffset;
+  const shouldInitializeHorizontalRTL = !initialScrollAtEnd && !hasInitialScrollIndex && !hasInitialScrollOffset && isHorizontalRTLProps({ horizontal, rtl });
+  const initialScrollUsesOffsetOnly = !initialScrollAtEnd && !hasInitialScrollIndex && (hasInitialScrollOffset || shouldInitializeHorizontalRTL);
   const usesBootstrapInitialScroll = initialScrollAtEnd || hasInitialScrollIndex;
   const initialScrollProp = initialScrollAtEnd ? {
     index: Math.max(0, dataProp.length - 1),
@@ -6235,7 +6653,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         startReachedSnapshotDataChangeEpoch: void 0,
         stickyContainerPool: /* @__PURE__ */ new Set(),
         stickyContainers: /* @__PURE__ */ new Map(),
-        timeoutSizeMessage: 0,
         timeouts: /* @__PURE__ */ new Set(),
         totalSize: 0,
         viewabilityConfigCallbackPairs: void 0
@@ -6245,6 +6662,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       internalState.reprocessCurrentScroll = () => updateScroll(ctx, internalState.scroll, true);
       set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPositionConfig);
       set$(ctx, "extraData", extraData);
+      if (estimatedHeaderSize !== void 0) {
+        set$(ctx, "headerSize", estimatedHeaderSize);
+      }
     }
     refState.current = ctx.state;
   }
@@ -6255,7 +6675,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const didDataReferenceChangeLocal = state.props.data !== dataProp;
   const didDataVersionChangeLocal = state.props.dataVersion !== dataVersion;
   const didDataChangeLocal = didDataVersionChangeLocal || didDataReferenceChangeLocal && checkStructuralDataChange(state, dataProp, state.props.data);
-  if (didDataChangeLocal && state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.props.data.length > 0) {
+  if (didDataChangeLocal && !initialScrollAtEnd && state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.props.data.length > 0) {
     clearPreservedInitialScrollTarget(state);
   }
   if (didDataChangeLocal) {
@@ -6304,13 +6724,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     positionComponentInternal,
     recycleItems: !!recycleItems,
     renderItem,
+    rtl,
     snapToIndices,
     stickyIndicesArr: stickyHeaderIndices != null ? stickyHeaderIndices : [],
     stickyIndicesSet: useMemo(() => new Set(stickyHeaderIndices != null ? stickyHeaderIndices : []), [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(",")]),
     stickyPositionComponentInternal,
     stylePaddingBottom: stylePaddingBottomState,
+    stylePaddingLeft: stylePaddingLeftState,
+    stylePaddingRight: stylePaddingRightState,
     stylePaddingTop: stylePaddingTopState,
-    suggestEstimatedItemSize: !!suggestEstimatedItemSize,
     useWindowScroll: useWindowScrollResolved
   };
   state.refScroller = refScroller;
@@ -6332,6 +6754,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   if (isFirstLocal) {
     initializeStateVars(false);
+    resetLayoutCachesForDataChange(state);
     updateItemPositions(
       ctx,
       /*dataChanged*/
@@ -6349,6 +6772,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [usesBootstrapInitialScroll]);
   useLayoutEffect(() => {
     initializeInitialScrollOnMount(ctx, {
+      alwaysDispatchInitialScroll: shouldInitializeHorizontalRTL,
       dataLength: dataProp.length,
       hasFooterComponent: !!ListFooterComponent,
       initialContentOffset,