@coreui/react-pro 5.25.0 → 5.26.0

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'
 
@@ -42,54 +38,19 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
   variant?: 'tree'
 }
 
-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,
-    })
-  })
-}
-
 export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavProps> = forwardRef<
   HTMLUListElement,
   CSidebarNavProps
 >(({ children, as: Component = 'ul', className, compact, variant, ...rest }, ref) => {
-  const [visibleGroup, setVisibleGroup] = useState('')
-  const CNavContextValues = {
-    visibleGroup,
-    setVisibleGroup,
-  }
+  const [activeId, setActiveId] = useState<string | undefined>()
+  const openBranch = useCallback(() => {}, [])
+  const contextValue = useMemo<CNavGroupContextValue>(
+    () => ({ activeId, setActiveId, openBranch }),
+    [activeId, openBranch]
+  )
 
   return (
-    <CSidebarNavContext.Provider value={CNavContextValues}>
+    <CNavGroupContext.Provider value={contextValue}>
       <Component
         className={classNames(
           'sidebar-nav',
@@ -102,9 +63,9 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
         ref={ref}
         {...rest}
       >
-        {recursiveClone(children)}
+        {children}
       </Component>
-    </CSidebarNavContext.Provider>
+    </CNavGroupContext.Provider>
   )
 })
 

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/table/CTableDataCell.tsx

@@ -6,7 +6,8 @@ import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
 export interface CTableDataCellProps
-  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
+  extends
+    Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
     Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
   /**
    * Highlight a table row or cell.

package/src/components/table/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react'
+
 import { CTableDataCellProps } from '../table/CTableDataCell'
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell'
 import { CTableRowProps } from '../table/CTableRow'
@@ -5,7 +7,7 @@ import { CTableRowProps } from '../table/CTableRow'
 export type Column = {
   label?: string
   key: string
-  _style?: any
+  _style?: CSSProperties
   _props?: CTableHeaderCellProps
 }
 

package/src/components/table/utils.ts

@@ -2,16 +2,16 @@ import type { Column, Item } from './types'
 
 export const pretifyName = (name: string) => {
   return name
-    .replace(/[-_.]/g, ' ')
-    .replace(/ +/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replaceAll(/[-_.]/g, ' ')
+    .replaceAll(/ +/g, ' ')
+    .replaceAll(/([a-z0-9])([A-Z])/g, '$1 $2')
     .split(' ')
     .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ')
 }
 
 export const getColumnLabel = (column: Column | string) =>
-  typeof column === 'object' ? column.label ?? pretifyName(column.key) : pretifyName(column)
+  typeof column === 'object' ? (column.label ?? pretifyName(column.key)) : pretifyName(column)
 
 export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
   columns

package/src/components/tabs/CTabPanel.tsx

@@ -44,7 +44,9 @@ export const CTabPanel = forwardRef<HTMLDivElement, CTabPanelProps>(
     const [_visible, setVisible] = useState(visible || _activeItemKey === itemKey)
 
     useEffect(() => {
-      visible !== undefined && setVisible(visible)
+      if (visible !== undefined) {
+        setVisible(visible)
+      }
     }, [visible])
 
     useEffect(() => {

package/src/components/tabs/CTabsContext.ts

@@ -6,4 +6,4 @@ export interface CTabsContextProps {
   id?: string
 }
 
-export const CTabsContext = createContext({} as CTabsContextProps)
+export const CTabsContext = createContext({} as CTabsContextProps)

package/src/components/tooltip/CTooltip.tsx

@@ -173,6 +173,14 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     const { initPopper, destroyPopper, updatePopper } = 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: [
@@ -189,12 +197,23 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     }
 
     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)
@@ -211,7 +230,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     useEffect(() => {
       if (mounted && togglerRef.current && tooltipRef.current) {
         initPopper(togglerRef.current, tooltipRef.current, computedPopperConfig)
-        setTimeout(() => {
+        timer.current = setTimeout(() => {
           setVisible(true)
         }, _delay.show)
 
@@ -223,6 +242,13 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       }
     }, [mounted])
 
+    useEffect(() => {
+      return () => {
+        clearTimer()
+        destroyPopper()
+      }
+    }, [])
+
     useEffect(() => {
       if (!_visible && togglerRef.current && tooltipRef.current) {
         executeAfterTransition(() => {
@@ -235,23 +261,47 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       updatePopper()
     }, [content])
 
+    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/tooltip/__tests__/CTooltip.spec.tsx

@@ -13,7 +13,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  container && container.remove()
+  container?.remove()
   container = null
 })
 
@@ -47,6 +47,101 @@ test('CTooltip customize', async () => {
   jest.useRealTimers()
 })
 
+test('CTooltip stays visible when re-hovered during the hide delay', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CTooltip trigger="hover" delay={{ show: 0, hide: 300 }} content="content">
+      <CLink>Test</CLink>
+    </CTooltip>
+  )
+
+  const link = screen.getByText('Test')
+
+  act(() => {
+    fireEvent.mouseOver(link)
+  })
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
+  expect(document.querySelector('.tooltip')).toHaveClass('show')
+
+  act(() => {
+    fireEvent.mouseOut(link)
+    jest.advanceTimersByTime(100)
+  })
+
+  act(() => {
+    fireEvent.mouseOver(link)
+    jest.advanceTimersByTime(1000)
+  })
+
+  expect(document.querySelector('.tooltip')).toHaveClass('show')
+
+  jest.useRealTimers()
+})
+
+test('CTooltip cancels the pending show timer when pointer leaves before the show delay', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CTooltip trigger="hover" delay={{ show: 300, hide: 0 }} content="content">
+      <CLink>Test</CLink>
+    </CTooltip>
+  )
+
+  const link = screen.getByText('Test')
+
+  act(() => {
+    fireEvent.mouseOver(link)
+    jest.advanceTimersByTime(100)
+  })
+
+  act(() => {
+    fireEvent.mouseOut(link)
+    jest.advanceTimersByTime(1000)
+  })
+
+  expect(document.querySelector('.tooltip.show')).toBeNull()
+  expect(link).not.toHaveAttribute('aria-describedby')
+
+  jest.useRealTimers()
+})
+
+test('CTooltip preserves event handlers of the child element', async () => {
+  jest.useFakeTimers()
+
+  const onClick = jest.fn()
+  const onMouseEnter = jest.fn()
+
+  render(
+    <CTooltip trigger={['hover', 'click']} content="content">
+      <CButton onClick={onClick} onMouseEnter={onMouseEnter}>
+        Test
+      </CButton>
+    </CTooltip>
+  )
+
+  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('CTooltip onShow and onHide', async () => {
   jest.useFakeTimers()
 

package/src/helpers/polymorphicComponent.ts

@@ -8,7 +8,7 @@ export interface AsProp<As extends ElementType = ElementType> {
   as?: As
 }
 
-export interface Props<As extends ElementType = ElementType> extends AsProp<As> {}
+export type Props<As extends ElementType = ElementType> = AsProp<As>
 
 export interface PolymorphicRefForwardingComponent<TInitial extends ElementType, P = unknown> {
   <As extends ElementType = TInitial>(

package/src/hooks/useColorModes.ts

@@ -37,10 +37,10 @@ const setTheme = (colorMode: string) => {
 }
 
 export const useColorModes = (
-  localStorageItemName = 'coreui-react-color-scheme',
+  localStorageItemName = 'coreui-react-color-scheme'
 ): UseColorModesOutput => {
   const [colorMode, setColorMode] = useState<string | undefined>(
-    getPreferredColorScheme(localStorageItemName),
+    getPreferredColorScheme(localStorageItemName)
   )
 
   useEffect(() => {

package/src/hooks/useForkedRef.ts

@@ -13,24 +13,30 @@ export type AssignableRef<ValueType> =
 export function useForkedRef<RefValueType = any>(
   ...refs: (AssignableRef<RefValueType> | null | undefined)[]
 ) {
-  return useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (node: any) => {
-      refs.forEach((ref) => {
-        assignRef(ref, node)
-      })
-    }
-  }, refs)
+  return useMemo(
+    () => {
+      if (refs.every((ref) => ref == null)) {
+        return null
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (node: any) => {
+        refs.forEach((ref) => {
+          assignRef(ref, node)
+        })
+      }
+    },
+    // useForkedRef accepts a variable number of refs, so the dependency list
+    // cannot be a static array literal; the refs are compared element-wise.
+    // eslint-disable-next-line react-hooks/use-memo, react-hooks/exhaustive-deps
+    refs
+  )
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function assignRef<RefValueType = any>(
   ref: AssignableRef<RefValueType> | null | undefined,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any,
+  value: any
 ) {
   if (ref == null) return
   if (isFunction(ref)) {
@@ -44,7 +50,6 @@ export function assignRef<RefValueType = any>(
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-export function isFunction(value: any): value is Function {
-  return !!(value && {}.toString.call(value) == '[object Function]')
+export function isFunction(value: unknown): value is (...args: unknown[]) => unknown {
+  return typeof value === 'function'
 }

package/src/hooks/usePopper.ts

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { createPopper } from '@popperjs/core'
 import type { Instance, Options } from '@popperjs/core'
 
@@ -13,12 +13,16 @@ export const usePopper = (): UsePopperOutput => {
   const _popper = useRef<Instance>(undefined)
   const el = useRef<HTMLElement>(null)
 
-  const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
-    _popper.current = createPopper(reference, popper, options)
-    el.current = popper
-  }
+  const initPopper = useCallback(
+    (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
+      _popper.current?.destroy()
+      _popper.current = createPopper(reference, popper, options)
+      el.current = popper
+    },
+    []
+  )
 
-  const destroyPopper = () => {
+  const destroyPopper = useCallback(() => {
     const popperInstance = _popper.current
 
     if (popperInstance && el.current) {
@@ -26,9 +30,9 @@ export const usePopper = (): UsePopperOutput => {
     }
 
     _popper.current = undefined
-  }
+  }, [])
 
-  const updatePopper = (options?: Partial<Options>) => {
+  const updatePopper = useCallback((options?: Partial<Options>) => {
     const popperInstance = _popper.current
 
     if (popperInstance && options) {
@@ -38,7 +42,7 @@ export const usePopper = (): UsePopperOutput => {
     if (popperInstance) {
       popperInstance.update()
     }
-  }
+  }, [])
 
   return {
     popper: _popper.current,

package/src/utils/__tests__/swipe.spec.ts

@@ -0,0 +1,82 @@
+import Swipe from '../swipe'
+
+const touchEvent = (type: string, clientX: number): Event => {
+  const event = new Event(type) as Event & { touches: { clientX: number }[] }
+  event.touches = [{ clientX }]
+  return event
+}
+
+describe('Swipe', () => {
+  let element: HTMLElement
+  const originalPointerEvent = window.PointerEvent
+
+  beforeEach(() => {
+    element = document.createElement('div')
+    document.body.appendChild(element)
+    // Force the touch-event path and make the helper consider touch supported.
+    ;(window as unknown as { PointerEvent?: unknown }).PointerEvent = undefined
+    Object.defineProperty(navigator, 'maxTouchPoints', { value: 1, configurable: true })
+  })
+
+  afterEach(() => {
+    element.remove()
+    ;(window as unknown as { PointerEvent?: unknown }).PointerEvent = originalPointerEvent
+  })
+
+  it('reports support when touch points are available', () => {
+    expect(Swipe.isSupported()).toBe(true)
+  })
+
+  it('calls onLeft when swiping left past the threshold', () => {
+    const onLeft = jest.fn()
+    const onRight = jest.fn()
+    const onEnd = jest.fn()
+    new Swipe(element, { onLeft, onRight, onEnd })
+
+    element.dispatchEvent(touchEvent('touchstart', 200))
+    element.dispatchEvent(touchEvent('touchmove', 100))
+    element.dispatchEvent(touchEvent('touchend', 100))
+
+    expect(onLeft).toHaveBeenCalledTimes(1)
+    expect(onRight).not.toHaveBeenCalled()
+    expect(onEnd).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onRight when swiping right past the threshold', () => {
+    const onLeft = jest.fn()
+    const onRight = jest.fn()
+    new Swipe(element, { onLeft, onRight })
+
+    element.dispatchEvent(touchEvent('touchstart', 100))
+    element.dispatchEvent(touchEvent('touchmove', 200))
+    element.dispatchEvent(touchEvent('touchend', 200))
+
+    expect(onRight).toHaveBeenCalledTimes(1)
+    expect(onLeft).not.toHaveBeenCalled()
+  })
+
+  it('ignores swipes below the threshold', () => {
+    const onLeft = jest.fn()
+    const onRight = jest.fn()
+    new Swipe(element, { onLeft, onRight })
+
+    element.dispatchEvent(touchEvent('touchstart', 200))
+    element.dispatchEvent(touchEvent('touchmove', 180))
+    element.dispatchEvent(touchEvent('touchend', 180))
+
+    expect(onLeft).not.toHaveBeenCalled()
+    expect(onRight).not.toHaveBeenCalled()
+  })
+
+  it('stops detecting swipes after dispose', () => {
+    const onLeft = jest.fn()
+    const swipe = new Swipe(element, { onLeft })
+    swipe.dispose()
+
+    element.dispatchEvent(touchEvent('touchstart', 200))
+    element.dispatchEvent(touchEvent('touchmove', 100))
+    element.dispatchEvent(touchEvent('touchend', 100))
+
+    expect(onLeft).not.toHaveBeenCalled()
+  })
+})

package/src/utils/executeAfterTransition.ts

@@ -25,7 +25,7 @@ const executeAfterTransition = (
 
   let called = false
 
-  const handler = ({ target }: { target: any }) => {
+  const handler = ({ target }: Event) => {
     if (target !== transitionElement) {
       return
     }

package/src/utils/index.ts

@@ -8,6 +8,7 @@ import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
 import mergeClassNames from './mergeClassNames'
+import Swipe from './swipe'
 
 export {
   executeAfterTransition,
@@ -20,4 +21,5 @@ export {
   isObjectInArray,
   isRTL,
   mergeClassNames,
+  Swipe,
 }

package/src/utils/mergeClassNames.ts

@@ -9,7 +9,7 @@ const mergeClassNames = <T extends object>(
   const classNames: T = { ...defaultClassNames }
 
   for (const key in customClassNames) {
-    if (customClassNames.hasOwnProperty(key)) {
+    if (Object.hasOwn(customClassNames, key)) {
       const typedKey = key as keyof T
       const customClassName = customClassNames[typedKey]?.toString()