@coreui/react-pro 5.24.1 → 5.26.0

package/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap

@@ -3,9 +3,10 @@
 exports[`CNavGroup customize 1`] = `
 <div>
   <li
-    class="nav-group bazinga"
+    class="nav-group show bazinga"
   >
     <a
+      aria-expanded="true"
       class="nav-link nav-group-toggle"
       href="#"
     >
@@ -25,6 +26,7 @@ exports[`loads and displays CNavGroup component 1`] = `
     class="nav-group"
   >
     <a
+      aria-expanded="false"
       class="nav-link nav-group-toggle"
       href="#"
     >

package/src/components/offcanvas/__tests__/COffcanvas.spec.tsx

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

package/src/components/one-time-password-input/COneTimePassword.tsx

@@ -1,9 +1,9 @@
 import React, {
-  ChangeEvent,
   Children,
   ClipboardEvent,
   cloneElement,
   FocusEvent,
+  InputEvent,
   forwardRef,
   HTMLAttributes,
   isValidElement,
@@ -29,8 +29,7 @@ type ComponentWithDisplayName = {
 }
 
 export interface COneTimePasswordProps
-  extends CFormControlWrapperProps,
-    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  extends CFormControlWrapperProps, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
    * Function to generate aria-label for each input field. Receives current index (0-based) and total number of inputs.
    */
@@ -199,8 +198,8 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
     )
 
     const handleInputChange = useCallback(
-      (index: number, event: ChangeEvent<HTMLInputElement>) => {
-        const inputValue = event.target.value
+      (index: number, event: InputEvent<HTMLInputElement>) => {
+        const inputValue = event.currentTarget.value
 
         if (inputValue.length === 1 && !isValidInput(inputValue, type)) {
           return
@@ -215,7 +214,7 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
         if (inputValue.length === 1) {
           const nextInput = getNextActiveElement(
             inputRefs.current as HTMLInputElement[],
-            event.target,
+            event.currentTarget,
             true,
             false
           )
@@ -402,19 +401,19 @@ export const COneTimePassword = forwardRef<HTMLDivElement, COneTimePasswordProps
 
               inputMode: type === 'number' ? 'numeric' : 'text',
               pattern: type === 'number' ? '[0-9]*' : '.*',
-              onInput: (event: React.ChangeEvent<HTMLInputElement>) => {
+              onInput: (event: InputEvent<HTMLInputElement>) => {
                 handleInputChange(currentInputIndex, event)
-                inputChild.props.onChange?.(event)
+                inputChild.props.onInput?.(event)
               },
-              onFocus: (event: React.FocusEvent<HTMLInputElement>) => {
+              onFocus: (event: FocusEvent<HTMLInputElement>) => {
                 handleInputFocus(event)
                 inputChild.props.onFocus?.(event)
               },
-              onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {
+              onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {
                 handleKeyDown(event)
                 inputChild.props.onKeyDown?.(event)
               },
-              onPaste: (event: React.ClipboardEvent<HTMLInputElement>) => {
+              onPaste: (event: ClipboardEvent<HTMLInputElement>) => {
                 handlePaste(index, event)
                 inputChild.props.onPaste?.(event)
               },

package/src/components/picker/__tests__/CPicker.spec.tsx

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

package/src/components/picker/__tests__/__snapshots__/CPicker.spec.tsx.snap

@@ -3,21 +3,7 @@
 exports[`loads and displays CPicker component 1`] = `
 <div>
   <div
-    class="dropdown picker"
-  >
-    <button
-      aria-expanded="false"
-      class="btn btn-primary dropdown-toggle"
-      tabindex="0"
-      type="button"
-    />
-    <div
-      aria-hidden="true"
-      class="dropdown-menu"
-      role="menu"
-    >
-      Test
-    </div>
-  </div>
+    class=""
+  />
 </div>
 `;

package/src/components/popover/CPopover.tsx

@@ -182,6 +182,14 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     const { initPopper, destroyPopper } = usePopper()
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+    const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+    const clearTimer = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+        timer.current = undefined
+      }
+    }
 
     const defaultPopperConfig: Partial<Options> = {
       modifiers: [
@@ -197,19 +205,41 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
     }
 
+    const handleShow = () => {
+      clearTimer()
+
+      if (mounted) {
+        timer.current = setTimeout(() => {
+          setVisible(true)
+        }, _delay.show)
+      } else {
+        setMounted(true)
+      }
+
+      onShow?.()
+    }
+
+    const handleHide = () => {
+      clearTimer()
+
+      timer.current = setTimeout(() => {
+        setVisible(false)
+        onHide?.()
+      }, _delay.hide)
+    }
+
     useEffect(() => {
-      if (visible) {
+      if (visible === true) {
         handleShow()
-        return
+      } else if (visible === false) {
+        handleHide()
       }
-
-      handleHide()
     }, [visible])
 
     useEffect(() => {
       if (mounted && togglerRef.current && popoverRef.current) {
         initPopper(togglerRef.current, popoverRef.current, computedPopperConfig)
-        setTimeout(() => {
+        timer.current = setTimeout(() => {
           setVisible(true)
         }, _delay.show)
 
@@ -221,6 +251,13 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       }
     }, [mounted])
 
+    useEffect(() => {
+      return () => {
+        clearTimer()
+        destroyPopper()
+      }
+    }, [])
+
     useEffect(() => {
       if (!_visible && togglerRef.current && popoverRef.current) {
         executeAfterTransition(() => {
@@ -229,39 +266,47 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       }
     }, [_visible])
 
-    const handleShow = () => {
-      setMounted(true)
-      if (onShow) {
-        onShow()
-      }
-    }
-
-    const handleHide = () => {
-      setTimeout(() => {
-        setVisible(false)
-        if (onHide) {
-          onHide()
-        }
-      }, _delay.hide)
-    }
+    const child = children as React.ReactElement<
+      React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> }
+    >
 
     return (
       <>
-        {React.cloneElement(children as React.ReactElement<any>, {
+        {React.cloneElement(child, {
           ...(_visible && {
             'aria-describedby': id,
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => (_visible ? handleHide() : handleShow()),
+            onClick: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onClick?.(event)
+
+              if (_visible) {
+                handleHide()
+              } else {
+                handleShow()
+              }
+            },
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => handleShow(),
-            onBlur: () => handleHide(),
+            onFocus: (event: React.FocusEvent<HTMLElement>) => {
+              child.props.onFocus?.(event)
+              handleShow()
+            },
+            onBlur: (event: React.FocusEvent<HTMLElement>) => {
+              child.props.onBlur?.(event)
+              handleHide()
+            },
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => handleShow(),
-            onMouseLeave: () => handleHide(),
+            onMouseEnter: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onMouseEnter?.(event)
+              handleShow()
+            },
+            onMouseLeave: (event: React.MouseEvent<HTMLElement>) => {
+              child.props.onMouseLeave?.(event)
+              handleHide()
+            },
           }),
         })}
         <CConditionalPortal container={container} portal={true}>

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

@@ -16,6 +16,74 @@ afterEach(() => {
   cleanup()
 })
 
+test('CPopover stays visible when re-hovered during the hide delay', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CPopover trigger="hover" delay={{ show: 0, hide: 300 }} content="content">
+      <CButton color="primary">Test</CButton>
+    </CPopover>
+  )
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  act(() => {
+    fireEvent.mouseOver(btn)
+  })
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
+  expect(document.querySelector('.popover')).toHaveClass('show')
+
+  act(() => {
+    fireEvent.mouseOut(btn)
+    jest.advanceTimersByTime(100)
+  })
+
+  act(() => {
+    fireEvent.mouseOver(btn)
+    jest.advanceTimersByTime(1000)
+  })
+
+  expect(document.querySelector('.popover')).toHaveClass('show')
+
+  jest.useRealTimers()
+})
+
+test('CPopover preserves event handlers of the child element', async () => {
+  jest.useFakeTimers()
+
+  const onClick = jest.fn()
+  const onMouseEnter = jest.fn()
+
+  render(
+    <CPopover trigger={['hover', 'click']} content="content">
+      <CButton color="primary" onClick={onClick} onMouseEnter={onMouseEnter}>
+        Test
+      </CButton>
+    </CPopover>
+  )
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  act(() => {
+    fireEvent.mouseOver(btn)
+    jest.runAllTimers()
+  })
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onMouseEnter).toHaveBeenCalledTimes(1)
+  expect(onClick).toHaveBeenCalledTimes(1)
+
+  jest.useRealTimers()
+})
+
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
@@ -57,16 +125,23 @@ test('CPopover customize', async () => {
 test('CPopover onShow and onHide', async () => {
   jest.useFakeTimers()
 
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
   render(
-    <CPopover content="content" title="title" trigger="click" placement="right" visible={true}>
+    <CPopover
+      content="content"
+      title="title"
+      trigger="click"
+      placement="right"
+      onShow={onShow}
+      onHide={onHide}
+    >
       <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)
@@ -74,6 +149,9 @@ test('CPopover onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 
@@ -82,6 +160,9 @@ test('CPopover onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 

package/src/components/progress/CProgress.tsx

@@ -6,8 +6,7 @@ import { CProgressStackedContext } from './CProgressStackedContext'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>,
-    CProgressBarProps {
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, CProgressBarProps {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/rating/CRating.tsx

@@ -2,6 +2,7 @@ import React, {
   forwardRef,
   Fragment,
   HTMLAttributes,
+  JSX,
   ReactNode,
   useEffect,
   useId,

package/src/components/search-button/CSearchButton.tsx

@@ -0,0 +1,195 @@
+import React, {
+  ButtonHTMLAttributes,
+  MouseEvent,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { useForkedRef } from '../../hooks'
+import {
+  formatShortcutTokens,
+  getPreferredShortcut,
+  getPressedKeys,
+  matchesShortcut,
+  parseShortcut,
+  shouldIgnoreShortcut,
+} from './utils'
+
+export interface CSearchButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Content to customize the full button body.
+   */
+  children?: ReactNode
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string
+  /**
+   * Custom icon displayed before the placeholder text.
+   */
+  icon?: ReactNode
+  /**
+   * Placeholder content rendered inside `.search-button-placeholder`.
+   */
+  placeholder?: ReactNode
+  /**
+   * Callback fired when the component is activated by click or keyboard shortcut.
+   */
+  onTrigger?: () => void
+  /**
+   * Prevent the browser's default behavior when the configured shortcut matches.
+   */
+  preventDefault?: boolean
+  /**
+   * Comma-separated shortcut list. The component matches all configured shortcuts and renders the platform-preferred one.
+   */
+  shortcut?: string
+}
+
+export const CSearchButton = forwardRef<HTMLButtonElement, CSearchButtonProps>(
+  (
+    {
+      children,
+      className,
+      disabled,
+      icon,
+      onClick,
+      onTrigger,
+      placeholder = 'Search',
+      preventDefault = true,
+      shortcut = 'meta+/,ctrl+/',
+      type = 'button',
+      ...rest
+    },
+    ref
+  ) => {
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const forkedRef = useForkedRef(ref, buttonRef)
+    const [activeKeys, setActiveKeys] = useState<string[]>([])
+    const shortcuts = useMemo(() => parseShortcut(shortcut), [shortcut])
+    const preferredShortcut = useMemo(() => getPreferredShortcut(shortcuts), [shortcuts])
+    const shortcutTokens = useMemo(
+      () => formatShortcutTokens(preferredShortcut?.shortcut || ''),
+      [preferredShortcut]
+    )
+
+    const handleShortcut = useCallback(
+      (event: KeyboardEvent) => {
+        if (disabled || event.defaultPrevented || event.repeat || shouldIgnoreShortcut(event)) {
+          return
+        }
+
+        const matchedShortcut = shortcuts.find((shortcut) => matchesShortcut(shortcut, event))
+
+        if (!matchedShortcut) {
+          return
+        }
+
+        if (preventDefault) {
+          event.preventDefault()
+        }
+
+        onTrigger?.()
+      },
+      [disabled, onTrigger, preventDefault, shortcuts]
+    )
+
+    const handleDocumentKeydown = useCallback(
+      (event: KeyboardEvent) => {
+        setActiveKeys(Array.from(getPressedKeys(event)))
+        handleShortcut(event)
+      },
+      [handleShortcut]
+    )
+
+    const handleDocumentKeyup = useCallback((event: KeyboardEvent) => {
+      setActiveKeys(Array.from(getPressedKeys(event)))
+    }, [])
+
+    const handleWindowBlur = useCallback(() => {
+      setActiveKeys([])
+    }, [])
+
+    useEffect(() => {
+      if (typeof document === 'undefined' || typeof window === 'undefined') {
+        return
+      }
+
+      document.addEventListener('keydown', handleDocumentKeydown)
+      document.addEventListener('keyup', handleDocumentKeyup)
+      window.addEventListener('blur', handleWindowBlur)
+
+      return () => {
+        document.removeEventListener('keydown', handleDocumentKeydown)
+        document.removeEventListener('keyup', handleDocumentKeyup)
+        window.removeEventListener('blur', handleWindowBlur)
+      }
+    }, [handleDocumentKeydown, handleDocumentKeyup, handleWindowBlur])
+
+    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event)
+      onTrigger?.()
+    }
+
+    return (
+      <button
+        type={type}
+        className={classNames('search-button', className)}
+        disabled={disabled}
+        onClick={handleClick}
+        {...rest}
+        ref={forkedRef}
+      >
+        {children ?? (
+          <>
+            {icon ?? (
+              <svg
+                className="search-button-icon"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+                aria-hidden="true"
+              >
+                <path
+                  fill="currentColor"
+                  d="m479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941"
+                />
+              </svg>
+            )}
+            <span className="search-button-placeholder">{placeholder}</span>
+          </>
+        )}
+        <span className="search-button-keys" aria-hidden="true">
+          {shortcutTokens.map((key) => (
+            <span
+              className={classNames('search-button-key', { active: activeKeys.includes(key) })}
+              data-coreui-search-button-key={key}
+              key={key}
+            >
+              {key}
+            </span>
+          ))}
+        </span>
+      </button>
+    )
+  }
+)
+
+CSearchButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.node,
+  onTrigger: PropTypes.func,
+  placeholder: PropTypes.node,
+  preventDefault: PropTypes.bool,
+  shortcut: PropTypes.string,
+}
+
+CSearchButton.displayName = 'CSearchButton'