chore: forwardRef from SideNavigationLink component (#1118)

canonical · Aug 23, 2024 · 9546e5d · 9546e5d
1 parent 2339e4c
commit 9546e5d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git 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<L> {...props} />;
+    content = <SideNavigationLink {...props} />;
   } else {
     ({ children: content, ...liProps } = props);
   }

diff --git 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;