@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.559b005

package/dist/Dialog/Dialog.js

@@ -42,6 +42,7 @@ import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
 import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
+import { useBackdropPress } from "../Layer/useBackdropPress.js";
 import { useModalOutlet } from "../Layer/modalOutlet.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, durationVars, easeVars, shadowVars, spacingVars } from "../theme/tokens.stylex.js";
@@ -54,15 +55,15 @@ import { DialogContext } from "./DialogContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useInteractionModalityTracking } from "../utils/interactionModality.js";
-import { focusForLastInput } from "../utils/focusReturn.js";
+import { focusForLastInput, isFocusLost } from "../utils/focusReturn.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport
  * center, scaled to the given distance.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getDialogDirection(triggerEl, distance = 16) {
   const rect = triggerEl.getBoundingClientRect();
   // The trigger's own window: its rect is measured in that window's viewport,
@@ -458,6 +459,42 @@ export function Dialog({
     }
   }, [isOpen, isInline]);
 
+  // A dialog that unmounts while open (rendered only while open, or removed
+  // with the rest of a view) never runs the close branch above, and removing a
+  // <dialog> does not run the browser's own focus return. Focus left inside
+  // it, or dropped to the body by the removal, goes back to the opener.
+  useEffect(() => {
+    if (isInline) {
+      return;
+    }
+    const dialog = dialogRef.current;
+    // Read now: a removed iframe's document has no window, so its frame
+    // element can no longer be found once the dialog is gone.
+    const host = dialog?.ownerDocument.defaultView?.frameElement ?? null;
+    return () => {
+      const trigger = triggerElementRef.current;
+      if (dialog == null || trigger == null) {
+        return;
+      }
+      // Checked once the commit has finished: StrictMode's simulated unmount
+      // leaves the dialog in the document, and only a real removal returns
+      // focus.
+      queueMicrotask(() => {
+        if (dialog.isConnected || !trigger.isConnected) {
+          return;
+        }
+        // isFocusLost reads the dialog's own document. For a dialog in an
+        // iframe, the document that hosts the frame must also have lost focus
+        // or keep it on that frame, wherever the opener is: a control the
+        // user pressed outside the frame to remove the dialog, or the frame
+        // itself, keeps its focus.
+        if (isFocusLost(dialog) && (host == null || isFocusLost(host))) {
+          focusForLastInput(trigger);
+        }
+      });
+    };
+  }, [isInline]);
+
   // Host app-global surfaces (toasts) inside this modal while it is open, so
   // they stay visible and operable above it.
   useModalOutlet(dialogRef, isOpen && !isInline);
@@ -502,16 +539,13 @@ export function Dialog({
     }
   }, [isOpen, isInline, hasConsumerName, titleId]);
 
-  // Handle backdrop click — when the user clicks the ::backdrop pseudo-element,
-  // the event target is the <dialog> element itself; clicks on child content
-  // always target the child. This avoids false positives from native browser
+  // A press on the ::backdrop targets the <dialog> itself, so native browser
   // popups (date pickers, selects, color pickers) that render outside the
-  // dialog's bounding rect.
-  const handleClick = event => {
-    if (event.target === event.currentTarget && allowBackdropClick) {
-      onOpenChange(false);
-    }
-  };
+  // dialog's rect never count. The press must start and end there.
+  const handleBackdropPress = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const backdropPress = useBackdropPress(handleBackdropPress, allowBackdropClick);
 
   // The native `cancel` event is the browser's own close-watcher firing: an
   // Android back gesture, or a close request the stack never saw a press for.
@@ -602,8 +636,11 @@ export function Dialog({
     })(), isFullscreen && styles.fullscreen, isFullscreen && isOpen && styles.fullscreenOpen, opensSettled && styles.openSettled, xstyle), className, style),
     ...layerClickBoundary({
       ...safeProps,
-      onClick: chainEventHandlers(handleClick, onClickProp)
+      onClick: chainEventHandlers(backdropPress.onClick, onClickProp)
     }),
