@astryxdesign/core 0.7.8 → 0.7.9-canary.3b44b43

package/dist/Item/Item.js

@@ -4,7 +4,8 @@
 
 /**
  * @file Item.tsx
- * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, useClickableContainer,
+ *   the shared press overlays and the compositor press layer
  * @output Exports Item component, ItemProps type; publishes the shared inline inset.
  *   Only numbered composing rows keep their start/label/end slots in one flex
  *   group, through Item's private exact-marker scope; other marked rows keep
@@ -34,17 +35,19 @@ import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { isRenderable } from "../utils/isRenderable.js";
 import { mergeProps } from "../utils/mergeProps.js";
+import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { useFocusAcrossSwap } from "../utils/useFocusAcrossSwap.js";
 import { ItemDescriptionContext } from "./ItemDescriptionContext.js";
 import { ItemMarkerColumnsContext } from "./ItemMarkerColumnsContext.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { computeTargetAndRel } from "../Link/computeTargetAndRel.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
-import { useClickableContainer } from "../hooks/useClickableContainer.js";
+import { cancelNestedTouchPress, useClickableContainer } from "../hooks/useClickableContainer.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
+import { rowPressLayerStyles } from "../privateAttributes/press.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // The gesture and the panels, loaded only by a row that has swipe actions: a
@@ -190,7 +193,6 @@ const styles = {
     $$css: true
   },
   swipeRoot: {
-    kHBbk8: "xc8icb0",
     kFalU9: "xge0x1e",
     k3aq6I: "x1kncwj0",
     k1ekBW: "xuo13n2",
@@ -281,7 +283,11 @@ export function Item({
   // the router link component, which may require a live href. The element type
   // then changes with `isDisabled`, so focus follows the swap (FR4).
   const RowAnchor = isDisabled ? 'a' : LinkComponent;
-  const anchorRef = useFocusAcrossSwap();
+  // The row's own action, its invisible link or button: a press on it
+  // activates the row.
+  const actionLinkRef = useRef(null);
+  const actionButtonRef = useRef(null);
+  const anchorRef = useFocusAcrossSwap(actionLinkRef);
 
   // Delegation mode: the row is an enlarged click/tap target for a nested
   // control (e.g. a checkbox) that owns the keyboard access and action. The
@@ -291,7 +297,8 @@ export function Item({
   // Only onClick is needed: onMouseUp handles middle-click href navigation,
   // which delegation mode never has (href is ignored here).
   const {
-    onClick: delegatedOnClick
+    onClick: delegatedOnClick,
+    onPointerDown: delegatedOnPointerDown
   } = useClickableContainer({
     containerRef,
     interactiveRef: interactiveRef ?? undefined,
@@ -311,6 +318,12 @@ export function Item({
   // component means the root itself is the anchor, so the address rides it
   // and the invisible anchor below is not rendered.
   const isLinkRoot = typeof Component !== 'string' && href != null;
+  // A press on a nested control does not run this row's action, so the row
+  // shows no touch press. A row with a parent role or a link root runs it, so
+  // it keeps the press. Such a row is not a clickable container: an enclosing
+  // card still treats it as part of its own surface.
+  const hasOwnAction = (onClick != null || href != null) && !hasParentRole && !isLinkRoot;
+  const pressOnRow = event => cancelNestedTouchPress(event, event.currentTarget, href != null ? actionLinkRef.current : actionButtonRef.current);
 
   // Swipe actions exist where the row's role permits interactive descendants
   // (a swipe panel's buttons are such descendants): a `listitem`, or no role
@@ -434,6 +447,7 @@ export function Item({
       }[!!isInline << 1 | !!isDisabled << 0],
       children: labelAndDescription
     }) : onClick != null ? /*#__PURE__*/_jsx("button", {
+      ref: actionButtonRef,
       type: "button",
       onClick: onClick,
       disabled: isDisabled,
@@ -517,6 +531,11 @@ export function Item({
     ...restProps,
     ...swipeHandlers,
     ...linkRootProps,
+    ...(isDelegate ? {
+      onPointerDown: chainEventHandlers(restProps.onPointerDown, delegatedOnPointerDown)
+    } : hasOwnAction && !isDisabled ? {
+      onPointerDown: chainEventHandlers(swipeHandlers?.onPointerDown ?? restProps.onPointerDown, pressOnRow)
+    } : null),
     "aria-selected": allowsAriaSelected && isSelected || undefined
     // aria-selected is invalid on roles that don't permit it (listitem, a
     // bare div, etc.). For those, convey selection via aria-current — valid
@@ -529,7 +548,11 @@ export function Item({
     ...mergeProps(themeProps('item', {
       density,
       align
-    }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
+    }), focusOutlineProps.focusWithin(styles.root, densityStyles[density], align === 'start' && styles.alignStart, align === 'first-line' && styles.alignFirstLine, isInteractive && styles.interactive, isInteractive && interactionOverlayStyles.backgroundColor,
+    // The touch press on a compositor layer (after the overlay, whose
+    // own touch paint it turns off): the release keeps fading while
+    // script runs.
+    isInteractive && rowPressLayerStyles.cell, isLinkRoot && styles.linkRoot, isHighlighted && styles.highlighted, isSelected && styles.selected, isDisabled && !hasParentRole && styles.disabled, hasSwipe && styles.swipeRoot, xstyle), className, style),
     role: role,
     onClick: rootOnClick,
     children: [/*#__PURE__*/_jsxs(ItemDescriptionContext, {

package/dist/Layer/holdEntranceInput.d.ts

@@ -0,0 +1,24 @@
+/** Options for {@link holdEntranceInput}. */
+export interface EntranceHoldOptions {
+    /**
+     * Holds input anywhere while true. While false, only what lands on the layer
+     * is held, and the page stays live.
+     * @default true
+     */
+    isModal?: boolean;
+    /**
+     * The element whose animations are the entrance, when it is not the layer
+     * itself (a drawer inside its dialog).
+     * @default the layer
+     */
+    entrance?: Element | null;
+    /** The longest the hold lasts, ms. An entrance that runs longer ends it. */
+    capMs?: number;
+}
+/**
+ * Holds a finger's and a pen's input away from `layer` until its entrance
+ * ends, or at most `capMs`. Returns the release, or `null` when nothing is
+ * held: no entrance runs, or the primary pointer is fine.
+ */
+export declare function holdEntranceInput(layer: Element, { isModal, entrance: animated, capMs }?: EntranceHoldOptions): (() => void) | null;
+//# sourceMappingURL=holdEntranceInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"holdEntranceInput.d.ts","sourceRoot":"","sources":["../../src/Layer/holdEntranceInput.ts"],"names":[],"mappings":"AAmBA,6CAA6C;AAC7C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,EACd,EAAC,OAAc,EAAE,QAAQ,EAAE,QAAgB,EAAE,KAAK,EAAC,GAAE,mBAAwB,GAC5E,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAuBrB"}

package/dist/Layer/holdEntranceInput.js

@@ -0,0 +1,65 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file holdEntranceInput.ts
+ * @input A layer root whose CSS entrance has just started
+ * @output holdEntranceInput: under a coarse primary pointer, a finger's or a
+ *   pen's input held away from the layer until its entrance ends
+ * @position The entrance hold for layers that enter through CSS (Dialog,
+ *   Drawer, MobileNav), on the Layer module's input hold (inputHold.ts)
+ *
+ * SYNC: When modified, update holdEntranceInput.test.ts and its callers
+ * (Dialog.tsx, Drawer/useDrawerDialogPresence.ts, MobileNav/MobileNav.tsx).
+ */
+import { isCoarsePointer } from "../utils/coarsePointer.js";
+import { holdInput } from "./inputHold.js";
+
+/** Options for {@link holdEntranceInput}. */
+
+/**
+ * Holds a finger's and a pen's input away from `layer` until its entrance
+ * ends, or at most `capMs`. Returns the release, or `null` when nothing is
+ * held: no entrance runs, or the primary pointer is fine.
+ */
+export function holdEntranceInput(layer, {
+  isModal = true,
+  entrance: animated = layer,
+  capMs
+} = {}) {
+  if (animated == null || typeof animated.getAnimations !== 'function') {
+    return null;
+  }
+  // getAnimations() flushes styles, so it lists an entrance the open has just
+  // started. A theme's duration, a shorter reduced-motion entrance and a
+  // canceled entrance all end the hold when they end.
+  const entrance = animated.getAnimations().filter(isEntrance);
+  if (entrance.length === 0) {
+    return null;
+  }
+  // A touch presentation only, read as the layer opens. A finger on a device
+  // whose primary pointer is fine, such as a touchscreen laptop, is not held.
+  if (!isCoarsePointer(layer.ownerDocument.defaultView)) {
+    return null;
+  }
+  const ended = Promise.all(entrance.map(async animation => animation.finished));
+  return holdInput(layer, {
+    until: capMs == null ? ended : Promise.race([ended, after(capMs)]),
+    scope: isModal ? 'viewport' : 'surface'
+  });
+}
+async function after(ms) {
+  await new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
+}
+
+/** A running animation that ends on its own: an entrance, not a spin. */
+function isEntrance(animation) {
+  if (animation.playState !== 'running') {
+    return false;
+  }
+  const end = animation.effect?.getComputedTiming().endTime;
+  return typeof end === 'number' && Number.isFinite(end);
+}

package/dist/Layer/inputHold.d.ts

@@ -0,0 +1,49 @@
+/**
+ * What a hold does. `'viewport'` and `'layer'` add one shield over the whole
+ * viewport. `'layer'` also makes the layer's content inert and moves focus
+ * out of it. `'surface'` shields only the layer's own box, and the page
+ * around it stays live.
+ */
+export type InputHoldScope = 'viewport' | 'layer' | 'surface';
+/** What ends a hold: a promise, or an animator handle (its `finished`). */
+export type InputHoldEnd = PromiseLike<unknown> | {
+    readonly finished: PromiseLike<unknown>;
+};
+export interface InputHoldOptions {
+    /** The hold ends when this settles. */
+    until: InputHoldEnd;
+    /**
+     * `'viewport'` while presenting, `'layer'` while dismissing, `'surface'`
+     * while a non-modal layer presents.
+     */
+    scope: InputHoldScope;
+}
+/**
+ * Whether `node` is the shield of a live hold. A hit test that must see past
+ * held input takes the first element of `elementsFromPoint` that is not one.
+ */
+export declare function isInputShield(node: Node | null): boolean;
+/**
+ * Whether `target` is inside a held layer. It walks the flat tree as the
+ * gesture host does: a slotted node goes to its slot, and a shadow root to
+ * its host.
+ */
+export declare function isInHeldLayer(target: Node | null): boolean;
+/**
+ * Whether the gesture host holds `target` away for the current pointer. A
+ * dismissing layer holds every pointer. A presenting layer holds every
+ * pointer but a mouse, which keeps today's behavior. The host asks this for
+ * every touch. So this module imports nothing from gestures/, and a
+ * root-entry component can hold its layer without gesture code. With nothing
+ * held, this answers false.
+ */
+export declare function holdsTouch(target: Node): boolean;
+/**
+ * Holds input away from `layer` until `until` settles. Returns the release
+ * (idempotent), for a hold that ends early. Holds on one layer stack, and
+ * the layer comes back when the last one ends. Each event is judged by its
+ * own pointer, never by the primary pointer. So a mouse on a touch screen
+ * keeps its clicks during a presentation.
+ */
+export declare function holdInput(layer: Element, { until, scope }: InputHoldOptions): () => void;
+//# sourceMappingURL=inputHold.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputHold.d.ts","sourceRoot":"","sources":["../../src/Layer/inputHold.ts"],"names":[],"mappings":"AAwBA;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,2EAA2E;AAC3E,MAAM,MAAM,YAAY,GACtB,WAAW,CAAC,OAAO,CAAC,GAAG;IAAC,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;CAAC,CAAC;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,KAAK,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,KAAK,EAAE,cAAc,CAAC;CACvB;AAsCD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAExD;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,OAAO,CAW1D;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,IAAI,GAAG,OAAO,CAyBhD;AAwHD;;;;;;GAMG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,EAAC,KAAK,EAAE,KAAK,EAAC,EAAE,gBAAgB,GAC/B,MAAM,IAAI,CA+EZ"}