@coreui/react 4.5.2 → 4.7.0

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 '../../utils/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 '../../utils/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} />
       </>
     )
   },

package/src/components/form/CFormSelect.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
@@ -67,15 +66,6 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
     },
     ref,
   ) => {
-    const _className = classNames(
-      'form-select',
-      {
-        [`form-select-${size}`]: size,
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -91,7 +81,21 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
         tooltipFeedback={tooltipFeedback}
         valid={valid}
       >
-        <select id={id} className={_className} size={htmlSize} {...rest} ref={ref}>
+        <select
+          id={id}
+          className={classNames(
+            'form-select',
+            {
+              [`form-select-${size}`]: size,
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
+          size={htmlSize}
+          {...rest}
+          ref={ref}
+        >
           {options
             ? options.map((option, index) => {
                 return (

package/src/components/form/CFormSwitch.tsx

@@ -21,6 +21,12 @@ export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElem
    * The element represents a caption for a component.
    */
   label?: string | ReactNode
+  /**
+   * Put switch on the opposite side.
+   *
+   * @sinve 4.7.0
+   */
+  reverse?: boolean
   /**
    * Size the component large or extra large. Works only with `switch`.
    */
@@ -36,28 +42,32 @@ export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElem
 }
 
 export const CFormSwitch = forwardRef<HTMLInputElement, CFormSwitchProps>(
-  ({ className, id, invalid, label, size, type = 'checkbox', valid, ...rest }, ref) => {
-    const _className = classNames(
-      'form-check form-switch',
-      {
-        [`form-switch-${size}`]: size,
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
-
-    const inputClassName = classNames('form-check-input', {
-      'is-invalid': invalid,
-      'is-valid': valid,
-    })
-    const labelClassName = classNames('form-check-label')
-
+  ({ className, id, invalid, label, reverse, size, type = 'checkbox', valid, ...rest }, ref) => {
     return (
-      <div className={_className}>
-        <input type={type} className={inputClassName} id={id} {...rest} ref={ref} />
+      <div
+        className={classNames(
+          'form-check form-switch',
+          {
+            'form-check-reverse': reverse,
+            [`form-switch-${size}`]: size,
+            'is-invalid': invalid,
+            'is-valid': valid,
+          },
+          className,
+        )}
+      >
+        <input
+          type={type}
+          className={classNames('form-check-input', {
+            'is-invalid': invalid,
+            'is-valid': valid,
+          })}
+          id={id}
+          {...rest}
+          ref={ref}
+        />
         {label && (
-          <CFormLabel customClassName={labelClassName} {...(id && { htmlFor: id })}>
+          <CFormLabel customClassName="form-check-label" {...(id && { htmlFor: id })}>
             {label}
           </CFormLabel>
         )}
@@ -71,6 +81,7 @@ CFormSwitch.propTypes = {
   id: PropTypes.string,
   invalid: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  reverse: PropTypes.bool,
   size: PropTypes.oneOf(['lg', 'xl']),
   type: PropTypes.oneOf(['checkbox', 'radio']),
   valid: PropTypes.bool,

package/src/components/form/CFormText.tsx

@@ -15,9 +15,8 @@ export interface CFormTextProps extends HTMLAttributes<HTMLDivElement | HTMLSpan
 
 export const CFormText = forwardRef<HTMLDivElement | HTMLSpanElement, CFormTextProps>(
   ({ children, className, component: Component = 'div', ...rest }, ref) => {
-    const _className = classNames('form-text', className)
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('form-text', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )