@multiplatform.one/forms 7.80.0 → 7.81.1

package/dist/cjs/FloatingPanel/index.native.js

@@ -38,12 +38,14 @@ __export(index_native_exports, {
 });
 module.exports = __toCommonJS(index_native_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
 var import_theme = require("@multiplatform.one/theme");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_native = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_theme2 = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
+var import_checkedOnField = require("../shared/checkedOnField.native.js");
 var import_overlayStack = require("../shared/overlayStack.native.js");
 var import_OverlayWindow = require("../shared/OverlayWindow.native.js");
 var import_t = require("../shared/t.native.js");
@@ -56,7 +58,6 @@ var import_pointAnchor = require("./pointAnchor.native.js");
 var import_RegularPanel = require("./RegularPanel.native.js");
 var import_useFloatingPanel = require("./useFloatingPanel.native.js");
 var import_trailingAction = require("./trailingAction.native.js");
-var import_iconEcho = require("./iconEcho.native.js");
 var import_coverRect = require("./coverRect.native.js");
 var import_iconButtonGroupContext = require("../Button/iconButtonGroupContext.native.js");
 var import_useFloatingPanel2 = require("./useFloatingPanel.native.js");
@@ -91,7 +92,8 @@ function FloatingPanel(param) {
     triggerRow,
     triggerEcho = true,
     coverAlign = "start",
-    iconEcho,
+    iconCover = false,
+    popUp,
     anchorMode,
     panelWidth = "content",
     sheet,
@@ -104,7 +106,6 @@ function FloatingPanel(param) {
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
-  var triggerSurface = import_theme2.SurfaceContext.useStyledContext();
   var windowZIndex = (0, import_overlayStack.useOverlayZIndex)("sheet");
   var children = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_iconButtonGroupContext.IconButtonGroupSurfaceContext.Provider, {
     value: null,
@@ -117,7 +118,7 @@ function FloatingPanel(param) {
   var slideTransition = knobProps.motion.slide.transition;
   var enterDuration = (0, import_theme2.motionDurationMs)(slideTransition);
   var scrimDuration = (0, import_theme2.motionDurationMs)(knobProps.motion.scrim.transition);
-  var motionDurationRef = (0, import_react.useRef)({
+  var motionDurationRef = (0, import_react2.useRef)({
     enterDuration,
     scrimDuration
   });
@@ -131,18 +132,18 @@ function FloatingPanel(param) {
     height: windowHeight
   } = (0, import_react_native.useWindowDimensions)();
   var keyboardInset = (0, import_useKeyboardInset.useKeyboardInset)();
-  var safeArea = (_useContext = (0, import_react.useContext)(import_react_native_safe_area_context.SafeAreaInsetsContext)) !== null && _useContext !== void 0 ? _useContext : import_react_native_safe_area_context.initialWindowMetrics === null || import_react_native_safe_area_context.initialWindowMetrics === void 0 ? void 0 : import_react_native_safe_area_context.initialWindowMetrics.insets;
+  var safeArea = (_useContext = (0, import_react2.useContext)(import_react_native_safe_area_context.SafeAreaInsetsContext)) !== null && _useContext !== void 0 ? _useContext : import_react_native_safe_area_context.initialWindowMetrics === null || import_react_native_safe_area_context.initialWindowMetrics === void 0 ? void 0 : import_react_native_safe_area_context.initialWindowMetrics.insets;
   var topInset = (_ref = safeArea === null || safeArea === void 0 ? void 0 : safeArea.top) !== null && _ref !== void 0 ? _ref : 0;
-  var [pressPoint, setPressPoint] = (0, import_react.useState)(null);
-  var [backdropArmed, setBackdropArmed] = (0, import_react.useState)(false);
-  var armTimerRef = (0, import_react.useRef)(null);
-  var close = (0, import_react.useCallback)(function () {
+  var [pressPoint, setPressPoint] = (0, import_react2.useState)(null);
+  var [backdropArmed, setBackdropArmed] = (0, import_react2.useState)(false);
+  var armTimerRef = (0, import_react2.useRef)(null);
+  var close = (0, import_react2.useCallback)(function () {
     return onOpenChange(false);
   }, [onOpenChange]);
-  var handleTriggerPress = (0, import_react.useCallback)(function () {
+  var handleTriggerPress = (0, import_react2.useCallback)(function () {
     if (!disabled) onOpenChange(!open);
   }, [disabled, onOpenChange, open]);
-  var handleTriggerLongPress = (0, import_react.useCallback)(function (event) {
+  var handleTriggerLongPress = (0, import_react2.useCallback)(function (event) {
     var _ref12;
     if (disabled) return;
     var {
@@ -156,25 +157,25 @@ function FloatingPanel(param) {
     onOpenChange(true);
   }, [disabled, onOpenChange]);
   var isContextMenu = openOn === "contextmenu";
-  var triggerOwn = isContextMenu && /* @__PURE__ */(0, import_react.isValidElement)(trigger) ? trigger.props : void 0;
+  var triggerOwn = isContextMenu && /* @__PURE__ */(0, import_react2.isValidElement)(trigger) ? trigger.props : void 0;
   var triggerLabel = (_ref1 = (_ref2 = triggerA11y === null || triggerA11y === void 0 ? void 0 : triggerA11y.label) !== null && _ref2 !== void 0 ? _ref2 : triggerOwn === null || triggerOwn === void 0 ? void 0 : triggerOwn["aria-label"]) !== null && _ref1 !== void 0 ? _ref1 : triggerOwn === null || triggerOwn === void 0 ? void 0 : triggerOwn.accessibilityLabel;
   var regular = (0, import_overlaySizeClass.overlaySizeClass)(windowWidth) === "regular";
   var atPoint = isContextMenu && pressPoint !== null && regular;
   var insideOverlay = (0, import_overlayStack.useInsideOverlay)();
-  var asMenu = isContextMenu ? compactFace === "menu" : (0, import_compactFace.resolveCompactFace)(compactFace, insideOverlay) === "menu";
+  var asMenu = isContextMenu ? compactFace === "menu" : (0, import_compactFace.resolveCompactFace)(compactFace, insideOverlay) === "menu" || popUp != null && regular;
   var asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
   var anchored = asMenu || asRegular;
-  var triggerRef = (0, import_react.useRef)(null);
-  var [anchor, setAnchor] = (0, import_react.useState)(null);
+  var triggerRef = (0, import_react2.useRef)(null);
+  var [anchor, setAnchor] = (0, import_react2.useState)(null);
   var groupSurface = (0, import_iconButtonGroupContext.useIconButtonGroupSurface)();
-  var [group, setGroup] = (0, import_react.useState)(null);
-  var [triggerRadius, setTriggerRadius] = (0, import_react.useState)(null);
-  var reportTriggerRadius = (0, import_react.useCallback)(function (radius) {
+  var [group, setGroup] = (0, import_react2.useState)(null);
+  var [triggerRadius, setTriggerRadius] = (0, import_react2.useState)(null);
+  var reportTriggerRadius = (0, import_react2.useCallback)(function (radius) {
     return setTriggerRadius(function (prev) {
       return prev === radius ? prev : radius;
     });
   }, []);
-  (0, import_react.useLayoutEffect)(function () {
+  (0, import_react2.useLayoutEffect)(function () {
     if (!anchored || !open) {
       setAnchor(null);
       setGroup(null);
@@ -199,7 +200,7 @@ function FloatingPanel(param) {
         height: 0
       });
     }
-    if (iconEcho && anchorMode !== "attach" && groupSurface) {
+    if (iconCover && anchorMode !== "attach" && groupSurface) {
       setGroup(void 0);
       groupSurface.measure(function (plate) {
         if (live) setGroup(plate);
@@ -210,8 +211,8 @@ function FloatingPanel(param) {
     return function () {
       live = false;
     };
-  }, [anchored, open, iconEcho, anchorMode, groupSurface]);
-  var handleBackdropPress = (0, import_react.useCallback)(function () {
+  }, [anchored, open, iconCover, anchorMode, groupSurface]);
+  var handleBackdropPress = (0, import_react2.useCallback)(function () {
     if (backdropArmed) close();
   }, [backdropArmed, close]);
   var framePadding = contentPadding === "none" ? "$0" : knobProps.panelPadding.padding;
@@ -219,10 +220,10 @@ function FloatingPanel(param) {
   var available = Math.max(0, windowHeight - keyboardInset);
   var maxHeight = Math.max(minSheetHeight, Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - topInset - backdropStrip)));
   var sheetBottomPadding = keyboardInset > 0 ? 8 : bottomInset;
-  var [measuredHeight, setMeasuredHeight] = (0, import_react.useState)(0);
+  var [measuredHeight, setMeasuredHeight] = (0, import_react2.useState)(0);
   var travel = measuredHeight || maxHeight;
   var isSheet = !!scrollable || !!sheetFill;
-  var detents = (0, import_react.useMemo)(function () {
+  var detents = (0, import_react2.useMemo)(function () {
     if (!isSheet) return [travel];
     var points = [travel, Math.round(travel * mediumDetent)].filter(function (h) {
       return h >= Math.min(minSheetHeight, travel);
@@ -231,20 +232,20 @@ function FloatingPanel(param) {
       return b - a;
     });
   }, [isSheet, travel]);
-  var translateY = (0, import_react.useRef)(new import_react_native.Animated.Value(1e4)).current;
-  var restRef = (0, import_react.useRef)(1e4);
-  var travelRef = (0, import_react.useRef)(travel);
-  var detentsRef = (0, import_react.useRef)(detents);
+  var translateY = (0, import_react2.useRef)(new import_react_native.Animated.Value(1e4)).current;
+  var restRef = (0, import_react2.useRef)(1e4);
+  var travelRef = (0, import_react2.useRef)(travel);
+  var detentsRef = (0, import_react2.useRef)(detents);
   travelRef.current = travel;
   detentsRef.current = detents;
-  var presentationRef = (0, import_react.useRef)(0);
-  var activeRef = (0, import_react.useRef)(false);
-  var frameCap = (0, import_react.useRef)(new import_react_native.Animated.Value(maxHeight)).current;
-  var maxHeightRef = (0, import_react.useRef)(maxHeight);
-  var restHeightRef = (0, import_react.useRef)(null);
-  var naturalRef = (0, import_react.useRef)(0);
-  var filledRef = (0, import_react.useRef)(false);
-  (0, import_react.useLayoutEffect)(function () {
+  var presentationRef = (0, import_react2.useRef)(0);
+  var activeRef = (0, import_react2.useRef)(false);
+  var frameCap = (0, import_react2.useRef)(new import_react_native.Animated.Value(maxHeight)).current;
+  var maxHeightRef = (0, import_react2.useRef)(maxHeight);
+  var restHeightRef = (0, import_react2.useRef)(null);
+  var naturalRef = (0, import_react2.useRef)(0);
+  var filledRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useLayoutEffect)(function () {
     maxHeightRef.current = maxHeight;
     var rest = restHeightRef.current;
     frameCap.setValue(rest === null ? maxHeight : Math.min(maxHeight, rest));
@@ -252,13 +253,13 @@ function FloatingPanel(param) {
       setMeasuredHeight(filledRef.current ? maxHeight : Math.min(naturalRef.current, maxHeight));
     }
   }, [frameCap, maxHeight]);
-  var restAt = (0, import_react.useCallback)(function (height) {
+  var restAt = (0, import_react2.useCallback)(function (height) {
     restHeightRef.current = height;
     frameCap.setValue(Math.min(maxHeightRef.current, height));
     restRef.current = 0;
     translateY.setValue(0);
   }, [frameCap, translateY]);
-  var releaseRest = (0, import_react.useCallback)(function () {
+  var releaseRest = (0, import_react2.useCallback)(function () {
     var rest = restHeightRef.current;
     if (rest === null) return;
     restHeightRef.current = null;
@@ -267,7 +268,7 @@ function FloatingPanel(param) {
     restRef.current = offset;
     translateY.setValue(offset);
   }, [frameCap, translateY]);
-  var settleTo = (0, import_react.useCallback)(function (height) {
+  var settleTo = (0, import_react2.useCallback)(function (height) {
     var velocity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
     var presentation = presentationRef.current;
     var toValue = Math.max(0, travelRef.current - height);
@@ -292,7 +293,7 @@ function FloatingPanel(param) {
       if (activeRef.current && presentation === presentationRef.current) restAt(height);
     });
   }, [restAt, translateY, springConfig]);
-  var dismiss = (0, import_react.useCallback)(function () {
+  var dismiss = (0, import_react2.useCallback)(function () {
     var velocity = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 0;
     if (!activeRef.current) return;
     if (!springConfig) {
@@ -314,7 +315,7 @@ function FloatingPanel(param) {
       if (finished && activeRef.current && presentation === presentationRef.current) close();
     });
   }, [close, translateY, springConfig]);
-  var panResponder = (0, import_react.useMemo)(function () {
+  var panResponder = (0, import_react2.useMemo)(function () {
     return import_react_native.PanResponder.create({
       onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
         return true;
@@ -383,8 +384,8 @@ function FloatingPanel(param) {
       }
     });
   }, [dismiss, releaseRest, settleTo, translateY]);
-  var enteredRef = (0, import_react.useRef)(false);
-  var enter = (0, import_react.useCallback)(function () {
+  var enteredRef = (0, import_react2.useRef)(false);
+  var enter = (0, import_react2.useCallback)(function () {
     if (!activeRef.current || enteredRef.current) return;
     var presentation = presentationRef.current;
     enteredRef.current = true;
@@ -409,7 +410,7 @@ function FloatingPanel(param) {
       if (finished && activeRef.current && presentation === presentationRef.current) translateY.setValue(0);
     });
   }, [translateY]);
-  (0, import_react.useEffect)(function () {
+  (0, import_react2.useEffect)(function () {
     presentationRef.current += 1;
     activeRef.current = open;
     restHeightRef.current = null;
@@ -534,11 +535,11 @@ function FloatingPanel(param) {
             right: windowWidth - ((_ref4 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.right) !== null && _ref4 !== void 0 ? _ref4 : 0) - import_useFloatingPanel.panelViewportPadding,
             bottom: windowHeight - Math.max((_ref5 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.bottom) !== null && _ref5 !== void 0 ? _ref5 : 0, keyboardInset) - import_useFloatingPanel.panelViewportPadding
           },
-          echo: triggerEcho && !iconEcho ? triggerRow !== null && triggerRow !== void 0 ? triggerRow : trigger : null,
+          echo: triggerEcho && !iconCover && !popUp ? triggerRow !== null && triggerRow !== void 0 ? triggerRow : trigger : null,
           echoLabel: triggerA11y === null || triggerA11y === void 0 ? void 0 : triggerA11y.label,
-          iconEcho: iconEcho && anchorMode !== "attach" ? (0, import_iconEcho.iconEchoElement)(trigger, iconEcho, close, triggerSurface) : null,
-          iconEchoKind: iconEcho,
-          group: iconEcho && anchorMode !== "attach" ? group !== null && group !== void 0 ? group : null : null,
+          popUp,
+          iconCover: iconCover && anchorMode !== "attach",
+          group: iconCover && anchorMode !== "attach" ? group !== null && group !== void 0 ? group : null : null,
           coverAlign: anchorMode === "attach" ? "start" : coverAlign,
           panelWidth,
           triggerRadius: anchorMode === "attach" ? null : triggerRadius,
@@ -600,7 +601,7 @@ function FloatingPanel(param) {
             accessibilityLabel: (0, import_t.t)("Close"),
             children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
               flex: 1,
-              backgroundColor: "$shadow6"
+              backgroundColor: import_theme.overlayScrim
             })
           }),
           /*
@@ -633,6 +634,11 @@ function FloatingPanel(param) {
               ...knobProps.elevatedSurface,
               borderBottomLeftRadius: 0,
               borderBottomRightRadius: 0,
+              // A sheet spans the screen: only its top edge meets the page,
+              // so no side border gutters a full-width row (FZ-8557).
+              borderLeftWidth: 0,
+              borderRightWidth: 0,
+              borderBottomWidth: 0,
               maxHeight,
               flexShrink: 1,
               minHeight: 0,
@@ -641,13 +647,12 @@ function FloatingPanel(param) {
               ...(sheetFill ? {
                 height: maxHeight
               } : void 0),
-              paddingTop: "$2",
               paddingBottom: sheetBottomPadding,
               // VoiceOver escape gesture (two-finger Z) dismisses the sheet.
               onAccessibilityEscape: close,
               children: [
               /*
-                The grab ZONE, not just the 4pt pill: a 4pt tall target is
+                The grab ZONE, not just the 5pt pill: a 5pt tall target is
                 unhittable. The gesture lives here rather than on the whole
                 sheet so it never fights the ScrollView inside it, which is the
                 same division iOS uses.
@@ -657,17 +662,10 @@ function FloatingPanel(param) {
                 ...panResponder.panHandlers,
                 accessibilityRole: "adjustable",
                 accessibilityLabel: (0, import_t.t)("Drag to resize"),
-                style: {
-                  alignSelf: "stretch",
-                  alignItems: "center",
-                  paddingTop: 4,
-                  paddingBottom: 12
-                },
+                testID: "floating-panel-grabber",
+                style: import_theme.sheetGrabberZone,
                 children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                  width: 40,
-                  height: 4,
-                  borderRadius: 2,
-                  backgroundColor: "$color8"
+                  ...import_theme.sheetGrabber
                 })
               }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
                 padding: framePadding,
@@ -677,9 +675,12 @@ function FloatingPanel(param) {
                   flex: 1,
                   minHeight: 0
                 } : void 0),
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_theme2.Surface, {
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme2.Surface, {
                   size: "$true",
-                  children: [header, content]
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_echoContext.PanelSheetContext.Provider, {
+                    value: true,
+                    children: [header, content]
+                  })
                 })
               })]
             })
@@ -696,8 +697,8 @@ function TriggerMenuPanel(param) {
     bounds,
     echo,
     echoLabel,
-    iconEcho = null,
-    iconEchoKind = "menu",
+    popUp,
+    iconCover = false,
     group = null,
     coverAlign,
     panelWidth,
@@ -708,15 +709,19 @@ function TriggerMenuPanel(param) {
     onClose,
     children
   } = param;
-  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
   var {
     knobProps
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
-  var [size, setSize] = (0, import_react.useState)(null);
-  var cover = anchor && iconEcho != null ? (0, import_coverRect.iconCoverRect)(anchor, group) : anchor;
-  var echoCover = anchor && cover && iconEcho != null ? (0, import_coverRect.echoInCover)(anchor, cover) : null;
+  var glyphColor = (0, import_theme2.useGlyphColor)();
+  var [size, setSize] = (0, import_react2.useState)(null);
+  var [contentHeight, setContentHeight] = (0, import_react2.useState)(null);
+  var [scrolled, setScrolled] = (0, import_react2.useState)(null);
+  var scrollRef = (0, import_react2.useRef)(null);
+  var offsetRef = (0, import_react2.useRef)(0);
+  var cover = anchor && iconCover ? (0, import_coverRect.iconCoverRect)(anchor, group) : anchor;
   var room = panelWidth === "screen" && anchor ? {
     ...bounds,
     ...(0, import_panelWidth.screenBounds)({
@@ -733,19 +738,79 @@ function TriggerMenuPanel(param) {
     echo: echo != null,
     floor: Math.max(import_compactFace.MENU_MIN_WIDTH, (_ref1 = cover === null || cover === void 0 ? void 0 : cover.width) !== null && _ref1 !== void 0 ? _ref1 : 0)
   });
-  var placement = anchor && cover && size ? (attach ? import_pointAnchor.placeBesideTrigger : import_pointAnchor.placeOverTrigger)({
+  var borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
+  var framePaddingToken = (0, import_tamagui.getTokenValue)(framePadding, "space");
+  var framePaddingPx = typeof framePaddingToken === "number" ? framePaddingToken : 0;
+  var band = (0, import_checkedOnField.scrollArrowBand)(knobProps.menuRow.minHeight);
+  var fit = anchor && (popUp === null || popUp === void 0 ? void 0 : popUp.row) && contentHeight != null ? (0, import_checkedOnField.placeCheckedOnField)({
+    fieldTop: anchor.y,
+    fieldBottom: anchor.y + anchor.height,
+    rowTop: popUp.row.top + framePaddingPx,
+    rowHeight: popUp.row.height,
+    contentHeight,
+    boundsTop: bounds.top + borderWidth,
+    boundsBottom: bounds.bottom - borderWidth,
+    band
+  }) : null;
+  var scrollTop = (_ref2 = fit === null || fit === void 0 ? void 0 : fit.scrollTop) !== null && _ref2 !== void 0 ? _ref2 : 0;
+  var scrolls = fit != null && contentHeight != null && fit.height < contentHeight;
+  var placed = anchor && cover && size && (!popUp || fit) ? (attach ? import_pointAnchor.placeBesideTrigger : import_pointAnchor.placeOverTrigger)({
     trigger: cover,
     width: size.width,
     height: size.height,
     bounds: room,
     rtl: import_react_native.I18nManager.isRTL,
     align: coverAlign,
-    pinned: iconEcho != null
+    pinned: iconCover
   }) : null;
+  var placement = placed && fit ? {
+    ...placed,
+    top: fit.top - borderWidth,
+    maxHeight: fit.height + 2 * borderWidth
+  } : placed;
+  (0, import_react2.useLayoutEffect)(function () {
+    var _scrollRef_current;
+    offsetRef.current = scrollTop;
+    if (scrollTop > 0) (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.scrollTo({
+      y: scrollTop,
+      animated: false
+    });
+  }, [scrollTop]);
+  var atRest = {
+    up: scrolls && scrollTop > import_checkedOnField.scrollArrowThreshold,
+    down: scrolls && fit != null && contentHeight != null && contentHeight - scrollTop - fit.height > import_checkedOnField.scrollArrowThreshold
+  };
+  var arrows = scrolled !== null && scrolled !== void 0 ? scrolled : atRest;
+  var handleScroll = function handleScroll2(event) {
+    if (!scrolls) return;
+    var {
+      contentOffset,
+      contentSize,
+      layoutMeasurement
+    } = event.nativeEvent;
+    offsetRef.current = contentOffset.y;
+    var up = contentOffset.y > import_checkedOnField.scrollArrowThreshold;
+    var down = contentSize.height - contentOffset.y - layoutMeasurement.height > import_checkedOnField.scrollArrowThreshold;
+    setScrolled(function (prev) {
+      return (prev === null || prev === void 0 ? void 0 : prev.up) === up && (prev === null || prev === void 0 ? void 0 : prev.down) === down ? prev : {
+        up,
+        down
+      };
+    });
+  };
+  var scrollPage = function scrollPage2(direction) {
+    var _ref6;
+    var _popUp_row, _scrollRef_current;
+    if (!fit) return;
+    var page = Math.max(band, fit.height - 2 * band - ((_ref6 = popUp === null || popUp === void 0 ? void 0 : (_popUp_row = popUp.row) === null || _popUp_row === void 0 ? void 0 : _popUp_row.height) !== null && _ref6 !== void 0 ? _ref6 : 0));
+    var next = offsetRef.current + (direction === "up" ? -page : page);
+    (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.scrollTo({
+      y: Math.max(0, next),
+      animated: true
+    });
+  };
   var half = cover ? Math.min(cover.width, cover.height) / 2 : void 0;
-  var radius = group != null && iconEcho != null ? Math.min(group.radius, half !== null && half !== void 0 ? half : group.radius) : triggerRadius != null && half != null ? Math.min(triggerRadius, half) : coverAlign === "auto" && half ? half : void 0;
-  var borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
-  var echoOverlays = (0, import_iconEcho.iconEchoOverlays)(iconEchoKind, (_ref2 = placement === null || placement === void 0 ? void 0 : placement.up) !== null && _ref2 !== void 0 ? _ref2 : false);
+  var radius = group != null && iconCover ? Math.min(group.radius, half !== null && half !== void 0 ? half : group.radius) : triggerRadius != null && half != null ? Math.min(triggerRadius, half) : coverAlign === "auto" && half ? half : void 0;
   var echoShift = anchor && placement ? (0, import_panelWidth.echoOffset)({
     triggerLeft: anchor.x,
     triggerRight: anchor.x + anchor.width,
@@ -755,6 +820,8 @@ function TriggerMenuPanel(param) {
   }) : 0;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
     style: import_react_native.StyleSheet.absoluteFill,
+    testID: "floating-panel-menu-layer",
+    accessibilityViewIsModal: true,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
       style: import_react_native.StyleSheet.absoluteFill,
       onPress: onBackdropPress,
@@ -834,86 +901,98 @@ function TriggerMenuPanel(param) {
                 children: echo
               })
             })
-          }) : null, iconEcho != null && anchor && !(placement === null || placement === void 0 ? void 0 : placement.up) && !echoOverlays ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoBand, {
-            anchor,
-            cover: echoCover,
-            shift: echoShift,
-            borderWidth,
-            edge: "top",
-            children: iconEcho
           }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.ScrollView, {
+            ref: scrollRef,
             style: {
               flexGrow: 0,
               flexShrink: 1
             },
             keyboardShouldPersistTaps: "handled",
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-              padding: framePadding,
-              gap: frameGap,
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_echoContext.PanelIconEchoBoxContext.Provider, {
-                value: iconEcho != null && anchor && placement && echoOverlays ? (0, import_echoContext.echoHeaderBox)({
-                  offset: echoShift,
-                  width: anchor.width,
-                  height: (_ref6 = echoCover === null || echoCover === void 0 ? void 0 : echoCover.height) !== null && _ref6 !== void 0 ? _ref6 : anchor.height,
-                  panelWidth: placement.width,
-                  rtl: import_react_native.I18nManager.isRTL
-                }) : null,
+            ...(popUp ? {
+              contentOffset: {
+                x: 0,
+                y: scrollTop
+              },
+              scrollEnabled: scrolls,
+              bounces: scrolls,
+              onScroll: handleScroll,
+              scrollEventThrottle: 16
+            } : null),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+              testID: "floating-panel-menu-content",
+              collapsable: false,
+              onLayout: popUp ? function (e) {
+                return setContentHeight(e.nativeEvent.layout.height);
+              } : void 0,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+                padding: framePadding,
+                gap: frameGap,
                 children
               })
             })
-          }), iconEcho != null && anchor && ((placement === null || placement === void 0 ? void 0 : placement.up) || echoOverlays) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(IconEchoBand, {
-            anchor,
-            cover: echoCover,
-            shift: echoShift,
-            borderWidth,
-            edge: echoOverlays ? "overlay" : "bottom",
-            children: iconEcho
+          }), scrolls ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ScrollBand, {
+              direction: "up",
+              band,
+              visible: arrows.up,
+              glyphColor,
+              onPress: scrollPage
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ScrollBand, {
+              direction: "down",
+              band,
+              visible: arrows.down,
+              glyphColor,
+              onPress: scrollPage
+            })]
           }) : null]
         })
       }))
     })]
   });
 }
-function IconEchoBand(param) {
+function ScrollBand(param) {
   var {
-    anchor,
-    cover = null,
-    shift,
-    borderWidth,
-    edge,
-    children
+    direction,
+    band,
+    visible,
+    glyphColor,
+    onPress
   } = param;
-  var _ref, _ref1;
-  var bandHeight = (_ref = cover === null || cover === void 0 ? void 0 : cover.height) !== null && _ref !== void 0 ? _ref : anchor.height;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
-    testID: "floating-panel-icon-echo-band",
-    pointerEvents: "box-none",
-    style: edge === "overlay" ? {
+  var {
+    knobProps
+  } = (0, import_theme2.useResolvedKnobs)({
+    painted: false
+  });
+  var Icon = direction === "up" ? import_react.CaretUpIcon : import_react.CaretDownIcon;
+  if (!visible) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+    testID: `floating-panel-scroll-${direction}`,
+    onPress: function onPress1() {
+      return onPress(direction);
+    },
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    style: {
       position: "absolute",
-      top: -borderWidth,
-      start: -borderWidth,
-      end: -borderWidth,
-      height: bandHeight,
-      zIndex: 1
-    } : {
-      height: bandHeight,
-      marginHorizontal: -borderWidth,
-      ...(edge === "top" ? {
-        marginTop: -borderWidth
+      start: 0,
+      end: 0,
+      height: band,
+      zIndex: 1,
+      ...(direction === "up" ? {
+        top: 0
       } : {
-        marginBottom: -borderWidth
+        bottom: 0
       })
     },
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
-      style: {
-        width: anchor.width,
-        height: anchor.height,
-        marginStart: shift,
-        marginTop: (_ref1 = cover === null || cover === void 0 ? void 0 : cover.top) !== null && _ref1 !== void 0 ? _ref1 : 0,
-        alignItems: "flex-start",
-        justifyContent: "flex-start"
-      },
-      children
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: knobProps.elevatedSurface.backgroundColor,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {
+        size: knobProps.controlIcon.width,
+        color: glyphColor
+      })
     })
   });
 }
@@ -933,7 +1012,7 @@ function PointPanel(param) {
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
-  var [size, setSize] = (0, import_react.useState)(null);
+  var [size, setSize] = (0, import_react2.useState)(null);
   var placement = size ? (0, import_pointAnchor.placeAtPoint)({
     point,
     width: size.width,
@@ -943,6 +1022,8 @@ function PointPanel(param) {
   }) : null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
     style: import_react_native.StyleSheet.absoluteFill,
+    testID: "floating-panel-point-layer",
+    accessibilityViewIsModal: true,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
       style: import_react_native.StyleSheet.absoluteFill,
       onPress: onBackdropPress,