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

package/src/components/form/CFormInput.tsx

@@ -1,9 +1,13 @@
 import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
-import PropTypes from 'prop-types'
+
 import classNames from 'classnames'
-// import { CFormLabel } from './CFormLabel'
+import PropTypes from 'prop-types'
 
-export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
+
+export interface CFormInputProps
+  extends CFormControlWrapperProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -12,10 +16,6 @@ export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
    * 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.
    */
@@ -36,10 +36,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 +45,27 @@ 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,
+      feedback,
+      feedbackInvalid,
+      feedbackValid,
+      floatingLabel,
+      id,
+      invalid,
+      label,
+      plainText,
+      size,
+      text,
+      tooltipFeedback,
+      type = 'text',
+      valid,
+      ...rest
+    },
+    ref,
+  ) => {
     const _className = classNames(
       plainText ? 'form-control-plaintext' : 'form-control',
       {
@@ -61,21 +77,34 @@ 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} {...rest} ref={ref}>
+          {children}
+        </input>
+      </CFormControlWrapper>
     )
   },
 )
 
 CFormInput.propTypes = {
-  children: PropTypes.node,
   className: PropTypes.string,
-  invalid: PropTypes.bool,
+  id: PropTypes.string,
   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} {...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'

package/src/components/form/index.ts

@@ -0,0 +1,29 @@
+import { CForm } from './CForm'
+import { CFormCheck } from './CFormCheck'
+import { CFormFeedback } from './CFormFeedback'
+import { CFormFloating } from './CFormFloating'
+import { CFormInput } from './CFormInput'
+import { CFormLabel } from './CFormLabel'
+import { CFormRange } from './CFormRange'
+import { CFormSelect } from './CFormSelect'
+import { CFormSwitch } from './CFormSwitch'
+import { CFormText } from './CFormText'
+import { CFormTextarea } from './CFormTextarea'
+import { CInputGroup } from './CInputGroup'
+import { CInputGroupText } from './CInputGroupText'
+
+export {
+  CForm,
+  CFormCheck,
+  CFormFeedback,
+  CFormFloating,
+  CFormInput,
+  CFormLabel,
+  CFormRange,
+  CFormSelect,
+  CFormSwitch,
+  CFormText,
+  CFormTextarea,
+  CInputGroup,
+  CInputGroupText,
+}

package/src/components/grid/index.ts

@@ -0,0 +1,5 @@
+import { CCol } from './CCol'
+import { CContainer } from './CContainer'
+import { CRow } from './CRow'
+
+export { CCol, CContainer, CRow }

package/src/components/header/index.ts

@@ -0,0 +1,8 @@
+import { CHeader } from './CHeader'
+import { CHeaderBrand } from './CHeaderBrand'
+import { CHeaderDivider } from './CHeaderDivider'
+import { CHeaderNav } from './CHeaderNav'
+import { CHeaderText } from './CHeaderText'
+import { CHeaderToggler } from './CHeaderToggler'
+
+export { CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler }

package/src/components/image/index.ts

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

package/src/components/index.ts

@@ -1 +1,42 @@
+export * from './accordion'
+export * from './alert'
+export * from './avatar'
+export * from './backdrop'
+export * from './badge'
+export * from './breadcrumb'
+export * from './button'
+export * from './button-group'
+export * from './callout'
+export * from './card'
+export * from './carousel'
+export * from './close-button'
+export * from './collapse'
+export * from './datepicker'
+export * from './daterangepicker'
+export * from './dropdown'
+export * from './footer'
+export * from './form'
+export * from './grid'
+export * from './header'
+export * from './image'
+export * from './link'
+export * from './list-group'
+export * from './loading-button'
+export * from './modal'
+export * from './multi-select'
+export * from './nav'
+export * from './navbar'
+export * from './offcanvas'
+export * from './pagination'
+export * from './placeholder'
+export * from './progress'
+export * from './popover'
+export * from './smart-table'
+export * from './sidebar'
+export * from './spinner'
+export * from './table'
+export * from './tabs'
+export * from './timepicker'
+export * from './toast'
+export * from './tooltip'
 export * from './widgets'

package/src/components/link/index.ts

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

package/src/components/list-group/index.ts

@@ -0,0 +1,4 @@
+import { CListGroup } from './CListGroup'
+import { CListGroupItem } from './CListGroupItem'
+
+export { CListGroup, CListGroupItem }

package/src/components/loading-button/index.ts

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

package/src/components/modal/CModal.tsx

@@ -72,8 +72,8 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * Remove animation to create modal that simply appear rather than fade in to view.
    */
   transition?: boolean
-  /*
-   * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false
+  /**
+   * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
    */
   unmountOnClose?: boolean
   /**
@@ -228,6 +228,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         <Transition
           in={_visible}
           mountOnEnter
+          nodeRef={modalRef}
           onEnter={onShow}
           onExit={onClose}
           unmountOnExit={unmountOnClose}

package/src/components/modal/index.ts

@@ -0,0 +1,9 @@
+import { CModal } from './CModal'
+import { CModalBody } from './CModalBody'
+import { CModalContent } from './CModalContent'
+import { CModalDialog } from './CModalDialog'
+import { CModalFooter } from './CModalFooter'
+import { CModalHeader } from './CModalHeader'
+import { CModalTitle } from './CModalTitle'
+
+export { CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle }

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

@@ -8,10 +8,9 @@ import React, {
   useState,
   useRef,
 } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import classNames from 'classnames'
+import PropTypes from 'prop-types'
 
 import { CMultiSelectCleaner } from './CMultiSelectCleaner'
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
@@ -20,6 +19,7 @@ import { CMultiSelectSearchInput } from './CMultiSelectSearchInput'
 import { CMultiSelectSelectAllButton } from './CMultiSelectSelectAllButton'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
+import { useForkedRef } from '../../utils/hooks'
 export interface CMultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
   /**
    * A string of all className you want applied to the base component.
@@ -279,6 +279,13 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const handleOptionOnClick = (option: Option) => {
       setOptions(updateOptions(option.value))
+      if (!multiple) {
+        setVisible(false)
+        setSearch('')
+        if (searchRef.current) {
+          searchRef.current.value = ''
+        }
+      }
     }
 
     const handleSelectAll = () => {
@@ -302,42 +309,42 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           onChange={() => onChange && onChange(selected)}
           ref={nativeSelectRef}
         />
-        <div
-          className={_className}
-          ref={forkedRef}
-          onClick={() => {
-            setVisible(true)
-            search && searchRef.current?.focus()
-          }}
-        >
-          <CMultiSelectSelection
-            multiple={multiple}
-            onRemove={(option) => handleOptionOnClick(option)}
-            search={search}
-            selected={selected}
-            selectionType={selectionType}
-            selectionTypeCounterText={selectionTypeCounterText}
-          />
-          {multiple && cleaner && selected.length > 0 && (
-            <CMultiSelectCleaner onClick={() => handleDeselectAll()} />
-          )}
-          {search && (
-            <CMultiSelectSearchInput
-              {...(selected.length === 0 && { placeholder: placeholder })}
-              {...(selected.length &&
-                selectionType === 'counter' && {
-                  placeholder: `${selected.length} ${selectionTypeCounterText}`,
-                })}
-              {...(selected.length &&
-                !multiple && { placeholder: selected.map((option) => option.text)[0] })}
-              onChange={(event) => handleSearchChange(event)}
-              onKeyDown={(event) => handleSearchKeyDown(event)}
-              {...(multiple &&
-                selected.length &&
-                selectionType !== 'counter' && { size: _search.length + 2 })}
-              ref={searchRef}
+        <div className={_className} ref={forkedRef}>
+          <div
+            onClick={() => {
+              setVisible(true)
+              search && searchRef.current?.focus()
+            }}
+          >
+            <CMultiSelectSelection
+              multiple={multiple}
+              onRemove={(option) => handleOptionOnClick(option)}
+              search={search}
+              selected={selected}
+              selectionType={selectionType}
+              selectionTypeCounterText={selectionTypeCounterText}
             />
-          )}
+            {multiple && cleaner && selected.length > 0 && (
+              <CMultiSelectCleaner onClick={() => handleDeselectAll()} />
+            )}
+            {search && (
+              <CMultiSelectSearchInput
+                {...(selected.length === 0 && { placeholder: placeholder })}
+                {...(selected.length &&
+                  selectionType === 'counter' && {
+                    placeholder: `${selected.length} ${selectionTypeCounterText}`,
+                  })}
+                {...(selected.length &&
+                  !multiple && { placeholder: selected.map((option) => option.text)[0] })}
+                onChange={(event) => handleSearchChange(event)}
+                onKeyDown={(event) => handleSearchKeyDown(event)}
+                {...(multiple &&
+                  selected.length &&
+                  selectionType !== 'counter' && { size: _search.length + 2 })}
+                ref={searchRef}
+              />
+            )}
+          </div>
           <div className="form-multi-select-dropdown">
             {multiple && selectAll && (
               <CMultiSelectSelectAllButton onClick={() => handleSelectAll()}>

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

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

package/src/components/nav/CNavGroup.tsx

@@ -106,6 +106,7 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
         )}
         <Transition
           in={_visible}
+          nodeRef={navItemsRef}
           onEntering={onEntering}
           onEntered={onEntered}
           onExit={onExit}

package/src/components/nav/index.ts

@@ -0,0 +1,8 @@
+import { CNav } from './CNav'
+import { CNavGroupItems } from './CNavGroupItems'
+import { CNavGroup } from './CNavGroup'
+import { CNavItem } from './CNavItem'
+import { CNavLink } from './CNavLink'
+import { CNavTitle } from './CNavTitle'
+
+export { CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle }