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

package/src/components/dropdown/CDropdownItem.tsx

@@ -2,8 +2,7 @@ import React, { ElementType, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CLinkProps } from '../link/CLink'
-import { CLink } from '../link/CLink'
+import { CLink, CLinkProps } from '../link/CLink'
 
 export interface CDropdownItemProps extends CLinkProps {
   /**
@@ -18,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

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
-import { Placements } from '../Types'
 import { Alignments, CDropdownContext } from './CDropdown'
 
+import type { Placements } from '../../types'
+
 export interface CDropdownMenuProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
     Omit<
@@ -125,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

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
-import { useForkedRef } from '../../hooks'
-
-import { Triggers, triggerPropType } from '../Types'
-
 import { CButton, CButtonProps } from '../button/CButton'
+
 import { CDropdownContext } from './CDropdown'
 
+import { useForkedRef } from '../../hooks'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
+
 export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   /**
    * Enables pseudo element caret on toggler.
@@ -41,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')) && {
@@ -64,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}

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -54,7 +54,6 @@ test('CDropdown change visible prop', async () => {
 })
 
 test('CDropdown click', async () => {
-  jest.useFakeTimers()
   render(
     <CDropdown>
       <CDropdownToggle>Test</CDropdownToggle>
@@ -71,10 +70,9 @@ test('CDropdown click', async () => {
   }
   jest.runAllTimers()
   expect(screen.getByText('Test').closest('div')).toHaveClass('show')
-  fireEvent.click(document) //click outside
+  fireEvent.mouseUp(document.body) //click outside
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
-  jest.runAllTimers()
-  jest.useRealTimers()
 })
 
 test('CDropdown example', async () => {

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CDropdown customize 1`] = `
 <div>
   <li
-    class="nav-item dropdown show dropstart bazinga"
+    class="nav-item dropdown dropstart show bazinga"
   >
     Test
   </li>

package/src/components/footer/CFooter.tsx

@@ -15,10 +15,12 @@ export interface CFooterProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CFooter = forwardRef<HTMLDivElement, CFooterProps>(
   ({ children, className, position, ...rest }, ref) => {
-    const _className = classNames('footer', { [`footer-${position}`]: position }, className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames('footer', { [`footer-${position}`]: position }, className)}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/form/CForm.tsx

@@ -15,9 +15,12 @@ export interface CFormProps extends FormHTMLAttributes<HTMLFormElement> {
 
 export const CForm = forwardRef<HTMLFormElement, CFormProps>(
   ({ children, className, validated, ...rest }, ref) => {
-    const _className = classNames({ 'was-validated': validated }, className)
     return (
-      <form className={_className} {...rest} ref={ref}>
+      <form
+        className={classNames({ 'was-validated': validated }, className) || undefined}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </form>
     )

package/src/components/form/CFormCheck.tsx

@@ -2,12 +2,12 @@ import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef }
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../hooks'
-import { Colors, Shapes } from '../Types'
-
 import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
 import { CFormLabel } from './CFormLabel'
 
+import { useForkedRef } from '../../hooks'
+import type { Colors, Shapes } from '../../types'
+
 export type ButtonObject = {
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -55,7 +55,7 @@ export interface CFormCheckProps
    */
   indeterminate?: boolean
   /**
-   * Group checkboxes or radios on the same horizontal row by adding.
+   * Group checkboxes or radios on the same horizontal row.
    */
   inline?: boolean
   /**
@@ -66,6 +66,12 @@ export interface CFormCheckProps
    * The element represents a caption for a component.
    */
   label?: string | ReactNode
+  /**
+   * Put checkboxes or radios on the opposite side.
+   *
+   * @sinve 4.7.0
+   */
+  reverse?: boolean
   /**
    * Specifies the type of component.
    */
@@ -92,6 +98,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       inline,
       invalid,
       label,
+      reverse,
       type = 'checkbox',
       valid,
       ...rest
@@ -107,39 +114,21 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       }
     }, [indeterminate])
 
-    const _className = classNames(
-      'form-check',
-      {
-        'form-check-inline': inline,
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
-
-    const inputClassName = classNames(button ? 'btn-check' : 'form-check-input', {
-      'is-invalid': invalid,
-      'is-valid': valid,
-      'me-2': hitArea,
-    })
-    const labelClassName = classNames(
-      button
-        ? classNames(
-            'btn',
-            button.variant ? `btn-${button.variant}-${button.color}` : `btn-${button.color}`,
-            {
-              [`btn-${button.size}`]: button.size,
-            },
-            `${button.shape}`,
-          )
-        : 'form-check-label',
+    const FormControl = () => (
+      <input
+        type={type}
+        className={classNames(button ? 'btn-check' : 'form-check-input', {
+          'is-invalid': invalid,
+          'is-valid': valid,
+          'me-2': hitArea,
+        })}
+        id={id}
+        {...rest}
+        ref={forkedRef}
+      />
     )
 
-    const formControl = () => {
-      return <input type={type} className={inputClassName} id={id} {...rest} ref={forkedRef} />
-    }
-
-    const formValidation = () => (
+    const FormValidation = () => (
       <CFormControlValidation
         describedby={rest['aria-describedby']}
         feedback={feedback}
@@ -152,39 +141,73 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       />
     )
 
-    const formLabel = () => {
-      return (
-        <CFormLabel customClassName={labelClassName} {...(id && { htmlFor: id })}>
-          {label}
-        </CFormLabel>
-      )
+    const FormLabel = () => (
+      <CFormLabel
+        customClassName={classNames(
+          button
+            ? classNames(
+                'btn',
+                button.variant ? `btn-${button.variant}-${button.color}` : `btn-${button.color}`,
+                {
+                  [`btn-${button.size}`]: button.size,
+                },
+                `${button.shape}`,
+              )
+            : 'form-check-label',
+        )}
+        {...(id && { htmlFor: id })}
+      >
+        {label}
+      </CFormLabel>
+    )
+
+    const FormCheck = () => {
+      if (button) {
+        return (
+          <>
+            <FormControl />
+            {label && <FormLabel />}
+            <FormValidation />
+          </>
+        )
+      }
+
+      if (label) {
+        return hitArea ? (
+          <>
+            <FormControl />
+            <CFormLabel
+              customClassName={classNames('form-check-label stretched-link', className)}
+              {...(id && { htmlFor: id })}
+            >
+              {label}
+            </CFormLabel>
+            <FormValidation />
+          </>
+        ) : (
+          <div
+            className={classNames(
+              'form-check',
+              {
+                'form-check-inline': inline,
+                'form-check-reverse': reverse,
+                'is-invalid': invalid,
+                'is-valid': valid,
+              },
+              className,
+            )}
+          >
+            <FormControl />
+            <FormLabel />
+            <FormValidation />
+          </div>
+        )
+      }
+
+      return <FormControl />
     }
 
-    return button ? (
-      <>
-        {formControl()}
-        {label && formLabel()}
-        {formValidation()}
-      </>
-    ) : label ? (
-      hitArea ? (
-        <>
-          <CFormLabel customClassName={className} {...(id && { htmlFor: id })}>
-            {formControl()}
-            {label}
-          </CFormLabel>
-          {formValidation()}
-        </>
-      ) : (
-        <div className={_className}>
-          {formControl()}
-          {formLabel()}
-          {formValidation()}
-        </div>
-      )
-    ) : (
-      formControl()
-    )
+    return <FormCheck />
   },
 )
 
@@ -196,6 +219,7 @@ CFormCheck.propTypes = {
   indeterminate: PropTypes.bool,
   inline: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  reverse: PropTypes.bool,
   type: PropTypes.oneOf(['checkbox', 'radio']),
   ...CFormControlValidation.propTypes,
 }

package/src/components/form/CFormControlValidation.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from 'react'
-
 import PropTypes from 'prop-types'
 
 import { CFormFeedback } from './CFormFeedback'

package/src/components/form/CFormControlWrapper.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode } from 'react'
-
 import PropTypes from 'prop-types'
 
 import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
@@ -57,7 +56,7 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
   tooltipFeedback,
   valid,
 }) => {
-  const formControlValidation = () => (
+  const FormControlValidation = () => (
     <CFormControlValidation
       describedby={describedby}
       feedback={feedback}
@@ -74,14 +73,14 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
       {children}
       <CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
       {text && <CFormText id={describedby}>{text}</CFormText>}
-      {formControlValidation()}
+      <FormControlValidation />
     </CFormFloating>
   ) : (
     <>
       {label && <CFormLabel htmlFor={id}>{label}</CFormLabel>}
       {children}
       {text && <CFormText id={describedby}>{text}</CFormText>}
-      {formControlValidation()}
+      <FormControlValidation />
     </>
   )
 }

package/src/components/form/CFormFeedback.tsx

@@ -30,15 +30,18 @@ export const CFormFeedback = forwardRef<HTMLDivElement | HTMLSpanElement, CFormF
     { children, className, component: Component = 'div', invalid, tooltip, valid, ...rest },
     ref,
   ) => {
-    const _className = classNames(
-      {
-        [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
-        [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
-      },
-      className,
-    )
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          {
+            [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
+            [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/form/CFormFloating.tsx

@@ -11,9 +11,8 @@ export interface CFormFloatingProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CFormFloating = forwardRef<HTMLDivElement, CFormFloatingProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('form-floating', className)
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('form-floating', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/form/CFormInput.tsx

@@ -1,10 +1,14 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, useState } from 'react'
-
-import classNames from 'classnames'
+import React, {
+  ChangeEventHandler,
+  forwardRef,
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
-import { useEffect } from 'react'
 
 export interface CFormInputProps
   extends CFormControlWrapperProps,
@@ -85,17 +89,6 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
       return () => clearTimeout(timeOutId)
     }, [value])
 
-    const _className = classNames(
-      plainText ? 'form-control-plaintext' : 'form-control',
-      {
-        [`form-control-${size}`]: size,
-        'form-control-color': type === 'color',
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
-
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -112,7 +105,16 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
         valid={valid}
       >
         <input
-          className={_className}
+          className={classNames(
+            plainText ? 'form-control-plaintext' : 'form-control',
+            {
+              [`form-control-${size}`]: size,
+              'form-control-color': type === 'color',
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
           id={id}
           type={type}
           onChange={(event) => (delay ? setValue(event) : onChange && onChange(event))}

package/src/components/form/CFormLabel.tsx

@@ -15,9 +15,8 @@ export interface CFormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 
 export const CFormLabel = forwardRef<HTMLLabelElement, CFormLabelProps>(
   ({ children, className, customClassName, ...rest }, ref) => {
-    const _className = customClassName ? customClassName : classNames('form-label', className)
     return (
-      <label className={_className} {...rest} ref={ref}>
+      <label className={customClassName ?? classNames('form-label', className)} {...rest} ref={ref}>
         {children}
       </label>
     )

package/src/components/form/CFormRange.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormLabel } from './CFormLabel'
 export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -49,11 +48,10 @@ export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
 
 export const CFormRange = forwardRef<HTMLInputElement, CFormRangeProps>(
   ({ className, label, ...rest }, ref) => {
-    const _className = classNames('form-range', className)
     return (
       <>
         {label && <CFormLabel htmlFor={rest.id}>{label}</CFormLabel>}
-        <input type="range" className={_className} {...rest} ref={ref} />
+        <input type="range" className={classNames('form-range', className)} {...rest} ref={ref} />
       </>
     )
   },