Cannot specify as props for CNavLink in CNavItem

[mst-mkt]

Environment

• OS: ArchLinux (likely occurs with other OS as well)
• Browser: Vivaldi (Chromium-based) 6.9.3447.44 (likely occurs with other browsers)

Source Code

coreui-react/packages/coreui-react/src/components/nav/CNavItem.tsx

Lines 18 to 33 in 2652a91

	export const CNavItem: PolymorphicRefForwardingComponent<'li', CNavItemProps> = forwardRef<
	HTMLLIElement,
	CNavItemProps
	>(({ children, as: Component = 'li', className, ...rest }, ref) => {
	return (
	<Component className={classNames('nav-item', className)} ref={ref}>
	{rest.href || rest.to ? (
	<CNavLink className={className} {...rest}>
	{children}
	</CNavLink>
	) : (
	children
	)}
	</Component>
	)
	})

Description

It is not possible to pass as props to <CNavLink> inside a <CNavItem>, which was previously possible. This makes it impossible to use the Router's <Link> (e.g. <NavLink> from react-router-dom) component within <CNav>.

Problem Explanation

This issue likely occurred due to the following changes:
2652a91?diff=split&w=0#diff-1e4fdbb5559a22bedb4e23de9ec5e8452d240aef08945cc08c18168f68a051d6L7-R33

The as prop that was previously passed to <CNavLink> as rest is now used in the part that wraps (previously li). This change has caused the as prop to no longer function correctly when passing <Link>.

Proposed Solution

One possible solution is to add a navLinkAs prop, as shown below.

import React, { ElementType, forwardRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

import { CNavLink, CNavLinkProps } from './CNavLink'

import { PolymorphicRefForwardingComponent } from '../../helpers'

export interface CNavItemProps extends Omit<CNavLinkProps, 'component'> {
  as?: ElementType
  navLinkAs?: ElementType
}

export const CNavItem: PolymorphicRefForwardingComponent<'li', CNavItemProps> = forwardRef<
  HTMLLIElement,
  CNavItemProps
>(({ children, as: Component = 'li', navLinkAs, className, ...rest }, ref) => {
  return (
    <Component className={classNames('nav-item', className)} ref={ref}>
      {rest.href || rest.to ? (
        <CNavLink className={className} as={navLinkAs} {...rest}>
          {children}
        </CNavLink>
      ) : (
        children
      )}
    </Component>
  )
})

CNavItem.propTypes = {
  as: PropTypes.elementType,
  navLinkAs: PropTypes.elementType,
  children: PropTypes.node,
  className: PropTypes.string,
}

If necessary, I can create a PR with the above changes.