@multiplatform.one/components 7.4.1 → 7.6.0

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { OVERLAY_ANCHOR_GAP, hairline, keyboardFocusRingProps, menuRowFrame, ensureKeyboardModalityTracking, useResolvedKnobs, warnBareDisabled, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { hairline, keyboardFocusRingProps, menuRowFrame, useResolvedKnobs, warnBareDisabled, wasKeyboardFocus, ensureKeyboardModalityTracking } from "@multiplatform.one/theme";
 import { CheckIcon } from "@phosphor-icons/react";
-import { Popover, Text, View, XStack, YStack, isWeb, styled, useComposedRefs, useControllableState, useTheme, withStaticProperties } from "tamagui";
+import { FloatingPanel } from "@multiplatform.one/forms";
+import { Text, View, XStack, YStack, isWeb, styled, useControllableState, useTheme, withStaticProperties } from "tamagui";
 import { componentColors } from "../componentColors.native.js";
 var DropdownMenuContext = /* @__PURE__ */createContext(null);
 function useDropdownMenuContext(part) {
@@ -10,6 +11,9 @@ function useDropdownMenuContext(part) {
   if (!ctx) throw new Error(`DropdownMenu.${part} must be used inside <DropdownMenu>`);
   return ctx;
 }
+var HOVER_FILL = "$color3";
+var SELECTED_FILL = "$color2";
+var MENU_ITEM_ATTR = "data-mp1-menu-item";
 var ItemRow = styled(XStack, {
   name: "DropdownMenuItem",
   ...menuRowFrame,
@@ -17,24 +21,29 @@ var ItemRow = styled(XStack, {
   cursor: "pointer",
   // LC-72 CONTAINER-CLIP: rows stay square; the overlay clips outer corners.
   // LC-71: rest and pointer-origin focus paint no ring. Keyboard ring is
-  // applied per-row via keyboardFocusRingProps (inset so overflow:hidden
-  // does not sever it) when wasKeyboardFocus().
+  // applied per-row via keyboardFocusRingProps (offset 0 — design-law menu
+  // grammar) when wasKeyboardFocus().
   outlineWidth: 0,
   hoverStyle: {
-    backgroundColor: componentColors.interactive.hover
+    backgroundColor: HOVER_FILL
   },
   pressStyle: {
-    backgroundColor: componentColors.interactive.active
+    backgroundColor: HOVER_FILL
   },
   focusStyle: {
-    backgroundColor: componentColors.interactive.hover,
+    backgroundColor: HOVER_FILL,
     outlineWidth: 0
   },
   focusVisibleStyle: {
-    backgroundColor: componentColors.interactive.hover,
+    backgroundColor: HOVER_FILL,
     outlineWidth: 0
   },
   variants: {
+    selected: {
+      true: {
+        backgroundColor: SELECTED_FILL
+      }
+    },
     disabled: {
       true: {
         cursor: "default",
@@ -59,7 +68,51 @@ var SeparatorLine = styled(View, {
   backgroundColor: componentColors.divider,
   marginVertical: "$1.5"
 });
-var MENU_ITEM_ATTR = "data-mp1-menu-item";
+var coverContract = {
+  widthMode: "at-least-trigger",
+  fitContent: false
+};
+function decorateTrigger(trigger, open, onArrow) {
+  if (! /* @__PURE__ */isValidElement(trigger)) return trigger;
+  var props = trigger.props;
+  return /* @__PURE__ */cloneElement(trigger, {
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    onKeyDown: function onKeyDown(e) {
+      var _props_onKeyDown;
+      (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);
+      if (e.repeat) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        onArrow(e.key === "ArrowUp" ? "last" : "first");
+      }
+    }
+  });
+}
+function renderEntries(items) {
+  return items.map(function (entry, index) {
+    var _entry_key, _entry_key1;
+    return "separator" in entry && entry.separator ? /* @__PURE__ */_jsx(DropdownMenuSeparator, {}, `separator-${index}`) : "checked" in entry && entry.checked !== void 0 ? /* @__PURE__ */_jsx(DropdownMenuCheckboxItem, {
+      checked: entry.checked,
+      onCheckedChange: entry.onCheckedChange,
+      onSelect: entry.onSelect,
+      closeOnSelect: entry.closeOnSelect,
+      disabled: entry.disabled,
+      disabledReason: entry.disabledReason,
+      shortcut: entry.shortcut,
+      children: entry.label
+    }, (_entry_key = entry.key) !== null && _entry_key !== void 0 ? _entry_key : index) : /* @__PURE__ */_jsx(DropdownMenuItem, {
+      icon: entry.icon,
+      shortcut: entry.shortcut,
+      disabled: entry.disabled,
+      disabledReason: entry.disabledReason,
+      destructive: entry.destructive,
+      closeOnSelect: entry.closeOnSelect,
+      onSelect: entry.onSelect,
+      children: entry.label
+    }, (_entry_key1 = entry.key) !== null && _entry_key1 !== void 0 ? _entry_key1 : index);
+  });
+}
 function DropdownMenuRoot(param) {
   var {
     children,
@@ -76,135 +129,115 @@ function DropdownMenuRoot(param) {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  var triggerRef = useRef(null);
   var pendingFocusRef = useRef("first");
   var close = useCallback(function () {
     setOpen(false);
-    if (isWeb) {
-      var node = triggerRef.current;
-      if (node && typeof node.focus === "function") node.focus();
-    }
   }, [setOpen]);
   var ctx = useMemo(function () {
     return {
       open,
       setOpen,
-      triggerRef,
       close,
       closeOnSelect,
       pendingFocusRef
     };
   }, [open, setOpen, close, closeOnSelect]);
+  var onArrow = useCallback(function (prefer) {
+    pendingFocusRef.current = prefer;
+    if (!open) setOpen(true);
+  }, [open, setOpen]);
+  var trigger = children;
+  var body = null;
+  var contentMaxHeight = maxHeight;
+  var contentMaxWidth;
+  if (items) {
+    body = renderEntries(items);
+  } else if (Array.isArray(children) || /* @__PURE__ */isValidElement(children)) {
+    var list = Array.isArray(children) ? children : [children];
+    var triggerParts = [];
+    var contentParts = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = list[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var child = _step.value;
+        if (! /* @__PURE__ */isValidElement(child)) {
+          triggerParts.push(child);
+          continue;
+        }
+        var type = child.type;
+        if (type === DropdownMenuTrigger) {
+          triggerParts.push(child.props.children);
+        } else if (type === DropdownMenuContent) {
+          var contentProps = child.props;
+          contentParts.push(contentProps.children);
+          if (contentProps.maxHeight != null) contentMaxHeight = contentProps.maxHeight;
+          if (contentProps.maxWidth != null) contentMaxWidth = contentProps.maxWidth;
+        } else {
+          triggerParts.push(child);
+        }
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    if (triggerParts.length) trigger = triggerParts.length === 1 ? triggerParts[0] : triggerParts;
+    if (contentParts.length) body = contentParts;
+  }
   return /* @__PURE__ */_jsx(DropdownMenuContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */_jsx(Popover, {
+    children: /* @__PURE__ */_jsx(FloatingPanel, {
       open,
       onOpenChange: setOpen,
-      placement,
-      offset: OVERLAY_ANCHOR_GAP,
-      stayInFrame: true,
-      allowFlip: true,
-      children: items ? /* @__PURE__ */_jsxs(_Fragment, {
-        children: [/* @__PURE__ */_jsx(DropdownMenuTrigger, {
-          asChild: /* @__PURE__ */isValidElement(children),
-          children
-        }), /* @__PURE__ */_jsx(DropdownMenuContent, {
-          maxHeight,
-          children: items.map(function (entry, index) {
-            var _entry_key, _entry_key1;
-            return "separator" in entry && entry.separator ? /* @__PURE__ */_jsx(DropdownMenuSeparator, {}, `separator-${index}`) : "checked" in entry && entry.checked !== void 0 ? /* @__PURE__ */_jsx(DropdownMenuCheckboxItem, {
-              checked: entry.checked,
-              onCheckedChange: entry.onCheckedChange,
-              onSelect: entry.onSelect,
-              closeOnSelect: entry.closeOnSelect,
-              disabled: entry.disabled,
-              disabledReason: entry.disabledReason,
-              shortcut: entry.shortcut,
-              children: entry.label
-            }, (_entry_key = entry.key) !== null && _entry_key !== void 0 ? _entry_key : index) : /* @__PURE__ */_jsx(DropdownMenuItem, {
-              icon: entry.icon,
-              shortcut: entry.shortcut,
-              disabled: entry.disabled,
-              disabledReason: entry.disabledReason,
-              destructive: entry.destructive,
-              closeOnSelect: entry.closeOnSelect,
-              onSelect: entry.onSelect,
-              children: entry.label
-            }, (_entry_key1 = entry.key) !== null && _entry_key1 !== void 0 ? _entry_key1 : index);
-          })
-        })]
-      }) : children
+      trigger: decorateTrigger(trigger, open, onArrow),
+      contentPadding: "none",
+      ...coverContract,
+      ...(placement ? {
+        placement
+      } : {}),
+      children: /* @__PURE__ */_jsx(DropdownMenuList, {
+        maxHeight: contentMaxHeight,
+        maxWidth: contentMaxWidth,
+        children: body
+      })
     })
   });
 }
-var DropdownMenuTrigger = /* @__PURE__ */forwardRef(function DropdownMenuTrigger2(param, forwardedRef) {
+function DropdownMenuTrigger(param) {
   var {
-    onKeyDown,
-    ...props
+    children
   } = param;
-  var ctx = useDropdownMenuContext("Trigger");
-  var composedRef = useComposedRefs(ctx.triggerRef, forwardedRef);
-  var swallowNextKeyUp = function swallowNextKeyUp2(key) {
-    var kill = function kill1(ue) {
-      if (ue.key === key) {
-        ue.preventDefault();
-        ue.stopImmediatePropagation();
-      }
-      document.removeEventListener("keyup", kill, true);
-    };
-    document.addEventListener("keyup", kill, true);
-  };
-  var handleKeyDown = function handleKeyDown2(e) {
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
-    if (e.repeat) return;
-    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
-      swallowNextKeyUp(e.key);
-      if (e.defaultPrevented) return;
-      e.preventDefault();
-      if (e.key === "ArrowDown") {
-        ctx.pendingFocusRef.current = "first";
-        if (!ctx.open) ctx.setOpen(true);
-      } else if (e.key === "ArrowUp") {
-        ctx.pendingFocusRef.current = "last";
-        if (!ctx.open) ctx.setOpen(true);
-      } else {
-        ctx.pendingFocusRef.current = "first";
-        ctx.setOpen(!ctx.open);
-      }
-    }
-  };
-  return /* @__PURE__ */_jsx(Popover.Trigger, {
-    ref: composedRef,
-    "aria-haspopup": "menu",
-    "aria-expanded": ctx.open,
-    ...(isWeb ? {
-      onKeyDown: handleKeyDown
-    } : void 0),
-    ...props
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children
   });
-});
-var DropdownMenuContent = /* @__PURE__ */forwardRef(function DropdownMenuContent2(param, forwardedRef) {
+}
+function DropdownMenuContent(param) {
+  var {
+    children
+  } = param;
+  return /* @__PURE__ */_jsx(_Fragment, {
+    children
+  });
+}
+function DropdownMenuList(param) {
   var {
     children,
     maxHeight,
-    minWidth,
-    ...props
+    maxWidth
   } = param;
   var ctx = useDropdownMenuContext("Content");
-  var {
-    knobProps
-  } = useResolvedKnobs();
   var innerRef = useRef(null);
-  var [triggerWidth, setTriggerWidth] = useState(void 0);
-  useLayoutEffect(function () {
-    if (!isWeb || !ctx.open) return;
-    var node = ctx.triggerRef.current;
-    if (node && typeof node.getBoundingClientRect === "function") {
-      setTriggerWidth(Math.ceil(node.getBoundingClientRect().width));
-    }
-  }, [ctx.open, ctx.triggerRef]);
-  var resolvedMinWidth = minWidth !== null && minWidth !== void 0 ? minWidth : triggerWidth;
-  var composedRef = useComposedRefs(innerRef, forwardedRef);
   var typeahead = useRef({
     buffer: "",
     at: 0
@@ -218,20 +251,15 @@ var DropdownMenuContent = /* @__PURE__ */forwardRef(function DropdownMenuContent
   var focusItem = useCallback(function (el) {
     el === null || el === void 0 ? void 0 : el.focus();
   }, []);
-  var handleOpenAutoFocus = useCallback(function (event) {
-    event.preventDefault();
+  useEffect(function () {
+    if (!isWeb || !ctx.open) return;
     var prefer = ctx.pendingFocusRef.current;
     ctx.pendingFocusRef.current = "first";
     requestAnimationFrame(function () {
       var items = getItems();
       focusItem(prefer === "last" ? items[items.length - 1] : items[0]);
     });
-  }, [ctx, focusItem, getItems]);
-  var handleCloseAutoFocus = useCallback(function (event) {
-    event.preventDefault();
-    var node = ctx.triggerRef.current;
-    if (node && typeof node.focus === "function") node.focus();
-  }, [ctx]);
+  }, [ctx, ctx.open, focusItem, getItems]);
   useEffect(function () {
     if (!isWeb) return;
     var node = innerRef.current;
@@ -296,47 +324,27 @@ var DropdownMenuContent = /* @__PURE__ */forwardRef(function DropdownMenuContent
       return node.removeEventListener("keydown", handler);
     };
   }, [ctx, focusItem, getItems]);
-  return /* @__PURE__ */_jsx(Popover.Content, {
-    ref: composedRef,
+  return /* @__PURE__ */_jsx(YStack, {
+    ref: innerRef,
     role: "menu",
-    ...knobProps.elevatedSurface,
-    // SP-EDGE: the container owns only its border — zero padding on all
-    // four sides. Rows reach every edge; the first/last row highlight
-    // touches the top/bottom border. overflow hidden clips full-width
-    // row highlights to the radius knob.
-    padding: 0,
-    overflow: "hidden",
-    minWidth: resolvedMinWidth,
-    transition: knobProps.transition,
-    enterStyle: {
-      opacity: 0,
-      y: -4,
-      scale: 0.97
-    },
-    exitStyle: {
-      opacity: 0,
-      y: -4,
-      scale: 0.97
-    },
-    onOpenAutoFocus: handleOpenAutoFocus,
-    onCloseAutoFocus: handleCloseAutoFocus,
-    ...props,
-    children: /* @__PURE__ */_jsx(YStack, {
-      // SP-EDGE: no container padding — items own all their padding.
-      paddingVertical: 0,
-      width: "100%",
-      ...(maxHeight ? {
-        maxHeight,
-        ...(isWeb ? {
-          style: {
-            overflowY: "auto"
-          }
-        } : {})
-      } : {}),
-      children
-    })
+    "data-dismiss-class": "commit",
+    "data-mp-width-mode": "at-least-trigger",
+    width: "100%",
+    paddingVertical: 0,
+    ...(maxHeight ? {
+      maxHeight,
+      ...(isWeb ? {
+        style: {
+          overflowY: "auto"
+        }
+      } : {})
+    } : {}),
+    ...(maxWidth ? {
+      maxWidth
+    } : {}),
+    children
   });
-});
+}
 var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBody2(param, forwardedRef) {
   var {
     children,
@@ -349,7 +357,8 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
     closeOnSelect,
     closeOnSelectDefault = true,
     role = "menuitem",
-    leading,
+    trailing,
+    selected = false,
     ...props
   } = param;
   var _ref;
@@ -388,19 +397,30 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
   var focusFill = destructive && !disabled ? {
     backgroundColor: "$red3"
   } : {
-    backgroundColor: componentColors.interactive.hover
+    backgroundColor: selected ? SELECTED_FILL : HOVER_FILL
   };
-  var ring = kbRing ? keyboardFocusRingProps : {
+  var ring = kbRing ? {
+    ...keyboardFocusRingProps,
+    outlineOffset: 0
+  } : {
     outlineWidth: 0
   };
+  var rowHeight = knobProps.sizeToken === "$4" ? "44" : String(knobProps.sizeToken);
   return /* @__PURE__ */_jsxs(ItemRow, {
     ref: forwardedRef,
     role,
     disabled,
+    selected,
     "aria-disabled": disabled || void 0,
     minHeight: knobProps.sizeToken,
     transition: knobProps.transition,
     onPress: handleSelect,
+    "data-mp-hover-fill": HOVER_FILL,
+    "data-mp-selected-fill": selected ? SELECTED_FILL : void 0,
+    "data-mp-pad-x": "13",
+    "data-mp-row-height": rowHeight,
+    "data-mp-font-weight": "400",
+    "data-mp-ring-offset": "0",
     ...highlightFill,
     ...(explainedDisable ? {
       paddingVertical: "$1.5"
@@ -409,11 +429,6 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
     ...(isWeb ? {
       tabIndex: -1,
       [MENU_ITEM_ATTR]: "",
-      // Radix: pointer-move moves highlight so hover and keyboard
-      // never paint two rows at once. LC-71: ring only when the
-      // focus is keyboard-origin — pointer-move sets a local flag
-      // so wasKeyboardFocus() (still true until pointerdown) does
-      // not keep the ring after the mouse takes over.
       onFocus: function onFocus() {
         setHighlighted(true);
         setKbRing(wasKeyboardFocus() && !pointerIntentRef.current);
@@ -434,7 +449,10 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
       "data-highlighted": highlighted ? "true" : void 0,
       "data-mp-kb-ring": kbRing ? "true" : void 0
     } : {}),
-    ...(kbRing ? keyboardFocusRingProps : {
+    ...(kbRing ? {
+      ...keyboardFocusRingProps,
+      outlineOffset: 0
+    } : {
       outlineWidth: 0
     }),
     focusStyle: {
@@ -445,7 +463,7 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
       ...focusFill,
       ...ring
     },
-    children: [leading, icon ? /* @__PURE__ */_jsx(View, {
+    children: [icon ? /* @__PURE__ */_jsx(View, {
       flexShrink: 0,
       alignItems: "center",
       justifyContent: "center",
@@ -456,11 +474,7 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
         }
       } : {}),
       children: icon
-    }) : null, explainedDisable ?
-    // DG-ST-03: the reason renders inline under the label — visible
-    // without hover (DG-OVL-05) and read as part of the item.
-    /* @__PURE__ */
-    _jsxs(YStack, {
+    }) : null, explainedDisable ? /* @__PURE__ */_jsxs(YStack, {
       flexGrow: 1,
       flexShrink: 1,
       gap: "$0.5",
@@ -468,6 +482,7 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
         ...knobProps.body,
         color: textColor,
         fontSize: "$3",
+        fontWeight: "400",
         numberOfLines: 1,
         children
       }), /* @__PURE__ */_jsx(Text, {
@@ -481,6 +496,7 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
       ...knobProps.body,
       color: textColor,
       fontSize: "$3",
+      fontWeight: "400",
       numberOfLines: 1,
       flexGrow: 1,
       flexShrink: 1,
@@ -493,7 +509,7 @@ var DropdownMenuItemBody = /* @__PURE__ */forwardRef(function DropdownMenuItemBo
       marginInlineStart: "$4",
       opacity: 0.9,
       children: shortcut
-    }) : null]
+    }) : null, trailing]
   });
 });
 var DropdownMenuItem = /* @__PURE__ */forwardRef(function DropdownMenuItem2(props, ref) {
@@ -513,22 +529,19 @@ var DropdownMenuCheckboxItem = /* @__PURE__ */forwardRef(function DropdownMenuCh
     ref,
     role: "menuitemcheckbox",
     "aria-checked": checked,
-    // LC-21 COMPOSE class default: toggles accumulate, so the menu stays
-    // open unless the entry or the menu opts into close-on-select
-    // (single-select radio-style navigation menus do).
+    selected: checked,
     closeOnSelectDefault: false,
-    // Both callbacks fire: the toggle contract AND the activation
-    // contract — a checked entry's onSelect must never be dropped.
     onSelect: function onSelect1() {
       onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(!checked);
       onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     },
-    leading: /* @__PURE__ */_jsx(View, {
+    trailing: /* @__PURE__ */_jsx(View, {
       width: 18,
       flexShrink: 0,
       alignItems: "center",
       justifyContent: "center",
       opacity: checked ? 1 : 0,
+      "data-mp-check": "trailing",
       children: /* @__PURE__ */_jsx(CheckIcon, {
         size: 14,
         weight: "bold"