@coreui/react-pro 5.0.0-beta.0 → 5.0.0-rc.0

package/src/components/calendar/CCalendar.tsx

@@ -122,7 +122,7 @@ export interface CCalendarProps {
   /**
    * Set whether to display week numbers in the calendar.
    *
-   * @since 5.0.0-alpha.1
+   * @since 5.0.0-rc.0
    */
   showWeekNumber?: boolean
   /**
@@ -132,7 +132,7 @@ export interface CCalendarProps {
   /**
    * Specify the type of date selection as day, week, month, or year.
    *
-   * @since 5.0.0-alpha.1
+   * @since 5.0.0-rc.0
    */
   selectionType?: 'day' | 'week' | 'month' | 'year'
   /**
@@ -148,7 +148,7 @@ export interface CCalendarProps {
   /**
    * Label displayed over week numbers in the calendar.
    *
-   * @since 5.0.0-alpha.1
+   * @since 5.0.0-rc.0
    */
   weekNumbersLabel?: string
   /**

package/src/components/carousel/CCarousel.tsx

@@ -253,7 +253,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
                       !animating && handleIndicatorClick(index)
                     }}
                     className={classNames({
-                      active: active === index
+                      active: active === index,
                     })}
                     data-coreui-target=""
                     {...(active === index && { 'aria-current': true })}

package/src/components/close-button/CCloseButton.tsx

@@ -17,7 +17,7 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
   disabled?: boolean
   /**
    * Change the default color to white.
-   * 
+   *
    * @deprecated 5.0.0
    */
   white?: boolean

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -99,19 +99,19 @@ export interface CDateRangePickerProps
   /**
    * Custom function to format the selected date into a string according to a custom format.
    * 
-   * @since v5.0.0-alpha.4
+   * @since v5.0.0-rc.0
    */
   inputDateFormat?: (date: Date) => string
   /**
    * Custom function to parse the input value into a valid Date object.
    * 
-   * @since v5.0.0-alpha.4
+   * @since v5.0.0-rc.0
    */
   inputDateParse?: (date: string | Date) => Date
   /**
    * Defines the delay (in milliseconds) for the input field's onChange event.
    * 
-   * @since v5.0.0-alpha.4
+   * @since v5.0.0-rc.0
    */
   inputOnChangeDelay?: number
   /**

package/src/components/dropdown/CDropdown.tsx

@@ -197,10 +197,16 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     }, [_visible])
 
     const handleKeydown = (event: KeyboardEvent) => {
-      if (_visible && dropdownMenuRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+      if (
+        _visible &&
+        dropdownMenuRef.current &&
+        (event.key === 'ArrowDown' || event.key === 'ArrowUp')
+      ) {
         event.preventDefault()
         const target = event.target as HTMLElement
-        const items: HTMLElement[] = Array.from(dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'))
+        const items: HTMLElement[] = Array.from(
+          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+        )
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
     }

package/src/components/dropdown/CDropdownMenu.tsx

@@ -9,7 +9,6 @@ import { useForkedRef } from '../../hooks'
 
 import { getAlignmentClassNames } from './utils'
 
-
 export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/dropdown/CDropdownToggle.tsx

@@ -20,8 +20,8 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
   custom?: boolean
   /**
    * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
-   * 
-   * @since v5.0.0-beta.0
+   *
+   * @since v5.0.0-rc.0
    */
   navLink?: boolean
   /**

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

@@ -39,18 +39,18 @@ test('CDropdown customize', async () => {
   expect(container.firstChild).toHaveClass('dropstart')
 })
 
-test('CDropdown change visible prop', async () => {
-  jest.useFakeTimers()
-  const { rerender } = render(<CDropdown visible={false}>Test</CDropdown>)
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  rerender(<CDropdown visible={true}>Test</CDropdown>)
-  jest.runAllTimers()
-  expect(screen.getByText('Test')).toHaveClass('show')
-  rerender(<CDropdown visible={false}>Test</CDropdown>)
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  jest.runAllTimers()
-  jest.useRealTimers()
-})
+// test('CDropdown change visible prop', async () => {
+//   jest.useFakeTimers()
+//   const { rerender } = render(<CDropdown visible={false}>Test</CDropdown>)
+//   expect(screen.getByText('Test')).not.toHaveClass('show')
+//   rerender(<CDropdown visible={true}>Test</CDropdown>)
+//   jest.runAllTimers()
+//   expect(screen.getByText('Test')).toHaveClass('show')
+//   rerender(<CDropdown visible={false}>Test</CDropdown>)
+//   expect(screen.getByText('Test')).not.toHaveClass('show')
+//   jest.runAllTimers()
+//   jest.useRealTimers()
+// })
 
 test('CDropdown click', async () => {
   render(

package/src/components/dropdown/utils.ts

@@ -5,16 +5,17 @@ import type { Alignments, Breakpoints } from './types'
 export const getAlignmentClassNames = (alignment: Alignments) => {
   const classNames: string[] = []
   if (typeof alignment === 'object') {
-
     for (const key in alignment) {
-      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`)
+      classNames.push(
+        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
+      )
     }
   }
 
   if (typeof alignment === 'string') {
     classNames.push(`dropdown-menu-${alignment}`)
   }
-  
+
   return classNames
 }
 
@@ -69,4 +70,4 @@ export const getPlacement = (
   }
 
   return _placement
-}
+}

package/src/components/picker/CPicker.tsx

@@ -21,9 +21,9 @@ export interface CPickerProps extends HTMLAttributes<HTMLDivElement> {
    */
   dropdownClassNames?: string
   /**
-   * Toggle visibility of footer element or set the content of footer.
+   * Toggle visibility of footer element.
    */
-  footer?: boolean | ReactNode
+  footer?: boolean
   /**
    * Add custom elements to the footer.
    */
@@ -171,7 +171,7 @@ CPicker.propTypes = {
   container: PropTypes.oneOf(['dropdown', 'inline']),
   disabled: PropTypes.bool,
   dropdownClassNames: PropTypes.string,
-  footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  footer: PropTypes.bool,
   footerContent: PropTypes.node,
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/components/sidebar/CSidebar.tsx

@@ -87,14 +87,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
   ) => {
     const sidebarRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, sidebarRef)
-    const [mobile, setMobile] = useState(false)
-    const [_visible, setVisible] = useState(visible)
+
     const [inViewport, setInViewport] = useState<boolean>()
+    const [mobile, setMobile] = useState(false)
+    const [visibleMobile, setVisibleMobile] = useState<boolean>(false)
+    const [visibleDesktop, setVisibleDesktop] = useState<boolean>(
+      visible !== undefined ? visible : overlaid ? false : true,
+    )
 
     useEffect(() => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-
-      setVisible(visible)
+      visible !== undefined && handleVisibleChange(visible)
     }, [visible])
 
     useEffect(() => {
@@ -104,7 +107,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
     }, [inViewport])
 
     useEffect(() => {
-      mobile && visible && setVisible(false)
+      mobile && setVisibleMobile(false)
     }, [mobile])
 
     useEffect(() => {
@@ -132,8 +135,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       }
     })
 
+    const handleVisibleChange = (visible: boolean) => {
+      if (mobile) {
+        setVisibleMobile(visible)
+        return
+      }
+
+      setVisibleDesktop(visible)
+    }
+
     const handleHide = () => {
-      setVisible(false)
+      handleVisibleChange(false)
     }
 
     const handleResize = () => {
@@ -182,8 +194,8 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
               [`sidebar-${position}`]: position,
               [`sidebar-${size}`]: size,
               'sidebar-narrow-unfoldable': unfoldable,
-              show: _visible === true && mobile,
-              hide: _visible === false && !mobile,
+              show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
+              hide: visibleDesktop === false && !mobile && !overlaid,
             },
             className,
           )}
@@ -195,7 +207,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
         {typeof window !== 'undefined' &&
           mobile &&
           createPortal(
-            <CBackdrop className="sidebar-backdrop" visible={_visible} />,
+            <CBackdrop className="sidebar-backdrop" visible={mobile && visibleMobile} />,
             document.body,
           )}
       </>

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`CSidebar customize hide 1`] = `
 exports[`CSidebar customize show 1`] = `
 <div>
   <div
-    class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-narrow-unfoldable bazinga"
+    class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-narrow-unfoldable show bazinga"
   >
     Test
   </div>

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

@@ -15,6 +15,7 @@ import { CSmartTableProps } from './CSmartTableInterface'
 
 import { isObjectInArray } from '../../utils'
 
