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

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>
     )

package/src/components/form/CFormTextarea.tsx

@@ -1,7 +1,6 @@
 import React, { ChangeEventHandler, forwardRef, TextareaHTMLAttributes } from 'react'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
@@ -57,14 +56,6 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
     },
     ref,
   ) => {
-    const _className = classNames(
-      plainText ? 'form-control-plaintext' : 'form-control',
-      {
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
     return (
       <CFormControlWrapper
         describedby={rest['aria-describedby']}
@@ -80,7 +71,19 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
         tooltipFeedback={tooltipFeedback}
         valid={valid}
       >
-        <textarea className={_className} id={id} {...rest} ref={ref}>
+        <textarea
+          className={classNames(
+            plainText ? 'form-control-plaintext' : 'form-control',
+            {
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
+          id={id}
+          {...rest}
+          ref={ref}
+        >
           {children}
         </textarea>
       </CFormControlWrapper>

package/src/components/form/CInputGroup.tsx

@@ -15,15 +15,18 @@ export interface CInputGroupProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
   ({ children, className, size, ...rest }, ref) => {
-    const _className = classNames(
-      'input-group',
-      {
-        [`input-group-${size}`]: size,
-      },
-      className,
-    )
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'input-group',
+          {
+            [`input-group-${size}`]: size,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/form/CInputGroupText.tsx

@@ -16,9 +16,8 @@ export interface CInputGroupTextProps
 
 export const CInputGroupText = forwardRef<HTMLLabelElement | HTMLSpanElement, CInputGroupTextProps>(
   ({ children, className, component: Component = 'span', ...rest }, ref) => {
-    const _className = classNames('input-group-text', className)
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('input-group-text', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/form/__tests__/CFormRange.spec.tsx

@@ -27,7 +27,7 @@ test('CFormRange customize', async () => {
   expect(container.firstChild).toHaveAttribute('max', '150')
   expect(container.firstChild).toHaveAttribute('min', '20')
   expect(container.firstChild).toHaveAttribute('readonly', '')
-  expect(container.firstChild).toHaveAttribute('steps', '2')
+  expect(container.firstChild).toHaveAttribute('step', '2')
   expect(container.firstChild).toHaveAttribute('type', 'range')
   expect(container.firstChild).toHaveAttribute('value', '80')
 })

package/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap

@@ -12,9 +12,7 @@ exports[`CForm customize 1`] = `
 
 exports[`CForm example 1`] = `
 <div>
-  <form
-    class=""
-  >
+  <form>
     <label
       class="form-label"
     >
@@ -55,9 +53,7 @@ exports[`CForm example 1`] = `
 
 exports[`loads and displays CForm component 1`] = `
 <div>
-  <form
-    class=""
-  >
+  <form>
     Test
   </form>
 </div>

package/src/components/form/__tests__/__snapshots__/CFormRange.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`CFormRange customize 1`] = `
     max="150"
     min="20"
     readonly=""
-    steps="2"
+    step="2"
     type="range"
     value="80"
   />
@@ -19,7 +19,7 @@ exports[`loads and displays CFormRange component 1`] = `
 <div>
   <input
     class="form-range"
-    steps="3"
+    step="3"
     type="range"
   />
 </div>

package/src/components/grid/CCol.tsx

@@ -101,13 +101,15 @@ export const CCol = forwardRef<HTMLDivElement, CColProps>(
       }
     })
 
-    const _className = classNames(
-      repsonsiveClassNames.length ? repsonsiveClassNames : 'col',
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col',
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/grid/CContainer.tsx

@@ -53,13 +53,15 @@ export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
       breakpoint && repsonsiveClassNames.push(`container-${bp}`)
     })
 
-    const _className = classNames(
-      repsonsiveClassNames.length ? repsonsiveClassNames : 'container',
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container',
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/grid/CRow.tsx

@@ -75,22 +75,23 @@ export const CRow = forwardRef<HTMLDivElement, CRowProps>(
         if (breakpoint.cols) {
           repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`)
         }
+
         if (typeof breakpoint.gutter === 'number') {
           repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`)
         }
+
         if (typeof breakpoint.gutterX === 'number') {
           repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`)
         }
+
         if (typeof breakpoint.gutterY === 'number') {
           repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`)
         }
       }
     })
 
-    const _className = classNames('row', repsonsiveClassNames, className)
-
     return (
-      <div className={_className} ref={ref}>
+      <div className={classNames('row', repsonsiveClassNames, className)} ref={ref}>
         {children}
       </div>
     )

package/src/components/header/CHeader.tsx

@@ -19,20 +19,19 @@ export interface CHeaderProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CHeader = forwardRef<HTMLDivElement, CHeaderProps>(
   ({ children, className, container, position, ...rest }, ref) => {
-    const _className = classNames('header', { [`header-${position}`]: position }, className)
-
-    let content
-    if (container) {
-      content = (
-        <div className={`container${container !== true ? '-' + container : ''}`}>{children}</div>
-      )
-    } else {
-      content = children
-    }
-
     return (
-      <div className={_className} {...rest} ref={ref}>
-        {content}
+      <div
+        className={classNames('header', { [`header-${position}`]: position }, className)}
+        {...rest}
+        ref={ref}
+      >
+        {container ? (
+          <div className={typeof container === 'string' ? `container-${container}` : 'container'}>
+            {children}
+          </div>
+        ) : (
+          <>{children}</>
+        )}
       </div>
     )
   },

package/src/components/header/CHeaderBrand.tsx

@@ -22,10 +22,8 @@ export const CHeaderBrand = forwardRef<
   HTMLAnchorElement | HTMLLinkElement | HTMLSpanElement,
   CHeaderBrandProps
 >(({ children, component: Component = 'a', className, ...rest }, ref) => {
-  const _className = classNames('header-brand', className)
-
   return (
-    <Component className={_className} {...rest} ref={ref}>
+    <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
       {children}
     </Component>
   )

package/src/components/header/CHeaderBrand.tsx~HEAD

@@ -16,10 +16,8 @@ export interface CHeaderBrandProps
 
 export const CHeaderBrand = forwardRef<HTMLAnchorElement | HTMLSpanElement, CHeaderBrandProps>(
   ({ children, component: Component = 'a', className, ...rest }, ref) => {
-    const _className = classNames('header-brand', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('header-brand', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

package/src/components/header/CHeaderDivider.tsx

@@ -11,9 +11,7 @@ export interface CHeaderDividerProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CHeaderDivider = forwardRef<HTMLDivElement, CHeaderDividerProps>(
   ({ className, ...rest }, ref) => {
-    const _className = classNames('header-divider', className)
-
-    return <div className={_className} {...rest} ref={ref} />
+    return <div className={classNames('header-divider', className)} {...rest} ref={ref} />
   },
 )
 

package/src/components/header/CHeaderNav.tsx

@@ -15,10 +15,13 @@ export interface CHeaderNavProps extends HTMLAttributes<HTMLDivElement | HTMLULi
 
 export const CHeaderNav = forwardRef<HTMLDivElement | HTMLUListElement, CHeaderNavProps>(
   ({ children, component: Component = 'ul', className, ...rest }, ref) => {
-    const _className = classNames('header-nav', className)
-
     return (
-      <Component className={_className} role="navigation" {...rest} ref={ref}>
+      <Component
+        className={classNames('header-nav', className)}
+        role="navigation"
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/header/CHeaderText.tsx

@@ -11,10 +11,8 @@ export interface CHeaderTextProps extends HTMLAttributes<HTMLSpanElement> {
 
 export const CHeaderText = forwardRef<HTMLSpanElement, CHeaderTextProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('header-text', className)
-
     return (
-      <span className={_className} {...rest} ref={ref}>
+      <span className={classNames('header-text', className)} {...rest} ref={ref}>
         {children}
       </span>
     )

package/src/components/header/CHeaderToggler.tsx

@@ -11,11 +11,9 @@ export interface CHeaderTogglerProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const CHeaderToggler = forwardRef<HTMLButtonElement, CHeaderTogglerProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('header-toggler', className)
-
     return (
-      <button type="button" className={_className} {...rest} ref={ref}>
-        {children ? children : <span className="header-toggler-icon"></span>}
+      <button type="button" className={classNames('header-toggler', className)} {...rest} ref={ref}>
+        {children ?? <span className="header-toggler-icon"></span>}
       </button>
     )
   },

package/src/components/image/CImage.tsx

@@ -27,17 +27,24 @@ export interface CImageProps extends ImgHTMLAttributes<HTMLOrSVGImageElement> {
 
 export const CImage = forwardRef<HTMLImageElement, CImageProps>(
   ({ align, className, fluid, rounded, thumbnail, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`float-${align}`]: align && (align === 'start' || align === 'end'),
-        'd-block mx-auto': align && align === 'center',
-        'img-fluid': fluid,
-        rounded: rounded,
-        'img-thumbnail': thumbnail,
-      },
-      className,
+    return (
+      <img
+        className={
+          classNames(
+            {
+              [`float-${align}`]: align && (align === 'start' || align === 'end'),
+              'd-block mx-auto': align && align === 'center',
+              'img-fluid': fluid,
+              rounded: rounded,
+              'img-thumbnail': thumbnail,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      />
     )
-    return <img className={_className} {...rest} ref={ref} />
   },
 )
 

package/src/components/image/__tests__/__snapshots__/CImage.spec.tsx.snap

@@ -18,8 +18,6 @@ exports[`CImage customize two 1`] = `
 
 exports[`loads and displays CImage component 1`] = `
 <div>
-  <img
-    class=""
-  />
+  <img />
 </div>
 `;

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './card'
 export * from './carousel'
 export * from './close-button'
 export * from './collapse'
+export * from './conditional-portal'
 export * from './date-picker'
 export * from './date-range-picker'
 export * from './dropdown'

package/src/components/link/CLink.tsx

@@ -27,12 +27,10 @@ export interface CLinkProps extends AllHTMLAttributes<HTMLButtonElement | HTMLAn
 
 export const CLink = forwardRef<HTMLButtonElement | HTMLAnchorElement, CLinkProps>(
   ({ children, active, className, component: Component = 'a', disabled, ...rest }, ref) => {
-    // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
-    const _className = classNames(className, { active, disabled })
-
     return (
       <Component
-        className={_className}
+        // TODO: remove duplicated classes ex. `active active` in `<CListGroupItem>`
+        className={classNames(className, { active, disabled })}
         {...(active && { 'aria-current': 'page' })}
         {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
         {...((Component === 'a' || Component === 'button') && {

package/src/components/list-group/CListGroup.tsx

@@ -29,17 +29,18 @@ export interface CListGroupProps extends HTMLAttributes<HTMLDivElement | HTMLULi
 
 export const CListGroup = forwardRef<HTMLDivElement | HTMLUListElement, CListGroupProps>(
   ({ children, className, component: Component = 'ul', flush, layout }, ref) => {
-    const _className = classNames(
-      'list-group',
-      {
-        'list-group-flush': flush,
-        [`list-group-${layout}`]: layout,
-      },
-      className,
-    )
-
     return (
-      <Component className={_className} ref={ref}>
+      <Component
+        className={classNames(
+          'list-group',
+          {
+            'list-group-flush': flush,
+            [`list-group-${layout}`]: layout,
+          },
+          className,
+        )}
+        ref={ref}
+      >
         {children}
       </Component>
     )

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

@@ -1,12 +1,14 @@
-import React, { ElementType, HTMLAttributes, forwardRef } from 'react'
+import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CListGroupItemProps
-  extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLLinkElement> {
+  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**
    * Toggle the active state for the component.
    */
@@ -29,32 +31,19 @@ export interface CListGroupItemProps
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   component?: string | ElementType
-  href?: string
 }
 
 export const CListGroupItem = forwardRef<
-  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLLinkElement,
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement,
   CListGroupItemProps
->(({ children, active, className, disabled, href, 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,
-  )
-
+>(({ children, active, className, disabled, color, component = 'li', ...rest }, ref) => {
   const Component = component === 'a' || component === 'button' ? CLink : component
 
   rest = {
     ...((component === 'a' || component === 'button') && {
       active,
-      component,
       disabled,
-      href: href,
+      component,
       ref: ref,
     }),
     ...(active && { 'aria-current': true }),
@@ -63,7 +52,19 @@ export const CListGroupItem = forwardRef<
   }
 
   return (
-    <Component className={_className} {...rest}>
+    <Component
+      className={classNames(
+        'list-group-item',
+        {
+          [`list-group-item-${color}`]: color,
+          'list-group-item-action': component === 'a' || component === 'button',
+          active,
+          disabled,
+        },
+        className,
+      )}
+      {...rest}
+    >
       {children}
     </Component>
   )

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

@@ -2,9 +2,11 @@ import React, { ElementType, AnchorHTMLAttributes, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
 import { CLink } from '../link/CLink'
 
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
 export interface CListGroupItemProps
   extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
   /**

package/src/components/loading-button/CLoadingButton.tsx

@@ -60,11 +60,9 @@ export const CLoadingButton = forwardRef<HTMLButtonElement, CLoadingButtonProps>
       }
     }
 
-    const _className = classNames('btn-loading', _loading && 'is-loading', className)
-
     return (
       <CButton
-        className={_className}
+        className={classNames('btn-loading', _loading && 'is-loading', className)}
         {...(disabledOnLoading && _loading && { disabled: true })}
         onClick={handleOnClick}
         {...rest}