feat(CDropdown): allow rendering menu inside React Portal

Author: mrholek

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -78,6 +78,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * If you want to disable dynamic positioning set this property to `true`.
    */
   popper?: boolean
+  /**
+   * Generates dropdown menu using createPortal.
+   *
+   * @since 4.8.0
+   */
+  portal?: boolean
   /**
    * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
    */
@@ -88,20 +94,15 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
-const PopperManagerWrapper = ({
-  children,
-  popper,
-}: {
-  children: ReactNode
-  popper: boolean
-}) => {
+const PopperManagerWrapper = ({ children, popper }: { children: ReactNode; popper: boolean }) => {
   return popper ? <Manager>{children}</Manager> : <>{children}</>
 }
 
 interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  portal: boolean
 }
 
 export const CDropdownContext = createContext({} as ContextProps)
@@ -119,6 +120,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       onShow,
       placement = 'bottom-start',
       popper = true,
+      portal = false,
       variant = 'btn-group',
       component = 'div',
       visible = false,
@@ -146,6 +148,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       dropdownToggleRef,
       placement: placement,
       popper,
+      portal: portal,
       variant,
       visible: _visible,
       setVisible,
@@ -172,7 +175,8 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
                 {
                   'dropdown-center': direction === 'center',
                   'dropup dropup-center': direction === 'dropup-center',
-                  [`${direction}`]: direction && direction !== 'center' && direction !== 'dropup-center',
+                  [`${direction}`]:
+                    direction && direction !== 'center' && direction !== 'dropup-center',
                   show: _visible,
                 },
                 className,
@@ -215,6 +219,7 @@ CDropdown.propTypes = {
   onShow: PropTypes.func,
   placement: placementPropType,
   popper: PropTypes.bool,
+  portal: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
   visible: PropTypes.bool,
 }

packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
 import { Alignments, CDropdownContext } from './CDropdown'
+import { CConditionalPortal } from '../conditional-portal'
 
 import type { Placements } from '../../types'
 
@@ -30,6 +31,21 @@ export interface CDropdownMenuProps
   component?: string | ElementType
 }
 
+const alignmentClassNames = (alignment: Alignments) => {
+  const classNames: string[] = []
+  if (typeof alignment === 'object') {
+    Object.keys(alignment).map((key) => {
+      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
+    })
+  }
+
+  if (typeof alignment === 'string') {
+    classNames.push(`dropdown-menu-${alignment}`)
+  }
+
+  return classNames
+}
+
 export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   children,
   className,
@@ -44,6 +60,7 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     dropdownToggleRef,
     placement,
     popper,
+    portal,
     visible,
     setVisible,
   } = useContext(CDropdownContext)
@@ -111,48 +128,35 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     _placement = 'bottom-end'
   }
 
-  const alignmentClassNames = (alignment: Alignments) => {
-    const classNames: string[] = []
-    if (typeof alignment === 'object') {
-      Object.keys(alignment).map((key) => {
-        classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-      })
-    }
-
-    if (typeof alignment === 'string') {
-      classNames.push(`dropdown-menu-${alignment}`)
-    }
-
-    return classNames
-  }
-
   const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
-    <Component
-      className={classNames(
-        'dropdown-menu',
-        {
-          'dropdown-menu-dark': dark,
-          show: visible,
-        },
-        alignment && alignmentClassNames(alignment),
-        className,
-      )}
-      ref={ref}
-      style={style}
-      role="menu"
-      aria-hidden={!visible}
-      {...(!popper && { 'data-coreui-popper': 'static' })}
-      {...rest}
-    >
-      {Component === 'ul'
-        ? React.Children.map(children, (child, index) => {
-            if (React.isValidElement(child)) {
-              return <li key={index}>{React.cloneElement(child)}</li>
-            }
-            return
-          })
-        : children}
-    </Component>
+    <CConditionalPortal portal={portal ?? false}>
+      <Component
+        className={classNames(
+          'dropdown-menu',
+          {
+            'dropdown-menu-dark': dark,
+            show: visible,
+          },
+          alignment && alignmentClassNames(alignment),
+          className,
+        )}
+        ref={ref}
+        style={style}
+        role="menu"
+        aria-hidden={!visible}
+        {...(!popper && { 'data-coreui-popper': 'static' })}
+        {...rest}
+      >
+        {Component === 'ul'
+          ? React.Children.map(children, (child, index) => {
+              if (React.isValidElement(child)) {
+                return <li key={index}>{React.cloneElement(child)}</li>
+              }
+              return
+            })
+          : children}
+      </Component>
+    </CConditionalPortal>
   )
 
   return popper && visible ? (

packages/docs/content/api/CDropdown.api.mdx

@@ -17,5 +17,6 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 | **onShow** | Callback fired when the component requests to be shown. | `() => void` | - |
 | **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start |
 | **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true |
+| **portal** **_4.8.0+_** | Generates dropdown menu using createPortal. | `boolean` | false |
 | **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | `'btn-group'` \| `'dropdown'` \| `'input-group'` \| `'nav-item'` | btn-group |
 | **visible** | Toggle the visibility of dropdown menu component. | `boolean` | false |