feat(ContextMenu): a held finger grows the trigger on UIKit's lift spring

.changeset/contextmenu-outside-press-watch.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] ContextMenu closes on an outside press through the layer's outside-press watch. A mouse or pen press closes it at its `mousedown`, in the menu's own document, so a menu in an iframe or a Picture-in-Picture window no longer closes on a press in the page.
+
+@vjeux

.changeset/contextmenu-touch-timeline.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[feat] ContextMenu opens from a held finger on iOS 26's measured timeline where the primary pointer is coarse. A block trigger whose menu opens at the finger starts to grow 150 ms after the finger lands, toward its held size on UIKit's lift spring, played on the compositor, and the hold keeps UIKit's measured moments. The growth scales an inner box that holds the trigger's children, so the menu never takes the press's scale. At 400 ms the press takes the finger: its lift no longer sends a click, and the page cannot scroll under it. The menu opens at 735 ms if the finger is still down, or as soon as it lifts after 400 ms. A finger that lifts before 400 ms, or drifts more than 11.5 px on either axis before the menu opens, gets no menu, and the trigger springs back to its size. The page stays free to scroll while the menu is up: a touch outside the menu closes it as it begins to pan, or at its lift. The trigger returns to its size when the menu closes. A touch open lights no row: the menu takes the focus, and a row lights only under the finger, as in UIKit (keyboard and pointer opens still focus the first item). A second finger cancels the press before 400 ms; after it, the menu still opens. A fine pointer (a mouse) keeps the right-click menu, and a finger there keeps today's 500 ms long press. Pass `presentation="popover"` to keep today's menu: the menu at the pointer, opened by a finger held for 500 ms.
+
+@vjeux

apps/storybook/stories/ContextMenu.stories.tsx

@@ -647,3 +647,190 @@ export const BottomSheetSubmenu: Story = {
     }
   },
 };
+
+const touchStyles = stylex.create({
+  card: {
+    width: '200px',
+    height: '120px',
+    display: 'grid',
+    placeItems: 'center',
+    borderRadius: '12px',
+    backgroundColor: '#e5e7eb',
+    color: '#374151',
+    userSelect: 'none',
+  },
+});
+
+export const TouchLongPress: Story = {
+  name: 'Touch / long press',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Where the primary pointer is coarse (a touch screen), hold a finger on the card. As on iOS, it starts to grow after 150 ms, a haptic plays at 400 ms where the device can play one, and the menu opens at 735 ms, or as soon as the finger lifts after 400 ms. A finger that lifts before 400 ms, or drifts more than 11.5 px on either axis before the menu opens, gets no menu, and the card springs back to its size. While the menu is up, the page still scrolls: a touch outside the menu closes it as it begins to pan. The card returns to its size when the menu closes.',
+      },
+    },
+  },
+  render: () => (
+    <ContextMenu
+      data-testid="touch-context-menu"
+      label="Photo actions"
+      items={[
+        {label: 'Copy', icon: ClipboardIcon, onClick: () => {}},
+        {label: 'Share', icon: ShareIcon, onClick: () => {}},
+        {label: 'Save to Files', icon: ArrowDownTrayIcon, onClick: () => {}},
+        {type: 'divider'},
+        {
+          label: 'Delete',
+          icon: TrashIcon,
+          variant: 'destructive',
+          onClick: () => {},
+        },
+      ]}>
+      <div {...stylex.props(touchStyles.card)}>Hold for actions</div>
+    </ContextMenu>
+  ),
+};
+
+const layoutStyles = stylex.create({
+  page: {
+    display: 'grid',
+    gap: '24px',
+  },
+  pair: {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: '24px',
+  },
+  block: {
+    padding: '12px',
+    borderRadius: '12px',
+    backgroundColor: '#f3f4f6',
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    padding: '8px 16px',
+    backgroundColor: '#f3f4f6',
+  },
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: '40px 1fr',
+    gridTemplateRows: 'auto auto',
+    columnGap: '12px',
+    rowGap: '4px',
+    padding: '8px',
+    backgroundColor: '#f3f4f6',
+  },
+  swatch: {
+    width: '40px',
+    height: '40px',
+    borderRadius: '8px',
+    backgroundColor: '#9ca3af',
+    gridRow: '1 / 3',
+  },
+  tall: {
+    height: '160px',
+    padding: '8px',
+    backgroundColor: '#f3f4f6',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: '8px',
+    backgroundColor: '#d1d5db',
+  },
+});
+
+const LAYOUTS = ['block', 'row', 'grid'] as const;
+
+function TallContent() {
+  return <div {...stylex.props(layoutStyles.fill)}>Fills the trigger</div>;
+}
+
+function LayoutContent() {
+  return (
+    <>
+      <div {...stylex.props(layoutStyles.swatch)} />
+      <span>Quarterly report</span>
+      <span>Edited today</span>
+    </>
+  );
+}
+
+export const TouchTriggerLayouts: Story = {
+  name: 'Touch / trigger layouts',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The press grows only the trigger’s own visual, an inner box that lays the children out as the trigger would. Each trigger here sits beside a plain box with the same style, and both lay out the same, a set-height trigger with a full-height child too.',
+      },
+    },
+  },
+  render: () => (
+    <div {...stylex.props(layoutStyles.page)}>
+      {LAYOUTS.map(layout => (
+        <div key={layout} {...stylex.props(layoutStyles.pair)}>
+          <ContextMenu
+            data-testid={`layout-${layout}`}
+            label="Report actions"
+            triggerXstyle={layoutStyles[layout]}
+            items={[
+              {label: 'Copy', icon: ClipboardIcon, onClick: () => {}},
+              {label: 'Share', icon: ShareIcon, onClick: () => {}},
+            ]}>
+            <LayoutContent />
+          </ContextMenu>
+          <div
+            data-testid={`layout-${layout}-reference`}
+            {...stylex.props(layoutStyles[layout])}>
+            <LayoutContent />
+          </div>
+        </div>
+      ))}
+      <div {...stylex.props(layoutStyles.pair)}>
+        <ContextMenu
+          data-testid="layout-tall"
+          label="Report actions"
+          triggerXstyle={layoutStyles.tall}
+          items={[
+            {label: 'Copy', icon: ClipboardIcon, onClick: () => {}},
+            {label: 'Share', icon: ShareIcon, onClick: () => {}},
+          ]}>
+          <TallContent />
+        </ContextMenu>
+        <div
+          data-testid="layout-tall-reference"
+          {...stylex.props(layoutStyles.tall)}>
+          <TallContent />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const TouchLongPressPopover: Story = {
+  name: 'Touch / long press, presentation="popover"',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'With `presentation="popover"`, ContextMenu keeps today’s menu on every device: a finger held for 500 ms opens it at the finger, with no growth and no iOS timeline. A finger on a device whose primary pointer is fine (a mouse or a trackpad) gets the same long press.',
+      },
+    },
+  },
+  render: () => (
+    <ContextMenu
+      data-testid="touch-context-menu"
+      label="Photo actions"
+      presentation="popover"
+      items={[
+        {label: 'Copy', icon: ClipboardIcon, onClick: () => {}},
+        {label: 'Share', icon: ShareIcon, onClick: () => {}},
+        {label: 'Save to Files', icon: ArrowDownTrayIcon, onClick: () => {}},
+      ]}>
+      <div {...stylex.props(touchStyles.card)}>Hold for actions</div>
+    </ContextMenu>
+  ),
+};