@coreui/react 5.7.0 → 5.8.0

package/src/components/dropdown/CDropdown.tsx

@@ -1,4 +1,13 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, {
+  ElementType,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import type { Options } from '@popperjs/core'
@@ -28,12 +37,15 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    *   </CDropdownMenu>
    * </CDropdown>
    *
-   * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
+   * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } |
+   * { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} |
+   * { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
 
   /**
-   * Determines the root node component (native HTML element or a custom React component) for the React Dropdown.
+   * Determines the root node component (native HTML element or a custom React
+   * component) for the React Dropdown.
    */
   as?: ElementType
 
@@ -56,7 +68,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   className?: string
 
   /**
-   * Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to `document.body`.
+   * Appends the React Dropdown Menu to a specific element. You can pass an HTML
+   * element or a function returning an element. Defaults to `document.body`.
    *
    * @example
    * // Append the menu to a custom container
@@ -69,7 +82,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
 
   /**
-   * Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.
+   * Applies a darker color scheme to the React Dropdown Menu, often used within
+   * dark navbars.
    */
   dark?: boolean
 
@@ -79,7 +93,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
 
   /**
-   * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.
+   * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to
+   * its target.
    *
    * @example
    * // Offset the menu 10px in X and 5px in Y direction
@@ -102,19 +117,23 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   onShow?: () => void
 
   /**
-   * Determines the placement of the React Dropdown Menu after Popper.js modifiers.
+   * Determines the placement of the React Dropdown Menu after Popper.js
+   * modifiers.
    *
    * @type 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
    */
   placement?: Placements
 
   /**
-   * Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.
+   * Enables or disables dynamic positioning via Popper.js for the React
+   * Dropdown Menu.
    */
   popper?: boolean
 
   /**
-   * Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)
+   * Provides a custom Popper.js configuration or a function that returns a
+   * modified Popper.js configuration for advanced positioning of the React
+   * Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)
    *
    * @example
    * // Providing a custom popper config
@@ -134,7 +153,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
 
   /**
-   * Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.
+   * Renders the React Dropdown Menu using a React Portal, allowing it to escape
+   * the DOM hierarchy for improved positioning.
    *
    * @since 4.8.0
    */
@@ -190,136 +210,184 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    const dropdownToggleRef = useRef<HTMLElement>(null)
     const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [dropdownToggleElement, setDropdownToggleElement] = useState<HTMLElement | null>(null)
+    const [pendingKeyDownEvent, setPendingKeyDownEvent] = useState<KeyboardEvent | null>(null)
     const [_visible, setVisible] = useState(visible)
     const { initPopper, destroyPopper } = usePopper()
 
-    const Component = variant === 'nav-item' ? 'li' : as
-
-    // Disable popper if responsive aligment is set.
-    if (typeof alignment === 'object') {
-      popper = false
-    }
+    const dropdownToggleRef = useCallback((node: HTMLElement | null) => {
+      if (node) {
+        setDropdownToggleElement(node)
+      }
+    }, [])
 
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownToggleRef,
-      dropdownMenuRef,
-      popper,
-      portal,
-      variant,
-      visible: _visible,
-      setVisible,
-    }
+    const allowPopperUse = popper && typeof alignment !== 'object'
+    const Component = variant === 'nav-item' ? 'li' : as
 
-    const defaultPopperConfig = {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
+    const computedPopperConfig: Partial<Options> = useMemo(() => {
+      const defaultPopperConfig = {
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset,
+            },
           },
-        },
-      ],
-      placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
-    }
+        ],
+        placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+      }
 
-    const computedPopperConfig: Partial<Options> = {
-      ...defaultPopperConfig,
-      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
-    }
+      return {
+        ...defaultPopperConfig,
+        ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+      }
+    }, [offset, placement, direction, alignment, popperConfig])
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+      } else {
+        handleHide()
+      }
     }, [visible])
 
     useEffect(() => {
-      const toggleElement = dropdownToggleRef.current
+      const toggleElement = dropdownToggleElement
       const menuElement = dropdownMenuRef.current
+      if (allowPopperUse && menuElement && toggleElement && _visible) {
+        initPopper(toggleElement, menuElement, computedPopperConfig)
+      }
+    }, [dropdownToggleElement])
 
-      if (_visible && toggleElement && menuElement) {
-        if (popper) {
-          initPopper(toggleElement, menuElement, computedPopperConfig)
-        }
+    useEffect(() => {
+      if (pendingKeyDownEvent !== null) {
+        handleKeydown(pendingKeyDownEvent)
+        setPendingKeyDownEvent(null)
+      }
+    }, [pendingKeyDownEvent])
 
-        toggleElement.focus()
-        toggleElement.addEventListener('keydown', handleKeydown)
-        menuElement.addEventListener('keydown', handleKeydown)
+    const handleHide = useCallback(() => {
+      setVisible(false)
 
-        window.addEventListener('mouseup', handleMouseUp)
-        window.addEventListener('keyup', handleKeyup)
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
 
-        onShow?.()
+      if (allowPopperUse) {
+        destroyPopper()
       }
 
-      return () => {
-        if (popper) {
-          destroyPopper()
-        }
+      toggleElement?.removeEventListener('keydown', handleKeydown)
+      menuElement?.removeEventListener('keydown', handleKeydown)
 
-        toggleElement?.removeEventListener('keydown', handleKeydown)
-        menuElement?.removeEventListener('keydown', handleKeydown)
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
 
-        window.removeEventListener('mouseup', handleMouseUp)
-        window.removeEventListener('keyup', handleKeyup)
+      onHide?.()
+    }, [dropdownToggleElement, allowPopperUse, destroyPopper, onHide])
 
-        onHide?.()
-      }
-    }, [
-      computedPopperConfig,
-      destroyPopper,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      initPopper,
-      _visible,
-    ])
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (
-        _visible &&
-        dropdownMenuRef.current &&
-        (event.key === 'ArrowDown' || event.key === 'ArrowUp')
-      ) {
+    const handleKeydown = useCallback((event: KeyboardEvent) => {
+      if (dropdownMenuRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
         event.preventDefault()
         const target = event.target as HTMLElement
-        const items: HTMLElement[] = Array.from(
-          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)')
-        )
+        const items = [
+          ...dropdownMenuRef.current.querySelectorAll(
+            '.dropdown-item:not(.disabled):not(:disabled)'
+          ),
+        ] as HTMLElement[]
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
-    }
+    }, [])
 
-    const handleKeyup = (event: KeyboardEvent) => {
-      if (autoClose === false) {
-        return
-      }
+    const handleKeyup = useCallback(
+      (event: KeyboardEvent) => {
+        if (autoClose === false) {
+          return
+        }
 
-      if (event.key === 'Escape') {
-        setVisible(false)
-      }
-    }
+        if (event.key === 'Escape') {
+          handleHide()
+          dropdownToggleElement?.focus()
+        }
+      },
+      [autoClose, handleHide]
+    )
 
-    const handleMouseUp = (event: Event) => {
-      if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
-        return
-      }
+    const handleMouseUp = useCallback(
+      (event: Event) => {
+        if (!dropdownToggleElement || !dropdownMenuRef.current) {
+          return
+        }
 
-      if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
-        return
-      }
+        if (dropdownToggleElement.contains(event.target as HTMLElement)) {
+          return
+        }
 
-      if (
-        autoClose === true ||
-        (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
-        (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
-      ) {
-        setTimeout(() => setVisible(false), 1)
-        return
-      }
+        if (
+          autoClose === true ||
+          (autoClose === 'inside' &&
+            dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
+          (autoClose === 'outside' &&
+            !dropdownMenuRef.current.contains(event.target as HTMLElement))
+        ) {
+          setTimeout(() => handleHide(), 1)
+          return
+        }
+      },
+      [autoClose, dropdownToggleElement, handleHide]
+    )
+
+    const handleShow = useCallback(
+      (event?: KeyboardEvent) => {
+        const toggleElement = dropdownToggleElement
+        const menuElement = dropdownMenuRef.current
+
+        if (toggleElement && menuElement) {
+          setVisible(true)
+
+          if (allowPopperUse) {
+            initPopper(toggleElement, menuElement, computedPopperConfig)
+          }
+
+          toggleElement.focus()
+          toggleElement.addEventListener('keydown', handleKeydown)
+          menuElement.addEventListener('keydown', handleKeydown)
+
+          window.addEventListener('mouseup', handleMouseUp)
+          window.addEventListener('keyup', handleKeyup)
+
+          if (event && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            setPendingKeyDownEvent(event)
+          }
+
+          onShow?.()
+        }
+      },
+      [
+        dropdownToggleElement,
+        allowPopperUse,
+        initPopper,
+        computedPopperConfig,
+        handleKeydown,
+        handleMouseUp,
+        handleKeyup,
+        onShow,
+      ]
+    )
+
+    const contextValues = {
+      alignment,
+      container,
+      dark,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      handleHide,
+      handleShow,
+      popper: allowPopperUse,
+      portal,
+      variant,
+      visible: _visible,
     }
 
     return (

package/src/components/dropdown/CDropdownContext.ts

@@ -5,10 +5,10 @@ export interface CDropdownContextProps {
   alignment?: Alignments
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   dark?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | null>
   dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  dropdownToggleRef: (node: HTMLElement | null) => void
+  handleHide?: () => void
+  handleShow?: (event?: KeyboardEvent) => void
   popper?: boolean
   portal?: boolean
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'

package/src/components/dropdown/CDropdownToggle.tsx

@@ -18,17 +18,21 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    */
   custom?: boolean
   /**
-   * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+   * If a dropdown `variant` is set to `nav-item` then render the toggler as a
+   * link instead of a button.
    *
    * @since 5.0.0
    */
   navLink?: boolean
   /**
-   * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
+   * Similarly, create split button dropdowns with virtually the same markup as
+   * single button dropdowns, but with the addition of `.dropdown-toggle-split`
+   * className for proper spacing around the dropdown caret.
    */
   split?: boolean
   /**
-   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+   * Sets which event handlers you'd like provided to your toggle prop. You can
+   * specify one trigger or an array of them.
    *
    * @type 'hover' | 'focus' | 'click'
    */
@@ -45,19 +49,31 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, handleHide, handleShow, variant, visible } =
+    useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
       onClick: (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault()
-        setVisible(!visible)
+
+        if (visible) {
+          handleHide?.()
+        } else {
+          handleShow?.()
+        }
       },
     }),
     ...((trigger === 'focus' || trigger.includes('focus')) && {
-      onFocus: () => setVisible(true),
-      onBlur: () => setVisible(false),
+      onFocus: () => handleShow?.(),
+      onBlur: () => handleHide?.(),
     }),
+    onKeyDown: (event: React.KeyboardEvent) => {
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        handleShow?.(event.nativeEvent)
+      }
+    },
   }
 
   const togglerProps = {
@@ -74,36 +90,32 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ...(!rest.disabled && { ...triggers }),
   }
 
