@coreui/react-pro 4.1.4 → 4.2.0-rc.0

package/src/components/daterangepicker/index.ts

@@ -0,0 +1,3 @@
+import { CDateRangePicker } from './CDateRangePicker'
+
+export { CDateRangePicker }

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -33,6 +34,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+  /**
+   * Configure the auto close behavior of the dropdown:
+   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   */
+  autoClose?: 'inside' | 'outside' | boolean
   /**
    * A string of all className you want applied to the base component.
    */
@@ -80,6 +89,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 }
 
 interface ContextProps extends CDropdownProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
 }
 
@@ -90,6 +101,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     {
       children,
       alignment,
+      autoClose = true,
       className,
       dark,
       direction,
@@ -106,6 +118,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
   ) => {
     const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
+    const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
 
     const Component = variant === 'nav-item' ? 'li' : component
@@ -117,8 +130,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      autoClose,
       dark,
       direction: direction,
+      dropdownToggleRef,
       placement: placement,
       popper,
       variant,
@@ -135,19 +150,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       className,
     )
 
-    useEffect(() => {
-      _visible &&
-        setTimeout(() => {
-          window.addEventListener('mouseup', handleClickOutside)
-          window.addEventListener('keyup', handleKeyup)
-        })
-
-      return () => {
-        window.removeEventListener('mouseup', handleClickOutside)
-        window.removeEventListener('keyup', handleKeyup)
-      }
-    }, [_visible])
-
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -157,17 +159,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const handleKeyup = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-    const handleClickOutside = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-
     const dropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
@@ -203,6 +194,10 @@ CDropdown.propTypes = {
     PropTypes.shape({ xl: alignmentDirection }),
     PropTypes.shape({ xxl: alignmentDirection }),
   ]),
+  autoClose: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
+  ]),
   children: PropTypes.node,
   className: PropTypes.string,
   component: PropTypes.elementType,

package/src/components/dropdown/CDropdownItem.tsx

@@ -21,7 +21,7 @@ export const CDropdownItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, C
     const _className = classNames('dropdown-item', className)
 
     return (
-      <CLink component={component} {...rest} className={_className} ref={ref}>
+      <CLink className={_className} component={component} {...rest} ref={ref}>
         {children}
       </CLink>
     )

package/src/components/dropdown/CDropdownMenu.tsx

@@ -1,5 +1,5 @@
+import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
-import React, { ElementType, FC, HTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -35,19 +35,69 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   component: Component = 'ul',
   ...rest
 }) => {
-  const { alignment, dark, direction, placement, popper, visible } = useContext(CDropdownContext)
+  const {
+    alignment,
+    autoClose,
+    dark,
+    direction,
+    dropdownToggleRef,
+    placement,
+    popper,
+    visible,
+    setVisible,
+  } = useContext(CDropdownContext)
+
+  const dropdownMenuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    visible && window.addEventListener('mouseup', handleMouseUp)
+    visible && window.addEventListener('keyup', handleKeyup)
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+    }
+  }, [visible])
+
+  const handleKeyup = (event: KeyboardEvent) => {
+    if (autoClose === false) {
+      return
+    }
+
+    if (event.key === 'Escape') {
+      setVisible(false)
+    }
+  }
+
+  const handleMouseUp = (event: Event) => {
+    if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      return
+    }
+
+    if (
+      autoClose === true ||
+      (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) ||
+      (autoClose === 'outside' && !dropdownMenuRef.current?.contains(event.target as HTMLElement))
+    ) {
+      setTimeout(() => setVisible(false), 1)
+      return
+    }
+  }
 
   let _placement: Placements = placement
 
   if (direction === 'dropup') {
     _placement = 'top-start'
   }
+
   if (direction === 'dropend') {
     _placement = 'right-start'
   }
+
   if (direction === 'dropstart') {
     _placement = 'left-start'
   }
+
   if (alignment === 'end') {
     _placement = 'bottom-end'
   }
@@ -101,7 +151,9 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   return popper && visible ? (
-    <Popper placement={_placement}>{({ ref, style }) => dropdownMenuComponent(style, ref)}</Popper>
+    <Popper innerRef={dropdownMenuRef} placement={_placement}>
+      {({ ref, style }) => dropdownMenuComponent(style, ref)}
+    </Popper>
   ) : (
     dropdownMenuComponent()
   )

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
+import { useForkedRef } from '../../utils/hooks'
+
 import { Triggers, triggerPropType } from '../Types'
 
 import { CButton, CButtonProps } from '../button/CButton'
@@ -13,6 +15,10 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Enables pseudo element caret on toggler.
    */
   caret?: boolean
+  /**
+   * Create a custom toggler which accepts any content.
+   */
+  custom?: 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.
    */
