@coreui/react-pro 5.0.0-alpha.2 → 5.0.0-beta.0

package/src/components/conditional-portal/CConditionalPortal.tsx

@@ -1,21 +1,45 @@
-import React, { FC, ReactNode } from 'react'
+import React, { FC, ReactNode, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 
+const getContainer = (container?: Element | (() => Element | null) | null) => {
+  if (container) {
+    return typeof container === 'function' ? container() : container
+  }
+
+  return document.body
+}
+
 export interface CConditionalPortalProps {
   /**
    * @ignore
    */
   children: ReactNode
+  /**
+   * An HTML element or function that returns a single element, with `document.body` as the default.
+   * 
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Render some children into a different part of the DOM
    */
-  portal: boolean
+  portal: boolean | any
 }
 
-export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, portal }) => {
-  return typeof window !== 'undefined' && portal ? (
-    createPortal(children, document.body)
+export const CConditionalPortal: FC<CConditionalPortalProps> = ({
+  children,
+  container,
+  portal,
+}) => {
+  const [_container, setContainer] = useState<ReturnType<typeof getContainer>>(null)
+
+  useEffect(() => {
+    portal && setContainer(getContainer(container) || document.body)
+  }, [container, portal])
+
+  return typeof window !== 'undefined' && portal && _container ? (
+    createPortal(children, _container)
   ) : (
     <>{children}</>
   )
@@ -23,7 +47,8 @@ export const CConditionalPortal: FC<CConditionalPortalProps> = ({ children, port
 
 CConditionalPortal.propTypes = {
   children: PropTypes.node,
-  portal: PropTypes.bool.isRequired,
+  container: PropTypes.any, // HTMLElement
+  portal: PropTypes.bool,
 }
 
 CConditionalPortal.displayName = 'CConditionalPortal'

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react'
 
 import classNames from 'classnames'
-import { format as dateFormat } from 'date-fns'
 import PropTypes from 'prop-types'
 import { isMobile } from 'react-device-detect'
 
@@ -11,6 +10,7 @@ import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormCont
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
+import { useDebouncedCallback } from '../../hooks'
 import { Colors } from '../../types'
 import { getLocalDateFromString } from './utils'
 
@@ -84,11 +84,6 @@ export interface CDateRangePickerProps
    * Set the confirm button variant to an outlined button or a ghost button.
    */
   confirmButtonVariant?: 'outline' | 'ghost'
-  /**
-   * Set date format.
-   * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
-   */
-  format?: string
   /**
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    *
@@ -101,6 +96,24 @@ export interface CDateRangePickerProps
    * Toggle visibility or set the content of the input indicator.
    */
   indicator?: ReactNode | boolean
+  /**
+   * Custom function to format the selected date into a string according to a custom format.
+   * 
+   * @since v5.0.0-alpha.4
+   */
+  inputDateFormat?: (date: Date) => string
+  /**
+   * Custom function to parse the input value into a valid Date object.
+   * 
+   * @since v5.0.0-alpha.4
+   */
+  inputDateParse?: (date: string | Date) => Date
+  /**
+   * Defines the delay (in milliseconds) for the input field's onChange event.
+   * 
+   * @since v5.0.0-alpha.4
+   */
+  inputOnChangeDelay?: number
   /**
    * Toggle the readonly state for the component.
    */
@@ -190,7 +203,6 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       confirmButtonColor = 'primary',
       confirmButtonSize = 'sm',
       confirmButtonVariant,
-      indicator = true,
       dayFormat,
       disabled,
       disabledDates,
@@ -199,9 +211,12 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       feedbackInvalid,
       feedbackValid,
       firstDayOfWeek,
-      format,
       footer,
       id,
+      indicator = true,
+      inputDateFormat,
+      inputDateParse,
+      inputOnChangeDelay = 750,
       inputReadOnly,
       invalid,
       label,
@@ -239,6 +254,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       valid,
       visible,
       weekdayFormat,
+      weekNumbersLabel,
       ...rest
     },
     ref,
@@ -268,17 +284,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     }, [valid, invalid])
 
     useEffect(() => {
-      if (startDate) {
-        setStartDate(startDate)
-        setCalendarDate(startDate)
-      }
+      setStartDate(startDate ? startDate : null)
+      setCalendarDate(startDate ? startDate : null)
     }, [startDate])
 
     useEffect(() => {
-      if (endDate) {
-        setEndDate(endDate)
-        setCalendarDate(endDate)
-      }
+      setEndDate(endDate ? endDate : null)
+      range && setCalendarDate(endDate ? endDate : null)
     }, [endDate])
 
     useEffect(() => {
@@ -327,14 +339,14 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       if (selectionType !== 'day') {
         return date
       }
-  
+
       const _date = new Date(date)
-  
-      return format ?
-        dateFormat(_date, format) :
-        timepicker ?
-          _date.toLocaleString(locale) :
-          _date.toLocaleDateString(locale)
+
+      return inputDateFormat
+        ? inputDateFormat(_date)
+        : timepicker
+        ? _date.toLocaleString(locale)
+        : _date.toLocaleDateString(locale)
     }
 
     const setInputValue = (el: HTMLInputElement | null, date: Date | string | null) => {
@@ -343,7 +355,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
 
       if (date) {
-        el.value = formatDate(date)
+        el.value = formatDate(date) as string
         return
       }
 
@@ -363,7 +375,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const handleEndDateChange = (date: Date | string | null) => {
       setEndDate(date)
       setInputEndHoverValue(null)
-      onEndDateChange && onEndDateChange(date, date ? formatDate(date) : undefined)
+      onEndDateChange && onEndDateChange(date)
 
       if (timepicker || footer) {
         return
@@ -389,7 +401,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
     const handleStartDateChange = (date: Date | string | null) => {
       setStartDate(date)
       setInputStartHoverValue(null)
-      onStartDateChange && onStartDateChange(date, date ? formatDate(date) : undefined)
+      onStartDateChange && onStartDateChange(date)
 
       if (timepicker || footer) {
         return
@@ -400,6 +412,16 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       }
     }
 
+    const handleOnChange = useDebouncedCallback((value: string, input: string) => {
+      const date = inputDateParse
+        ? inputDateParse(value)
+        : getLocalDateFromString(value, locale, timepicker)
+      if (date instanceof Date && date.getTime()) {
+        setCalendarDate(date)
+        input === 'start' ? setStartDate(date) : setEndDate(date)
+      }
+    }, inputOnChangeDelay)
+
     const InputGroup = () => (
       <div className="date-picker-input-group">
         <input
@@ -407,18 +429,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           className={classNames('date-picker-input', {
             hover: inputStartHoverValue,
           })}
-          // delay={true} TODO
           disabled={disabled}
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
-          readOnly={inputReadOnly || typeof format === 'string'}
+          readOnly={inputReadOnly}
           required={required}
           onChange={(event) => {
-            const date = getLocalDateFromString(event.target.value, locale, timepicker)
-            if (date instanceof Date && date.getTime()) {
-              setCalendarDate(date)
-              setStartDate(date)
-            }
+            handleOnChange(event.target.value, 'start')
           }}
           onClick={() => setSelectEndDate(false)}
           ref={inputStartRef}
@@ -430,18 +447,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             className={classNames('date-picker-input', {
               hover: inputEndHoverValue,
             })}
-            // delay={true} TODO
             disabled={disabled}
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
-            readOnly={inputReadOnly || typeof format === 'string'}
+            readOnly={inputReadOnly}
             required={required}
             onChange={(event) => {
-              const date = getLocalDateFromString(event.target.value, locale, timepicker)
-              if (date instanceof Date && date.getTime()) {
-                setCalendarDate(date)
-                setEndDate(date)
-              }
+              handleOnChange(event.target.value, 'end')
             }}
             onClick={() => setSelectEndDate(true)}
             ref={inputEndRef}
@@ -559,8 +571,8 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
                     color={rangesButtonsColor}
                     key={index}
                     onClick={() => {
-                      handleStartDateChange(ranges[key][0])
-                      handleEndDateChange(ranges[key][1])
+                      handleStartDateChange((ranges as { [key: string]: Date[] })[key][0])
+                      handleEndDateChange((ranges as { [key: string]: Date[] })[key][1])
                     }}
                     size={rangesButtonsSize}
                     variant={rangesButtonsVariant}
@@ -590,12 +602,13 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               showAdjacementDays={showAdjacementDays}
               showWeekNumber={showWeekNumber}
               startDate={_startDate}
+              weekdayFormat={weekdayFormat}
+              weekNumbersLabel={weekNumbersLabel}
               onDateHover={(date) => handleDateHover(date)}
               onCalendarDateChange={(date) => setCalendarDate(date)}
               onStartDateChange={(date) => handleStartDateChange(date)}
               onEndDateChange={(date) => handleEndDateChange(date)}
               onSelectEndChange={(value) => setSelectEndDate(value)}
-              weekdayFormat={weekdayFormat}
             />
             {timepicker && (
               <div className="date-picker-timepickers">
@@ -676,6 +689,9 @@ CDateRangePicker.propTypes = {
   confirmButtonVariant: CButton.propTypes?.variant,
   id: PropTypes.string,
   indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  inputDateFormat: PropTypes.func,
+  inputDateParse: PropTypes.func,
+  inputOnChangeDelay: PropTypes.number,
   inputReadOnly: PropTypes.bool,
   placeholder: PropTypes.oneOfType([
     PropTypes.string,

package/src/components/dropdown/CDropdown.tsx

@@ -16,17 +16,8 @@ import { placementPropType } from '../../props'
 import type { Placements } from '../../types'
 import { isRTL } from '../../utils'
 
-export type Directions = 'start' | 'end'
-
-export type Breakpoints =
-  | { xs: Directions }
-  | { sm: Directions }
-  | { md: Directions }
-  | { lg: Directions }
-  | { xl: Directions }
-  | { xxl: Directions }
-
-export type Alignments = Directions | Breakpoints
+import type { Alignments, Directions } from './types'
+import { getNextActiveElement, getPlacement } from './utils'
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
@@ -51,6 +42,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * Component used for the root node. Either a string to use a HTML element or a component.
    */
   component?: string | ElementType
+  /**
+   * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   *
+   * @since v4.11.0
+   */
+  container?: Element | (() => Element | null) | null
   /**
    * Sets a darker color scheme to match a dark navbar.
    */
@@ -107,59 +104,6 @@ interface ContextProps extends CDropdownProps {
   portal: boolean
 }
 
-export const getNextActiveElement = (
-  list: HTMLElement[],
-  activeElement: HTMLElement,
-  shouldGetNext: boolean,
-  isCycleAllowed: boolean,
-) => {
-  const listLength = list.length
-  let index = list.indexOf(activeElement)
-
-  if (index === -1) {
-    return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0]
-  }
-
-  index += shouldGetNext ? 1 : -1
-
-  if (isCycleAllowed) {
-    index = (index + listLength) % listLength
-  }
-
-  return list[Math.max(0, Math.min(index, listLength - 1))]
-}
-
-const getPlacement = (
-  placement: Placements,
-  direction: CDropdownProps['direction'],
-  alignment: CDropdownProps['alignment'],
-  isRTL: boolean,
-): Placements => {
-  let _placement = placement
-
-  if (direction === 'dropup') {
-    _placement = isRTL ? 'top-end' : 'top-start'
-  }
-
-  if (direction === 'dropup-center') {
-    _placement = 'top'
-  }
-
-  if (direction === 'dropend') {
-    _placement = isRTL ? 'left-start' : 'right-start'
-  }
-
-  if (direction === 'dropstart') {
-    _placement = isRTL ? 'right-start' : 'left-start'
-  }
-
-  if (alignment === 'end') {
-    _placement = isRTL ? 'bottom-start' : 'bottom-end'
-  }
-
-  return _placement
-}
-
 export const CDropdownContext = createContext({} as ContextProps)
 
 export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownProps>(
@@ -169,6 +113,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       alignment,
       autoClose = true,
       className,
+      container,
       dark,
       direction,
       offset = [0, 2],
@@ -201,6 +146,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      container,
       dark,
       dropdownToggleRef,
       dropdownMenuRef,
@@ -251,15 +197,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     }, [_visible])
 
     const handleKeydown = (event: KeyboardEvent) => {
-      if (_visible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
-        const target = event.target as HTMLElement
+      if (_visible && dropdownMenuRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
         event.preventDefault()
-        const items = [].concat(
-          ...Element.prototype.querySelectorAll.call(
-            dropdownMenuRef.current,
-            '.dropdown-item:not(.disabled):not(:disabled)',
-          ),
-        )
+        const target = event.target as HTMLElement
+        const items: HTMLElement[] = Array.from(dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'))
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
     }

package/src/components/dropdown/CDropdownMenu.tsx

@@ -2,11 +2,14 @@ import React, { ElementType, forwardRef, HTMLAttributes, useContext } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Alignments, CDropdownContext } from './CDropdown'
+import { CDropdownContext } from './CDropdown'
 import { CConditionalPortal } from '../conditional-portal'
 
 import { useForkedRef } from '../../hooks'
 
+import { getAlignmentClassNames } from './utils'
+
+
 export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -18,37 +21,22 @@ export interface CDropdownMenuProps extends HTMLAttributes<HTMLDivElement | HTML
   component?: string | ElementType
 }
 
-const alignmentClassNames = (alignment: Alignments) => {
-  const classNames: string[] = []
-  if (typeof alignment === 'object') {
-    Object.keys(alignment).map((key) => {
-      classNames.push(`dropdown-menu${key === 'xs' ? '' : `-${key}`}-${alignment[key]}`)
-    })
-  }
-
-  if (typeof alignment === 'string') {
-    classNames.push(`dropdown-menu-${alignment}`)
-  }
-
-  return classNames
-}
-
 export const CDropdownMenu = forwardRef<HTMLDivElement | HTMLUListElement, CDropdownMenuProps>(
   ({ children, className, component: Component = 'ul', ...rest }, ref) => {
-    const { alignment, dark, dropdownMenuRef, popper, portal, visible } =
+    const { alignment, container, dark, dropdownMenuRef, popper, portal, visible } =
       useContext(CDropdownContext)
 
     const forkedRef = useForkedRef(ref, dropdownMenuRef)
 
     return (
-      <CConditionalPortal portal={portal ?? false}>
+      <CConditionalPortal container={container} portal={portal ?? false}>
         <Component
           className={classNames(
             'dropdown-menu',
             {
               show: visible,
             },
-            alignment && alignmentClassNames(alignment),
+            alignment && getAlignmentClassNames(alignment),
             className,
           )}
           ref={forkedRef}

package/src/components/dropdown/CDropdownToggle.tsx

@@ -18,6 +18,12 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Create a custom toggler which accepts any content.
    */
   custom?: boolean
+  /**
+   * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
+   * 
+   * @since v5.0.0-beta.0
+   */
+  navLink?: boolean
   /**
    * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
    */
@@ -35,11 +41,12 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   caret = true,
   custom,
   className,
+  navLink = true,
   split,
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
@@ -57,6 +64,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const togglerProps = {
     className: classNames(
       {
+        'nav-link': variant === 'nav-item' && navLink,
         'dropdown-toggle': caret,
         'dropdown-toggle-split': split,
         show: visible,
@@ -80,6 +88,14 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
       )
     }
 
+    if (variant === 'nav-item' && navLink) {
+      return (
+        <a href="#" {...togglerProps} role="button" ref={dropdownToggleRef}>
+          {children}
+        </a>
+      )
+    }
+
     return (
       <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
         {children}

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import {
   CDropdown,
   CDropdownToggle,
@@ -37,7 +37,6 @@ test('CDropdown customize', async () => {
   expect(container.firstChild).toHaveClass('nav-item')
   expect(container.firstChild).toHaveClass('dropdown')
   expect(container.firstChild).toHaveClass('dropstart')
-  expect(container.firstChild).toHaveClass('show')
 })
 
 test('CDropdown change visible prop', async () => {

package/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CDropdownDivider } from '../../../index'
 
 test('loads and displays CDropdownDivider component', async () => {

package/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CDropdownHeader } from '../../../index'
 
 test('loads and displays CDropdownHeader component', async () => {

package/src/components/dropdown/__tests__/CDropdownItem.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CDropdownItem } from '../../../index'
 
 test('loads and displays CDropdownItem component', async () => {

package/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CDropdownItemPlain } from '../../../index'
 
 test('loads and displays CDropdownItemPlain component', async () => {

package/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CDropdown, CDropdownMenu } from '../../../index'
 
 test('loads and displays CDropdownMenu component', async () => {

package/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CDropdownToggle } from '../../../index'
 
 test('loads and displays CDropdownToggle component', async () => {

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CDropdown customize 1`] = `
 <div>
   <li
-    class="nav-item dropdown direction show bazinga"
+    class="nav-item dropdown dropstart bazinga"
   >
     Test
   </li>

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CDropdownMenu customize 1`] = `
 <div>
   <div
-    class="btn-group show"
+    class="btn-group"
   >
     <div
       aria-hidden="false"

package/src/components/dropdown/types.ts

@@ -0,0 +1,11 @@
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+  | { xs: Directions }
+  | { sm: Directions }
+  | { md: Directions }
+  | { lg: Directions }
+  | { xl: Directions }
+  | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints