@coreui/react 4.1.2 → 4.2.2

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'

package/src/components/form/CFormSelect.tsx

@@ -1,13 +1,18 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
+
 import classNames from 'classnames'
+import PropTypes from 'prop-types'
+
+import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
 type Option = {
   disabled?: boolean
   label?: string
   value?: string
 }
-export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
+export interface CFormSelectProps
+  extends CFormControlWrapperProps,
+    Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -16,10 +21,6 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
    * Specifies the number of visible options in a drop-down list.
    */
   htmlSize?: number
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
   /**
    * Method called immediately after the `value` prop changes.
    */
@@ -35,20 +36,36 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
    * Size the component small or large.
    */
   size?: 'sm' | 'lg'
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
   /**
    * The `value` attribute of component.
    *
    * @controllable onChange
-   * */
+   */
   value?: string | string[] | number
 }
 
 export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
-  ({ children, className, htmlSize, invalid, options, size, valid, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingLabel,
+      htmlSize,
+      id,
+      invalid,
+      label,
+      options,
+      size,
+      text,
+      tooltipFeedback,
+      valid,
+      ...rest
+    },
+    ref,
+  ) => {
     const _className = classNames(
       'form-select',
       {
@@ -59,34 +76,45 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
       className,
     )
     return (
-      <select className={_className} size={htmlSize} {...rest} ref={ref}>
-        {options
-          ? options.map((option, index) => {
-              return (
-                <option
-                  {...(typeof option === 'object' &&
-                    option.disabled && { disabled: option.disabled })}
-                  {...(typeof option === 'object' && option.value && { value: option.value })}
-                  key={index}
-                >
-                  {typeof option === 'string' ? option : option.label}
-                </option>
-              )
-            })
-          : children}
-      </select>
+      <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}
+      >
+        <select id={id} className={_className} size={htmlSize} {...rest} ref={ref}>
+          {options
+            ? options.map((option, index) => {
+                return (
+                  <option
+                    {...(typeof option === 'object' &&
+                      option.disabled && { disabled: option.disabled })}
+                    {...(typeof option === 'object' && option.value && { value: option.value })}
+                    key={index}
+                  >
+                    {typeof option === 'string' ? option : option.label}
+                  </option>
+                )
+              })
+            : children}
+        </select>
+      </CFormControlWrapper>
     )
   },
 )
 
 CFormSelect.propTypes = {
-  children: PropTypes.node,
   className: PropTypes.string,
   htmlSize: PropTypes.number,
-  invalid: PropTypes.bool,
   options: PropTypes.array,
-  size: PropTypes.oneOf(['sm', 'lg']),
-  valid: PropTypes.bool,
+  ...CFormControlWrapper.propTypes,
 }
 
 CFormSelect.displayName = 'CFormSelect'

package/src/components/form/CFormTextarea.tsx

@@ -1,8 +1,13 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
+
 import classNames from 'classnames'
+import PropTypes from 'prop-types'
 
-export interface CFormTextareaProps extends InputHTMLAttributes<HTMLTextAreaElement> {
+import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
+
+export interface CFormTextareaProps
+  extends CFormControlWrapperProps,
+    InputHTMLAttributes<HTMLTextAreaElement> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -11,10 +16,6 @@ export interface CFormTextareaProps extends InputHTMLAttributes<HTMLTextAreaElem
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
-  /**
-   * Set component validation state to invalid.
-   */
-  invalid?: boolean
   /**
    * Method called immediately after the `value` prop changes.
    */
@@ -27,10 +28,6 @@ export interface CFormTextareaProps extends InputHTMLAttributes<HTMLTextAreaElem
    * Toggle the readonly state for the component.
    */
   readOnly?: boolean
-  /**
-   * Set component validation state to valid.
-   */
-  valid?: boolean
   /**
    * The `value` attribute of component.
    *
@@ -40,7 +37,25 @@ export interface CFormTextareaProps extends InputHTMLAttributes<HTMLTextAreaElem
 }
 
 export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>(
-  ({ children, className, invalid, plainText, valid, ...rest }, ref) => {
+  (
+    {
+      children,
+      className,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingLabel,
+      id,
+      invalid,
+      label,
+      plainText,
+      text,
+      tooltipFeedback,
+      valid,
+      ...rest
+    },
+    ref,
+  ) => {
     const _className = classNames(
       plainText ? 'form-control-plaintext' : 'form-control',
       {
@@ -50,19 +65,32 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
       className,
     )
     return (
-      <textarea className={_className} {...rest} ref={ref}>
-        {children}
-      </textarea>
+      <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}
+      >
+        <textarea className={_className} id={id} {...rest} ref={ref}>
+          {children}
+        </textarea>
+      </CFormControlWrapper>
     )
   },
 )
 
 CFormTextarea.propTypes = {
-  children: PropTypes.node,
   className: PropTypes.string,
-  invalid: PropTypes.bool,
+  id: PropTypes.string,
   plainText: PropTypes.bool,
-  valid: PropTypes.bool,
+  ...CFormControlWrapper.propTypes,
 }
 
 CFormTextarea.displayName = 'CFormTextarea'