@coreui/react-pro 4.2.0-beta.0 → 4.2.0

package/src/components/date-range-picker/index.ts

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

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 PropTypes from 'prop-types'
 import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -59,31 +59,28 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     }
   }, [visible])
 
-  const handleKeyup = (event: Event) => {
+  const handleKeyup = (event: KeyboardEvent) => {
     if (autoClose === false) {
       return
     }
-    if (!dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+
+    if (event.key === 'Escape') {
       setVisible(false)
     }
   }
+
   const handleMouseUp = (event: Event) => {
     if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
       return
     }
-    if (autoClose === true) {
-      setVisible(false)
-      return
-    }
-    if (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
-      setVisible(false)
-      return
-    }
+
     if (
-      autoClose === 'outside' &&
-      !dropdownMenuRef.current?.contains(event.target as HTMLElement)
+      autoClose === true ||
+      (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) ||
+      (autoClose === 'outside' && !dropdownMenuRef.current?.contains(event.target as HTMLElement))
     ) {
-      setVisible(false)
+      setTimeout(() => setVisible(false), 1)
+      return
     }
   }
 
@@ -92,12 +89,15 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   if (direction === 'dropup') {
     _placement = 'top-start'
   }
+
   if (direction === 'dropend') {
     _placement = 'right-start'
   }
+
   if (direction === 'dropstart') {
     _placement = 'left-start'
   }
+
   if (alignment === 'end') {
     _placement = 'bottom-end'
   }

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'

package/src/components/form/CFormInput.tsx

@@ -1,21 +1,26 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
+import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, useState } from 'react'
+
 import classNames from 'classnames'
-// import { CFormLabel } from './CFormLabel'
+import PropTypes from 'prop-types'
+
+import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
+import { useEffect } from 'react'
 
-export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+export interface CFormInputProps
+  extends CFormControlWrapperProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
    */
   className?: string
   /**
-   * Toggle the disabled state for the component.
+   * Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.
    */
-  disabled?: boolean
+  delay?: boolean | number
   /**
-   * Set component validation state to invalid.
+   * Toggle the disabled state for the component.
    */
-  invalid?: boolean
+  disabled?: boolean
   /**
    * Method called immediately after the `value` prop changes.
    */
@@ -36,10 +41,6 @@ export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
    * Specifies the type of component.
    */
   type?: 'color' | 'file' | 'text' | string
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
   /**
    * The `value` attribute of component.
    *
@@ -49,7 +50,40 @@ export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
 }
 
 export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
-  ({ children, className, invalid, plainText, size, type = 'text', valid, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      delay = false,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingLabel,
+      id,
+      invalid,
+      label,
+      onChange,
+      plainText,
+      size,
+      text,
+      tooltipFeedback,
+      type = 'text',
+      valid,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [value, setValue] = useState<React.ChangeEvent<HTMLInputElement>>()
+
+    useEffect(() => {
+      const timeOutId = setTimeout(
+        () => value && onChange && onChange(value),
+        typeof delay === 'number' ? delay : 500,
+      )
+
+      return () => clearTimeout(timeOutId)
+    }, [value])
+
     const _className = classNames(
       plainText ? 'form-control-plaintext' : 'form-control',
       {
@@ -60,22 +94,44 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
       },
       className,
     )
+
     return (
-      <input type={type} className={_className} {...rest} ref={ref}>
-        {children}
-      </input>
+      <CFormControlWrapper
+        describedby={rest['aria-describedby']}
+        feedback={feedback}
+        feedbackInvalid={feedbackInvalid}
+        feedbackValid={feedbackValid}
+        floatingLabel={floatingLabel}
+        id={id}
+        invalid={invalid}
+        label={label}
+        text={text}
+        tooltipFeedback={tooltipFeedback}
+        valid={valid}
+      >
+        <input
+          className={_className}
+          id={id}
+          type={type}
+          onChange={(event) => (delay ? setValue(event) : onChange && onChange(event))}
+          {...rest}
+          ref={ref}
+        >
+          {children}
+        </input>
+      </CFormControlWrapper>
     )
   },
 )
 
 CFormInput.propTypes = {
-  children: PropTypes.node,
   className: PropTypes.string,
-  invalid: PropTypes.bool,
+  id: PropTypes.string,
+  delay: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   plainText: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'lg']),
   type: PropTypes.oneOfType([PropTypes.oneOf(['color', 'file', 'text']), PropTypes.string]),
-  valid: PropTypes.bool,
+  ...CFormControlWrapper.propTypes,
 }
 
 CFormInput.displayName = 'CFormInput'

package/src/components/form/CFormRange.tsx

@@ -1,7 +1,9 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
+import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes, ReactNode } from 'react'
+
 import classNames from 'classnames'
+import PropTypes from 'prop-types'
 
+import { CFormLabel } from './CFormLabel'
 export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
   /**
    * A string of all className you want applied to the component.
@@ -11,6 +13,12 @@ export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
+  /**
+   * Add a caption for a component.
+   *
+   * @since 4.2.0
+   */
+  label?: ReactNode | string
   /**
    * Specifies the maximum value for the component.
    */
@@ -40,14 +48,20 @@ export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const CFormRange = forwardRef<HTMLInputElement, CFormRangeProps>(
-  ({ className, ...rest }, ref) => {
+  ({ className, label, ...rest }, ref) => {
     const _className = classNames('form-range', className)
-    return <input type="range" className={_className} {...rest} ref={ref} />
+    return (
+      <>
+        {label && <CFormLabel htmlFor={rest.id}>{label}</CFormLabel>}
+        <input type="range" className={_className} {...rest} ref={ref} />
+      </>
+    )
   },
 )
 
 CFormRange.propTypes = {
   className: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
 }
 
 CFormRange.displayName = 'CFormRange'