@astryxdesign/core 0.7.7-canary.f9ac85f → 0.7.7

package/src/Tooltip/useTooltip.tsx

@@ -5,7 +5,8 @@
 /**
  * @file useTooltip.tsx
  * @input Uses useLayer, usePressPin, React hooks
- * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
+ * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips,
+ *   and the module-only useTooltipWithTriggerBehavior that InfoTip's press-to-pin uses
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
  * SYNC: When modified, update:
@@ -31,7 +32,7 @@ import {useAnnounceRenderedText} from '../hooks/useAnnounceRenderedText';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import {registerLayerSurface} from '../Layer/layerSurfacePress';
-import {usePressPin} from '../Layer/usePressPin';
+import {usePressPin, type LayerTriggerBehavior} from '../Layer/usePressPin';
 import {useLayerDismissal} from '../Layer/useLayerDismissal';
 import {themeProps} from '../utils/themeProps';
 import {
@@ -83,14 +84,6 @@ export type TooltipFocusTrigger = 'auto' | 'always' | 'never';
  */
 export type TooltipTouchTrigger = LayerTouchTrigger;
 
-/**
- * How the trigger opens the tooltip. `adaptive`, the default, previews it on
- * hover and focus, and a tap opens it unless the trigger acts. `hover`
- * previews it on hover and focus, and no touch or pen tap opens it. `toggle`
- * pins it on a click, tap, Enter, or Space on a button trigger.
- */
-export type TooltipTriggerBehavior = 'adaptive' | 'hover' | 'toggle';
-
 export interface TooltipOptions {
   /**
    * Position placement relative to anchor
@@ -135,32 +128,10 @@ export interface TooltipOptions {
    * - `tap`: tap always opens the tooltip, even on a trigger that acts
    * - `none`: touch never opens the tooltip
    *
-   * It decides only under `triggerBehavior="adaptive"`, the default.
-   *
    * @default 'auto'
    */
   touchTrigger?: TooltipTouchTrigger;
 
-  /**
-   * How the trigger opens the tooltip:
-   * - `adaptive` (the default): hover and focus preview it. A tap opens it
-   *   unless the trigger performs an action of its own. While `touchTrigger`
-   *   remains, it decides those taps.
-   * - `hover`: hover and focus preview it; no touch or pen tap opens it.
-   * - `toggle`: on a button trigger, a click, a tap, Enter, or Space pins the
-   *   tooltip open, and the same press closes it. Hover and keyboard focus
-   *   still preview it. A pinned tooltip stays until Escape, a second press,
-   *   a press outside, or focus leaving. Astryx clickable rows and cards
-   *   ignore the pinning press, except an Item row on a trigger that is not
-   *   a native button. The `Tooltip` component also stops it at a child
-   *   trigger. A hook caller stops a plain `onClick` ancestor itself. The
-   *   trigger reports `aria-expanded` and `aria-controls`, and the tooltip's
-   *   text is announced once when it pins. `touchTrigger` is ignored.
-   *
-   * @default 'adaptive'
-   */
-  triggerBehavior?: TooltipTriggerBehavior;
-
   /**
    * Whether the tooltip is enabled.
    * When false, hover/focus triggers are disabled.
@@ -296,6 +267,42 @@ function isFocusable(element: HTMLElement): boolean {
  */
 
 export function useTooltip(options: TooltipOptions = {}): TooltipReturn {
+  // The option is fixed to `adaptive`, so an options object that carries it at
+  // runtime cannot reach the press-to-pin path.
+  return useTooltipWithTriggerBehavior({
+    ...options,
+    triggerBehavior: 'adaptive',
+  });
+}
+
+/**
+ * Module-only options for `useTooltipWithTriggerBehavior`. Not exported from
+ * the package.
+ */
+export interface TooltipWithTriggerBehaviorOptions extends TooltipOptions {
+  /**
+   * How the trigger opens the tooltip:
+   * - `adaptive` (the default): hover and focus preview it. `touchTrigger`
+   *   decides taps.
+   * - `toggle`: on a button trigger, a click, a tap, Enter, or Space pins the
+   *   tooltip open, and the same press closes it. Hover and keyboard focus
+   *   still preview it. A pinned tooltip stays until Escape, a second press,
+   *   a press outside, or focus leaving. The trigger reports `aria-expanded`
+   *   and `aria-controls`, and the tooltip's text is announced once when it
+   *   pins. `touchTrigger` is ignored. InfoTip uses it.
+   *
+   * @default 'adaptive'
+   */
+  triggerBehavior?: LayerTriggerBehavior;
+}
+
+/**
+ * `useTooltip` with a trigger behavior. Module-only: InfoTip's press-to-pin
+ * goes through it, and the package does not export it.
+ */
+export function useTooltipWithTriggerBehavior(
+  options: TooltipWithTriggerBehaviorOptions = {},
+): TooltipReturn {
   const {
     placement = 'above',
     alignment = 'center',

package/src/TopNav/TopNavItem.tsx

@@ -33,7 +33,7 @@ import type {LinkComponentType} from '../Link/types';
 import {useTopNavRenderMode} from './TopNavRenderContext';
 import {navItemStyles, type NavItemSize} from '../NavItem/navItemStyles.stylex';
 import {mergeProps} from '../utils';
-import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
+import {useCloseMobileDrawerOnActivate} from '../AppShell/useCloseMobileDrawerOnActivate';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
@@ -199,7 +199,9 @@ export function TopNavItem({
   const pressable = usePressFeedback();
   const LinkComponent = useLinkComponent(as);
   const renderMode = useTopNavRenderMode();
-  const {closeMobileNav} = useAppShellMobile();
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(
+    renderMode === 'drawer',
+  );
 
   // A disabled item renders as a plain <a> with no href: an href-less anchor
   // is not focusable and exposes no link affordance, so programmatic focus +
@@ -214,14 +216,13 @@ export function TopNavItem({
   // Drawer mode — render as a SideNavItem-style vertical list element
   // =========================================================================
   if (renderMode === 'drawer') {
+    const activate = closeDrawerAfter(onClick);
     const handleDrawerClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
       if (isDisabled) {
         preventDefaultClick(e);
         return;
       }
-      // Forward the original onClick if present
-      onClick?.(e);
-      closeMobileNav();
+      activate?.(e);
     };
 
     return (

package/src/TopNav/TopNavMegaMenuItem.tsx

@@ -32,7 +32,7 @@ import type {LinkComponentType} from '../Link/types';
 import {useTopNavRenderMode} from './TopNavRenderContext';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
+import {useCloseMobileDrawerOnActivate} from '../AppShell/useCloseMobileDrawerOnActivate';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
@@ -200,7 +200,9 @@ export function TopNavMegaMenuItem({
   const pressable = usePressFeedback();
   const renderMode = useTopNavRenderMode();
   const LinkComponent = useLinkComponent(as);
-  const {closeMobileNav} = useAppShellMobile();
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(
+    renderMode === 'drawer',
+  );
 
   // =========================================================================
   // Drawer mode — matches SideNavItem / TopNavMenu drawer appearance
@@ -208,10 +210,9 @@ export function TopNavMegaMenuItem({
   if (renderMode === 'drawer') {
     const Element = href ? LinkComponent : 'button';
     const elementProps = Element === 'button' ? {type: 'button' as const} : {};
-    const handleDrawerClick = () => {
+    const handleDrawerClick = closeDrawerAfter(() => {
       onClick?.();
-      closeMobileNav();
-    };
+    });
     return (
       <Element
         {...restProps}

package/src/TopNav/TopNavMenu.tsx

@@ -39,7 +39,7 @@ import type {BaseProps} from '../BaseProps';
 import {navItemStyles} from '../NavItem/navItemStyles.stylex';
 import {useTopNavSlot} from './TopNavContext';
 import {useTopNavRenderMode} from './TopNavRenderContext';
-import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
+import {useCloseMobileDrawerOnActivate} from '../AppShell/useCloseMobileDrawerOnActivate';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import {isSafeUrl} from '../utils/safeUrl';
 import {themeProps} from '../utils/themeProps';
@@ -363,7 +363,9 @@ export function TopNavMenu({
 }: TopNavMenuProps) {
   const pressable = usePressFeedback();
   const renderMode = useTopNavRenderMode();
-  const {closeMobileNav} = useAppShellMobile();
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(
+    renderMode === 'drawer',
+  );
   const LinkComponent = useLinkComponent();
   const [drawerExpanded, setDrawerExpanded] = useState(false);
   const menuId = useId();
@@ -524,10 +526,9 @@ export function TopNavMenu({
                 key={getMenuItemKey(item)}
                 href={item.href}
                 {...pressable}
-                onClick={(_e: React.MouseEvent) => {
+                onClick={closeDrawerAfter((_e: React.MouseEvent) => {
                   item.onClick?.();
-                  closeMobileNav();
-                }}
+                })}
                 {...focusOutlineProps.focusVisible(
                   navItemStyles.item,
                   interactionOverlayStyles.backgroundColor,

package/src/gestures/GestureHost.ts

@@ -731,6 +731,12 @@ export class GestureHost {
    * lift click (`spec:AST-094` FR28: nothing acts).
    */
   private readonly cancelledFingers = new Set<number>();
+  /**
+   * The pens and pointer-read fingers that the app's lost focus cancelled,
+   * by pointer id. Each is kept until its lift, which must not click either,
+   * or until a new press.
+   */
+  private readonly cancelledPointers = new Map<number, PointerKind>();
   /** Touch.identifier → the element the finger landed on. */
   private readonly touchTargets = new Map<number, EventTarget>();
   /**
@@ -755,6 +761,8 @@ export class GestureHost {
   private readonly processed = new WeakSet<Event>();
   /** pointerId → arena id, for live mouse and pen contacts. */
   private readonly pointerIds = new Map<number, number>();
+  /** Each contact's kind: a blur refuses a pen's or a pointer-read finger's lift, never a mouse's. */
+  private readonly pointerKinds = new Map<number, PointerKind>();
   /**
    * The boxes the host watches for screen-edge pans (syncLayoutWatch): each
    * element with an enabled one, and the root for one whose band moves with
@@ -1820,13 +1828,36 @@ export class GestureHost {
     }
   }
 
-  /** After a contact ends: an armed press that is over stops listening. */
+  /**
+   * A new press is a new gesture, as the click guard reads one, so the lifts
+   * the blur cancelled owe nothing after it. A second finger keeps the other
+   * fingers' refusals, since those fingers may still be down.
+   */
+  private dropCancelledLifts(event: PointerEvent): void {
+    const isSecond = event.pointerType === 'touch' && event.isPrimary === false;
+    for (const [pointerId, kind] of [...this.cancelledPointers]) {
+      if (pointerId === event.pointerId || !(isSecond && kind === 'touch')) {
+        this.cancelledPointers.delete(pointerId);
+      }
+    }
+  }
+
+  /**
+   * After a contact ends: an armed press that is over stops listening. A
+   * contact the lost focus cancelled still owes its lift, so the press is
+   * not over until that lift comes. A lift the page never hears ends it at
+   * the next press, or at a cancel.
+   */
   private releaseArmedPress(): void {
     if (!this.isArmedPress) {
       return;
     }
     queueMicrotask(() => {
-      if (this.isArmedPress && this.arena.touches.length === 0) {
+      if (
+        this.isArmedPress &&
+        this.arena.touches.length === 0 &&
+        this.cancelledPointers.size === 0
+      ) {
         this.isArmedPress = false;
         this.syncKeptPresses();
         this.syncListeners();
@@ -1857,6 +1888,7 @@ export class GestureHost {
         return;
       }
       this.cancelledFingers.clear();
+      this.cancelledPointers.clear();
       this.clearClaimedLifts();
       this.cancelCallerRead?.();
       this.cancelCallerRead = null;
@@ -2934,13 +2966,19 @@ export class GestureHost {
       if (locksSelectionFor('touch')) {
         toLock.push({id, target, consumerElement});
       }
-      // The finger's events keep going to what the engine hit.
+      // The finger's events keep going to what the engine hit. A disabled
+      // participant can never claim, so a scroll never waits on it.
       this.watchTarget(
         touch.identifier,
         native,
-        recognizers.some(claimsWhileMoving) || consumer?.keepsTouch != null,
-        consumer != null ||
-          recognizers.some(recognizer => recognizer.claimsTouches),
+        recognizers.some(
+          recognizer => recognizer.isEnabled && claimsWhileMoving(recognizer),
+        ) ||
+          (consumer?.keepsTouch != null && consumer.isEnabled?.() !== false),
+        (consumer != null && consumer.isEnabled?.() !== false) ||
+          recognizers.some(
+            recognizer => recognizer.isEnabled && recognizer.claimsTouches,
+          ),
       );
       this.lastFed.set(id, {x: touch.clientX, y: touch.clientY, time});
       this.pairTouch(id, {x: touch.clientX, y: touch.clientY, target: native});
@@ -2975,6 +3013,11 @@ export class GestureHost {
     for (const input of untracked) {
       this.arena.untrackedBegan(input);
     }
+    // Again once the new fingers are delivered: a pinch's second finger may
+    // have landed on another one-finger pan, the next row.
+    if (this.fingerTargets.length > 1 && !this.isFingerClaimed()) {
+      this.failUnclaimedLoneFingerPans();
+    }
     // Stamped after the consumers judged the touch: the brake asks whether
     // an EARLIER finger is still driving a scroll.
     const landed = landedOn(event);
@@ -3570,6 +3613,7 @@ export class GestureHost {
     if (!isPointerKind(event.pointerType)) {
       return;
     }
+    this.dropCancelledLifts(event);
     if (event.pointerType === 'touch' && this.usesTouchEvents) {
       this.pairPointer(event.pointerId, {
         x: event.clientX,
@@ -3578,6 +3622,13 @@ export class GestureHost {
       });
       return;
     }
+    if (event.pointerType === 'touch' && event.isPrimary === false) {
+      // Fingers from pointer events: a second one, wherever either lands,
+      // leaves the two to the page's pinch, as onTouchStart does. A finger
+      // that is not the primary pointer is a second finger, even where the
+      // host never heard the first.
+      this.failUnclaimedLoneFingerPans();
+    }
     // A right click, a pen's barrel button, or a ctrl-click on macOS (its
     // context click) starts no press (FR43).
     if (event.pointerType !== 'touch' && !isPrimaryClick(event)) {
@@ -3599,6 +3650,7 @@ export class GestureHost {
     }
     const id = this.nextId++;
     this.pointerIds.set(event.pointerId, id);
+    this.pointerKinds.set(event.pointerId, event.pointerType);
     if (target !== landed && target != null) {
       this.retargeted.set(id, {x: event.clientX, y: event.clientY, target});
     }
@@ -3620,6 +3672,15 @@ export class GestureHost {
         consumer,
       },
     ]);
+    if (
+      event.pointerType === 'touch' &&
+      event.isPrimary === false &&
+      !this.isFingerClaimed()
+    ) {
+      // Again once this finger is delivered: it may have landed on another
+      // one-finger pan.
+      this.failUnclaimedLoneFingerPans();
+    }
     if (locksSelectionFor(event.pointerType)) {
       // The presented target: what the pen is on, where the engine's own
       // hit test may still see the motion's start.
@@ -3678,9 +3739,14 @@ export class GestureHost {
     }
     const id = this.pointerIds.get(event.pointerId);
     if (id == null) {
+      // A contact the lost focus cancelled: its lift clicks nothing.
+      if (this.cancelledPointers.delete(event.pointerId)) {
+        this.refuseCancelledLift(event);
+      }
       return;
     }
     this.pointerIds.delete(event.pointerId);
+    this.pointerKinds.delete(event.pointerId);
     this.unlockSelection(id);
     const dispositions = this.arena.ended([
       {id, x: event.clientX, y: event.clientY, time: eventTime(event)},
@@ -3784,9 +3850,12 @@ export class GestureHost {
       }
       return;
     }
+    // A contact that ends in a cancel owes no refused lift.
+    this.cancelledPointers.delete(event.pointerId);
     const id = this.pointerIds.get(event.pointerId);
     if (id != null) {
       this.pointerIds.delete(event.pointerId);
+      this.pointerKinds.delete(event.pointerId);
       this.unlockSelection(id, true);
       this.retargeted.delete(id);
       this.arena.cancelled([id], eventTime(event));
@@ -3991,20 +4060,26 @@ export class GestureHost {
       }
     }
   }
+  /** Whether a finger's drag is claimed: then two fingers make no pinch. */
+  private isFingerClaimed(): boolean {
+    return this.arena.touches.some(
+      touch => touch.pointerType === 'touch' && this.arena.isClaimed(touch.id),
+    );
+  }
 
   private readonly onVisibilityChange = (): void => {
     if (this.doc.visibilityState === 'hidden') {
       this.cancelEverything(this.arena.now());
-      // As at a blur: the press sends no further pointer event, so an armed
-      // press's page listeners go now (FR24).
+      // As at a blur: an armed press's page listeners go once nothing is left
+      // to hear.
       this.releaseArmedPress();
     }
   };
 
   private readonly onBlur = (): void => {
     this.cancelEverything(this.arena.now());
-    // The press a blur ends sends no further pointer event: an armed press's
-    // page listeners go now, as at its lift (FR24).
+    // An armed press's page listeners go once nothing is left to hear. A pen
+    // or a pointer-read finger the blur cancelled still owes its lift.
     this.releaseArmedPress();
   };
 
@@ -4027,8 +4102,27 @@ export class GestureHost {
     );
   }
 
+  /**
+   * The lift of a contact the lost focus cancelled: its click is refused,
+   * and a finger's touchend after it is cancelled.
+   */
+  private refuseCancelledLift(event: PointerEvent): void {
+    armClickGuard(this.doc, {takesLateMouse: event.pointerType === 'touch'});
+    if (event.pointerType === 'touch') {
+      // Noted as a claimed lift is: capped, and gone after its time.
+      this.noteClaimedLift(event);
+    }
+  }
+
   /** The app lost focus: UIKit cancels every touch in flight. */
   private cancelEverything(time: number): void {
+    // The browser may keep a pen or a pointer-read finger down: its lift must
+    // not click. A mouse button held through the blur keeps its click.
+    for (const [pointerId, kind] of this.pointerKinds) {
+      if (kind !== 'mouse') {
+        this.cancelledPointers.set(pointerId, kind);
+      }
+    }
     const ids = [...this.pointerIds.values()];
     for (const id of ids) {
       this.unlockSelection(id, true);
@@ -4042,6 +4136,7 @@ export class GestureHost {
       }
     }
     this.pointerIds.clear();
+    this.pointerKinds.clear();
     this.retargeted.clear();
     this.fingerPointers.clear();
     this.pendingPointers.clear();

package/src/hooks/useHighlightedOptionScroll.ts

@@ -8,7 +8,8 @@
  *   option-id resolver for the owning listbox
  * @output Exports useHighlightedOptionScroll: keeps the highlighted option
  *   scrolled into view for keyboard navigation while hover-driven highlights
- *   never scroll; the hover callback is stable while `setHighlightedIndex` is
+ *   never scroll, and a hover after a keyboard move waits for the pointer to
+ *   move or press; the hover callback is stable while `setHighlightedIndex` is
  * @position Internal hook; used by useCombobox, useMultiCombobox,
  *   BaseTypeahead, and DateTimeInput — the owners of combobox highlight state
  */
@@ -27,6 +28,21 @@ interface UseHighlightedOptionScrollOptions {
   itemCount?: number;
 }
 
+/**
+ * Highlights the hovered option at `index`. `onHighlight` runs when the hover
+ * takes effect: at once, or after the pointer moves or presses when a
+ * keyboard move holds the highlight.
+ */
+export type HighlightFromHover = (
+  index: number,
+  onHighlight?: () => void,
+) => void;
+
+interface WaitingHover {
+  index: number;
+  onHighlight?: () => void;
+}
+
 /**
  * Keep the highlighted option visible during keyboard navigation — but not for
  * hover highlights. Hover must highlight only: scrollIntoView moves the next
@@ -34,6 +50,10 @@ interface UseHighlightedOptionScrollOptions {
  * scrolls again — a runaway auto-scroll loop with no user input.
  * Keyboard paths call the raw setter directly and keep their scrolling; hover
  * paths call the returned callback.
+ *
+ * A keyboard move holds the highlight. A key that scrolls the list moves rows
+ * under a still mouse, and the browser reports the row under it as entered;
+ * that row takes the highlight only once the pointer moves or presses.
  */
 export function useHighlightedOptionScroll({
   isOpen,
@@ -41,19 +61,93 @@ export function useHighlightedOptionScroll({
   setHighlightedIndex,
   getOptionId,
   itemCount,
-}: UseHighlightedOptionScrollOptions): (index: number) => void {
+}: UseHighlightedOptionScrollOptions): HighlightFromHover {
   // The callback reads no render state, so memoized rows keep one function.
   const hoveredIndexRef = useRef<number | null>(null);
   const shownIndexRef = useRef(highlightedIndex);
+  // The hover that came while a keyboard move held the highlight.
+  const waitingHoverRef = useRef<WaitingHover | null>(null);
+  // Set only while a keyboard move holds the highlight.
+  const removeHoldListenersRef = useRef<(() => void) | null>(null);
+  const setHighlightedIndexRef = useRef(setHighlightedIndex);
+  // The pointer's last screen position a hold saw, kept across holds.
+  const lastPointerRef = useRef<{x: number; y: number} | null>(null);
+
+  const applyHover = useCallback((hover: WaitingHover) => {
+    hoveredIndexRef.current = hover.index;
+    setHighlightedIndexRef.current(hover.index);
+    hover.onHighlight?.();
+  }, []);
+
+  const endHold = useCallback(() => {
+    removeHoldListenersRef.current?.();
+    removeHoldListenersRef.current = null;
+  }, []);
+
+  const releaseHold = useCallback(() => {
+    endHold();
+    const waiting = waitingHoverRef.current;
+    waitingHoverRef.current = null;
+    if (waiting != null) {
+      applyHover(waiting);
+    }
+  }, [applyHover, endHold]);
 
-  const highlightFromHover = useCallback(
-    (index: number) => {
+  // Holds the highlight until the pointer moves or presses. The listeners
+  // live only while the hold does. Movement is read by screen coordinates: a
+  // scroll moves the rows, not the pointer. The browser reports a row as
+  // entered before the move that reaches it, so the first real move gives
+  // that row the highlight. A press releases at once, so a held press lights
+  // the pressed row.
+  const startHold = useCallback(() => {
+    waitingHoverRef.current = null;
+    if (removeHoldListenersRef.current != null) {
+      return;
+    }
+    const onPointerMove = (event: PointerEvent) => {
+      const last = lastPointerRef.current;
+      lastPointerRef.current = {x: event.screenX, y: event.screenY};
+      if (
+        last != null &&
+        last.x === event.screenX &&
+        last.y === event.screenY
+      ) {
+        return;
+      }
+      releaseHold();
+    };
+    const options = {capture: true, passive: true} as const;
+    document.addEventListener('pointermove', onPointerMove, options);
+    document.addEventListener('pointerdown', releaseHold, options);
+    removeHoldListenersRef.current = () => {
+      document.removeEventListener('pointermove', onPointerMove, options);
+      document.removeEventListener('pointerdown', releaseHold, options);
+    };
+  }, [releaseHold]);
+
+  const highlightFromHover = useCallback<HighlightFromHover>(
+    (index, onHighlight) => {
+      if (removeHoldListenersRef.current != null) {
+        waitingHoverRef.current = {index, onHighlight};
+        return;
+      }
       hoveredIndexRef.current = index;
       setHighlightedIndex(index);
+      onHighlight?.();
     },
     [setHighlightedIndex],
   );
 
+  // Effect: keeps the hold's document listeners calling the current setter.
+  useEffect(() => {
+    setHighlightedIndexRef.current = setHighlightedIndex;
+  }, [setHighlightedIndex]);
+
+  // Effect: removes the hold's document listeners on unmount.
+  useEffect(() => endHold, [endHold]);
+
+  // Effect: scrolls the highlighted option into view in the document, and
+  // starts or ends the hold on its document listeners.
   useEffect(() => {
     // Only a move to the hovered row came from the hover. A hover on the row
     // already highlighted changes nothing, so a later run for the same row
@@ -63,13 +157,23 @@ export function useHighlightedOptionScroll({
     const isFromHover =
       hasMoved && hoveredIndexRef.current === highlightedIndex;
     hoveredIndexRef.current = null;
-    if (isFromHover || !isOpen || highlightedIndex < 0) {
+    if (isFromHover) {
+      return;
+    }
+    // A cleared highlight, a closed list, or a list that is not shown (a
+    // closed CommandPalette reports itself as open) has nothing to hold.
+    const option =
+      isOpen && highlightedIndex >= 0
+        ? document.getElementById(getOptionId(highlightedIndex))
+        : null;
+    if (option == null) {
+      waitingHoverRef.current = null;
+      endHold();
       return;
     }
-    document
-      .getElementById(getOptionId(highlightedIndex))
-      ?.scrollIntoView?.({block: 'nearest'});
-  }, [isOpen, highlightedIndex, getOptionId, itemCount]);
+    startHold();
+    option.scrollIntoView?.({block: 'nearest'});
+  }, [isOpen, highlightedIndex, getOptionId, itemCount, endHold, startHold]);
 
   return highlightFromHover;
 }

package/src/hooks/useMenuPress.ts

@@ -483,7 +483,10 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
           // Detach before acting: the activation usually closes the menu.
           endGesture();
           // Once armed, the one swallower stays installed.
-          armClickGuard(doc, {staysInstalled: true});
+          armClickGuard(doc, {
+            staysInstalled: true,
+            cancelsTouchEnd: native?.pointerType === 'touch',
+          });
           if (native != null) {
             activate(effect.row, native);
           }
@@ -492,7 +495,10 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
         case 'settle': {
           endGesture();
           if (effect.stray) {
-            armClickGuard(doc, {staysInstalled: true});
+            armClickGuard(doc, {
+              staysInstalled: true,
+              cancelsTouchEnd: native?.pointerType === 'touch',
+            });
           }
           if (effect.dismiss) {
             optionsRef.current.onDismiss?.();

package/src/i18n/generated-english/PowerSearch/PowerSearch.generated.ts

@@ -8,6 +8,7 @@
 
 const english: Readonly<Record<string, string>> = {
   "@astryx.powersearch.allFiltersRemoved": "All filters removed",
+  "@astryx.powersearch.editableFiltersRemoved": "Editable filters removed",
   "@astryx.powersearch.editor.apply": "Apply",
   "@astryx.powersearch.label": "Search",
   "@astryx.powersearch.placeholder": "Search…",