@coreui/react-pro 5.24.1 → 5.26.0

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

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

@@ -0,0 +1,140 @@
+import type { SearchButtonShortcut } from './types'
+
+const MODIFIER_KEYS = new Set(['alt', 'ctrl', 'meta', 'shift'])
+const KEY_ALIASES: Record<string, string> = {
+  ' ': 'space',
+  cmd: 'meta',
+  command: 'meta',
+  control: 'ctrl',
+  esc: 'escape',
+  option: 'alt',
+  return: 'enter',
+  spacebar: 'space',
+}
+const KEY_LABELS: Record<string, string> = {
+  alt: 'Alt',
+  ctrl: 'Ctrl',
+  meta: '⌘',
+  shift: 'Shift',
+  space: 'Space',
+}
+const EDITABLE_TARGET_SELECTOR =
+  'input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]'
+
+export const normalizeKey = (key: string) => KEY_ALIASES[key.toLowerCase()] || key.toLowerCase()
+
+export const parseShortcut = (shortcut: string): SearchButtonShortcut[] =>
+  shortcut
+    .split(',')
+    .map((value) => value.trim())
+    .filter(Boolean)
+    .map((value) => {
+      const keys = value.split('+').map((part) => normalizeKey(part.trim()))
+      const modifiers = {
+        alt: false,
+        ctrl: false,
+        meta: false,
+        shift: false,
+      }
+
+      let key = ''
+
+      for (const part of keys) {
+        if (MODIFIER_KEYS.has(part)) {
+          modifiers[part as keyof typeof modifiers] = true
+          continue
+        }
+
+        key = part
+      }
+
+      return {
+        key,
+        modifiers,
+        shortcut: value,
+      }
+    })
+
+const getPlatform = () => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+
+  const navigator = window.navigator as Navigator & {
+    userAgentData?: {
+      platform?: string
+    }
+  }
+
+  return navigator.userAgentData?.platform || navigator.platform || navigator.userAgent || ''
+}
+
+export const isMacOS = () => /Mac|iPhone|iPad|iPod|macOS|Macintosh/.test(getPlatform())
+
+export const getPreferredShortcut = (shortcuts: SearchButtonShortcut[]) =>
+  shortcuts.find((shortcut) => (isMacOS() ? shortcut.modifiers.meta : shortcut.modifiers.ctrl)) ||
+  shortcuts[0] ||
+  null
+
+export const getKeyLabel = (key: string) =>
+  KEY_LABELS[key] ||
+  (key.length === 1 ? key.toUpperCase() : `${key.charAt(0).toUpperCase()}${key.slice(1)}`)
+
+export const formatShortcutTokens = (shortcut: string) =>
+  shortcut
+    .split('+')
+    .map((part) => normalizeKey(part.trim()))
+    .map((part) => getKeyLabel(part))
+    .filter(Boolean)
+
+export const getPressedKeys = (event: KeyboardEvent) => {
+  const pressedKeys = new Set<string>()
+
+  if (event.altKey) {
+    pressedKeys.add(KEY_LABELS.alt)
+  }
+
+  if (event.ctrlKey) {
+    pressedKeys.add(KEY_LABELS.ctrl)
+  }
+
+  if (event.metaKey) {
+    pressedKeys.add(KEY_LABELS.meta)
+  }
+
+  if (event.shiftKey) {
+    pressedKeys.add(KEY_LABELS.shift)
+  }
+
+  const normalizedKey = normalizeKey(event.key)
+
+  if (!MODIFIER_KEYS.has(normalizedKey) && event.type === 'keydown') {
+    pressedKeys.add(getKeyLabel(normalizedKey))
+  }
+
+  return pressedKeys
+}
+
+export const isEditableTarget = (target: EventTarget | null) => {
+  if (!(target instanceof Element)) {
+    return false
+  }
+
+  return target.matches(EDITABLE_TARGET_SELECTOR) || !!target.closest(EDITABLE_TARGET_SELECTOR)
+}
+
+export const shouldIgnoreShortcut = (event: KeyboardEvent) =>
+  isEditableTarget(event.target) && !event.ctrlKey && !event.metaKey
+
+export const matchesShortcut = (shortcut: SearchButtonShortcut, event: KeyboardEvent) => {
+  if (!shortcut.key || normalizeKey(event.key) !== shortcut.key) {
+    return false
+  }
+
+  return (
+    shortcut.modifiers.alt === event.altKey &&
+    shortcut.modifiers.ctrl === event.ctrlKey &&
+    shortcut.modifiers.meta === event.metaKey &&
+    shortcut.modifiers.shift === event.shiftKey
+  )
+}

