@coreui/react 4.0.0-rc.6 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.0.0-rc.6",
+  "version": "4.1.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -26,7 +26,7 @@
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/",
     "src/"
@@ -35,24 +35,24 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.10.2",
-    "@rollup/plugin-commonjs": "^21.0.0",
+    "@popperjs/core": "^2.11.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.30",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-transition-group": "^4.4.3",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.58.0",
+    "rollup": "^2.60.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "peerDependencies": {
     "react": "^17",

package/src/components/accordion/CAccordionCollapse.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { CCollapse, CCollapseProps } from '../collapse/CCollapse'
 
-export const CAccordionCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
+export const CAccordionCollapse = forwardRef<HTMLDivElement, Omit<CCollapseProps, 'horizontal'>>(
   ({ children, ...props }, ref) => {
     return (
       <CCollapse className="accordion-collapse" {...props} ref={ref}>

package/src/components/collapse/CCollapse.tsx

@@ -10,6 +10,10 @@ export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Set horizontal collapsing to transition the width instead of height.
+   */
+  horizontal?: boolean
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -25,8 +29,9 @@ export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
-  ({ children, className, onHide, onShow, visible, ...rest }, ref) => {
+  ({ children, className, horizontal, onHide, onShow, visible, ...rest }, ref) => {
     const [height, setHeight] = useState<number>()
+    const [width, setWidth] = useState<number>()
     const collapseRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, collapseRef)
 
@@ -42,27 +47,53 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
 
     const onEntering = () => {
       onShow && onShow()
+
+      if (horizontal) {
+        collapseRef.current && setWidth(collapseRef.current.scrollWidth)
+        return
+      }
       collapseRef.current && setHeight(collapseRef.current.scrollHeight)
     }
 
     const onEntered = () => {
+      if (horizontal) {
+        setWidth(0)
+        return
+      }
       setHeight(0)
     }
 
     const onExit = () => {
+      if (horizontal) {
+        collapseRef.current && setWidth(collapseRef.current.scrollWidth)
+        return
+      }
       collapseRef.current && setHeight(collapseRef.current.scrollHeight)
     }
 
     const onExiting = () => {
       onHide && onHide()
+      if (horizontal) {
+        setWidth(0)
+        return
+      }
       setHeight(0)
     }
 
     const onExited = () => {
+      if (horizontal) {
+        setWidth(0)
+        return
+      }
       setHeight(0)
     }
 
-    const _className = classNames(className)
+    const _className = classNames(
+      {
+        'collapse-horizontal': horizontal,
+      },
+      className,
+    )
 
     return (
       <CSSTransition
@@ -77,10 +108,11 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
         {(state) => {
           const transitionClass = getTransitionClass(state)
           const currentHeight = height === 0 ? null : { height }
+          const currentWidth = width === 0 ? null : { width }
           return (
             <div
               className={classNames(_className, transitionClass)}
-              style={{ ...currentHeight }}
+              style={{ ...currentHeight, ...currentWidth }}
               {...rest}
               ref={forkedRef}
             >
@@ -96,6 +128,7 @@ export const CCollapse = forwardRef<HTMLDivElement, CCollapseProps>(
 CCollapse.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  horizontal: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,

package/src/components/form/CFormCheck.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { useForkedRef } from '../../utils/hooks'
 import { Colors, Shapes } from '../Types'
 
 import { CFormLabel } from './CFormLabel'
@@ -46,6 +47,10 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    */
   id?: string
+  /**
+   * Input Checkbox indeterminate Property.
+   */
+  indeterminate?: boolean
   /**
    * Group checkboxes or radios on the same horizontal row by adding.
    */
@@ -70,9 +75,30 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
 
 export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
   (
-    { className, button, hitArea, id, inline, invalid, label, type = 'checkbox', valid, ...rest },
+    {
+      className,
+      button,
+      hitArea,
+      id,
+      indeterminate,
+      inline,
+      invalid,
+      label,
+      type = 'checkbox',
+      valid,
+      ...rest
+    },
     ref,
   ) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const forkedRef = useForkedRef(ref, inputRef)
+
+    useEffect(() => {
+      if (inputRef.current && indeterminate) {
+        inputRef.current.indeterminate = indeterminate
+      }
+    }, [indeterminate])
+
     const _className = classNames(
       'form-check',
       {
@@ -102,7 +128,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
     )
 
     const formControl = () => {
-      return <input type={type} className={inputClassName} id={id} {...rest} ref={ref} />
+      return <input type={type} className={inputClassName} id={id} {...rest} ref={forkedRef} />
     }
 
     const formLabel = () => {
@@ -141,6 +167,7 @@ CFormCheck.propTypes = {
   className: PropTypes.string,
   hitArea: PropTypes.oneOf(['full']),
   id: PropTypes.string,
+  indeterminate: PropTypes.bool,
   inline: PropTypes.bool,
   invalid: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

package/src/components/form/CFormLabel.tsx

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

package/src/components/form/CFormSelect.tsx

@@ -2,6 +2,11 @@ import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'reac
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+type Option = {
+  disabled?: boolean
+  label?: string
+  value?: string
+}
 export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
@@ -19,6 +24,13 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
    * Method called immediately after the `value` prop changes.
    */
   onChange?: ChangeEventHandler<HTMLSelectElement>
+  /**
+   * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+   * Examples:
+   * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
+   * - `options={['js', 'html']}`
+   */
+  options?: Option[] | string[]
   /**
    * Size the component small or large.
    */
@@ -36,7 +48,7 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
 }
 
 export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
-  ({ children, className, htmlSize, invalid, size, valid, ...rest }, ref) => {
+  ({ children, className, htmlSize, invalid, options, size, valid, ...rest }, ref) => {
     const _className = classNames(
       'form-select',
       {
@@ -48,7 +60,20 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
     )
     return (
       <select className={_className} size={htmlSize} {...rest} ref={ref}>
-        {children}
+        {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>
     )
   },
@@ -59,6 +84,7 @@ CFormSelect.propTypes = {
   className: PropTypes.string,
   htmlSize: PropTypes.number,
   invalid: PropTypes.bool,
+  options: PropTypes.array,
   size: PropTypes.oneOf(['sm', 'lg']),
   valid: PropTypes.bool,
 }

package/src/components/form/__tests__/CFormLabel.spec.tsx

@@ -15,3 +15,11 @@ test('CFormLabel customize className', async () => {
   expect(container.firstChild).toHaveClass('form-label')
   expect(container.firstChild).toHaveTextContent('Test')
 })
+
+test('CFormLabel customize htmlFor', async () => {
+  const { container } = render(<CFormLabel htmlFor="bazinga">Test</CFormLabel>)
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveAttribute('for', 'bazinga')
+  expect(container.firstChild).toHaveClass('form-label')
+  expect(container.firstChild).toHaveTextContent('Test')
+})

package/src/components/form/__tests__/__snapshots__/CFormLabel.spec.tsx.snap

@@ -10,6 +10,17 @@ exports[`CFormLabel customize className 1`] = `
 </div>
 `;
 
+exports[`CFormLabel customize htmlFor 1`] = `
+<div>
+  <label
+    class="form-label"
+    for="bazinga"
+  >
+    Test
+  </label>
+</div>
+`;
+
 exports[`loads and displays CFormLabel component 1`] = `
 <div>
   <label

package/src/components/grid/CCol.tsx

@@ -66,7 +66,7 @@ const BREAKPOINTS = [
 
 export const CCol = forwardRef<HTMLDivElement, CColProps>(
   ({ children, className, ...rest }, ref) => {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = rest[bp]
@@ -75,34 +75,34 @@ export const CCol = forwardRef<HTMLDivElement, CColProps>(
       const infix = bp === 'xs' ? '' : `-${bp}`
 
       if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
-        repsonsiveCLassNames.push(`col${infix}-${breakpoint}`)
+        repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
       }
 
       if (typeof breakpoint === 'boolean') {
-        repsonsiveCLassNames.push(`col${infix}`)
+        repsonsiveClassNames.push(`col${infix}`)
       }
 
       if (breakpoint && typeof breakpoint === 'object') {
         if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
-          repsonsiveCLassNames.push(`col${infix}-${breakpoint.span}`)
+          repsonsiveClassNames.push(`col${infix}-${breakpoint.span}`)
         }
 
         if (typeof breakpoint.span === 'boolean') {
-          repsonsiveCLassNames.push(`col${infix}`)
+          repsonsiveClassNames.push(`col${infix}`)
         }
 
         if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
-          repsonsiveCLassNames.push(`order${infix}-${breakpoint.order}`)
+          repsonsiveClassNames.push(`order${infix}-${breakpoint.order}`)
         }
 
         if (typeof breakpoint.offset === 'number') {
-          repsonsiveCLassNames.push(`offset${infix}-${breakpoint.offset}`)
+          repsonsiveClassNames.push(`offset${infix}-${breakpoint.offset}`)
         }
       }
     })
 
     const _className = classNames(
-      repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col',
+      repsonsiveClassNames.length ? repsonsiveClassNames : 'col',
       className,
     )
 

package/src/components/grid/CContainer.tsx

@@ -44,17 +44,17 @@ const BREAKPOINTS = [
 
 export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
   ({ children, className, ...rest }, ref) => {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = rest[bp]
       delete rest[bp]
 
-      breakpoint && repsonsiveCLassNames.push(`container-${bp}`)
+      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
     })
 
     const _className = classNames(
-      repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container',
+      repsonsiveClassNames.length ? repsonsiveClassNames : 'container',
       className,
     )
 

package/src/components/grid/CRow.tsx

@@ -63,7 +63,7 @@ const BREAKPOINTS = [
 
 export const CRow = forwardRef<HTMLDivElement, CRowProps>(
   ({ children, className, ...rest }, ref) => {
-    const repsonsiveCLassNames: string[] = []
+    const repsonsiveClassNames: string[] = []
 
     BREAKPOINTS.forEach((bp) => {
       const breakpoint = rest[bp]
@@ -73,21 +73,21 @@ export const CRow = forwardRef<HTMLDivElement, CRowProps>(
 
       if (typeof breakpoint === 'object') {
         if (breakpoint.cols) {
-          repsonsiveCLassNames.push(`row-cols${infix}-${breakpoint.cols}`)
+          repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`)
         }
         if (typeof breakpoint.gutter === 'number') {
-          repsonsiveCLassNames.push(`g${infix}-${breakpoint.gutter}`)
+          repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`)
         }
         if (typeof breakpoint.gutterX === 'number') {
-          repsonsiveCLassNames.push(`gx${infix}-${breakpoint.gutterX}`)
+          repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`)
         }
         if (typeof breakpoint.gutterY === 'number') {
-          repsonsiveCLassNames.push(`gy${infix}-${breakpoint.gutterY}`)
+          repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`)
         }
       }
     })
 
-    const _className = classNames('row', repsonsiveCLassNames, className)
+    const _className = classNames('row', repsonsiveClassNames, className)
 
     return (
       <div className={_className} ref={ref}>

package/src/components/offcanvas/COffcanvas.tsx

@@ -150,8 +150,21 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
         </Transition>
         {typeof window !== 'undefined' && portal
           ? backdrop &&
-            createPortal(<CBackdrop visible={_visible} onClick={handleDismiss} />, document.body)
-          : backdrop && <CBackdrop visible={_visible} onClick={handleDismiss} />}
+            createPortal(
+              <CBackdrop
+                className="offcanvas-backdrop"
+                onClick={handleDismiss}
+                visible={_visible}
+              />,
+              document.body,
+            )
+          : backdrop && (
+              <CBackdrop
+                className="offcanvas-backdrop"
+                onClick={handleDismiss}
+                visible={_visible}
+              />
+            )}
       </>
     )
   },

package/src/components/offcanvas/__tests__/COffcanvas.spec.tsx

@@ -51,7 +51,7 @@ test('COffcanvas customize and event on click backdrop', async () => {
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveTextContent('Test')
   expect(onHide).toHaveBeenCalledTimes(0)
-  const backdrop = document.querySelector('.modal-backdrop')
+  const backdrop = document.querySelector('.offcanvas-backdrop')
   if (backdrop !== null) {
     fireEvent.click(backdrop)
   }

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.tsx.snap

@@ -11,7 +11,7 @@ exports[`COffcanvas customize and event on click backdrop 1`] = `
     Test
   </div>
   <div
-    class="modal-backdrop fade show"
+    class="offcanvas-backdrop fade show"
   />
 </div>
 `;
@@ -27,7 +27,7 @@ exports[`COffcanvas customize and event on keypress 1`] = `
     Test
   </div>
   <div
-    class="modal-backdrop fade show"
+    class="offcanvas-backdrop fade show"
   />
 </div>
 `;

package/src/components/placeholder/CPlaceholder.tsx

@@ -0,0 +1,114 @@
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { Colors, colorPropType } from '../Types'
+
+export interface CPlaceholderProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Set animation type to better convey the perception of something being actively loaded.
+   */
+  animation?: 'glow' | 'wave'
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
+  /**
+   * Sets the color context of the component to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   */
+  color?: Colors
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: string | ElementType
+  /**
+   * Size the component extra small, small, or large.
+   */
+  size?: 'xs' | 'sm' | 'lg'
+  /**
+   * The number of columns on extra small devices (<576px).
+   */
+  xs?: number
+  /**
+   * The number of columns on small devices (<768px).
+   */
+  sm?: number
+  /**
+   * The number of columns on medium devices (<992px).
+   */
+  md?: number
+  /**
+   * The number of columns on large devices (<1200px).
+   */
+  lg?: number
+  /**
+   * The number of columns on X-Large devices (<1400px).
+   */
+  xl?: number
+  /**
+   * The number of columns on XX-Large devices (≥1400px).
+   */
+  xxl?: number
+}
+
+const BREAKPOINTS = [
+  'xxl' as const,
+  'xl' as const,
+  'lg' as const,
+  'md' as const,
+  'sm' as const,
+  'xs' as const,
+]
+
+export const CPlaceholder = forwardRef<HTMLSpanElement, CPlaceholderProps>(
+  (
+    { children, animation, className, color, component: Component = 'span', size, ...rest },
+    ref,
+  ) => {
+    const repsonsiveClassNames: string[] = []
+
+    BREAKPOINTS.forEach((bp) => {
+      const breakpoint = rest[bp]
+      delete rest[bp]
+
+      const infix = bp === 'xs' ? '' : `-${bp}`
+
+      if (typeof breakpoint === 'number') {
+        repsonsiveClassNames.push(`col${infix}-${breakpoint}`)
+      }
+
+      if (typeof breakpoint === 'boolean') {
+        repsonsiveClassNames.push(`col${infix}`)
+      }
+    })
+
+    const _className = classNames(
+      animation ? `placeholder-${animation}` : 'placeholder',
+      {
+        [`bg-${color}`]: color,
+        [`placeholder-${size}`]: size,
+      },
+      repsonsiveClassNames,
+      className,
+    )
+
+    return (
+      <Component className={_className} {...rest} ref={ref}>
+        {children}
+      </Component>
+    )
+  },
+)
+
+CPlaceholder.propTypes = {
+  animation: PropTypes.oneOf(['glow', 'wave']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  color: colorPropType,
+  component: PropTypes.elementType,
+  size: PropTypes.oneOf(['xs', 'sm', 'lg']),
+}
+
+CPlaceholder.displayName = 'CPlaceholder'

package/src/components/placeholder/__tests__/CPlaceholder.spec.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPlaceholder } from '../../../index'
+
+test('loads and displays CPlaceholder component', async () => {
+  const { container } = render(<CPlaceholder color="primary" />)
+  expect(container).toMatchSnapshot()
+})
+
+test('CPlaceholder customize', async () => {
+  const { container } = render(
+    <CPlaceholder animation="glow" className="bazinga" color="secondary" size="lg" sm={7} />,
+  )
+  expect(container).toMatchSnapshot()
+  expect(container.firstChild).toHaveClass('bazinga')
+  expect(container.firstChild).toHaveClass('bg-secondary')
+  expect(container.firstChild).toHaveClass('col-sm-7')
+  expect(container.firstChild).toHaveClass('placeholder-lg')
+  expect(container.firstChild).toHaveClass('placeholder-glow')
+})

package/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CPlaceholder customize 1`] = `
+<div>
+  <span
+    class="placeholder-glow bg-secondary placeholder-lg col-sm-7 bazinga"
+  />
+</div>
+`;
+
+exports[`loads and displays CPlaceholder component 1`] = `
+<div>
+  <span
+    class="placeholder bg-primary"
+  />
+</div>
+`;

package/src/index.ts

@@ -86,6 +86,7 @@ import { CNavbarText } from './components/navbar/CNavbarText'
 import { CNavbarToggler } from './components/navbar/CNavbarToggler'
 import { CPagination } from './components/pagination/CPagination'
 import { CPaginationItem } from './components/pagination/CPaginationItem'
+import { CPlaceholder } from './components/placeholder/CPlaceholder'
 import { CPopover } from './components/popover/CPopover'
 import { CProgress } from './components/progress/CProgress'
 import { CProgressBar } from './components/progress/CProgressBar'
@@ -206,6 +207,7 @@ export {
   CNavbarToggler,
   CPagination,
   CPaginationItem,
+  CPlaceholder,
   CPopover,
   CProgress,
   CProgressBar,