@multiplatform.one/forms 7.80.0 → 7.81.1

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { nativeAnimationConfig } from "@multiplatform.one/theme";
+import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { nativeAnimationConfig, overlayScrim, sheetGrabber, sheetGrabberZone } from "@multiplatform.one/theme";
 import { isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Animated, Easing, I18nManager, Modal, PanResponder, Platform, Pressable, ScrollView as RNScrollView, StyleSheet, useWindowDimensions, View as RNView } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
-import { Surface, SurfaceContext, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
-import { View, YStack } from "tamagui";
+import { Surface, useGlyphColor, useResolvedKnobs, motionDurationMs } from "@multiplatform.one/theme";
+import { getTokenValue, View, YStack } from "tamagui";
+import { placeCheckedOnField, scrollArrowBand, scrollArrowThreshold } from "../shared/checkedOnField.native.js";
 import { useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack.native.js";
 import { OverlayWindow } from "../shared/OverlayWindow.native.js";
 import { t } from "../shared/t.native.js";
@@ -12,13 +14,12 @@ import { overlaySizeClass } from "../shared/overlaySizeClass.native.js";
 import { useKeyboardInset } from "../shared/useKeyboardInset.native.js";
 import { MENU_MIN_WIDTH, resolveCompactFace } from "./compactFace.native.js";
 import { echoOffset, panelWidthBox, screenBounds } from "./panelWidth.native.js";
-import { echoHeaderBox, PanelEchoContext, PanelIconEchoBoxContext, PanelTriggerRadiusContext } from "./echoContext.native.js";
+import { PanelEchoContext, PanelSheetContext, PanelTriggerRadiusContext } from "./echoContext.native.js";
 import { placeAtPoint, placeBesideTrigger, placeOverTrigger } from "./pointAnchor.native.js";
 import { RegularPanel } from "./RegularPanel.native.js";
 import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel.native.js";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction.native.js";
-import { iconEchoElement, iconEchoOverlays } from "./iconEcho.native.js";
-import { echoInCover, iconCoverRect } from "./coverRect.native.js";
+import { iconCoverRect } from "./coverRect.native.js";
 import { IconButtonGroupSurfaceContext, useIconButtonGroupSurface } from "../Button/iconButtonGroupContext.native.js";
 import { useFloatingPanel, panelAnimationDuration, panelGrowDuration, panelTransition, panelViewportPadding as panelViewportPadding2 } from "./useFloatingPanel.native.js";
 import { floatingPanelActionProps, isNestedPanelAction } from "./nestedAction.native.js";
@@ -52,7 +53,8 @@ function FloatingPanel(param) {
     triggerRow,
     triggerEcho = true,
     coverAlign = "start",
-    iconEcho,
+    iconCover = false,
+    popUp,
     anchorMode,
     panelWidth = "content",
     sheet,
@@ -65,7 +67,6 @@ function FloatingPanel(param) {
   } = useResolvedKnobs({
     painted: false
   });
-  var triggerSurface = SurfaceContext.useStyledContext();
   var windowZIndex = useOverlayZIndex("sheet");
   var children = /* @__PURE__ */_jsx(IconButtonGroupSurfaceContext.Provider, {
     value: null,
@@ -122,7 +123,7 @@ function FloatingPanel(param) {
   var regular = overlaySizeClass(windowWidth) === "regular";
   var atPoint = isContextMenu && pressPoint !== null && regular;
   var insideOverlay = useInsideOverlay();
-  var asMenu = isContextMenu ? compactFace === "menu" : resolveCompactFace(compactFace, insideOverlay) === "menu";
+  var asMenu = isContextMenu ? compactFace === "menu" : resolveCompactFace(compactFace, insideOverlay) === "menu" || popUp != null && regular;
   var asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
   var anchored = asMenu || asRegular;
   var triggerRef = useRef(null);
@@ -160,7 +161,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);
@@ -171,7 +172,7 @@ function FloatingPanel(param) {
     return function () {
       live = false;
     };
-  }, [anchored, open, iconEcho, anchorMode, groupSurface]);
+  }, [anchored, open, iconCover, anchorMode, groupSurface]);
   var handleBackdropPress = useCallback(function () {
     if (backdropArmed) close();
   }, [backdropArmed, close]);
@@ -495,11 +496,11 @@ function FloatingPanel(param) {
             right: windowWidth - ((_ref4 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.right) !== null && _ref4 !== void 0 ? _ref4 : 0) - panelViewportPadding,
             bottom: windowHeight - Math.max((_ref5 = safeArea === null || safeArea === void 0 ? void 0 : safeArea.bottom) !== null && _ref5 !== void 0 ? _ref5 : 0, keyboardInset) - 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" ? 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,
@@ -561,7 +562,7 @@ function FloatingPanel(param) {
             accessibilityLabel: t("Close"),
             children: /* @__PURE__ */_jsx(View, {
               flex: 1,
-              backgroundColor: "$shadow6"
+              backgroundColor: overlayScrim
             })
           }),
           /*
@@ -594,6 +595,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,
@@ -602,13 +608,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.
@@ -618,17 +623,10 @@ function FloatingPanel(param) {
                 ...panResponder.panHandlers,
                 accessibilityRole: "adjustable",
                 accessibilityLabel: t("Drag to resize"),
-                style: {
-                  alignSelf: "stretch",
-                  alignItems: "center",
-                  paddingTop: 4,
-                  paddingBottom: 12
-                },
+                testID: "floating-panel-grabber",
+                style: sheetGrabberZone,
                 children: /* @__PURE__ */_jsx(View, {
-                  width: 40,
-                  height: 4,
-                  borderRadius: 2,
-                  backgroundColor: "$color8"
+                  ...sheetGrabber
                 })
               }), /* @__PURE__ */_jsx(YStack, {
                 padding: framePadding,
@@ -638,9 +636,12 @@ function FloatingPanel(param) {
                   flex: 1,
                   minHeight: 0
                 } : void 0),
-                children: /* @__PURE__ */_jsxs(Surface, {
+                children: /* @__PURE__ */_jsx(Surface, {
                   size: "$true",
-                  children: [header, content]
+                  children: /* @__PURE__ */_jsxs(PanelSheetContext.Provider, {
+                    value: true,
+                    children: [header, content]
+                  })
                 })
               })]
             })
