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

package/src/components/popover/CPopover.tsx

@@ -3,13 +3,19 @@ import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
-import { createPopper, Instance, Placement } from '@popperjs/core'
 
-import { triggerPropType } from '../../props'
-import type { Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { usePopper } from '../../hooks'
+import { fallbackPlacementsPropType, triggerPropType } from '../../props'
+import type { Placements, Triggers } from '../../types'
+import { getRTLPlacement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
+  /**
+   * Apply a CSS fade transition to the popover.
+   *
+   * @since 4.9.0-beta.2
+   */
+  animation?: boolean
   /**
    * A string of all className you want applied to the component.
    */
@@ -22,6 +28,18 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
    * 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 }`.
+   *
+   * @since 4.9.0-beta.2
+   */
+  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.
+   *
+   * @since 4.9.0-beta.2
+   */
+  fallbackPlacements?: Placements | Placements[]
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -50,24 +68,13 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   visible?: boolean
 }
 
-const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  switch (placement) {
-    case 'right': {
-      return isRTL(element) ? 'left' : 'right'
-    }
-    case 'left': {
-      return isRTL(element) ? 'right' : 'left'
-    }
-    default: {
-      return placement as Placement
-    }
-  }
-}
-
 export const CPopover: FC<CPopoverProps> = ({
   children,
+  animation = true,
   className,
   content,
+  delay = 0,
+  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
   offset = [0, 8],
   onHide,
   onShow,
@@ -79,16 +86,42 @@ export const CPopover: FC<CPopoverProps> = ({
 }) => {
   const popoverRef = useRef(null)
   const togglerRef = useRef(null)
-  const popper = useRef<Instance>()
+  const { initPopper, destroyPopper } = usePopper()
   const [_visible, setVisible] = useState(visible)
 
+  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+  const popperConfig = {
+    modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: '.popover-arrow',
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: fallbackPlacements,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: getRTLPlacement(placement, togglerRef.current),
+  }
+
   useEffect(() => {
     setVisible(visible)
   }, [visible])
 
   useEffect(() => {
-    if (_visible) {
-      initPopper()
+    if (_visible && togglerRef.current && popoverRef.current) {
+      initPopper(togglerRef.current, popoverRef.current, popperConfig)
     }
 
     return () => {
@@ -96,28 +129,13 @@ export const CPopover: FC<CPopoverProps> = ({
     }
   }, [_visible])
 
-  const initPopper = () => {
-    if (togglerRef.current && popoverRef.current) {
-      popper.current = createPopper(togglerRef.current, popoverRef.current, {
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: offset,
-            },
-          },
-        ],
-        placement: getPlacement(placement, togglerRef.current),
-      })
-    }
-  }
-
-  const destroyPopper = () => {
-    if (popper.current) {
-      popper.current.destroy()
+  const toggleVisible = (visible: boolean) => {
+    if (visible) {
+      setTimeout(() => setVisible(true), _delay.show)
+      return
     }
 
-    popper.current = undefined
+    setTimeout(() => setVisible(false), _delay.hide)
   }
 
   return (
@@ -125,15 +143,15 @@ export const CPopover: FC<CPopoverProps> = ({
       {React.cloneElement(children as React.ReactElement<any>, {
         ref: togglerRef,
         ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => setVisible(!_visible),
+          onClick: () => toggleVisible(!_visible),
         }),
         ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => setVisible(true),
-          onBlur: () => setVisible(false),
+          onFocus: () => toggleVisible(true),
+          onBlur: () => toggleVisible(false),
         }),
         ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => setVisible(true),
-          onMouseLeave: () => setVisible(false),
+          onMouseEnter: () => toggleVisible(true),
+          onMouseLeave: () => toggleVisible(false),
         }),
       })}
       {typeof window !== 'undefined' &&
@@ -154,11 +172,9 @@ export const CPopover: FC<CPopoverProps> = ({
               <div
                 className={classNames(
                   'popover',
-                  `bs-popover-${getPlacement(placement, togglerRef.current)
-                    .replace('left', 'start')
-                    .replace('right', 'end')}`,
-                  'fade',
+                  'bs-popover-auto',
                   {
+                    fade: animation,
                     show: state === 'entered',
                   },
                   className,
@@ -167,7 +183,7 @@ export const CPopover: FC<CPopoverProps> = ({
                 role="tooltip"
                 {...rest}
               >
-                <div data-popper-arrow className="popover-arrow"></div>
+                <div className="popover-arrow"></div>
                 <div className="popover-header">{title}</div>
                 <div className="popover-body">{content}</div>
               </div>
@@ -180,9 +196,18 @@ export const CPopover: FC<CPopoverProps> = ({
 }
 
 CPopover.propTypes = {
+  animation: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  delay: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+      show: PropTypes.number.isRequired,
+      hide: PropTypes.number.isRequired,
+    }),
+  ]),
+  fallbackPlacements: fallbackPlacementsPropType,
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,

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

@@ -8,27 +8,6 @@ exports[`CPopover customize 1`] = `
   >
     Test
   </button>
-  <div
-    class="popover bs-popover-end fade"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
-  >
-    <div
-      class="popover-arrow"
-      data-popper-arrow="true"
-      style="position: absolute;"
-    />
-    <div
-      class="popover-header"
-    >
-      title
-    </div>
-    <div
-      class="popover-body"
-    >
-      content
-    </div>
-  </div>
 </body>
 `;
 

package/src/components/progress/CProgress.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CProgressStackedContext } from './CProgressStacked'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps
@@ -15,6 +16,12 @@ export interface CProgressProps
    * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
    */
   height?: number
+  /**
+   * A string of all className you want applied to the <CProgressBar/> component.
+   *
+   * @since 4.9.0
+   */
+  progressBarClassName?: string
   /**
    * Makes progress bar thinner.
    */
@@ -29,9 +36,10 @@ export interface CProgressProps
   white?: boolean
 }
 
-// TODO: update markup and add '.progress-stacked' in v5
 export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
-  ({ children, className, height, thin, value = 0, white, ...rest }, ref) => {
+  ({ children, className, height, progressBarClassName, thin, value, white, ...rest }, ref) => {
+    const { stacked } = useContext(CProgressStackedContext)
+
     return (
       <div
         className={classNames(
@@ -42,15 +50,41 @@ export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
           },
           className,
         )}
-        style={height ? { height: `${height}px` } : {}}
+        {...(value !== undefined && {
+          role: 'progressbar',
+          'aria-valuenow': value,
+          'aria-valuemin': 0,
+          'aria-valuemax': 100,
+        })}
+        style={{
+          ...(height ? { height: `${height}px` } : {}),
+          ...(stacked ? { width: `${value}%` } : {}),
+        }}
         ref={ref}
       >
-        {value ? (
-          <CProgressBar value={value} {...rest}>
+        {React.Children.toArray(children).some(
+          // @ts-expect-error displayName is set in the CProgressBar component
+          (child) => child.type && child.type.displayName === 'CProgressBar',
+        ) ? (
+          React.Children.map(children, (child) => {
+            // @ts-expect-error displayName is set in the CProgressBar component
+            if (React.isValidElement(child) && child.type.displayName === 'CProgressBar') {
+              return React.cloneElement(child, {
+                ...(value && { value: value }),
+                ...rest,
+              })
+            }
+
+            return
+          })
+        ) : (
+          <CProgressBar
+            {...(progressBarClassName && { className: progressBarClassName })}
+            value={value}
+            {...rest}
+          >
             {children}
           </CProgressBar>
-        ) : (
-          children
         )}
       </div>
     )
@@ -61,6 +95,7 @@ CProgress.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   height: PropTypes.number,
+  progressBarClassName: PropTypes.string,
   thin: PropTypes.bool,
   value: PropTypes.number,
   white: PropTypes.bool,

package/src/components/progress/CProgressBar.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CProgressStackedContext } from './CProgressStacked'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
@@ -32,6 +33,8 @@ export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
   ({ children, animated, className, color, value = 0, variant, ...rest }, ref) => {
+    const { stacked } = useContext(CProgressStackedContext)
+
     return (
       <div
         className={classNames(
@@ -43,11 +46,7 @@ export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
           },
           className,
         )}
-        role="progressbar"
-        style={{ width: `${value}%` }}
-        aria-valuenow={value}
-        aria-valuemin={0}
-        aria-valuemax={100}
+        {...(!stacked && { style: { width: `${value}%` } })}
         {...rest}
         ref={ref}
       >

package/src/components/progress/CProgressStacked.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+}
+
+export interface CProgressStackedContextProps {
+  stacked?: boolean
+}
+
+export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)
+
+export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <div className={classNames('progress-stacked', className)} ref={ref} {...rest}>
+        <CProgressStackedContext.Provider
+          value={{
+            stacked: true,
+          }}
+        >
+          {children}
+        </CProgressStackedContext.Provider>
+      </div>
+    )
+  },
+)
+
+CProgressStacked.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+CProgressStacked.displayName = 'CProgressStacked'

package/src/components/progress/index.ts

@@ -1,4 +1,5 @@
 import { CProgress } from './CProgress'
 import { CProgressBar } from './CProgressBar'
+import { CProgressStacked } from './CProgressStacked'
 
-export { CProgress, CProgressBar }
+export { CProgress, CProgressBar, CProgressStacked }

package/src/components/tooltip/CTooltip.tsx

@@ -3,13 +3,19 @@ import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
-import { createPopper, Instance, Placement } from '@popperjs/core'
 
-import { triggerPropType } from '../../props'
-import type { Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { usePopper } from '../../hooks'
+import { fallbackPlacementsPropType, triggerPropType } from '../../props'
+import type { Placements, Triggers } from '../../types'
+import { getRTLPlacement } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * Apply a CSS fade transition to the tooltip.
+   *
+   * @since 4.9.0-beta.2
+   */
+  animation?: boolean
   /**
    * A string of all className you want applied to the component.
    */
@@ -18,6 +24,18 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
    * Content node for your component.
    */
   content: ReactNode | string
+  /**
+   * The delay for displaying and hiding the tooltip (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 }`.
+   *
+   * @since 4.9.0-beta.2
+   */
+  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.
+   *
+   * @since 4.9.0-beta.2
+   */
+  fallbackPlacements?: Placements | Placements[]
   /**
    * Offset of the tooltip relative to its target.
    */
@@ -46,44 +64,59 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   visible?: boolean
 }
 
-const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  switch (placement) {
-    case 'right': {
-      return isRTL(element) ? 'left' : 'right'
-    }
-    case 'left': {
-      return isRTL(element) ? 'right' : 'left'
-    }
-    default: {
-      return placement as Placement
-    }
-  }
-}
-
 export const CTooltip: FC<CTooltipProps> = ({
   children,
+  animation = true,
   className,
   content,
+  delay = 0,
+  fallbackPlacements = ['top', 'right', 'bottom', 'left'],
   offset = [0, 6],
   onHide,
   onShow,
   placement = 'top',
-  trigger = 'hover',
+  trigger = ['hover', 'focus'],
   visible,
   ...rest
 }) => {
   const tooltipRef = useRef(null)
   const togglerRef = useRef(null)
-  const popper = useRef<Instance>()
+  const { initPopper, destroyPopper } = usePopper()
   const [_visible, setVisible] = useState(visible)
 
+  const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
+
+  const popperConfig = {
+    modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: '.tooltip-arrow',
+        },
+      },
+      {
+        name: 'flip',
+        options: {
+          fallbackPlacements: fallbackPlacements,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: offset,
+        },
+      },
+    ],
+    placement: getRTLPlacement(placement, togglerRef.current),
+  }
+
   useEffect(() => {
     setVisible(visible)
   }, [visible])
 
   useEffect(() => {
-    if (_visible) {
-      initPopper()
+    if (_visible && togglerRef.current && tooltipRef.current) {
+      initPopper(togglerRef.current, tooltipRef.current, popperConfig)
     }
 
     return () => {
@@ -91,28 +124,13 @@ export const CTooltip: FC<CTooltipProps> = ({
     }
   }, [_visible])
 
-  const initPopper = () => {
-    if (togglerRef.current && tooltipRef.current) {
-      popper.current = createPopper(togglerRef.current, tooltipRef.current, {
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: offset,
-            },
-          },
-        ],
-        placement: getPlacement(placement, togglerRef.current),
-      })
-    }
-  }
-
-  const destroyPopper = () => {
-    if (popper.current) {
-      popper.current.destroy()
+  const toggleVisible = (visible: boolean) => {
+    if (visible) {
+      setTimeout(() => setVisible(true), _delay.show)
+      return
     }
 
-    popper.current = undefined
+    setTimeout(() => setVisible(false), _delay.hide)
   }
 
   return (
@@ -120,15 +138,15 @@ export const CTooltip: FC<CTooltipProps> = ({
       {React.cloneElement(children as React.ReactElement<any>, {
         ref: togglerRef,
         ...((trigger === 'click' || trigger.includes('click')) && {
-          onClick: () => setVisible(!_visible),
+          onClick: () => toggleVisible(!_visible),
         }),
         ...((trigger === 'focus' || trigger.includes('focus')) && {
-          onFocus: () => setVisible(true),
-          onBlur: () => setVisible(false),
+          onFocus: () => toggleVisible(true),
+          onBlur: () => toggleVisible(false),
         }),
         ...((trigger === 'hover' || trigger.includes('hover')) && {
-          onMouseEnter: () => setVisible(true),
-          onMouseLeave: () => setVisible(false),
+          onMouseEnter: () => toggleVisible(true),
+          onMouseLeave: () => toggleVisible(false),
         }),
       })}
       {typeof window !== 'undefined' &&
@@ -148,11 +166,9 @@ export const CTooltip: FC<CTooltipProps> = ({
               <div
                 className={classNames(
                   'tooltip',
-                  `bs-tooltip-${getPlacement(placement, togglerRef.current)
-                    .replace('left', 'start')
-                    .replace('right', 'end')}`,
-                  'fade',
+                  'bs-tooltip-auto',
                   {
+                    fade: animation,
                     show: state === 'entered',
                   },
                   className,
@@ -161,7 +177,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                 role="tooltip"
                 {...rest}
               >
-                <div data-popper-arrow className="tooltip-arrow"></div>
+                <div className="tooltip-arrow"></div>
                 <div className="tooltip-inner">{content}</div>
               </div>
             )}
@@ -173,8 +189,17 @@ export const CTooltip: FC<CTooltipProps> = ({
 }
 
 CTooltip.propTypes = {
+  animation: PropTypes.bool,
   children: PropTypes.node,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  delay: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.shape({
+      show: PropTypes.number.isRequired,
+      hide: PropTypes.number.isRequired,
+    }),
+  ]),
+  fallbackPlacements: fallbackPlacementsPropType,
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
+import { usePopper } from './usePopper'
 
-export { useColorModes, useForkedRef }
+export { useColorModes, useForkedRef, usePopper }