@coreui/react-pro 5.12.0 → 5.14.0

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPagination, CPaginationItem } from '../../../index'
+import { CPagination, CPaginationItem } from '../index'
 
 test('loads and displays CPagination component', async () => {
   const { container } = render(<CPagination>Test</CPagination>)

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

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

package/src/components/password-input/CPasswordInput.tsx

@@ -0,0 +1,172 @@
+import React, {
+  ChangeEventHandler,
+  forwardRef,
+  InputHTMLAttributes,
+  useEffect,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
+
+export interface CPasswordInputProps
+  extends CFormControlWrapperProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /**
+   * Sets the accessible label (`aria-label`) for the toggle password visibility button. This improves accessibility for screen readers and should describe the action, e.g. `"Show password"` or `"Hide password"`.
+   */
+  ariaLabelToggler?: string
+
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+
+  /**
+   * Enables delayed `onChange` execution for improved performance in React password inputs.
+   * - `true` delays the `onChange` callback by 500ms.
+   * - You can also pass a custom delay (in milliseconds) as a number.
+   */
+  delay?: boolean | number
+
+  /**
+   * Disables the password input field. When `true`, the user cannot interact with the field.
+   */
+  disabled?: boolean
+
+  /**
+   * Callback triggered when the value of the password input changes. If `delay` is set, the callback is called after the specified timeout.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
+
+  /**
+   * Makes the React password input read-only. Prevents user input but allows text selection.
+   */
+  readOnly?: boolean
+
+  /**
+   * Controls the initial visibility of the password. When `true`, the input type is set to `"text"` instead of `"password"`. This allows **toggling password visibility** in React forms.
+   */
+  showPassword?: boolean
+
+  /**
+   * Sets the visual size of the password input. Use `'sm'` for small or `'lg'` for large input fields.
+   */
+  size?: 'sm' | 'lg'
+
+  /**
+   * The value of the password input field. To make the input controlled, pair this with the `onChange` handler.
+   */
+  value?: string | string[] | number
+}
+
+export const CPasswordInput = forwardRef<HTMLInputElement, CPasswordInputProps>(
+  (
+    {
+      children,
+      ariaLabelToggler = 'Toggle password visibility',
+      className,
+      delay = false,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingClassName,
+      floatingLabel,
+      id,
+      invalid,
+      label,
+      onChange,
+      showPassword: showPasswordProp = false,
+      size,
+      text,
+      tooltipFeedback,
+      valid,
+      ...rest
+    },
+    ref
+  ) => {
+    const [value, setValue] = useState<React.ChangeEvent<HTMLInputElement>>()
+    const [showPassword, setShowPassword] = useState<boolean>(showPasswordProp)
+
+    useEffect(() => {
+      const timeOutId = setTimeout(
+        () => value && onChange && onChange(value),
+        typeof delay === 'number' ? delay : 500
+      )
+
+      return () => clearTimeout(timeOutId)
+    }, [value])
+
+    useEffect(() => {
+      setShowPassword(showPasswordProp)
+    }, [showPasswordProp])
+
+    const renderInputAndButton = () => (
+      <>
+        <input
+          className={classNames(
+            'form-control',
+            {
+              [`form-control-${size}`]: size,
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className
+          )}
+          id={id}
+          type={showPassword ? 'text' : 'password'}
+          onChange={(event) => (delay ? setValue(event) : onChange?.(event))}
+          {...rest}
+          ref={ref}
+        >
+          {children}
+        </input>
+        <button
+          type="button"
+          className="form-password-action"
+          data-coreui-toggle="password"
+          aria-label={ariaLabelToggler}
+          onClick={() => setShowPassword((prev) => !prev)}
+        >
+          <span className="form-password-action-icon"></span>
+        </button>
+      </>
+    )
+
+    return (
+      <CFormControlWrapper
+        describedby={rest['aria-describedby']}
+        feedback={feedback}
+        feedbackInvalid={feedbackInvalid}
+        feedbackValid={feedbackValid}
+        floatingClassName={classNames('form-password', floatingClassName)}
+        floatingLabel={floatingLabel}
+        id={id}
+        invalid={invalid}
+        label={label}
+        text={text}
+        tooltipFeedback={tooltipFeedback}
+        valid={valid}
+      >
+        {floatingLabel ? (
+          renderInputAndButton()
+        ) : (
+          <div className="form-password">{renderInputAndButton()}</div>
+        )}
+      </CFormControlWrapper>
+    )
+  }
+)
+
+CPasswordInput.propTypes = {
+  ariaLabelToggler: PropTypes.string,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+  showPassword: PropTypes.bool,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  ...CFormControlWrapper.propTypes,
+}
+
+CPasswordInput.displayName = 'CPasswordInput'

package/src/components/password-input/index.ts

@@ -0,0 +1,3 @@
+import { CPasswordInput } from './CPasswordInput'
+
+export { CPasswordInput }

package/src/components/placeholder/__tests__/CPlaceholder.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPlaceholder } from '../../../index'
+import { CPlaceholder } from '../index'
 
 test('loads and displays CPlaceholder component', async () => {
   const { container } = render(<CPlaceholder color="primary" />)

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -1,84 +1,92 @@
 import * as React from 'react'
-import { act, render, fireEvent } from '@testing-library/react'
+import { act, cleanup, render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPopover, CButton } from '../../../index'
+
+import { CButton } from '../../button'
+import { CPopover } from '../index'
+
+let container: HTMLDivElement | null = null
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+})
+
+afterEach(() => {
+  cleanup()
+})
 
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
       <CButton color="primary">Test</CButton>
-    </CPopover>,
+    </CPopover>
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CPopover customize', async () => {
   jest.useFakeTimers()
-  let arr, element
-  const { container } = render(
+
+  render(
     <CPopover content="content" title="title" trigger="click" placement="right">
       <CButton color="primary">Test</CButton>
     </CPopover>,
-    { container: document.body },
+    { container: container! }
   )
-  const btn = document.querySelector('.btn')
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
   act(() => {
-    if (btn !== null) {
-      fireEvent.click(btn)
-    }
+    fireEvent.click(btn)
+    jest.runAllTimers()
   })
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  let arrLength = container.getElementsByClassName('popover').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('bs-popover-auto').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-arrow').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-header').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-body').length
-  expect(arrLength).toBe(1)
-  arr = container.getElementsByClassName('popover-header')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('title')
-  } else {
-    expect(true).toBe(false)
-  }
-  arr = container.getElementsByClassName('popover-body')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('content')
-  } else {
-    expect(true).toBe(false)
-  }
+
+  expect(document.querySelector('.popover')).toBeInTheDocument()
+  expect(document.querySelector('.bs-popover-auto')).toBeInTheDocument()
+  expect(document.querySelector('.popover-arrow')).toBeInTheDocument()
+  expect(document.querySelector('.popover-header')).toBeInTheDocument()
+  expect(document.querySelector('.popover-body')).toBeInTheDocument()
+
+  expect(document.querySelector('.popover-header')?.innerHTML).toBe('title')
+  expect(document.querySelector('.popover-body')?.innerHTML).toBe('content')
+
   jest.useRealTimers()
 })
 
