@coreui/react-pro 4.9.0-next.0 → 4.9.0

package/src/components/callout/CCallout.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CCalloutProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -19,16 +20,18 @@ export interface CCalloutProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCallout = forwardRef<HTMLDivElement, CCalloutProps>(
   ({ children, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      'callout',
-      {
-        [`callout-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'callout',
+          {
+            [`callout-${color}`]: color,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/card/CCard.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Gradients, colorPropType, gradientsPropType } from '../Types'
+import { colorPropType, gradientsPropType } from '../../props'
+import type { Colors, Gradients } from '../../types'
 
 export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -25,17 +26,19 @@ export interface CCardProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCard = forwardRef<HTMLDivElement, CCardProps>(
   ({ children, className, color, textColor, ...rest }, ref) => {
-    const _className = classNames(
-      'card',
-      {
-        [`bg-${color}`]: color,
-        [`text-${textColor}`]: textColor,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'card',
+          {
+            [`bg-${color}`]: color,
+            [`text-${textColor}`]: textColor,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/card/CCardBody.tsx

@@ -11,10 +11,8 @@ export interface CCardBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardBody = forwardRef<HTMLDivElement, CCardBodyProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-body', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-body', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardFooter.tsx

@@ -11,10 +11,8 @@ export interface CCardFooterProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardFooter = forwardRef<HTMLDivElement, CCardFooterProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-footer', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-footer', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardGroup.tsx

@@ -11,10 +11,8 @@ export interface CCardGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardGroup = forwardRef<HTMLDivElement, CCardGroupProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-group', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-group', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardHeader.tsx

@@ -15,10 +15,8 @@ export interface CCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardHeader = forwardRef<HTMLDivElement, CCardHeaderProps>(
   ({ children, component: Component = 'div', className, ...rest }, ref) => {
-    const _className = classNames('card-header', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-header', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/card/CCardImage.tsx

@@ -22,10 +22,12 @@ export const CCardImage = forwardRef<
   HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
   CCardImageProps
 >(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
-  const _className = classNames(orientation ? `card-img-${orientation}` : 'card-img', className)
-
   return (
-    <Component className={_className} {...rest} ref={ref}>
+    <Component
+      className={classNames(orientation ? `card-img-${orientation}` : 'card-img', className)}
+      {...rest}
+      ref={ref}
+    >
       {children}
     </Component>
   )

package/src/components/card/CCardImageOverlay.tsx

@@ -11,10 +11,8 @@ export interface CCardImageOverlayProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCardImageOverlay = forwardRef<HTMLDivElement, CCardImageOverlayProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-img-overlay', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('card-img-overlay', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/card/CCardLink.tsx

@@ -17,10 +17,8 @@ export interface CCardLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const CCardLink = forwardRef<HTMLAnchorElement, CCardLinkProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('card-link', className)
-
     return (
-      <CLink className={_className} {...rest} ref={ref}>
+      <CLink className={classNames('card-link', className)} {...rest} ref={ref}>
         {children}
       </CLink>
     )

package/src/components/card/CCardSubtitle.tsx

@@ -14,10 +14,8 @@ export interface CCardSubtitleProps extends HTMLAttributes<HTMLHeadingElement> {
 }
 export const CCardSubtitle = forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
   ({ children, component: Component = 'h6', className, ...rest }, ref) => {
-    const _className = classNames('card-subtitle', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/card/CCardText.tsx

@@ -15,10 +15,8 @@ export interface CCardTextProps extends HTMLAttributes<HTMLParagraphElement> {
 
 export const CCardText = forwardRef<HTMLParagraphElement, CCardTextProps>(
   ({ children, component: Component = 'p', className, ...rest }, ref) => {
-    const _className = classNames('card-text', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-text', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/card/CCardTitle.tsx

@@ -15,10 +15,8 @@ export interface CCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export const CCardTitle = forwardRef<HTMLHeadingElement, CCardTitleProps>(
   ({ children, component: Component = 'h5', className, ...rest }, ref) => {
-    const _className = classNames('card-title', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('card-title', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/carousel/CCarousel.tsx

@@ -132,13 +132,6 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
       }
     })
 
-    const _className = classNames(
-      'carousel slide',
-      transition === 'crossfade' && 'carousel-fade',
-      dark && 'carousel-dark',
-      className,
-    )
-
     const cycle = () => {
       _pause()
       if (!wrap && active === itemsNumber - 1) {
@@ -230,7 +223,14 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
 
     return (
       <div
-        className={_className}
+        className={classNames(
+          'carousel slide',
+          {
+            'carousel-dark': dark,
+            'carousel-fade': transition === 'crossfade',
+          },
+          className,
+        )}
         onMouseEnter={_pause}
         onMouseLeave={cycle}
         {...(touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove })}

package/src/components/carousel/CCarouselCaption.tsx

@@ -11,9 +11,7 @@ export interface CCarouselCaptionProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCarouselCaption = forwardRef<HTMLDivElement, CCarouselCaptionProps>(
   ({ className, ...rest }, ref) => {
-    const _className = classNames('carousel-caption', className)
-
-    return <div className={_className} {...rest} ref={ref} />
+    return <div className={classNames('carousel-caption', className)} {...rest} ref={ref} />
   },
 )
 

package/src/components/carousel/CCarouselItem.tsx

@@ -94,16 +94,18 @@ export const CCarouselItem = forwardRef<HTMLDivElement, CCarouselItemProps>(
       }
     })
 
-    const _className = classNames(
-      'carousel-item',
-      activeClassName,
-      directionClassName,
-      orderClassName,
-      className,
-    )
-
     return (
-      <div className={_className} ref={forkedRef} {...rest}>
+      <div
+        className={classNames(
+          'carousel-item',
+          activeClassName,
+          directionClassName,
+          orderClassName,
+          className,
+        )}
+        ref={forkedRef}
+        {...rest}
+      >
         {children}
       </div>
     )

package/src/components/close-button/CCloseButton.tsx

@@ -19,19 +19,18 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const CCloseButton = forwardRef<HTMLButtonElement, CCloseButtonProps>(
   ({ className, disabled, white, ...rest }, ref) => {
-    const _className = classNames(
-      'btn',
-      'btn-close',
-      {
-        'btn-close-white': white,
-      },
-      disabled,
-      className,
-    )
     return (
       <button
         type="button"
-        className={_className}
+        className={classNames(
+          'btn',
+          'btn-close',
+          {
+            'btn-close-white': white,
+          },
+          disabled,
+          className,
+        )}
         aria-label="Close"
         disabled={disabled}
         {...rest}

package/src/components/collapse/CCollapse.tsx

@@ -30,20 +30,11 @@ export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
   ({ children, className, horizontal, onHide, onShow, visible, ...rest }, ref) => {
-    const [height, setHeight] = useState<number>()
-    const [width, setWidth] = useState<number>()
     const collapseRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, collapseRef)
 
-    const getTransitionClass = (state: string) => {
-      return state === 'entering'
-        ? 'collapsing'
-        : state === 'entered'
-        ? 'collapse show'
-        : state === 'exiting'
-        ? 'collapsing'
-        : 'collapse'
-    }
+    const [height, setHeight] = useState<number>()
+    const [width, setWidth] = useState<number>()
 
     const onEntering = () => {
       onShow && onShow()
@@ -88,13 +79,6 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
       setHeight(0)
     }
 
-    const _className = classNames(
-      {
-        'collapse-horizontal': horizontal,
-      },
-      className,
-    )
-
     return (
       <CSSTransition
         in={visible}
@@ -107,12 +91,16 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
         timeout={350}
       >
         {(state) => {
-          const transitionClass = getTransitionClass(state)
           const currentHeight = height === 0 ? null : { height }
           const currentWidth = width === 0 ? null : { width }
           return (
             <div
-              className={classNames(_className, transitionClass)}
+              className={classNames(className, {
+                'collapse-horizontal': horizontal,
+                collapsing: state === 'entering' || state === 'exiting',
+                'collapse show': state === 'entered',
+                collapse: state === 'exited',
+              })}
               style={{ ...currentHeight, ...currentWidth }}
               {...rest}
               ref={forkedRef}

package/src/components/collapse/__tests__/CCollapse.spec.tsx

@@ -15,7 +15,6 @@ test('CCollapse customize', async () => {
 })
 
 test('CCollapse use case test', async () => {
-  jest.useFakeTimers()
   const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
@@ -24,7 +23,7 @@ test('CCollapse use case test', async () => {
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
@@ -32,7 +31,7 @@ test('CCollapse use case test', async () => {
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')

package/src/components/conditional-portal/CConditionalPortal.tsx

@@ -0,0 +1,29 @@
+import React, { FC, ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import PropTypes from 'prop-types'
+
+export interface CConditionalPortalProps {
+  /**
+   * @ignore
+   */
+  children: ReactNode
+  /**
+   * Render some children into a different part of the DOM
+   */
+  portal: boolean
+}
+
+export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, portal }) => {
+  return typeof window !== 'undefined' && portal ? (
+    createPortal(children, document.body)
+  ) : (
+    <>{children}</>
+  )
+}
+
+CConditionalPortal.propTypes = {
+  children: PropTypes.node,
+  portal: PropTypes.bool.isRequired,
+}
+
+CConditionalPortal.displayName = 'CConditionalPortal'

package/src/components/conditional-portal/index.ts

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

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -12,9 +12,9 @@ import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormCont
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
-import { getLocalDateFromString } from '../calendar/utils'
+import { getLocalDateFromString } from './utils'
 
-import { Colors } from '../Types'
+import { Colors } from '../../types'
 export interface CDateRangePickerProps
   extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
     Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>,
@@ -304,15 +304,6 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       setEndDate(null)
     }
 
-    const _className = classNames(
-      'date-picker',
-      {
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
-
     const InputGroup = () => (
       <CInputGroup className="picker-input-group" size={size}>
         <CFormInput
@@ -409,7 +400,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
         valid={valid}
       >
         <CPicker
-          className={_className}
+          className={classNames(
+            'date-picker',
+            {
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
           disabled={disabled}
           footer={footer || timepicker}
           footerContent={
@@ -431,7 +429,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             )
           }
           id={id}
-          toggler={toggler ? toggler : InputGroup()}
+          toggler={toggler ?? InputGroup()}
           onCancel={() => {
             handleStartDateChange(initialStartDate)
             handleEndDateChange(initialEndDate)

package/src/components/date-range-picker/utils.ts

@@ -0,0 +1,49 @@
+export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
+  if (!Number.isNaN(Date.parse(string))) {
+    return new Date(Date.parse(string))
+  }
+
+  const date = new Date(2013, 11, 31, 17, 19, 22)
+  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
+  regex = regex
+    .replace('2013', '(?<year>[0-9]{2,4})')
+    .replace('12', '(?<month>[0-9]{1,2})')
+    .replace('31', '(?<day>[0-9]{1,2})')
+
+  if (time) {
+    regex = regex
+      .replace('5', '(?<hour>[0-9]{1,2})')
+      .replace('17', '(?<hour>[0-9]{1,2})')
+      .replace('19', '(?<minute>[0-9]{1,2})')
+      .replace('22', '(?<second>[0-9]{1,2})')
+      .replace('PM', '(?<ampm>[A-Z]{2})')
+  }
+
+  const rgx = new RegExp(`${regex}`)
+  const partials = string.match(rgx)
+
+  if (partials === null) return
+
+  const newDate =
+    partials.groups &&
+    (time
+      ? new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+          partials.groups['ampm']
+            ? partials.groups['ampm'] === 'PM'
+              ? Number(partials.groups['hour']) + 12
+              : Number(partials.groups['hour'])
+            : Number(partials.groups['hour']),
+          Number(partials.groups['minute']),
+          Number(partials.groups['second']),
+        )
+      : new Date(
+          Number(partials.groups['year']),
+          Number(partials.groups['month']) - 1,
+          Number(partials.groups['day']),
+        ))
+
+  return newDate
+}

package/src/components/dropdown/CDropdown.tsx

@@ -12,8 +12,9 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Manager } from 'react-popper'
 
-import { Placements, placementPropType } from '../Types'
 import { useForkedRef } from '../../hooks'
+import { placementPropType } from '../../props'
+import type { Placements } from '../../types'
 
 export type Directions = 'start' | 'end'
 
@@ -114,10 +115,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     },
     ref,
   ) => {
-    const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
     const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [_visible, setVisible] = useState(visible)
 
     const Component = variant === 'nav-item' ? 'li' : component
 
@@ -139,19 +140,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       setVisible,
     }
 
-    const _className = classNames(
-      variant === 'nav-item' ? 'nav-item dropdown' : variant,
-      {
-        show: _visible,
-      },
-      direction === 'center'
-        ? 'dropdown-center'
-        : direction === 'dropup-center'
-        ? 'dropup dropup-center'
-        : direction,
-      className,
-    )
-
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -161,23 +149,38 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const dropdownContent = () => {
+    const DropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
       ) : (
-        <Component className={_className} {...rest} ref={forkedRef}>
+        <Component
+          className={classNames(
+            variant === 'nav-item' ? 'nav-item dropdown' : variant,
+            {
+              'dropdown-center': direction === 'center',
+              'dropup dropup-center': direction === 'dropup-center',
+              direction: direction && direction !== 'center' && direction !== 'dropup-center',
+              show: _visible,
+            },
+            className,
+          )}
+          {...rest}
+          ref={forkedRef}
+        >
           {children}
         </Component>
       )
     }
 
-    return popper ? (
-      <CDropdownContext.Provider value={contextValues}>
-        <Manager>{dropdownContent()}</Manager>
-      </CDropdownContext.Provider>
-    ) : (
+    return (
       <CDropdownContext.Provider value={contextValues}>
-        {dropdownContent()}
+        {popper ? (
+          <Manager>
+            <DropdownContent />
+          </Manager>
+        ) : (
+          <DropdownContent />
+        )}
       </CDropdownContext.Provider>
     )
   },

package/src/components/dropdown/CDropdownDivider.tsx

@@ -11,9 +11,7 @@ export interface CDropdownDividerProps extends HTMLAttributes<HTMLHRElement> {
 
 export const CDropdownDivider = forwardRef<HTMLHRElement, CDropdownDividerProps>(
   ({ className, ...rest }, ref) => {
-    const _className = classNames('dropdown-divider', className)
-
-    return <hr className={_className} {...rest} ref={ref} />
+    return <hr className={classNames('dropdown-divider', className)} {...rest} ref={ref} />
   },
 )
 

package/src/components/dropdown/CDropdownHeader.tsx

@@ -15,10 +15,8 @@ export interface CDropdownHeaderProps extends HTMLAttributes<HTMLHeadingElement>
 
 export const CDropdownHeader = forwardRef<HTMLHeadingElement, CDropdownHeaderProps>(
   ({ children, className, component: Component = 'h6', ...rest }, ref) => {
-    const _className = classNames('dropdown-header', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('dropdown-header', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )