@coreui/react 5.7.1 → 5.8.0

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')

package/src/components/spinner/CSpinner.tsx

@@ -49,7 +49,7 @@ export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> =
       visuallyHiddenLabel = 'Loading...',
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <Component
@@ -59,7 +59,7 @@ export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> =
             [`spinner-${variant}-${size}`]: size,
             [`text-${color}`]: color,
           },
-          className,
+          className
         )}
         role="status"
         {...rest}
@@ -68,7 +68,7 @@ export const CSpinner: PolymorphicRefForwardingComponent<'div', CSpinnerProps> =
         <span className="visually-hidden">{visuallyHiddenLabel}</span>
       </Component>
     )
-  },
+  }
 )
 
 CSpinner.propTypes = {

package/src/components/spinner/__tests__/CSpinner.spec.tsx

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

package/src/components/table/CTable.tsx

@@ -151,7 +151,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
       tableHeadProps,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const columnNames = useMemo(() => getColumnNames(columns, items), [columns, items])
 
@@ -172,7 +172,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
               'table-striped': striped,
               'table-striped-columns': stripedColumns,
             },
-            className,
+            className
           )}
           {...rest}
           ref={ref}
@@ -236,7 +236,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
         </table>
       </CTableResponsiveWrapper>
     )
-  },
+  }
 )
 
 CTable.propTypes = {

package/src/components/table/CTableBody.tsx

@@ -27,7 +27,7 @@ export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableBody = forwardRef<HTMLTableSectionElement, CTableBodyProps>(
         {children}
       </tbody>
     )
-  },
+  }
 )
 
 CTableBody.propTypes = {

package/src/components/table/CTableDataCell.tsx

@@ -45,7 +45,7 @@ export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellPro
               'table-active': active,
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -54,7 +54,7 @@ export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellPro
         {children}
       </Component>
     )
-  },
+  }
 )
 
 CTableDataCell.propTypes = {

package/src/components/table/CTableFoot.tsx

@@ -27,7 +27,7 @@ export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableFoot = forwardRef<HTMLTableSectionElement, CTableFootProps>(
         {children}
       </tfoot>
     )
-  },
+  }
 )
 
 CTableFoot.propTypes = {

package/src/components/table/CTableHead.tsx

@@ -27,7 +27,7 @@ export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableHead = forwardRef<HTMLTableSectionElement, CTableHeadProps>(
         {children}
       </thead>
     )
-  },
+  }
 )
 
 CTableHead.propTypes = {

package/src/components/table/CTableHeaderCell.tsx

@@ -27,7 +27,7 @@ export const CTableHeaderCell = forwardRef<HTMLTableCellElement, CTableHeaderCel
             {
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -36,7 +36,7 @@ export const CTableHeaderCell = forwardRef<HTMLTableCellElement, CTableHeaderCel
         {children}
       </th>
     )
-  },
+  }
 )
 
 CTableHeaderCell.propTypes = {

package/src/components/table/CTableRow.tsx

@@ -37,7 +37,7 @@ export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
               'table-active': active,
               [`table-${color}`]: color,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
@@ -46,7 +46,7 @@ export const CTableRow = forwardRef<HTMLTableRowElement, CTableRowProps>(
         {children}
       </tr>
     )
-  },
+  }
 )
 
 CTableRow.propTypes = {

package/src/components/table/__tests__/CTable.spec.tsx

@@ -82,7 +82,7 @@ test('CTable customize', async () => {
           <CTableDataCell>Test</CTableDataCell>
         </CTableRow>
       </CTableBody>
-    </CTable>,
+    </CTable>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('table-responsive-xl')
@@ -144,7 +144,7 @@ test('CTable full example test', async () => {
           <CTableHeaderCell>Heading</CTableHeaderCell>
         </CTableRow>
       </CTableFoot>
-    </CTable>,
+    </CTable>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/table/__tests__/CTableBody.spec.tsx

@@ -21,7 +21,7 @@ test('CTableBody customize', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('table-info')

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -15,7 +15,7 @@ test('loads and displays CTableDataCell component', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
 })
@@ -32,7 +32,7 @@ test('CTableDataCell customize', async () => {
     </CTableBody>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild?.firstChild?.firstChild).toHaveClass('align-middle')

package/src/components/table/__tests__/CTableFoot.spec.tsx

@@ -21,7 +21,7 @@ test('CTableFoot customize', async () => {
     </CTableFoot>,
     {
       container: document.body.appendChild(table),
-    },
+    }
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('table-info')