@coreui/react 5.7.0 → 5.8.0

package/src/components/modal/CModal.tsx

@@ -12,6 +12,7 @@ import { Transition } from 'react-transition-group'
 
 import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
+import { CFocusTrap } from '../focus-trap'
 import { CModalContent } from './CModalContent'
 import { CModalContext } from './CModalContext'
 import { CModalDialog } from './CModalDialog'
@@ -118,7 +119,6 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     },
     ref
   ) => {
-    const activeElementRef = useRef<HTMLElement | null>(null)
     const modalRef = useRef<HTMLDivElement>(null)
     const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
@@ -137,11 +137,8 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
     useEffect(() => {
       if (_visible) {
-        activeElementRef.current = document.activeElement as HTMLElement | null
         document.addEventListener('mouseup', handleClickOutside)
         document.addEventListener('keydown', handleKeyDown)
-      } else {
-        activeElementRef.current?.focus()
       }
 
       return () => {
@@ -159,7 +156,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }
 
     useLayoutEffect(() => {
-      onClosePrevented && onClosePrevented()
+      onClosePrevented?.()
       setTimeout(() => setStaticBackdrop(false), duration)
     }, [staticBackdrop])
 
@@ -172,13 +169,6 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           document.body.style.overflow = 'hidden'
           document.body.style.paddingRight = '0px'
         }
-
-        setTimeout(
-          () => {
-            focus && modalRef.current?.focus()
-          },
-          transition ? duration : 0
-        )
       } else {
         document.body.classList.remove('modal-open')
 
@@ -249,7 +239,9 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
                     scrollable={scrollable}
                     size={size}
                   >
-                    <CModalContent ref={modalContentRef}>{children}</CModalContent>
+                    <CFocusTrap active={focus && state === 'entered'} restoreFocus>
+                      <CModalContent ref={modalContentRef}>{children}</CModalContent>
+                    </CFocusTrap>
                   </CModalDialog>
                 </div>
               </CModalContext.Provider>

package/src/components/modal/CModalBody.tsx

@@ -16,7 +16,7 @@ export const CModalBody = forwardRef<HTMLDivElement, CModalBodyProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CModalBody.propTypes = {

package/src/components/modal/CModalContent.tsx

@@ -16,7 +16,7 @@ export const CModalContent = forwardRef<HTMLDivElement, CModalContentProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CModalContent.propTypes = {

package/src/components/modal/CModalDialog.tsx

@@ -39,7 +39,7 @@ export const CModalDialog = forwardRef<HTMLDivElement, CModalDialogProps>(
             'modal-dialog-scrollable': scrollable,
             [`modal-${size}`]: size,
           },
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -47,7 +47,7 @@ export const CModalDialog = forwardRef<HTMLDivElement, CModalDialogProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CModalDialog.propTypes = {

package/src/components/modal/CModalFooter.tsx

@@ -16,7 +16,7 @@ export const CModalFooter = forwardRef<HTMLDivElement, CModalFooterProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CModalFooter.propTypes = {

package/src/components/modal/CModalHeader.tsx

@@ -26,7 +26,7 @@ export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
         {closeButton && <CCloseButton onClick={() => setVisible(false)} />}
       </div>
     )
-  },
+  }
 )
 
 CModalHeader.propTypes = {

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -20,7 +20,7 @@ test('CModal customize', async () => {
       visible={true}
     >
       Test
-    </CModal>,
+    </CModal>
   )
   expect(container).toMatchSnapshot()
 })
@@ -30,7 +30,7 @@ test('CModal dialog close on press ESC', async () => {
   render(
     <CModal onClose={onClose} portal={false} visible>
       Test
-    </CModal>,
+    </CModal>
   )
   expect(onClose).toHaveBeenCalledTimes(0)
 

package/src/components/modal/__tests__/CModalDialog.spec.tsx

@@ -18,7 +18,7 @@ test('CModalDialog customize', async () => {
       size="xl"
     >
       Test
-    </CModalDialog>,
+    </CModalDialog>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/modal/__tests__/CModalTitle.spec.tsx

@@ -12,7 +12,7 @@ test('CModalTitle customize', async () => {
   const { container } = render(
     <CModalTitle className="bazinga" as="h3">
       Test
-    </CModalTitle>,
+    </CModalTitle>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/nav/CNavGroup.tsx

@@ -65,7 +65,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext)
 
   const [_visible, setVisible] = useState(
-    Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),
+    Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))
   )
 
   useEffect(() => {
@@ -75,7 +75,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   const handleTogglerOnCLick = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault()
     setVisibleGroup(
-      _visible ? (idx?.toString().includes('.') ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx,
+      _visible ? (idx?.toString().includes('.') ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx
     )
     setVisible(!_visible)
   }

package/src/components/nav/CNavGroupItems.tsx

@@ -25,7 +25,7 @@ export const CNavGroupItems: PolymorphicRefForwardingComponent<'ul', CNavGroupIt
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CNavGroupItems.propTypes = {

package/src/components/nav/__tests__/CNavGroup.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CNavGroup component', async () => {
 
 test('CNavGroup customize', async () => {
   const { container } = render(
-    <CNavGroup className="bazinga" toggler="anchorText" visible={true} idx="1" />,
+    <CNavGroup className="bazinga" toggler="anchorText" visible={true} idx="1" />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('nav-group')

package/src/components/nav/__tests__/CNavItem.spec.tsx

@@ -12,7 +12,7 @@ test('CNavItem customize', async () => {
   const { container } = render(
     <CNavItem active={true} className="bazinga" as="h3" disabled={true} href="/bazinga">
       Test
-    </CNavItem>,
+    </CNavItem>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild?.firstChild).toHaveClass('nav-link')

package/src/components/nav/__tests__/CNavLink.spec.tsx

@@ -12,7 +12,7 @@ test('CNavLink customize', async () => {
   const { container } = render(
     <CNavLink active={true} className="bazinga" as="h3" disabled={true} href="/bazinga">
       Test
-    </CNavLink>,
+    </CNavLink>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('nav-link')

package/src/components/navbar/CNavbar.tsx

@@ -55,7 +55,7 @@ export const CNavbar: PolymorphicRefForwardingComponent<'nav', CNavbarProps> = f
       placement,
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <Component
@@ -66,7 +66,7 @@ export const CNavbar: PolymorphicRefForwardingComponent<'nav', CNavbarProps> = f
             [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
           },
           placement,
-          className,
+          className
         )}
         {...(colorScheme && { 'data-coreui-theme': colorScheme })}
         {...rest}
@@ -81,7 +81,7 @@ export const CNavbar: PolymorphicRefForwardingComponent<'nav', CNavbarProps> = f
         )}
       </Component>
     )
-  },
+  }
 )
 
 CNavbar.propTypes = {

package/src/components/navbar/CNavbarText.tsx

@@ -16,7 +16,7 @@ export const CNavbarText = forwardRef<HTMLSpanElement, CNavbarTextProps>(
         {children}
       </span>
     )
-  },
+  }
 )
 
 CNavbarText.propTypes = {

package/src/components/navbar/CNavbarToggler.tsx

@@ -16,7 +16,7 @@ export const CNavbarToggler = forwardRef<HTMLButtonElement, CNavbarTogglerProps>
         {children ?? <span className="navbar-toggler-icon"></span>}
       </button>
     )
-  },
+  }
 )
 
 CNavbarToggler.propTypes = {

package/src/components/navbar/__tests__/CNavbar.spec.tsx

@@ -20,7 +20,7 @@ test('CNavbar customize', async () => {
       placement="fixed-bottom"
     >
       Test
-    </CNavbar>,
+    </CNavbar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -37,7 +37,7 @@ test('CNavbar customize - container and expand are boolean', async () => {
   const { container } = render(
     <CNavbar container={true} expand={true}>
       Test
-    </CNavbar>,
+    </CNavbar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('navbar-expand')

package/src/components/navbar/__tests__/CNavbarBrand.spec.tsx

@@ -17,7 +17,7 @@ test('CNavbarBrand customize', async () => {
   const { container } = render(
     <CNavbarBrand className="bazinga" as="h3" href="/bazinga">
       Test
-    </CNavbarBrand>,
+    </CNavbarBrand>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('navbar-brand')

package/src/components/navbar/__tests__/CNavbarNav.spec.tsx

@@ -12,7 +12,7 @@ test('CNavbarNav customize', async () => {
   const { container } = render(
     <CNavbarNav className="bazinga" as="h3">
       Test
-    </CNavbarNav>,
+    </CNavbarNav>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/offcanvas/COffcanvas.tsx

@@ -5,6 +5,7 @@ import { Transition } from 'react-transition-group'
 
 import { CBackdrop } from '../backdrop'
 import { CConditionalPortal } from '../conditional-portal'
+import { CFocusTrap } from '../focus-trap'
 
 import { useForkedRef } from '../../hooks'
 
@@ -74,7 +75,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       visible = false,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const [_visible, setVisible] = useState<boolean>(visible)
     const offcanvasRef = useRef<HTMLDivElement>(null)
@@ -119,33 +120,34 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
           in={_visible}
           nodeRef={offcanvasRef}
           onEnter={onShow}
-          onEntered={() => offcanvasRef.current?.focus()}
           onExit={onHide}
           timeout={300}
         >
           {(state) => (
             <CConditionalPortal portal={portal}>
-              <div
-                className={classNames(
-                  {
-                    [`offcanvas${typeof responsive === 'string' ? '-' + responsive : ''}`]:
-                      responsive,
-                    [`offcanvas-${placement}`]: placement,
-                    showing: state === 'entering',
-                    show: state === 'entered',
-                    'show hiding': state === 'exiting',
-                  },
-                  className,
-                )}
-                role="dialog"
-                tabIndex={-1}
-                onKeyDown={handleKeyDown}
-                {...(dark && { 'data-coreui-theme': 'dark' })}
-                {...rest}
-                ref={forkedRef}
-              >
-                {children}
-              </div>
+              <CFocusTrap active={_visible && Boolean(backdrop)} restoreFocus>
+                <div
+                  className={classNames(
+                    {
+                      [`offcanvas${typeof responsive === 'string' ? '-' + responsive : ''}`]:
+                        responsive,
+                      [`offcanvas-${placement}`]: placement,
+                      showing: state === 'entering',
+                      show: state === 'entered',
+                      'show hiding': state === 'exiting',
+                    },
+                    className
+                  )}
+                  role="dialog"
+                  tabIndex={-1}
+                  onKeyDown={handleKeyDown}
+                  {...(dark && { 'data-coreui-theme': 'dark' })}
+                  {...rest}
+                  ref={forkedRef}
+                >
+                  {children}
+                </div>
+              </CFocusTrap>
             </CConditionalPortal>
           )}
         </Transition>
@@ -160,7 +162,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
         )}
       </>
     )
-  },
+  }
 )
 
 COffcanvas.propTypes = {

package/src/components/offcanvas/COffcanvasBody.tsx

@@ -16,7 +16,7 @@ export const COffcanvasBody = forwardRef<HTMLDivElement, COffcanvasBodyProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 COffcanvasBody.propTypes = {

package/src/components/offcanvas/COffcanvasHeader.tsx

@@ -16,7 +16,7 @@ export const COffcanvasHeader = forwardRef<HTMLDivElement, COffcanvasHeaderProps
         {children}
       </div>
     )
-  },
+  }
 )
 
 COffcanvasHeader.propTypes = {

package/src/components/offcanvas/COffcanvasTitle.tsx

@@ -23,7 +23,7 @@ export const COffcanvasTitle: PolymorphicRefForwardingComponent<'h5', COffcanvas
           {children}
         </Component>
       )
-    },
+    }
   )
 
 COffcanvasTitle.propTypes = {

package/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx

@@ -12,7 +12,7 @@ test('COffcanvasTitle customize', async () => {
   const { container } = render(
     <COffcanvasTitle className="bazinga" as="div">
       Test
-    </COffcanvasTitle>,
+    </COffcanvasTitle>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas-title')

package/src/components/pagination/CPagination.tsx

@@ -28,14 +28,14 @@ export const CPagination = forwardRef<HTMLUListElement, CPaginationProps>(
               [`justify-content-${align}`]: align,
               [`pagination-${size}`]: size,
             },
-            className,
+            className
           )}
         >
           {children}
         </ul>
       </nav>
     )
-  },
+  }
 )
 
 CPagination.propTypes = {

package/src/components/pagination/CPaginationItem.tsx

@@ -34,7 +34,7 @@ export const CPaginationItem: PolymorphicRefForwardingComponent<'a', CPagination
               active: rest.active,
               disabled: rest.disabled,
             },
-            className,
+            className
           )}
           {...(rest.active && { 'aria-current': 'page' })}
         >
@@ -49,7 +49,7 @@ export const CPaginationItem: PolymorphicRefForwardingComponent<'a', CPagination
           )}
         </li>
       )