-// test('CPopover onToggle', async () => {
-//   let btn
-//   jest.useFakeTimers()
-//   const onToggle = jest.fn()
-//   render(
-//     <CPopover onToggle={onToggle} content="content" trigger="click">
-//       <CButton>Test</CButton>
-//     </CPopover>,
-//   )
-//   expect(onToggle).toHaveBeenCalledTimes(0)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(1)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(2)
-//   jest.useRealTimers()
-// })
-
-//TODO: test visible on focus, click and mouseEnter
+test('CPopover onShow and onHide', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CPopover content="content" title="title" trigger="click" placement="right" visible={true}>
+      <CButton color="primary">Test</CButton>
+    </CPopover>,
+    { container: container! }
+  )
+
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  expect(onShow).toHaveBeenCalledTimes(0)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(1)
+
+  jest.useRealTimers()
+})

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -1,37 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CPopover customize 1`] = `
-<body>
-  <button
-    class="btn btn-primary"
-    type="button"
-  >
-    Test
-  </button>
-  <div
-    class="popover bs-popover-auto fade"
-    id="popover:r1:"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
-  >
-    <div
-      class="popover-arrow"
-      style="position: absolute;"
-    />
-    <div
-      class="popover-header"
-    >
-      title
-    </div>
-    <div
-      class="popover-body"
-    >
-      content
-    </div>
-  </div>
-</body>
-`;
-
 exports[`loads and displays CPopover component 1`] = `
 <div>
   <button

package/src/components/progress/CProgress.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
+import { CProgressStackedContext } from './CProgressStackedContext'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps

package/src/components/progress/CProgressBar.tsx

@@ -2,9 +2,10 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
-import { colorPropType, gradientsPropType } from '../../props'
-import type { Colors, Gradients } from '../../types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
+
+import { CProgressStackedContext } from './CProgressStackedContext'
 
 export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/progress/CProgressStacked.tsx

@@ -1,7 +1,9 @@
-import React, { createContext, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CProgressStackedContext } from './CProgressStackedContext'
+
 export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -9,12 +11,6 @@ export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
 }
 
-export interface CProgressStackedContextProps {
-  stacked?: boolean
-}
-
-export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)
-
 export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps>(
   ({ children, className, ...rest }, ref) => {
     return (
@@ -28,7 +24,7 @@ export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps
         </CProgressStackedContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CProgressStacked.propTypes = {

package/src/components/progress/CProgressStackedContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export interface CProgressStackedContextProps {
+  stacked?: boolean
+}
+
+export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)

package/src/components/progress/__tests__/CProgress.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CProgress } from '../../../index'
+import { CProgress } from '../index'
 
 test('loads and displays CProgress component', async () => {
   const { container } = render(<CProgress color="warning">Test</CProgress>)

package/src/components/progress/__tests__/CProgressBar.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CProgressBar } from '../../../index'
+import { CProgressBar } from '../index'
 
 test('loads and displays CProgressBar component', async () => {
   const { container } = render(<CProgressBar color="warning">Test</CProgressBar>)

package/src/components/sidebar/CSidebarNav.tsx

@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   ElementType,
   forwardRef,
   HTMLAttributes,
@@ -10,6 +9,12 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import type { CNavGroupProps } from '../nav/CNavGroup'
+import type { CNavLinkProps } from '../nav/CNavLink'
+import type { CNavItemProps } from '../nav/CNavItem'
+
+import { CSidebarNavContext } from './CSidebarNavContext'
+
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
@@ -25,42 +30,37 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
   className?: string
 }
 
-interface ContextProps {
-  visibleGroup: string
-  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+const isNavElement = (
+  child: ReactNode
+): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
+  if (!React.isValidElement(child)) return false
+  const type = child.type as { displayName?: string }
+  return (
+    type.displayName === 'CNavGroup' ||
+    type.displayName === 'CNavLink' ||
+    type.displayName === 'CNavItem'
+  )
 }
 
-export const CNavContext = createContext({} as ContextProps)
-
 const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child: ReactNode, index: number) => {
-    if (
-      !React.isValidElement(child) ||
-      // @ts-expect-error the `children` exist in each component. TODO: resolve
-      (child.type.displayName !== 'CNavGroup' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavLink' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavItem')
-    ) {
+  return React.Children.map(children, (child, index) => {
+    if (!isNavElement(child)) {
       return child
     }
 
     const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
 
-    if (child.props && child.props.children) {
-      return React.cloneElement(child as ReactElement<any>, {
+    if (child.props.children) {
+      const type = child.type as { displayName?: string }
+      const shouldUpdateId = type.displayName !== 'CNavItem'
+
+      return React.cloneElement(child, {
         idx: _id,
-        children: recursiveClone(
-          child.props.children,
-          _id,
-          // @ts-expect-error the `displayName` exist in each component. TODO: resolve
-          child.type.displayName === 'CNavItem' ? false : true,
-        ),
+        children: recursiveClone(child.props.children, _id, shouldUpdateId),
       })
     }
 
-    return React.cloneElement(child as ReactElement<any>, {
+    return React.cloneElement(child, {
       idx: _id,
     })
   })
@@ -77,11 +77,11 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
   }
 
   return (
-    <CNavContext.Provider value={CNavContextValues}>
+    <CSidebarNavContext.Provider value={CNavContextValues}>
       <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
         {recursiveClone(children)}
       </Component>
-    </CNavContext.Provider>
+    </CSidebarNavContext.Provider>
   )
 })
 

package/src/components/sidebar/CSidebarNavContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CSidebarNavContextProps {
+  visibleGroup: string
+  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+}
+
+export const CSidebarNavContext = createContext({} as CSidebarNavContextProps)

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

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CSidebar component', async () => {
   const { container } = render(<CSidebar>Test</CSidebar>)

package/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarBrand } from '../../../index'
+import { CSidebarBrand } from '../index'
 
 test('loads and displays CSidebarBrand component', async () => {
   const { container } = render(<CSidebarBrand color="primary">Test</CSidebarBrand>)

package/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarNav.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx

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

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

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