@coreui/react-pro 5.24.1 → 5.26.0

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

@@ -1,7 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CBadge, CSmartTable } from '../index'
+import '@testing-library/jest-dom'
+import { CBadge } from '../../badge'
+import { CSmartTable } from '../index'
 import { Item } from '../types'
 
 test('loads and displays CSpinner component', async () => {

package/src/components/smart-table/__tests__/__snapshots__/CSmartTable.spec.tsx.snap

@@ -37,6 +37,7 @@ exports[`loads and displays CSpinner component 1`] = `
           type="button"
         >
           <svg
+            aria-hidden="true"
             class="icon icon-custom-size"
             role="img"
             viewBox="0 0 512 512"
@@ -80,6 +81,7 @@ exports[`loads and displays CSpinner component 1`] = `
             <th
               class="table-primary fw-semibold"
               style="cursor: pointer; width: 20%; color: blue;"
+              tabindex="0"
             >
               <div
                 class="d-inline"
@@ -90,6 +92,7 @@ exports[`loads and displays CSpinner component 1`] = `
                 class="opacity-25 float-end me-1"
               >
                 <svg
+                  aria-hidden="true"
                   class="icon icon-custom-size"
                   role="img"
                   viewBox="0 0 512 512"
@@ -111,6 +114,7 @@ exports[`loads and displays CSpinner component 1`] = `
             </th>
             <th
               style="cursor: pointer;"
+              tabindex="0"
             >
               <div
                 class="d-inline"
@@ -121,6 +125,7 @@ exports[`loads and displays CSpinner component 1`] = `
                 class="opacity-25 float-end me-1"
               >
                 <svg
+                  aria-hidden="true"
                   class="icon icon-custom-size"
                   role="img"
                   viewBox="0 0 512 512"
@@ -151,6 +156,7 @@ exports[`loads and displays CSpinner component 1`] = `
             </th>
             <th
               style="cursor: pointer; width: 20%;"
+              tabindex="0"
             >
               <div
                 class="d-inline"
@@ -161,6 +167,7 @@ exports[`loads and displays CSpinner component 1`] = `
                 class="float-end me-1"
               >
                 <svg
+                  aria-hidden="true"
                   class="icon icon-custom-size"
                   role="img"
                   viewBox="0 0 512 512"
@@ -247,9 +254,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -276,9 +280,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -305,9 +306,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -334,9 +332,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -363,9 +358,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Don't panic!
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
         </tbody>
         <tfoot>

package/src/components/stepper/__tests__/CStepper.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CStepper } from '../index'
 
@@ -24,8 +24,8 @@ test('CStepper disables future steps in linear mode', async () => {
 
   const buttons = screen.getAllByRole('tab')
   expect(buttons[0]).toBeEnabled()
-  expect(buttons[1]).toBeDisabled()
-  expect(buttons[2]).toBeDisabled()
+  expect(buttons[1]).toBeEnabled() // next step is enabled
+  expect(buttons[2]).toBeDisabled() // steps beyond next are disabled
 })
 
 test('CStepper allows all steps in non-linear mode', async () => {
@@ -47,26 +47,27 @@ test('CStepper calls onStepChange when step is clicked', async () => {
   expect(handleStepChange).toHaveBeenCalledWith(3) // stepNumber = index + 1
 })
 
-test('CStepper renders only active step content in horizontal layout', async () => {
-  render(<CStepper steps={stepsMock} layout="horizontal" />)
+test('CStepper renders active step content in horizontal layout', async () => {
+  const { container } = render(<CStepper steps={stepsMock} layout="horizontal" />)
 
   expect(screen.getByText('Content 1')).toBeVisible()
-  expect(screen.queryByText('Content 2')).not.toBeInTheDocument()
-  expect(screen.queryByText('Content 3')).not.toBeInTheDocument()
+  const panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[0]).toHaveClass('active')
+  expect(panels[1]).not.toHaveClass('active')
+  expect(panels[2]).not.toHaveClass('active')
 })
 
-test('CStepper finish calls onFinish only after last step and valid', async () => {
-  const handleFinish = jest.fn()
-  render(<CStepper steps={stepsMock} onFinish={handleFinish} linear={false} />)
+test('CStepper calls onStepChange when navigating to last step', async () => {
+  const handleStepChange = jest.fn()
+  render(<CStepper steps={stepsMock} onStepChange={handleStepChange} linear={false} />)
 
   const buttons = screen.getAllByRole('tab')
   fireEvent.click(buttons[2])
 
-  fireEvent.click(screen.getByText('Step 3'))
-  expect(handleFinish).toHaveBeenCalledTimes(1)
+  expect(handleStepChange).toHaveBeenCalledWith(3)
 })
 
-test('CStepper resets correctly and focuses first step', async () => {
+test('CStepper resets correctly', async () => {
   const handleReset = jest.fn()
   const stepperRef = React.createRef<any>()
 
@@ -76,23 +77,25 @@ test('CStepper resets correctly and focuses first step', async () => {
   stepperRef.current?.reset()
 
   expect(handleReset).toHaveBeenCalled()
-  expect(screen.getAllByRole('tab')[0]).toHaveFocus()
 })
 
 test('CStepper works in uncontrolled mode with defaultActiveStepIndex', async () => {
-  render(<CStepper steps={stepsMock} defaultActiveStepIndex={1} />)
+  const { container } = render(<CStepper steps={stepsMock} defaultActiveStepIndex={1} />)
 
-  expect(screen.getByText('Content 2')).toBeVisible()
-  expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+  const panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[1]).toHaveClass('active')
+  expect(panels[0]).not.toHaveClass('active')
 })
 
 test('CStepper works in controlled mode with activeStepIndex', async () => {
-  const { rerender } = render(<CStepper steps={stepsMock} activeStepIndex={0} />)
+  const { container, rerender } = render(<CStepper steps={stepsMock} activeStepIndex={0} />)
 
-  expect(screen.getByText('Content 1')).toBeVisible()
+  let panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[0]).toHaveClass('active')
 
   rerender(<CStepper steps={stepsMock} activeStepIndex={2} />)
 
-  expect(screen.getByText('Content 3')).toBeVisible()
-  expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+  panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[2]).toHaveClass('active')
+  expect(panels[0]).not.toHaveClass('active')
 })

package/src/components/stepper/__tests__/__snapshots__/CStepper.spec.tsx.snap

@@ -0,0 +1,295 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CStepper renders vertical layout 1`] = `
+<div>
+  <div
+    class="stepper stepper-vertical"
+  >
+    <ol
+      aria-orientation="vertical"
+      class="stepper-steps"
+      role="tablist"
+    >
+      <li
+        class="stepper-step horizontal"
+        role="presentation"
+      >
+        <button
+          aria-controls="stepper-:r1:-panel-0"
+          aria-selected="true"
+          class="stepper-step-button active"
+          id="stepper-:r1:-step-0"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="stepper-step-indicator"
+          >
+            <span
+              class="stepper-step-indicator-text"
+            >
+              1
+            </span>
+          </span>
+          <span
+            class="stepper-step-label"
+          >
+            Step 1
+          </span>
+        </button>
+        <div
+          class="stepper-step-connector"
+        />
+        <div
+          aria-hidden="false"
+          aria-labelledby="stepper-:r1:-step-0"
+          aria-live="polite"
+          class="stepper-step-content collapse show"
+          id="stepper-:r1:-panel-0"
+          role="tabpanel"
+        >
+          <div>
+            Content 1
+          </div>
+        </div>
+      </li>
+      <li
+        class="stepper-step horizontal"
+        role="presentation"
+      >
+        <button
+          aria-controls="stepper-:r1:-panel-1"
+          aria-selected="false"
+          class="stepper-step-button"
+          id="stepper-:r1:-step-1"
+          role="tab"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="stepper-step-indicator"
+          >
+            <span
+              class="stepper-step-indicator-text"
+            >
+              2
+            </span>
+          </span>
+          <span
+            class="stepper-step-label"
+          >
+            Step 2
+          </span>
+        </button>
+        <div
+          class="stepper-step-connector"
+        />
+        <div
+          aria-hidden="true"
+          aria-labelledby="stepper-:r1:-step-1"
+          aria-live="polite"
+          class="stepper-step-content collapse"
+          id="stepper-:r1:-panel-1"
+          role="tabpanel"
+        >
+          <div>
+            Content 2
+          </div>
+        </div>
+      </li>
+      <li
+        class="stepper-step horizontal"
+        role="presentation"
+      >
+        <button
+          aria-controls="stepper-:r1:-panel-2"
+          aria-selected="false"
+          class="stepper-step-button"
+          disabled=""
+          id="stepper-:r1:-step-2"
+          role="tab"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="stepper-step-indicator"
+          >
+            <span
+              class="stepper-step-indicator-text"
+            >
+              3
+            </span>
+          </span>
+          <span
+            class="stepper-step-label"
+          >
+            Step 3
+          </span>
+        </button>
+        <div
+          aria-hidden="true"
+          aria-labelledby="stepper-:r1:-step-2"
+          aria-live="polite"
+          class="stepper-step-content collapse"
+          id="stepper-:r1:-panel-2"
+          role="tabpanel"
+        >
+          <div>
+            Content 3
+          </div>
+        </div>
+      </li>
+    </ol>
+  </div>
+</div>
+`;
+
+exports[`loads and displays CStepper component 1`] = `
+<div>
+  <div
+    class="stepper"
+  >
+    <ol
+      aria-orientation="horizontal"
+      class="stepper-steps"
+      role="tablist"
+    >
+      <li
+        class="stepper-step horizontal"
+        role="presentation"
+      >
+        <button
+          aria-controls="stepper-:r0:-panel-0"
+          aria-selected="true"
+          class="stepper-step-button active"
+          id="stepper-:r0:-step-0"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="stepper-step-indicator"
+          >
+            <span
+              class="stepper-step-indicator-text"
+            >
+              1
+            </span>
+          </span>
+          <span
+            class="stepper-step-label"
+          >
+            Step 1
+          </span>
+        </button>
+        <div
+          class="stepper-step-connector"
+        />
+      </li>
+      <li
+        class="stepper-step horizontal"
+        role="presentation"
+      >
+        <button
+          aria-controls="stepper-:r0:-panel-1"
+          aria-selected="false"
+          class="stepper-step-button"
+          id="stepper-:r0:-step-1"
+          role="tab"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="stepper-step-indicator"
+          >
+            <span
+              class="stepper-step-indicator-text"
+            >
+              2
+            </span>
+          </span>
+          <span
+            class="stepper-step-label"
+          >
+            Step 2
+          </span>
+        </button>
+        <div
+          class="stepper-step-connector"
+        />
+      </li>
+      <li
+        class="stepper-step horizontal"
+        role="presentation"
+      >
+        <button
+          aria-controls="stepper-:r0:-panel-2"
+          aria-selected="false"
+          class="stepper-step-button"
+          disabled=""
+          id="stepper-:r0:-step-2"
+          role="tab"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            class="stepper-step-indicator"
+          >
+            <span
+              class="stepper-step-indicator-text"
+            >
+              3
+            </span>
+          </span>
+          <span
+            class="stepper-step-label"
+          >
+            Step 3
+          </span>
+        </button>
+      </li>
+    </ol>
+    <div
+      class="stepper-content"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="stepper-:r0:-step-0"
+        aria-live="polite"
+        class="stepper-pane show active"
+        id="stepper-:r0:-panel-0"
+        role="tabpanel"
+      >
+        <div>
+          Content 1
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        aria-labelledby="stepper-:r0:-step-1"
+        aria-live="polite"
+        class="stepper-pane"
+        id="stepper-:r0:-panel-1"
+        role="tabpanel"
+      >
+        <div>
+          Content 2
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        aria-labelledby="stepper-:r0:-step-2"
+        aria-live="polite"
+        class="stepper-pane"
+        id="stepper-:r0:-panel-2"
+        role="tabpanel"
+      >
+        <div>
+          Content 3
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/table/CTableDataCell.tsx

@@ -6,7 +6,8 @@ import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
 export interface CTableDataCellProps
-  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
+  extends
+    Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
     Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
   /**
    * Highlight a table row or cell.

package/src/components/table/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react'
+
 import { CTableDataCellProps } from '../table/CTableDataCell'
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
 import { CTableRowProps } from '../table/CTableRow'
@@ -5,7 +7,7 @@ import { CTableRowProps } from '../table/CTableRow'
 export type Column = {
   label?: string
   key: string
-  _style?: any
+  _style?: CSSProperties
   _props?: CTableHeaderCellProps
 }
 

package/src/components/table/utils.ts

@@ -2,16 +2,16 @@ import type { Column, Item } from './types'
 
 export const pretifyName = (name: string) => {
   return name
-    .replace(/[-_.]/g, ' ')
-    .replace(/ +/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replaceAll(/[-_.]/g, ' ')
+    .replaceAll(/ +/g, ' ')
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1 $2')
     .split(' ')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ')
 }
 
 export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object' ? column.label ?? pretifyName(column.key) : pretifyName(column)
+  typeof column === 'object' ? (column.label ?? pretifyName(column.key)) : pretifyName(column)
 
 export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
   columns

package/src/components/tabs/CTabPanel.tsx

@@ -44,7 +44,9 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
     const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)
 
     useEffect(() => {
-      visible !== undefined && setVisible(visible)
+      if (visible !== undefined) {
+        setVisible(visible)
+      }
     }, [visible])
 
     useEffect(() => {

package/src/components/tabs/CTabsContext.ts

@@ -6,4 +6,4 @@ export interface CTabsContextProps {
   id?: string
 }
 
-export const CTabsContext = createContext({} as CTabsContextProps)
+export const CTabsContext = createContext({} as CTabsContextProps)

package/src/components/tabs/__tests__/CTabContent.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { act, render } from '@testing-library/react'
 import '@testing-library/jest-dom'
+
 import { CTabContent } from '../index'
 
 test('loads and displays CTabContent component', async () => {

package/src/components/tabs/__tests__/CTabPane.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
+
 import { CTabPane, CTabContent } from '../index'
 
 test('loads and displays CTabPane component', async () => {

package/src/components/time-picker/CTimePicker.tsx

@@ -23,8 +23,7 @@ import type { AmPm, LocalizedTimePartials } from './types'
 import { useDebouncedCallback } from '../../hooks'
 
 export interface CTimePickerProps
-  extends Omit<CFormControlWrapperProps, 'floatingLabel'>,
-    Omit<CPickerProps, 'placeholder'> {
+  extends Omit<CFormControlWrapperProps, 'floatingLabel'>, Omit<CPickerProps, 'placeholder'> {
   /**
    * Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales.
    *
@@ -163,7 +162,7 @@ export interface CTimePickerProps
    *
    * @since 4.8.0
    */
-  seconds?: boolean | number[] | ((second: number) => boolean)
+  seconds?: boolean | number[] | ((second: number) => number[])
   /**
    * Size the component small or large.
    */
@@ -584,7 +583,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   columnIndex={0}
                   columnRefs={columnRefs.current}
                   elements={localizedTimePartials && localizedTimePartials.listOfHours}
-                  onClick={(index: number) => handleTimeChange('hours', index.toString())}
+                  onClick={(index) => handleTimeChange('hours', index.toString())}
                   selected={getSelectedHour(date, locale, ampm)}
                   ref={(node: HTMLDivElement | null) => {
                     columnRefs.current[0] = node
@@ -596,7 +595,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                     columnIndex={1}
                     columnRefs={columnRefs.current}
                     elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
-                    onClick={(index: number) => handleTimeChange('minutes', index.toString())}
+                    onClick={(index) => handleTimeChange('minutes', index.toString())}
                     selected={getSelectedMinutes(date)}
                     ref={(node: HTMLDivElement | null) => {
                       columnRefs.current[1] = node
@@ -609,7 +608,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                     columnIndex={minutes ? 2 : 1}
                     columnRefs={columnRefs.current}
                     elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
-                    onClick={(index: number) => handleTimeChange('seconds', index.toString())}
+                    onClick={(index) => handleTimeChange('seconds', index.toString())}
                     selected={getSelectedSeconds(date)}
                     ref={(node: HTMLDivElement | null) => {
                       columnRefs.current[minutes ? 2 : 1] = node
@@ -625,7 +624,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                       { value: 'am', label: 'AM' },
                       { value: 'pm', label: 'PM' },
                     ]}
-                    onClick={(value: string) => handleTimeChange('meridiem', value)}
+                    onClick={(value) => handleTimeChange('meridiem', value.toString())}
                     selected={_ampm}
                     ref={(node: HTMLDivElement | null) => {
                       columnRefs.current[(minutes ? 1 : 0) + (seconds ? 1 : 0) + 1] = node

package/src/components/time-picker/__tests__/CTimePicker.spec.tsx

@@ -1,8 +1,17 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CTimePicker } from '../CTimePicker'
 
+beforeAll(() => {
+  global.IntersectionObserver = class IntersectionObserver {
+    constructor(_callback: IntersectionObserverCallback) {}
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as any
+})
+
 test('loads and displays CTimePicker component', async () => {
   const { container } = render(<CTimePicker />)
   expect(container).toMatchSnapshot()