@coreui/react-pro 5.24.0 → 5.25.0

package/src/components/multi-select/__tests__/__snapshots__/CMultiSelectSelection.spec.tsx.snap

@@ -22,13 +22,8 @@ exports[`CMultiSelectSelection customize tags 1`] = `
       <button
         aria-label="Close"
         class="form-multi-select-tag-delete"
-      >
-        <span
-          aria-hidden="true"
-        >
-          ×
-        </span>
-      </button>
+        type="button"
+      />
     </span>
     <span
       class="form-multi-select-tag"
@@ -44,7 +39,15 @@ exports[`CMultiSelectSelection customize text 1`] = `
   <span
     class="form-multi-select-selection"
   >
-    text1, text2
+    <span>
+      text1
+      ,
+       
+    </span>
+    <span>
+      text2
+       
+    </span>
   </span>
 </div>
 `;

package/src/components/nav/CNavGroup.tsx

@@ -17,7 +17,6 @@ import type { TransitionStatus } from 'react-transition-group'
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
-
 export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
@@ -36,7 +35,7 @@ export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   /**
    * Set group toggler label.
    */
-  toggler?: string | ReactNode
+  toggler?: string | ReactNode | (({ visible }: { visible: boolean }) => ReactNode)
   /**
    * Show nav group items.
    */
@@ -69,8 +68,12 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   )
 
   useEffect(() => {
-    setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
-  }, [visibleGroup])
+    visible !== undefined && setVisible(visible)
+  }, [visible])
+
+  useEffect(() => {
+    visibleGroup && setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
+  }, [idx, visibleGroup])
 
   const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault()
@@ -116,6 +119,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   }
 
   const NavGroupItemsComponent = Component === 'li' ? 'ul' : 'div'
+  const togglerContent = typeof toggler === 'function' ? toggler({ visible: _visible }) : toggler
 
   return (
     <Component
@@ -129,10 +133,11 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
           href="#"
           onClick={(event) => handleTogglerOnCLick(event)}
         >
-          {toggler}
+          {togglerContent}
         </a>
       )}
       <Transition
+        appear
         in={_visible}
         nodeRef={navItemsRef}
         onEntering={onEntering}
@@ -167,7 +172,7 @@ CNavGroup.propTypes = {
   className: PropTypes.string,
   compact: PropTypes.bool,
   idx: PropTypes.string,
-  toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
   visible: PropTypes.bool,
 }
 

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

@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CNavGroup } from '../index'
+import { CSidebarNavContext } from '../../sidebar/CSidebarNavContext'
 
 test('loads and displays CNavGroup component', async () => {
   const { container } = render(<CNavGroup toggler="anchorText" />)
@@ -23,3 +24,30 @@ test('CNavGroup customize', async () => {
     expect(true).toBe(false)
   }
 })
+
+test('CNavGroup stays expanded when visible prop is set', async () => {
+  render(
+    <CSidebarNavContext.Provider value={{ visibleGroup: '', setVisibleGroup: jest.fn() }}>
+      <CNavGroup idx="1" toggler="anchorText" visible={true} />
+    </CSidebarNavContext.Provider>
+  )
+
+  expect(screen.getByRole('listitem')).toHaveClass('show')
+})
+
+test('CNavGroup toggler render function receives visible state', async () => {
+  render(
+    <CSidebarNavContext.Provider value={{ visibleGroup: '1', setVisibleGroup: jest.fn() }}>
+      <CNavGroup
+        idx="1"
+        toggler={({ visible }) => <span>{visible ? 'expanded' : 'collapsed'}</span>}
+      />
+    </CSidebarNavContext.Provider>
+  )
+
+  expect(screen.getByText('expanded')).toBeInTheDocument()
+
+  fireEvent.click(screen.getByRole('link'))
+
+  expect(screen.getByText('collapsed')).toBeInTheDocument()
+})

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

@@ -3,7 +3,7 @@
 exports[`CNavGroup customize 1`] = `
 <div>
   <li
-    class="nav-group bazinga"
+    class="nav-group show bazinga"
   >
     <a
       class="nav-link nav-group-toggle"

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