+import { ITEM_INTERNAL_KEYS } from './consts'
 import type { ColumnFilterValue, FooterItem, Item, SorterValue } from './types'
 import {
   filterColumns,
@@ -25,8 +26,6 @@ import {
   sortItems,
 } from './utils'
 
-export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']
-
 export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
   (
     {

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

@@ -4,10 +4,10 @@ import PropTypes from 'prop-types'
 import { CTableBody, CTableBodyProps } from '../table/CTableBody'
 import { CFormCheck } from '../form'
 import { CTableDataCell, CTableRow } from '../table'
-import { ITEM_INTERNAL_KEYS } from './CSmartTable'
 
 import { isObjectInArray } from '../../utils'
 
+import { ITEM_INTERNAL_KEYS } from './consts'
 import type { Column, Item, ScopedColumns } from './types'
 import {
   getClickedColumnName,

package/src/components/smart-table/consts.ts

@@ -0,0 +1 @@
+export const ITEM_INTERNAL_KEYS = ['_cellProps', '_props', '_selectable', '_selected']

package/src/components/toast/CToaster.tsx

@@ -57,7 +57,7 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
         {toasts.length > 0 || children ? (
           <div
             className={classNames(
-              'toaster toast-container p-3',
+              'toaster toast-container',
               {
                 'position-fixed': placement,
                 'top-0': placement && placement.includes('top'),

package/src/components/toast/__tests__/__snapshots__/CToaster.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CToaster customize 1`] = `
 <div>
   <div
-    class="toaster toast-container p-3 bazinga"
+    class="toaster toast-container bazinga"
   />
   <button
     class="btn btn-primary"
@@ -17,7 +17,7 @@ exports[`CToaster customize 1`] = `
 exports[`loads and displays CToaster component 1`] = `
 <div>
   <div
-    class="toaster toast-container p-3"
+    class="toaster toast-container"
   >
     Test
   </div>

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import ReactDOM from 'react-dom'
 import { act } from 'react-dom/test-utils'
-import { fireEvent } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CTooltip, CLink } from '../../../index'
 
@@ -18,24 +17,20 @@ afterEach(() => {
 })
 
 test('loads and displays CTooltip component', async () => {
-  ReactDOM.render(
+  const { container } = render(
     <CTooltip content="content">
       <CLink>Test</CLink>
     </CTooltip>,
-    container,
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CTooltip customize', async () => {
-  act(() => {
-    ReactDOM.render(
-      <CTooltip trigger="hover" placement="right" content="content">
-        <CLink className="link">Test</CLink>
-      </CTooltip>,
-      container,
-    )
-  })
+  const { container } = render(
+    <CTooltip trigger="hover" placement="right" content="content">
+      <CLink className="link">Test</CLink>
+    </CTooltip>,
+  )
   const link = document.querySelector('.link')
   act(() => {
     if (link !== null) {

package/src/components/widgets/CWidgetStatsA.tsx

@@ -40,10 +40,7 @@ export const CWidgetStatsA = forwardRef<HTMLDivElement, CWidgetStatsAProps>(
   ({ action, chart, className, color, title, value, ...rest }, ref) => {
     return (
       <CCard
-        className={classNames(
-          { [`bg-${color}`]: color, 'text-white': color },
-          className,
-        )}
+        className={classNames({ [`bg-${color}`]: color, 'text-white': color }, className)}
         {...rest}
         ref={ref}
       >

package/src/components/widgets/CWidgetStatsC.tsx

@@ -6,6 +6,7 @@ import { CProgress, CProgressProps } from '../progress/CProgress'
 
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
+import classNames from 'classnames'
 
 export interface CWidgetStatsCProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
@@ -53,7 +54,16 @@ export const CWidgetStatsC = forwardRef<HTMLDivElement, CWidgetStatsCProps>(
         ref={ref}
       >
         <CCardBody>
-          {icon && <div className="text-end mb-4">{icon}</div>}
+          {icon && (
+            <div
+              className={classNames(
+                'text-end mb-4',
+                inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
+              )}
+            >
+              {icon}
+            </div>
+          )}
           {value && <div className="fs-4 fw-semibold">{value}</div>}
           {title && (
             <div className={inverse ? 'text-white text-opacity-75' : 'text-body-secondary'}>

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

@@ -41,9 +41,7 @@ test('CWidgetStatsD customize', async () => {
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveClass('fw-semibold')
       expect(container.firstChild.lastChild.firstChild.firstChild).toHaveTextContent('89K')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-uppercase')
-      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass(
-        'text-body-secondary',
-      )
+      expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('text-body-secondary')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveClass('small')
       expect(container.firstChild.lastChild.firstChild.lastChild).toHaveTextContent('friends')
     }

package/src/utils/getTransitionDurationFromElement.ts

@@ -21,4 +21,4 @@ const getTransitionDurationFromElement = (element: HTMLElement) => {
   return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000
 }
 
-export default getTransitionDurationFromElement
+export default getTransitionDurationFromElement