@multiplatform.one/forms 7.81.0 → 7.81.2

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");
@@ -91,6 +93,7 @@ function FloatingPanel(param) {
     triggerEcho = true,
     coverAlign = "start",
     iconCover = false,
+    popUp,
     anchorMode,
     panelWidth = "content",
     sheet,
@@ -115,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
   });
@@ -129,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 {
@@ -154,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);
@@ -209,7 +212,7 @@ function FloatingPanel(param) {
       live = false;
     };
   }, [anchored, open, iconCover, anchorMode, groupSurface]);
-  var handleBackdropPress = (0, import_react.useCallback)(function () {
+  var handleBackdropPress = (0, import_react2.useCallback)(function () {
     if (backdropArmed) close();
   }, [backdropArmed, close]);
   var framePadding = contentPadding === "none" ? "$0" : knobProps.panelPadding.padding;
@@ -217,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);
@@ -229,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));
@@ -250,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;
@@ -265,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);
@@ -290,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) {
@@ -312,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;
@@ -381,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;
@@ -407,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;
@@ -532,8 +535,9 @@ 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 && !iconCover ? 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,
+          popUp,
           iconCover: iconCover && anchorMode !== "attach",
           group: iconCover && anchorMode !== "attach" ? group !== null && group !== void 0 ? group : null : null,
           coverAlign: anchorMode === "attach" ? "start" : coverAlign,
@@ -630,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,
@@ -638,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.
@@ -654,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,
@@ -696,6 +697,7 @@ function TriggerMenuPanel(param) {
     bounds,
     echo,
     echoLabel,
+    popUp,
     iconCover = false,
     group = null,
     coverAlign,
@@ -707,13 +709,18 @@ function TriggerMenuPanel(param) {
     onClose,
     children
   } = param;
-  var _ref, _ref1, _ref2, _ref3, _ref4;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
   var {
     knobProps
   } = (0, import_theme2.useResolvedKnobs)({
     painted: false
   });
-  var [size, setSize] = (0, import_react.useState)(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,
@@ -731,7 +738,23 @@ 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,
@@ -740,9 +763,54 @@ function TriggerMenuPanel(param) {
     align: coverAlign,
     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 && 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 borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
   var echoShift = anchor && placement ? (0, import_panelWidth.echoOffset)({
     triggerLeft: anchor.x,
     triggerRight: anchor.x + anchor.width,
@@ -774,10 +842,10 @@ function TriggerMenuPanel(param) {
       },
       style: {
         position: "absolute",
-        left: (_ref2 = placement === null || placement === void 0 ? void 0 : placement.left) !== null && _ref2 !== void 0 ? _ref2 : bounds.left,
-        top: (_ref3 = placement === null || placement === void 0 ? void 0 : placement.top) !== null && _ref3 !== void 0 ? _ref3 : bounds.top,
+        left: (_ref3 = placement === null || placement === void 0 ? void 0 : placement.left) !== null && _ref3 !== void 0 ? _ref3 : bounds.left,
+        top: (_ref4 = placement === null || placement === void 0 ? void 0 : placement.top) !== null && _ref4 !== void 0 ? _ref4 : bounds.top,
         ...widthBox,
-        maxHeight: (_ref4 = placement === null || placement === void 0 ? void 0 : placement.maxHeight) !== null && _ref4 !== void 0 ? _ref4 : bounds.bottom - bounds.top,
+        maxHeight: (_ref5 = placement === null || placement === void 0 ? void 0 : placement.maxHeight) !== null && _ref5 !== void 0 ? _ref5 : bounds.bottom - bounds.top,
         opacity: placement ? 1 : 0
       },
       children: (
@@ -834,22 +902,100 @@ function TriggerMenuPanel(param) {
               })
             })
           }) : 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
+            ...(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
+              })
             })
-          })]
+          }), 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 ScrollBand(param) {
+  var {
+    direction,
+    band,
+    visible,
+    glyphColor,
+    onPress
+  } = param;
+  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",
+      start: 0,
+      end: 0,
+      height: band,
+      zIndex: 1,
+      ...(direction === "up" ? {
+        top: 0
+      } : {
+        bottom: 0
+      })
+    },
+    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
+      })
+    })
+  });
+}
 function PointPanel(param) {
   var {
     point,
@@ -866,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,