@coreui/react-pro 4.11.3 → 4.12.0-beta.0

package/src/components/multi-select/utils.ts

@@ -1,11 +1,11 @@
-import type { Option, SelectedOption } from './types'
+import type { Option, OptionsGroup, SelectedOption } from './types'
 
-export const createOption = (text: string, options: Option[]) => {
+export const createOption = (text: string, options: (Option | OptionsGroup)[]) => {
   const value = text.toLowerCase().replace(/\s/g, '-')
   let uniqueValue = value
   let i = 1
 
-  while (options.find((option) => String(option.value) === uniqueValue)) {
+  while (options.some((option) => String(option.value) === uniqueValue)) {
     uniqueValue = `${value}-${i}`
     i++
   }
@@ -19,32 +19,52 @@ export const createOption = (text: string, options: Option[]) => {
   ]
 }
 
-export const filterOptionsList = (search: string, _options: Option[]) =>
-  search.length > 0
-    ? _options &&
-      _options.reduce((acc: Option[], val: Option) => {
-        const options =
-          val.options &&
-          val.options.filter(
-            (element) => element.text && element.text.toLowerCase().includes(search.toLowerCase()),
-          )
-        if (
-          (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-          (options && options.length > 0)
-        ) {
-          acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
-        }
-
-        return acc
-      }, [])
-    : _options
-
-export const flattenArray = (options: Option[]): Option[] =>
-  options.reduce(
-    (acc: Option[], val: Option) =>
-      acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val),
-    [],
-  )
+export const filterOptionsList = (search: string, _options: (Option | OptionsGroup)[]) => {
+  if (search.length > 0 && _options) {
+    const optionsList = []
+
+    for (const option of _options) {
+      const options =
+        option.options &&
+        option.options.filter(
+          (option: Option) =>
+            option.text && option.text.toLowerCase().includes(search.toLowerCase()),
+        )
+      if (
+        (option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+        (options && options.length > 0)
+      ) {
+        optionsList.push(Object.assign({}, option, options && options.length > 0 && { options }))
+      }
+    }
+
+    return optionsList
+  }
+
+  return _options
+}
+
+export const flattenOptionsArray = (
+  options: (Option | OptionsGroup)[],
+  keepGroupLabel?: boolean,
+): (Option | OptionsGroup)[] => {
+  const optionsList: (Option | OptionsGroup)[] = []
+
+  for (const option of options) {
+    if (Array.isArray(option.options)) {
+      const { options, ...rest } = option
+      if (keepGroupLabel) {
+        optionsList.push(rest)
+      }
+
+      optionsList.push(...options)
+    } else {
+      optionsList.push(option)
+    }
+  }
+
+  return optionsList
+}
 
 export const getNextSibling = (elem: HTMLElement, selector?: string) => {
   // Get the next sibling element
@@ -81,7 +101,7 @@ export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
 }
 
 export const selectOptions = (
-  options: Option[],
+  options: (Option | OptionsGroup)[],
   selected: SelectedOption[],
   deselected?: Option[],
 ) => {
@@ -94,16 +114,13 @@ export const selectOptions = (
     )
   }
 
-  const deduplicated = _selected.reduce((unique: Option[], option) => {
-    if (!unique.some((obj) => obj.value === option.value)) {
-      unique.push({
-        value: option.value,
-        text: option.text,
-        ...(option.disabled && { disabled: option.disabled }),
-      })
+  const deduplicated: SelectedOption[] = []
+
+  for (const option of _selected) {
+    if (!deduplicated.some((obj) => obj.value === option.value)) {
+      deduplicated.push(option as SelectedOption)
     }
-    return unique
-  }, []) as SelectedOption[]
+  }
 
   return deduplicated
 }

package/src/components/picker/CPicker.tsx

@@ -1,63 +1,13 @@
-import React, { forwardRef, ReactNode, useEffect, useState } from 'react'
+import React, { forwardRef, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
+
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import { createPopper, Instance } from '@popperjs/core'
 
-import { CButton } from '../button/CButton'
-import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
-import { CDropdownMenu } from '../dropdown/CDropdownMenu'
-import { CDropdownToggle } from '../dropdown/CDropdownToggle'
-
-import { Colors } from '../../types'
+import { useForkedRef } from '../../hooks'
+import { isRTL } from '../../utils'
 
-export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
-  /**
-   * Toggle visibility or set the content of cancel button.
-   *
-   * @default 'Cancel'
-   */
-  cancelButton?: boolean | ReactNode
-  /**
-   * Sets the color context of the cancel button to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   * @default 'primary'
-   */
-  cancelButtonColor?: Colors
-  /**
-   * Size the cancel button small or large.
-   *
-   * @default 'sm'
-   */
-  cancelButtonSize?: 'sm' | 'lg'
-  /**
-   * Set the cancel button variant to an outlined button or a ghost button.
-   *
-   * @default 'ghost'
-   */
-  cancelButtonVariant?: 'outline' | 'ghost'
-  /**
-   * Toggle visibility or set the content of confirm button.
-   *
-   * @default 'OK'
-   */
-  confirmButton?: boolean | ReactNode
-  /**
-   * Sets the color context of the confirm button to one of CoreUI’s themed colors.
-   *
-   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-   * @default 'primary'
-   */
-  confirmButtonColor?: Colors
-  /**
-   * Size the confirm button small or large.
-   *
-   * @default 'sm'
-   */
-  confirmButtonSize?: 'sm' | 'lg'
-  /**
-   * Set the confirm button variant to an outlined button or a ghost button.
-   */
-  confirmButtonVariant?: 'outline' | 'ghost'
+export interface CPickerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Set container type for the component.
    */
@@ -66,6 +16,10 @@ export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
+  /**
+   * A string of all className you want applied to the dropdown menu.
+   */
+  dropdownClassNames?: string
   /**
    * Toggle visibility of footer element or set the content of footer.
    */
@@ -75,115 +29,144 @@ export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
    */
   footerContent?: ReactNode
   /**
-   * Callback fired when the cancel button has been clicked.
+   * Callback fired when the component requests to be hidden.
    */
-  onCancel?: () => void
+  onHide?: () => void
   /**
-   * Callback fired when the confirm button has been clicked.
+   * Callback fired when the component requests to be shown.
    */
-  onConfirm?: () => void
+  onShow?: () => void
   /**
    * The content of toggler.
    */
   toggler?: ReactNode
+  /**
+   * Toggle the visibility of dropdown menu component.
+   */
+  visible?: boolean
 }
 
 export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
   (
     {
       children,
-      cancelButton = 'Cancel',
-      cancelButtonColor = 'primary',
-      cancelButtonSize = 'sm',
-      cancelButtonVariant = 'ghost',
-      confirmButton = 'OK',
-      confirmButtonColor = 'primary',
-      confirmButtonSize = 'sm',
-      confirmButtonVariant,
       className,
       container = 'dropdown',
       disabled,
+      dropdownClassNames,
       footer,
       footerContent,
-      onCancel,
-      onConfirm,
       onHide,
       onShow,
-      toggler: Toggler,
+      toggler,
       visible,
-      ...rest
     },
     ref,
   ) => {
+    const pickerRef = useRef<HTMLDivElement>(null)
+    const pickerForkedRef = useForkedRef(ref, pickerRef)
+    const dropdownRef = useRef<HTMLDivElement>(null)
+    const togglerRef = useRef<HTMLDivElement>(null)
+
+    const popper = useRef<Instance>()
+
     const [_visible, setVisible] = useState(visible)
 
     useEffect(() => {
       setVisible(visible)
     }, [visible])
 
-    const Footer = () => (
-      <>
-        {footerContent}
-        {cancelButton && (
-          <CButton
-            color={cancelButtonColor}
-            size={cancelButtonSize}
-            variant={cancelButtonVariant}
-            onClick={() => onCancel && onCancel()}
-          >
-            {cancelButton}
-          </CButton>
-        )}
-        {confirmButton && (
-          <CButton
-            color={confirmButtonColor}
-            size={confirmButtonSize}
-            variant={confirmButtonVariant}
-            onClick={() => {
-              onConfirm && onConfirm()
-              setVisible(false)
-            }}
-          >
-            {confirmButton}
-          </CButton>
-        )}
-      </>
-    )
+    useEffect(() => {
+      if (container !== 'inline' && _visible) {
+        onShow && onShow()
+
+        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('keyup', handleKeyUp)
+
+        initPopper()
+      }
+
+      return () => {
+        onHide && onHide()
+
+        window.removeEventListener('mouseup', handleMouseUp)
+        window.removeEventListener('keyup', handleKeyUp)
+
+        destroyPopper()
+      }
+    }, [_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)
+      }
+    }
+
+    const handleMouseUp = (event: Event) => {
+      if (pickerRef.current && pickerRef.current.contains(event.target as HTMLElement)) {
+        return
+      }
+
+      setVisible(false)
+    }
 
     switch (container) {
       case 'inline': {
-        return <div className={classNames('picker', className)}>{children}</div>
+        return (
+          <div className={classNames('picker', className)} ref={pickerForkedRef}>
+            {children}
+          </div>
+        )
       }
       default: {
         return (
-          <CDropdown
-            autoClose="outside"
-            className={classNames('picker', className)}
-            onHide={() => {
-              setVisible(false)
-              onHide && onHide()
-            }}
-            onShow={() => {
-              setVisible(true)
-              onShow && onShow()
-            }}
-            variant="dropdown"
-            visible={_visible}
-            {...rest}
-            ref={ref}
+          <div
+            className={classNames(className, {
+              show: _visible,
+            })}
+            onClick={() => !disabled && setVisible(true)}
+            ref={pickerForkedRef}
           >
-            <CDropdownToggle custom disabled={_visible || disabled}>
-              {Toggler}
-            </CDropdownToggle>
-            <CDropdownMenu component="div">
+            {toggler &&
+              React.isValidElement(toggler) &&
+              React.cloneElement(toggler as React.ReactElement<any>, {
+                ref: togglerRef,
+              })}
+            <div className={dropdownClassNames} ref={dropdownRef}>
               {children}
-              {footer && (
-                <div className="picker-footer">
-                  {typeof footer === 'boolean' ? Footer() : footer}
-                </div>
-              )}
-            </CDropdownMenu>
-          </CDropdown>
+              {footer && footerContent}
+            </div>
+          </div>
         )
       }
     }
@@ -193,22 +176,14 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
 CPicker.displayName = 'CPicker'
 
 CPicker.propTypes = {
-  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
-  cancelButtonColor: CButton.propTypes?.color,
-  cancelButtonSize: CButton.propTypes?.size,
-  cancelButtonVariant: CButton.propTypes?.variant,
-  confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
-  confirmButtonColor: CButton.propTypes?.color,
-  confirmButtonSize: CButton.propTypes?.size,
-  confirmButtonVariant: CButton.propTypes?.variant,
   children: PropTypes.node,
   className: PropTypes.string,
   container: PropTypes.oneOf(['dropdown', 'inline']),
   disabled: PropTypes.bool,
+  dropdownClassNames: PropTypes.string,
   footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   footerContent: PropTypes.node,
-  onCancel: PropTypes.func,
-  onConfirm: PropTypes.func,
+  onHide: PropTypes.func,
+  onShow: PropTypes.func,
   toggler: PropTypes.node,
-  ...CDropdown.propTypes,
 }

package/src/components/popover/CPopover.tsx

@@ -1,14 +1,15 @@
 import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { usePopper } from 'react-popper'
+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'
 
-export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -49,6 +50,20 @@ 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,
   className,
@@ -62,33 +77,53 @@ export const CPopover: FC<CPopoverProps> = ({
   visible,
   ...rest
 }) => {
+  const popoverRef = useRef(null)
+  const togglerRef = useRef(null)
+  const popper = useRef<Instance>()
   const [_visible, setVisible] = useState(visible)
-  const popoverRef = useRef()
-
-  const [referenceElement, setReferenceElement] = useState(null)
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
-  const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null)
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    modifiers: [
-      { name: 'arrow', options: { element: arrowElement } },
-      {
-        name: 'offset',
-        options: {
-          offset: offset,
-        },
-      },
-    ],
-    placement: placement,
-  })
 
   useEffect(() => {
     setVisible(visible)
   }, [visible])
 
+  useEffect(() => {
+    if (_visible) {
+      initPopper()
+    }
+
+    return () => {
+      destroyPopper()
+    }
+  }, [_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()
+    }
+
+    popper.current = undefined
+  }
+
   return (
     <>
       {React.cloneElement(children as React.ReactElement<any>, {
-        ref: setReferenceElement,
+        ref: togglerRef,
         ...((trigger === 'click' || trigger.includes('click')) && {
           onClick: () => setVisible(!_visible),
         }),
@@ -119,20 +154,20 @@ export const CPopover: FC<CPopoverProps> = ({
               <div
                 className={classNames(
                   'popover',
-                  `bs-popover-${placement.replace('left', 'start').replace('right', 'end')}`,
+                  `bs-popover-${getPlacement(placement, togglerRef.current)
+                    .replace('left', 'start')
+                    .replace('right', 'end')}`,
                   'fade',
                   {
                     show: state === 'entered',
                   },
                   className,
                 )}
-                ref={setPopperElement}
+                ref={popoverRef}
                 role="tooltip"
-                style={styles.popper}
-                {...attributes.popper}
                 {...rest}
               >
-                <div className="popover-arrow" style={styles.arrow} ref={setArrowElement}></div>
+                <div data-popper-arrow className="popover-arrow"></div>
                 <div className="popover-header">{title}</div>
                 <div className="popover-body">{content}</div>
               </div>

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

@@ -11,10 +11,11 @@ exports[`CPopover customize 1`] = `
   <div
     class="popover bs-popover-end fade"
     role="tooltip"
-    style="position: absolute; left: 0px; top: 0px;"
+    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
   >
     <div
       class="popover-arrow"
+      data-popper-arrow="true"
       style="position: absolute;"
     />
     <div

package/src/components/progress/CProgress.tsx

@@ -29,6 +29,7 @@ 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) => {
     return (

package/src/components/sidebar/CSidebar.tsx

@@ -111,7 +111,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
       sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
 
-      window.addEventListener('resize', () => handleResize())
+      window.addEventListener('resize', handleResize)
       window.addEventListener('mouseup', handleClickOutside)
       window.addEventListener('keyup', handleKeyup)
 
@@ -121,7 +121,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
       })
 
       return () => {
-        window.removeEventListener('resize', () => handleResize())
+        window.removeEventListener('resize', handleResize)
         window.removeEventListener('mouseup', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)