fix: forwardRef from SideNavigationLink component

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);
   }

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,11 @@ it("displays a dark icon", () => {
 });
 
 it("can use a custom link component", () => {
-  const Link = ({ ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
-    <button {...props} />
+  const Link = ({ to, label }: { to: () => void; label: string }) => (
+    <button onClick={to}>{label}</button>
   );
   const label = "Test content";
-  render(<SideNavigationLink label={label} component={Link} />);
+  render(<SideNavigationLink label={label} component={Link} to={jest.fn()} />);
   expect(screen.getByRole("button", { name: label })).toHaveClass(
     "p-side-navigation__link",
   );

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;