@coreui/react-pro 4.8.0 → 4.9.0-next.1

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

@@ -16,11 +16,13 @@ import PropTypes from 'prop-types'
 import { CFormControlWrapper, CFormControlWrapperProps } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker/CPicker'
 
-import { CMultiSelectCleaner } from './CMultiSelectCleaner'
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
+import { filterOptionsList, flattenArray, selectOptions } from './utils'
+import type { Option, SelectedOption } from './types'
+
 export interface CMultiSelectProps
   extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
     Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -113,29 +115,6 @@ export interface CMultiSelectProps
   visibleItems?: number
 }
 
-export interface Option {
-  disabled?: boolean
-  label?: string
-  options?: Option[]
-  selected?: boolean
-  // TODO: change to label
-  text?: string
-  value?: number | string
-}
-
-export interface SelectedOption {
-  disabled?: boolean
-  text: string
-  value: number | string
-}
-
-const flattenArray = (options: Option[]): Option[] =>
-  options.reduce(
-    (acc: Option[], val: Option) =>
-      acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val),
-    [],
-  )
-
 export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
   (
     {
@@ -181,30 +160,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const [_visible, setVisible] = useState(visible)
     const [selected, setSelected] = useState<SelectedOption[]>([])
 
-    const selectOptions = (options: Option[], deselected?: Option[]) => {
-      let _selected = [...selected, ...options]
-
-      if (deselected) {
-        _selected = _selected.filter(
-          (selectedOption) =>
-            !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
-        )
-      }
-
-      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 }),
-          })
-        }
-        return unique
-      }, []) as SelectedOption[]
-
-      setSelected(deduplicated)
-    }
-
     useMemo(() => {
       setOptions(options)
       const _selected =
@@ -227,7 +182,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           return
         })
 
-      _selected && selectOptions(_selected, deselected)
+      _selected && setSelected(selectOptions(_selected, selected, deselected))
     }, [JSON.stringify(options)])
 
     useEffect(() => {
@@ -254,29 +209,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       isInitialMount.current = false
     }, [])
 
-    const filterOptionsList = (search: string, options: Option[]) => {
-      return search.length
-        ? 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)
-              ) {
-                acc.push(Object.assign({}, val, options && options.length && { options }))
-              }
-
-              return acc
-            }, [])
-        : _options
-    }
-
     const handleSearchChange = (event: FormEvent<HTMLInputElement>) => {
       const target = event.target as HTMLInputElement
       if (search !== 'external') {
@@ -315,7 +247,12 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }
 
     const handleSelectAll = () => {
-      selectOptions(flattenArray(options).filter((option: Option) => !option.disabled))
+      setSelected(
+        selectOptions(
+          flattenArray(options).filter((option: Option) => !option.disabled),
+          selected,
+        ),
+      )
     }
 
     const handleDeselectAll = () => {
@@ -366,7 +303,11 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                 selectionTypeCounterText={selectionTypeCounterText}
               />
               {multiple && cleaner && selected.length > 0 && (
-                <CMultiSelectCleaner onClick={() => handleDeselectAll()} />
+                <button
+                  type="button"
+                  className="form-multi-select-selection-cleaner"
+                  onClick={() => handleDeselectAll()}
+                ></button>
               )}
               {search && (
                 <input

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import { Option } from './CMultiSelect'
+import type { Option } from './types'
 
 export interface CMultiSelectNativeSelectProps
   extends Omit<HTMLAttributes<HTMLSelectElement>, 'options'> {

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

@@ -2,10 +2,10 @@ import React, { forwardRef, Fragment, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Option } from './CMultiSelect'
 import { CVirtualScroller } from './../virtual-scroller'
 
-import { getNextSibling, getPreviousSibling } from './../../utils'
+import { getNextSibling, getPreviousSibling } from './utils'
+import type { Option } from './types'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
   handleOptionOnClick?: (option: Option) => void

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import type { SelectedOption } from './CMultiSelect'
+import type { SelectedOption } from './types'
 
 export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
   multiple?: boolean

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

@@ -0,0 +1,15 @@
+export type Option = {
+  disabled?: boolean
+  label?: string
+  options?: Option[]
+  order?: number
+  selected?: boolean
+  text: string
+  value: number | string
+}
+
+export type SelectedOption = {
+  disabled?: boolean
+  text: string
+  value: number | string
+}

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

@@ -0,0 +1,92 @@
+import type { Option, SelectedOption } from './types'
+
+export const filterOptionsList = (search: string, _options: Option[]) => {
+  return search.length
+    ? _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)
+          ) {
+            acc.push(Object.assign({}, val, options && options.length && { options }))
+          }
+
+          return acc
+        }, [])
+    : _options
+}
+
+export const flattenArray = (options: Option[]): Option[] => {
+  return options.reduce((acc: Option[], val: Option) => {
+    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
+  }, [])
+}
+
+export const getNextSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.nextElementSibling
+  }
+
+  return
+}
+
+export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.previousElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.previousElementSibling
+  }
+
+  return
+}
+
+export const selectOptions = (
+  options: Option[],
+  selected: SelectedOption[],
+  deselected?: Option[],
+) => {
+  let _selected = [...selected, ...options]
+
+  if (deselected) {
+    _selected = _selected.filter(
+      (selectedOption) =>
+        !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
+    )
+  }
+
+  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 }),
+      })
+    }
+    return unique
+  }, []) as SelectedOption[]
+
+  return deduplicated
+}

