@coreui/react-pro 5.25.0 → 5.26.0

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

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CNavGroup } from '../index'
-import { CSidebarNavContext } from '../../sidebar/CSidebarNavContext'
+import { CNavGroup, CNavItem } from '../index'
+import { CSidebarNav } from '../../sidebar/CSidebarNav'
 
 test('loads and displays CNavGroup component', async () => {
   const { container } = render(<CNavGroup toggler="anchorText" />)
@@ -11,43 +11,218 @@ test('loads and displays CNavGroup component', async () => {
 
 test('CNavGroup customize', async () => {
   const { container } = render(
-    <CNavGroup className="bazinga" toggler="anchorText" visible={true} idx="1" />
+    <CNavGroup className="bazinga" toggler="anchorText" visible={true} />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('nav-group')
   expect(container.firstChild).toHaveClass('bazinga')
   const arr = container.getElementsByClassName('nav-link')
   if (arr.length > 0) {
-    //expect(arr[0].innerText).toHaveTextContent('anchorText')
     expect(arr[0].innerHTML).toBe('anchorText')
   } else {
     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>
+test('CNavGroup toggles its own visibility when uncontrolled', async () => {
+  const { container } = render(
+    <CSidebarNav>
+      <CNavGroup toggler="anchorText">
+        <CNavItem href="#">Item</CNavItem>
+      </CNavGroup>
+    </CSidebarNav>
   )
 
-  expect(screen.getByRole('listitem')).toHaveClass('show')
+  const group = container.querySelector('.nav-group') as HTMLElement
+  expect(group).not.toHaveClass('show')
+
+  fireEvent.click(container.querySelector('.nav-group-toggle') as HTMLElement)
+  expect(group).toHaveClass('show')
+
+  fireEvent.click(container.querySelector('.nav-group-toggle') as HTMLElement)
+  expect(group).not.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>
+test('CNavGroup follows the visible prop in controlled mode', async () => {
+  const { container, rerender } = render(<CNavGroup toggler="anchorText" visible={true} />)
+  expect(container.querySelector('.nav-group')).toHaveClass('show')
+
+  rerender(<CNavGroup toggler="anchorText" visible={false} />)
+  expect(container.querySelector('.nav-group')).not.toHaveClass('show')
+})
+
+test('CNavGroup stays open when the parent rejects the collapse (controlled)', async () => {
+  const onVisibleChange = jest.fn()
+  const { container } = render(
+    <CNavGroup toggler="anchorText" visible={true} onVisibleChange={onVisibleChange} />
   )
 
-  expect(screen.getByText('expanded')).toBeInTheDocument()
+  expect(container.querySelector('.nav-group')).toHaveClass('show')
 
-  fireEvent.click(screen.getByRole('link'))
+  // Parent keeps `visible` at `true` (rejects the collapse).
+  fireEvent.click(container.querySelector('.nav-group-toggle') as HTMLElement)
+
+  expect(onVisibleChange).toHaveBeenCalledWith(false)
+  expect(container.querySelector('.nav-group')).toHaveClass('show')
+})
+
+test('CNavGroup toggler render function receives visible state', async () => {
+  render(<CNavGroup toggler={({ visible }) => <span>{visible ? 'expanded' : 'collapsed'}</span>} />)
 
   expect(screen.getByText('collapsed')).toBeInTheDocument()
+
+  fireEvent.click(screen.getByRole('link'))
+
+  expect(screen.getByText('expanded')).toBeInTheDocument()
+})
+
+test('an active nav link opens its parent group', async () => {
+  const { container } = render(
+    <CSidebarNav>
+      <CNavGroup toggler="anchorText">
+        <CNavItem href="#" active>
+          Item
+        </CNavItem>
+      </CNavGroup>
+    </CSidebarNav>
+  )
+
+  expect(container.querySelector('.nav-group')).toHaveClass('show')
+})
+
+test('opening another group closes a controlled group when the parent accepts', async () => {
+  const Wrapper = () => {
+    const [visible, setVisible] = React.useState(true)
+    return (
+      <CSidebarNav>
+        <CNavGroup toggler="Controlled" visible={visible} onVisibleChange={setVisible}>
+          <CNavItem href="#">A</CNavItem>
+        </CNavGroup>
+        <CNavGroup toggler="Other">
+          <CNavItem href="#">B</CNavItem>
+        </CNavGroup>
+      </CSidebarNav>
+    )
+  }
+
+  const { container } = render(<Wrapper />)
+  const [controlled, other] = Array.from(container.querySelectorAll('.nav-group'))
+  expect(controlled).toHaveClass('show')
+
+  fireEvent.click(container.querySelectorAll('.nav-group-toggle')[1] as HTMLElement)
+
+  expect(other).toHaveClass('show')
+  expect(controlled).not.toHaveClass('show')
+})
+
+test('a locked controlled group stays open when another group opens', async () => {
+  const Wrapper = () => {
+    const [visible, setVisible] = React.useState(true)
+    const onVisibleChange = (value: boolean) => {
+      if (value) {
+        setVisible(true)
+      }
+    }
+    return (
+      <CSidebarNav>
+        <CNavGroup toggler="Locked" visible={visible} onVisibleChange={onVisibleChange}>
+          <CNavItem href="#">A</CNavItem>
+        </CNavGroup>
+        <CNavGroup toggler="Other">
+          <CNavItem href="#">B</CNavItem>
+        </CNavGroup>
+      </CSidebarNav>
+    )
+  }
+
+  const { container } = render(<Wrapper />)
+  const [locked, other] = Array.from(container.querySelectorAll('.nav-group'))
+  expect(locked).toHaveClass('show')
+
+  fireEvent.click(container.querySelectorAll('.nav-group-toggle')[1] as HTMLElement)
+
+  expect(other).toHaveClass('show')
+  expect(locked).toHaveClass('show')
+})
+
+test('opening an uncontrolled group collapses its sibling', async () => {
+  const { container } = render(
+    <CSidebarNav>
+      <CNavGroup toggler="A">
+        <CNavItem href="#">Item</CNavItem>
+      </CNavGroup>
+      <CNavGroup toggler="B">
+        <CNavItem href="#">Item</CNavItem>
+      </CNavGroup>
+    </CSidebarNav>
+  )
+
+  const [groupA, groupB] = Array.from(container.querySelectorAll('.nav-group'))
+  const [togglerA, togglerB] = Array.from(container.querySelectorAll('.nav-group-toggle'))
+
+  fireEvent.click(togglerA as HTMLElement)
+  expect(groupA).toHaveClass('show')
+  expect(groupB).not.toHaveClass('show')
+
+  fireEvent.click(togglerB as HTMLElement)
+  expect(groupA).not.toHaveClass('show')
+  expect(groupB).toHaveClass('show')
+})
+
+test('reopening a parent restores the open state of its nested subgroups', async () => {
+  const { container } = render(
+    <CSidebarNav>
+      <CNavGroup toggler="A" visible>
+        <CNavGroup toggler="B" visible>
+          <CNavGroup toggler="C" visible>
+            <CNavItem href="#">Item</CNavItem>
+          </CNavGroup>
+        </CNavGroup>
+      </CNavGroup>
+    </CSidebarNav>
+  )
+
+  const [groupA, groupB, groupC] = Array.from(container.querySelectorAll('.nav-group'))
+  expect(groupA).toHaveClass('show')
+  expect(groupB).toHaveClass('show')
+  expect(groupC).toHaveClass('show')
+
+  const outerToggler = container.querySelectorAll('.nav-group-toggle')[0] as HTMLElement
+
+  // Collapse the parent: the whole branch is hidden.
+  fireEvent.click(outerToggler)
+  expect(groupA).not.toHaveClass('show')
+
+  // Reopen the parent: nested subgroups come back open (matches vanilla/Vue).
+  fireEvent.click(outerToggler)
+  expect(groupA).toHaveClass('show')
+  expect(groupB).toHaveClass('show')
+  expect(groupC).toHaveClass('show')
+})
+
+test('nested default-open groups render open and stay independently toggleable', async () => {
+  const { container } = render(
+    <CSidebarNav>
+      <CNavGroup toggler="Group A" visible>
+        <CNavGroup toggler="Group B" visible>
+          <CNavItem href="#">Item</CNavItem>
+        </CNavGroup>
+      </CNavGroup>
+    </CSidebarNav>
+  )
+
+  const [groupA, groupB] = Array.from(container.querySelectorAll('.nav-group'))
+  expect(groupA).toHaveClass('show')
+  expect(groupB).toHaveClass('show')
+
+  // Collapsing the inner group keeps the outer one open.
+  const innerToggler = container.querySelectorAll('.nav-group-toggle')[1] as HTMLElement
+  fireEvent.click(innerToggler)
+  expect(groupA).toHaveClass('show')
+  expect(groupB).not.toHaveClass('show')
+
+  // Collapsing the outer group closes the whole branch.
+  const outerToggler = container.querySelectorAll('.nav-group-toggle')[0] as HTMLElement
+  fireEvent.click(outerToggler)
+  expect(groupA).not.toHaveClass('show')
 })

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

@@ -6,6 +6,7 @@ exports[`CNavGroup customize 1`] = `
     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/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: [
@@ -198,12 +206,23 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     }
 
     const handleShow = () => {
-      setMounted(true)
+      clearTimer()
+
+      if (mounted) {
+        timer.current = setTimeout(() => {
+          setVisible(true)
+        }, _delay.show)
+      } else {
+        setMounted(true)
+      }
+
       onShow?.()
     }
 
     const handleHide = () => {
-      setTimeout(() => {
+      clearTimer()
+
+      timer.current = setTimeout(() => {
         setVisible(false)
         onHide?.()
       }, _delay.hide)
@@ -220,7 +239,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     useEffect(() => {
       if (mounted && togglerRef.current && popoverRef.current) {
         initPopper(togglerRef.current, popoverRef.current, computedPopperConfig)
-        setTimeout(() => {
+        timer.current = setTimeout(() => {
           setVisible(true)
         }, _delay.show)
 
@@ -232,6 +251,13 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       }
     }, [mounted])
 
+    useEffect(() => {
+      return () => {
+        clearTimer()
+        destroyPopper()
+      }
+    }, [])
+
     useEffect(() => {
       if (!_visible && togglerRef.current && popoverRef.current) {
         executeAfterTransition(() => {
@@ -240,23 +266,47 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       }
     }, [_visible])
 
+    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">
@@ -61,7 +129,14 @@ test('CPopover onShow and onHide', async () => {
   const onHide = jest.fn()
 
   render(
-    <CPopover content="content" title="title" trigger="click" placement="right" onShow={onShow} onHide={onHide}>
+    <CPopover
+      content="content"
+      title="title"
+      trigger="click"
+      placement="right"
+      onShow={onShow}
+      onHide={onHide}
+    >
       <CButton color="primary">Test</CButton>
     </CPopover>,
     { container: container! }

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/__tests__/CSearchButton.spec.tsx

@@ -26,7 +26,7 @@ test('loads and displays CSearchButton component', async () => {
 
 test('CSearchButton customize', async () => {
   const { container } = render(
-    <CSearchButton className="bazinga" placeholder="Command palette" shortcut="meta+k,ctrl+k" />,
+    <CSearchButton className="bazinga" placeholder="Command palette" shortcut="meta+k,ctrl+k" />
   )
 
   expect(container).toMatchSnapshot()
@@ -56,7 +56,7 @@ test('CSearchButton ignores plain typing in editable fields', async () => {
     <>
       <input aria-label="Search input" />
       <CSearchButton onClick={onClick} shortcut="k" />
-    </>,
+    </>
   )
 
   fireEvent.keyDown(screen.getByLabelText('Search input'), { key: 'k' })

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'