@coreui/react-pro 5.0.0-beta.1 → 5.0.0-rc.1

package/src/components/widgets/CWidgetStatsA.tsx

@@ -40,10 +40,7 @@ export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
   ({ action, chart, className, color, title, value, ...rest }, ref) => {
     return (
       <CCard
-        className={classNames(
-          { [`bg-${color}`]: color, 'text-white': color },
-          className,
-        )}
+        className={classNames({ [`bg-${color}`]: color, 'text-white': color }, className)}
         {...rest}
         ref={ref}
       >

package/src/components/widgets/CWidgetStatsC.tsx

@@ -6,6 +6,7 @@ import { CProgress, CProgressProps } from '../progress/CProgress'
 
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
+import classNames from 'classnames'
 
 export interface CWidgetStatsCProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -53,7 +54,16 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
         ref={ref}
       >
         <CCardBody>
-          {icon && <div className="text-end mb-4">{icon}</div>}
+          {icon && (
+            <div
+              className={classNames(
+                'text-end mb-4',
+                inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
+              )}
+            >
+              {icon}
+            </div>
+          )}
           {value && <div className="fs-4 fw-semibold">{value}</div>}
           {title && (
             <div className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

@@ -41,9 +41,7 @@ test('CWidgetStatsD customize', async () => {
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveClass('fw-semibold')
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveTextContent('89K')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-uppercase')
-      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass(
-        'text-body-secondary',
-      )
+      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-body-secondary')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('small')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveTextContent('friends')
     }

package/src/helpers/index.ts

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

package/src/helpers/polymorphicComponent.ts

@@ -0,0 +1,21 @@
+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, // eslint-disable-line @typescript-eslint/no-explicit-any
+  ): ReactNode | null
+  propTypes?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  defaultProps?: Partial<P>
+  displayName?: string
+}

package/src/utils/getTransitionDurationFromElement.ts

@@ -21,4 +21,4 @@ const getTransitionDurationFromElement = (element: HTMLElement) => {
   return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
 }
 
-export default getTransitionDurationFromElement
+export default getTransitionDurationFromElement

package/src/components/list-group/CListGroupItem.tsx~HEAD

@@ -1,81 +0,0 @@
-import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { CLink } from '../link/CLink'
-
-import { colorPropType } from '../../props'
-import type { Colors } from '../../types'
-
-export interface CListGroupItemProps
-  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
-  /**
-   * Toggle the active state for the component.
-   */
-  active?: boolean
-  /**
-   * A string of all className you want applied to the component.
-   */
-  className?: string
-  /**
-   * Sets the color context of the component to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   */
-  color?: Colors
-  /**
-   * Toggle the disabled state for the component.
-   */
-  disabled?: boolean
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
-}
-
-export const CListGroupItem = forwardRef<
-  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
-  CListGroupItemProps
->(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
-  const _className = classNames(
-    'list-group-item',
-    {
-      [`list-group-item-${color}`]: color,
-      'list-group-item-action': component === 'a' || component === 'button',
-      active,
-      disabled,
-    },
-    className,
-  )
-
-  const Component = component === 'a' || component === 'button' ? CLink : component
-
-  rest = {
-    ...((component === 'a' || component === 'button') && {
-      active,
-      disabled,
-      component,
-      ref: ref,
-    }),
-    ...(active && { 'aria-current': true }),
-    ...(disabled && { 'aria-disabled': true }),
-    ...rest,
-  }
-
-  return (
-    <Component className={_className} {...rest}>
-      {children}
-    </Component>
-  )
-})
-
-CListGroupItem.propTypes = {
-  active: PropTypes.bool,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  color: colorPropType,
-  component: PropTypes.elementType,
-  disabled: PropTypes.bool,
-}
-
-CListGroupItem.displayName = 'CListGroupItem'