-    },
+    }
   )
 
 CPaginationItem.propTypes = {

package/src/components/pagination/__tests__/CPagination.spec.tsx

@@ -12,7 +12,7 @@ test('CPagination customize', async () => {
   const { container } = render(
     <CPagination className="bazinga" aria-label="ariaLabel" size="lg">
       Test
-    </CPagination>,
+    </CPagination>
   )
   expect(container).toMatchSnapshot()
   let element = container.firstChild
@@ -32,7 +32,7 @@ test('CPagination example', async () => {
       <CPaginationItem>A</CPaginationItem>
       <CPaginationItem>B</CPaginationItem>
       <CPaginationItem>C</CPaginationItem>
-    </CPagination>,
+    </CPagination>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

@@ -12,7 +12,7 @@ test('CPaginationItem customize', async () => {
   const { container } = render(
     <CPaginationItem className="bazinga" active={true} as="h3" disabled={true}>
       Test
-    </CPaginationItem>,
+    </CPaginationItem>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/placeholder/CPlaceholder.tsx

@@ -93,7 +93,7 @@ export const CPlaceholder: PolymorphicRefForwardingComponent<'span', CPlaceholde
               [`placeholder-${size}`]: size,
             },
             repsonsiveClassNames,
-            className,
+            className
           )}
           {...rest}
           ref={ref}
@@ -101,7 +101,7 @@ export const CPlaceholder: PolymorphicRefForwardingComponent<'span', CPlaceholde
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CPlaceholder.propTypes = {

package/src/components/placeholder/__tests__/CPlaceholder.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CPlaceholder component', async () => {
 
 test('CPlaceholder customize', async () => {
   const { container } = render(
-    <CPlaceholder animation="glow" className="bazinga" color="secondary" size="lg" sm={7} />,
+    <CPlaceholder animation="glow" className="bazinga" color="secondary" size="lg" sm={7} />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/progress/CProgress.tsx

@@ -48,7 +48,7 @@ export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
             'progress-thin': thin,
             'progress-white': white,
           },
-          className,
+          className
         )}
         {...(value !== undefined && {
           role: 'progressbar',
@@ -64,7 +64,7 @@ export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
       >
         {React.Children.toArray(children).some(
           // @ts-expect-error displayName is set in the CProgressBar component
-          (child) => child.type && child.type.displayName === 'CProgressBar',
+          (child) => child.type && child.type.displayName === 'CProgressBar'
         ) ? (
           React.Children.map(children, (child) => {
             // @ts-expect-error displayName is set in the CProgressBar component
@@ -88,7 +88,7 @@ export const CProgress = forwardRef<HTMLDivElement, CProgressProps>(
         )}
       </div>
     )
-  },
+  }
 )
 
 CProgress.propTypes = {

package/src/components/progress/CProgressBar.tsx

@@ -45,7 +45,7 @@ export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
             [`progress-bar-${variant}`]: variant,
             'progress-bar-animated': animated,
           },
-          className,
+          className
         )}
         {...(!stacked && { style: { width: `${value}%` } })}
         {...rest}
@@ -54,7 +54,7 @@ export const CProgressBar = forwardRef<HTMLDivElement, CProgressBarProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 CProgressBar.propTypes = {
   animated: PropTypes.bool,

package/src/components/progress/__tests__/CProgress.spec.tsx

@@ -12,7 +12,7 @@ test('CProgress customize', async () => {
   const { container } = render(
     <CProgress className="bazinga" height={100} color="warning" value={50}>
       Test
-    </CProgress>,
+    </CProgress>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/progress/__tests__/CProgressBar.spec.tsx

@@ -12,7 +12,7 @@ test('CProgressBar customize', async () => {
   const { container } = render(
     <CProgressBar color="warning" className="bazinga" animated={true} value={50} variant="striped">
       Test
-    </CProgressBar>,
+    </CProgressBar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/sidebar/CSidebarFooter.tsx

@@ -16,7 +16,7 @@ export const CSidebarFooter = forwardRef<HTMLDivElement, CSidebarFooterProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CSidebarFooter.propTypes = {

package/src/components/sidebar/CSidebarHeader.tsx

@@ -16,7 +16,7 @@ export const CSidebarHeader = forwardRef<HTMLDivElement, CSidebarHeaderProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CSidebarHeader.propTypes = {

package/src/components/sidebar/CSidebarToggler.tsx

@@ -16,7 +16,7 @@ export const CSidebarToggler = forwardRef<HTMLButtonElement, CSidebarTogglerProp
         {children}
       </button>
     )
-  },
+  }
 )
 
 CSidebarToggler.propTypes = {

package/src/components/sidebar/__tests__/CSidebar.spec.tsx

@@ -21,7 +21,7 @@ test('CSidebar customize show', async () => {
       overlaid={true}
     >
       Test
-    </CSidebar>,
+    </CSidebar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -37,7 +37,7 @@ test('CSidebar customize hide', async () => {
   const { container } = render(
     <CSidebar className="bazinga" position="sticky" visible={false} overlaid={false}>
       Test
-    </CSidebar>,
+    </CSidebar>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')