@coreui/react-pro 5.24.1 → 5.25.0

package/src/components/tooltip/CTooltip.tsx

@@ -188,13 +188,24 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
     }
 
+    const handleShow = () => {
+      setMounted(true)
+      onShow?.()
+    }
+
+    const handleHide = () => {
+      setTimeout(() => {
+        setVisible(false)
+        onHide?.()
+      }, _delay.hide)
+    }
+
     useEffect(() => {
-      if (visible) {
+      if (visible === true) {
         handleShow()
-        return
+      } else if (visible === false) {
+        handleHide()
       }
-
-      handleHide()
     }, [visible])
 
     useEffect(() => {
@@ -220,22 +231,6 @@ 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])

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -66,6 +66,9 @@ test('CTooltip onShow and onHide', async () => {
 
   act(() => {
     fireEvent.click(btn)
+  })
+
+  act(() => {
     jest.runAllTimers()
   })
 
@@ -74,6 +77,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/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/dist/cjs/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/accordion/CAccordionCollapse.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { CCollapseProps } from '../collapse/CCollapse';
-export declare const CAccordionCollapse: React.ForwardRefExoticComponent<Omit<CCollapseProps, "horizontal"> & React.RefAttributes<HTMLDivElement>>;

package/src/components/accordion/CAccordionCollapse.tsx

@@ -1,20 +0,0 @@
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-
-import { CCollapse, CCollapseProps } from '../collapse/CCollapse'
-
-export const CAccordionCollapse = forwardRef<HTMLDivElement, Omit<CCollapseProps, 'horizontal'>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <CCollapse className="accordion-collapse" {...props} ref={ref}>
-        {children}
-      </CCollapse>
-    )
-  },
-)
-
-CAccordionCollapse.propTypes = {
-  children: PropTypes.node,
-}
-
-CAccordionCollapse.displayName = 'CAccordionCollapse'

package/src/components/accordion/__tests__/CAccordionCollapse.spec.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import { CAccordionCollapse } from '../index'
-
-test('loads and displays CAccordionCollapse component', async () => {
-  const { container } = render(<CAccordionCollapse>Test</CAccordionCollapse>)
-  expect(container.firstChild).toHaveClass('accordion-collapse')
-  expect(container).toMatchSnapshot()
-})

package/src/components/accordion/__tests__/__snapshots__/CAccordionCollapse.spec.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CAccordionCollapse component 1`] = `
-<div>
-  <div
-    class="accordion-collapse collapse"
-  >
-    Test
-  </div>
-</div>
-`;

package/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close btn-close-white bazinga"
-    disabled=""
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;