@coreui/react-pro 5.7.0 → 5.8.0

package/src/components/multi-select/utils.ts

@@ -1,4 +1,4 @@
-import type { Option, OptionsGroup, SelectedOption } from './types'
+import type { Option, OptionsGroup, Search, SelectedOption } from './types'
 
 export const createOption = (label: string, options: (Option | OptionsGroup)[]) => {
   const value = label.toLowerCase().replace(/\s/g, '-')
@@ -83,6 +83,12 @@ export const getNextSibling = (elem: HTMLElement, selector?: string) => {
   return
 }
 
+export const getOptionsList = (container: HTMLElement): HTMLElement[] => {
+  return Array.from(
+    container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)'),
+  )
+}
+
 export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
   // Get the next sibling element
   let sibling = elem.previousElementSibling
@@ -100,11 +106,30 @@ export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
   return
 }
 
+export const isExternalSearch = (search: Search): boolean => {
+  return (
+    (typeof search === 'string' && search === 'external') ||
+    (typeof search === 'object' && search.external === true)
+  )
+}
+
+export const isGlobalSearch = (search: Search): boolean => {
+  return (
+    (typeof search === 'string' && search === 'global') ||
+    (typeof search === 'object' && search.global === true)
+  )
+}
+
 export const selectOptions = (
+  multiple: boolean,
   options: (Option | OptionsGroup)[],
   selected: SelectedOption[],
   deselected?: Option[],
 ) => {
+  if (!multiple) {
+    return [options[0]] as SelectedOption[]
+  }
+
   let _selected = [...selected, ...options]
 
   if (deselected) {

package/src/components/nav/CNavGroup.tsx

@@ -58,7 +58,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   HTMLDivElement | HTMLLIElement,
   CNavGroupProps
 >(({ children, as: Component = 'li', className, compact, idx, toggler, visible, ...rest }, ref) => {
-  const [height, setHeight] = useState<number | string>()
+  const [height, setHeight] = useState<number | string>(0)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navItemsRef = useRef<any>(null)
 

package/src/components/popover/CPopover.tsx

@@ -1,4 +1,12 @@
-import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -97,12 +105,13 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     const popoverRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, popoverRef)
-    const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`)
 
-    const { initPopper, destroyPopper } = usePopper()
+    const id = `popover${useId()}`
     const [mounted, setMounted] = useState(false)
     const [_visible, setVisible] = useState(visible)
 
+    const { initPopper, destroyPopper } = usePopper()
+
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
 
     const popperConfig = {
@@ -130,77 +139,87 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
     }
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+        return
+      }
+
+      handleHide()
     }, [visible])
 
     useEffect(() => {
-      if (_visible) {
-        setMounted(true)
-
-        if (popoverRef.current) {
-          popoverRef.current.classList.remove('fade', 'show')
-          destroyPopper()
-        }
-
+      if (mounted && togglerRef.current && popoverRef.current) {
+        initPopper(togglerRef.current, popoverRef.current, popperConfig)
         setTimeout(() => {
-          if (togglerRef.current && popoverRef.current) {
-            if (animation) {
-              popoverRef.current.classList.add('fade')
-            }
-
-            initPopper(togglerRef.current, popoverRef.current, popperConfig)
-            popoverRef.current.style.removeProperty('display')
-            popoverRef.current.classList.add('show')
-            onShow && onShow()
-          }
+          setVisible(true)
         }, _delay.show)
+
+        return
       }
 
-      return () => {
-        if (popoverRef.current) {
-          popoverRef.current.classList.remove('show')
-          onHide && onHide()
-          executeAfterTransition(() => {
-            if (popoverRef.current) {
-              popoverRef.current.style.display = 'none'
-            }
-
-            destroyPopper()
-            setMounted(false)
-          }, popoverRef.current)
-        }
+      if (!mounted && togglerRef.current && popoverRef.current) {
+        destroyPopper()
+      }
+    }, [mounted])
+
+    useEffect(() => {
+      if (!_visible && togglerRef.current && popoverRef.current) {
+        executeAfterTransition(() => {
+          setMounted(false)
+        }, popoverRef.current)
       }
     }, [_visible])
 
+    const handleShow = () => {
+      setMounted(true)
+      if (onShow) {
+        onShow()
+      }
+    }
+
+    const handleHide = () => {
+      setTimeout(() => {
+        setVisible(false)
+        if (onHide) {
+          onHide()
+        }
+      }, _delay.hide)
+    }
+
     return (
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
           ...(_visible && {
-            'aria-describedby': uID.current,
+            'aria-describedby': id,
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => setVisible(!_visible),
+            onClick: () => (_visible ? handleHide() : handleShow()),
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => setVisible(true),
-            onBlur: () => setVisible(false),
+            onFocus: () => handleShow(),
+            onBlur: () => handleHide(),
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => setVisible(true),
-            onMouseLeave: () => setVisible(false),
+            onMouseEnter: () => handleShow(),
+            onMouseLeave: () => handleHide(),
           }),
         })}
         <CConditionalPortal container={container} portal={true}>
           {mounted && (
             <div
-              className={classNames('popover', 'bs-popover-auto', className)}
-              id={uID.current}
+              className={classNames(
+                'popover',
+                'bs-popover-auto',
+                {
+                  fade: animation,
+                  show: _visible,
+                },
+                className,
+              )}
+              id={id}
               ref={forkedRef}
               role="tooltip"
-              style={{
-                display: 'none',
-              }}
               {...rest}
             >
               <div className="popover-arrow"></div>

package/src/components/tooltip/CTooltip.tsx

@@ -1,4 +1,12 @@
-import React, { forwardRef, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
@@ -92,12 +100,13 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     const tooltipRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
     const forkedRef = useForkedRef(ref, tooltipRef)
-    const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`)
 
-    const { initPopper, destroyPopper, updatePopper } = usePopper()
+    const id = `tooltip${useId()}`
     const [mounted, setMounted] = useState(false)
     const [_visible, setVisible] = useState(visible)
 
+    const { initPopper, destroyPopper, updatePopper } = usePopper()
+
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
 
     const popperConfig = {
@@ -125,48 +134,53 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
     }
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+        return
+      }
+
+      handleHide()
     }, [visible])
 
     useEffect(() => {
-      if (_visible) {
-        setMounted(true)
-
-        if (tooltipRef.current) {
-          tooltipRef.current.classList.remove('fade', 'show')
-          destroyPopper()
-        }
-
+      if (mounted && togglerRef.current && tooltipRef.current) {
+        initPopper(togglerRef.current, tooltipRef.current, popperConfig)
         setTimeout(() => {
-          if (togglerRef.current && tooltipRef.current) {
-            if (animation) {
-              tooltipRef.current.classList.add('fade')
-            }
-
-            initPopper(togglerRef.current, tooltipRef.current, popperConfig)
-            tooltipRef.current.style.removeProperty('display')
-            tooltipRef.current.classList.add('show')
-            onShow && onShow()
-          }
+          setVisible(true)
         }, _delay.show)
+
+        return
       }
 
-      return () => {
-        if (tooltipRef.current) {
-          tooltipRef.current.classList.remove('show')
-          onHide && onHide()
-          executeAfterTransition(() => {
-            if (tooltipRef.current) {
-              tooltipRef.current.style.display = 'none'
-            }
-
-            destroyPopper()
-            setMounted(false)
-          }, tooltipRef.current)
-        }
+      if (!mounted && togglerRef.current && tooltipRef.current) {
+        destroyPopper()
+      }
+    }, [mounted])
+
+    useEffect(() => {
+      if (!_visible && togglerRef.current && tooltipRef.current) {
+        executeAfterTransition(() => {
+          setMounted(false)
+        }, tooltipRef.current)
       }
     }, [_visible])
 
+    const handleShow = () => {
+      setMounted(true)
+      if (onShow) {
+        onShow()
+      }
+    }
+
+    const handleHide = () => {
+      setTimeout(() => {
+        setVisible(false)
+        if (onHide) {
+          onHide()
+        }
+      }, _delay.hide)
+    }
+
     useEffect(() => {
       updatePopper()
     }, [content])
@@ -175,31 +189,36 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
       <>
         {React.cloneElement(children as React.ReactElement<any>, {
           ...(_visible && {
-            'aria-describedby': uID.current,
+            'aria-describedby': id,
           }),
           ref: togglerRef,
           ...((trigger === 'click' || trigger.includes('click')) && {
-            onClick: () => setVisible(!_visible),
+            onClick: () => (_visible ? handleHide() : handleShow()),
           }),
           ...((trigger === 'focus' || trigger.includes('focus')) && {
-            onFocus: () => setVisible(true),
-            onBlur: () => setVisible(false),
+            onFocus: () => handleShow(),
+            onBlur: () => handleHide(),
           }),
           ...((trigger === 'hover' || trigger.includes('hover')) && {
-            onMouseEnter: () => setVisible(true),
-            onMouseLeave: () => setVisible(false),
+            onMouseEnter: () => handleShow(),
+            onMouseLeave: () => handleHide(),
           }),
         })}
         <CConditionalPortal container={container} portal={true}>
           {mounted && (
             <div
-              className={classNames('tooltip', 'bs-tooltip-auto', className)}
-              id={uID.current}
+              className={classNames(
+                'tooltip',
+                'bs-tooltip-auto',
+                {
+                  fade: animation,
+                  show: _visible,
+                },
+                className,
+              )}
+              id={id}
               ref={forkedRef}
               role="tooltip"
-              style={{
-                display: 'none',
-              }}
               {...rest}
             >
               <div className="tooltip-arrow"></div>

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

@@ -20,7 +20,7 @@ export interface CVirtualScrollerProps extends Omit<HTMLAttributes<HTMLDivElemen
 }
 
 export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps>(
-  ({ children, className, visibleItems, onScroll }, ref) => {
+  ({ children, className, visibleItems, onScroll, ...rest }, ref) => {
     const virtualScrollRef = useRef<HTMLDivElement>(null)
     const virtualScrollContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, virtualScrollRef)
@@ -71,11 +71,12 @@ export const CVirtualScroller = forwardRef<HTMLDivElement, CVirtualScrollerProps
         onScroll={(event: UIEvent<HTMLDivElement>) =>
           handleScroll((event.target as HTMLDivElement).scrollTop)
         }
-        ref={forkedRef}
         style={{
           height: viewportHeight,
           overflowY: 'auto',
         }}
+        ref={forkedRef}
+        {...rest}
       >
         <div
           className="virtual-scroller-content"

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
 import { useColorModes } from './useColorModes'
 import { useDebounce } from './useDebounce'
 import { useDebouncedCallback } from './useDebouncedCallback'
+import { useDropdownWithPopper } from './useDropdownWithPopper'
 import { useForkedRef } from './useForkedRef'
 import { useIsVisible } from './useIsVisible'
 import { usePopper } from './usePopper'
@@ -10,6 +11,7 @@ export {
   useColorModes,
   useDebounce,
   useDebouncedCallback,
+  useDropdownWithPopper,
   useForkedRef,
   useIsVisible,
   usePopper,

package/src/hooks/useDropdownWithPopper.ts

@@ -0,0 +1,123 @@
+import { useEffect, useRef, useState } from 'react'
+import { type Options, type Placement } from '@popperjs/core'
+
+import { usePopper } from './usePopper'
+import { isRTL } from '../utils'
+
+export const useDropdownWithPopper = <T extends HTMLElement = never>(
+  popperConfig?: Partial<Options>,
+) => {
+  const dropdownRefElement = useRef<T>(null)
+  const dropdownMenuElement = useRef<HTMLDivElement | null>(null)
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+
+  const { popper, initPopper, destroyPopper } = usePopper()
+
+  const _popperConfig = {
+    placement: (isRTL(dropdownRefElement.current) ? 'bottom-end' : 'bottom-start') as Placement,
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: 'clippingParents',
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 2],
+        },
+      },
+    ],
+    ...popperConfig,
+  }
+
+  const closeDropdown = () => {
+    setIsOpen(false)
+  }
+
+  const openDropdown = () => {
+    setIsOpen(true)
+  }
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => !prev)
+  }
+
+  const updatePopper = () => {
+    if (popper) {
+      popper.update()
+    }
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setIsOpen(false)
+      return
+    }
+
+    if (event.key === 'Tab') {
+      if (
+        dropdownRefElement.current &&
+        dropdownRefElement.current.contains(document.activeElement as HTMLElement)
+      ) {
+        return
+      }
+
+      if (
+        dropdownMenuElement.current &&
+        dropdownMenuElement.current.contains(document.activeElement as HTMLElement)
+      ) {
+        return
+      }
+
+      setIsOpen(false)
+    }
+  }
+
+  const handleMouseUp = (event: Event) => {
+    if (
+      (dropdownMenuElement.current &&
+        dropdownMenuElement.current.contains(event.target as HTMLElement)) ||
+      (dropdownRefElement.current &&
+        dropdownRefElement.current.contains(event.target as HTMLElement))
+    ) {
+      return
+    }
+
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      window.addEventListener('mouseup', handleMouseUp)
+      window.addEventListener('keyup', handleKeyUp)
+
+      if (dropdownRefElement.current && dropdownMenuElement.current) {
+        initPopper(dropdownRefElement.current, dropdownMenuElement.current, _popperConfig)
+      }
+    } else {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyUp)
+
+      destroyPopper()
+    }
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyUp)
+
+      destroyPopper()
+    }
+  }, [isOpen])
+
+  return {
+    dropdownMenuElement,
+    dropdownRefElement,
+    isOpen,
+    closeDropdown,
+    openDropdown,
+    toggleDropdown,
+    updatePopper,
+  }
+}