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

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

@@ -20,10 +20,10 @@ test('CPaginationItem customize', async () => {
   expect(container.firstChild).toHaveClass('active')
   expect(container.firstChild).toHaveClass('disabled')
   let element = container.firstChild
-  if (element !== null) {
+  if (element === null) {
+    expect(true).toBe(false)
+  } else {
     element = element.firstChild
     expect(element).toHaveClass('page-link')
-  } else {
-    expect(true).toBe(false)
   }
 })

package/src/components/picker/CPicker.tsx

@@ -7,7 +7,7 @@ import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
 import { CDropdownMenu } from '../dropdown/CDropdownMenu'
 import { CDropdownToggle } from '../dropdown/CDropdownToggle'
 
-import { Colors } from '../Types'
+import { Colors } from '../../types'
 
 export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
   /**
@@ -150,16 +150,15 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
       </>
     )
 
-    const _className = classNames('picker', className)
-
     switch (container) {
-      case 'inline':
-        return <div className={_className}>{children}</div>
-      default:
+      case 'inline': {
+        return <div className={classNames('picker', className)}>{children}</div>
+      }
+      default: {
         return (
           <CDropdown
             autoClose="outside"
-            className={_className}
+            className={classNames('picker', className)}
             onHide={() => {
               setVisible(false)
               onHide && onHide()
@@ -186,6 +185,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
             </CDropdownMenu>
           </CDropdown>
         )
+      }
     }
   },
 )

package/src/components/placeholder/CPlaceholder.tsx

@@ -2,7 +2,8 @@ import React, { ElementType, 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 CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
   /**
@@ -84,18 +85,20 @@ export const CPlaceholder = forwardRef<HTMLSpanElement, CPlaceholderProps>(
       }
     })
 
-    const _className = classNames(
-      animation ? `placeholder-${animation}` : 'placeholder',
-      {
-        [`bg-${color}`]: color,
-        [`placeholder-${size}`]: size,
-      },
-      repsonsiveClassNames,
-      className,
-    )
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          animation ? `placeholder-${animation}` : 'placeholder',
+          {
+            [`bg-${color}`]: color,
+            [`placeholder-${size}`]: size,
+          },
+          repsonsiveClassNames,
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )

package/src/components/popover/CPopover.tsx

@@ -5,7 +5,8 @@ import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-import { Triggers, triggerPropType } from '../Types'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -84,16 +85,6 @@ export const CPopover: FC<CPopoverProps> = ({
     setVisible(visible)
   }, [visible])
 
-  const getTransitionClass = (state: string) => {
-    return state === 'entering'
-      ? 'fade'
-      : state === 'entered'
-      ? 'fade show'
-      : state === 'exiting'
-      ? 'fade'
-      : 'fade'
-  }
-
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {
@@ -124,29 +115,28 @@ export const CPopover: FC<CPopoverProps> = ({
             }}
             unmountOnExit
           >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return (
-                <div
-                  className={classNames(
-                    `popover bs-popover-${
-                      placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
-                    }`,
-                    className,
-                    transitionClass,
-                  )}
-                  ref={setPopperElement}
-                  role="tooltip"
-                  style={styles.popper}
-                  {...attributes.popper}
-                  {...rest}
-                >
-                  <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
-                  <div className="popover-header">{title}</div>
-                  <div className="popover-body">{content}</div>
-                </div>
-              )
-            }}
+            {(state) => (
+              <div
+                className={classNames(
+                  'popover',
+                  `bs-popover-${placement.replace('left', 'start').replace('right', 'end')}`,
+                  'fade',
+                  {
+                    show: state === 'entered',
+                  },
+                  className,
+                )}
+                ref={setPopperElement}
+                role="tooltip"
+                style={styles.popper}
+                {...attributes.popper}
+                {...rest}
+              >
+                <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                <div className="popover-header">{title}</div>
+                <div className="popover-body">{content}</div>
+              </div>
+            )}
           </Transition>,
           document.body,
         )}

package/src/components/progress/CProgress.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
@@ -30,17 +31,19 @@ export interface CProgressProps
 
 export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
   ({ children, className, height, thin, value = 0, white, ...rest }, ref) => {
-    const _className = classNames(
-      'progress',
-      {
-        'progress-thin': thin,
-        'progress-white': white,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} style={height ? { height: `${height}px` } : {}} ref={ref}>
+      <div
+        className={classNames(
+          'progress',
+          {
+            'progress-thin': thin,
+            'progress-white': white,
+          },
+          className,
+        )}
+        style={height ? { height: `${height}px` } : {}}
+        ref={ref}
+      >
         {value ? (
           <CProgressBar value={value} {...rest}>
             {children}

package/src/components/progress/CProgressBar.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 CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -31,19 +32,17 @@ export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
   ({ children, animated, className, color, value = 0, variant, ...rest }, ref) => {
-    const _className = classNames(
-      'progress-bar',
-      {
-        [`bg-${color}`]: color,
-        [`progress-bar-${variant}`]: variant,
-        'progress-bar-animated': animated,
-      },
-      className,
-    )
-
     return (
       <div
-        className={_className}
+        className={classNames(
+          'progress-bar',
+          {
+            [`bg-${color}`]: color,
+            [`progress-bar-${variant}`]: variant,
+            'progress-bar-animated': animated,
+          },
+          className,
+        )}
         role="progressbar"
         style={{ width: `${value}%` }}
         aria-valuenow={value}

package/src/components/sidebar/CSidebar.tsx

@@ -3,9 +3,10 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CBackdrop } from '../backdrop/CBackdrop'
+
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
-import { CBackdrop } from '../backdrop/CBackdrop'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -97,7 +98,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
     }, [visible])
 
     useEffect(() => {
-      typeof inViewport !== 'undefined' && onVisibleChange && onVisibleChange(inViewport)
+      inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport)
       !inViewport && onHide && onHide()
       inViewport && onShow && onShow()
     }, [inViewport])
@@ -168,25 +169,27 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
         handleHide()
     }
 
-    const _className = classNames(
-      'sidebar',
-      {
-        [`sidebar-${colorScheme}`]: colorScheme,
-        'sidebar-narrow': narrow,
-        'sidebar-overlaid': overlaid,
-        [`sidebar-${placement}`]: placement,
-        [`sidebar-${position}`]: position,
-        [`sidebar-${size}`]: size,
-        'sidebar-narrow-unfoldable': unfoldable,
-        show: _visible === true && mobile,
-        hide: _visible === false && !mobile,
-      },
-      className,
-    )
-
     return (
       <>
-        <div className={_className} {...rest} ref={forkedRef}>
+        <div
+          className={classNames(
+            'sidebar',
+            {
+              [`sidebar-${colorScheme}`]: colorScheme,
+              'sidebar-narrow': narrow,
+              'sidebar-overlaid': overlaid,
+              [`sidebar-${placement}`]: placement,
+              [`sidebar-${position}`]: position,
+              [`sidebar-${size}`]: size,
+              'sidebar-narrow-unfoldable': unfoldable,
+              show: _visible === true && mobile,
+              hide: _visible === false && !mobile,
+            },
+            className,
+          )}
+          {...rest}
+          ref={forkedRef}
+        >
           {children}
         </div>
         {typeof window !== 'undefined' &&

package/src/components/sidebar/CSidebarBrand.tsx

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

package/src/components/sidebar/CSidebarFooter.tsx

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

package/src/components/sidebar/CSidebarHeader.tsx

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

package/src/components/sidebar/CSidebarNav.tsx

@@ -23,9 +23,9 @@ export const CSidebarNav = forwardRef<HTMLUListElement, CSidebarNavProps>(
       visibleGroup,
       setVisibleGroup,
     }
-    const classes = classNames('sidebar-nav', className)
+
     return (
-      <ul className={classes} ref={ref} {...rest}>
+      <ul className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
         <CNavContext.Provider value={CNavContextValues}>
           {React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {

package/src/components/sidebar/CSidebarToggler.tsx

@@ -11,9 +11,8 @@ export interface CSidebarTogglerProps extends HTMLAttributes<HTMLButtonElement>
 
 export const CSidebarToggler = forwardRef<HTMLButtonElement, CSidebarTogglerProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('sidebar-toggler', className)
     return (
-      <button className={_className} ref={ref} {...rest}>
+      <button className={classNames('sidebar-toggler', className)} ref={ref} {...rest}>
         {children}
       </button>
     )

package/src/components/smart-pagination/CSmartPagination.tsx

@@ -92,8 +92,6 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
     },
     ref,
   ) => {
-    const _classNames = classNames(`justify-content-${align}`, className)
-
     const showDots: boolean = (() => {
       return dots && limit > 4 && limit < pages
     })()
@@ -131,23 +129,21 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
     })()
 
     const items: number[] = (() => {
-      if (activePage - maxPrevItems <= 1) {
-        return Array.from(
-          {
-            length: itemsAmount,
-          },
-          (_v, i) => i + 1,
-        )
-      } else {
-        return Array.from(
-          {
-            length: itemsAmount,
-          },
-          (_v, i) => {
-            return lastItem - i
-          },
-        ).reverse()
-      }
+      return activePage - maxPrevItems <= 1
+        ? Array.from(
+            {
+              length: itemsAmount,
+            },
+            (_v, i) => i + 1,
+          )
+        : Array.from(
+            {
+              length: itemsAmount,
+            },
+            (_v, i) => {
+              return lastItem - i
+            },
+          ).reverse()
     })()
 
     const setPage = (number: number): void => {
@@ -157,7 +153,13 @@ export const CSmartPagination = forwardRef<HTMLUListElement, CSmartPaginationPro
     }
 
     return (
-      <CPagination className={_classNames} aria-label="pagination" size={size} {...rest} ref={ref}>
+      <CPagination
+        className={classNames(`justify-content-${align}`, className)}
+        aria-label="pagination"
+        size={size}
+        {...rest}
+        ref={ref}
+      >
         {doubleArrows && (
           <CPaginationItem
             onClick={() => setPage(1)}

package/src/components/smart-table/CSmartTable.tsx

@@ -284,7 +284,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       }
 
       //if column changed or sort was descending change asc to true
-      const state = sorterState ? sorterState : { column: '', state: '' }
+      const state = sorterState ?? { column: '', state: '' }
 
       if (state.column === column) {
         if (state.state === 0) {
@@ -292,11 +292,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         } else if (state.state === 'asc') {
           state.state = 'desc'
         } else {
-          if (typeof columnSorter === 'object' && !columnSorter.resetable) {
-            state.state = 'asc'
-          } else {
-            state.state = 0
-          }
+          state.state = typeof columnSorter === 'object' && !columnSorter.resetable ? 'asc' : 0
         }
       } else {
         state.column = column
@@ -360,7 +356,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                           Object.values(columnFilterState).join('')
                         }
                         onClick={() => handleClean()}
-                        onKeyUp={(event) => {
+                        onKeyDown={(event) => {
                           if (event.key === 'Enter') handleClean()
                         }}
                       />
@@ -378,7 +374,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 {...tableHeadProps}
                 columnFilter={columnFilter}
                 columnFilterState={columnFilterState}
-                columns={columns ? columns : columnNames}
+                columns={columns ?? columnNames}
                 columnSorter={columnSorter}
                 items={_items}
                 selectable={selectable}
@@ -418,7 +414,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 {...tableFootProps}
                 columnFilter={false}
                 columnSorter={false}
-                columns={columns ? columns : columnNames}
+                columns={columns ?? columnNames}
                 items={_items}
                 handleSelectAllChecked={() => handleSelectAllChecked()}
                 selectable={selectable}

package/src/components/smart-table/CSmartTableBody.tsx

@@ -51,89 +51,90 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
         {...rest}
         ref={ref}
       >
-        {currentItems.map((item: Item, trIndex) => {
-          return (
-            <React.Fragment key={trIndex}>
-              <CTableRow
-                {...(item._props && { ...item._props })}
-                {...(clickableRows && { tabIndex: 0 })}
-                onClick={(event) =>
-                  onRowClick &&
-                  onRowClick(
-                    item,
-                    trIndex + firstItemOnActivePageIndex,
-                    getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
-                    event,
-                  )
-                }
-              >
-                {selectable && (
-                  <CTableDataCell>
-                    <CFormCheck
-                      checked={
-                        selected &&
-                        isObjectInArray(selected, item, ['_cellProps', '_props', '_selected'])
-                      }
-                      onChange={(event) => {
-                        const _item = { ...item }
-                        delete _item['_cellProps']
-                        delete _item['_props']
-                        delete _item['_selected']
-                        onRowChecked && onRowChecked(_item, event.target.checked)
-                      }}
-                    />
-                  </CTableDataCell>
-                )}
-                {columnNames.map((colName, index) => {
-                  return (
-                    (scopedColumns &&
-                      scopedColumns[colName] &&
-                      React.cloneElement(
-                        scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex),
-                        {
-                          key: index,
-                        },
-                      )) || (
-                      <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
-                        {String(item[colName])}
-                      </CTableDataCell>
+        {currentItems.length ? (
+          currentItems.map((item: Item, trIndex) => {
+            return (
+              <React.Fragment key={trIndex}>
+                <CTableRow
+                  {...(item._props && { ...item._props })}
+                  {...(clickableRows && { tabIndex: 0 })}
+                  onClick={(event) =>
+                    onRowClick &&
+                    onRowClick(
+                      item,
+                      trIndex + firstItemOnActivePageIndex,
+                      getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
+                      event,
                     )
-                  )
-                })}
-              </CTableRow>
-              {scopedColumns && scopedColumns.details && (
-                <>
-                  <CTableRow>
-                    <CTableDataCell
-                      colSpan={colspan}
-                      className="p-0"
-                      style={{ borderBottomWidth: 0 }}
-                      tabIndex={-1}
-                    ></CTableDataCell>
-                  </CTableRow>
-                  <CTableRow
-                    onClick={(event) =>
-                      onRowClick &&
-                      onRowClick(
-                        item,
-                        trIndex + firstItemOnActivePageIndex,
-                        getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
-                        true,
-                      )
-                    }
-                    className="p-0"
-                    key={`details${trIndex}`}
-                  >
-                    <CTableDataCell colSpan={colspan} className="p-0" style={{ border: 0 }}>
-                      {scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)}
+                  }
+                >
+                  {selectable && (
+                    <CTableDataCell>
+                      <CFormCheck
+                        checked={
+                          selected &&
+                          isObjectInArray(selected, item, ['_cellProps', '_props', '_selected'])
+                        }
+                        onChange={(event) => {
+                          const _item = { ...item }
+                          delete _item['_cellProps']
+                          delete _item['_props']
+                          delete _item['_selected']
+                          onRowChecked && onRowChecked(_item, event.target.checked)
+                        }}
+                      />
                     </CTableDataCell>
-                  </CTableRow>
-                </>
-              )}
-            </React.Fragment>
-          )
-        })}
-        {!currentItems.length && (
+                  )}
+                  {columnNames.map((colName, index) => {
+                    return (
+                      (scopedColumns &&
+                        scopedColumns[colName] &&
+                        React.cloneElement(
+                          scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex),
+                          {
+                            key: index,
+                          },
+                        )) || (
+                        <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
+                          {String(item[colName])}
+                        </CTableDataCell>
+                      )
+                    )
+                  })}
+                </CTableRow>
+                {scopedColumns && scopedColumns.details && (
+                  <>
+                    <CTableRow>
+                      <CTableDataCell
+                        colSpan={colspan}
+                        className="p-0"
+                        style={{ borderBottomWidth: 0 }}
+                        tabIndex={-1}
+                      ></CTableDataCell>
+                    </CTableRow>
+                    <CTableRow
+                      onClick={(event) =>
+                        onRowClick &&
+                        onRowClick(
+                          item,
+                          trIndex + firstItemOnActivePageIndex,
+                          getClickedColumnName(event.target as HTMLTextAreaElement, columnNames),
+                          true,
+                        )
+                      }
+                      className="p-0"
+                      key={`details${trIndex}`}
+                    >
+                      <CTableDataCell colSpan={colspan} className="p-0" style={{ border: 0 }}>
+                        {scopedColumns.details(item, trIndex + firstItemOnActivePageIndex)}
+                      </CTableDataCell>
+                    </CTableRow>
+                  </>
+                )}
+              </React.Fragment>
+            )
+          })
+        ) : (
           <CTableRow>
             <CTableDataCell colSpan={colspan}>{noItemsLabel}</CTableDataCell>
           </CTableRow>