panelui-native 0.51.1 → 0.53.0

package/lib/module/components/context-menu/index.js

@@ -0,0 +1,529 @@
+"use strict";
+
+/**
+ * ContextMenu — the actions that belong to a piece of content, opened on it.
+ *
+ * A `Menu` hangs off a control that exists to be pressed: a ⋯ button, a toolbar
+ * item, something whose whole job is to open the menu. A context menu has no
+ * such control. The target is the content itself — a message, a note, a photo,
+ * a row — and the actions are reached by pressing and holding it.
+ *
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenu.Trigger>
+ *     <Message>Would you like an interactive todo list?</Message>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <ContextMenu.Item icon={<Share2 size={16} />}>Share</ContextMenu.Item>
+ *     <ContextMenu.Item icon={<Copy size={16} />}>Copy</ContextMenu.Item>
+ *     <ContextMenu.Separator />
+ *     <ContextMenu.Item variant="destructive" icon={<Flag size={16} />}>
+ *       Report
+ *     </ContextMenu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu>
+ * ```
+ *
+ * ## It is a Menu, and deliberately so
+ *
+ * The rows here *are* `Menu`'s rows — the same components, not a second set
+ * styled to match. `ContextMenu.Item` and `Menu.Item` are one implementation,
+ * so the destructive colour, the press-in scale, the indicator column and the
+ * dismiss-on-select rule cannot drift apart between the two ways of reaching
+ * them. The panel is `Menu`'s panel, which is `Popover`'s, so `presentation`,
+ * submenus and edge-flipping all arrive already working.
+ *
+ * What this component owns is the two things a menu opened on content needs and
+ * a menu opened from a button does not: the long press, and where the panel
+ * goes.
+ *
+ * ## Anchored to the finger, not to the target
+ *
+ * A toolbar menu is placed against its trigger, because the trigger is small
+ * and its position is the only sensible answer. A context menu's target is
+ * often most of the screen — a whole message, a whole card — and the middle of
+ * it is not where the finger was. So the anchor is the press point by default,
+ * and the panel unfolds from it the way a popover unfolds from a button.
+ *
+ * `anchor="target"` places it against the target's bounds instead, which is the
+ * better answer for something small and list-shaped, where the panel lining up
+ * with the row reads as belonging to it.
+ *
+ * ## Why the gesture is not a Pressable
+ *
+ * The target usually has a press of its own — open the thread, play the video,
+ * follow the link — and the two must not both fire. React Native's `Pressable`
+ * decides between them after the fact, and the tap can still get through on the
+ * way to a long press; the recogniser here is asked for the arbitration up
+ * front instead, so a hold that opens the menu never also counts as a press.
+ *
+ * It is also what lets the target be anything at all. A cloned `onLongPress`
+ * needs a child that takes one, which rules out exactly the plain views —
+ * bubbles, cards, images — that content-native actions are usually attached to.
+ */
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { FadeOut, runOnJS, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useCSSVariable } from 'uniwind';
+import { Portal } from "../../primitives/portal.js";
+import { Menu } from "../menu/index.js";
+import { usePopoverAnchor } from "../popover/index.js";
+import { cn } from "../../utils/cn.js";
+import { selectionTick } from "../../utils/haptics.js";
+
+/**
+ * How long the target is held before the menu opens.
+ *
+ * Long enough not to fire while a finger is on its way to a scroll, short
+ * enough that nobody wonders whether the hold is working. The platforms sit
+ * either side of this; it is the value the rest of this library holds at.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_DELAY = 350;
+
+/**
+ * How far the finger may travel during the hold before it stops counting.
+ *
+ * Generous rather than tight, and the reason is what the target usually sits
+ * in: a scroller. A threshold small enough to feel precise cancels the menu for
+ * anyone whose thumb drifts while holding still, and the gesture it is being
+ * told apart from — a scroll — has moved a great deal further than this by the
+ * time it matters.
+ */
+const DEFAULT_SLOP = 12;
+
+/**
+ * Extra height on every row.
+ *
+ * A context menu is opened by a hold and read with the hand still over it, at
+ * whatever angle the phone happened to be held at. A menu dropped from a button
+ * is aimed at deliberately; this one is landed on. The rows are taller than
+ * `Menu`'s for that reason alone, and it is the only measurement that differs.
+ */
+const ROW_CLASS = 'py-4 ps-4 pe-3.5';
+
+/**
+ * Floor for the panel's width.
+ *
+ * A context menu has no trigger to take a width from, and a column of one-word
+ * verbs left to size itself lands somewhere around a thumb's width — too narrow
+ * to aim at, and too narrow to read as a panel belonging to the whole piece of
+ * content it was opened on.
+ */
+const DEFAULT_MIN_WIDTH = 280;
+
+/**
+ * The colour an icon falls back to before the stylesheet has been read.
+ *
+ * A general-purpose icon set defaults an unset colour to `currentColor`, which
+ * React Native cannot resolve and refuses to paint. A neutral mid grey is
+ * legible on either a light or a dark panel for the frame or two it lasts.
+ */
+const ICON_FALLBACK = '#737373';
+function useTint(variable, fallback) {
+  const raw = useCSSVariable(variable);
+  return typeof raw === 'string' ? raw : fallback;
+}
+
+/**
+ * Paints a row's glyph to match its label, without the caller saying so twice.
+ *
+ * The icons on these rows come from whatever set the app already uses, and a
+ * general-purpose one has no idea what an overlay's foreground is — left alone
+ * it paints `currentColor`, which React Native will not draw at all. Setting it
+ * here means a destructive row's icon turns red along with its label, which is
+ * the one place the two disagreeing would matter.
+ *
+ * An explicit colour on the element still wins: a brand mark that carries its
+ * own colours is not something to overrule.
+ */
+function useGlyph(variant) {
+  const foreground = useTint('--color-overlay-foreground', ICON_FALLBACK);
+  const destructive = useTint('--color-destructive', ICON_FALLBACK);
+  const tint = variant === 'destructive' ? destructive : foreground;
+  return useCallback(icon => {
+    if (! /*#__PURE__*/isValidElement(icon)) return icon;
+    const element = icon;
+    if (element.props.color !== undefined) return element;
+    return /*#__PURE__*/cloneElement(element, {
+      color: tint
+    });
+  }, [tint]);
+}
+
+/** The target's frame in window coordinates, taken as the menu opens. */
+
+const ContextMenuContext = /*#__PURE__*/createContext(null);
+function useContextMenu(part) {
+  const context = useContext(ContextMenuContext);
+  if (!context) throw new Error(`${part} must be used inside <ContextMenu>.`);
+  return context;
+}
+
+/**
+ * Whether a `ContextMenu.Preview` appears anywhere in the declared tree.
+ *
+ * Sniffed from the elements rather than reported by the preview when it mounts,
+ * because the answer is needed *before* it does: the trigger has to know at the
+ * moment of the hold whether the panel will be sharing the screen with a lifted
+ * copy of the target, and by the time a child of the panel exists the anchor has
+ * already been set.
+ */
+function declaresPreview(children) {
+  let found = false;
+  Children.forEach(children, child => {
+    if (found || ! /*#__PURE__*/isValidElement(child)) return;
+    if (child.type === ContextMenuPreview) {
+      found = true;
+      return;
+    }
+    const inner = child.props.children;
+    if (inner && declaresPreview(inner)) found = true;
+  });
+  return found;
+}
+
+/**
+ * The root takes exactly what `Menu`'s root takes — `open`, `onOpenChange`,
+ * `defaultOpen`, `presentation` and `haptics` — because it *is* that root.
+ */
+
+/**
+ * The root. Provides the menu's own context and the popover underneath it.
+ *
+ * It renders a `Menu`, which is not a shortcut — it is the point. Everything a
+ * menu is, this is, and the parts below are the only difference.
+ */
+function ContextMenuRoot({
+  children,
+  ...props
+}) {
+  const [target, setTarget] = useState(null);
+  const [content, setContent] = useState(null);
+  const hasPreview = useMemo(() => declaresPreview(children), [children]);
+  const context = useMemo(() => ({
+    target,
+    setTarget,
+    content,
+    setContent,
+    hasPreview
+  }), [target, content, hasPreview]);
+  return /*#__PURE__*/_jsx(ContextMenuContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(Menu, {
+      ...props,
+      children: children
+    })
+  });
+}
+
+/** Which rectangle the panel is placed against. */
+
+/**
+ * Wraps the content and opens the menu when it is held.
+ *
+ * The wrapper is a plain view and lays out like one, stretching as a view does
+ * rather than shrinking to its child. That is the opposite of what a tooltip's
+ * trigger wants, and for the opposite reason: a tooltip names a control and
+ * belongs over it, while the things held here — a bubble, a card, a row — are
+ * usually meant to fill their place in the layout, and a wrapper that collapsed
+ * around them would change it.
+ *
+ * It is also the rect measured under `anchor="target"`, which is why that
+ * anchoring lines the panel up with the row rather than with the text in it.
+ */
+function ContextMenuTrigger({
+  className,
+  children,
+  anchor = 'point',
+  delay = DEFAULT_DELAY,
+  slop = DEFAULT_SLOP,
+  onPress,
+  haptics = false,
+  disabled = false,
+  ...props
+}) {
+  const {
+    setOpen,
+    anchorTo
+  } = usePopoverAnchor('ContextMenu.Trigger');
+  const {
+    setTarget,
+    setContent,
+    hasPreview
+  } = useContextMenu('ContextMenu.Trigger');
+  const ref = useRef(null);
+
+  /*
+   * A preview overrules `anchor`, and has to.
+   *
+   * The panel is placed outside whatever rectangle it is given, so anchoring to
+   * the target is what keeps it clear of the lifted copy of that target. Anchor
+   * to the press instead and the panel opens over the very thing the preview
+   * exists to show.
+   */
+  const against = hasPreview ? 'target' : anchor;
+
+  /*
+   * Both branches end up doing the same thing — set an anchor, then open — and
+   * differ only in which rectangle they set. A point is a zero-sized rect,
+   * which the popover places a panel against exactly as it does a trigger's
+   * bounds; there is no separate code path for it downstream.
+   *
+   * The target is measured either way, because the preview draws at that rect
+   * whatever the panel is placed against.
+   */
+  const openAt = useCallback((x, y) => {
+    // Ticked here rather than in the gesture callback so it fires once the
+    // hold has been accepted, which is the moment there is something to
+    // confirm — and on the same side of the bridge as the opening.
+    if (haptics) selectionTick();
+
+    // Measured on opening rather than on layout: the target may have
+    // scrolled since, and a stale rect anchors the panel to where it was.
+    ref.current?.measureInWindow((mx, my, width, height) => {
+      setTarget({
+        x: mx,
+        y: my,
+        width,
+        height
+      });
+      setContent(children);
+
+      /*
+       * The panel is placed outside the rectangle it is given, so under a
+       * preview that rectangle has to be the target's *lifted* bounds rather
+       * than its resting ones. The lift grows the target about its middle,
+       * and anchoring to the smaller rect left the panel overlapping the
+       * last few points of it — where the lifted copy, drawn over the panel,
+       * simply hid the row underneath.
+       */
+      const grown = hasPreview ? (PREVIEW_SCALE - 1) / 2 : 0;
+      anchorTo(against === 'point' ? {
+        x,
+        y,
+        width: 0,
+        height: 0
+      } : {
+        x: mx - width * grown,
+        y: my - height * grown,
+        width: width * (1 + grown * 2),
+        height: height * (1 + grown * 2)
+      });
+      setOpen(true);
+    });
+  }, [against, anchorTo, setOpen, haptics, setTarget, setContent, children, hasPreview]);
+  const gesture = useMemo(() => {
+    /*
+     * The hold and the tap are given to the recogniser as alternatives, so it
+     * decides between them rather than both firing. That is the whole reason
+     * this is a gesture and not a `Pressable`: the target below usually has a
+     * press of its own, and a hold that opened the menu must not also count as
+     * one.
+     *
+     * `absoluteX`/`absoluteY` are window coordinates, which is the space the
+     * popover places panels in — so the press point needs no conversion.
+     */
+    const hold = Gesture.LongPress().minDuration(delay).maxDistance(slop).enabled(!disabled).onStart(event => {
+      runOnJS(openAt)(event.absoluteX, event.absoluteY);
+    });
+    const tap = Gesture.Tap().enabled(!disabled && !!onPress).onEnd((_event, success) => {
+      if (success && onPress) runOnJS(onPress)();
+    });
+    return Gesture.Exclusive(hold, tap);
+  }, [delay, slop, disabled, onPress, openAt]);
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: gesture,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      collapsable: false,
+      className: className,
+      ...props,
+      children: children
+    })
+  });
+}
+
+/** How far the lifted target grows. Enough to read as off the page. */
+const PREVIEW_SCALE = 1.04;
+
+/** Coming off the page. Soft, because the target is large and close to the eye. */
+const PREVIEW_SPRING = {
+  damping: 20,
+  stiffness: 220,
+  mass: 0.7
+};
+/**
+ * The target, lifted off the page while its actions are up.
+ *
+ * Declared inside `ContextMenu.Content`, but not drawn there — it floats over
+ * the dimmed screen at the place the target was measured, and the panel is
+ * anchored to that same rectangle so the two never overlap. Its presence is
+ * what switches the anchor: a panel placed at the press point would open across
+ * the very content the preview exists to hold up.
+ *
+ * What it draws is the trigger's own children, rendered a second time. That
+ * keeps the lift honest — it is the content itself coming forward, at the size
+ * and in the place it already occupied — and it is why a target that should not
+ * simply be repeated can pass its own `children` instead.
+ *
+ * It takes no touches. The actions are in the panel; the lifted content is
+ * there to say what they are about, and a second live copy of a pressable card
+ * would be a second place to press.
+ */
+function ContextMenuPreview({
+  children,
+  className
+}) {
+  const {
+    target,
+    content
+  } = useContextMenu('ContextMenu.Preview');
+  const lift = useSharedValue(0);
+  const reduced = useReducedMotion();
+  useEffect(() => {
+    lift.value = reduced ? 1 : withSpring(1, PREVIEW_SPRING);
+  }, [lift, reduced]);
+  const style = useAnimatedStyle(() => ({
+    opacity: lift.value,
+    transform: [{
+      scale: 1 + lift.value * (PREVIEW_SCALE - 1)
+    }]
+  }));
+  if (!target) return null;
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      exiting: reduced ? undefined : FadeOut.duration(140),
+      style: [style, {
+        position: 'absolute',
+        left: target.x,
+        top: target.y,
+        width: target.width
+      }],
+      className: className,
+      children: children ?? content
+    })
+  });
+}
+ContextMenuPreview.displayName = 'ContextMenu.Preview';
+/**
+ * One row: the verb at the leading edge, its glyph at the trailing one.
+ *
+ * The other way round is right for a menu dropped from a button, where the
+ * glyphs form a column the eye runs down to find the row it wants. A context
+ * menu is not read that way. It appears under the hand that opened it, already
+ * over the content, and what is being scanned is the *words* — so the words
+ * start at the edge, flush with one another, and the glyph sits at the far side
+ * confirming the row rather than introducing it.
+ *
+ * It is still `Menu.Item` underneath, handed the glyph as its trailing slot. So
+ * the press-in fill, the destructive colour and the dismiss-on-select rule are
+ * one implementation shared with `Menu`, and only the arrangement differs.
+ */
+function ContextMenuItem({
+  className,
+  icon,
+  variant,
+  ...props
+}) {
+  const glyph = useGlyph(variant);
+  return /*#__PURE__*/_jsx(Menu.Item, {
+    variant: variant,
+    className: cn(ROW_CLASS, className),
+    trailing: icon ? glyph(icon) : undefined,
+    ...props
+  });
+}
+ContextMenuItem.displayName = 'ContextMenu.Item';
+
+/**
+ * A row carrying a state. Its tick stays at the leading edge, where `Menu` puts
+ * it, because a tick is not a glyph naming the row — it is the answer to it,
+ * and a column of them is what makes a set of choices readable as one.
+ */
+function ContextMenuCheckboxItem({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Menu.CheckboxItem, {
+    className: cn(ROW_CLASS, className),
+    ...props
+  });
+}
+ContextMenuCheckboxItem.displayName = 'ContextMenu.CheckboxItem';
+
+/**
+ * Everything `Menu.Content` takes. The four listed here are the ones whose
+ * defaults differ, and they are listed so the difference is visible.
+ */
+
+/**
+ * The panel, with the defaults a context menu wants rather than a popover's.
+ *
+ * It unfolds down and from the press rather than being centred on it —
+ * centring is right for a panel under a button, and wrong for one at a
+ * fingertip, where it would put half the panel back under the hand that opened
+ * it. Near the bottom of the screen `Popover` flips it above the press and
+ * clamps it into the safe area, so the one case where down does not work
+ * answers itself.
+ *
+ * The gap to the anchor is small, so the panel reads as coming out of the press
+ * rather than floating near it.
+ *
+ * The screen dims behind it, which a popover does not do. A context menu is
+ * modal in practice — the content underneath is what the actions are *about*,
+ * so nothing else on the screen is available while it is up, and the dim is
+ * what says so.
+ */
+function ContextMenuContent({
+  placement = 'bottom',
+  align = 'start',
+  offset = 8,
+  minWidth = DEFAULT_MIN_WIDTH,
+  scrim = true,
+  children,
+  ...props
+}) {
+  // The panel is portalled, so it mounts outside this provider's subtree.
+  // Re-provided here so `ContextMenu.Preview`, which is declared among these
+  // rows, can still reach the rectangle the trigger measured.
+  const context = useContextMenu('ContextMenu.Content');
+  return /*#__PURE__*/_jsx(Menu.Content, {
+    placement: placement,
+    align: align,
+    offset: offset,
+    minWidth: minWidth,
+    scrim: scrim,
+    ...props,
+    children: /*#__PURE__*/_jsx(ContextMenuContext.Provider, {
+      value: context,
+      children: children
+    })
+  });
+}
+
+/*
+ * Everything not listed here is Menu's, passed straight through. The three that
+ * are listed are wrappers rather than second implementations — they set a class
+ * or move a slot and hand the row back to `Menu.Item`, so the press-in fill,
+ * the destructive colour and the dismiss-on-select rule stay in one place and
+ * cannot drift between the two ways of reaching a list of verbs.
+ */
+export const ContextMenu = Object.assign(ContextMenuRoot, {
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Preview: ContextMenuPreview,
+  Background: Menu.Background,
+  Label: Menu.Label,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  RadioGroup: Menu.RadioGroup,
+  RadioItem: Menu.RadioItem,
+  Separator: Menu.Separator,
+  Sub: Menu.Sub,
+  SubTrigger: Menu.SubTrigger,
+  SubContent: Menu.SubContent
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/context-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","cloneElement","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useRef","useState","View","Gesture","GestureDetector","Animated","FadeOut","runOnJS","useAnimatedStyle","useReducedMotion","useSharedValue","withSpring","useCSSVariable","Portal","Menu","usePopoverAnchor","cn","selectionTick","jsx","_jsx","DEFAULT_DELAY","DEFAULT_SLOP","ROW_CLASS","DEFAULT_MIN_WIDTH","ICON_FALLBACK","useTint","variable","fallback","raw","useGlyph","variant","foreground","destructive","tint","icon","element","props","color","undefined","ContextMenuContext","useContextMenu","part","context","Error","declaresPreview","children","found","forEach","child","type","ContextMenuPreview","inner","ContextMenuRoot","target","setTarget","content","setContent","hasPreview","Provider","value","ContextMenuTrigger","className","anchor","delay","slop","onPress","haptics","disabled","setOpen","anchorTo","ref","against","openAt","x","y","current","measureInWindow","mx","my","width","height","grown","PREVIEW_SCALE","gesture","hold","LongPress","minDuration","maxDistance","enabled","onStart","event","absoluteX","absoluteY","tap","Tap","onEnd","_event","success","Exclusive","collapsable","PREVIEW_SPRING","damping","stiffness","mass","lift","reduced","style","opacity","transform","scale","pointerEvents","exiting","duration","position","left","top","displayName","ContextMenuItem","glyph","Item","trailing","ContextMenuCheckboxItem","CheckboxItem","ContextMenuContent","placement","align","offset","minWidth","scrim","Content","ContextMenu","Object","assign","Trigger","Preview","Background","Label","RadioGroup","RadioItem","Separator","Sub","SubTrigger","SubContent"],"sourceRoot":"../../../../src","sources":["components/context-menu/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACEA,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGH,OAAO;AACd,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,OAAOC,QAAQ,IACbC,OAAO,EACPC,OAAO,EACPC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAChC,SAASC,cAAc,QAAQ,SAAS;AACxC,SAASC,MAAM,QAAQ,4BAAyB;AAChD,SACEC,IAAI,QAKC,kBAAS;AAChB,SAASC,gBAAgB,QAAQ,qBAAY;AAC7C,SAASC,EAAE,QAAQ,mBAAgB;AACnC,SAASC,aAAa,QAAQ,wBAAqB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA;AAOA,MAAMC,aAAa,GAAG,GAAG;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAY,GAAG,EAAE;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAG,kBAAkB;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAG,GAAG;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG,SAAS;AAE/B,SAASC,OAAOA,CAACC,QAAgB,EAAEC,QAAgB,EAAU;EAC3D,MAAMC,GAA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","ignoreList":[]}

package/lib/module/components/menu/index.js

@@ -294,7 +294,7 @@ function MenuContent({
  * `overflow-hidden` on the panel is what keeps whatever that is inside the
  * corner radius.
  */
-function MenuBackground({
+export function MenuBackground({
   className,
   children,
   ...props
@@ -312,7 +312,7 @@ function MenuBackground({
   });
 }
 /** Non-interactive heading over a run of rows. */
-function MenuLabel({
+export function MenuLabel({
   className,
   inset,
   children,
@@ -337,7 +337,7 @@ function MenuLabel({
   });
 }
 /** Hairline between two runs of rows. */
-function MenuSeparator({
+export function MenuSeparator({
   className,
   ...props
 }) {
@@ -360,7 +360,7 @@ function MenuSeparator({
  * that a row which is disabled or which opts out via `closeOnSelect` behaves
  * the same either way.
  */
-function MenuItem({
+export function MenuItem({
   className,
   children,
   icon,
@@ -472,7 +472,7 @@ function MenuIndicatorSpacer() {
  * deliberately so: a set of toggles is nearly always set more than one at a
  * time, and closing after each one turns three taps into six.
  */
-function MenuCheckboxItem({
+export function MenuCheckboxItem({
   checked = false,
   onCheckedChange,
   onSelect,
@@ -505,7 +505,7 @@ function MenuCheckboxItem({
 }
 const MenuRadioContext = /*#__PURE__*/createContext(null);
 /** A run of rows of which exactly one is chosen. */
-function MenuRadioGroup({
+export function MenuRadioGroup({
   value,
   onValueChange,
   className,
@@ -527,7 +527,7 @@ function MenuRadioGroup({
   });
 }
 /** One option inside a `Menu.RadioGroup`. */
-function MenuRadioItem({
+export function MenuRadioItem({
   value,
   indicator = 'check',
   onSelect,
@@ -583,7 +583,7 @@ function useMenuSub(component) {
   return context;
 }
 /** Groups a `Menu.SubTrigger` with the rows it reveals. */
-function MenuSub({
+export function MenuSub({
   children,
   defaultOpen = false,
   open,
@@ -611,7 +611,7 @@ function MenuSub({
  * point down once open, so the row states which way its rows will appear
  * rather than only that it has some.
  */
-function MenuSubTrigger({
+export function MenuSubTrigger({
   className,
   children,
   icon,
@@ -678,7 +678,7 @@ function MenuSubTrigger({
  * would otherwise report the animated height back, and the panel would settle
  * at whatever it happened to measure on the first frame.
  */
-function MenuSubContent({
+export function MenuSubContent({
   className,
   children,
   ...props
@@ -727,6 +727,14 @@ MenuSeparator.displayName = 'Menu.Separator';
 MenuSub.displayName = 'Menu.Sub';
 MenuSubTrigger.displayName = 'Menu.SubTrigger';
 MenuSubContent.displayName = 'Menu.SubContent';
+
+/*
+ * The parts above are exported individually as well as hung off `Menu`, and the
+ * reason is `ContextMenu`: it presents these same components as its own rows, so
+ * the emitted type declarations for it have to be able to name them. `Menu` is
+ * still the only thing the package exports, so nothing about how these are
+ * reached from outside has changed.
+ */
 export const Menu = Object.assign(MenuRoot, {
   Trigger: MenuTrigger,
   Content: MenuContent,