package/src/components/sidebar/CSidebar.tsx

@@ -92,7 +92,7 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const sidebarRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, sidebarRef)
@@ -101,46 +101,65 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
     const [mobile, setMobile] = useState(false)
     const [visibleMobile, setVisibleMobile] = useState<boolean>(false)
     const [visibleDesktop, setVisibleDesktop] = useState<boolean>(
-      visible !== undefined ? visible : overlaid ? false : true,
+      visible === undefined ? !overlaid : visible
     )
 
     useEffect(() => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      visible !== undefined && handleVisibleChange(visible)
+      if (sidebarRef.current) {
+        setMobile(isOnMobile(sidebarRef.current))
+      }
+
+      if (visible !== undefined) {
+        handleVisibleChange(visible)
+      }
     }, [visible])
 
     useEffect(() => {
-      inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport)
-      !inViewport && onHide && onHide()
-      inViewport && onShow && onShow()
+      if (inViewport !== undefined) {
+        onVisibleChange?.(inViewport)
+      }
+
+      if (inViewport) {
+        onShow?.()
+      } else {
+        onHide?.()
+      }
     }, [inViewport])
 
     useEffect(() => {
-      mobile && setVisibleMobile(false)
+      if (mobile) {
+        setVisibleMobile(false)
+      }
     }, [mobile])
 
     useEffect(() => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
+      const element = sidebarRef.current
+
+      if (element) {
+        setMobile(isOnMobile(element))
+        setInViewport(isInViewport(element))
+      }
+
+      const handleTransitionEnd = () => {
+        if (element) {
+          setInViewport(isInViewport(element))
+        }
+      }
 
       window.addEventListener('resize', handleResize)
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
-      sidebarRef.current?.addEventListener('mouseup', handleOnClick)
-      sidebarRef.current?.addEventListener('transitionend', () => {
-        sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-      })
+      element?.addEventListener('mouseup', handleOnClick)
+      element?.addEventListener('transitionend', handleTransitionEnd)
 
       return () => {
         window.removeEventListener('resize', handleResize)
         window.removeEventListener('mouseup', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
 
-        sidebarRef.current?.removeEventListener('mouseup', handleOnClick)
-        sidebarRef.current?.removeEventListener('transitionend', () => {
-          sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
-        })
+        element?.removeEventListener('mouseup', handleOnClick)
+        element?.removeEventListener('transitionend', handleTransitionEnd)
       }
     })
 
@@ -158,8 +177,10 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
     }
 
     const handleResize = () => {
-      sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
+      if (sidebarRef.current) {
+        setMobile(isOnMobile(sidebarRef.current))
+        setInViewport(isInViewport(sidebarRef.current))
+      }
     }
 
     const handleKeyup = (event: Event) => {
@@ -183,11 +204,15 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
 
     const handleOnClick = (event: Event) => {
       const target = event.target as HTMLAnchorElement
-      target &&
+
+      if (
+        target &&
         target.classList.contains('nav-link') &&
         !target.classList.contains('nav-group-toggle') &&
-        mobile &&
+        mobile
+      ) {
         handleHide()
+      }
     }
 
     return (
@@ -206,7 +231,7 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
               show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
               hide: visibleDesktop === false && !mobile && !overlaid,
             },
-            className,
+            className
           )}
           {...rest}
           ref={forkedRef}
@@ -217,11 +242,11 @@ export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> =
           mobile &&
           createPortal(
             <CBackdrop className="sidebar-backdrop" visible={mobile && visibleMobile} />,
-            document.body,
+            document.body
           )}
       </>
     )
-  },
+  }
 )
 
 CSidebar.propTypes = {
@@ -241,4 +266,4 @@ CSidebar.propTypes = {
   visible: PropTypes.bool,
 }
 
-CSidebar.displayName = 'CSidebar'
+CSidebar.displayName = 'CSidebar'

package/src/components/sidebar/CSidebarNav.tsx

@@ -2,18 +2,14 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
-  ReactElement,
-  ReactNode,
+  useCallback,
+  useMemo,
   useState,
 } from '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 { CNavGroupContext, CNavGroupContextValue } from '../nav/CNavGroupContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
@@ -28,60 +24,48 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
    * A string of all className you want applied to the component.
    */
   className?: string
-}
-
-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'
-  )
-}
-
-const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child, index) => {
-    if (!isNavElement(child)) {
-      return child
-    }
-
-    const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
-
-    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, shouldUpdateId),
-      })
-    }
-
-    return React.cloneElement(child, {
-      idx: _id,
-    })
-  })
+  /**
+   * Make navigation more compact by cutting link padding in half.
+   *
+   * @since 5.11.0
+   */
+  compact?: boolean
+  /**
+   * Sets the navigation variant.
+   *
+   * @since 5.11.0
+   */
+  variant?: 'tree'
 }
 
 export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavProps> = forwardRef<
   HTMLUListElement,
   CSidebarNavProps
