npm - @coreui/react - Versions diffs - 5.7.1 → 5.8.0 - Mend

@coreui/react 5.7.1 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (833) hide show

package/src/components/form/__tests__/CFormFeedback.spec.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ test('loads and displays CFormFeedback component', async () => {
 test('CFormFeedback customize one', async () => {
   const { container } = render(
-    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={true} />,
+    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={true} />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('invalid-tooltip')
@@ -20,7 +20,7 @@ test('CFormFeedback customize one', async () => {
 test('CFormFeedback customize two', async () => {
   const { container } = render(
-    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={false} />,
+    <CFormFeedback className="bazinga" invalid={true} valid={true} tooltip={false} />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('invalid-feedback')

package/src/components/form/__tests__/CFormInput.spec.tsx CHANGED Viewed

@@ -26,7 +26,7 @@ test('CFormInput customize two', async () => {
       type="color"
       valid={true}
       value="#888888"
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('form-control-lg')

package/src/components/form/__tests__/CFormRange.spec.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ test('CFormRange customize', async () => {
       min={20}
       readOnly={true}
       value={80}
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('form-range')

package/src/components/form/__tests__/CFormSelect.spec.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ test('CFormSelect customize', async () => {
     <CFormSelect className="bazinga" size="lg">
       <option value="A">B</option>
       <option>C</option>
-    </CFormSelect>,
+    </CFormSelect>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/form/__tests__/CFormSwitch.spec.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ test('CFormSwitch customize', async () => {
       size="xl"
       type="radio"
       valid={true}
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('form-check')

package/src/components/form/__tests__/CFormText.spec.tsx CHANGED Viewed

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

package/src/components/form/__tests__/CFormTextarea.spec.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ test('CFormTextarea customize', async () => {
       valid={true}
       defaultValue="Some value"
       rows={2}
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('form-control-plaintext')

package/src/components/form/__tests__/CInputGroup.spec.tsx CHANGED Viewed

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

package/src/components/form/__tests__/CInputGroupText.spec.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ test('renders CInputGroupText component as a label', async () => {
   const { container } = render(
     <CInputGroupText as="label" htmlFor="input">
       Test
-    </CInputGroupText>,
+    </CInputGroupText>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/grid/CCol.tsx CHANGED Viewed

@@ -105,7 +105,7 @@ export const CCol = forwardRef<HTMLDivElement, CColProps>(
       <div
         className={classNames(
           repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'col',
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -113,7 +113,7 @@ export const CCol = forwardRef<HTMLDivElement, CColProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 const span = PropTypes.oneOfType([

package/src/components/grid/CContainer.tsx CHANGED Viewed

@@ -57,7 +57,7 @@ export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
       <div
         className={classNames(
           repsonsiveClassNames.length > 0 ? repsonsiveClassNames : 'container',
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -65,7 +65,7 @@ export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 CContainer.propTypes = {

package/src/components/grid/CRow.tsx CHANGED Viewed

@@ -95,7 +95,7 @@ export const CRow = forwardRef<HTMLDivElement, CRowProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 const bp = PropTypes.shape({

package/src/components/grid/__tests__/CCol.spec.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ test('CCol customize breakpoints are numbers', async () => {
   const { container } = render(
     <CCol className="bazinga" xs={1} sm={2} md={3} lg={4} xl={5} xxl={6}>
       Test
-    </CCol>,
+    </CCol>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -29,7 +29,7 @@ test('CCol customize breakpoints are boolean', async () => {
   const { container } = render(
     <CCol className="bazinga" xs={true} sm={true} md={true} lg={true} xl={true} xxl={true}>
       Test
-    </CCol>,
+    </CCol>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/grid/__tests__/CContainer.spec.tsx CHANGED Viewed

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

package/src/components/grid/__tests__/CRow.spec.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ test('CRow customize cols', async () => {
       xxl={{ cols: 6 }}
     >
       Test
-    </CRow>,
+    </CRow>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -36,7 +36,7 @@ test('CRow customize gutter single gutter', async () => {
   const { container } = render(
     <CRow className="bazinga" xs={{ gutter: 7 }}>
       Test
-    </CRow>,
+    </CRow>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -55,7 +55,7 @@ test('CRow customize gutter', async () => {
       xxl={{ gutter: 6 }}
     >
       Test
-    </CRow>,
+    </CRow>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -79,7 +79,7 @@ test('CRow customize gutterX', async () => {
       xxl={{ gutterX: 6 }}
     >
       Test
-    </CRow>,
+    </CRow>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -103,7 +103,7 @@ test('CRow customize gutterY', async () => {
       xxl={{ gutterY: 6 }}
     >
       Test
-    </CRow>,
+    </CRow>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

package/src/components/header/CHeader.tsx CHANGED Viewed

@@ -34,7 +34,7 @@ export const CHeader = forwardRef<HTMLDivElement, CHeaderProps>(
         )}
       </div>
     )
-  },
+  }
 )
 CHeader.propTypes = {

package/src/components/header/CHeaderDivider.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ export interface CHeaderDividerProps extends HTMLAttributes<HTMLDivElement> {
 export const CHeaderDivider = forwardRef<HTMLDivElement, CHeaderDividerProps>(
   ({ className, ...rest }, ref) => {
     return <div className={classNames('header-divider', className)} {...rest} ref={ref} />
-  },
+  }
 )
 CHeaderDivider.propTypes = {

package/src/components/header/CHeaderText.tsx CHANGED Viewed

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

package/src/components/header/CHeaderToggler.tsx CHANGED Viewed

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

package/src/components/header/__tests__/CHeader.spec.tsx CHANGED Viewed

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

package/src/components/header/__tests__/CHeaderBrand.spec.tsx CHANGED Viewed

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

package/src/components/header/__tests__/CHeaderNav.spec.tsx CHANGED Viewed

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

package/src/components/image/CImage.tsx CHANGED Viewed

@@ -38,14 +38,14 @@ export const CImage = forwardRef<HTMLImageElement, CImageProps>(
               rounded: rounded,
               'img-thumbnail': thumbnail,
             },
-            className,
+            className
           ) || undefined
         }
         {...rest}
         ref={ref}
       />
     )
-  },
+  }
 )
 CImage.propTypes = {

package/src/components/image/__tests__/CImage.spec.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ test('CImage customize one', async () => {
 test('CImage customize two', async () => {
   const { container } = render(
-    <CImage className="bazinga" align="center" fluid={true} rounded={true} thumbnail={true} />,
+    <CImage className="bazinga" align="center" fluid={true} rounded={true} thumbnail={true} />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('d-block')

package/src/components/index.ts CHANGED Viewed

@@ -13,6 +13,7 @@ export * from './close-button'
 export * from './collapse'
 export * from './conditional-portal'
 export * from './dropdown'
+export * from './focus-trap'
 export * from './footer'
 export * from './form'
 export * from './grid'

package/src/components/link/__tests__/CLink.spec.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ test('CLink customize', async () => {
   const { container } = render(
     <CLink className="bazinga" active={true} as="button" disabled type="submit">
       Test
-    </CLink>,
+    </CLink>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -25,7 +25,7 @@ test('CLink click on button', async () => {
   render(
     <CLink onClick={onClick} className="bazinga">
       Test
-    </CLink>,
+    </CLink>
   )
   expect(onClick).toHaveBeenCalledTimes(0)
   const link = document.querySelector('.bazinga')
@@ -40,7 +40,7 @@ test('CLink click on disabled button', async () => {
   render(
     <CLink onClick={click} className="bazinga" as="button" disabled>
       Test
-    </CLink>,
+    </CLink>
   )
   expect(click).toHaveBeenCalledTimes(0)
   const link = document.querySelector('.bazinga')

package/src/components/list-group/CListGroup.tsx CHANGED Viewed

@@ -41,7 +41,7 @@ export const CListGroup: PolymorphicRefForwardingComponent<'ul', CListGroupProps
           'list-group-flush': flush,
           [`list-group-${layout}`]: layout,
         },
-        className,
+        className
       )}
       {...rest}
       ref={ref}

package/src/components/list-group/CListGroupItem.tsx CHANGED Viewed

@@ -61,14 +61,14 @@ export const CListGroupItem: PolymorphicRefForwardingComponent<'li', CListGroupI
               active,
               disabled,
             },
-            className,
+            className
           )}
           {...rest}
         >
           {children}
         </Component>
       )
-    },
+    }
   )
 CListGroupItem.propTypes = {

package/src/components/list-group/__tests__/CListGroup.spec.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ test('CListGroup customize', async () => {
   const { container } = render(
     <CListGroup className="bazinga" as="h3" flush={true} layout="horizontal-xl">
       Test
-    </CListGroup>,
+    </CListGroup>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -27,7 +27,7 @@ test('CListGroup example', async () => {
       <CListGroupItem>A</CListGroupItem>
       <CListGroupItem>B</CListGroupItem>
       <CListGroupItem>C</CListGroupItem>
-    </CListGroup>,
+    </CListGroup>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/list-group/__tests__/CListGroupItem.spec.tsx CHANGED Viewed

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

package/src/components/modal/CModal.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/components/modal/CModalContent.tsx CHANGED Viewed

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

package/src/components/modal/CModalDialog.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/components/modal/CModalHeader.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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