@coreui/react 5.4.0 → 5.5.0

package/src/components/popover/CPopover.tsx

@@ -1,6 +1,15 @@
-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'
+import type { Options } from '@popperjs/core'
 
 import { CConditionalPortal } from '../conditional-portal'
 import { useForkedRef, usePopper } from '../../hooks'
@@ -10,65 +19,132 @@ import { executeAfterTransition, getRTLPlacement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
-   * Apply a CSS fade transition to the popover.
+   * Adds a fade transition animation to the React Popover.
    *
    * @since 4.9.0
    */
   animation?: boolean
+
   /**
-   * A string of all className you want applied to the component.
+   * Custom class name(s) for additional styling.
    */
   className?: string
+
   /**
-   * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   * Defines the container element to which the React Popover is appended.
+   * Accepts:
+   * - A DOM element (`HTMLElement` or `DocumentFragment`)
+   * - A function that returns a single element
+   * - `null` (defaults to `document.body`)
    *
+   * @example
+   * <CPopover container={document.getElementById('my-container')}>...</CPopover>
+   *
+   * @default document.body
    * @since 4.11.0
    */
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
   /**
-   * Content node for your component.
+   * Main content of the React Popover. It can be a string or any valid React node.
    */
   content: ReactNode | string
+
   /**
-   * Offset of the popover relative to its target.
-   */
-  offset?: [number, number]
-  /**
-   * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+   * Delay (in milliseconds) before showing or hiding the React Popover.
+   * - If a number is provided, that delay applies to both "show" and "hide".
+   * - If an object is provided, use separate values for "show" and "hide".
+   *
+   * @example
+   * // Delays 300ms on both show and hide
+   * <CPopover delay={300}>...</CPopover>
+   *
+   * // Delays 500ms on show and 100ms on hide
+   * <CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>
    *
    * @since 4.9.0
    */
   delay?: number | { show: number; hide: number }
+
   /**
-   * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+   * Specifies the fallback placements when the preferred `placement` cannot be met.
    *
+   * @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[]
    * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
+
   /**
-   * Callback fired when the component requests to be hidden.
+   * Offset of the React Popover relative to its toggle element, in the form `[x, y]`.
+   *
+   * @example
+   * // Offset the menu 0px in X and 10px in Y direction
+   * <CPopover offset={[0, 10]}>...</CPopover>
+   *
+   * // Offset the menu 5px in both X and Y direction
+   * <CPopover offset={[5, 5]}>...</CPopover>
+   */
+  offset?: [number, number]
+
+  /**
+   * Invoked when the React Popover is about to hide.
    */
   onHide?: () => void
+
   /**
-   * Callback fired when the component requests to be shown.
+   * Invoked when the React Popover is about to show.
    */
   onShow?: () => void
+
   /**
-   * Title node for your component.
+   * Placement of the React Popover. Popper.js may override this based on available space.
    */
-  title?: ReactNode | string
+  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+
   /**
-   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+   * Allows customization of the Popper.js configuration for the React Popover.
+   * Can be an object or a function returning a modified configuration.
+   * [Learn more](https://popper.js.org/docs/v2/constructors/#options)
+   *
+   * @example
+   * <CPopover
+   *   popperConfig={(defaultConfig) => ({
+   *     ...defaultConfig,
+   *     strategy: 'fixed',
+   *     modifiers: [
+   *       ...defaultConfig.modifiers,
+   *       { name: 'computeStyles', options: { adaptive: false } },
+   *     ],
+   *   })}
+   * >...</CPopover>
    *
-   * @type 'hover' | 'focus' | 'click'
+   * @since 5.5.0
    */
-  trigger?: Triggers | Triggers[]
+  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
   /**
-   * 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.
+   * Title for the React Popover header. Can be a string or any valid React node.
    */
-  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+  title?: ReactNode | string
+
   /**
-   * Toggle the visibility of popover component.
+   * Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.
+   *
+   * @example
+   * // Hover-only popover
+   * <CPopover trigger="hover">...</CPopover>
+   *
+   * // Hover + click combined
+   * <CPopover trigger={['hover', 'click']}>...</CPopover>
+   *
+   * @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[]
+   */
+  trigger?: Triggers | Triggers[]
+
+  /**
+   * Controls the visibility of the React Popover.
+   * - `true` shows the popover.
+   * - `false` hides the popover.
    */
   visible?: boolean
 }
