From 3b764732b88428b501968c2a8a38a03edf916161 Mon Sep 17 00:00:00 2001
From: Aaryan Porwal <aaryan.porwal@canonical.com>
Date: Fri, 6 Sep 2024 08:31:21 +0530
Subject: [PATCH] fix: forwardRef from SideNavigationLink component

---
 .../SideNavigationItem/SideNavigationItem.tsx |  2 +-
 .../SideNavigationLink.test.tsx               | 11 ++---
 .../SideNavigationLink/SideNavigationLink.tsx | 44 +++++++++++--------
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx
index 2222bda7..259bfe81 100644
--- a/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx
+++ b/src/components/SideNavigation/SideNavigationItem/SideNavigationItem.tsx
@@ -37,7 +37,7 @@ const SideNavigationItem = <L = SideNavigationLinkDefaultElement,>(
     const { nonInteractive: _, ...textProps } = props;
     content = <SideNavigationText {...textProps} />;
   } else if (!("children" in props)) {
-    content = <SideNavigationLink {...props} />;
+    content = <SideNavigationLink<L> {...props} />;
   } else {
     ({ children: content, ...liProps } = props);
   }
diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
index 8990982b..c6b20637 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import type { ButtonHTMLAttributes } from "react";
 
 import SideNavigationLink from "./SideNavigationLink";
 
@@ -32,11 +31,13 @@ it("displays a dark icon", () => {
 });
 
 it("can use a custom link component", () => {
-  const Link = ({ ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
-    <button {...props} />
-  );
   const label = "Test content";
-  render(<SideNavigationLink label={label} component={Link} />);
+  const Link = ({ to, ...props }: { to: () => void }) => (
+    <button {...props} onClick={to}>
+      {label}
+    </button>
+  );
+  render(<SideNavigationLink label={label} component={Link} to={jest.fn()} />);
   expect(screen.getByRole("button", { name: label })).toHaveClass(
     "p-side-navigation__link",
   );
diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
index 15493174..0b6c3734 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React from "react";
 import classNames from "classnames";
 import type { HTMLProps } from "react";
 
@@ -7,7 +7,7 @@ import SideNavigationBase from "../SideNavigationBase";
 
 export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
 
-export type Props<L = LinkDefaultElement> = Omit<
+export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = Omit<
   SideNavigationBaseProps<L>,
   "component"
 > & {
@@ -16,22 +16,30 @@ export type Props<L = LinkDefaultElement> = Omit<
    * @default a
    */
   component?: SideNavigationBaseProps<L>["component"];
+  /**
+   * A ref to pass to the link element.
+   */
+  forwardRef?: React.Ref<E> | null;
+};
+
+const SideNavigationLink = <L = LinkDefaultElement, E = HTMLAnchorElement>({
+  component,
+  forwardRef,
+  ...props
+}: Props<L, E>) => {
+  let className: string | null = null;
+  if ("className" in props && typeof props.className === "string") {
+    className = props.className;
+    delete props.className;
+  }
+  return (
+    <SideNavigationBase
+      className={classNames("p-side-navigation__link", className)}
+      component={component ?? "a"}
+      {...props}
+      ref={forwardRef}
+    />
+  );
 };
-const SideNavigationLink = forwardRef<HTMLAnchorElement, Props>(
-  ({ component, ...props }: Props) => {
-    let className: string | null = null;
-    if ("className" in props && typeof props.className === "string") {
-      className = props.className;
-      delete props.className;
-    }
-    return (
-      <SideNavigationBase
-        className={classNames("p-side-navigation__link", className)}
-        component={component ?? "a"}
-        {...props}
-      />
-    );
-  },
-);
 
 export default SideNavigationLink;