+    onPointerDownCapture: chainEventHandlers(backdropPress.onPointerDownCapture, safeProps.onPointerDownCapture),
+    onPointerUpCapture: chainEventHandlers(backdropPress.onPointerUpCapture, safeProps.onPointerUpCapture),
+    onPointerCancelCapture: chainEventHandlers(backdropPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
     onCancel: handleCancel,
     "aria-modal": isHydrating ? undefined : 'true'
     // The default aria-labelledby (from a DialogHeader title) is set

package/dist/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAkB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA6MzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAyMb;yBA3Ne,MAAM"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAoB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA+MzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAsNb;yBAxOe,MAAM"}

package/dist/Drawer/Drawer.js

@@ -70,13 +70,15 @@ import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
 import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
 import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
 import { useModalOutlet } from "../Layer/modalOutlet.js";
+import { useBackdropPress } from "../Layer/useBackdropPress.js";
 import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
+import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { container, overlayPaddingReset } from "../Layout/index.js";
 import { containerPaddingBlockEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingInlineVarStyles, paddingStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
 import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
-
+import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -84,7 +86,6 @@ import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
 // Below this viewport width the drawer preserves a fixed reveal of the page
 // behind instead of growing proportionally with the viewport. 640px is the
 // repo's mobile breakpoint.
-import { jsx as _jsx } from "react/jsx-runtime";
 const MOBILE_BREAKPOINT = 640;
 
 // Material's established mobile drawer pattern leaves a 56dp reveal. Using
@@ -347,13 +348,12 @@ export function Drawer({
     }
   }, [allowEscape, handleDismiss, shouldDismissOnCloseRequest]);
 
-  // Clicks on the ::backdrop target the <dialog> element itself; clicks on
-  // drawer content always target a child (the content area fills the panel).
-  const handleClick = useCallback(event => {
-    if (event.target === event.currentTarget && hasScrim && allowScrimClick) {
-      onOpenChange(false);
-    }
-  }, [allowScrimClick, hasScrim, onOpenChange]);
+  // A press on the ::backdrop targets the <dialog> itself (the content area
+  // fills the panel). The press must start and end there.
+  const handleScrimPress = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const scrimPress = useBackdropPress(handleScrimPress, hasScrim && allowScrimClick);
   const widthValue = typeof width === 'number' ? `${width}px` : width;
   const isFullWidthOnMobile = experimental?.isFullWidthOnMobile ?? false;
   const mobileWidth = isFullWidthOnMobile ? MOBILE_WIDTH_FULL : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
@@ -391,8 +391,13 @@ export function Drawer({
     } : undefined),
     ...layerClickBoundary({
       ...safeProps,
-      onClick: composeEventHandlers(onClickProp, handleClick)
+      onClick: composeEventHandlers(onClickProp, scrimPress.onClick)
     }),
