@coreui/react-pro 4.9.0-next.1 → 4.10.0

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

@@ -84,6 +84,12 @@ export interface CDateRangePickerProps
    * Set the ranges button variant to an outlined button or a ghost button.
    */
   rangesButtonsVariant?: 'outline' | 'ghost'
+  /**
+   * When present, it specifies that date must be filled out before submitting the form.
+   * 
+   * @since 4.10.0
+   */
+  required?: boolean
   /**
    * Default icon or character character that separates two dates.
    */
@@ -159,6 +165,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       rangesButtonsColor = 'secondary',
       rangesButtonsSize,
       rangesButtonsVariant = 'ghost',
+      required,
       separator = true,
       size,
       startDate,
@@ -304,15 +311,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
@@ -325,6 +323,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
           readOnly={inputReadOnly || typeof format === 'string'}
+          required={required}
           onChange={(event) => {
             const date = getLocalDateFromString(event.target.value, locale, timepicker)
             if (date instanceof Date && date.getTime()) {
@@ -355,6 +354,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
             readOnly={inputReadOnly || typeof format === 'string'}
+            required={required}
             onChange={(event) => {
               const date = getLocalDateFromString(event.target.value, locale, timepicker)
               if (date instanceof Date && date.getTime()) {
@@ -409,7 +409,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 +438,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             )
           }
           id={id}
-          toggler={toggler ? toggler : InputGroup()}
+          toggler={toggler ?? InputGroup()}
           onCancel={() => {
             handleStartDateChange(initialStartDate)
             handleEndDateChange(initialEndDate)
@@ -567,6 +574,7 @@ CDateRangePicker.propTypes = {
   rangesButtonsColor: CButton.propTypes?.color,
   rangesButtonsSize: CButton.propTypes?.size,
   rangesButtonsVariant: CButton.propTypes?.variant,
+  required: PropTypes.bool,
   separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   size: PropTypes.oneOf(['sm', 'lg']),
   timepicker: PropTypes.bool,

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

@@ -1,5 +1,5 @@
 export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
-  if (!isNaN(Date.parse(string))) {
+  if (!Number.isNaN(Date.parse(string))) {
     return new Date(Date.parse(string))
   }
 
@@ -19,7 +19,7 @@ export const getLocalDateFromString = (string: string, locale: string, time?: bo
       .replace('PM', '(?<ampm>[A-Z]{2})')
   }
 
-  const rgx = RegExp(`${regex}`)
+  const rgx = new RegExp(`${regex}`)
   const partials = string.match(rgx)
 
   if (partials === null) return

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  ReactNode,
   RefObject,
   useEffect,
   useRef,
@@ -87,6 +88,16 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
+const PopperManagerWrapper = ({
+  children,
+  popper,
+}: {
+  children: ReactNode
+  popper: boolean
+}) => {
+  return popper ? <Manager>{children}</Manager> : <>{children}</>
+}
+
 interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dropdownToggleRef: RefObject<any> | undefined
@@ -115,10 +126,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
 
@@ -140,19 +151,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])
@@ -162,23 +160,30 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const dropdownContent = () => {
-      return variant === 'input-group' ? (
-        <>{children}</>
-      ) : (
-        <Component className={_className} {...rest} ref={forkedRef}>
-          {children}
-        </Component>
-      )
-    }
-
-    return popper ? (
-      <CDropdownContext.Provider value={contextValues}>
-        <Manager>{dropdownContent()}</Manager>
-      </CDropdownContext.Provider>
-    ) : (
+    return (
       <CDropdownContext.Provider value={contextValues}>
-        {dropdownContent()}
+        <PopperManagerWrapper popper={popper}>
+          {variant === 'input-group' ? (
+            <>{children}</>
+          ) : (
+            <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>
+          )}
+        </PopperManagerWrapper>
       </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>
     )

package/src/components/dropdown/CDropdownItem.tsx

@@ -17,10 +17,13 @@ export interface CDropdownItemProps extends CLinkProps {
 
 export const CDropdownItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, CDropdownItemProps>(
   ({ children, className, component = 'a', ...rest }, ref) => {
-    const _className = classNames('dropdown-item', className)
-
     return (
-      <CLink className={_className} component={component} {...rest} ref={ref}>
+      <CLink
+        className={classNames('dropdown-item', className)}
+        component={component}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </CLink>
     )

package/src/components/dropdown/CDropdownItemPlain.tsx

@@ -15,10 +15,8 @@ export interface CDropdownItemPlainProps extends HTMLAttributes<HTMLSpanElement>
 
 export const CDropdownItemPlain = forwardRef<HTMLSpanElement, CDropdownItemPlainProps>(
   ({ children, className, component: Component = 'span', ...rest }, ref) => {
-    const _className = classNames('dropdown-item-text', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('dropdown-item-text', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/dropdown/CDropdownMenu.tsx

@@ -126,39 +126,35 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     return classNames
   }
 
-  const _className = classNames(
-    'dropdown-menu',
-    {
-      'dropdown-menu-dark': dark,
-      show: visible,
-    },
-    alignment && alignmentClassNames(alignment),
-    className,
+  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
+    <Component
+      className={classNames(
+        'dropdown-menu',
+        {
+          'dropdown-menu-dark': dark,
+          show: visible,
+        },
+        alignment && alignmentClassNames(alignment),
+        className,
+      )}
+      ref={ref}
+      style={style}
+      role="menu"
+      aria-hidden={!visible}
+      {...(!popper && { 'data-coreui-popper': 'static' })}
+      {...rest}
+    >
+      {Component === 'ul'
+        ? React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+              return <li key={index}>{React.cloneElement(child)}</li>
+            }
+            return
+          })
+        : children}
+    </Component>
   )
 
-  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => {
-    return (
-      <Component
-        className={_className}
-        ref={ref}
-        style={style}
-        role="menu"
-        aria-hidden={!visible}
-        {...(!popper && { 'data-coreui-popper': 'static' })}
-        {...rest}
-      >
-        {Component === 'ul'
-          ? React.Children.map(children, (child, index) => {
-              if (React.isValidElement(child)) {
-                return <li key={index}>{React.cloneElement(child)}</li>
-              }
-              return
-            })
-          : children}
-      </Component>
-    )
-  }
-
   return popper && visible ? (
     <Popper innerRef={dropdownMenuRef} placement={_placement}>
       {({ ref, style }) => dropdownMenuComponent(style, ref)}

package/src/components/dropdown/CDropdownToggle.tsx

@@ -42,14 +42,6 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   ...rest
 }) => {
   const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
-  const _className = classNames(
-    {
-      'dropdown-toggle': caret,
-      'dropdown-toggle-split': split,
-      'nav-link': variant === 'nav-item',
-    },
-    className,
-  )
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
@@ -65,28 +57,42 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   }
 
   const togglerProps = {
-    className: _className,
+    className: classNames(
+      {
+        'dropdown-toggle': caret,
+        'dropdown-toggle-split': split,
+        'nav-link': variant === 'nav-item',
+      },
+      className,
+    ),
     'aria-expanded': visible,
     ...(!rest.disabled && { ...triggers }),
-    ...triggers,
   }
 
   // We use any because Toggler can be `a` as well as `button`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Toggler = (ref?: React.Ref<any>) => {
-    return custom && React.isValidElement(children) ? (
-      <>
-        {React.cloneElement(children as React.ReactElement<any>, {
-          'aria-expanded': visible,
-          ...(!rest.disabled && { ...triggers }),
-          ref: useForkedRef(ref, dropdownToggleRef),
-        })}
-      </>
-    ) : variant === 'nav-item' ? (
-      <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
-        {children}
-      </a>
-    ) : (
+    if (custom && React.isValidElement(children)) {
+      return (
+        <>
+          {React.cloneElement(children as React.ReactElement<any>, {
+            'aria-expanded': visible,
+            ...(!rest.disabled && { ...triggers }),
+            ref: useForkedRef(ref, dropdownToggleRef),
+          })}
+        </>
+      )
+    }
+
+    if (variant === 'nav-item') {
+      return (
+        <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
+          {children}
+        </a>
+      )
+    }
+
+    return (
       <CButton
         type="button"
         {...togglerProps}