@coreui/react 4.9.0-beta.0 → 4.9.0-beta.2

package/dist/props.d.ts

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import type { Placements, Triggers } from './types';
 export declare const colorPropType: PropTypes.Requireable<string>;
+export declare const fallbackPlacementsPropType: PropTypes.Requireable<NonNullable<Placements | NonNullable<Placements>[] | null>>;
 export declare const placementPropType: PropTypes.Requireable<Placements>;
 export declare const shapePropType: PropTypes.Requireable<string>;
 export declare const textColorsPropType: PropTypes.Requireable<string>;

package/dist/utils/getRTLPlacement.d.ts

@@ -0,0 +1,3 @@
+import { Placement } from '@popperjs/core';
+declare const getRTLPlacement: (placement: string, element: HTMLDivElement | null) => Placement;
+export default getRTLPlacement;

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+import getRTLPlacement from './getRTLPlacement';
 import isInViewport from './isInViewport';
 import isRTL from './isRTL';
-export { isInViewport, isRTL };
+export { getRTLPlacement, isInViewport, isRTL };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.9.0-beta.0",
+  "version": "4.9.0-beta.2",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -43,8 +43,8 @@
     "@rollup/plugin-typescript": "^11.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.2.11",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "^18.2.5",
     "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
     "jest": "^29.5.0",
@@ -54,9 +54,9 @@
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.25.0",
-    "tslib": "^2.5.3",
+    "rollup": "^3.25.1",
     "ts-jest": "^29.1.0",