-  const Toggler = () => {
-    if (custom && React.isValidElement(children)) {
-      return (
-        <>
-          {React.cloneElement(children as React.ReactElement<any>, {
-            'aria-expanded': visible,
-            ...(!rest.disabled && { ...triggers }),
-            ref: dropdownToggleRef,
-          })}
-        </>
-      )
-    }
-
-    if (variant === 'nav-item' && navLink) {
-      return (
-        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
+  if (custom && React.isValidElement(children)) {
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: dropdownToggleRef,
+        })}
+      </>
+    )
+  }
 
+  if (variant === 'nav-item' && navLink) {
     return (
-      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
         {children}
-        {split && <span className="visually-hidden">Toggle Dropdown</span>}
-      </CButton>
+      </a>
     )
   }
 
-  return <Toggler />
+  return (
+    <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      {children}
+      {split && <span className="visually-hidden">Toggle Dropdown</span>}
+    </CButton>
+  )
 }
 
 CDropdownToggle.propTypes = {

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -30,7 +30,7 @@ test('CDropdown customize', async () => {
       visible={true}
     >
       Test
-    </CDropdown>,
+    </CDropdown>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -66,7 +66,7 @@ test('CDropdown opens on toggle click and closes on clicking outside', async ()
           <CDropdownItem>B</CDropdownItem>
         </CDropdownMenu>
       </CDropdown>
-    </div>,
+    </div>
   )
 
   // Ensure the dropdown is initially closed
@@ -110,7 +110,7 @@ test('CDropdown example', async () => {
         <CDropdownDivider />
         <CDropdownItem>D</CDropdownItem>
       </CDropdownMenu>
-    </CDropdown>,
+    </CDropdown>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx

@@ -12,7 +12,7 @@ test('CDropdownHeader customize', async () => {
   const { container } = render(
     <CDropdownHeader className="bazinga" as="h3">
       Test
-    </CDropdownHeader>,
+    </CDropdownHeader>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/dropdown/__tests__/CDropdownItem.spec.tsx

@@ -12,7 +12,7 @@ test('CDropdownItem customize', async () => {
   const { container } = render(
     <CDropdownItem className="bazinga" as="div">
       Test
-    </CDropdownItem>,
+    </CDropdownItem>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx

@@ -12,7 +12,7 @@ test('CDropdownItemPlain customize', async () => {
   const { container } = render(
     <CDropdownItemPlain className="bazinga" as="div">
       Test
-    </CDropdownItemPlain>,
+    </CDropdownItemPlain>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx

@@ -14,7 +14,7 @@ test('CDropdownMenu customize', async () => {
       <CDropdownMenu className="bazinga" as="div">
         Test
       </CDropdownMenu>
-    </CDropdown>,
+    </CDropdown>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild?.firstChild).toHaveClass('bazinga')

package/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

@@ -12,7 +12,7 @@ test('CDropdownToggle customize', async () => {
   const { container } = render(
     <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
       Test
-    </CDropdownToggle>,
+    </CDropdownToggle>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('dropdown-toggle')

package/src/components/dropdown/utils.ts

@@ -7,7 +7,7 @@ export const getAlignmentClassNames = (alignment: Alignments) => {
   if (typeof alignment === 'object') {
     for (const key in alignment) {
       classNames.push(
-        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`,
+        `dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key as keyof Breakpoints]}`
       )
     }
   }
@@ -23,7 +23,7 @@ export const getPlacement = (
   placement: Placement,
   direction: string | undefined,
   alignment: Alignments | string | undefined,
-  isRTL: boolean,
+  isRTL: boolean
 ): Placements => {
   let _placement = placement