@coreui/react-pro 4.12.0-beta.1 → 4.12.0-beta.3

package/src/components/multi-select/CMultiSelect.tsx

@@ -11,7 +11,8 @@ import React, {
 
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import { createPopper, Instance } from '@popperjs/core'
+
+import type { Placement } from '@popperjs/core'
 
 import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
 
@@ -19,7 +20,7 @@ import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
-import { useForkedRef } from '../../hooks'
+import { useForkedRef, usePopper } from '../../hooks'
 import { isRTL } from '../../utils'
 import { createOption, filterOptionsList, flattenOptionsArray, selectOptions } from './utils'
 import type { Option, OptionsGroup, SelectedOption } from './types'
@@ -101,13 +102,13 @@ export interface CMultiSelectProps
   /**
    * Custom template for options.
    *
-   * @since 4.12.0-beta.1
+   * @since 4.12.0-beta.3
    */
   optionsTemplate?: (option: Option) => ReactNode
   /**
    * Custom template for options groups.
    *
-   * @since 4.12.0-beta.1
+   * @since 4.12.0-beta.3
    */
   optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
   /**
@@ -215,9 +216,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const nativeSelectRef = useRef<HTMLSelectElement>(null)
     const togglerRef = useRef<HTMLDivElement>(null)
     const searchRef = useRef<HTMLInputElement>(null)
-
     const isInitialMount = useRef(true)
-    const popper = useRef<Instance>()
+
+    const { popper, initPopper, destroyPopper } = usePopper()
 
     const [_options, setOptions] = useState<(Option | OptionsGroup)[]>(options)
     const [_visible, setVisible] = useState(visible)
@@ -251,6 +252,24 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       return searchRef.current && createOption(String(searchValue), flattenedOptions)
     }, [filteredOptions, searchValue])
 
+    const popperConfig = {
+      placement: (isRTL(multiSelectRef.current) ? 'bottom-end' : 'bottom-start') as Placement,
+      modifiers: [
+        {
+          name: 'preventOverflow',
+          options: {
+            boundary: 'clippingParents',
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 2],
+          },
+        },
+      ],
+    }
+
     useEffect(() => {
       setOptions(options)
 
@@ -271,8 +290,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         nativeSelectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
       }
 
-      if (popper.current) {
-        popper.current.update()
+      if (popper) {
+        popper.update()
       }
     }, [JSON.stringify(selected)])
 
@@ -283,7 +302,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyUp)
 
-        initPopper()
+        togglerRef.current &&
+          dropdownRef.current &&
+          initPopper(togglerRef.current, dropdownRef.current, popperConfig)
         searchRef.current && searchRef.current.focus()
       }
 
@@ -301,36 +322,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       isInitialMount.current = false
     }, [])
 
-    const initPopper = () => {
-      if (togglerRef.current && dropdownRef.current) {
-        popper.current = createPopper(togglerRef.current, dropdownRef.current, {
-          placement: isRTL(multiSelectRef.current) ? 'bottom-end' : 'bottom-start',
-          modifiers: [
-            {
-              name: 'preventOverflow',
-              options: {
-                boundary: 'clippingParents',
-              },
-            },
-            {
-              name: 'offset',
-              options: {
-                offset: [0, 2],
-              },
-            },
-          ],
-        })
-      }
-    }
-
-    const destroyPopper = () => {
-      if (popper.current) {
-        popper.current.destroy()
-      }
-
-      popper.current = undefined
-    }
-
     const handleKeyUp = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setVisible(false)

package/src/components/picker/CPicker.tsx

@@ -2,9 +2,9 @@ import React, { forwardRef, HTMLAttributes, ReactNode, useEffect, useRef, useSta
 
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { createPopper, Instance } from '@popperjs/core'
+import { Placement } from '@popperjs/core'
 
-import { useForkedRef } from '../../hooks'
+import { useForkedRef, usePopper } from '../../hooks'
 import { isRTL } from '../../utils'
 
 export interface CPickerProps extends HTMLAttributes<HTMLDivElement> {
@@ -68,10 +68,28 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
     const dropdownRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef<HTMLDivElement>(null)
 
-    const popper = useRef<Instance>()
+    const { initPopper, destroyPopper } = usePopper()
 
     const [_visible, setVisible] = useState(visible)
 
+    const popperConfig = {
+      placement: (isRTL(pickerRef.current) ? 'bottom-end' : 'bottom-start') as Placement,
+      modifiers: [
+        {
+          name: 'preventOverflow',
+          options: {
+            boundary: 'clippingParents',
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 2],
+          },
+        },
+      ],
+    }
+
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -83,7 +101,9 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyUp)
 
-        initPopper()
+        togglerRef.current &&
+          dropdownRef.current &&
+          initPopper(togglerRef.current, dropdownRef.current, popperConfig)
       }
 
       return () => {
@@ -96,36 +116,6 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
       }
     }, [_visible])
 
-    const initPopper = () => {
-      if (togglerRef.current && dropdownRef.current) {
-        popper.current = createPopper(togglerRef.current, dropdownRef.current, {
-          placement: isRTL(pickerRef.current) ? 'bottom-end' : 'bottom-start',
-          modifiers: [
-            {
-              name: 'preventOverflow',
-              options: {
-                boundary: 'clippingParents',
-              },
-            },
-            {
-              name: 'offset',
-              options: {
-                offset: [0, 2],
-              },
-            },
-          ],
-        })
-      }
-    }
-
-    const destroyPopper = () => {
-      if (popper.current) {
-        popper.current.destroy()
-      }
-
-      popper.current = undefined
-    }
-
     const handleKeyUp = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setVisible(false)

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.1
+   */
+  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.1
+   */
+  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.1
+   */
+  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, gradientsPropType } from '../../props'
 import type { Colors, Gradients } 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 }