@coreui/react 5.9.2 → 5.11.0

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/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)
+})

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

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSearchButton customize 1`] = `
+<div>
+  <button
+    class="search-button bazinga"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="search-button-icon"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        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"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="search-button-placeholder"
+    >
+      Command palette
+    </span>
+    <span
+      aria-hidden="true"
+      class="search-button-keys"
+    >
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="⌘"
+      >
+        ⌘
+      </span>
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="K"
+      >
+        K
+      </span>
+    </span>
+  </button>
+</div>
+`;
+
+exports[`loads and displays CSearchButton component 1`] = `
+<div>
+  <button
+    class="search-button"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="search-button-icon"
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        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"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="search-button-placeholder"
+    >
+      Search
+    </span>
+    <span
+      aria-hidden="true"
+      class="search-button-keys"
+    >
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="⌘"
+      >
+        ⌘
+      </span>
+      <span
+        class="search-button-key"
+        data-coreui-search-button-key="/"
+      >
+        /
+      </span>
+    </span>
+  </button>
+</div>
+`;

package/src/components/search-button/index.ts

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

package/src/components/search-button/types.ts

@@ -0,0 +1,10 @@
+export type SearchButtonShortcut = {
+  key: string
+  modifiers: {
+    alt: boolean
+    ctrl: boolean
+    meta: boolean
+    shift: boolean
+  }
+  shortcut: string
+}