@@ -657,8 +658,8 @@ function TriggerMenuPanel(param) {
     bounds,
     echo,
     echoLabel,
-    iconEcho = null,
-    iconEchoKind = "menu",
+    popUp,
+    iconCover = false,
     group = null,
     coverAlign,
     panelWidth,
@@ -669,15 +670,19 @@ function TriggerMenuPanel(param) {
     onClose,
     children
   } = param;
-  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
   var {
     knobProps
   } = useResolvedKnobs({
     painted: false
   });
+  var glyphColor = useGlyphColor();
   var [size, setSize] = useState(null);
-  var cover = anchor && iconEcho != null ? iconCoverRect(anchor, group) : anchor;
-  var echoCover = anchor && cover && iconEcho != null ? echoInCover(anchor, cover) : null;
+  var [contentHeight, setContentHeight] = useState(null);
+  var [scrolled, setScrolled] = useState(null);
+  var scrollRef = useRef(null);
+  var offsetRef = useRef(0);
+  var cover = anchor && iconCover ? iconCoverRect(anchor, group) : anchor;
   var room = panelWidth === "screen" && anchor ? {
     ...bounds,
     ...screenBounds({
@@ -694,19 +699,79 @@ function TriggerMenuPanel(param) {
     echo: echo != null,
     floor: Math.max(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 ? placeBesideTrigger : placeOverTrigger)({
+  var borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
+  var framePaddingToken = getTokenValue(framePadding, "space");
+  var framePaddingPx = typeof framePaddingToken === "number" ? framePaddingToken : 0;
+  var band = scrollArrowBand(knobProps.menuRow.minHeight);
+  var fit = anchor && (popUp === null || popUp === void 0 ? void 0 : popUp.row) && contentHeight != null ? 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 ? placeBesideTrigger : placeOverTrigger)({
     trigger: cover,
     width: size.width,
     height: size.height,
     bounds: room,
     rtl: 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;
+  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 > scrollArrowThreshold,
+    down: scrolls && fit != null && contentHeight != null && contentHeight - scrollTop - fit.height > 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 > scrollArrowThreshold;
+    var down = contentSize.height - contentOffset.y - layoutMeasurement.height > 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 = 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 ? echoOffset({
     triggerLeft: anchor.x,
     triggerRight: anchor.x + anchor.width,
@@ -716,6 +781,8 @@ function TriggerMenuPanel(param) {
   }) : 0;
   return /* @__PURE__ */_jsxs(RNView, {
     style: StyleSheet.absoluteFill,
+    testID: "floating-panel-menu-layer",
+    accessibilityViewIsModal: true,
     children: [/* @__PURE__ */_jsx(Pressable, {
       style: StyleSheet.absoluteFill,
       onPress: onBackdropPress,
@@ -795,86 +862,98 @@ function TriggerMenuPanel(param) {
                 children: echo
               })
             })
-          }) : null, iconEcho != null && anchor && !(placement === null || placement === void 0 ? void 0 : placement.up) && !echoOverlays ? /* @__PURE__ */_jsx(IconEchoBand, {
-            anchor,
-            cover: echoCover,
-            shift: echoShift,
-            borderWidth,
-            edge: "top",
-            children: iconEcho
           }) : null, /* @__PURE__ */_jsx(RNScrollView, {
+            ref: scrollRef,
             style: {
               flexGrow: 0,
               flexShrink: 1
             },
             keyboardShouldPersistTaps: "handled",
-            children: /* @__PURE__ */_jsx(YStack, {
-              padding: framePadding,
-              gap: frameGap,
-              children: /* @__PURE__ */_jsx(PanelIconEchoBoxContext.Provider, {
-                value: iconEcho != null && anchor && placement && echoOverlays ? 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: I18nManager.isRTL
-                }) : null,
+            ...(popUp ? {
+              contentOffset: {
+                x: 0,
+                y: scrollTop
+              },
+              scrollEnabled: scrolls,
+              bounces: scrolls,
+              onScroll: handleScroll,
+              scrollEventThrottle: 16
+            } : null),
+            children: /* @__PURE__ */_jsx(RNView, {
+              testID: "floating-panel-menu-content",
+              collapsable: false,
+              onLayout: popUp ? function (e) {
+                return setContentHeight(e.nativeEvent.layout.height);
+              } : void 0,
+              children: /* @__PURE__ */_jsx(YStack, {
+                padding: framePadding,
+                gap: frameGap,
                 children
               })
             })
-          }), iconEcho != null && anchor && ((placement === null || placement === void 0 ? void 0 : placement.up) || echoOverlays) ? /* @__PURE__ */_jsx(IconEchoBand, {
-            anchor,
-            cover: echoCover,
-            shift: echoShift,
-            borderWidth,
-            edge: echoOverlays ? "overlay" : "bottom",
-            children: iconEcho
+          }), scrolls ? /* @__PURE__ */_jsxs(_Fragment, {
+            children: [/* @__PURE__ */_jsx(ScrollBand, {
+              direction: "up",
+              band,
+              visible: arrows.up,
+              glyphColor,
+              onPress: scrollPage
+            }), /* @__PURE__ */_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__ */_jsx(RNView, {
-    testID: "floating-panel-icon-echo-band",
-    pointerEvents: "box-none",
-    style: edge === "overlay" ? {
+  var {
+    knobProps
+  } = useResolvedKnobs({
+    painted: false
+  });
+  var Icon = direction === "up" ? CaretUpIcon : CaretDownIcon;
+  if (!visible) return null;
+  return /* @__PURE__ */_jsx(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__ */_jsx(RNView, {
-      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__ */_jsx(View, {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: knobProps.elevatedSurface.backgroundColor,
+      children: /* @__PURE__ */_jsx(Icon, {
+        size: knobProps.controlIcon.width,
+        color: glyphColor
+      })
     })
   });
 }
@@ -904,6 +983,8 @@ function PointPanel(param) {
   }) : null;
   return /* @__PURE__ */_jsxs(RNView, {
     style: StyleSheet.absoluteFill,
+    testID: "floating-panel-point-layer",
+    accessibilityViewIsModal: true,
     children: [/* @__PURE__ */_jsx(Pressable, {
       style: StyleSheet.absoluteFill,
       onPress: onBackdropPress,