@coreui/react 5.7.0 → 5.7.1

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?: () => void
   popper?: boolean
   portal?: boolean
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'

package/src/components/dropdown/CDropdownToggle.tsx

@@ -45,18 +45,24 @@ 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?.(),
     }),
   }
 
@@ -74,36 +80,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 = {