@@ -28,12 +34,13 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
 export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   children,
   caret = true,
+  custom,
   className,
   split,
   trigger = 'click',
   ...rest
 }) => {
-  const { popper, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
   const _className = classNames(
     {
       'dropdown-toggle': caret,
@@ -59,31 +66,47 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const togglerProps = {
     className: _className,
     'aria-expanded': visible,
+    ...(!rest.disabled && { ...triggers }),
     ...triggers,
   }
 
   // We use any because Toggler can be `a` as well as `button`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Toggler = (ref?: React.Ref<any>) => {
-    return variant === 'nav-item' ? (
-      <a href="#" {...togglerProps} ref={ref}>
+    return custom && React.isValidElement(children) ? (
+      <>
+        {React.cloneElement(children, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: useForkedRef(ref, dropdownToggleRef),
+        })}
+      </>
+    ) : variant === 'nav-item' ? (
+      <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
         {children}
       </a>
     ) : (
-      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={ref}>
+      <CButton
+        type="button"
+        {...togglerProps}
+        tabIndex={0}
+        {...rest}
+        ref={useForkedRef(ref, dropdownToggleRef)}
+      >
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>
     )
   }
 
-  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler(dropdownToggleRef)
 }
 
 CDropdownToggle.propTypes = {
   caret: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  custom: PropTypes.bool,
   split: PropTypes.bool,
   trigger: triggerPropType,
 }

package/src/components/dropdown/index.ts

@@ -0,0 +1,17 @@
+import { CDropdown } from './CDropdown'
+import { CDropdownDivider } from './CDropdownDivider'
+import { CDropdownHeader } from './CDropdownHeader'
+import { CDropdownItem } from './CDropdownItem'
+import { CDropdownItemPlain } from './CDropdownItemPlain'
+import { CDropdownMenu } from './CDropdownMenu'
+import { CDropdownToggle } from './CDropdownToggle'
+
+export {
+  CDropdown,
+  CDropdownDivider,
+  CDropdownHeader,
+  CDropdownItem,
+  CDropdownItemPlain,
+  CDropdownMenu,
+  CDropdownToggle,
+}

package/src/components/footer/index.ts

@@ -0,0 +1,3 @@
+import { CFooter } from './CFooter'
+
+export { CFooter }

package/src/components/form/CForm.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, FormHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-export interface CFormProps extends HTMLAttributes<HTMLFormElement> {
+export interface CFormProps extends FormHTMLAttributes<HTMLFormElement> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/form/CFormCheck.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { useForkedRef } from '../../utils/hooks'
 import { Colors, Shapes } from '../Types'
 
+import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
 import { CFormLabel } from './CFormLabel'
 
 export type ButtonObject = {
@@ -30,7 +31,9 @@ export type ButtonObject = {
   variant?: 'outline' | 'ghost'
 }
 
-export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface CFormCheckProps
+  extends CFormControlValidationProps,
+    InputHTMLAttributes<HTMLInputElement> {
   /**
    * Create button-like checkboxes and radio buttons.
    */
@@ -78,6 +81,11 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
     {
       className,
       button,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingLabel,
+      tooltipFeedback,
       hitArea,
       id,
       indeterminate,
@@ -131,6 +139,19 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       return <input type={type} className={inputClassName} id={id} {...rest} ref={forkedRef} />
     }
 
+    const formValidation = () => (
+      <CFormControlValidation
+        describedby={rest['aria-describedby']}
+        feedback={feedback}
+        feedbackInvalid={feedbackInvalid}
+        feedbackValid={feedbackValid}
+        floatingLabel={floatingLabel}
+        invalid={invalid}
+        tooltipFeedback={tooltipFeedback}
+        valid={valid}
+      />
+    )
+
     const formLabel = () => {
       return (
         <CFormLabel customClassName={labelClassName} {...(id && { htmlFor: id })}>
@@ -143,17 +164,22 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
       <>
         {formControl()}
         {label && formLabel()}
+        {formValidation()}
       </>
     ) : label ? (
       hitArea ? (
-        <CFormLabel customClassName={className} {...(id && { htmlFor: id })}>
-          {formControl()}
-          {label}
-        </CFormLabel>
+        <>
+          <CFormLabel customClassName={className} {...(id && { htmlFor: id })}>
+            {formControl()}
+            {label}
+          </CFormLabel>
+          {formValidation()}
+        </>
       ) : (
         <div className={_className}>
           {formControl()}
           {formLabel()}
+          {formValidation()}
         </div>
       )
     ) : (
@@ -169,10 +195,9 @@ CFormCheck.propTypes = {
   id: PropTypes.string,
   indeterminate: PropTypes.bool,
   inline: PropTypes.bool,
-  invalid: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   type: PropTypes.oneOf(['checkbox', 'radio']),
-  valid: PropTypes.bool,
+  ...CFormControlValidation.propTypes,
 }
 
 CFormCheck.displayName = 'CFormCheck'

package/src/components/form/CFormControlValidation.tsx

@@ -0,0 +1,97 @@
+import React, { FC, ReactNode } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { CFormFeedback } from './CFormFeedback'
+
+export interface CFormControlValidationProps {
+  /**
+   * @ignore
+   */
+  describedby?: string
+  /**
+   * Provide valuable, actionable feedback.
+   *
+   * @since 4.2.0
+   */
+  feedback?: ReactNode | string
+  /**
+   * Provide valuable, actionable feedback.
+   *
+   * @since 4.2.0
+   */
+  feedbackInvalid?: ReactNode | string
+  /**
+   * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+   *
+   * @since 4.2.0
+   */
+  feedbackValid?: ReactNode | string
+  /**
+   * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+   *
+   * @since 4.2.0
+   */
+  floatingLabel?: ReactNode | string
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean
+  /**
+   * Display validation feedback in a styled tooltip.
+   *
+   * @since 4.2.0
+   */
+  tooltipFeedback?: boolean
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean
+}
+
+export const CFormControlValidation: FC<CFormControlValidationProps> = ({
+  describedby,
+  feedback,
+  feedbackInvalid,
+  feedbackValid,
+  invalid,
+  tooltipFeedback,
+  valid,
+}) => {
+  return (
+    <>
+      {feedback && (valid || invalid) && (
+        <CFormFeedback
+          {...(invalid && { id: describedby })}
+          invalid={invalid}
+          tooltip={tooltipFeedback}
+          valid={valid}
+        >
+          {feedback}
+        </CFormFeedback>
+      )}
+      {feedbackInvalid && (
+        <CFormFeedback id={describedby} invalid tooltip={tooltipFeedback}>
+          {feedbackInvalid}
+        </CFormFeedback>
+      )}
+      {feedbackValid && (
+        <CFormFeedback valid tooltip={tooltipFeedback}>
+          {feedbackValid}
+        </CFormFeedback>
+      )}
+    </>
+  )
+}
+
+CFormControlValidation.propTypes = {
+  describedby: PropTypes.string,
+  feedback: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  feedbackValid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  feedbackInvalid: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  invalid: PropTypes.bool,
+  tooltipFeedback: PropTypes.bool,
+  valid: PropTypes.bool,
+}
+
+CFormControlValidation.displayName = 'CFormControlValidation'

package/src/components/form/CFormControlWrapper.tsx

@@ -0,0 +1,85 @@
+import React, { FC, ReactNode } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'
+import { CFormFloating } from './CFormFloating'
+import { CFormLabel } from './CFormLabel'
+import { CFormText } from './CFormText'
+
+export interface CFormControlWrapperProps extends CFormControlValidationProps {
+  /**
+   * @ignore
+   */
+  children?: ReactNode
+  /**
+   * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+   *
+   * @since 4.2.0
+   */
+  floatingLabel?: ReactNode | string
+  /**
+   * @ignore
+   */
+  id?: string
+  /**
+   * Add a caption for a component.
+   *
+   * @since 4.2.0
+   */
+  label?: ReactNode | string
+  /**
+   * Add helper text to the component.
+   *
+   * @since 4.2.0
+   */
+  text?: ReactNode | string
+}
+
+export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
+  children,
+  describedby,
+  feedback,
+  feedbackInvalid,
+  feedbackValid,
+  floatingLabel,
+  id,
+  invalid,
+  label,
+  text,
+  tooltipFeedback,
+  valid,
+}) => {
+  return floatingLabel ? (
+    <CFormFloating>
+      {children}
+      <CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
+    </CFormFloating>
+  ) : (
+    <>
+      {label && <CFormLabel htmlFor={id}>{label}</CFormLabel>}
+      {children}
+      {text && <CFormText id={describedby}>{text}</CFormText>}
+      <CFormControlValidation
+        describedby={describedby}
+        feedback={feedback}
+        feedbackInvalid={feedbackInvalid}
+        feedbackValid={feedbackValid}
+        floatingLabel={floatingLabel}
+        invalid={invalid}
+        tooltipFeedback={tooltipFeedback}
+        valid={valid}
+      />
+    </>
+  )
+}
+
+CFormControlWrapper.propTypes = {
+  children: PropTypes.node,
+  floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  ...CFormControlValidation.propTypes,
+}
+
+CFormControlWrapper.displayName = 'CFormControlWrapper'