Link, ButtonLink: support to experimental onMouseEnter, onMouseLeave …

…to support prefetching logic (#3933)
pinterest · Jan 13, 2025 · ed9cb16 · ed9cb16
1 parent 2723345
commit ed9cb16
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 0 deletions.
diff --git a/packages/gestalt/src/ButtonLink.tsx b/packages/gestalt/src/ButtonLink.tsx
@@ -74,6 +74,15 @@ type ButtonProps = {
     event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLAnchorElement>;
     dangerouslyDisableOnNavigation: () => void;
   }) => void;
+  /**
+   * Callback fired when a mouse pointer moves in a ButtonLink component.
+   */
+  _onMouseEnter?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
+  /**
+   * Callback fired when a mouse pointer moves out a ButtonLink component.
+   */
+  _onMouseLeave?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
+
   /**
    * sm: 32px, md: 40px, lg: 48px
    */
@@ -117,6 +126,9 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
     iconEnd,
     iconStart,
     onClick,
+    _onMouseEnter,
+    _onMouseLeave,
+
     tabIndex = 0,
     size = 'md',
     text,
@@ -176,6 +188,14 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
         })
       : undefined;
 
+  const handleOnMouseEnter: ComponentProps<typeof InternalLink>['onMouseEnter'] = ({ event }) => {
+    // @ts-expect-error - TS2322 - Type 'MouseEvent<HTMLAnchorElement, MouseEvent> | MouseEvent<HTMLDivElement, MouseEvent>' is not assignable to type 'MouseEvent<HTMLAnchorElement, MouseEvent>'.
+    _onMouseEnter?.({ event });
+  };
+  const handleOnMouseLeave: ComponentProps<typeof InternalLink>['onMouseLeave'] = ({ event }) =>
+    // @ts-expect-error - TS2322 - Type 'MouseEvent<HTMLAnchorElement, MouseEvent> | MouseEvent<HTMLDivElement, MouseEvent>' is not assignable to type 'MouseEvent<HTMLAnchorElement, MouseEvent>'.
+    _onMouseLeave?.({ event });
+
   return (
     <InternalLink
       ref={innerRef}
@@ -187,6 +207,8 @@ const ButtonLinkWithForwardRef = forwardRef<HTMLAnchorElement, ButtonProps>(func
       fullWidth={fullWidth}
       href={href}
       onClick={handleClick}
+      onMouseEnter={handleOnMouseEnter}
+      onMouseLeave={handleOnMouseLeave}
       rel={rel}
       selected={false}
       size={size}

diff --git a/packages/gestalt/src/Link.tsx b/packages/gestalt/src/Link.tsx
@@ -78,6 +78,14 @@ type Props = {
    * Callback triggered when when the element loses focus.
    */
   onBlur?: (arg1: { event: React.FocusEvent<HTMLAnchorElement> }) => void;
+  /**
+   * Callback fired when a mouse pointer moves in a Link component.
+   */
+  _onMouseEnter?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
+  /**
+   * Callback fired when a mouse pointer moves out a Link component.
+   */
+  _onMouseLeave?: (arg1: { event: React.MouseEvent<HTMLAnchorElement> }) => void;
   /**
    * Callback fired when Link is clicked (pressed and released) with a mouse or keyboard. See [GlobalEventsHandlerProvider](https://gestalt.pinterest.systems/web/utilities/globaleventshandlerprovider#Link-handlers) to learn more about link navigation.
    */
@@ -137,6 +145,8 @@ const LinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function Link(
     href,
     id,
     onBlur,
+    _onMouseEnter,
+    _onMouseLeave,
     onClick,
     onFocus,
     rel = 'none',
@@ -276,6 +286,8 @@ const LinkWithForwardRef = forwardRef<HTMLAnchorElement, Props>(function Link(
       }}
       onKeyPress={handleKeyPress}
       onMouseDown={handleMouseDown}
+      onMouseEnter={(event) => _onMouseEnter?.({ event })}
+      onMouseLeave={(event) => _onMouseLeave?.({ event })}
       onMouseUp={handleMouseUp}
       onTouchCancel={handleTouchCancel}
       onTouchEnd={handleTouchEnd}

diff --git a/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap
@@ -97,6 +97,8 @@ Array [
                     onFocus={[Function]}
                     onKeyPress={[Function]}
                     onMouseDown={[Function]}
+                    onMouseEnter={[Function]}
+                    onMouseLeave={[Function]}
                     onMouseUp={[Function]}
                     onTouchCancel={[Function]}
                     onTouchEnd={[Function]}
@@ -205,6 +207,8 @@ Array [
                   onFocus={[Function]}
                   onKeyPress={[Function]}
                   onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
                   onMouseUp={[Function]}
                   onTouchCancel={[Function]}
                   onTouchEnd={[Function]}
@@ -333,6 +337,8 @@ Array [
                     onFocus={[Function]}
                     onKeyPress={[Function]}
                     onMouseDown={[Function]}
+                    onMouseEnter={[Function]}
+                    onMouseLeave={[Function]}
                     onMouseUp={[Function]}
                     onTouchCancel={[Function]}
                     onTouchEnd={[Function]}
@@ -441,6 +447,8 @@ Array [
                   onFocus={[Function]}
                   onKeyPress={[Function]}
                   onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
                   onMouseUp={[Function]}
                   onTouchCancel={[Function]}
                   onTouchEnd={[Function]}

diff --git a/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
@@ -100,6 +100,8 @@ exports[`BannerSlim renders complex message 1`] = `
             onFocus={[Function]}
             onKeyPress={[Function]}
             onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
             onMouseUp={[Function]}
             onTouchCancel={[Function]}
             onTouchEnd={[Function]}
@@ -400,6 +402,8 @@ exports[`BannerSlim renders simple message with helper link 1`] = `
               onFocus={[Function]}
               onKeyPress={[Function]}
               onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
               onMouseUp={[Function]}
               onTouchCancel={[Function]}
               onTouchEnd={[Function]}

diff --git a/packages/gestalt/src/__snapshots__/Link.test.tsx.snap b/packages/gestalt/src/__snapshots__/Link.test.tsx.snap
@@ -9,6 +9,8 @@ exports[`default 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -29,6 +31,8 @@ exports[`external link with nofollow 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -68,6 +72,8 @@ exports[`inline and auto underline 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -88,6 +94,8 @@ exports[`inline and overriden underline="hover" 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -108,6 +116,8 @@ exports[`inline and overriden underline="none" 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -128,6 +138,8 @@ exports[`regular 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -148,6 +160,8 @@ exports[`target blank 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -169,6 +183,8 @@ exports[`target null 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -189,6 +205,8 @@ exports[`target self 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -210,6 +228,8 @@ exports[`with custom rounding, and tapStyle 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}
@@ -230,6 +250,8 @@ exports[`with onClick 1`] = `
   onFocus={[Function]}
   onKeyPress={[Function]}
   onMouseDown={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
   onMouseUp={[Function]}
   onTouchCancel={[Function]}
   onTouchEnd={[Function]}

diff --git a/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap b/packages/gestalt/src/__snapshots__/PageHeader.test.tsx.snap
@@ -633,6 +633,8 @@ exports[`PageHeader renders secondary action 1`] = `
                         onFocus={[Function]}
                         onKeyPress={[Function]}
                         onMouseDown={[Function]}
+                        onMouseEnter={[Function]}
+                        onMouseLeave={[Function]}
                         onMouseUp={[Function]}
                         onTouchCancel={[Function]}
                         onTouchEnd={[Function]}

diff --git a/packages/gestalt/src/__snapshots__/Status.test.tsx.snap b/packages/gestalt/src/__snapshots__/Status.test.tsx.snap
@@ -107,6 +107,8 @@ exports[`Status renders with rich title 1`] = `
             onFocus={[Function]}
             onKeyPress={[Function]}
             onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
             onMouseUp={[Function]}
             onTouchCancel={[Function]}
             onTouchEnd={[Function]}

diff --git a/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap b/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
@@ -93,6 +93,8 @@ exports[`<Toast /> Text + _dangerouslySetPrimaryAction 1`] = `
               onFocus={[Function]}
               onKeyPress={[Function]}
               onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
               onMouseUp={[Function]}
               onTouchCancel={[Function]}
               onTouchEnd={[Function]}
@@ -215,6 +217,8 @@ exports[`<Toast /> Text + Image + Button 1`] = `
               onFocus={[Function]}
               onKeyPress={[Function]}
               onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
               onMouseUp={[Function]}
               onTouchCancel={[Function]}
               onTouchEnd={[Function]}
@@ -337,6 +341,8 @@ exports[`<Toast /> Text + Image 1`] = `
               onFocus={[Function]}
               onKeyPress={[Function]}
               onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
               onMouseUp={[Function]}
               onTouchCancel={[Function]}
               onTouchEnd={[Function]}