@coreui/react 4.0.1 → 4.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.0.1",
+  "version": "4.1.2",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,24 +35,24 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.10.2",
+    "@popperjs/core": "^2.11.0",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-node-resolve": "^13.1.1",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.34",
+    "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.59.0",
+    "rollup": "^2.62.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.4"
   },
   "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/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/__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/modal/CModal.tsx

@@ -72,6 +72,10 @@ 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
+   */
+  unmountOnClose?: boolean
   /**
    * Toggle the visibility of modal component.
    */
@@ -102,11 +106,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       scrollable,
       size,
       transition = true,
+      unmountOnClose = true,
       visible,
     },
     ref,
   ) => {
     const modalRef = useRef<HTMLDivElement>(null)
+    const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
 
     const [_visible, setVisible] = useState(visible)
@@ -121,6 +127,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       setVisible,
     }
 
+    useEffect(() => {
+      modalRef.current && modalRef.current.addEventListener('click', handleClickOutside)
+      modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown)
+
+      return () => {
+        modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside)
+        modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown)
+      }
+    }, [_visible])
+
     const handleDismiss = () => {
       if (backdrop === 'static') {
         return setStaticBackdrop(true)
@@ -167,6 +183,15 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       return () => document.body.classList.remove('modal-open')
     }, [_visible])
 
+    const handleClickOutside = (event: Event) => {
+      if (
+        modalContentRef.current &&
+        !modalContentRef.current.contains(event.target as HTMLElement)
+      ) {
+        handleDismiss()
+      }
+    }
+
     const handleKeyDown = useCallback(
       (event) => {
         if (event.key === 'Escape' && keyboard) {
@@ -190,9 +215,8 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
               fullscreen={fullscreen}
               scrollable={scrollable}
               size={size}
-              onClick={(event) => event.stopPropagation()}
             >
-              <CModalContent>{children}</CModalContent>
+              <CModalContent ref={modalContentRef}>{children}</CModalContent>
             </CModalDialog>
           </div>
         </CModalContext.Provider>
@@ -201,23 +225,21 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
     return (
       <>
-        <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
-          <Transition
-            in={_visible}
-            mountOnEnter
-            onEnter={onShow}
-            onExit={onClose}
-            unmountOnExit
-            timeout={!transition ? 0 : duration}
-          >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return typeof window !== 'undefined' && portal
-                ? createPortal(modal(forkedRef, transitionClass), document.body)
-                : modal(forkedRef, transitionClass)
-            }}
-          </Transition>
-        </div>
+        <Transition
+          in={_visible}
+          mountOnEnter
+          onEnter={onShow}
+          onExit={onClose}
+          unmountOnExit={unmountOnClose}
+          timeout={!transition ? 0 : duration}
+        >
+          {(state) => {
+            const transitionClass = getTransitionClass(state)
+            return typeof window !== 'undefined' && portal
+              ? createPortal(modal(forkedRef, transitionClass), document.body)
+              : modal(forkedRef, transitionClass)
+          }}
+        </Transition>
         {typeof window !== 'undefined' && portal
           ? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)
           : backdrop && <CBackdrop visible={_visible} />}
@@ -244,6 +266,7 @@ CModal.propTypes = {
   scrollable: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'lg', 'xl']),
   transition: PropTypes.bool,
+  unmountOnClose: PropTypes.bool,
   visible: PropTypes.bool,
 }
 

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -36,7 +36,7 @@ test('CModal dialog close on press ESC', async () => {
   expect(onClose).toHaveBeenCalledTimes(0)
   const modal = document.querySelector('.modal')
   if (modal !== null) {
-    fireEvent.keyDown(modal, {
+    fireEvent.keyUp(modal, {
       key: 'Escape',
       code: 'Escape',
       keyCode: 27,

package/src/components/modal/__tests__/__snapshots__/CModal.spec.tsx.snap

@@ -1,13 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CModal customize 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`CModal customize 1`] = `<div />`;
 
-exports[`loads and displays CModal component 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`loads and displays CModal component 1`] = `<div />`;

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>
+`;