package/src/components/nav/CNavItem.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 import { CNavLink, CNavLinkProps } from './CNavLink'
 
 export const CNavItem = forwardRef<HTMLLIElement, CNavLinkProps>(

package/src/components/nav/CNavLink.tsx

@@ -2,10 +2,11 @@ import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'r
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
-
-import { CNavContext } from '../sidebar/CSidebarNav'
 import { CLinkProps, CLink } from '../link/CLink'
+import { CNavContext } from '../sidebar/CSidebarNav'
+
+import { useForkedRef } from '../../hooks'
+
 export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
   /**
    * Toggle the active state for the component.

package/src/components/navbar/CNavbar.tsx

@@ -2,7 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/offcanvas/COffcanvas.tsx

@@ -1,17 +1,18 @@
-import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes, useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Transition } from 'react-transition-group'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
+import { useForkedRef } from '../../hooks'
+
 export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Apply a backdrop on body while offcanvas is open.
    */
-  backdrop?: boolean
+  backdrop?: boolean | 'static'
   /**
    * A string of all className you want applied to the base component.
    */
@@ -36,6 +37,12 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * Generates modal using createPortal.
    */
   portal?: boolean
+  /**
+   * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+   *
+   * @since 4.6.0
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   /**
    * Allow body scrolling while offcanvas is open
    */
@@ -56,7 +63,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       onHide,
       onShow,
       placement,
-      portal = true,
+      portal = false,
+      responsive = true,
       scroll = false,
       visible = false,
       ...rest
@@ -86,26 +94,34 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       }
     }, [_visible])
 
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'showing'
+        : state === 'entered'
+        ? 'show'
+        : state === 'exiting'
+        ? 'show hiding'
+        : ''
+    }
+
     const _className = classNames(
-      'offcanvas',
       {
+        [`offcanvas${typeof responsive !== 'boolean' ? '-' + responsive : ''}`]: responsive,
         [`offcanvas-${placement}`]: placement,
-        show: _visible,
       },
       className,
     )
 
-    const transitionStyles = {
-      entering: { visibility: 'visible' },
-      entered: { visibility: 'visible' },
-      exiting: { visibility: 'visible' },
-      exited: { visibility: 'hidden' },
-    }
-
     const handleDismiss = () => {
       setVisible(false)
     }
 
+    const handleBackdropDismiss = () => {
+      if (backdrop !== 'static') {
+        setVisible(false)
+      }
+    }
+
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'Escape' && keyboard) {
@@ -119,9 +135,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       return (
         <>
           <div
-            className={_className}
+            className={classNames(_className, getTransitionClass(state))}
             role="dialog"
-            style={{ ...transitionStyles[state] }}
             tabIndex={-1}
             onKeyDown={handleKeyDown}
             {...rest}
@@ -154,7 +169,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
             createPortal(
               <CBackdrop
                 className="offcanvas-backdrop"
-                onClick={handleDismiss}
+                onClick={handleBackdropDismiss}
                 visible={_visible}
               />,
               document.body,
@@ -162,7 +177,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
           : backdrop && (
               <CBackdrop
                 className="offcanvas-backdrop"
-                onClick={handleDismiss}
+                onClick={handleBackdropDismiss}
                 visible={_visible}
               />
             )}
@@ -172,7 +187,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
 )
 
 COffcanvas.propTypes = {
-  backdrop: PropTypes.bool,
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
   keyboard: PropTypes.bool,
@@ -181,6 +196,10 @@ COffcanvas.propTypes = {
   placement: PropTypes.oneOf<'start' | 'end' | 'top' | 'bottom'>(['start', 'end', 'top', 'bottom'])
     .isRequired,
   portal: PropTypes.bool,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
   scroll: PropTypes.bool,
   visible: PropTypes.bool,
 }

package/src/components/picker/CPicker.tsx

@@ -7,7 +7,7 @@ import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
 import { CDropdownMenu } from '../dropdown/CDropdownMenu'
 import { CDropdownToggle } from '../dropdown/CDropdownToggle'
 
-import { Colors } from '../Types'
+import { Colors } from '../../types'
 
 export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
   /**

package/src/components/placeholder/CPlaceholder.tsx

@@ -2,7 +2,8 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, colorPropType } from '../Types'
+import { colorPropType } from '../../props'
+import type { Colors } from '../../types'
 
 export interface CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
   /**

package/src/components/popover/CPopover.tsx

@@ -5,7 +5,8 @@ import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
-import { Triggers, triggerPropType } from '../Types'
+import { triggerPropType } from '../../props'
+import type { Triggers } from '../../types'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**

package/src/components/progress/CProgress.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps

package/src/components/progress/CProgressBar.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Colors, Gradients, colorPropType, gradientsPropType } from '../Types'
+import { colorPropType, gradientsPropType } from '../../props'
+import type { Colors, Gradients } from '../../types'
 
 export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/sidebar/CSidebar.tsx

@@ -3,10 +3,11 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isInViewport } from '../../utils'
-import { useForkedRef } from '../../utils/hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
+import { isInViewport } from '../../utils'
+import { useForkedRef } from '../../hooks'
+
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.