@coreui/react-pro 4.8.0-alpha.3 → 4.9.0-next.0

package/src/components/collapse/CCollapse.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CCollapseProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/date-picker/CDatePicker.tsx

@@ -23,7 +23,7 @@ export interface CDatePickerProps
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    *
    * The name attribute for the input element is generated based on the `id` property:
-   * - {id}-date
+   * - \{id\}-date
    */
   id?: string
   /**

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -12,7 +12,7 @@ import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormCont
 import { CPicker, CPickerProps } from '../picker/CPicker'
 import { CTimePicker } from '../time-picker/CTimePicker'
 
-import { getLocalDateFromString } from '../../utils/calendar'
+import { getLocalDateFromString } from '../calendar/utils'
 
 import { Colors } from '../Types'
 export interface CDateRangePickerProps
@@ -46,8 +46,8 @@ export interface CDateRangePickerProps
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    *
    * The name attributes for input elements are generated based on the `id` property:
-   * - {id}-start-date
-   * - {id}-end-date
+   * - \{id\}-start-date
+   * - \{id\}-end-date
    */
   id?: string
   /**

package/src/components/dropdown/CDropdown.tsx

@@ -13,7 +13,7 @@ import classNames from 'classnames'
 import { Manager } from 'react-popper'
 
 import { Placements, placementPropType } from '../Types'
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export type Directions = 'start' | 'end'
 

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 import { Triggers, triggerPropType } from '../Types'
 

package/src/components/element-cover/CElementCover.tsx

@@ -9,26 +9,22 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 import { CSpinner } from '../spinner/CSpinner'
 
 interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * A string of all className you want applied to the base component. [docs]
+   * A string of all className you want applied to the base component.
    */
   className?: string
   /**
    * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
    * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
-   * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
-   *
-   * @type {sides: string[], query: string}[]
+   * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function.
    */
-  boundaries?: { sides: string[]; query: string }[] // TODO: check if this is correct, TJ
+  boundaries?: { sides: string[]; query: string }[]
   /**
-   * Opacity of the cover. [docs]
-   *
-   * @type number
+   * Opacity of the cover.
    */
   opacity?: number
 }
@@ -36,17 +32,18 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
   ({ children, className, boundaries, opacity = 0.4, ...rest }, ref) => {
     const elementCoverRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, elementCoverRef)
-
     const [customBoundaries, setCustomBoundaries] = useState({})
 
     const getCustomBoundaries = () => {
       if (!elementCoverRef || !elementCoverRef.current || !boundaries) {
         return {}
       }
+
       const parent = elementCoverRef.current.parentElement
       if (!parent) {
         return {}
       }
+
       const parentCoords = parent.getBoundingClientRect()
       const customBoundaries = {}
       boundaries.forEach(({ sides, query }) => {
@@ -54,6 +51,7 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
         if (!element || !sides) {
           return
         }
+
         const coords = element.getBoundingClientRect()
         sides.forEach((side) => {
           const sideMargin = Math.abs(coords[side] - parentCoords[side])
@@ -67,8 +65,6 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
       setCustomBoundaries(getCustomBoundaries())
     }, [JSON.stringify(getCustomBoundaries())])
 
-    //render
-
     const classes = classNames(className)
 
     const containerCoords = {
@@ -82,23 +78,21 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
     const coverStyles: CSSProperties = {
       ...containerCoords,
       position: 'absolute',
-      backgroundColor: `rgb(255,255,255,${opacity})`,
+      backgroundColor: `rgba(255,255,255,${opacity})`,
     }
 
     return (
       <div className={classes} style={coverStyles} {...rest} ref={forkedRef}>
-        {children || (
-          <div
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translateX(-50%) translateY(-50%)',
-            }}
-          >
-            <CSpinner variant="grow" color="primary" />
-          </div>
-        )}
+        <div
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translateX(-50%) translateY(-50%)',
+          }}
+        >
+          {children || <CSpinner variant="grow" color="primary" />}
+        </div>
       </div>
     )
   },

package/src/components/element-cover/index.ts

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

package/src/components/form/CFormCheck.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef }
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 import { Colors, Shapes } from '../Types'
 
 import { CFormControlValidation, CFormControlValidationProps } from './CFormControlValidation'

package/src/components/form/CFormControlWrapper.tsx

