@coreui/react-pro 5.24.1 → 5.26.0

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: [
@@ -188,19 +196,41 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
     }
 
+    const handleShow = () => {
+      clearTimer()
+
+      if (mounted) {
+        timer.current = setTimeout(() => {
+          setVisible(true)
+        }, _delay.show)
+      } else {
+        setMounted(true)
+      }
+
+      onShow?.()
+    }
+
+    const handleHide = () => {
+      clearTimer()
+
+      timer.current = setTimeout(() => {
+        setVisible(false)
+        onHide?.()
+      }, _delay.hide)
+    }
+
     useEffect(() => {
-      if (visible) {
+      if (visible === true) {
         handleShow()
-        return
+      } else if (visible === false) {
+        handleHide()
       }
-
-      handleHide()
     }, [visible])
 
     useEffect(() => {
       if (mounted && togglerRef.current && tooltipRef.current) {
         initPopper(togglerRef.current, tooltipRef.current, computedPopperConfig)
-        setTimeout(() => {
+        timer.current = setTimeout(() => {
           setVisible(true)
         }, _delay.show)
 
@@ -212,6 +242,13 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       }
     }, [mounted])
 
+    useEffect(() => {
+      return () => {
+        clearTimer()
+        destroyPopper()
+      }
+    }, [])
+
     useEffect(() => {
       if (!_visible && togglerRef.current && tooltipRef.current) {
         executeAfterTransition(() => {
@@ -220,43 +257,51 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       }
     }, [_visible])
 
-    const handleShow = () => {
-      setMounted(true)
-      if (onShow) {
-        onShow()
-      }
-    }
-
-    const handleHide = () => {
-      setTimeout(() => {
-        setVisible(false)
-        if (onHide) {
-          onHide()
-        }
-      }, _delay.hide)
-    }
-
     useEffect(() => {
       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()
 
@@ -66,6 +161,9 @@ test('CTooltip onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 
@@ -74,6 +172,9 @@ test('CTooltip onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 

package/src/components/virtual-scroller/CVirtualScroller.tsx

@@ -31,15 +31,15 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
     const [itemsNumber, setItemsNumber] = useState(React.Children.count(children))
     const [viewportPadding, setViewportPadding] = useState(0)
     const [viewportHeight, setViewportHeight] = useState(
-      visibleItems * itemHeight + 2 * viewportPadding,
+      visibleItems * itemHeight + 2 * viewportPadding
     )
     const [maxHeight, setMaxHeight] = useState(itemsNumber * itemHeight + 2 * viewportPadding)
 
     useEffect(() => {
-      virtualScrollRef.current && virtualScrollRef.current.scrollTop
-
-      virtualScrollRef.current &&
+      if (virtualScrollRef.current) {
+        void virtualScrollRef.current.scrollTop // force reflow
         setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop))
+      }
     })
 
     useEffect(() => {
@@ -52,7 +52,7 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
 
     useEffect(() => {
       setMaxHeight(itemsNumber * itemHeight)
-      virtualScrollRef.current && virtualScrollRef.current.scrollTop
+      void virtualScrollRef.current?.scrollTop // force reflow
     }, [itemHeight, itemsNumber])
 
     useEffect(() => {
@@ -60,17 +60,15 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
     }, [visibleItems])
 
     const handleScroll = (scrollTop: number) => {
-      const _currentItemIndex = itemHeight && Math.max(Math.ceil(scrollTop / itemHeight), 1)
+      const _currentItemIndex = itemHeight ? Math.max(Math.ceil(scrollTop / itemHeight), 1) : 0
       setCurrentItemIndex(_currentItemIndex)
-      onScroll && onScroll(_currentItemIndex)
+      onScroll?.(_currentItemIndex)
     }
 
     return (
       <div
         className={classNames('virtual-scroller', className)}
-        onScroll={(event: UIEvent<HTMLDivElement>) =>
-          handleScroll((event.target as HTMLDivElement).scrollTop)
-        }
+        onScroll={(event: UIEvent<HTMLDivElement>) => handleScroll(event.currentTarget.scrollTop)}
         style={{
           height: viewportHeight,
           overflowY: 'auto',
@@ -91,8 +89,9 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
               index + 1 > Math.max(currentItemIndex - buffer, 0) &&
               index + 1 <= currentItemIndex + visibleItems + buffer
             ) {
-              return React.cloneElement(child as React.ReactElement<any>, {
-                className: classNames(child.props.className, {
+              const childElement = child as React.ReactElement<Record<string, unknown>>
+              return React.cloneElement(childElement, {
+                className: classNames(childElement.props.className as string, {
                   'virtual-scroller-item-preload':
                     index + 1 > currentItemIndex + visibleItems || index + 1 < currentItemIndex,
                 }),
@@ -108,7 +107,7 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
                   setItemHeight(
                     node.offsetHeight +
                       Number.parseFloat(getComputedStyle(node).marginTop) +
-                      Number.parseFloat(getComputedStyle(node).marginBottom),
+                      Number.parseFloat(getComputedStyle(node).marginBottom)
                   ),
               })
             }
@@ -117,7 +116,7 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
         </div>
       </div>
     )
-  },
+  }
 )
 
 CVirtualScroller.propTypes = {

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/useDebouncedCallback.ts

@@ -1,10 +1,13 @@
 import { useRef, useCallback } from 'react'
 
-export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
-  const timeout = useRef<ReturnType<typeof setTimeout>>()
+export const useDebouncedCallback = <A extends unknown[]>(
+  callback: (...args: A) => void,
+  delay: number
+) => {
+  const timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
 
   return useCallback(
-    (...args: any[]) => {
+    (...args: A) => {
       const handler = () => {
         clearTimeout(timeout.current)
         callback(...args)
@@ -13,6 +16,6 @@ export const useDebouncedCallback = <F extends Function>(callback: F, delay: num
       clearTimeout(timeout.current)
       timeout.current = setTimeout(handler, delay)
     },
-    [callback, delay],
+    [callback, delay]
   )
 }

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()