+    "tslib": "^2.5.3",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {

package/src/components/dropdown/CDropdown.tsx

@@ -3,7 +3,6 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
-  ReactNode,
   RefObject,
   useEffect,
   useRef,
@@ -11,11 +10,11 @@ import React, {
 } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { Manager } from 'react-popper'
 
-import { useForkedRef } from '../../hooks'
+import { useForkedRef, usePopper } from '../../hooks'
 import { placementPropType } from '../../props'
 import type { Placements } from '../../types'
+import { isRTL } from '../../utils'
 
 export type Directions = 'start' | 'end'
 
@@ -60,8 +59,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * Sets a specified  direction and location of the dropdown menu.
    */
   direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
+  /**
+   * Offset of the dropdown menu relative to its target.
+   */
+  offset?: [number, number]
   /**
    * Callback fired when the component requests to be hidden.
+   *
+   * @since 4.9.0-beta.2
    */
   onHide?: () => void
   /**
@@ -94,17 +99,45 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: 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
+  dropdownToggleRef: RefObject<any | undefined>
+  dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
   portal: boolean
 }
 
+const getPlacement = (
+  placement: Placements,
+  direction: CDropdownProps['direction'],
+  alignment: CDropdownProps['alignment'],
+  isRTL: boolean,
+): Placements => {
+  let _placement = placement
+
+  if (direction === 'dropup') {
+    _placement = isRTL ? 'top-end' : 'top-start'
+  }
+
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
+  if (direction === 'dropend') {
+    _placement = isRTL ? 'left-start' : 'right-start'
+  }
+
+  if (direction === 'dropstart') {
+    _placement = isRTL ? 'right-start' : 'left-start'
+  }
+
+  if (alignment === 'end') {
+    _placement = isRTL ? 'bottom-start' : 'bottom-end'
+  }
+
+  return _placement
+}
+
 export const CDropdownContext = createContext({} as ContextProps)
 
 export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownProps>(
@@ -116,6 +149,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       className,
       dark,
       direction,
+      offset = [0, 2],
       onHide,
       onShow,
       placement = 'bottom-start',
@@ -129,9 +163,12 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     ref,
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    const dropdownToggleRef = useRef(null)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const dropdownToggleRef = useRef<any>(null)
+    const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
     const [_visible, setVisible] = useState(visible)
+    const { initPopper, destroyPopper } = usePopper()
 
     const Component = variant === 'nav-item' ? 'li' : component
 
@@ -142,52 +179,100 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
-      autoClose,
       dark,
-      direction: direction,
       dropdownToggleRef,
-      placement: placement,
+      dropdownMenuRef,
       popper,
-      portal: portal,
+      portal,
       variant,
       visible: _visible,
       setVisible,
     }
 
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: offset,
+          },
+        },
+      ],
+      placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+    }
+
     useEffect(() => {
       setVisible(visible)
     }, [visible])
 
     useEffect(() => {
-      _visible && onShow && onShow()
-      !_visible && onHide && onHide()
+      if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+        popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig)
+        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('keyup', handleKeyup)
+        onShow && onShow()
+      }
+
+      return () => {
+        popper && destroyPopper()
+        window.removeEventListener('mouseup', handleMouseUp)
+        window.removeEventListener('keyup', handleKeyup)
+        onHide && onHide()
+      }
     }, [_visible])
 
+    const handleKeyup = (event: KeyboardEvent) => {
+      if (autoClose === false) {
+        return
+      }
+
+      if (event.key === 'Escape') {
+        setVisible(false)
+      }
+    }
+
+    const handleMouseUp = (event: Event) => {
+      if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+        return
+      }
+
+      if (dropdownToggleRef.current.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
+      }
+    }
+
     return (
       <CDropdownContext.Provider value={contextValues}>
-        <PopperManagerWrapper popper={popper}>
-          {variant === 'input-group' ? (
-            <>{children}</>
-          ) : (
-            <Component
-              className={classNames(
-                variant === 'nav-item' ? 'nav-item dropdown' : variant,
-                {
-                  'dropdown-center': direction === 'center',
-                  'dropup dropup-center': direction === 'dropup-center',
-                  [`${direction}`]:
-                    direction && direction !== 'center' && direction !== 'dropup-center',
-                  show: _visible,
-                },
-                className,
-              )}
-              {...rest}
-              ref={forkedRef}
-            >
-              {children}
-            </Component>
-          )}
-        </PopperManagerWrapper>
+        {variant === 'input-group' ? (
+          <>{children}</>
+        ) : (
+          <Component
+            className={classNames(
+              variant === 'nav-item' ? 'nav-item dropdown' : variant,
+              {
+                'dropdown-center': direction === 'center',
+                'dropup dropup-center': direction === 'dropup-center',
+                [`${direction}`]:
+                  direction && direction !== 'center' && direction !== 'dropup-center',
+                show: _visible,
+              },
+              className,
+            )}
+            {...rest}
+            ref={forkedRef}
+          >
+            {children}
+          </Component>
+        )}
       </CDropdownContext.Provider>
     )
   },
@@ -196,15 +281,14 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 const alignmentDirection = PropTypes.oneOf<Directions>(['start', 'end'])
 
 CDropdown.propTypes = {
-  // @ts-expect-error TODO: we have to find a solution
   alignment: PropTypes.oneOfType([
     alignmentDirection,
-    PropTypes.shape({ xs: alignmentDirection }),
-    PropTypes.shape({ sm: alignmentDirection }),
-    PropTypes.shape({ md: alignmentDirection }),
-    PropTypes.shape({ lg: alignmentDirection }),
-    PropTypes.shape({ xl: alignmentDirection }),
-    PropTypes.shape({ xxl: alignmentDirection }),
+    PropTypes.shape({ xs: alignmentDirection.isRequired }),
+    PropTypes.shape({ sm: alignmentDirection.isRequired }),
+    PropTypes.shape({ md: alignmentDirection.isRequired }),
+    PropTypes.shape({ lg: alignmentDirection.isRequired }),
+    PropTypes.shape({ xl: alignmentDirection.isRequired }),
+    PropTypes.shape({ xxl: alignmentDirection.isRequired }),
   ]),
   autoClose: PropTypes.oneOfType([
     PropTypes.bool,
@@ -215,6 +299,7 @@ CDropdown.propTypes = {
   component: PropTypes.elementType,
   dark: PropTypes.bool,
   direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
+  offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: placementPropType,

package/src/components/dropdown/CDropdownMenu.tsx

@@ -1,27 +1,13 @@
-import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 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'
-import { isRTL } from '../../utils'
+import { useForkedRef } from '../../hooks'
 
-export interface CDropdownMenuProps
-  extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
-    Omit<
-      PopperChildrenProps,
-      | 'arrowProps'
-      | 'forceUpdate'
-      | 'hasPopperEscaped'
-      | 'isReferenceHidden'
-      | 'placement'
-      | 'ref'
-      | 'style'
-      | 'update'
-    > {
+export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
   /**
    * A string of all className you want applied to the base component.
    */
@@ -47,127 +33,44 @@ const alignmentClassNames = (alignment: Alignments) => {
   return classNames
 }
 
-export const CDropdownMenu: FC<CDropdownMenuProps> = ({
-  children,
-  className,
-  component: Component = 'ul',
-  ...rest
-}) => {
-  const {
-    alignment,
-    autoClose,
-    dark,
-    direction,
-    dropdownToggleRef,
-    placement,
-    popper,
-    portal,
-    visible,
-    setVisible,
-  } = useContext(CDropdownContext)
-
-  const dropdownMenuRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    visible && window.addEventListener('mouseup', handleMouseUp)
-    visible && window.addEventListener('keyup', handleKeyup)
-
-    return () => {
-      window.removeEventListener('mouseup', handleMouseUp)
-      window.removeEventListener('keyup', handleKeyup)
-    }
-  }, [visible])
-
-  const handleKeyup = (event: KeyboardEvent) => {
-    if (autoClose === false) {
-      return
-    }
-
-    if (event.key === 'Escape') {
-      setVisible(false)
-    }
-  }
-
-  const handleMouseUp = (event: Event) => {
-    if (dropdownToggleRef && dropdownToggleRef.current.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
-    }
-  }
-
-  let _placement: Placements = placement
-
-  if (direction === 'center') {
-    _placement = 'bottom'
-  }
-
-  if (direction === 'dropup') {
-    _placement = isRTL(dropdownMenuRef.current) ? 'top-end' : 'top-start'
-  }
-
-  if (direction === 'dropup-center') {
-    _placement = 'top'
-  }
-
-  if (direction === 'dropend') {
-    _placement = isRTL(dropdownMenuRef.current) ? 'left-start' : 'right-start'
-  }
-
-  if (direction === 'dropstart') {
-    _placement = isRTL(dropdownMenuRef.current) ? 'right-start' : 'left-start'
-  }
-
-  if (alignment === 'end') {
-    _placement = isRTL(dropdownMenuRef.current) ? 'bottom-start' : 'bottom-end'
-  }
-
-  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
-    <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 ? (
-    <Popper innerRef={dropdownMenuRef} placement={_placement}>
-      {({ ref, style }) => dropdownMenuComponent(style, ref)}
-    </Popper>
-  ) : (
-    dropdownMenuComponent()
-  )
-}
+export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDropdownMenuProps>(
+  ({ children, className, component: Component = 'ul', ...rest }, ref) => {
+    const { alignment, dark, dropdownMenuRef, popper, portal, visible } =
+      useContext(CDropdownContext)
+
+    const forkedRef = useForkedRef(ref, dropdownMenuRef)
+
+    return (
+      <CConditionalPortal portal={portal ?? false}>
+        <Component
+          className={classNames(
+            'dropdown-menu',
+            {
+              'dropdown-menu-dark': dark,
+              show: visible,
+            },
+            alignment && alignmentClassNames(alignment),
+            className,
+          )}
+          ref={forkedRef}
+          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>
+    )
+  },
+)
 
 CDropdownMenu.propTypes = {
   children: PropTypes.node,

package/src/components/dropdown/CDropdownToggle.tsx

@@ -1,13 +1,11 @@
 import React, { FC, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { Reference } from 'react-popper'
 
 import { CButton, CButtonProps } from '../button/CButton'
 
 import { CDropdownContext } from './CDropdown'
 
-import { useForkedRef } from '../../hooks'
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
 
@@ -41,7 +39,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
@@ -70,15 +68,14 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   }
 
   // We use any because Toggler can be `a` as well as `button`.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Toggler = (ref?: React.Ref<any>) => {
+  const Toggler = () => {
     if (custom && React.isValidElement(children)) {
       return (
         <>
           {React.cloneElement(children as React.ReactElement<any>, {
             'aria-expanded': visible,
             ...(!rest.disabled && { ...triggers }),
-            ref: useForkedRef(ref, dropdownToggleRef),
+            ref: dropdownToggleRef,
           })}
         </>
       )
@@ -86,27 +83,21 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
 
     if (variant === 'nav-item') {
       return (
-        <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
+        <a href="#" {...togglerProps} ref={dropdownToggleRef}>
           {children}
         </a>
       )
     }
 
     return (
-      <CButton
-        type="button"
-        {...togglerProps}
-        tabIndex={0}
-        {...rest}
-        ref={useForkedRef(ref, dropdownToggleRef)}
-      >
+      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>
     )
   }
 
-  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler(dropdownToggleRef)
+  return <Toggler />
 }
 
 CDropdownToggle.propTypes = {

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

@@ -9,7 +9,6 @@ exports[`CDropdownMenu customize 1`] = `
       aria-hidden="false"
       class="dropdown-menu show bazinga"
       role="menu"
-      style="position: absolute; left: 0px; top: 0px;"
     >
       Test
     </div>