@@ -87,120 +163,122 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       onHide,
       onShow,
       placement = 'top',
+      popperConfig,
       title,
       trigger = 'click',
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     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 = {
+    const defaultPopperConfig: Partial<Options> = {
       modifiers: [
-        {
-          name: 'arrow',
-          options: {
-            element: '.popover-arrow',
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: fallbackPlacements,
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
-          },
-        },
+        { name: 'arrow', options: { element: '.popover-arrow' } },
+        { name: 'flip', options: { fallbackPlacements } },
+        { name: 'offset', options: { offset } },
       ],
       placement: getRTLPlacement(placement, togglerRef.current),
     }
 
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
+    const computedPopperConfig: Partial<Options> = {
+      ...defaultPopperConfig,
+      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+    }
 
     useEffect(() => {
-      if (_visible) {
-        setMounted(true)
+      if (visible) {
+        handleShow()
+        return
+      }
 
-        if (popoverRef.current) {
-          popoverRef.current.classList.remove('fade', 'show')
-          destroyPopper()
-        }
+      handleHide()
+    }, [visible])
 
+    useEffect(() => {
+      if (mounted && togglerRef.current && popoverRef.current) {
+        initPopper(togglerRef.current, popoverRef.current, computedPopperConfig)
         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>
@@ -211,7 +289,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
         </CConditionalPortal>
       </>
     )
-  },
+  }
 )
 
 CPopover.propTypes = {
@@ -232,6 +310,7 @@ CPopover.propTypes = {
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   trigger: triggerPropType,
   visible: PropTypes.bool,

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -31,7 +31,7 @@ test('CPopover customize', async () => {
   expect(container).toMatchSnapshot()
   let arrLength = container.getElementsByClassName('popover').length
   expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('bs-popover-end').length
+  arrLength = container.getElementsByClassName('bs-popover-auto').length
   expect(arrLength).toBe(1)
   arrLength = container.getElementsByClassName('popover-arrow').length
   expect(arrLength).toBe(1)

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -3,15 +3,14 @@
 exports[`CPopover customize 1`] = `
 <body>
   <button
-    aria-describedby="popover744956"
     class="btn btn-primary"
     type="button"
   >
     Test
   </button>
   <div
-    class="popover bs-popover-auto fade show"
-    id="popover744956"
+    class="popover bs-popover-auto fade"
+    id="popover:r1:"
     role="tooltip"
     style="position: absolute; left: 0px; top: 0px; margin: 0px;"
   >

package/src/components/progress/CProgress.tsx

@@ -17,7 +17,7 @@ export interface CProgressProps
    */
   height?: number
   /**
-   * A string of all className you want applied to the <CProgressBar/> component.
+   * A string of all className you want applied to the `<CProgressBar/>` component.
    *
    * @since 4.9.0
    */

package/src/components/sidebar/CSidebar.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -7,8 +7,13 @@ import { CBackdrop } from '../backdrop'
 
 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -65,10 +70,14 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
 
-export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
+export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef<
+  HTMLDivElement,
+  CSidebarProps
+>(
   (
     {
       children,
+      as: Component = 'div',
       className,
       colorScheme,
       narrow,
@@ -183,7 +192,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     return (
       <>
-        <div
+        <Component
           className={classNames(
             'sidebar',
             {
@@ -203,7 +212,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
           ref={forkedRef}
         >
           {children}
-        </div>
+        </Component>
         {typeof window !== 'undefined' &&
           mobile &&
           createPortal(
@@ -216,6 +225,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 )
 
 CSidebar.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   colorScheme: PropTypes.oneOf(['dark', 'light']),
@@ -231,4 +241,4 @@ CSidebar.propTypes = {
   visible: PropTypes.bool,
 }
 
-CSidebar.displayName = 'CSidebar'
+CSidebar.displayName = 'CSidebar'