@coreui/react-pro 5.24.0 → 5.25.0

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/CSidebarNav.tsx

@@ -28,6 +28,18 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * 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'
 }
 
 const isNavElement = (
@@ -69,7 +81,7 @@ const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): R
 export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavProps> = forwardRef<
   HTMLUListElement,
   CSidebarNavProps
->(({ children, as: Component = 'ul', className, ...rest }, ref) => {
+>(({ children, as: Component = 'ul', className, compact, variant, ...rest }, ref) => {
   const [visibleGroup, setVisibleGroup] = useState('')
   const CNavContextValues = {
     visibleGroup,
@@ -78,7 +90,18 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
 
   return (
     <CSidebarNavContext.Provider value={CNavContextValues}>
-      <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
+      <Component
+        className={classNames(
+          'sidebar-nav',
+          {
+            compact,
+            'sidebar-nav-tree': variant === 'tree',
+          },
+          className
+        )}
+        ref={ref}
+        {...rest}
+      >
         {recursiveClone(children)}
       </Component>
     </CSidebarNavContext.Provider>
@@ -89,6 +112,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/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

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

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

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

@@ -37,6 +37,7 @@ exports[`loads and displays CSpinner component 1`] = `
           type="button"
         >
           <svg
+            aria-hidden="true"
             class="icon icon-custom-size"
             role="img"
             viewBox="0 0 512 512"
@@ -80,6 +81,7 @@ exports[`loads and displays CSpinner component 1`] = `
             <th
               class="table-primary fw-semibold"
               style="cursor: pointer; width: 20%; color: blue;"
+              tabindex="0"
             >
               <div
                 class="d-inline"
@@ -90,6 +92,7 @@ exports[`loads and displays CSpinner component 1`] = `
                 class="opacity-25 float-end me-1"
               >
                 <svg
+                  aria-hidden="true"
                   class="icon icon-custom-size"
                   role="img"
                   viewBox="0 0 512 512"
@@ -111,6 +114,7 @@ exports[`loads and displays CSpinner component 1`] = `
             </th>
             <th
               style="cursor: pointer;"
+              tabindex="0"
             >
               <div
                 class="d-inline"
@@ -121,6 +125,7 @@ exports[`loads and displays CSpinner component 1`] = `
                 class="opacity-25 float-end me-1"
               >
                 <svg
+                  aria-hidden="true"
                   class="icon icon-custom-size"
                   role="img"
                   viewBox="0 0 512 512"
@@ -151,6 +156,7 @@ exports[`loads and displays CSpinner component 1`] = `
             </th>
             <th
               style="cursor: pointer; width: 20%;"
+              tabindex="0"
             >
               <div
                 class="d-inline"
@@ -161,6 +167,7 @@ exports[`loads and displays CSpinner component 1`] = `
                 class="float-end me-1"
               >
                 <svg
+                  aria-hidden="true"
                   class="icon icon-custom-size"
                   role="img"
                   viewBox="0 0 512 512"
@@ -247,9 +254,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -276,9 +280,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -305,9 +306,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -334,9 +332,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Banned
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
           <tr
             tabindex="0"
@@ -363,9 +358,6 @@ exports[`loads and displays CSpinner component 1`] = `
                 Don't panic!
               </span>
             </td>
-            <td>
-              undefined
-            </td>
           </tr>
         </tbody>
         <tfoot>

package/src/components/stepper/__tests__/CStepper.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CStepper } from '../index'
 
@@ -24,8 +24,8 @@ test('CStepper disables future steps in linear mode', async () => {
 
   const buttons = screen.getAllByRole('tab')
   expect(buttons[0]).toBeEnabled()
-  expect(buttons[1]).toBeDisabled()
-  expect(buttons[2]).toBeDisabled()
+  expect(buttons[1]).toBeEnabled() // next step is enabled
+  expect(buttons[2]).toBeDisabled() // steps beyond next are disabled
 })
 
 test('CStepper allows all steps in non-linear mode', async () => {
@@ -47,26 +47,27 @@ test('CStepper calls onStepChange when step is clicked', async () => {
   expect(handleStepChange).toHaveBeenCalledWith(3) // stepNumber = index + 1
 })
 
-test('CStepper renders only active step content in horizontal layout', async () => {
-  render(<CStepper steps={stepsMock} layout="horizontal" />)
+test('CStepper renders active step content in horizontal layout', async () => {
+  const { container } = render(<CStepper steps={stepsMock} layout="horizontal" />)
 
   expect(screen.getByText('Content 1')).toBeVisible()
-  expect(screen.queryByText('Content 2')).not.toBeInTheDocument()
-  expect(screen.queryByText('Content 3')).not.toBeInTheDocument()
+  const panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[0]).toHaveClass('active')
+  expect(panels[1]).not.toHaveClass('active')
+  expect(panels[2]).not.toHaveClass('active')
 })
 
-test('CStepper finish calls onFinish only after last step and valid', async () => {
-  const handleFinish = jest.fn()
-  render(<CStepper steps={stepsMock} onFinish={handleFinish} linear={false} />)
+test('CStepper calls onStepChange when navigating to last step', async () => {
+  const handleStepChange = jest.fn()
+  render(<CStepper steps={stepsMock} onStepChange={handleStepChange} linear={false} />)
 
   const buttons = screen.getAllByRole('tab')
   fireEvent.click(buttons[2])
 
-  fireEvent.click(screen.getByText('Step 3'))
-  expect(handleFinish).toHaveBeenCalledTimes(1)
+  expect(handleStepChange).toHaveBeenCalledWith(3)
 })
 
-test('CStepper resets correctly and focuses first step', async () => {
+test('CStepper resets correctly', async () => {
   const handleReset = jest.fn()
   const stepperRef = React.createRef<any>()
 
@@ -76,23 +77,25 @@ test('CStepper resets correctly and focuses first step', async () => {
   stepperRef.current?.reset()
 
   expect(handleReset).toHaveBeenCalled()
-  expect(screen.getAllByRole('tab')[0]).toHaveFocus()
 })
 
 test('CStepper works in uncontrolled mode with defaultActiveStepIndex', async () => {
-  render(<CStepper steps={stepsMock} defaultActiveStepIndex={1} />)
+  const { container } = render(<CStepper steps={stepsMock} defaultActiveStepIndex={1} />)
 
-  expect(screen.getByText('Content 2')).toBeVisible()
-  expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+  const panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[1]).toHaveClass('active')
+  expect(panels[0]).not.toHaveClass('active')
 })
 
 test('CStepper works in controlled mode with activeStepIndex', async () => {
-  const { rerender } = render(<CStepper steps={stepsMock} activeStepIndex={0} />)
+  const { container, rerender } = render(<CStepper steps={stepsMock} activeStepIndex={0} />)
 
-  expect(screen.getByText('Content 1')).toBeVisible()
+  let panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[0]).toHaveClass('active')
 
   rerender(<CStepper steps={stepsMock} activeStepIndex={2} />)
 
-  expect(screen.getByText('Content 3')).toBeVisible()
-  expect(screen.queryByText('Content 1')).not.toBeInTheDocument()
+  panels = container.querySelectorAll('[role="tabpanel"]')
+  expect(panels[2]).toHaveClass('active')
+  expect(panels[0]).not.toHaveClass('active')
 })