@multiplatform.one/components 7.10.0 → 7.15.0

package/dist/esm/views/TreeView.native.js

@@ -108,11 +108,14 @@ function TreeView(param) {
     estimateSize: estimateSizeProp,
     overscan = 10,
     height: heightProp,
+    initialScrollOffset,
+    onScrollOffsetChange,
     emptyMessage: emptyMessageProp,
     defaultExpandedIds,
     expandedIds: controlledExpandedIds,
     onExpandedIdsChange,
     revealRequest,
+    onRevealComplete,
     expandByDefault = false,
     display = "default",
     showExpansionArrows = true,
@@ -152,6 +155,28 @@ function TreeView(param) {
   var treeId = useId();
   var containerRef = useRef(null);
   var flashListRef = useRef(null);
+  var initialScroll = useRef(initialScrollOffset === void 0 ? void 0 : {
+    offset: Number.isFinite(initialScrollOffset) ? Math.max(0, initialScrollOffset) : 0
+  });
+  var cancelInitialScroll = useCallback(function () {
+    initialScroll.current = void 0;
+  }, []);
+  var hasNodes = nodes.length > 0;
+  var listInstance = useMemo(function () {
+    return {
+      hasNodes,
+      attached: false,
+      loaded: false,
+      indexScrollRequested: false,
+      offset: 0
+    };
+  }, [hasNodes]);
+  var scrollActive = useRef(true);
+  var lastReportedOffset = useRef(void 0);
+  var offsetCallback = useRef(onScrollOffsetChange);
+  useLayoutEffect(function () {
+    offsetCallback.current = onScrollOffsetChange;
+  }, [onScrollOffsetChange]);
   var [focusedIndex, setFocusedIndex] = useState(-1);
   var [keyboardRing, setKeyboardRing] = useState(false);
   var typeaheadRef = useRef({
@@ -188,6 +213,7 @@ function TreeView(param) {
     return (_rowHeights_current_get = rowHeights.current.get(id)) !== null && _rowHeights_current_get !== void 0 ? _rowHeights_current_get : estimateSize;
   }, [estimateSize]);
   var toggleNode = useCallback(function (node) {
+    cancelInitialScroll();
     var next = new Set(expandedIds);
     if (next.has(node.id)) {
       next.delete(node.id);
@@ -196,7 +222,7 @@ function TreeView(param) {
     }
     setExpandedIds(next);
     onNodeToggle === null || onNodeToggle === void 0 ? void 0 : onNodeToggle(node);
-  }, [expandedIds, setExpandedIds, onNodeToggle]);
+  }, [expandedIds, setExpandedIds, onNodeToggle, cancelInitialScroll]);
   var previousExpandedIds = useRef(expandedIds);
   useLayoutEffect(function () {
     var previous = previousExpandedIds.current;
@@ -272,29 +298,119 @@ function TreeView(param) {
     return result;
   }, [nodes, expandedIds]);
   var revealIntent = useRef(void 0);
-  var revealFrame = useRef(void 0);
-  var revealStep = useRef(function () {});
+  var scrollFrame = useRef(void 0);
+  var scrollStep = useRef(function () {});
   var renderedRows = useRef(/* @__PURE__ */new Set());
-  var scheduleReveal = useCallback(function () {
-    if (!revealIntent.current || revealIntent.current.complete || revealFrame.current !== void 0) return;
-    revealFrame.current = requestAnimationFrame(function () {
-      revealFrame.current = void 0;
-      revealStep.current();
+  var scrollBounds = useCallback(function () {
+    var list = flashListRef.current;
+    if (!scrollActive.current || !listInstance.attached || !listInstance.loaded || !list) return;
+    if (isWeb) {
+      var _containerRef_current;
+      var rect = (_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect();
+      if (!rect || !(rect.width > 0) || !(rect.height > 0)) return;
+    }
+    var viewport = list.getWindowSize();
+    var 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]);
+  var observeOffset = useCallback(function (offset) {
+    var fromEvent = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var _initialScroll_current;
+    if (!scrollActive.current || !listInstance.attached || !Number.isFinite(offset)) return;
+    if (fromEvent && ((_initialScroll_current = initialScroll.current) === null || _initialScroll_current === void 0 ? void 0 : _initialScroll_current.attempted) === void 0 && offset !== listInstance.offset) {
+      cancelInitialScroll();
+    }
+    listInstance.offset = offset;
+    var bounds = scrollBounds();
+    if (!bounds) return;
+    var bounded = Math.max(0, Math.min(offset, bounds.maxOffset));
+    var initial = initialScroll.current;
+    if (initial) {
+      var 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]);
+  var scheduleScroll = useCallback(function () {
+    if (!scrollActive.current || !listInstance.attached || scrollFrame.current !== void 0) return;
+    if (!initialScroll.current && (!revealIntent.current || revealIntent.current.complete) && !offsetCallback.current) return;
+    scrollFrame.current = requestAnimationFrame(function () {
+      scrollFrame.current = void 0;
+      if (listInstance.attached) scrollStep.current();
     });
+  }, [listInstance]);
+  var attachList = useCallback(function (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]);
+  useLayoutEffect(function () {
+    scrollActive.current = true;
+    return function () {
+      scrollActive.current = false;
+      revealIntent.current = void 0;
+      if (scrollFrame.current !== void 0) cancelAnimationFrame(scrollFrame.current);
+      scrollFrame.current = void 0;
+    };
   }, []);
   useLayoutEffect(function () {
     var _revealIntent_current, _revealIntent_current1;
     if (!revealRequest) {
       revealIntent.current = void 0;
     } else if (((_revealIntent_current = revealIntent.current) === null || _revealIntent_current === void 0 ? void 0 : _revealIntent_current.id) !== revealRequest.id || ((_revealIntent_current1 = revealIntent.current) === null || _revealIntent_current1 === void 0 ? void 0 : _revealIntent_current1.requestId) !== revealRequest.requestId) {
+      cancelInitialScroll();
       revealIntent.current = {
         ...revealRequest,
         complete: false
       };
     }
-    revealStep.current = function () {
+    var step = function step1() {
+      var currentList = flashListRef.current;
+      if (currentList) {
+        observeOffset(listInstance.indexScrollRequested ? listInstance.offset : currentList.getAbsoluteLastScrollOffset());
+      }
+      if (!scrollActive.current) return;
+      if (scrollStep.current !== step) {
+        scheduleScroll();
+        return;
+      }
       var intent = revealIntent.current;
-      if (!intent || intent.complete) return;
+      if (!intent || intent.complete) {
+        var initial = initialScroll.current;
+        var bounds = scrollBounds();
+        if (!initial || !bounds || flatNodes.length === 0) return;
+        var target = Math.min(initial.offset, bounds.maxOffset);
+        var 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;
+      }
       var next = treeRevealExpansion(nodes, expandedIds, intent.id);
       if (!next) return;
       if (next !== expandedIds) {
@@ -325,15 +441,26 @@ function TreeView(param) {
       if (viewport.width <= 0) return;
       var layout = list.getLayout(index);
       if (!layout) return;
-      var offset = list.getAbsoluteLastScrollOffset();
+      var offset = listInstance.indexScrollRequested ? listInstance.offset : list.getAbsoluteLastScrollOffset();
+      var top = layout.y + list.getFirstItemOffset();
       var nextOffset = 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) {
-        var visible = list.computeVisibleIndices();
-        if (layout.isHeightMeasured && renderedRows.current.has(intent.id) && index >= visible.startIndex && index <= visible.endIndex) intent.complete = true;
+        var visible = top < offset + viewport.height && top + layout.height > offset;
+        if (!listInstance.indexScrollRequested) {
+          var 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 === null || onRevealComplete === void 0 ? void 0 : onRevealComplete({
+            id: intent.id,
+            requestId: intent.requestId
+          });
+        }
         return;
       }
       list.scrollToOffset({
@@ -341,24 +468,20 @@ function TreeView(param) {
         animated: false
       });
     };
-    scheduleReveal();
-  }, [nodes, expandedIds, setExpandedIds, flatNodes, revealRequest === null || revealRequest === void 0 ? void 0 : revealRequest.id, revealRequest === null || revealRequest === void 0 ? void 0 : revealRequest.requestId, height, motion, scheduleReveal]);
-  useLayoutEffect(function () {
-    return function () {
-      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 === null || revealRequest === void 0 ? void 0 : revealRequest.id, revealRequest === null || revealRequest === void 0 ? void 0 : revealRequest.requestId, onRevealComplete, height, motion, scheduleScroll, cancelInitialScroll, observeOffset, scrollBounds, listInstance]);
   var scrollToIndex = useCallback(function (index) {
     if (index >= 0 && index < flatNodes.length) {
       var _flashListRef_current;
+      cancelInitialScroll();
+      listInstance.indexScrollRequested = true;
       (_flashListRef_current = flashListRef.current) === null || _flashListRef_current === void 0 ? void 0 : _flashListRef_current.scrollToIndex({
         index,
         animated: true
       });
     }
-  }, [flatNodes.length]);
+  }, [flatNodes.length, cancelInitialScroll, listInstance]);
   var focusRow = useCallback(function (index) {
     setKeyboardRing(true);
     setFocusedIndex(index);
@@ -606,6 +729,7 @@ function TreeView(param) {
     if (!(container === null || container === void 0 ? void 0 : container.getBoundingClientRect)) return false;
     var session = treeKeyboardLift(nodes, flat.node.id);
     if (!session) return false;
+    cancelInitialScroll();
     var rowRect = rowEl.getBoundingClientRect();
     var containerRect = container.getBoundingClientRect();
     grabOffsetRef.current = {
@@ -638,7 +762,7 @@ function TreeView(param) {
     announce(describeTreeDragState("lift", session, nodes, flat.node.label));
     startAutoScroll();
     return true;
-  }, [announce, nodes, startAutoScroll]);
+  }, [announce, nodes, startAutoScroll, cancelInitialScroll]);
   var handleDragHandlePointerDown = useCallback(function (flat, e) {
     var _ref13, _e_pointerType;
     var _sessionCleanupRef_current, _e_stopPropagation, _handleEl_closest;
@@ -775,6 +899,7 @@ function TreeView(param) {
     if (!flat) return false;
     var session = treeKeyboardLift(nodes, flat.node.id);
     if (!session) return false;
+    cancelInitialScroll();
     var ui = {
       mode: "keyboard",
       node: flat.node,
@@ -792,7 +917,7 @@ function TreeView(param) {
     dragUiRef.current = ui;
     announce(describeTreeDragState("lift", session, nodes, flat.node.label));
     return true;
-  }, [announce, canReorder, dndRows, flatNodes, focusedIndex, getRowHeight, nodes]);
+  }, [announce, canReorder, dndRows, flatNodes, focusedIndex, getRowHeight, nodes, cancelInitialScroll]);
   var moveKeyboardDrag = useCallback(function (direction) {
     var ui = dragUiRef.current;
     if (!ui || ui.mode !== "keyboard") return false;
@@ -962,22 +1087,32 @@ function TreeView(param) {
       onFocus: handleContainerFocus,
       onBlur: handleContainerBlur,
       onKeyDown: handleTreeKeyDown,
-      onLayout: revealRequest ? scheduleReveal : void 0,
+      onLayout: scheduleScroll,
+      ...(isWeb && {
+        onWheel: cancelInitialScroll,
+        onPointerDown: cancelInitialScroll
+      }),
       position: "relative",
       style: {
         height
       },
       children: [/* @__PURE__ */_jsx(FlashList, {
-        ref: flashListRef,
+        ref: attachList,
         data: flatNodes,
         drawDistance: overscan * estimateSize,
         keyExtractor: function keyExtractor(item) {
           return item.node.id;
         },
-        ...(revealRequest && {
-          onLoad: scheduleReveal,
-          onCommitLayoutEffect: scheduleReveal
-        }),
+        onLoad: function onLoad() {
+          if (!scrollActive.current || !listInstance.attached) return;
+          listInstance.loaded = true;
+          scheduleScroll();
+        },
+        onCommitLayoutEffect: scheduleScroll,
+        onContentSizeChange: scheduleScroll,
+        onScrollBeginDrag: function onScrollBeginDrag() {
+          if (scrollActive.current && listInstance.attached) cancelInitialScroll();
+        },
         extraData: {
           focused: effectiveFocused,
           selectedId,
@@ -988,18 +1123,18 @@ function TreeView(param) {
           keyboardRing,
           collapsedSelectedAncestors
         },
-        ...((canReorder || revealRequest) && {
-          onScroll: function onScroll(e) {
-            var _e_nativeEvent_contentOffset, _e_nativeEvent;
-            var y = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_contentOffset = _e_nativeEvent.contentOffset) === null || _e_nativeEvent_contentOffset === void 0 ? void 0 : _e_nativeEvent_contentOffset.y;
-            if (typeof y === "number") {
-              scrollOffsetRef.current = y;
-              if (dragUiRef.current) setDragScrollY(y);
-            }
-            scheduleReveal();
-          },
-          scrollEventThrottle: 16
-        }),
+        onScroll: function onScroll(e) {
+          var _e_nativeEvent_contentOffset, _e_nativeEvent;
+          if (!scrollActive.current || !listInstance.attached) return;
+          var y = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_contentOffset = _e_nativeEvent.contentOffset) === null || _e_nativeEvent_contentOffset === void 0 ? void 0 : _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: function renderItem(param2) {
           var {
             item,
@@ -1038,7 +1173,7 @@ function TreeView(param) {
           return /* @__PURE__ */_jsxs(XStack, {
             ref: function ref(row) {
               if (row) renderedRows.current.add(node.id);else renderedRows.current.delete(node.id);
-              scheduleReveal();
+              scheduleScroll();
             },
             id: `${treeId}-node-${index}`,
             "data-treeview-row": node.id,
@@ -1071,7 +1206,7 @@ function TreeView(param) {
               var _e_nativeEvent_layout, _e_nativeEvent;
               var h = e === null || e === void 0 ? void 0 : (_e_nativeEvent = e.nativeEvent) === null || _e_nativeEvent === void 0 ? void 0 : (_e_nativeEvent_layout = _e_nativeEvent.layout) === null || _e_nativeEvent_layout === void 0 ? void 0 : _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