+    // The hook records where the press started first. The caller's capture
+    // handler then runs, also when a child prevented default.
+    onPointerDownCapture: chainEventHandlers(scrimPress.onPointerDownCapture, safeProps.onPointerDownCapture),
+    onPointerUpCapture: chainEventHandlers(scrimPress.onPointerUpCapture, safeProps.onPointerUpCapture),
+    onPointerCancelCapture: chainEventHandlers(scrimPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
     onKeyDown: onKeyDownProp,
     onCancel: handleCancel,
     children: /*#__PURE__*/_jsx(ModalAnnounceProvider, {

package/dist/Drawer/useDrawerDialogPresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAaf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AAuDF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}
+{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAcf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AA0DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}

package/dist/Drawer/useDrawerDialogPresence.js

@@ -25,6 +25,7 @@
  */
 import { useEffect, useRef } from 'react';
 import { flushSync } from 'react-dom';
+import { notifyTopLayerEntry } from "../Layer/modalOutlet.js";
 
 /** Slack past the computed transition before the backstop gives up waiting. */
 const EXIT_BACKSTOP_BUFFER_MS = 50;
@@ -51,6 +52,9 @@ function showDrawerHost(dialog, isModal) {
     dialog.showModal();
   } else if (typeof dialog.showPopover === 'function') {
     dialog.showPopover();
+    // The drawer is now the newest top-layer entry: global hosts shown before
+    // it (the toast viewport) re-enter above it, as they do above a modal.
+    notifyTopLayerEntry();
   } else {
     // Reduced fallback for browsers below the Popover API support floor.
     dialog.show();

package/dist/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAKnD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AA+B9D,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAS1C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAStE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2L5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACnB,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,aAAa,GACb,YAAY,GACZ,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,KAAK,CACR;IACC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAMvE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACvC,yEAAyE;IACzE,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,eAAe,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AA+tCpD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA4CpD;yBA5Ce,YAAY"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -279,6 +279,15 @@ function holdInvokerThroughPress(control, popoverId) {
   doc.addEventListener('pointerup', onPressEnd, true);
   doc.addEventListener('pointercancel', onPressEnd, true);
 }
+
+/**
+ * The name of a menu opened from a custom trigger: the caller's `aria-label`
+ * when it is a non-empty string, else the trigger's own accessible name. The
+ * popover and the bottom sheet both name the menu through this.
+ */
+function resolveCustomTriggerMenuName(callerLabel, triggerName) {
+  return typeof callerLabel === 'string' && callerLabel.trim() !== '' ? callerLabel : triggerName;
+}
 function DropdownMenuBottomSheet({
   button: buttonFromProps,
   renderTrigger,
@@ -340,10 +349,18 @@ function DropdownMenuBottomSheet({
   useEffect(() => {
     void preloadMenuBottomSheetActionList();
   }, []);
+  // The control's name is only readable from the DOM once it is rendered.
+  const [triggerName, setTriggerName] = useState(undefined);
+  useIsomorphicLayoutEffect(() => {
+    if (renderTrigger != null && isOpen) {
+      setTriggerName(readAccessibleName(buttonRef.current));
+    }
+  }, [renderTrigger, isOpen]);
+  const rootTitle = (renderTrigger != null ? resolveCustomTriggerMenuName(rest['aria-label'], triggerName) : undefined) ?? button.label;
   const currentSubmenu = submenuPath.at(-1);
   const currentItems = currentSubmenu?.items ?? items;
-  const currentTitle = currentSubmenu?.label ?? button.label;
-  const sheetLabel = typeof currentTitle === 'string' ? currentTitle : button.label;
+  const currentTitle = currentSubmenu?.label ?? rootTitle;
+  const sheetLabel = typeof currentTitle === 'string' ? currentTitle : rootTitle;
   const setOpen = useCallback(nextIsOpen => {
     if (!nextIsOpen) {
       setSubmenuPath([]);
@@ -734,8 +751,7 @@ function DropdownMenuPopover({
   // The design system's button names the menu by its label. A custom trigger
   // names it by reference (or the caller's `aria-label` does), so that name
   // is read off the control as the menu opens.
-  const callerMenuLabel = rest['aria-label'];
-  const menuLabel = renderTrigger != null ? typeof callerMenuLabel === 'string' && callerMenuLabel.trim() !== '' ? callerMenuLabel : triggerName : typeof button.label === 'string' ? button.label : undefined;
+  const menuLabel = renderTrigger != null ? resolveCustomTriggerMenuName(rest['aria-label'], triggerName) : typeof button.label === 'string' ? button.label : undefined;
   const popover = usePopover({
     onHide: handleLayerHide,
     onShow: handleLayerShow,

package/dist/InfoTip/InfoTip.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @file InfoTip.tsx
+ * @input Uses React, StyleX, Tooltip, Icon, useComponentTranslator, the shared
+ *   touch hit area, color/spacing/radius/duration/ease tokens
+ * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
+ * @position Core implementation; consumed by index.ts, tested by
+ *   InfoTip.test.tsx; `@astryxdesign/lab` re-exports it, deprecated
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InfoTip/InfoTip.doc.mjs (props table, features)
+ * - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
+ * - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/InfoTip/index.ts (exports if types change)
+ */
+import { type ReactNode, type Ref } from 'react';
+import type { BaseProps } from '../BaseProps.js';
+import { type IconSize } from '../Icon/Icon.js';
+/**
+ * Size of the info icon. Maps 1:1 to Icon sizes
+ * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
+ */
+export type InfoTipSize = IconSize;
+export interface InfoTipProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+    /** Ref forwarded to the info button. */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * The help the button reveals. Short, noninteractive text; for links or
+     * buttons, use HoverCard.
+     */
+    content: ReactNode;
+    /**
+     * Accessible name of the button.
+     * @default A translated "More information"
+     */
+    label?: string;
+    /**
+     * Size of the info icon.
+     * @default 'sm'
+     */
+    size?: InfoTipSize;
+}
+/**
+ * An info icon that reveals help: a small "i" button. Hover and keyboard
+ * focus preview the help. A click, tap, Enter, or Space pins it open until
+ * Escape, a second press, a press outside, or focus leaving. Use it next to
+ * labels, values, and metrics for permission notes, metric definitions, and
+ * field help.
+ *
+ * InfoTip is Tooltip with `triggerBehavior="toggle"` on a named button: Tooltip
+ * opens, pins, announces, and closes the help. The info icon resolves from
+ * the icon registry, so themes can replace it.
+ *
+ * @example
+ * ```
+ * <InfoTip content="Editors can change this field; viewers cannot." />
+ * <InfoTip content="30-day rolling average." label="About this metric" />
+ * ```
+ */
+export declare function InfoTip({ content, label, size, ref, xstyle, className, style, }: InfoTipProps): ReactNode;
+export declare namespace InfoTip {
+    var displayName: string;
+}
+//# sourceMappingURL=InfoTip.d.ts.map

package/dist/InfoTip/InfoTip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,cAAc,CAAC;AAoBjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AA8CD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,IAAW,EACX,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,GAAG,SAAS,CAyC1B;yBAjDe,OAAO"}

package/dist/InfoTip/InfoTip.js

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip.tsx
+ * @input Uses React, StyleX, Tooltip, Icon, useComponentTranslator, the shared
+ *   touch hit area, color/spacing/radius/duration/ease tokens
+ * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
+ * @position Core implementation; consumed by index.ts, tested by
+ *   InfoTip.test.tsx; `@astryxdesign/lab` re-exports it, deprecated
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InfoTip/InfoTip.doc.mjs (props table, features)
+ * - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
+ * - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/InfoTip/index.ts (exports if types change)
+ */
+import { useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { Icon } from "../Icon/Icon.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/InfoTip/InfoTip.generated.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { mergeProps } from "../utils/mergeProps.js";
+import { watchHitArea, writeHitInsets } from "../utils/hitArea.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+registerEnglishFallback(english);
+
+/**
+ * Size of the info icon. Maps 1:1 to Icon sizes
+ * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
+ */
+
+const styles = {
+  trigger: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kXLuUW: "xxymvpz",
+    kmVPX3: "x12nba7r",
+    kogj98: "x1ghz6dp",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kaIpWk: "xjspbzw",
+    kkrTdU: "x1ypdohk x16khyan",
+    kMwMTN: "xv9yike x10ue8fs",
+    k1ekBW: "xt3l3uh",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  hitArea: {
+    k5JduY: "x1s928wv",
+    kwXMNM: "x1j6awrg",
+    kv0HGH: "xzdy5ak",
+    $$css: true
+  }
+};
+
+/**
+ * An info icon that reveals help: a small "i" button. Hover and keyboard
+ * focus preview the help. A click, tap, Enter, or Space pins it open until
+ * Escape, a second press, a press outside, or focus leaving. Use it next to
+ * labels, values, and metrics for permission notes, metric definitions, and
+ * field help.
+ *
+ * InfoTip is Tooltip with `triggerBehavior="toggle"` on a named button: Tooltip
+ * opens, pins, announces, and closes the help. The info icon resolves from
+ * the icon registry, so themes can replace it.
+ *
+ * @example
+ * ```
+ * <InfoTip content="Editors can change this field; viewers cannot." />
+ * <InfoTip content="30-day rolling average." label="About this metric" />
+ * ```
+ */
+export function InfoTip({
+  content,
+  label,
+  size = 'sm',
+  ref,
+  xstyle,
+  className,
+  style
+}) {
+  const t = useComponentTranslator();
+  // Under a coarse pointer the button takes taps out toward 44 px. The watch
+  // lives as long as the button is attached: the ref's cleanup stops it, and a
+  // replaced button starts its own.
+  const watchButtonHitArea = useCallback(button => {
+    if (button == null) {
+      return;
+    }
+    return watchHitArea(button, insets => writeHitInsets(button, insets));
+  }, []);
+  const mergedRef = useMergedRefs(ref, watchButtonHitArea);
+
+  // No Escape handler of its own. Tooltip's entry in the shared dismissal
+  // stack takes Escape, so one press never closes both the help and an
+  // enclosing Dialog.
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: content
+    // The tooltip is the button's only purpose. A click, a tap, Enter, or
+    // Space pins it open, and the press stops at the button. So an InfoTip's
+    // content is reachable on a phone and from the keyboard alike.
+    ,
+    triggerBehavior: "toggle",
+    children: /*#__PURE__*/_jsx("button", {
+      ref: mergedRef,
+      type: "button",
+      "aria-label": label ?? t('@astryx.infoTip.label'),
+      ...mergeProps(stylex.props(focusOutlineStyles.focusVisible, styles.trigger, styles.hitArea, xstyle), className, style),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "info",
+        size: size
+      })
+    })
+  });
+}
+InfoTip.displayName = 'InfoTip';

package/dist/InfoTip/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @file InfoTip component barrel export
+ * @input InfoTip.tsx
+ * @output Exports InfoTip, InfoTipProps, InfoTipSize
+ * @position Barrel; consumed by packages/core/src/index.ts and the
+ *   `@astryxdesign/core/InfoTip` entry
+ */
+export { InfoTip } from './InfoTip.js';
+export type { InfoTipProps, InfoTipSize } from './InfoTip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/InfoTip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InfoTip/index.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,WAAW,CAAC"}

package/dist/InfoTip/index.js

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip component barrel export
+ * @input InfoTip.tsx
+ * @output Exports InfoTip, InfoTipProps, InfoTipSize
+ * @position Barrel; consumed by packages/core/src/index.ts and the
+ *   `@astryxdesign/core/InfoTip` entry
+ */
+export { InfoTip } from "./InfoTip.js";

package/dist/Layer/layerClickBoundary.d.ts

@@ -2,7 +2,7 @@
  * @file layerClickBoundary.ts
  * @input React pointer, mouse, touch and click events on a layer root
  * @output Exports layerClickBoundary, the props every layer content root
- *   spreads, including the layer-root mark
+ *   spreads, including the layer-root mark; also stopInReactTree
  * @position Internal to Layer; used by useLayer's renderers and the Dialog,
  *   Drawer, Lightbox, MobileNav, BottomSheetPanel and ToastViewport roots.
  *   Not exported from the package.
@@ -21,6 +21,12 @@ declare const BOUNDARY_EVENTS: readonly ["onClick", "onAuxClick", "onDoubleClick
 type BoundaryEvent = (typeof BOUNDARY_EVENTS)[number];
 type Handler = (event: SyntheticEvent) => void;
 export type LayerClickBoundaryProps = Record<BoundaryEvent, Handler> & Readonly<Record<`data-${string}`, string>>;
+/**
+ * Stop a synthetic event at this element for the rest of the React tree only.
+ * React's dispatch asks `isPropagationStopped()` before each further
+ * listener; the native event is left alone.
+ */
+export declare function stopInReactTree(event: SyntheticEvent): void;
 /**
  * The boundary props for a layer content root. Pass the root's own props
  * (its caller's rest props and its own handlers): for each boundary event, a

package/dist/Layer/layerClickBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layerClickBoundary.d.ts","sourceRoot":"","sources":["../../src/Layer/layerClickBoundary.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,uDAAuD;AACvD,QAAA,MAAM,eAAe,gWAsBX,CAAC;AAEX,KAAK,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAE/C,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,GAClE,QAAQ,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;AAa7C;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,GAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM,GAC1C,uBAAuB,CAkBzB"}
+{"version":3,"file":"layerClickBoundary.d.ts","sourceRoot":"","sources":["../../src/Layer/layerClickBoundary.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,uDAAuD;AACvD,QAAA,MAAM,eAAe,gWAsBX,CAAC;AAEX,KAAK,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AACtD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;AAE/C,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,GAClE,QAAQ,CAAC,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;AAI7C;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAE3D;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,GAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM,GAC1C,uBAAuB,CAkBzB"}

package/dist/Layer/layerClickBoundary.js

@@ -6,7 +6,7 @@
  * @file layerClickBoundary.ts
  * @input React pointer, mouse, touch and click events on a layer root
  * @output Exports layerClickBoundary, the props every layer content root
- *   spreads, including the layer-root mark
+ *   spreads, including the layer-root mark; also stopInReactTree
  * @position Internal to Layer; used by useLayer's renderers and the Dialog,
  *   Drawer, Lightbox, MobileNav, BottomSheetPanel and ToastViewport roots.
  *   Not exported from the package.
@@ -30,7 +30,7 @@ const returnTrue = () => true;
  * React's dispatch asks `isPropagationStopped()` before each further
  * listener; the native event is left alone.
  */
-function stopInReactTree(event) {
+export function stopInReactTree(event) {
   event.isPropagationStopped = returnTrue;
 }
 

package/dist/Layer/useBackdropPress.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file useBackdropPress.ts
+ * @input A modal layer's backdrop dismissal and whether it is allowed now
+ * @output Capture-phase pointer handlers and a click handler for the layer's
+ *   <dialog> root
+ * @position Shared backdrop-press rule for Dialog and Drawer
+ */
+import { type PointerEvent, type MouseEvent } from 'react';
+export interface BackdropPressHandlers {
+    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => void;
+    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => void;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+}
+/**
+ * A press on a modal layer's backdrop targets the <dialog> root itself. A
+ * click there is also what the browser sends when a press starts on one side
+ * of the layer's edge and ends on the other (it goes to the nearest common
+ * ancestor), so a backdrop press dismisses only when its pointer-down and its
+ * pointer-up both landed on the backdrop. A cancelled pointer ends the press.
+ *
+ * The pointer handlers run in the capture phase. A nested layer, such as a
+ * popover open in the dialog, stops its presses at its own root, so a
+ * bubble-phase handler here does not see them.
+ */
+export declare function useBackdropPress(onBackdropPress: () => void, isEnabled: boolean): BackdropPressHandlers;
+//# sourceMappingURL=useBackdropPress.d.ts.map

package/dist/Layer/useBackdropPress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBackdropPress.d.ts","sourceRoot":"","sources":["../../src/Layer/useBackdropPress.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAE9E,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,eAAe,EAAE,MAAM,IAAI,EAC3B,SAAS,EAAE,OAAO,GACjB,qBAAqB,CA6CvB"}

package/dist/Layer/useBackdropPress.js

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useBackdropPress.ts
+ * @input A modal layer's backdrop dismissal and whether it is allowed now
+ * @output Capture-phase pointer handlers and a click handler for the layer's
+ *   <dialog> root
+ * @position Shared backdrop-press rule for Dialog and Drawer
+ */
+import { useCallback, useRef } from 'react';
+/**
+ * A press on a modal layer's backdrop targets the <dialog> root itself. A
+ * click there is also what the browser sends when a press starts on one side
+ * of the layer's edge and ends on the other (it goes to the nearest common
+ * ancestor), so a backdrop press dismisses only when its pointer-down and its
+ * pointer-up both landed on the backdrop. A cancelled pointer ends the press.
+ *
+ * The pointer handlers run in the capture phase. A nested layer, such as a
+ * popover open in the dialog, stops its presses at its own root, so a
+ * bubble-phase handler here does not see them.
+ */
+export function useBackdropPress(onBackdropPress, isEnabled) {
+  const startedOnBackdropRef = useRef(false);
+  const endedOnBackdropRef = useRef(false);
+  const onPointerDownCapture = useCallback(event => {
+    startedOnBackdropRef.current = event.target === event.currentTarget;
+    endedOnBackdropRef.current = false;
+  }, []);
+  const onPointerUpCapture = useCallback(event => {
+    endedOnBackdropRef.current = startedOnBackdropRef.current && event.target === event.currentTarget;
+    startedOnBackdropRef.current = false;
+  }, []);
+  const onPointerCancelCapture = useCallback(() => {
+    startedOnBackdropRef.current = false;
+    endedOnBackdropRef.current = false;
+  }, []);
+  const onClick = useCallback(event => {
+    const pressWasOnBackdrop = endedOnBackdropRef.current;
+    startedOnBackdropRef.current = false;
+    endedOnBackdropRef.current = false;
+    if (isEnabled && pressWasOnBackdrop && event.target === event.currentTarget) {
+      onBackdropPress();
+    }
+  }, [isEnabled, onBackdropPress]);
+  return {
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onPointerCancelCapture,
+    onClick
+  };
+}