@coreui/react 4.3.1 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -36,24 +36,24 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.4",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/react": "18.0.15",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "18.0.19",
     "@types/react-dom": "^18.0.6",
     "@types/react-transition-group": "^4.4.5",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.5",
-    "rollup": "^2.77.2",
+    "rollup": "^2.79.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/carousel/CCarousel.tsx

@@ -235,7 +235,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           <div className="carousel-inner">
             {Children.map(children, (child, index) => {
               if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
+                return React.cloneElement(child as React.ReactElement<any>, {
                   active: active === index ? true : false,
                   direction: direction,
                   key: index,

package/src/components/dropdown/CDropdown.tsx

@@ -56,10 +56,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   dark?: boolean
   /**
    * Sets a specified  direction and location of the dropdown menu.
-   *
-   * @type 'dropup' | 'dropend' | 'dropstart'
    */
-  direction?: 'dropup' | 'dropend' | 'dropstart'
+  direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -146,7 +144,11 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       {
         show: _visible,
       },
-      direction,
+      direction === 'center'
+        ? 'dropdown-center'
+        : direction === 'dropup-center'
+        ? 'dropup dropup-center'
+        : direction,
       className,
     )
 
@@ -202,7 +204,7 @@ CDropdown.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   dark: PropTypes.bool,
-  direction: PropTypes.oneOf(['dropup', 'dropend', 'dropstart']),
+  direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: placementPropType,

package/src/components/dropdown/CDropdownMenu.tsx

@@ -86,10 +86,18 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
 
   let _placement: Placements = placement
 
+  if (direction === 'center') {
+    _placement = 'bottom'
+  }
+
   if (direction === 'dropup') {
     _placement = 'top-start'
   }
 
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
   if (direction === 'dropend') {
     _placement = 'right-start'
   }

package/src/components/dropdown/CDropdownToggle.tsx

@@ -75,7 +75,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const Toggler = (ref?: React.Ref<any>) => {
     return custom && React.isValidElement(children) ? (
       <>
-        {React.cloneElement(children, {
+        {React.cloneElement(children as React.ReactElement<any>, {
           'aria-expanded': visible,
           ...(!rest.disabled && { ...triggers }),
           ref: useForkedRef(ref, dropdownToggleRef),

package/src/components/modal/CModal.tsx

@@ -171,6 +171,12 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     useLayoutEffect(() => {
       if (_visible) {
         document.body.classList.add('modal-open')
+
+        if (backdrop) {
+          document.body.style.overflow = 'hidden'
+          document.body.style.paddingRight = '0px'
+        }
+
         setTimeout(
           () => {
             modalRef.current?.focus()
@@ -179,8 +185,19 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         )
       } else {
         document.body.classList.remove('modal-open')
+
+        if (backdrop) {
+          document.body.style.removeProperty('overflow')
+          document.body.style.removeProperty('padding-right')
+        }
+      }
+      return () => {
+        document.body.classList.remove('modal-open')
+        if (backdrop) {
+          document.body.style.removeProperty('overflow')
+          document.body.style.removeProperty('padding-right')
+        }
       }
-      return () => document.body.classList.remove('modal-open')
     }, [_visible])
 
     const handleClickOutside = (event: Event) => {

package/src/components/nav/CNavGroup.tsx

@@ -124,7 +124,10 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
             >
               {React.Children.map(children, (child, index) => {
                 if (React.isValidElement(child)) {
-                  return React.cloneElement(child, { key: index, idx: `${idx}.${index}` })
+                  return React.cloneElement(child as React.ReactElement<any>, {
+                    key: index,
+                    idx: `${idx}.${index}`,
+                  })
                 }
                 return
               })}

package/src/components/sidebar/CSidebarNav.tsx

@@ -29,7 +29,10 @@ export const CSidebarNav = forwardRef<HTMLUListElement, CSidebarNavProps>(
         <CNavContext.Provider value={CNavContextValues}>
           {React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
-              return React.cloneElement(child, { key: index, idx: `${index}` })
+              return React.cloneElement(child as React.ReactElement<any>, {
+                key: index,
+                idx: `${index}`,
+              })
             }
             return
           })}

package/src/components/toast/__tests__/__snapshots__/CToast.spec.tsx.snap

@@ -53,6 +53,19 @@ exports[`CToast customize 4`] = `
 `;
 
 exports[`CToast customize 5`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    class="toast fade bg-warning border-0 bazinga showing"
+    role="alert"
+  >
+    Test
+  </div>
+</div>
+`;
+
+exports[`CToast customize 6`] = `
 <div>
   <div
     aria-atomic="true"