->(({ children, as: Component = 'ul', className, ...rest }, ref) => {
-  const [visibleGroup, setVisibleGroup] = useState('')
-  const CNavContextValues = {
-    visibleGroup,
-    setVisibleGroup,
-  }
+>(({ children, as: Component = 'ul', className, compact, variant, ...rest }, ref) => {
+  const [activeId, setActiveId] = useState<string | undefined>()
+  const openBranch = useCallback(() => {}, [])
+  const contextValue = useMemo<CNavGroupContextValue>(
+    () => ({ activeId, setActiveId, openBranch }),
+    [activeId, openBranch]
+  )
 
   return (
-    <CSidebarNavContext.Provider value={CNavContextValues}>
-      <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
-        {recursiveClone(children)}
+    <CNavGroupContext.Provider value={contextValue}>
+      <Component
+        className={classNames(
+          'sidebar-nav',
+          {
+            compact,
+            'sidebar-nav-tree': variant === 'tree',
+          },
+          className
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {children}
       </Component>
-    </CSidebarNavContext.Provider>
+    </CNavGroupContext.Provider>
   )
 })
 
@@ -89,6 +73,8 @@ CSidebarNav.propTypes = {
   as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
+  compact: PropTypes.bool,
+  variant: PropTypes.oneOf(['tree']),
 }
 
 CSidebarNav.displayName = 'CSidebarNav'

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

@@ -44,3 +44,29 @@ test('CSidebar customize hide', async () => {
   expect(container.firstChild).toHaveClass('sidebar')
   expect(container.firstChild).toHaveClass('sidebar-sticky')
 })
+
+test('CSidebar removes the exact transitionend listener reference on cleanup', async () => {
+  const addSpy = jest.spyOn(HTMLElement.prototype, 'addEventListener')
+  const removeSpy = jest.spyOn(HTMLElement.prototype, 'removeEventListener')
+
+  const { container, unmount } = render(<CSidebar>Test</CSidebar>)
+  const sidebar = container.querySelector('.sidebar')
+  unmount()
+
+  const handlersOn = (spy: jest.SpyInstance) =>
+    spy.mock.calls
+      .map((args, index) => ({ args, context: spy.mock.contexts[index] }))
+      .filter(({ args, context }) => args[0] === 'transitionend' && context === sidebar)
+      .map(({ args }) => args[1])
+
+  const added = handlersOn(addSpy)
+  const removed = handlersOn(removeSpy)
+
+  expect(added.length).toBeGreaterThan(0)
+  for (const handler of added) {
+    expect(removed).toContain(handler)
+  }
+
+  addSpy.mockRestore()
+  removeSpy.mockRestore()
+})

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

@@ -207,9 +207,10 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
 
     const firstItemOnActivePageIndex: number = _activePage ? (_activePage - 1) * _itemsPerPage : 0
 
-    const currentItems: Item[] = _activePage
-      ? sortedItems.slice(firstItemOnActivePageIndex, firstItemOnActivePageIndex + _itemsPerPage)
-      : sortedItems
+    const currentItems: Item[] =
+      _activePage && pagination
+        ? sortedItems.slice(firstItemOnActivePageIndex, firstItemOnActivePageIndex + _itemsPerPage)
+        : sortedItems
 
     useEffect(() => {
       mountedRef.current && onFilteredItemsChange && onFilteredItemsChange(sortedItems)
@@ -496,7 +497,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
           )}
         </div>
 
-        {(pagination || itemsPerPageSelect) && (
+        {pagination && (
           <div className="row">
             <div className="col">
               {((pagination && numberOfPages > 1) ||

package/src/components/smart-table/CSmartTableInterface.tsx

@@ -103,7 +103,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    */
   itemsNumber?: number
   /**
-   * Number of items per site, when pagination is enabled.
+   * Number of items per page. Only applicable when `pagination` is enabled.
    */
   itemsPerPage?: number
   /**
@@ -115,7 +115,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    */
   itemsPerPageOptions?: number[]
   /**
-   * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
+   * Adds select element over table, which is used for control items per page in pagination. Only applicable when `pagination` is enabled. If you want to customize this element, pass object with optional values:
    * - external (Boolean) - disables automatic 'itemsPerPage' change.
    */
   itemsPerPageSelect?: boolean | ItemsPerPageSelect