@@ -197,13 +197,24 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
     }
 
+    const handleShow = () => {
+      setMounted(true)
+      onShow?.()
+    }
+
+    const handleHide = () => {
+      setTimeout(() => {
+        setVisible(false)
+        onHide?.()
+      }, _delay.hide)
+    }
+
     useEffect(() => {
-      if (visible) {
+      if (visible === true) {
         handleShow()
-        return
+      } else if (visible === false) {
+        handleHide()
       }
-
-      handleHide()
     }, [visible])
 
     useEffect(() => {
@@ -229,22 +240,6 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       }
     }, [_visible])
 
-    const handleShow = () => {
-      setMounted(true)
-      if (onShow) {
-        onShow()
-      }
-    }
-
-    const handleHide = () => {
-      setTimeout(() => {
-        setVisible(false)
-        if (onHide) {
-          onHide()
-        }
-      }, _delay.hide)
-    }
-
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {

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

@@ -57,16 +57,16 @@ 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 +74,9 @@ test('CPopover onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 
@@ -82,6 +85,9 @@ test('CPopover onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 

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'

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

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { CSearchButton } from '../index'
+
+const originalPlatform = window.navigator.platform
+
+beforeEach(() => {
+  Object.defineProperty(window.navigator, 'platform', {
+    configurable: true,
+    value: 'MacIntel',
+  })
+})
+
+afterEach(() => {
+  Object.defineProperty(window.navigator, 'platform', {
+    configurable: true,
+    value: originalPlatform,
+  })
+})
+
+test('loads and displays CSearchButton component', async () => {
+  const { container } = render(<CSearchButton />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CSearchButton customize', async () => {
+  const { container } = render(
+    <CSearchButton className="bazinga" placeholder="Command palette" shortcut="meta+k,ctrl+k" />,
+  )
+
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('search-button')
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(screen.getByText('Command palette')).toBeInTheDocument()
+  expect(screen.getByText('⌘')).toBeInTheDocument()
+  expect(screen.getByText('K')).toBeInTheDocument()
+})
+
+test('CSearchButton triggers click on matching shortcut', async () => {
+  const onClick = jest.fn()
+  const onTrigger = jest.fn()
+
+  render(<CSearchButton onClick={onClick} onTrigger={onTrigger} shortcut="meta+k,ctrl+k" />)
+
+  fireEvent.keyDown(document, { key: 'k', metaKey: true })
+
+  expect(onClick).toHaveBeenCalledTimes(0)
+  expect(onTrigger).toHaveBeenCalledTimes(1)
+})
+
+test('CSearchButton ignores plain typing in editable fields', async () => {
+  const onClick = jest.fn()
+
+  render(
+    <>
+      <input aria-label="Search input" />
+      <CSearchButton onClick={onClick} shortcut="k" />
+    </>,
+  )
+
+  fireEvent.keyDown(screen.getByLabelText('Search input'), { key: 'k' })
+
+  expect(onClick).not.toHaveBeenCalled()
+})
+
+test('CSearchButton highlights active shortcut keys', async () => {
+  render(<CSearchButton shortcut="meta+k,ctrl+k" />)
+
+  fireEvent.keyDown(document, { key: 'Meta', metaKey: true })
+
+  expect(screen.getByText('⌘')).toHaveClass('active')
+
+  fireEvent.keyDown(document, { key: 'k', metaKey: true })
+
+  expect(screen.getByText('⌘')).toHaveClass('active')
+  expect(screen.getByText('K')).toHaveClass('active')
+
+  fireEvent.keyUp(document, { key: 'k' })
+
+  expect(screen.getByText('⌘')).not.toHaveClass('active')
+  expect(screen.getByText('K')).not.toHaveClass('active')
+})
+
+test('CSearchButton triggers onTrigger on click', async () => {
+  const onClick = jest.fn()
+  const onTrigger = jest.fn()
+
+  render(<CSearchButton onClick={onClick} onTrigger={onTrigger} />)
+
+  fireEvent.click(screen.getByRole('button'))
+
+  expect(onClick).toHaveBeenCalledTimes(1)
+  expect(onTrigger).toHaveBeenCalledTimes(1)
+})