@multiplatform.one/components 7.8.0 → 7.11.0

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

@@ -52,6 +52,7 @@ var import_tamagui = require("tamagui");
 var import_kanbanDnd = require("./kanbanDnd.native.js");
 var import_treeViewDnd = require("./treeViewDnd.native.js");
 var import_treeViewMotion = require("./treeViewMotion.native.js");
+var import_treeViewReveal = require("./treeViewReveal.native.js");
 var import_treeViewLayout = require("./treeViewLayout.native.js");
 var ENTER_RISE_PX = -4;
 var DRAG_THRESHOLD_PX = 4;
@@ -147,8 +148,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,
@@ -188,6 +195,28 @@ function TreeView(param) {
   var treeId = (0, import_react2.useId)();
   var containerRef = (0, import_react2.useRef)(null);
   var flashListRef = (0, import_react2.useRef)(null);
+  var initialScroll = (0, import_react2.useRef)(initialScrollOffset === void 0 ? void 0 : {
+    offset: Number.isFinite(initialScrollOffset) ? Math.max(0, initialScrollOffset) : 0
+  });
+  var cancelInitialScroll = (0, import_react2.useCallback)(function () {
+    initialScroll.current = void 0;
+  }, []);
+  var hasNodes = nodes.length > 0;
+  var listInstance = (0, import_react2.useMemo)(function () {
+    return {
+      hasNodes,
+      attached: false,
+      loaded: false,
+      indexScrollRequested: false,
+      offset: 0
+    };
+  }, [hasNodes]);
+  var scrollActive = (0, import_react2.useRef)(true);
+  var lastReportedOffset = (0, import_react2.useRef)(void 0);
+  var offsetCallback = (0, import_react2.useRef)(onScrollOffsetChange);
+  (0, import_react2.useLayoutEffect)(function () {
+    offsetCallback.current = onScrollOffsetChange;
+  }, [onScrollOffsetChange]);
   var [focusedIndex, setFocusedIndex] = (0, import_react2.useState)(-1);
   var [keyboardRing, setKeyboardRing] = (0, import_react2.useState)(false);
   var typeaheadRef = (0, import_react2.useRef)({
@@ -205,11 +234,18 @@ function TreeView(param) {
   var handleContainerBlur = (0, import_react2.useCallback)(function () {
     setKeyboardRing(false);
   }, []);
-  var [expandedIds, setExpandedIds] = (0, import_react2.useState)(function () {
+  var [internalExpandedIds, setInternalExpandedIds] = (0, import_react2.useState)(function () {
     if (defaultExpandedIds) return new Set(defaultExpandedIds);
     if (expandByDefault) return collectBranchIds(nodes);
     return /* @__PURE__ */new Set();
   });
+  var expandedIds = (0, import_react2.useMemo)(function () {
+    return controlledExpandedIds === void 0 ? internalExpandedIds : new Set(controlledExpandedIds);
+  }, [controlledExpandedIds, internalExpandedIds]);
+  var setExpandedIds = (0, import_react2.useCallback)(function (next) {
+    if (controlledExpandedIds === void 0) setInternalExpandedIds(new Set(next));
+    onExpandedIdsChange === null || onExpandedIdsChange === void 0 ? void 0 : onExpandedIdsChange([...next]);
+  }, [controlledExpandedIds, onExpandedIdsChange]);
   var [motion, setMotion] = (0, import_react2.useState)(null);
   var rowHeights = (0, import_react2.useRef)(/* @__PURE__ */new Map());
   var getRowHeight = (0, import_react2.useCallback)(function (id) {
@@ -217,14 +253,25 @@ function TreeView(param) {
     return (_rowHeights_current_get = rowHeights.current.get(id)) !== null && _rowHeights_current_get !== void 0 ? _rowHeights_current_get : estimateSize;
   }, [estimateSize]);
   var toggleNode = (0, import_react2.useCallback)(function (node) {
+    cancelInitialScroll();
     var next = new Set(expandedIds);
     if (next.has(node.id)) {
       next.delete(node.id);
     } else {
       next.add(node.id);
     }
+    setExpandedIds(next);
+    onNodeToggle === null || onNodeToggle === void 0 ? void 0 : onNodeToggle(node);
+  }, [expandedIds, setExpandedIds, onNodeToggle, cancelInitialScroll]);
+  var previousExpandedIds = (0, import_react2.useRef)(expandedIds);
+  (0, import_react2.useLayoutEffect)(function () {
+    var previous = previousExpandedIds.current;
+    previousExpandedIds.current = expandedIds;
+    if (previous.size === expandedIds.size && [...previous].every(function (id) {
+      return expandedIds.has(id);
+    })) return;
     if (transition) {
-      var diff = (0, import_treeViewMotion.diffVisibleRows)((0, import_treeViewMotion.flattenVisibleIds)(nodes, expandedIds), (0, import_treeViewMotion.flattenVisibleIds)(nodes, next), getRowHeight);
+      var diff = (0, import_treeViewMotion.diffVisibleRows)((0, import_treeViewMotion.flattenVisibleIds)(nodes, previous), (0, import_treeViewMotion.flattenVisibleIds)(nodes, expandedIds), getRowHeight);
       setMotion((0, import_treeViewMotion.isEmptyDiff)(diff) ? null : {
         phase: "armed",
         ...diff
@@ -232,9 +279,7 @@ function TreeView(param) {
     } else {
       setMotion(null);
     }
-    setExpandedIds(next);
-    onNodeToggle === null || onNodeToggle === void 0 ? void 0 : onNodeToggle(node);
-  }, [expandedIds, nodes, transition, getRowHeight, onNodeToggle]);
+  }, [expandedIds, nodes, transition, getRowHeight]);
   (0, import_react2.useLayoutEffect)(function () {
     if ((motion === null || motion === void 0 ? void 0 : motion.phase) !== "armed") return;
     var raf = requestAnimationFrame(function () {
@@ -292,15 +337,191 @@ function TreeView(param) {
     walk(nodes, 0, null);
     return result;
   }, [nodes, expandedIds]);
+  var revealIntent = (0, import_react2.useRef)(void 0);
+  var scrollFrame = (0, import_react2.useRef)(void 0);
+  var scrollStep = (0, import_react2.useRef)(function () {});
+  var renderedRows = (0, import_react2.useRef)(/* @__PURE__ */new Set());
+  var scrollBounds = (0, import_react2.useCallback)(function () {
+    var list = flashListRef.current;
+    if (!scrollActive.current || !listInstance.attached || !listInstance.loaded || !list) return;
+    if (import_tamagui.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 = (0, import_react2.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 = (0, import_react2.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 = (0, import_react2.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]);
+  (0, import_react2.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;
+    };
+  }, []);
+  (0, import_react2.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
+      };
+    }
+    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) {
+        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 = (0, import_treeViewReveal.treeRevealExpansion)(nodes, expandedIds, intent.id);
+      if (!next) return;
+      if (next !== expandedIds) {
+        var notified = intent.notifiedExpansion;
+        if (!notified || notified.size !== next.size || [...next].some(function (id) {
+          return !notified.has(id);
+        })) {
+          intent.notifiedExpansion = next;
+          setExpandedIds(next);
+        }
+        return;
+      }
+      if (motion) {
+        setMotion(null);
+        return;
+      }
+      var list = flashListRef.current;
+      var index = flatNodes.findIndex(function (item) {
+        return item.node.id === intent.id;
+      });
+      if (!list || index < 0) return;
+      if (import_tamagui.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();
+      if (viewport.width <= 0) return;
+      var layout = list.getLayout(index);
+      if (!layout) return;
+      var offset = listInstance.indexScrollRequested ? listInstance.offset : list.getAbsoluteLastScrollOffset();
+      var top = layout.y + list.getFirstItemOffset();
+      var nextOffset = (0, import_treeViewReveal.treeRevealOffset)({
+        y: top,
+        height: layout.height
+      }, offset, viewport.height);
+      if (nextOffset === void 0) return;
+      if (Math.abs(nextOffset - offset) < 1) {
+        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({
+        offset: nextOffset,
+        animated: false
+      });
+    };
+    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 = (0, import_react2.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 = (0, import_react2.useCallback)(function (index) {
     setKeyboardRing(true);
     setFocusedIndex(index);
@@ -548,6 +769,7 @@ function TreeView(param) {
     if (!(container === null || container === void 0 ? void 0 : container.getBoundingClientRect)) return false;
     var session = (0, import_treeViewDnd.treeKeyboardLift)(nodes, flat.node.id);
     if (!session) return false;
+    cancelInitialScroll();
     var rowRect = rowEl.getBoundingClientRect();
     var containerRect = container.getBoundingClientRect();
     grabOffsetRef.current = {
@@ -580,7 +802,7 @@ function TreeView(param) {
     announce((0, import_treeViewDnd.describeTreeDragState)("lift", session, nodes, flat.node.label));
     startAutoScroll();
     return true;
-  }, [announce, nodes, startAutoScroll]);
+  }, [announce, nodes, startAutoScroll, cancelInitialScroll]);
   var handleDragHandlePointerDown = (0, import_react2.useCallback)(function (flat, e) {
     var _ref13, _e_pointerType;
     var _sessionCleanupRef_current, _e_stopPropagation, _handleEl_closest;
@@ -717,6 +939,7 @@ function TreeView(param) {
     if (!flat) return false;
     var session = (0, import_treeViewDnd.treeKeyboardLift)(nodes, flat.node.id);
     if (!session) return false;
+    cancelInitialScroll();
     var ui = {
       mode: "keyboard",
       node: flat.node,
@@ -734,7 +957,7 @@ function TreeView(param) {
     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]);
   var moveKeyboardDrag = (0, import_react2.useCallback)(function (direction) {
     var ui = dragUiRef.current;
     if (!ui || ui.mode !== "keyboard") return false;
@@ -904,17 +1127,32 @@ function TreeView(param) {
       onFocus: handleContainerFocus,
       onBlur: handleContainerBlur,
       onKeyDown: handleTreeKeyDown,
+      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: function keyExtractor(item) {
           return item.node.id;
         },
+        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,
@@ -925,17 +1163,18 @@ function TreeView(param) {
           keyboardRing,
           collapsedSelectedAncestors
         },
-        ...(canReorder && {
-          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);
-            }
-          },
-          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,
@@ -972,6 +1211,10 @@ function TreeView(param) {
           var rowOpacity = isSettleHidden ? 0 : armed && entering ? 0 : inDraggedSubtree ? 0.4 : 1;
           var rowTransition = armed && (entering || delta !== 0) ? "none" : transition;
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            ref: function ref(row) {
+              if (row) renderedRows.current.add(node.id);else renderedRows.current.delete(node.id);
+              scheduleScroll();
+            },
             id: `${treeId}-node-${index}`,
             "data-treeview-row": node.id,
             ...(isDropParent && {
@@ -1003,6 +1246,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);
+              scheduleScroll();
             },
             backgroundColor:
             // Nest-into parent highlight wins while a drag is active