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

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,7 +9,7 @@ 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> {
@@ -21,14 +21,10 @@ interface CElementCoverProps extends HTMLAttributes<HTMLDivElement> {
    * 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.
-   *
-   * @type {sides: string[], query: string}[]
    */
-  boundaries?: { sides: string[]; query: string }[] // TODO: check if this is correct, TJ
+  boundaries?: { sides: string[]; query: string }[]
   /**
    * Opacity of the cover.
-   *
-   * @type number
    */
   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/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'

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/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,14 +4,14 @@ 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.
    */
@@ -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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { isInViewport } from '../../utils'
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {