@multiplatform.one/components 7.10.0 → 7.15.0

package/dist/cjs/views/TreeView.cjs

@@ -91,11 +91,14 @@ function TreeView({
   estimateSize: estimateSizeProp,
   overscan = 10,
   height: heightProp,
+  initialScrollOffset,
+  onScrollOffsetChange,
   emptyMessage: emptyMessageProp,
   defaultExpandedIds,
   expandedIds: controlledExpandedIds,
   onExpandedIdsChange,
   revealRequest,
+  onRevealComplete,
   expandByDefault = false,
   display = "default",
   showExpansionArrows = true,
@@ -133,6 +136,26 @@ function TreeView({
   const treeId = (0, import_react2.useId)();
   const containerRef = (0, import_react2.useRef)(null);
   const flashListRef = (0, import_react2.useRef)(null);
+  const initialScroll = (0, import_react2.useRef)(initialScrollOffset === void 0 ? void 0 : {
+    offset: Number.isFinite(initialScrollOffset) ? Math.max(0, initialScrollOffset) : 0
+  });
+  const cancelInitialScroll = (0, import_react2.useCallback)(() => {
+    initialScroll.current = void 0;
+  }, []);
+  const hasNodes = nodes.length > 0;
+  const listInstance = (0, import_react2.useMemo)(() => ({
+    hasNodes,
+    attached: false,
+    loaded: false,
+    indexScrollRequested: false,
+    offset: 0
+  }), [hasNodes]);
+  const scrollActive = (0, import_react2.useRef)(true);
+  const lastReportedOffset = (0, import_react2.useRef)(void 0);
+  const offsetCallback = (0, import_react2.useRef)(onScrollOffsetChange);
+  (0, import_react2.useLayoutEffect)(() => {
+    offsetCallback.current = onScrollOffsetChange;
+  }, [onScrollOffsetChange]);
   const [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
   const [keyboardRing, setKeyboardRing] = (0, import_react2.useState)(false);
   const typeaheadRef = (0, import_react2.useRef)({
@@ -162,6 +185,7 @@ function TreeView({
   const rowHeights = (0, import_react2.useRef)(/* @__PURE__ */new Map());
   const getRowHeight = (0, import_react2.useCallback)(id => rowHeights.current.get(id) ?? estimateSize, [estimateSize]);
   const toggleNode = (0, import_react2.useCallback)(node => {
+    cancelInitialScroll();
     const next = new Set(expandedIds);
     if (next.has(node.id)) {
       next.delete(node.id);
@@ -170,7 +194,7 @@ function TreeView({
     }
     setExpandedIds(next);
     onNodeToggle?.(node);
-  }, [expandedIds, setExpandedIds, onNodeToggle]);
+  }, [expandedIds, setExpandedIds, onNodeToggle, cancelInitialScroll]);
   const previousExpandedIds = (0, import_react2.useRef)(expandedIds);
   (0, import_react2.useLayoutEffect)(() => {
     const previous = previousExpandedIds.current;
@@ -219,28 +243,115 @@ function TreeView({
     return result;
   }, [nodes, expandedIds]);
   const revealIntent = (0, import_react2.useRef)(void 0);
-  const revealFrame = (0, import_react2.useRef)(void 0);
-  const revealStep = (0, import_react2.useRef)(() => {});
+  const scrollFrame = (0, import_react2.useRef)(void 0);
+  const scrollStep = (0, import_react2.useRef)(() => {});
   const renderedRows = (0, import_react2.useRef)(/* @__PURE__ */new Set());
-  const scheduleReveal = (0, import_react2.useCallback)(() => {
-    if (!revealIntent.current || revealIntent.current.complete || revealFrame.current !== void 0) return;
-    revealFrame.current = requestAnimationFrame(() => {
-      revealFrame.current = void 0;
-      revealStep.current();
+  const scrollBounds = (0, import_react2.useCallback)(() => {
+    const list = flashListRef.current;
+    if (!scrollActive.current || !listInstance.attached || !listInstance.loaded || !list) return;
+    if (import_tamagui.isWeb) {
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect || !(rect.width > 0) || !(rect.height > 0)) return;
+    }
+    const viewport = list.getWindowSize();
+    const contentHeight = list.getChildContainerDimensions().height + list.getFirstItemOffset();
+    if (!Number.isFinite(viewport.width) || viewport.width <= 0 || !Number.isFinite(viewport.height) || viewport.height <= 0 || !Number.isFinite(contentHeight) || contentHeight <= 0) return;
+    return {
+      list,
+      width: viewport.width,
+      height: viewport.height,
+      contentHeight,
+      maxOffset: Math.max(0, contentHeight - viewport.height)
+    };
+  }, [listInstance]);
+  const observeOffset = (0, import_react2.useCallback)((offset, fromEvent = false) => {
+    if (!scrollActive.current || !listInstance.attached || !Number.isFinite(offset)) return;
+    if (fromEvent && initialScroll.current?.attempted === void 0 && offset !== listInstance.offset) {
+      cancelInitialScroll();
+    }
+    listInstance.offset = offset;
+    const bounds = scrollBounds();
+    if (!bounds) return;
+    const bounded = Math.max(0, Math.min(offset, bounds.maxOffset));
+    const initial = initialScroll.current;
+    if (initial) {
+      const target = Math.min(initial.offset, bounds.maxOffset);
+      if (initial.attempted ? Math.abs(bounded - target) >= 1 : bounded !== target) return;
+      initialScroll.current = void 0;
+    }
+    if (offsetCallback.current && lastReportedOffset.current !== bounded) {
+      lastReportedOffset.current = bounded;
+      offsetCallback.current(bounded);
+    }
+  }, [cancelInitialScroll, scrollBounds, listInstance]);
+  const scheduleScroll = (0, import_react2.useCallback)(() => {
+    if (!scrollActive.current || !listInstance.attached || scrollFrame.current !== void 0) return;
+    if (!initialScroll.current && (!revealIntent.current || revealIntent.current.complete) && !offsetCallback.current) return;
+    scrollFrame.current = requestAnimationFrame(() => {
+      scrollFrame.current = void 0;
+      if (listInstance.attached) scrollStep.current();
     });
+  }, [listInstance]);
+  const attachList = (0, import_react2.useCallback)(list => {
+    flashListRef.current = list;
+    listInstance.attached = list !== null;
+    if (!list) {
+      listInstance.loaded = false;
+      if (initialScroll.current) initialScroll.current.attempted = void 0;
+      if (scrollFrame.current !== void 0) cancelAnimationFrame(scrollFrame.current);
+      scrollFrame.current = void 0;
+    }
+  }, [listInstance]);
+  (0, import_react2.useLayoutEffect)(() => {
+    scrollActive.current = true;
+    return () => {
+      scrollActive.current = false;
+      revealIntent.current = void 0;
+      if (scrollFrame.current !== void 0) cancelAnimationFrame(scrollFrame.current);
+      scrollFrame.current = void 0;
+    };
   }, []);
   (0, import_react2.useLayoutEffect)(() => {
     if (!revealRequest) {
       revealIntent.current = void 0;
     } else if (revealIntent.current?.id !== revealRequest.id || revealIntent.current?.requestId !== revealRequest.requestId) {
+      cancelInitialScroll();
       revealIntent.current = {
         ...revealRequest,
         complete: false
       };
     }
-    revealStep.current = () => {
+    const step = () => {
+      const currentList = flashListRef.current;
+      if (currentList) {
+        observeOffset(listInstance.indexScrollRequested ? listInstance.offset : currentList.getAbsoluteLastScrollOffset());
+      }
+      if (!scrollActive.current) return;
+      if (scrollStep.current !== step) {
+        scheduleScroll();
+        return;
+      }
       const intent = revealIntent.current;
-      if (!intent || intent.complete) return;
+      if (!intent || intent.complete) {
+        const initial = initialScroll.current;
+        const bounds = scrollBounds();
+        if (!initial || !bounds || flatNodes.length === 0) return;
+        const target = Math.min(initial.offset, bounds.maxOffset);
+        const attempted = initial.attempted;
+        if (!attempted || attempted.target !== target || attempted.width !== bounds.width || attempted.height !== bounds.height || attempted.contentHeight !== bounds.contentHeight) {
+          initial.attempted = {
+            target,
+            width: bounds.width,
+            height: bounds.height,
+            contentHeight: bounds.contentHeight
+          };
+          bounds.list.scrollToOffset({
+            offset: target,
+            animated: false
+          });
+        }
+        return;
+      }
       const next = (0, import_treeViewReveal.treeRevealExpansion)(nodes, expandedIds, intent.id);
       if (!next) return;
       if (next !== expandedIds) {
@@ -266,15 +377,26 @@ function TreeView({
       if (viewport.width <= 0) return;
       const layout = list.getLayout(index);
       if (!layout) return;
-      const offset = list.getAbsoluteLastScrollOffset();
+      const offset = listInstance.indexScrollRequested ? listInstance.offset : list.getAbsoluteLastScrollOffset();
+      const top = layout.y + list.getFirstItemOffset();
       const nextOffset = (0, import_treeViewReveal.treeRevealOffset)({
-        y: layout.y + list.getFirstItemOffset(),
+        y: top,
         height: layout.height
       }, offset, viewport.height);
       if (nextOffset === void 0) return;
       if (Math.abs(nextOffset - offset) < 1) {
-        const visible = list.computeVisibleIndices();
-        if (layout.isHeightMeasured && renderedRows.current.has(intent.id) && index >= visible.startIndex && index <= visible.endIndex) intent.complete = true;
+        let visible = top < offset + viewport.height && top + layout.height > offset;
+        if (!listInstance.indexScrollRequested) {
+          const range = list.computeVisibleIndices();
+          visible = visible && index >= range.startIndex && index <= range.endIndex;
+        }
+        if (revealIntent.current === intent && layout.isHeightMeasured && renderedRows.current.has(intent.id) && visible) {
+          intent.complete = true;
+          onRevealComplete?.({
+            id: intent.id,
+            requestId: intent.requestId
+          });
+        }
         return;
       }
       list.scrollToOffset({
@@ -282,21 +404,19 @@ function TreeView({
         animated: false
       });
     };
-    scheduleReveal();
-  }, [nodes, expandedIds, setExpandedIds, flatNodes, revealRequest?.id, revealRequest?.requestId, height, motion, scheduleReveal]);
-  (0, import_react2.useLayoutEffect)(() => () => {
-    revealIntent.current = void 0;
-    if (revealFrame.current !== void 0) cancelAnimationFrame(revealFrame.current);
-    revealFrame.current = void 0;
-  }, []);
+    scrollStep.current = step;
+    scheduleScroll();
+  }, [nodes, expandedIds, setExpandedIds, flatNodes, revealRequest?.id, revealRequest?.requestId, onRevealComplete, height, motion, scheduleScroll, cancelInitialScroll, observeOffset, scrollBounds, listInstance]);
   const scrollToIndex = (0, import_react2.useCallback)(index => {
     if (index >= 0 && index < flatNodes.length) {
+      cancelInitialScroll();
+      listInstance.indexScrollRequested = true;
       flashListRef.current?.scrollToIndex({
         index,
         animated: true
       });
     }
-  }, [flatNodes.length]);
+  }, [flatNodes.length, cancelInitialScroll, listInstance]);
   const focusRow = (0, import_react2.useCallback)(index => {
     setKeyboardRing(true);
     setFocusedIndex(index);
@@ -514,6 +634,7 @@ function TreeView({
     if (!container?.getBoundingClientRect) return false;
     const session = (0, import_treeViewDnd.treeKeyboardLift)(nodes, flat.node.id);
     if (!session) return false;
+    cancelInitialScroll();
     const rowRect = rowEl.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
     grabOffsetRef.current = {
@@ -546,7 +667,7 @@ function TreeView({
     announce((0, import_treeViewDnd.describeTreeDragState)("lift", session, nodes, flat.node.label));
     startAutoScroll();
     return true;
-  }, [announce, nodes, startAutoScroll]);
+  }, [announce, nodes, startAutoScroll, cancelInitialScroll]);
   const handleDragHandlePointerDown = (0, import_react2.useCallback)((flat, e) => {
     if (!canReorder || typeof window === "undefined") return;
     if (e.button !== void 0 && e.button !== 0) return;
@@ -677,6 +798,7 @@ function TreeView({
     if (!flat) return false;
     const session = (0, import_treeViewDnd.treeKeyboardLift)(nodes, flat.node.id);
     if (!session) return false;
+    cancelInitialScroll();
     const ui = {
       mode: "keyboard",
       node: flat.node,
@@ -694,7 +816,7 @@ function TreeView({
     dragUiRef.current = ui;
     announce((0, import_treeViewDnd.describeTreeDragState)("lift", session, nodes, flat.node.label));
     return true;
-  }, [announce, canReorder, dndRows, flatNodes, focusedIndex, getRowHeight, nodes]);
+  }, [announce, canReorder, dndRows, flatNodes, focusedIndex, getRowHeight, nodes, cancelInitialScroll]);
   const moveKeyboardDrag = (0, import_react2.useCallback)(direction => {
     const ui = dragUiRef.current;
     if (!ui || ui.mode !== "keyboard") return false;
@@ -860,20 +982,30 @@ function TreeView({
       onFocus: handleContainerFocus,
       onBlur: handleContainerBlur,
       onKeyDown: handleTreeKeyDown,
-      onLayout: revealRequest ? scheduleReveal : void 0,
+      onLayout: scheduleScroll,
+      ...(import_tamagui.isWeb && {
+        onWheel: cancelInitialScroll,
+        onPointerDown: cancelInitialScroll
+      }),
       position: "relative",
       style: {
         height
       },
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_flash_list.FlashList, {
-        ref: flashListRef,
+        ref: attachList,
         data: flatNodes,
         drawDistance: overscan * estimateSize,
         keyExtractor: item => item.node.id,
-        ...(revealRequest && {
-          onLoad: scheduleReveal,
-          onCommitLayoutEffect: scheduleReveal
-        }),
+        onLoad: () => {
+          if (!scrollActive.current || !listInstance.attached) return;
+          listInstance.loaded = true;
+          scheduleScroll();
+        },
+        onCommitLayoutEffect: scheduleScroll,
+        onContentSizeChange: scheduleScroll,
+        onScrollBeginDrag: () => {
+          if (scrollActive.current && listInstance.attached) cancelInitialScroll();
+        },
         extraData: {
           focused: effectiveFocused,
           selectedId,
@@ -884,17 +1016,17 @@ function TreeView({
           keyboardRing,
           collapsedSelectedAncestors
         },
-        ...((canReorder || revealRequest) && {
-          onScroll: e => {
-            const y = e?.nativeEvent?.contentOffset?.y;
-            if (typeof y === "number") {
-              scrollOffsetRef.current = y;
-              if (dragUiRef.current) setDragScrollY(y);
-            }
-            scheduleReveal();
-          },
-          scrollEventThrottle: 16
-        }),
+        onScroll: e => {
+          if (!scrollActive.current || !listInstance.attached) return;
+          const y = e?.nativeEvent?.contentOffset?.y;
+          if (typeof y === "number" && Number.isFinite(y)) {
+            scrollOffsetRef.current = y;
+            if (dragUiRef.current) setDragScrollY(y);
+            observeOffset(y, true);
+          }
+          scheduleScroll();
+        },
+        scrollEventThrottle: 16,
         renderItem: ({
           item,
           index
@@ -930,7 +1062,7 @@ function TreeView({
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
             ref: row => {
               if (row) renderedRows.current.add(node.id);else renderedRows.current.delete(node.id);
-              scheduleReveal();
+              scheduleScroll();
             },
             id: `${treeId}-node-${index}`,
             ...{
@@ -966,7 +1098,7 @@ function TreeView({
             onLayout: e => {
               const h = e?.nativeEvent?.layout?.height;
               if (typeof h === "number" && h > 0) rowHeights.current.set(node.id, h);
-              scheduleReveal();
+              scheduleScroll();
             },
             backgroundColor:
             // Nest-into parent highlight wins while a drag is active