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

package/src/components/pagination/CPaginationItem.tsx

@@ -21,19 +21,20 @@ export interface CPaginationItemProps extends HTMLAttributes<HTMLAnchorElement>
 
 export const CPaginationItem = forwardRef<HTMLAnchorElement, CPaginationItemProps>(
   ({ children, className, component, ...rest }, ref) => {
-    const _className = classNames(
-      'page-item',
-      {
-        active: rest.active,
-        disabled: rest.disabled,
-      },
-      className,
-    )
-
-    const Component = component ? component : rest.active ? 'span' : 'a'
+    const Component = component ?? (rest.active ? 'span' : 'a')
 
     return (
-      <li className={_className} {...(rest.active && { 'aria-current': 'page' })}>
+      <li
+        className={classNames(
+          'page-item',
+          {
+            active: rest.active,
+            disabled: rest.disabled,
+          },
+          className,
+        )}
+        {...(rest.active && { 'aria-current': 'page' })}
+      >
         {Component === 'a' ? (
           <CLink className="page-link" component={Component} {...rest} ref={ref}>
             {children}

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

@@ -16,13 +16,13 @@ test('CPagination customize', async () => {
   )
   expect(container).toMatchSnapshot()
   let element = container.firstChild
-  if (element !== null) {
+  if (element === null) {
+    expect(true).toBe(false)
+  } else {
     element = element.firstChild
     expect(element).toHaveClass('bazinga')
     expect(element).toHaveClass('pagination')
     expect(element).toHaveClass('pagination-lg')
-  } else {
-    expect(true).toBe(false)
   }
 })
 

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

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

@@ -85,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

@@ -85,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>, {
@@ -125,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

@@ -31,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

@@ -32,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

@@ -98,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])
@@ -169,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
@@ -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/utils.ts

@@ -80,8 +80,7 @@ export const getColumnLabel = (column: Column | string) =>
 export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
   columns
     ? columns.map((column: Column | string) => {
-        if (typeof column === 'object') return column.key
-        else return column
+        return typeof column === 'object' ? column.key : column
       })
     : getColumnNamesFromItems(items)
 
@@ -132,7 +131,7 @@ export const getTableHeaderCellStyles = (
   if (
     columnSorter &&
     (typeof column !== 'object' ||
-      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))
+      (typeof column === 'object' && (column.sorter === undefined || column.sorter)))
   ) {
     style['cursor'] = 'pointer'
   }
@@ -157,7 +156,7 @@ export const isSortable = (
     columnSorter &&
     (!columns ||
       typeof column !== 'object' ||
-      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+      (typeof column === 'object' && (column.sorter === undefined || column.sorter))) &&
     isDataColumn
   )
 }

package/src/components/spinner/CSpinner.tsx

@@ -47,15 +47,18 @@ export const CSpinner = forwardRef<HTMLDivElement | HTMLSpanElement, CSpinnerPro
     },
     ref,
   ) => {
-    const _className = classNames(
-      `spinner-${variant}`,
-      `text-${color}`,
-      size && `spinner-${variant}-${size}`,
-      className,
-    )
-
     return (
-      <Component className={_className} role="status" {...rest} ref={ref}>
+      <Component
+        className={classNames(
+          `spinner-${variant}`,
+          `text-${color}`,
+          size && `spinner-${variant}-${size}`,
+          className,
+        )}
+        role="status"
+        {...rest}
+        ref={ref}
+      >
         <span className="visually-hidden">{visuallyHiddenLabel}</span>
       </Component>
     )

package/src/components/table/CTable.tsx

@@ -153,28 +153,30 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
     },
     ref,
   ) => {
-    const _className = classNames(
-      'table',
-      {
-        [`align-${align}`]: align,
-        [`border-${borderColor}`]: borderColor,
-        [`caption-top`]: captionTop || caption === 'top',
-        'table-bordered': bordered,
-        'table-borderless': borderless,
-        [`table-${color}`]: color,
-        'table-hover': hover,
-        'table-sm': small,
-        'table-striped': striped,
-        'table-striped-columns': stripedColumns,
-      },
-      className,
-    )
-
     const columnNames = useMemo(() => getColumnNames(columns, items), [columns, items])
 
     return (
       <CTableResponsiveWrapper responsive={responsive}>
-        <table className={_className} {...rest} ref={ref}>
+        <table
+          className={classNames(
+            'table',
+            {
+              [`align-${align}`]: align,
+              [`border-${borderColor}`]: borderColor,
+              [`caption-top`]: captionTop || caption === 'top',
+              'table-bordered': bordered,
+              'table-borderless': borderless,
+              [`table-${color}`]: color,
+              'table-hover': hover,
+              'table-sm': small,
+              'table-striped': striped,
+              'table-striped-columns': stripedColumns,
+            },
+            className,
+          )}
+          {...rest}
+          ref={ref}
+        >
           {((caption && caption !== 'top') || captionTop) && (
             <CTableCaption>{caption || captionTop}</CTableCaption>
           )}

package/src/components/table/CTableBody.tsx

@@ -20,15 +20,19 @@ export interface CTableBodyProps extends HTMLAttributes<HTMLTableSectionElement>
 
 export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
   ({ children, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     return (
-      <tbody className={_className ? _className : undefined} {...rest} ref={ref}>
+      <tbody
+        className={
+          classNames(
+            {
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </tbody>
     )

package/src/components/table/CTableDataCell.tsx

@@ -34,19 +34,23 @@ export interface CTableDataCellProps
 
 export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellProps>(
   ({ children, active, align, className, color, ...rest }, ref) => {
-    const _className = classNames(
-      {
-        [`align-${align}`]: align,
-        'table-active': active,
-        [`table-${color}`]: color,
-      },
-      className,
-    )
-
     const Component = rest.scope ? 'th' : 'td'
 
     return (
-      <Component className={_className ? _className : undefined} {...rest} ref={ref}>
+      <Component
+        className={
+          classNames(
+            {
+              [`align-${align}`]: align,
+              'table-active': active,
+              [`table-${color}`]: color,
+            },
+            className,
+          ) || undefined
+        }
+        {...rest}
+        ref={ref}
+      >
         {children}
       </Component>
     )