@coreui/react 4.0.2 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,13 +35,13 @@
     "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-typescript": "^8.3.0",
-    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
-    "@types/react": "^17.0.34",
+    "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
@@ -50,9 +50,9 @@
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.60.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/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,