fix(Popover): a touch that pans is not an outside press, even without pointercancel

.changeset/fling-over-page-keeps-layer-open.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] A pan over the page that the browser doesn't take as a scroll no longer closes an open popover or selector list, and no longer taps the page element under the finger.
+
+@cixzhang

apps/storybook/stories/Popover.stories.tsx

@@ -7,6 +7,7 @@ import {BottomSheet} from '@astryxdesign/core/BottomSheet';
 import {Popover} from '@astryxdesign/core/Popover';
 import type {PopoverTriggerRenderProps} from '@astryxdesign/core/Popover';
 import {Button} from '@astryxdesign/core/Button';
+import {ResizeHandle, useResizable} from '@astryxdesign/core/Resizable';
 import {Token} from '@astryxdesign/core/Token';
 import {Link} from '@astryxdesign/core/Link';
 import {List, ListItem} from '@astryxdesign/core/List';
@@ -344,6 +345,66 @@ export const Default: Story = {
   },
 };
 
+function ResizablePanel() {
+  const resizable = useResizable({defaultSize: 120, minSize: 60, maxSize: 320});
+  return (
+    <div style={{display: 'flex', blockSize: 64}}>
+      <section
+        aria-label="Resizable panel"
+        style={{inlineSize: resizable.size, overflow: 'hidden'}}>
+        <Text>{resizable.size}px</Text>
+      </section>
+      <ResizeHandle
+        direction="horizontal"
+        hasDivider
+        resizable={resizable}
+        label="Resize panel"
+      />
+    </div>
+  );
+}
+
+/**
+ * An open Popover above page controls that take a finger's drag: a resize
+ * handle and rows with swipe actions. On a touch screen each follows the
+ * finger while the Popover is open.
+ */
+export const OverPageControls: Story = {
+  tags: ['!autodocs'],
+  render: () => (
+    <VStack gap={4}>
+      <Popover
+        placement="below"
+        label="Settings"
+        width={240}
+        content={<Text>Popover content</Text>}>
+        <Button label="Settings">Settings</Button>
+      </Popover>
+      <div style={{blockSize: 120}} />
+      <ResizablePanel />
+      <List>
+        {['Message 1', 'Message 2', 'Message 3'].map(label => (
+          <ListItem
+            key={label}
+            label={label}
+            onClick={() => {}}
+            swipeActions={{
+              trailing: [
+                {label: 'Archive', onActivate: () => {}, variant: 'neutral'},
+                {
+                  label: 'Delete',
+                  onActivate: () => {},
+                  variant: 'destructive',
+                },
+              ],
+            }}
+          />
+        ))}
+      </List>
+    </VStack>
+  ),
+};
+
 // =============================================================================
 // Filter Panel
 // =============================================================================

packages/core/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -50,7 +50,7 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {Icon} from '../Icon';
-import {usePopover} from '../Popover/usePopover';
+import {usePopoverInternal} from '../Popover/usePopover';
 import {useListFocus} from '../hooks/useListFocus';
 import {useMenuPress} from '../hooks/useMenuPress';
 import {pressOnItemsOnly} from '../hooks/menuPressOnItems';
@@ -552,7 +552,9 @@ function BreadcrumbMenuTrigger({
   // to activate the tracking they read, so it activates it itself.
   const {ref: modalityRef} = useInteractionModalityTracking();
 
-  const popover = usePopover({
+  const popover = usePopoverInternal({
+    // The menu, not the layer, owns what a touch outside that pans does.
+    ownsOutsidePan: true,
     hasLightDismiss: true,
     hasCloseButton: false,
     hasAutoFocus: false,

packages/core/src/DropdownMenu/DropdownMenu.tsx

@@ -47,7 +47,7 @@ import React, {
 } from 'react';
 import {readAccessibleName} from '../utils/accessibleName';
 import * as stylex from '@stylexjs/stylex';
-import {usePopover} from '../Popover/usePopover';
+import {usePopoverInternal} from '../Popover/usePopover';
 import {holdEntranceInput} from '../Layer/holdEntranceInput';
 import {
   claimPress,
@@ -1108,10 +1108,12 @@ function DropdownMenuPopover({
         ? button.label
         : undefined;
 
-  const popover = usePopover({
+  const popover = usePopoverInternal({
     onHide: handleLayerHide,
     onShow: handleLayerShow,
     hasLightDismiss: true,
+    // The menu, not the layer, owns what a touch outside that pans does.
+    ownsOutsidePan: true,
     hasCloseButton: false,
     hasAutoFocus: false,
     // Without a header or footer the popup's own role="menu" is the exposed