@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.58c5b8a

package/dist/Layer/layerAnimations.stylex.js

@@ -2,7 +2,8 @@
 
 /**
  * @file layerAnimations.stylex.ts
- * @input Uses StyleX, theme duration/easing tokens
+ * @input Uses StyleX, theme duration/easing tokens, the Reduce Motion fade
+ *   constants
  * @output Exports shared entry animation styles for layer-based components
  * @position Shared animation primitives; consumed by DropdownMenu, Popover,
  *   HoverCard, Tooltip, Selector, and any component using useLayer
@@ -27,6 +28,8 @@
  */
 
 import * as stylex from '@stylexjs/stylex';
+import "../motion/reducedMotion.stylex.js";
+import { reducedMotionFadeConsts } from "../motion/reducedMotion.stylex.js";
 import "../theme/tokens.stylex.js";
 import { durationVars, easeVars, spacingVars } from "../theme/tokens.stylex.js";
 const enterBelow = "xv1hr86-B";
@@ -44,13 +47,17 @@ const enterStartRtl = "xwmkjkf-B";
 
 // Reduce Motion under a finger: the same entrance without its travel. A touch
 // presentation substitutes a cross-fade for motion, never a jump.
-const fadeIn = "x18re5ia-B";
+// The fade's curve rides in its first keyframe, so the published class type
+// of `animationTimingFunction` stays the theme ease's.
+const fadeIn = "x12p7u8f-B";
+
+// No theme value lengthens the Reduce Motion fade, so its values are constants.
+// The media keys stay literal: StyleX gives an imported at-rule key a later
+// priority layer (see reducedMotionKeys).
 const animationBase = {
   animationDuration: {
     default: durationVars['--duration-fast-max'],
-    // The cross-fade is 200 ms or less, whatever the theme's duration
-    // (design:reduced-motion DR2).
-    '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': `min(${durationVars['--duration-fast-max']}, 200ms)`
+    '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': reducedMotionFadeConsts.duration
   },
   animationTimingFunction: easeVars['--ease-standard'],
   animationFillMode: 'backwards'
@@ -62,39 +69,37 @@ const animationBase = {
  * Keyed by LayerPlacement ('above' | 'below' | 'start' | 'end')
  * for easy lookup: `layerAnimations[placement]`.
  *
- * Each entry disables its keyframe animation under
- * `prefers-reduced-motion: reduce` so the layer appears instantly instead of
- * translating/scaling in (infra-6). Under a finger (the primary pointer is
- * coarse) it fades in instead, opacity only and in 200 ms or less: on a touch
- * screen Reduce Motion replaces motion with a cross-fade rather than a jump
- * (design:reduced-motion DR2, DR3), as iOS does for its menus, popovers and
- * tips.
+ * Under `prefers-reduced-motion: reduce` each entry drops its travel and
+ * scale. Under a finger (the primary pointer is coarse) the layer fades in,
+ * opacity only, in 200 ms on easeInOut: on a touch screen Reduce Motion
+ * replaces motion with a cross-fade rather than a jump; under any other
+ * pointer it appears at once.
  */
 export const layerAnimations = {
   below: {
-    kKVMdj: "xl1vlw0 xa4pr1u xajy0lc",
-    k44tkh: "x9uej1z x13pi3j7",
+    kKVMdj: "xl1vlw0 x2g3n7u xaqowwx",
+    k44tkh: "x9uej1z x10got5w",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",
     $$css: true
   },
   above: {
-    kKVMdj: "x3psbcj xa4pr1u xajy0lc",
-    k44tkh: "x9uej1z x13pi3j7",
+    kKVMdj: "x3psbcj x2g3n7u xaqowwx",
+    k44tkh: "x9uej1z x10got5w",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",
     $$css: true
   },
   end: {
-    kKVMdj: "x1i331go x1vxsm5i xa4pr1u xajy0lc",
-    k44tkh: "x9uej1z x13pi3j7",
+    kKVMdj: "x1i331go x1vxsm5i x2g3n7u xaqowwx",
+    k44tkh: "x9uej1z x10got5w",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",
     $$css: true
   },
   start: {
-    kKVMdj: "xck01x9 x18lne9g xa4pr1u xajy0lc",
-    k44tkh: "x9uej1z x13pi3j7",
+    kKVMdj: "xck01x9 x18lne9g x2g3n7u xaqowwx",
+    k44tkh: "x9uej1z x10got5w",
     kyAemX: "x128ha8g",
     kWV6AL: "xskzprw",
     $$css: true

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
+  };
+}

package/dist/Layer/usePressPin.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @file usePressPin.ts
+ * @input A hover layer's trigger, open state, show and hide, and its
+ *   `triggerBehavior` and `touchTrigger` options
+ * @output usePressPin, the press toggle that pins a hover layer open, and
+ *   the app hold behind useTooltip's show() and hide(); isPressPinTrigger;
+ *   stopPressPinClick; the LayerTriggerBehavior type
+ * @position Core-internal: one call per hover layer, useTooltip's. It owns
+ *   the layer's touch trigger, so the host makes no second touch-trigger call.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Tooltip/useTooltip.tsx
+ * - /packages/core/src/Layer/usePressPin.test.tsx
+ */
+import { type MouseEvent as ReactMouseEvent, type RefObject } from 'react';
+import { type LayerTouchTrigger, type UseTouchTriggerReturn } from './useTouchTrigger.js';
+/**
+ * How the trigger opens the layer. `adaptive`, the default, previews it on
+ * hover and focus, and `touchTrigger` decides taps. `toggle` pins it on every
+ * press of a button trigger. Internal: InfoTip's press-to-pin uses `toggle`.
+ */
+export type LayerTriggerBehavior = 'adaptive' | 'toggle';
+/**
+ * The layer component's wrapper handler. It stops a press that pinned or
+ * closed the layer in the React tree only, after the trigger's own handlers.
+ * No clickable row, card, or container around the trigger then receives it,
+ * and document and window listeners still do. An anchored trigger has no
+ * wrapper, so a plain `onClick` element around it still receives the press.
+ */
+export declare function stopPressPinClick(event: ReactMouseEvent): void;
+/** Whether presses on this element can pin a layer: a button, by role. */
+export declare function isPressPinTrigger(element: Element): boolean;
+export interface UsePressPinOptions {
+    /** The layer's `triggerBehavior`. */
+    triggerBehavior: LayerTriggerBehavior;
+    /** Whether the layer's triggers are live at all. */
+    isEnabled: boolean;
+    /** The controlled open value, or `undefined` when uncontrolled. */
+    isOpen: boolean | undefined;
+    /** Whether the layer shows now. */
+    isLayerOpen: boolean;
+    /** The layer surface's element id. */
+    layerId: string;
+    /** The component its development warning names. */
+    component: string;
+    /** Shows the layer now, with no delay. */
+    show: () => void;
+    /** Hides the layer now. */
+    hide: () => void;
+    /** Reports a controlled layer's toggled value without changing it. */
+    report: (isOpen: boolean) => void;
+    /** The layer's `label`: a press that pins the layer says it once, in place of its text. */
+    label?: string;
+    /** The layer's `touchTrigger`, which decides taps only under `adaptive`. */
+    touchTrigger: LayerTouchTrigger;
+    /** The host's trigger element, which the touch trigger reads. */
+    triggerRef: RefObject<HTMLElement | null>;
+}
+export interface UsePressPinReturn {
+    /** Whether presses on this trigger pin the layer: toggle mode and a button. */
+    isToggleTrigger: (element: HTMLElement | null) => boolean;
+    /**
+     * Whether a press holds the layer open now: a pin on a wired trigger while
+     * the layer shows, or a controlled layer's open value. The host's hover and
+     * focus hides ask it.
+     */
+    isHeldOpen: () => boolean;
+    /** Wires the trigger element, or unwires it with `null`. */
+    attach: (element: HTMLElement | null) => void;
+    /** Drops the pin and the app hold: Escape, or a hide from elsewhere. */
+    unpin: () => void;
+    /**
+     * The app's `show()`: shows the layer and holds it open, as a pin does,
+     * until `release`, Escape, a press outside, or focus leaving the trigger
+     * and the layer. A controlled layer reports the request instead.
+     */
+    hold: () => void;
+    /** The app's `hide()`: drops the hold and hides the layer. */
+    release: () => void;
+    /** Whether the app's `show()` holds the layer open now. */
+    isAppHeld: () => boolean;
+    /**
+     * While pinned, focus moving onto an element outside the trigger and the
+     * layer closes it. Returns whether the pin decided. The pin calls it for its
+     * trigger, and a host calls it for the layer's own content.
+     */
+    handleFocusLeave: (event: FocusEvent) => boolean;
+    /**
+     * Whether the layer shows pinned on a wired trigger, or held by the app's
+     * `show()`. The host then announces its rendered text, unless the layer has
+     * a `label`.
+     */
+    isPinShown: boolean;
+    /** The layer's touch trigger (useTouchTriggerInternal), wired to the pin. */
+    touch: Pick<UseTouchTriggerReturn, 'isTouchPointerRef' | 'isTouchInteraction' | 'handlePointerEnter' | 'handlePointerDown' | 'clearTapOpen'>;
+}
+/**
+ * Pins a hover layer open on a press of a button trigger, under
+ * `triggerBehavior="toggle"`. The same press closes it, and so do Escape, a
+ * press or scroll outside, and focus that leaves the trigger and the layer.
+ * The press stops at the trigger. A trigger that is not a button gets a
+ * development warning and keeps tap-only opening.
+ */
+export declare function usePressPin(options: UsePressPinOptions): UsePressPinReturn;
+//# sourceMappingURL=usePressPin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePressPin.d.ts","sourceRoot":"","sources":["../../src/Layer/usePressPin.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAKL,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAC;AAE3B;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,QAAQ,CAAC;AAKzD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAI9D;AAED,0EAA0E;AAC1E,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAM3D;AAED,MAAM,WAAW,kBAAkB;IACjC,qCAAqC;IACrC,eAAe,EAAE,oBAAoB,CAAC;IACtC,oDAAoD;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,mCAAmC;IACnC,WAAW,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,mDAAmD;IACnD,SAAS,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,sEAAsE;IACtE,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,YAAY,EAAE,iBAAiB,CAAC;IAChC,iEAAiE;IACjE,UAAU,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,iBAAiB;IAChC,+EAA+E;IAC/E,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;IAC1D;;;;OAIG;IACH,UAAU,EAAE,MAAM,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,wEAAwE;IACxE,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB;;;;OAIG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,2DAA2D;IAC3D,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,OAAO,CAAC;IACjD;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB,6EAA6E;IAC7E,KAAK,EAAE,IAAI,CACT,qBAAqB,EACnB,mBAAmB,GACnB,oBAAoB,GACpB,oBAAoB,GACpB,mBAAmB,GACnB,cAAc,CACjB,CAAC;CACH;AAwBD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,kBAAkB,GAAG,iBAAiB,CAqZ1E"}