@astryxdesign/core 0.7.8 → 0.7.9-canary.07992bb

package/dist/Tooltip/useTooltip.js

@@ -13,7 +13,7 @@
  * - /packages/core/src/Tooltip/index.ts
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { createTriggerFocusGate } from "../utils/triggerFocus.js";
+import { createTriggerFocusGate, isFocusOnTrigger } from "../utils/triggerFocus.js";
 import * as stylex from '@stylexjs/stylex';
 import { useLayerInternal } from "../Layer/useLayer.js";
 import { useTouchTriggerInternal } from "../Layer/useTouchTrigger.js";
@@ -116,6 +116,17 @@ export function useTooltip(options = {}) {
   const showTimeoutRef = useRef(null);
   const hideTimeoutRef = useRef(null);
   const triggerRef = useRef(null);
+  // Whether the tooltip is enabled now, for a show that runs after a render
+  // (a pending hover show) and for the trigger ref callback.
+  const isEnabledRef = useRef(isEnabled);
+  isEnabledRef.current = isEnabled;
+  // Counts the renders in which the tooltip is disabled. A pending show
+  // records it, so a show scheduled before a disable is dropped even when
+  // the tooltip is enabled again before the timer fires.
+  const disabledRendersRef = useRef(0);
+  if (!isEnabled) {
+    disabledRendersRef.current += 1;
+  }
 
   // Clear all timeouts
   const clearTimeouts = useCallback(() => {
@@ -260,22 +271,16 @@ export function useTooltip(options = {}) {
       return;
     }
     clearTimeouts();
+    const disabledRenders = disabledRendersRef.current;
     showTimeoutRef.current = setTimeout(() => {
-      showLayer();
+      // A show runs only if the tooltip stayed enabled since it was
+      // scheduled: nothing would close a tooltip that opens after a disable.
+      if (disabledRendersRef.current === disabledRenders) {
+        showLayer();
+      }
     }, delay);
   }, [isEnabled, isOpen, clearTimeouts, showLayer, delay]);
 
-  // A show scheduled while the triggers were enabled must not outlive them:
-  // disabling also detaches the leave listener that would have cancelled it,
-  // so the timer would open a tooltip that nothing ever closes. Only the
-  // pending show is dropped; a pending hide still runs.
-  useEffect(() => {
-    if (!isEnabled && showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
-    }
-  }, [isEnabled]);
-
   // Schedule hide with delay (suppressed when isOpen is true).
   // A small hover bridge (when hideDelay is 0) lets the pointer travel from the
   // trigger onto the tooltip surface without the tooltip vanishing — required
@@ -331,27 +336,26 @@ export function useTooltip(options = {}) {
   // Under `auto`, whether focus counts is decided when it arrives, and a
   // focus that counted still hides on blur (utils/triggerFocus.ts).
   const [focusGate] = useState(createTriggerFocusGate);
+
+  // Whether focus on `target` opens the tooltip. With a `trigger`, its
+  // `focusTrigger` rule applies too. Only `:focus-visible` focus opens it, and
+  // a tap never does: a tapped `<input>` also matches `:focus-visible`.
+  const opensOnFocus = useCallback((target, trigger) => {
+    if (trigger != null && !isFocusOnTrigger(target, trigger, focusTrigger)) {
+      return false;
+    }
+    return !isTouchInteraction() && target.matches(':focus-visible');
+  }, [focusTrigger, isTouchInteraction]);
   const handleFocusIn = useCallback(e => {
     if (!focusGate.focusIn(e, focusTrigger) || !isEnabled) {
       return;
     }
-    // A tap focuses the trigger it activates, and `:focus-visible` does not
-    // filter that out on every element: a tapped `<input>` or contenteditable
-    // matches it. Those are exactly the action triggers `auto` just decided
-    // to keep shut, so without this the focus reopens what the tap
-    // suppressed, over the field the user is trying to type into.
-    if (isTouchInteraction()) {
-      return;
-    }
-    // Only show tooltip for keyboard focus (:focus-visible),
-    // not programmatic focus (e.g. dialog auto-focus, touch tap)
-    const target = e.target;
-    if (!target.matches(':focus-visible')) {
+    if (!opensOnFocus(e.target, null)) {
       return;
     }
     clearTimeouts();
     showLayer();
-  }, [focusGate, focusTrigger, isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
+  }, [focusGate, focusTrigger, isEnabled, opensOnFocus, clearTimeouts, showLayer]);
 
   // A held tooltip's focus-leave close is the hold's own: it listens on the
   // trigger whatever `focusTrigger` is. This schedules the unheld hide, which
@@ -423,46 +427,145 @@ export function useTooltip(options = {}) {
     hideLayer();
   }, [handleTouchPointerDown, trackTriggerPress, isOpen, clearTimeouts, hideLayer]);
 
-  // Interaction ref that handles event listeners only
+  // The trigger's listeners call the latest handlers through this ref, so the
+  // trigger ref callback keeps one identity.
+  const handlersRef = useRef({
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocusIn,
+    handleFocusOut,
+    handleHeldFocusOut,
+    handlePointerEnter,
+    handlePointerDown,
+    focusTrigger,
+    isOpen,
+    dropHold,
+    hideNow,
+    showNow,
+    opensOnFocus
+  });
+  handlersRef.current = {
+    handleMouseEnter,
+    handleMouseLeave,
+    handleFocusIn,
+    handleFocusOut,
+    handleHeldFocusOut,
+    handlePointerEnter,
+    handlePointerDown,
+    focusTrigger,
+    isOpen,
+    dropHold,
+    hideNow,
+    showNow,
+    opensOnFocus
+  };
+
+  // Removes the attached trigger's listeners (the trigger ref callback's
+  // cleanup).
+  const detachTriggerRef = useRef(null);
+  // Set when the trigger detached while the tooltip was disabled: the
+  // caller removed the wiring (DropdownMenu's Button while its menu is
+  // open), so the next enabled attach reads the focus that arrived meanwhile.
+  const wasSuppressedRef = useRef(false);
+
+  // The trigger's ref callback owns every trigger listener, and reads the
+  // trigger's state when it attaches and detaches.
   const interactionRef = useCallback(el => {
-    // Cleanup previous element
-    if (triggerRef.current) {
-      triggerRef.current.removeEventListener('mouseenter', handleMouseEnter);
-      triggerRef.current.removeEventListener('mouseleave', handleMouseLeave);
-      triggerRef.current.removeEventListener('focusin', handleFocusIn);
-      triggerRef.current.removeEventListener('focusout', handleFocusOut);
-      triggerRef.current.removeEventListener('focusout', handleHeldFocusOut);
-      stopPressTrackingRef.current?.();
-      triggerRef.current.removeEventListener('pointerenter', handlePointerEnter);
-      triggerRef.current.removeEventListener('pointerdown', handlePointerDown);
-    }
-    if (el) {
-      // Attach hover listeners. `pointerenter` runs before the synthesized
-      // `mouseenter` a tap produces, which is what lets the hover path know
-      // it is looking at a finger.
-      el.addEventListener('pointerenter', handlePointerEnter);
-      el.addEventListener('mouseenter', handleMouseEnter);
-      el.addEventListener('mouseleave', handleMouseLeave);
-      // Press-to-dismiss on a mouse; tap-to-open on a touch pointer.
-      el.addEventListener('pointerdown', handlePointerDown);
-
-      // Focus listeners unless focus never opens the tooltip; `auto` decides
-      // per event (utils/triggerFocus.ts).
-      if (focusTrigger !== 'never') {
-        el.addEventListener('focusin', handleFocusIn);
-        el.addEventListener('focusout', handleFocusOut);
-      }
+    // A caller that reports `null` by hand detaches the trigger, as the
+    // returned cleanup does.
+    if (el == null) {
+      detachTriggerRef.current?.();
+      return;
     }
-
-    // Its own focus-leave listener: `focusTrigger="never"` attaches none.
-    el?.addEventListener('focusout', handleHeldFocusOut);
+    if (el === triggerRef.current) {
+      return;
+    }
+    detachTriggerRef.current?.();
+    const latest = () => handlersRef.current;
+    // `pointerenter` runs before the synthesized `mouseenter` a tap produces,
+    // which is what lets the hover path know it is looking at a finger.
+    const onPointerEnter = e => latest().handlePointerEnter(e);
+    const onMouseEnter = () => latest().handleMouseEnter();
+    const onMouseLeave = e => latest().handleMouseLeave(e);
+    // Press-to-dismiss on a mouse; tap-to-open on a touch pointer.
+    const onPointerDown = e => latest().handlePointerDown(e);
+    // Focus counts unless focus never opens the tooltip; `auto` decides per
+    // event (isFocusForTrigger).
+    const onFocusIn = e => {
+      if (latest().focusTrigger !== 'never') {
+        latest().handleFocusIn(e);
+      }
+    };
+    const onFocusOut = e => {
+      if (latest().focusTrigger !== 'never') {
+        latest().handleFocusOut(e);
+      }
+    };
+    // A held tooltip's own focus-leave close, whatever `focusTrigger` is.
+    const onHeldFocusOut = e => latest().handleHeldFocusOut(e);
+    el.addEventListener('pointerenter', onPointerEnter);
+    el.addEventListener('mouseenter', onMouseEnter);
+    el.addEventListener('mouseleave', onMouseLeave);
+    el.addEventListener('pointerdown', onPointerDown);
+    el.addEventListener('focusin', onFocusIn);
+    el.addEventListener('focusout', onFocusOut);
+    el.addEventListener('focusout', onHeldFocusOut);
     triggerRef.current = el;
-  }, [handleHeldFocusOut, focusTrigger, handleMouseEnter, handleMouseLeave, handleFocusIn, handleFocusOut, handlePointerEnter, handlePointerDown]);
+
+    // A trigger that attaches again after its wiring was removed
+    // (DropdownMenu's Button as its menu closes) missed the focus that
+    // arrived meanwhile. Show for it only if it would open the tooltip:
+    // returned keyboard focus does, focus returned after a pointer pick does
+    // not. Any other attach leaves the tooltip as it is, so a tooltip
+    // dismissed with Escape stays closed.
+    const focused = el.ownerDocument.activeElement;
+    const wasSuppressed = wasSuppressedRef.current;
+    if (isEnabledRef.current) {
+      wasSuppressedRef.current = false;
+    }
+    if (wasSuppressed && isEnabledRef.current && latest().isOpen === undefined && latest().focusTrigger !== 'never' && focused instanceof HTMLElement && el.contains(focused) && latest().opensOnFocus(focused, el)) {
+      latest().showNow();
+    }
+    const detach = () => {
+      if (detachTriggerRef.current === detach) {
+        detachTriggerRef.current = null;
+      }
+      el.removeEventListener('pointerenter', onPointerEnter);
+      el.removeEventListener('mouseenter', onMouseEnter);
+      el.removeEventListener('mouseleave', onMouseLeave);
+      el.removeEventListener('pointerdown', onPointerDown);
+      el.removeEventListener('focusin', onFocusIn);
+      el.removeEventListener('focusout', onFocusOut);
+      el.removeEventListener('focusout', onHeldFocusOut);
+      stopPressTrackingRef.current?.();
+      if (triggerRef.current === el) {
+        triggerRef.current = null;
+      }
+      // A caller removes the wiring as it disables the tooltip. Close an
+      // uncontrolled tooltip then, or the next attach shows a stale tooltip.
+      // A detach while enabled, such as a merged ref that changes identity
+      // on a re-render, keeps a hovered or held tooltip open.
+      if (!isEnabledRef.current && latest().isOpen === undefined) {
+        wasSuppressedRef.current = true;
+        latest().dropHold();
+        latest().hideNow();
+      }
+    };
+    detachTriggerRef.current = detach;
+    return detach;
+  }, []);
 
   // Combined ref - shorthand for calling both positionRef and interactionRef
   const ref = useCallback(el => {
     layerRef(el);
-    interactionRef(el);
+    const detachInteraction = interactionRef(el);
+    if (el == null) {
+      return;
+    }
+    return () => {
+      detachInteraction?.();
+      layerRef(null);
+    };
   }, [layerRef, interactionRef]);
 
   // Cleanup on unmount

package/dist/TreeList/TreeListItem.d.ts

@@ -1,6 +1,7 @@
 /**
  * @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
  *

package/dist/TreeList/TreeListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAgStE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AASD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAwU3B;yBApWe,YAAY"}
+{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAuB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAgStE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AASD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAuW3B;yBAnYe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -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
  *
@@ -20,8 +21,9 @@ import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.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 { hasInteractiveAncestor, useClickableContainer } from "../hooks/useClickableContainer.js";
+import { cancelNestedTouchPress, hasInteractiveAncestor, useClickableContainer } from "../hooks/useClickableContainer.js";
 import { Icon } from "../Icon/index.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { useFocusAcrossSwap } from "../utils/useFocusAcrossSwap.js";
@@ -246,6 +248,22 @@ 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(null);
+  const chevronRef = useRef(null);
+  const surfaceToggles = onClick == null && handleClick != null;
+  const pressOnRow = event => {
+    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({
@@ -318,6 +336,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.
   _jsx("button", {
+    ref: chevronRef,
     type: "button",
     "aria-expanded": isExpanded,
     "aria-label": t('@astryx.treeList.toggleChildren')
@@ -395,6 +414,7 @@ export function TreeListItem({
       },
       children: labelAndDescription
     }) : onClick != null ? /*#__PURE__*/_jsx("button", {
+      ref: actionButtonRef,
       type: "button",
       onClick: onClick,
       "aria-disabled": isDisabled || undefined,
@@ -463,7 +483,10 @@ export function TreeListItem({
           density,
           selected: isSelected ? 'selected' : null,
           disabled: isDisabled ? 'disabled' : null
-        }), isInteractive || hasChildren && onClick == null ? focusOutlineProps.focusWithinOrPublished(styles.contentWrapper, styles.focusLift, densityStyles[density], styles.interactive, interactionOverlayStyles.backgroundImage, isDisabled && styles.disabled, isSelected && styles.selected, xstyle) : stylex.props(styles.contentWrapper, densityStyles[density], isDisabled && styles.disabled, isSelected && styles.selected, xstyle),
+        }), isInteractive || hasChildren && onClick == null ? focusOutlineProps.focusWithinOrPublished(styles.contentWrapper, styles.focusLift, 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) : stylex.props(styles.contentWrapper, densityStyles[density], isDisabled && styles.disabled, isSelected && styles.selected, xstyle),
         // Consumer row props are merged last so useContainerReveal can
         // publish both its classes and inline custom properties. Seed the
         // private indent first, then preserve the standard inline-style
@@ -475,6 +498,7 @@ export function TreeListItem({
         ref: forwardsToLink ? linkRowRef : undefined,
         onClick: forwardsToLink ? delegateToLink : handleClick,
         onMouseUp: forwardsToLink ? openLinkOnMiddleClick : undefined,
+        onPointerDown: forwardsToLink || handleClick != null ? pressOnRow : undefined,
         children: /*#__PURE__*/_jsx("div", {
           ...{
             className: "x78zum5 x98rzlu xeuugli x1h91t0o x14kbac9 xw2xrtw"