@multiplatform.one/forms 7.72.0 → 7.74.0

package/dist/jsx/FloatingPanel/iconEcho.native.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var iconEcho_exports = {};
+__export(iconEcho_exports, {
+  ICON_ECHO_TEST_ID: () => ICON_ECHO_TEST_ID,
+  iconEchoElement: () => iconEchoElement,
+  iconEchoOverlays: () => iconEchoOverlays
+});
+module.exports = __toCommonJS(iconEcho_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_circleGlyph = require("../Button/circleGlyph.native.js");
+var import_t = require("../shared/t.native.js");
+var ICON_ECHO_TEST_ID = "floating-panel-icon-echo";
+var DROPPED_PROPS = ["id", "onLongPress", "onKeyDown", "onContextMenu", "aria-haspopup", "aria-expanded", "aria-controls", "aria-describedby", "tooltip"];
+function iconEchoOverlays(kind, up) {
+  return kind === "close" && !up;
+}
+function iconEchoElement(trigger, kind, onClose, surface) {
+  var echo = echoOf(trigger, kind, onClose);
+  if (echo == null || !surface) return echo;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.SurfaceContext.Provider, {
+    ...surface,
+    children: echo
+  });
+}
+function echoOf(trigger, _kind, onClose) {
+  if (! /* @__PURE__ */(0, import_react2.isValidElement)(trigger)) return null;
+  var props = trigger.props;
+  var label = (0, import_t.t)("Close");
+  var dropped = Object.fromEntries(DROPPED_PROPS.map(function (name) {
+    return [name, void 0];
+  }));
+  if (props.icon != null) {
+    return /* @__PURE__ */(0, import_react2.cloneElement)(trigger, {
+      ...dropped,
+      ref: null,
+      icon: import_react.XIcon,
+      "aria-label": label,
+      onPress: onClose,
+      testID: ICON_ECHO_TEST_ID,
+      "data-testid": ICON_ECHO_TEST_ID
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CircleClose, {
+    label,
+    onClose
+  });
+}
+var avatarPlate = "$selectedBackground";
+var circleGlyphFallbackPx = 18;
+function CircleClose(param) {
+  var {
+    label,
+    onClose
+  } = param;
+  var _ref;
+  var _theme_selectedColor, _theme_color;
+  var theme = (0, import_tamagui.useTheme)();
+  var [side, setSide] = (0, import_react2.useState)(0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    role: "button",
+    "aria-label": label,
+    tabIndex: 0,
+    cursor: "pointer",
+    width: "100%",
+    height: "100%",
+    borderRadius: 1e5,
+    backgroundColor: avatarPlate,
+    alignItems: "center",
+    justifyContent: "center",
+    pressStyle: {
+      opacity: 0.6
+    },
+    onPress: onClose,
+    onLayout: function onLayout(event) {
+      return setSide(Math.min(event.nativeEvent.layout.width, event.nativeEvent.layout.height));
+    },
+    testID: ICON_ECHO_TEST_ID,
+    "data-testid": ICON_ECHO_TEST_ID,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
+      size: side > 0 ? Math.round(side * import_circleGlyph.ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx,
+      weight: "bold",
+      color: (_ref = (_theme_selectedColor = theme.selectedColor) === null || _theme_selectedColor === void 0 ? void 0 : _theme_selectedColor.val) !== null && _ref !== void 0 ? _ref : (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.val,
+      "aria-hidden": true
+    })
+  });
+}
+//# sourceMappingURL=iconEcho.native.js.map

package/dist/jsx/FloatingPanel/iconEcho.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","iconEcho_exports","ICON_ECHO_TEST_ID","iconEchoElement","iconEchoOverlays","module","exports","import_jsx_runtime","require","import_react","import_react2","import_theme","import_tamagui","import_circleGlyph","import_t","DROPPED_PROPS","kind","up","trigger","onClose","surface","echo","echoOf","jsx","SurfaceContext","Provider","children","_kind","isValidElement","props","label","t","dropped","fromEntries","map","icon","cloneElement","ref","XIcon","onPress","testID","CircleClose"],"sources":["../../../src/FloatingPanel/iconEcho.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/FloatingPanel/index.mjs

@@ -1,6 +1,6 @@
 import { transitionProps } from "@multiplatform.one/theme";
 import { cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
-import { OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, Surface, useResolvedKnobs, wasKeyboardFocus, ensureKeyboardModalityTracking, motionDurationMs } from "@multiplatform.one/theme";
+import { OVERLAY_ANCHOR_GAP, OVERLAY_ATTACH_GAP, OVERLAY_BREAKPOINT, Surface, SurfaceContext, useResolvedKnobs, wasKeyboardFocus, ensureKeyboardModalityTracking, motionDurationMs } from "@multiplatform.one/theme";
 import { isWeb, Sheet, Theme, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList.mjs";
@@ -14,6 +14,9 @@ import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../sha
 import { resolveCompactFace } from "./compactFace.mjs";
 import { isNestedPanelAction } from "./nestedAction.mjs";
 import { PanelPortal } from "./PanelPortal.mjs";
+import { echoHeaderBox, PanelIconEchoBoxContext, sameEchoBox } from "./echoContext.mjs";
+import { iconEchoElement, iconEchoOverlays } from "./iconEcho.mjs";
+import { groupSurfaceOf, paintedTriggerBox } from "./paintedBox.mjs";
 import { contextMenuPoint, placeOverTrigger, pointOpensUp, pointPanelLeft, referenceCornerPoint } from "./pointAnchor.mjs";
 import { floatingPanelActionProps, isNestedPanelAction as isNestedPanelAction2 } from "./nestedAction.mjs";
 import { useFloatingPanel as useFloatingPanel2, panelAnimationDuration, panelGrowDuration, panelTransition, panelViewportPadding as panelViewportPadding2, panelAnchorOffset, resolvePanelWidthMode } from "./useFloatingPanel.mjs";
@@ -226,6 +229,76 @@ function placeEchoOverTrigger(panelElement, geometry, {
     }
   }
 }
+function IconEchoRow({
+  children
+}) {
+  return /* @__PURE__ */jsx(View, {
+    "data-fp-icon-echo": "",
+    flexShrink: 0,
+    alignSelf: "stretch",
+    pointerEvents: "box-none",
+    style: {
+      order: -1,
+      position: "sticky",
+      zIndex: 1
+    },
+    children: /* @__PURE__ */jsx(View, {
+      "data-fp-icon-echo-box": "",
+      alignItems: "flex-start",
+      justifyContent: "flex-start",
+      children
+    })
+  });
+}
+function placeIconEcho(panelElement, {
+  offset,
+  width,
+  height,
+  up,
+  overlay,
+  group = null
+}) {
+  const row = panelElement.querySelector("[data-fp-icon-echo]");
+  const box = row?.querySelector("[data-fp-icon-echo-box]");
+  if (!row || !box) return;
+  const frame = getComputedStyle(panelElement);
+  const border = side => parseFloat(frame[`border${side}Width`] || "0") || 0;
+  const rtl = panelElement.dir === "rtl";
+  row.style.order = up ? "1" : "-1";
+  row.style.height = `${height}px`;
+  row.style.backgroundColor = overlay ? "transparent" : frame.backgroundColor;
+  if (up) {
+    row.style.top = "";
+    row.style.marginTop = "";
+    row.style.marginBottom = `${-border("Bottom")}px`;
+    row.style.bottom = row.style.marginBottom;
+  } else {
+    row.style.bottom = "";
+    row.style.marginTop = `${-border("Top")}px`;
+    row.style.marginBottom = overlay ? `${-(height - border("Top"))}px` : "";
+    row.style.top = row.style.marginTop;
+  }
+  row.setAttribute("data-fp-icon-echo", overlay ? "overlay" : "band");
+  if (group) {
+    row.style.height = `${group.height}px`;
+    if (!up && overlay) row.style.marginBottom = `${-(group.height - border("Top"))}px`;
+  }
+  row.style.marginLeft = `${-border("Left")}px`;
+  row.style.marginRight = `${-border("Right")}px`;
+  box.style.width = `${width}px`;
+  box.style.height = `${height}px`;
+  box.style.marginLeft = rtl ? "" : `${offset}px`;
+  box.style.marginRight = rtl ? `${offset}px` : "";
+  box.style.alignSelf = "flex-start";
+  box.style.marginTop = group ? `${group.top}px` : "";
+  box.style.position = "relative";
+  box.style.zIndex = "1";
+}
+function layoutParentOf(element) {
+  let parent = element?.parentElement ?? null;
+  while (parent && getComputedStyle(parent).display === "contents") parent = parent.parentElement;
+  return parent;
+}
 const overlayFloatBreakpoint = OVERLAY_BREAKPOINT;
 function subscribeViewport(listener) {
   if (!isWeb || typeof window === "undefined") return () => {};
@@ -418,6 +491,7 @@ function FloatingPanelWeb({
   cover = true,
   triggerEcho = true,
   coverAlign = "start",
+  iconEcho,
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -427,6 +501,11 @@ function FloatingPanelWeb({
   const [collisionSheet, setCollisionSheet] = useState(false);
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
+  const pointMenu = isContextMenu && sheetProps.anchorMode !== "cover-trigger";
+  const showIconEcho = cover && !pointMenu && iconEcho != null;
+  const triggerSurface = SurfaceContext.useStyledContext();
+  const iconEchoUpRef = useRef(false);
+  const [echoBox, setEchoBox] = useState(null);
   const overlayStyleRef = useRef(null);
   const pinnedTopRef = useRef(0);
   const pinnedHeightRef = useRef(0);
@@ -458,10 +537,10 @@ function FloatingPanelWeb({
     wheelGrowRef: isFill ? void 0 : grownRef,
     widthMode: widthMode ?? (isContextMenu && fitContent === void 0 ? "fit-content" : void 0),
     fitContent,
-    freeOverlay: isContextMenu,
+    freeOverlay: pointMenu,
     cover,
     panelWidth,
-    echo: cover && triggerEcho && !isContextMenu,
+    echo: cover && triggerEcho && !pointMenu,
     onBeforeOpen: resetPosition
   });
   useReturnFocusOnClose(open, skipReturnFocusRef, panel.refs.floating);
@@ -485,7 +564,7 @@ function FloatingPanelWeb({
     if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
       dropdownElement.scrollTop = 0;
     }
-    const point = isContextMenu ? anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()) : null;
+    const point = pointMenu ? anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()) : null;
     const measured = anchorRect ? {
       ...anchorRect,
       top: anchorRect.y,
@@ -514,6 +593,9 @@ function FloatingPanelWeb({
       const viewportRight = viewportLeft + (viewport?.width ?? (document.documentElement.clientWidth || window.innerWidth));
       const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
       dropdownElement.style.left = `${viewportLeft - containingBlock.left}px`;
+      const groupSurface = showIconEcho ? groupSurfaceOf(trig) : null;
+      const groupBox = groupSurface?.getBoundingClientRect() ?? null;
+      if (showIconEcho) dropdownElement.style.minWidth = groupBox ? `${groupBox.width}px` : "";
       const layoutStyle = getComputedStyle(dropdownElement);
       const scale = layoutStyle.transform && layoutStyle.transform !== "none" && typeof DOMMatrixReadOnly !== "undefined" ? Math.abs(new DOMMatrixReadOnly(layoutStyle.transform).a) : 1;
       const layoutWidth = dropdownElement.getBoundingClientRect().width / (scale || 1);
@@ -552,7 +634,35 @@ function FloatingPanelWeb({
       const neededHeight = sheetProps.scrollable ? Math.min(totalContentHeight, measured.height + firstActionHeight + bodyPadding + totalBorderWidth) : totalContentHeight;
       let placedTop = measured.top;
       let placedLeft = left;
-      if (measured.width > 0 && measured.height > 0 && (!slides && (left < viewportLeft || left + width > Math.max(measured.right, viewportRight - panelViewportPadding)) || measured.right > viewportRight || measured.top < viewportTop || measured.top + Math.max(neededHeight, measured.height) > viewportBottom - panelViewportPadding)) {
+      let placedMaxHeight = null;
+      iconEchoUpRef.current = false;
+      if (showIconEcho && measured.width > 0 && measured.height > 0) {
+        const painted = groupBox ?? paintedTriggerBox(trig, measured);
+        const placed = placeOverTrigger({
+          trigger: {
+            x: painted.left,
+            y: groupBox ? groupBox.top : measured.top,
+            width: painted.right - painted.left,
+            height: groupBox ? groupBox.height : measured.height
+          },
+          width,
+          height: totalContentHeight,
+          bounds: {
+            top: viewportTop + panelViewportPadding,
+            left: viewportLeft + panelViewportPadding,
+            right: viewportRight - panelViewportPadding,
+            bottom: viewportBottom - panelViewportPadding
+          },
+          rtl,
+          align: coverAlign,
+          pinned: true
+        });
+        placedTop = placed.top;
+        if (!slides) placedLeft = placed.left;
+        alignEnd = placed.end;
+        placedMaxHeight = placed.maxHeight;
+        iconEchoUpRef.current = placed.up;
+      } else if (measured.width > 0 && measured.height > 0 && (!slides && (left < viewportLeft || left + width > Math.max(measured.right, viewportRight - panelViewportPadding)) || measured.right > viewportRight || measured.top < viewportTop || measured.top + Math.max(neededHeight, measured.height) > viewportBottom - panelViewportPadding)) {
         if (!clampCollisions && !iconCover) {
           dropdownElement.style.visibility = "hidden";
           setCollisionSheet(true);
@@ -581,6 +691,33 @@ function FloatingPanelWeb({
         alignEnd = placed.end;
       }
       coverAlignEndRef.current = alignEnd;
+      const echoStart = echoOffset({
+        triggerLeft: measured.left,
+        triggerRight: measured.right,
+        panelLeft: placedLeft,
+        panelWidth: width,
+        rtl
+      });
+      const echoOverlays = iconEcho != null && iconEchoOverlays(iconEcho, iconEchoUpRef.current);
+      const nextEchoBox = showIconEcho && echoOverlays ? echoHeaderBox({
+        offset: echoStart,
+        width: measured.width,
+        height: measured.height,
+        panelWidth: width,
+        rtl
+      }) : null;
+      setEchoBox(previous => sameEchoBox(previous, nextEchoBox) ? previous : nextEchoBox);
+      placeIconEcho(dropdownElement, {
+        offset: echoStart,
+        width: measured.width,
+        height: measured.height,
+        up: iconEchoUpRef.current,
+        overlay: echoOverlays,
+        group: groupSurface && groupBox ? {
+          top: measured.top - groupBox.top,
+          height: groupBox.height
+        } : null
+      });
       placeEchoOverTrigger(dropdownElement, {
         triggerLeft: measured.left,
         triggerRight: measured.right,
@@ -592,12 +729,12 @@ function FloatingPanelWeb({
       });
       const top2 = placedTop - containingBlock.top;
       const cssLeft2 = placedLeft - containingBlock.left;
-      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - placedTop);
+      const maxHeight = placedMaxHeight ?? Math.max(0, viewportBottom - panelViewportPadding - placedTop);
       dropdownElement.style.top = `${top2}px`;
       dropdownElement.style.left = `${cssLeft2}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = rtl !== alignEnd ? "top right" : "top left";
+      dropdownElement.style.transformOrigin = `${iconEchoUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = {
         top: top2,
@@ -728,7 +865,7 @@ function FloatingPanelWeb({
         });
       }
     });
-  }, [isFill, isContextMenu, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
+  }, [isFill, isContextMenu, pointMenu, showIconEcho, cover, anchorRect, clampCollisions, sheetProps.scrollable, triggerEcho, coverAlign, panel.placement, panel.refs, panel.triggerRef, panel.updateArrows, panel.panelTransition]);
   repositionFnRef.current = repositionOverlay;
   const click = useClick(panel.context, {
     event: "mousedown",
@@ -774,7 +911,7 @@ function FloatingPanelWeb({
   const handleScroll = useCallback(event => {
     const el = event.target;
     panel.updateArrows(el);
-    if (isFill || cover && !isContextMenu) return;
+    if (isFill || cover && !pointMenu) return;
     if (panel.initializingRef.current) {
       lastScrollTopRef.current = el.scrollTop;
       return;
@@ -797,7 +934,7 @@ function FloatingPanelWeb({
       grownRef.current = true;
       repositionFnRef.current?.();
     }
-  }, [isFill, cover, isContextMenu, panel.updateArrows]);
+  }, [isFill, cover, pointMenu, panel.updateArrows]);
   const webTransition = panel.panelTransition;
   const {
     style: elevatedSurfaceStyle,
@@ -839,6 +976,17 @@ function FloatingPanelWeb({
       onContextMenu: openFromContextMenu
     } : {})
   });
+  const contentSized = sheetProps.triggerSizing === "content";
+  const [hugSelf, setHugSelf] = useState(contentSized ? "flex-start" : void 0);
+  useLayoutEffect(() => {
+    if (!contentSized) {
+      setHugSelf(void 0);
+      return;
+    }
+    const parent = layoutParentOf(panel.triggerRef.current);
+    const align = parent ? getComputedStyle(parent).alignItems : "stretch";
+    setHugSelf(align === "stretch" || align === "normal" ? "flex-start" : void 0);
+  }, [contentSized, panel.triggerRef]);
   for (const name of ["onMouseDown", "onClick", "onKeyDown", "onKeyUp"]) {
     const handler = referenceProps[name];
     if (typeof handler === "function") {
@@ -852,7 +1000,7 @@ function FloatingPanelWeb({
   return /* @__PURE__ */jsxs(Fragment, {
     children: [/* @__PURE__ */jsx(View, {
       ...referenceProps,
-      alignSelf: sheetProps.triggerSizing === "content" ? "flex-start" : void 0,
+      alignSelf: hugSelf,
       cursor: disabled ? "not-allowed" : "pointer",
       opacity: disabled ? 0.5 : 1,
       "data-fp-reference": "",
@@ -881,7 +1029,7 @@ function FloatingPanelWeb({
               scrollbarWidth: "none",
               zIndex: panelZIndex,
               overflow: "auto",
-              ...(cover && !isContextMenu ? {
+              ...(cover && !pointMenu ? {
                 overflowX: "hidden"
               } : {}),
               ...panel.floatingStyleRef.current,
@@ -894,7 +1042,7 @@ function FloatingPanelWeb({
               // then positions against this box and is clipped by its scroll.
               transform: panel.visible ? "none" : "scale(0.96)",
               transition: webTransition,
-              transformOrigin: cover && !isContextMenu ? isRtl(panel.triggerRef.current) !== coverAlignEndRef.current ? "top right" : "top left" : panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
+              transformOrigin: cover && !pointMenu ? `${iconEchoUpRef.current ? "bottom" : "top"} ${isRtl(panel.triggerRef.current) !== coverAlignEndRef.current ? "right" : "left"}` : panelTransformOrigin(pointPlacementRef.current ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}` : panel.placement)
             },
             onScroll: handleScroll,
             onTransitionEnd: event => {
@@ -911,7 +1059,7 @@ function FloatingPanelWeb({
           borderRadius: panel.dropdownRadius,
           paddingVertical: 0,
           paddingBottom: panel.coverCornerInset || 0,
-          children: [isContextMenu || !cover || !triggerEcho ? null : /* @__PURE__ */jsx(TriggerEchoRow, {
+          children: [pointMenu || !cover || !triggerEcho || showIconEcho ? null : /* @__PURE__ */jsx(TriggerEchoRow, {
             sourceRef: panel.triggerRef,
             source: trigger,
             anchorRect,
@@ -928,14 +1076,19 @@ function FloatingPanelWeb({
             ...(contentPadding !== "none" ? panel.knobProps.gapLg : void 0),
             children: /* @__PURE__ */jsx(OverlayStackProvider, {
               zIndex: panelZIndex,
-              children
+              children: /* @__PURE__ */jsx(PanelIconEchoBoxContext.Provider, {
+                value: echoBox,
+                children
+              })
             })
           }), /* @__PURE__ */jsx(ScrollArrow, {
             direction: "down",
             scrollRef: panel.refs.floating,
             visible: panel.arrowDown,
             arrowScrollDirRef: panel.arrowScrollDirRef
-          })]
+          }), showIconEcho && iconEcho ? /* @__PURE__ */jsx(IconEchoRow, {
+            children: iconEchoElement(trigger, iconEcho, () => onOpenChange(false), triggerSurface)
+          }) : null]
         })
       })
     })]