From 1ec4e5fb8978e780f7cf1f3d570baa63e0843153 Mon Sep 17 00:00:00 2001
From: Aaryan Porwal <aaryan.porwal@canonical.com>
Date: Thu, 22 Aug 2024 22:26:44 +0530
Subject: [PATCH] chore: forwardRef from SideNavigationLink component

---
 .../SideNavigationLink/SideNavigationLink.tsx | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
index d46b45091..858250120 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import classNames from "classnames";
 import type { HTMLProps } from "react";
 
@@ -17,23 +17,21 @@ export type Props<L = LinkDefaultElement> = Omit<
    */
   component?: SideNavigationBaseProps<L>["component"];
 };
-
-const SideNavigationLink = <L = LinkDefaultElement,>({
-  component,
-  ...props
-}: Props<L>) => {
-  let className: string | null = null;
-  if ("className" in props && typeof props.className === "string") {
-    className = props.className;
-    delete props.className;
+const SideNavigationLink = forwardRef<HTMLAnchorElement, Props>(
+  ({ component, ref, ...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}
+      />
+    );
   }
-  return (
-    <SideNavigationBase
-      className={classNames("p-side-navigation__link", className)}
-      component={component ?? "a"}
-      {...props}
-    />
-  );
-};
+);
 
 export default SideNavigationLink;