@coreui/react 5.0.0-rc.0 → 5.0.0-rc.1

package/dist/esm/components/tooltip/CTooltip.js

@@ -11,10 +11,11 @@ import getRTLPlacement from '../../utils/getRTLPlacement.js';
 import Transition from '../../node_modules/react-transition-group/esm/Transition.js';
 
 var CTooltip = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, container = _a.container, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 6] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, _g = _a.trigger, trigger = _g === void 0 ? ['hover', 'focus'] : _g, visible = _a.visible, rest = __rest(_a, ["children", "animation", "className", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, container = _a.container, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 6] : _e, onHide = _a.onHide; _a.onShow; var _f = _a.placement, placement = _f === void 0 ? 'top' : _f, _g = _a.trigger, trigger = _g === void 0 ? ['hover', 'focus'] : _g, visible = _a.visible, rest = __rest(_a, ["children", "animation", "className", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
     var tooltipRef = useRef(null);
     var togglerRef = useRef(null);
     var forkedRef = useForkedRef(ref, tooltipRef);
+    var uID = useRef("tooltip".concat(Math.floor(Math.random() * 1000000)));
     var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
     var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
     var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
@@ -44,14 +45,6 @@ var CTooltip = forwardRef(function (_a, ref) {
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    useEffect(function () {
-        if (_visible && togglerRef.current && tooltipRef.current) {
-            initPopper(togglerRef.current, tooltipRef.current, popperConfig);
-        }
-        return function () {
-            destroyPopper();
-        };
-    }, [_visible]);
     var toggleVisible = function (visible) {
         if (visible) {
             setTimeout(function () { return setVisible(true); }, _delay.show);
@@ -60,7 +53,9 @@ var CTooltip = forwardRef(function (_a, ref) {
         setTimeout(function () { return setVisible(false); }, _delay.hide);
     };
     return (React.createElement(React.Fragment, null,
-        React.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
+        React.cloneElement(children, __assign(__assign(__assign(__assign(__assign({}, (_visible && {
+            'aria-describedby': uID.current,
+        })), { ref: togglerRef }), ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return toggleVisible(!_visible); },
         })), ((trigger === 'focus' || trigger.includes('focus')) && {
             onFocus: function () { return toggleVisible(true); },
@@ -70,7 +65,17 @@ var CTooltip = forwardRef(function (_a, ref) {
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
         React.createElement(CConditionalPortal, { container: container, portal: true },
-            React.createElement(Transition, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: onShow, onExit: onHide, timeout: {
+            React.createElement(Transition, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: function () {
+                    if (togglerRef.current && tooltipRef.current) {
+                        initPopper(togglerRef.current, tooltipRef.current, popperConfig);
+                    }
+                }, onEntering: function () {
+                    if (togglerRef.current && tooltipRef.current) {
+                        tooltipRef.current.style.display = 'initial';
+                    }
+                }, onExit: onHide, onExited: function () {
+                    destroyPopper();
+                }, timeout: {
                     enter: 0,
                     exit: tooltipRef.current
                         ? getTransitionDurationFromElement(tooltipRef.current) + 50
@@ -78,7 +83,9 @@ var CTooltip = forwardRef(function (_a, ref) {
                 }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('tooltip', 'bs-tooltip-auto', {
                     fade: animation,
                     show: state === 'entered',
-                }, className), ref: forkedRef, role: "tooltip" }, rest),
+                }, className), id: uID.current, ref: forkedRef, role: "tooltip", style: {
+                    display: 'none',
+                } }, rest),
                 React.createElement("div", { className: "tooltip-arrow" }),
                 React.createElement("div", { className: "tooltip-inner" }, content))); }))));
 });

package/dist/esm/components/tooltip/CTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"CTooltip.js","sources":["../../../../src/components/tooltip/CTooltip.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"CTooltip.js","sources":["../../../../src/components/tooltip/CTooltip.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/helpers/index.d.ts

@@ -0,0 +1,2 @@
+import { PolymorphicRefForwardingComponent } from './polymorphicComponent';
+export { PolymorphicRefForwardingComponent };

package/dist/esm/helpers/polymorphicComponent.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef, ElementType, PropsWithChildren, ReactNode } from 'react';
+export type Omit<T, U> = Pick<T, Exclude<keyof T, keyof U>>;
+export type ReplaceProps<Inner extends ElementType, P> = Omit<ComponentPropsWithRef<Inner>, P> & P;
+export interface AsProp<As extends ElementType = ElementType> {
+    as?: As;
+}
+export interface Props<As extends ElementType = ElementType> extends AsProp<As> {
+}
+export interface PolymorphicRefForwardingComponent<TInitial extends ElementType, P = unknown> {
+    <As extends ElementType = TInitial>(props: PropsWithChildren<ReplaceProps<As, Props<As> & P>>, context?: any): ReactNode | null;
+    propTypes?: any;
+    defaultProps?: Partial<P>;
+    displayName?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.0.0-rc.0",
+  "version": "5.0.0-rc.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.0.0-rc.0",
+    "@coreui/coreui": "^5.0.0-rc.1",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
@@ -49,12 +49,12 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
-    "@types/jest": "^29.5.8",
-    "@types/react": "18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@types/react-transition-group": "^4.4.9",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-transition-group": "^4.4.10",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
@@ -62,10 +62,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.4.1",
+    "rollup": "^4.9.1",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/alert/CAlertHeading.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CAlertHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CAlertHeading = forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
-  ({ children, className, component: Component = 'h4', ...rest }, ref) => {
-    return (
-      <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadingProps> =
+  forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
+    ({ children, as: Component = 'h4', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CAlertHeading.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CAlertHeading.displayName = 'CAlertHeading'

package/src/components/alert/__tests__/CAlertHeading.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CAlertHeading component', async () => {
 
 test('CAlertHeading customize', async () => {
   const { container } = render(
-    <CAlertHeading component="h3" className="bazinga">
+    <CAlertHeading as="h3" className="bazinga">
       Test
     </CAlertHeading>,
   )

package/src/components/badge/CBadge.tsx

@@ -2,10 +2,15 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType, shapePropType, textColorsPropType } from '../../props'
 import type { Colors, Shapes, TextColors } from '../../types'
 
 export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -16,10 +21,6 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Position badge in one of the corners of a link or button.
    */
@@ -41,13 +42,16 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
    */
   textColor?: TextColors
 }
-export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
+export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = forwardRef<
+  HTMLDivElement | HTMLSpanElement,
+  CBadgeProps
+>(
   (
     {
       children,
+      as: Component = 'span',
       className,
       color,
-      component: Component = 'span',
       position,
       shape,
       size,
@@ -83,10 +87,10 @@ export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
 )
 
 CBadge.propTypes = {
+  as: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.string,
   position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
   shape: shapePropType,
   size: PropTypes.oneOf(['sm']),

package/src/components/badge/__tests__/CBadge.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CBadge component', async () => {
 
 test('CBadge customize', async () => {
   const { container } = render(
-    <CBadge className="bazinga" color="warning" component="div" shape="rounded" textColor="white">
+    <CBadge className="bazinga" color="warning" as="div" shape="rounded" textColor="white">
       Test
     </CBadge>,
   )

package/src/components/button/CButton.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 
 import { CLink, CLinkProps } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors, Shapes } from '../../types'
 
@@ -12,6 +13,10 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
    * Toggle the active state for the component.
    */
   active?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the base component.
    */
@@ -22,10 +27,6 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Toggle the disabled state for the component.
    */
@@ -59,24 +60,17 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
   variant?: 'outline' | 'ghost'
 }
 
-export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButtonProps>(
+export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  CButtonProps
+>(
   (
-    {
-      children,
-      className,
-      color,
-      component = 'button',
-      shape,
-      size,
-      type = 'button',
-      variant,
-      ...rest
-    },
+    { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
     ref,
   ) => {
     return (
       <CLink
-        component={rest.href ? 'a' : component}
+        as={rest.href ? 'a' : as}
         {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
@@ -95,10 +89,10 @@ export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButton
 )
 
 CButton.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.elementType,
   shape: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),

package/src/components/button/__tests__/CButton.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CButton component', async () => {
 
 test('CButton customize witch href', async () => {
   const { container } = render(
-    <CButton color="primary" component="span" href="/bazinga">
+    <CButton color="primary" as="span" href="/bazinga">
       Test
     </CButton>,
   )
@@ -23,7 +23,7 @@ test('CButton customize', async () => {
       active={true}
       className="bazinga"
       color="warning"
-      component="span"
+      as="span"
       disabled={true}
       role="bazinga"
       shape="rounded"

package/src/components/card/CCardHeader.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardHeader = forwardRef<HTMLDivElement, CCardHeaderProps>(
-  ({ children, component: Component = 'div', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-header', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardHeader: PolymorphicRefForwardingComponent<'div', CCardHeaderProps> = forwardRef<
+  HTMLDivElement,
+  CCardHeaderProps
+>(({ children, as: Component = 'div', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-header', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardHeader.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardHeader.displayName = 'CCardHeader'

package/src/components/card/CCardImage.tsx

@@ -2,26 +2,28 @@ import React, { ElementType, forwardRef, ImgHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardImageProps
   extends ImgHTMLAttributes<HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
   /**
    * Optionally orientate the image to the top, bottom, or make it overlaid across the card.
    */
   orientation?: 'top' | 'bottom'
 }
 
-export const CCardImage = forwardRef<
+export const CCardImage: PolymorphicRefForwardingComponent<'img', CCardImageProps> = forwardRef<
   HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
   CCardImageProps
->(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
+>(({ children, as: Component = 'img', className, orientation, ...rest }, ref) => {
   return (
     <Component
       className={classNames(orientation ? `card-img-${orientation}` : 'card-img', className)}
@@ -34,9 +36,9 @@ export const CCardImage = forwardRef<
 })
 
 CCardImage.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   orientation: PropTypes.oneOf(['top', 'bottom']),
 }
 

package/src/components/card/CCardSubtitle.tsx

@@ -2,30 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardSubtitleProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
-export const CCardSubtitle = forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
-  ({ children, component: Component = 'h6', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+
+export const CCardSubtitle: PolymorphicRefForwardingComponent<'h6', CCardSubtitleProps> =
+  forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
+    ({ children, as: Component = 'h6', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CCardSubtitle.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardSubtitle.displayName = 'CCardSubtitle'

package/src/components/card/CCardText.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardTextProps extends HTMLAttributes<HTMLParagraphElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardText = forwardRef<HTMLParagraphElement, CCardTextProps>(
-  ({ children, component: Component = 'p', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-text', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardText: PolymorphicRefForwardingComponent<'p', CCardTextProps> = forwardRef<
+  HTMLParagraphElement,
+  CCardTextProps
+>(({ children, as: Component = 'p', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-text', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardText.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardText.displayName = 'CCardText'

package/src/components/card/CCardTitle.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardTitle = forwardRef<HTMLHeadingElement, CCardTitleProps>(
-  ({ children, component: Component = 'h5', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-title', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardTitle: PolymorphicRefForwardingComponent<'h5', CCardTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  CCardTitleProps
+>(({ children, as: Component = 'h5', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-title', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardTitle.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardTitle.displayName = 'CCardTitle'

package/src/components/card/__tests__/CCardGroup.spec.tsx

@@ -30,7 +30,7 @@ test('CCardGroup full example', async () => {
   const { container } = render(
     <CCardGroup className="bazinga">
       <CCard>
-        <CCardImage component="svg">Image</CCardImage>
+        <CCardImage as="svg">Image</CCardImage>
         <CCardHeader>Header</CCardHeader>
         <CCardBody>
           <CCardTitle>Title</CCardTitle>