feat: added ploymorphicProps to UIShell Link (#18540)

* feat: added ploymorphicProps to Link in UIShell

* fix: fixex typescript error

* fix: fixed typescript  error

* fix: fixed typescript error in switcheritem

* fix: clean up comments

Author: guidari

packages/react/src/components/UIShell/HeaderMenuItem.tsx

@@ -15,19 +15,23 @@ import React, {
   WeakValidationMap,
 } from 'react';
 import cx from 'classnames';
-import Link, { LinkProps, LinkPropTypes } from './Link';
+import Link, { LinkPropTypes } from './Link';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 
-export type HeaderMenuItemProps<E extends ElementType> = LinkProps<E> & {
+export interface HeaderMenuItemBaseProps {
   className?: string | undefined;
   isActive?: boolean | undefined;
   isCurrentPage?: boolean | undefined;
   'aria-current'?: string | undefined;
   children: ReactNode;
   role?: ComponentProps<'li'>['role'];
   tabIndex?: number | undefined;
-};
+}
+
+export type HeaderMenuItemProps<E extends ElementType = 'a'> =
+  PolymorphicComponentPropWithRef<E, HeaderMenuItemBaseProps>;
 
 export interface HeaderMenuItemComponent {
   <E extends ElementType = 'a'>(

packages/react/src/components/UIShell/Link.tsx

@@ -7,32 +7,42 @@
 
 import PropTypes from 'prop-types';
 import React, {
+  ForwardedRef,
   type ElementType,
-  type ForwardedRef,
-  forwardRef,
   type WeakValidationMap,
-  type Ref,
 } from 'react';
 import deprecate from '../../prop-types/deprecate';
-import { type PolymorphicProps } from '../../types/common';
+import { PolymorphicRef } from '../../internal/PolymorphicProps';
+import { PolymorphicProps } from '../../types/common';
+import { HeaderMenuItemBaseProps } from './HeaderMenuItem';
 
 // Note: Maybe we should use `as` instead of `element`? `as` appears to be
 // standard and is used in other places in this project.
 
-type LinkBaseProps<E extends ElementType> = {
+export interface LinkBaseProps {
   /**
    * @deprecated Use `as` instead
    */
-  element?: E | undefined;
-  ref?: Ref<E>;
-};
+  element?: undefined;
+  ref?: ForwardedRef<ElementType>;
+}
 
-export type LinkProps<E extends ElementType> = PolymorphicProps<
+export type LinkProps<E extends React.ElementType> = PolymorphicProps<
   E,
-  LinkBaseProps<E>
+  LinkBaseProps
 >;
 
-function LinkRenderFunction<E extends ElementType = 'a'>(
+export interface LinkComponent {
+  <E extends ElementType = 'a'>(
+    props: LinkProps<E> | HeaderMenuItemBaseProps
+  ): JSX.Element | null;
+  displayName?: string;
+  propTypes?: WeakValidationMap<LinkProps<any>>;
+}
+
+export const Link: LinkComponent = React.forwardRef(function LinkRenderFunction<
+  E extends ElementType = 'a',
+>(
   {
     element,
     as: BaseComponent,
@@ -41,24 +51,17 @@ function LinkRenderFunction<E extends ElementType = 'a'>(
     isSideNavExpanded: _isSideNavExpanded,
     ...rest
   }: LinkProps<E>,
-  ref: ForwardedRef<E>
+  ref: PolymorphicRef<E>
 ) {
   const BaseComponentAsAny = (BaseComponent ?? element ?? 'a') as any;
   return <BaseComponentAsAny ref={ref} {...rest} />;
-}
-
+}) as LinkComponent;
 /**
  * Link is a custom component that allows us to supporting rendering elements
  * other than `a` in our markup. The goal is to allow users to support passing
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-const Link = forwardRef(LinkRenderFunction) as (<E extends ElementType = 'a'>(
-  props: LinkProps<E>
-) => JSX.Element) & {
-  displayName?: string;
-  propTypes?: WeakValidationMap<LinkProps<any>>;
-};
 
 const LinkPropTypes = {
   /**

packages/react/src/components/UIShell/SideNavMenuItem.tsx

@@ -12,7 +12,7 @@ import SideNavLinkText from './SideNavLinkText';
 import Link from './Link';
 import { usePrefix } from '../../internal/usePrefix';
 
-export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
+export type SideNavMenuItemProps = ComponentProps<typeof Link> & {
   /**
    * Specify the children to be rendered inside of the `SideNavMenuItem`
    */
@@ -39,7 +39,7 @@ export interface SideNavMenuItemProps extends ComponentProps<typeof Link> {
    * Optional component to render instead of default Link
    */
   as?: ElementType;
-}
+};
 
 const SideNavMenuItem = React.forwardRef<HTMLElement, SideNavMenuItemProps>(
   function SideNavMenuItem(props, ref: ForwardedRef<HTMLElement>) {
@@ -72,6 +72,11 @@ const SideNavMenuItem = React.forwardRef<HTMLElement, SideNavMenuItemProps>(
 
 SideNavMenuItem.displayName = 'SideNavMenuItem';
 SideNavMenuItem.propTypes = {
+  /**
+   * Optional component to render instead of default Link
+   */
+  as: PropTypes.elementType as PropTypes.Validator<React.ElementType>,
+
   /**
    * Specify the children to be rendered inside of the `SideNavMenuItem`
    */
@@ -93,11 +98,6 @@ SideNavMenuItem.propTypes = {
    * `aria-current="page"`, as well.
    */
   isActive: PropTypes.bool,
-
-  /**
-   * Optional component to render instead of default Link
-   */
-  as: PropTypes.elementType,
 };
 
 export default SideNavMenuItem;

packages/react/src/components/UIShell/SwitcherItem.tsx

@@ -1,7 +1,9 @@
 import React, {
   ElementType,
+  ForwardedRef,
   forwardRef,
   HTMLAttributeAnchorTarget,
+  KeyboardEvent,
 } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -131,14 +133,14 @@ const SwitcherItem = forwardRef<ElementType, SwitcherItemProps>(
     return (
       <li className={classNames}>
         <Link
-          onKeyDown={(evt) => {
+          onKeyDown={(evt: KeyboardEvent<HTMLAnchorElement>) => {
             setTabFocus(evt);
             onKeyDown(evt);
           }}
           href={href}
           target={target}
           rel={rel}
-          ref={forwardRef}
+          ref={forwardRef as ForwardedRef<HTMLAnchorElement | any>}
           {...rest}
           className={linkClassName}
           tabIndex={tabIndex}