@@ -57,37 +57,31 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
   tooltipFeedback,
   valid,
 }) => {
+  const formControlValidation = () => (
+    <CFormControlValidation
+      describedby={describedby}
+      feedback={feedback}
+      feedbackInvalid={feedbackInvalid}
+      feedbackValid={feedbackValid}
+      floatingLabel={floatingLabel}
+      invalid={invalid}
+      tooltipFeedback={tooltipFeedback}
+      valid={valid}
+    />
+  )
   return floatingLabel ? (
     <CFormFloating className={floatingClassName}>
       {children}
       <CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
       {text && <CFormText id={describedby}>{text}</CFormText>}
-      <CFormControlValidation
-        describedby={describedby}
-        feedback={feedback}
-        feedbackInvalid={feedbackInvalid}
-        feedbackValid={feedbackValid}
-        floatingLabel={floatingLabel}
-        invalid={invalid}
-        tooltipFeedback={tooltipFeedback}
-        valid={valid}
-      />
+      {formControlValidation()}
     </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}
-      />
+      {formControlValidation()}
     </>
   )
 }

package/src/components/form/CFormInput.tsx

@@ -26,7 +26,7 @@ export interface CFormInputProps
    */
   onChange?: ChangeEventHandler<HTMLInputElement>
   /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
+   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
    */
   plainText?: boolean
   /**

package/src/components/form/CFormSwitch.tsx

@@ -22,7 +22,7 @@ export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElem
    */
   label?: string | ReactNode
   /**
-   * Size the component large or extra large. Works only with `switch` [docs]
+   * Size the component large or extra large. Works only with `switch`.
    */
   size?: 'lg' | 'xl'
   /**

package/src/components/grid/CCol.tsx

@@ -139,6 +139,10 @@ CCol.propTypes = {
   className: PropTypes.string,
   xs: col,
   sm: col,
+  md: col,
+  lg: col,
+  xl: col,
+  xxl: col,
 }
 
 CCol.displayName = 'CCol'

package/src/components/index.ts

@@ -14,6 +14,7 @@ export * from './collapse'
 export * from './date-picker'
 export * from './date-range-picker'
 export * from './dropdown'
+export * from './element-cover'
 export * from './footer'
 export * from './form'
 export * from './grid'
@@ -40,4 +41,5 @@ export * from './tabs'
 export * from './time-picker'
 export * from './toast'
 export * from './tooltip'
+export * from './virtual-scroller'
 export * from './widgets'

package/src/components/modal/CModal.tsx

@@ -13,7 +13,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 import { CBackdrop } from '../backdrop/CBackdrop'
 import { CModalContent } from './CModalContent'

package/src/components/nav/CNavGroup.tsx

@@ -15,19 +15,19 @@ import { CNavContext } from '../sidebar/CSidebarNav'
 export interface CNavGroupProps {
   children?: ReactNode
   /**
-   * A string of all className you want applied to the component. [docs]
+   * A string of all className you want applied to the component.
    */
   className?: string
   /**
-   * Make nav group more compact by cutting all `padding` in half. [docs]
+   * Make nav group more compact by cutting all `padding` in half.
    */
   compact?: boolean
   /**
-   * Set group toggler label. [docs]
+   * Set group toggler label.
    */
   toggler?: string | ReactNode
   /**
-   * Show nav group items. [docs]
+   * Show nav group items.
    */
   visible?: boolean
   /**

package/src/components/nav/CNavLink.tsx

@@ -2,10 +2,11 @@ import React, { ElementType, forwardRef, useContext, useEffect, useRef } from 'r
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 import { CNavContext } from '../sidebar/CSidebarNav'
 import { CLinkProps, CLink } from '../link/CLink'
+
 export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
   /**
    * Toggle the active state for the component.

package/src/components/offcanvas/COffcanvas.tsx

@@ -4,20 +4,20 @@ import { createPortal } from 'react-dom'
 import { Transition } from 'react-transition-group'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
 export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Apply a backdrop on body while offcanvas is open.
    */
-  backdrop?: boolean
+  backdrop?: boolean | 'static'
   /**
    * A string of all className you want applied to the base component.
    */
   className?: string
   /**
-   * Closes the offcanvas when escape key is pressed [docs]
+   * Closes the offcanvas when escape key is pressed.
    */
   keyboard?: boolean
   /**
@@ -36,6 +36,12 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * Generates modal using createPortal.
    */
   portal?: boolean
+  /**
+   * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+   *
+   * @since 4.6.0
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   /**
    * Allow body scrolling while offcanvas is open
    */
