@astryxdesign/core 0.7.8 → 0.7.9-canary.0a64fdb

package/src/TreeList/TreeListItem.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file TreeListItem.tsx
- * @input Uses React, StyleX, theme tokens, TreeListBranches
+ * @input Uses React, StyleX, theme tokens, TreeListBranches, the shared press
+ *   overlays and the compositor press layer
  * @output Exports TreeListItem component (internal, not publicly exported)
  * @position Internal implementation; consumed by TreeList.tsx
  *
@@ -27,8 +28,10 @@ import {
 } from '../theme/tokens.stylex';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
+import {rowPressLayerStyles} from '../privateAttributes/press.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import {
+  cancelNestedTouchPress,
   hasInteractiveAncestor,
   useClickableContainer,
 } from '../hooks/useClickableContainer';
@@ -485,6 +488,28 @@ export function TreeListItem({
     interactiveRef: linkRef,
     disabled: isDisabled || !forwardsToLink,
   });
+
+  // A finger press that starts on a control inside the row does not activate
+  // the row, so the row shows no press for it. The row's own action, its link
+  // or invisible button, activates it. The Chevron does too when the row's
+  // surface toggles, since it runs that same toggle.
+  const actionButtonRef = useRef<HTMLButtonElement>(null);
+  const chevronRef = useRef<HTMLButtonElement>(null);
+  const surfaceToggles = onClick == null && handleClick != null;
+  const pressOnRow = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (isDisabled) {
+      return;
+    }
+    const chevron = chevronRef.current;
+    const ownAction =
+      surfaceToggles &&
+      chevron != null &&
+      event.target instanceof Node &&
+      chevron.contains(event.target)
+        ? chevron
+        : (linkRef.current ?? actionButtonRef.current);
+    cancelNestedTouchPress(event, event.currentTarget, ownAction);
+  };
   const {onMouseUp: openLinkOnMiddleClick} = useClickableContainer({
     containerRef: linkRowRef,
     href,
@@ -566,6 +591,7 @@ export function TreeListItem({
       // focusable element to receive Enter/Space). The row's handleClick ignores
       // clicks originating inside a <button>, so this never double-toggles.
       <button
+        ref={chevronRef}
         type="button"
         aria-expanded={isExpanded}
         aria-label={t('@astryx.treeList.toggleChildren')}
@@ -642,6 +668,7 @@ export function TreeListItem({
         </LinkComponent>
       ) : onClick != null ? (
         <button
+          ref={actionButtonRef}
           type="button"
           onClick={onClick}
           aria-disabled={isDisabled || undefined}
@@ -712,6 +739,10 @@ export function TreeListItem({
                   densityStyles[density],
                   styles.interactive,
                   interactionOverlayStyles.backgroundImage,
+                  // The touch press on a compositor layer (after the
+                  // overlay, whose own touch paint it turns off).
+                  rowPressLayerStyles.cell,
+                  rowPressLayerStyles.cellOnImage,
                   isDisabled && styles.disabled,
                   isSelected && styles.selected,
                   xstyle,
@@ -732,7 +763,10 @@ export function TreeListItem({
           )}
           ref={forwardsToLink ? linkRowRef : undefined}
           onClick={forwardsToLink ? delegateToLink : handleClick}
-          onMouseUp={forwardsToLink ? openLinkOnMiddleClick : undefined}>
+          onMouseUp={forwardsToLink ? openLinkOnMiddleClick : undefined}
+          onPointerDown={
+            forwardsToLink || handleClick != null ? pressOnRow : undefined
+          }>
           <div {...stylex.props(styles.indentedContent)}>{innerContent}</div>
         </div>
       </div>

package/src/gestures/GestureHost.ts

@@ -3,7 +3,8 @@
 /**
  * @file GestureHost.ts
  * @input DOM touch, pointer, click, contextmenu, scroll and focus events of
- *   one document; elements with recognizers and consumers attached
+ *   one document; elements with recognizers and consumers attached; the
+ *   input hold's held layers (Layer/inputHold `holdsTouch`)
  * @output Exports GestureHost (the DOM side of the gesture system) and
  *   getGestureHost (one host per document)
  * @position Browser adapter of packages/core/src/gestures: turns real events
@@ -149,6 +150,7 @@ import {
 import {containsAlongFlatTree} from '../utils/flatTree';
 import {isIosWebKit} from '../utils/touchQueries';
 import {type WheelSegment, WheelSegmenter} from './wheelSegmenter';
+import {holdsTouch} from '../Layer/inputHold';
 import {
   gestureHostStyle,
   type GestureHostStyle,
@@ -2126,9 +2128,12 @@ export class GestureHost {
     const recognizers: GestureRecognizer[] = [];
     let consumer: TouchConsumer | null = null;
     let consumerElement: Element | null = null;
+    // A layer that the input hold holds takes no touch while it presents.
+    // The host asks the hold, so the hold needs nothing from gestures/. A
+    // root-entry component can then use the hold with no gesture code.
     if (
       target instanceof Node &&
-      [...this.touchGates].some(gate => gate(target))
+      (holdsTouch(target) || [...this.touchGates].some(gate => gate(target)))
     ) {
       return {recognizers, consumer, consumerElement};
     }
@@ -2287,17 +2292,20 @@ export class GestureHost {
       };
       this.wheel = gesture;
     }
-    const {dx, dy} = wheelPixels(wheel, this.doc.defaultView);
+    let {dx, dy} = wheelPixels(wheel, this.doc.defaultView);
     const horizontal = Math.abs(dx) > Math.abs(dy);
     // The splitter reads a pan's stream only. A ctrl-wheel pinch has no
     // fingers' phase or momentum to tell apart, and ends 100 ms after its
     // last wheel.
     let seg: WheelSegment | null = null;
     if (kind === 'pan') {
+      // Only a trackpad's wheel can join its glide late; a mouse wheel's
+      // notches keep the splitter's other rules.
       seg = this.segmenter.push(
         time,
         horizontal ? dx : dy,
         horizontal ? WHEEL_FOLLOW_END_MS : WHEEL_FOLLOW_END_V_MS,
+        scrollTypeOf(wheel) === 'continuous',
       );
     } else {
       this.segmenter.end();
@@ -2309,6 +2317,14 @@ export class GestureHost {
         gesture = null;
       }
     }
+    // A late wheel the glide took was the fingers' first when this one grows.
+    if (seg != null && seg.carried !== 0) {
+      if (horizontal) {
+        dx += seg.carried;
+      } else {
+        dy += seg.carried;
+      }
+    }
     if (gesture == null) {
       gesture = this.beginWheel(wheel, kind, dx, dy, time);
       this.wheel = gesture;
@@ -2868,8 +2884,8 @@ export class GestureHost {
 
   /**
    * Hold touches away from every participant while `gate(target)` answers
-   * true (a presentation running in a layer: its content takes no touch
-   * until it settles). Returns the release.
+   * true. Returns the release. The input hold's held layers need no gate,
+   * because the host asks `holdsTouch` for every touch.
    */
   addTouchGate(gate: (target: Node) => boolean): () => void {
     this.touchGates.add(gate);

package/src/gestures/PanGestureRecognizer.ts

@@ -55,7 +55,12 @@ export interface PanGestureRecognizerOptions extends GestureRecognizerOptions<Pa
   minimumNumberOfTouches?: number;
   /** @default Infinity */
   maximumNumberOfTouches?: number;
-  hysteresis?: number;
+  /**
+   * The travel that begins the pan, px. A function gives each press its own
+   * threshold: it reads the press's first touch when that touch lands.
+   * @default UIKit's 10
+   */
+  hysteresis?: number | ((touch: GestureTouch) => number);
   /** Movement that may begin the pan; anything else fails it. @default 'any' */
   direction?: PanDirection;
   /**
@@ -117,6 +122,11 @@ export class PanGestureRecognizer extends GestureRecognizer {
   travelAtBegan: Point = ZERO;
 
   private readonly tracker: VelocityTracker;
+  /**
+   * Read once per press. A finger that lands later keeps the press's
+   * threshold.
+   */
+  private readonly hysteresisFor: ((touch: GestureTouch) => number) | null;
   /** The lift's event time once the pan ended: its release (AST-100 FR2). */
   private releaseTime: number | undefined = undefined;
   /** The centroid where the gesture started, in client px. */
@@ -132,7 +142,10 @@ export class PanGestureRecognizer extends GestureRecognizer {
     this.minimumNumberOfTouches = options.minimumNumberOfTouches ?? 1;
     this.maximumNumberOfTouches =
       options.maximumNumberOfTouches ?? Number.POSITIVE_INFINITY;
-    this.hysteresis = options.hysteresis ?? UIKIT_PAN.hysteresis.value;
+    const {hysteresis} = options;
+    this.hysteresisFor = typeof hysteresis === 'function' ? hysteresis : null;
+    this.hysteresis =
+      typeof hysteresis === 'number' ? hysteresis : UIKIT_PAN.hysteresis.value;
     this.direction = options.direction ?? 'any';
     this.axisRatio = options.axisRatio ?? 1;
     this.lockAxis = options.lockAxis ?? false;
@@ -237,6 +250,10 @@ export class PanGestureRecognizer extends GestureRecognizer {
     event: GestureEventContext,
   ): void {
     if (this.numberOfTouches === touches.length) {
+      const first = touches[0];
+      if (this.hysteresisFor != null && first != null) {
+        this.hysteresis = this.hysteresisFor(first);
+      }
       this.origin = centroid(this.touches.values());
       this.adjust = ZERO;
       this.raw = ZERO;

package/src/gestures/README.md

@@ -118,7 +118,8 @@ The pan reads its numbers the way `UIPanGestureRecognizer` does, as measured
 in the UIKit lab:
 
 - It begins once the centroid has moved `hysteresis` (10 px) along either
-  axis, not as a distance.
+  axis, not as a distance. A function gives each press its own threshold,
+  read from the press's first touch when it lands.
 - `translation()` leaves out the travel the threshold took: a slow drag reads
   zero when the pan begins, and a step that overshoots keeps only the
   overshoot. A dragged surface does not jump. `totalTranslation()` is the
@@ -434,11 +435,15 @@ subscriber cancels it: the host cancels `touchend` and `contextmenu` there
 while a claiming participant is attached, never a `touchstart` or a
 `touchmove`, and the click guard (`../utils/clickGuard.ts`) keeps a
 cancelling `click` while it is armed, and from the menu press model's first
-arm on. A blocking `touchmove` sits on a claiming
+arm on. A layer's input hold (`../Layer/inputHold.ts`) cancels pointer and
+mouse events, clicks, `touchmove` and `touchend` there while a layer is held,
+never a `touchstart`. A blocking `touchmove` sits on a claiming
 element and on a claimed touch's target, on the document while an element a
 claiming recognizer lives in is moving (Touches on moving elements), or on
-the window only while a page hold is held, so a page of pressables blocks
-no scroll.
+the window only while a page hold or a layer's input hold is held, so a page
+of pressables blocks no scroll. The stream records the type of the latest
+pointer event it delivers (`getLastPointerType`); the input hold reads it as
+a layer opens.
 
 ### Holding the page still
 
@@ -525,7 +530,11 @@ it never moves it; when the fingers carry on instead, their moves absorb
 what the pan showed past their travel, or short of it, so it never steps
 back and ends on their travel. Fingers that stop release still, once the end
 time passes. In momentum, a reversal, a delta that grows
-against the decay, or a 50 ms pause starts a new gesture. A finger, mouse or
+against the decay, or a 50 ms pause starts a new gesture; a late, coalesced
+trackpad wheel that continues the glide's deceleration (at or below the next
+step, or near the sum of the next steps its stall spans) belongs to the same
+flick. When the next wheel grows instead, it starts a new gesture with the late
+wheel's travel. A finger, mouse or
 pen that comes down ends it, and a wheel claim keeps the page's text
 selection. A gesture a
 recognizer took is latched to it, as a browser latches a scroller: while it

package/src/gestures/ScreenEdgePanGestureRecognizer.ts

@@ -76,12 +76,17 @@ interface EdgeLayout {
  */
 export interface ScreenEdgePanGestureRecognizerOptions extends Omit<
   PanGestureRecognizerOptions,
-  'direction' | 'allowedPointerTypes' | 'allowedScrollTypes'
+  'direction' | 'allowedPointerTypes' | 'allowedScrollTypes' | 'hysteresis'
 > {
   /** The edges a touch may start from. @default ['leading'] */
   edges?: ReadonlyArray<ScreenEdge>;
   /** Width of the band at each edge, px. */
   edgeRegion?: number;
+  /**
+   * The travel that begins the pan in its edge zone, px. It is one number for
+   * every press, since the zone sets the threshold itself. @default UIKit's 15
+   */
+  hysteresis?: number;
 }
 
 export class ScreenEdgePanGestureRecognizer extends PanGestureRecognizer {

package/src/gestures/nativeScroll.ts

@@ -31,33 +31,18 @@
 import {isRtlElement} from '../hooks/isRtlElement';
 import type {NativeScrollProbe} from './types';
 import {parentAcrossShadow} from '../utils/flatTree';
+import {
+  isInsideScrollView,
+  parseTouchAction,
+  rootOverflow,
+  SCROLLABLE_OVERFLOW as SCROLLABLE,
+  type AllowedPans,
+} from '../utils/scrollView';
 
 export {parentAcrossShadow};
 
-export interface AllowedPans {
-  readonly x: boolean;
-  readonly y: boolean;
-}
-
-/** Which pans a `touch-action` value lets the browser perform. */
-export function parseTouchAction(value: string): AllowedPans {
-  const tokens = value.trim().split(/\s+/);
-  if (tokens.includes('auto') || tokens.includes('manipulation')) {
-    return {x: true, y: true};
-  }
-  if (tokens.includes('none')) {
-    return {x: false, y: false};
-  }
-  return {
-    x: tokens.some(
-      token =>
-        token === 'pan-x' || token === 'pan-left' || token === 'pan-right',
-    ),
-    y: tokens.some(
-      token => token === 'pan-y' || token === 'pan-up' || token === 'pan-down',
-    ),
-  };
-}
+export {parseTouchAction};
+export type {AllowedPans};
 
 interface ChainEntry {
   readonly element: Element;
@@ -66,15 +51,8 @@ interface ChainEntry {
   readonly isRtl: boolean;
   readonly stopsX: boolean;
   readonly stopsY: boolean;
-  /**
-   * The scroller sits beyond a `position: fixed` ancestor of the touch: it
-   * still scrolls under the finger, but it does not carry the touched
-   * element, so the element is not inside a scroll view (spec:AST-094 FR11).
-   */
-  readonly isBeyondFixed: boolean;
 }
 
-const SCROLLABLE = new Set(['auto', 'scroll', 'overlay']);
 const EDGE_TOLERANCE = 1;
 
 interface Chain {
@@ -94,7 +72,6 @@ function buildChain(target: Element, readsTouchAction: boolean): Chain {
   let allowX = true;
   let allowY = true;
   let reachedRoot = false;
-  let isBeyondFixed = false;
   for (
     let node: Node | null = target;
     node != null;
@@ -128,15 +105,11 @@ function buildChain(target: Element, readsTouchAction: boolean): Chain {
         isRtl: isRtlElement(element as HTMLElement),
         stopsX: behaviorX !== 'auto',
         stopsY: behaviorY !== 'auto',
-        isBeyondFixed,
       });
     }
     if (isRoot) {
       break;
     }
-    if (style.position === 'fixed') {
-      isBeyondFixed = true;
-    }
   }
   if (!reachedRoot && root instanceof Element) {
     chain.push({
@@ -146,7 +119,6 @@ function buildChain(target: Element, readsTouchAction: boolean): Chain {
       isRtl: false,
       stopsX: false,
       stopsY: false,
-      isBeyondFixed,
     });
   }
   return {entries: chain, allowsPan: allowX || allowY};
@@ -167,28 +139,6 @@ function overscrollBehavior(style: CSSStyleDeclaration): [string, string] {
   return [x || first, y || second];
 }
 
-/**
- * The viewport scrolls unless the root or the body clips it (a scroll lock
- * sets `overflow: hidden` on one of them).
- */
-function rootOverflow(doc: Document, axis: 'x' | 'y'): string {
-  const view = doc.defaultView;
-  if (view == null) {
-    return 'hidden';
-  }
-  for (const element of [doc.documentElement, doc.body]) {
-    if (element == null) {
-      continue;
-    }
-    const style = view.getComputedStyle(element);
-    const value = axis === 'x' ? style.overflowX : style.overflowY;
-    if (value === 'hidden' || value === 'clip') {
-      return 'hidden';
-    }
-  }
-  return 'auto';
-}
-
 function canMoveY(element: Element, dy: number): boolean {
   if (element.scrollHeight - element.clientHeight <= EDGE_TOLERANCE) {
     return false;
@@ -288,15 +238,9 @@ export function createNativeScrollProbe(
       return chain?.allowsPan === true;
     },
     get isInsideScroller(): boolean {
-      return getChain().some(
-        entry =>
-          !entry.isBeyondFixed &&
-          ((entry.y &&
-            entry.element.scrollHeight - entry.element.clientHeight >
-              EDGE_TOLERANCE) ||
-            (entry.x &&
-              entry.element.scrollWidth - entry.element.clientWidth >
-                EDGE_TOLERANCE)),
+      return (
+        target instanceof Element &&
+        isInsideScrollView(target, {readsTouchAction})
       );
     },
   };