@coreui/react 4.5.2 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,24 +35,24 @@
     "build": "rollup -c --bundleConfigAsCjs"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.5",
+    "@popperjs/core": "^2.11.6",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/react": "18.0.27",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^18.0.10",
     "@types/react-transition-group": "^4.4.5",
     "classnames": "^2.3.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-popper": "^2.2.5",
+    "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.7.5",
-    "tslib": "^2.4.1",
-    "typescript": "^4.9.4"
+    "rollup": "^3.14.0",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/alert/CAlert.tsx

@@ -6,7 +6,7 @@ import { Transition } from 'react-transition-group'
 import { Colors, colorPropType } from '../Types'
 import { CCloseButton } from '../close-button/CCloseButton'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CAlertProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/components/backdrop/CBackdrop.tsx

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

package/src/components/carousel/CCarousel.tsx

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

package/src/components/carousel/CCarouselItem.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext, useEffect, useState, use
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 import { CCarouselContext } from './CCarousel'
 export interface CCarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   /**

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/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/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/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> {

package/src/components/tabs/CTabPane.tsx

@@ -3,7 +3,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'
 export interface CTabPaneProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.

package/src/components/toast/CToast.tsx

@@ -12,7 +12,7 @@ import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
-import { useForkedRef } from '../../utils/hooks'
+import { useForkedRef } from '../../hooks'
 
 export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   /**