@coreui/react-pro 5.24.1 → 5.25.0

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