@@ -56,7 +62,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       onHide,
       onShow,
       placement,
-      portal = true,
+      portal = false,
+      responsive = true,
       scroll = false,
       visible = false,
       ...rest
@@ -86,26 +93,34 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       }
     }, [_visible])
 
+    const getTransitionClass = (state: string) => {
+      return state === 'entering'
+        ? 'showing'
+        : state === 'entered'
+        ? 'show'
+        : state === 'exiting'
+        ? 'show hiding'
+        : ''
+    }
+
     const _className = classNames(
-      'offcanvas',
       {
+        [`offcanvas${typeof responsive !== 'boolean' ? '-' + responsive : ''}`]: responsive,
         [`offcanvas-${placement}`]: placement,
-        show: _visible,
       },
       className,
     )
 
-    const transitionStyles = {
-      entering: { visibility: 'visible' },
-      entered: { visibility: 'visible' },
-      exiting: { visibility: 'visible' },
-      exited: { visibility: 'hidden' },
-    }
-
     const handleDismiss = () => {
       setVisible(false)
     }
 
+    const handleBackdropDismiss = () => {
+      if (backdrop !== 'static') {
+        setVisible(false)
+      }
+    }
+
     const handleKeyDown = useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'Escape' && keyboard) {
@@ -119,9 +134,8 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       return (
         <>
           <div
-            className={_className}
+            className={classNames(_className, getTransitionClass(state))}
             role="dialog"
-            style={{ ...transitionStyles[state] }}
             tabIndex={-1}
             onKeyDown={handleKeyDown}
             {...rest}
@@ -154,7 +168,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
             createPortal(
               <CBackdrop
                 className="offcanvas-backdrop"
-                onClick={handleDismiss}
+                onClick={handleBackdropDismiss}
                 visible={_visible}
               />,
               document.body,
@@ -162,7 +176,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
           : backdrop && (
               <CBackdrop
                 className="offcanvas-backdrop"
-                onClick={handleDismiss}
+                onClick={handleBackdropDismiss}
                 visible={_visible}
               />
             )}
@@ -172,7 +186,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
 )
 
 COffcanvas.propTypes = {
-  backdrop: PropTypes.bool,
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
   keyboard: PropTypes.bool,
@@ -181,6 +195,10 @@ COffcanvas.propTypes = {
   placement: PropTypes.oneOf<'start' | 'end' | 'top' | 'bottom'>(['start', 'end', 'top', 'bottom'])
     .isRequired,
   portal: PropTypes.bool,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
   scroll: PropTypes.bool,
   visible: PropTypes.bool,
 }

package/src/components/sidebar/CSidebar.tsx

@@ -3,8 +3,8 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isVisible } from '../../utils'
-import { useForkedRef } from '../../utils/hooks'
+import { isInViewport } from '../../utils'
+import { useForkedRef } from '../../hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
@@ -13,13 +13,13 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
    */
   className?: string
   /**
-   * Sets if the color of text should be colored for a light or dark dark background. [docs]
+   * Sets if the color of text should be colored for a light or dark dark background.
    *
    * @type 'dark' | 'light'
    */
   colorScheme?: 'dark' | 'light'
   /**
-   * Make sidebar narrow. [docs]
+   * Make sidebar narrow.
    */
   narrow?: boolean
   /**
@@ -39,12 +39,12 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
    */
   overlaid?: boolean
   /**
-   * Components placement, there’s no default placement. [docs]
+   * Components placement, there’s no default placement.
    * @type 'start' | 'end'
    */
   placement?: 'start' | 'end'
   /**
-   * Place sidebar in non-static positions. [docs]
+   * Place sidebar in non-static positions.
    */
   position?: 'fixed' | 'sticky'
   /**
@@ -108,7 +108,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     useEffect(() => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
 
       window.addEventListener('resize', () => handleResize())
       window.addEventListener('mouseup', handleClickOutside)
@@ -116,7 +116,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
       sidebarRef.current?.addEventListener('mouseup', handleOnClick)
       sidebarRef.current?.addEventListener('transitionend', () => {
-        sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+        sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
       })
 
       return () => {
@@ -126,7 +126,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
         sidebarRef.current?.removeEventListener('mouseup', handleOnClick)
         sidebarRef.current?.removeEventListener('transitionend', () => {
-          sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+          sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
         })
       }
     })
@@ -137,7 +137,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     const handleResize = () => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
     }
 
     const handleKeyup = (event: Event) => {