@coreui/react 5.7.0 → 5.8.0

package/src/components/form/CFormFeedback.tsx

@@ -38,7 +38,7 @@ export const CFormFeedback: PolymorphicRefForwardingComponent<'div', CFormFeedba
               [`invalid-${tooltip ? 'tooltip' : 'feedback'}`]: invalid,
               [`valid-${tooltip ? 'tooltip' : 'feedback'}`]: valid,
             },
-            className,
+            className
           )}
           {...rest}
           ref={ref}
@@ -46,7 +46,7 @@ export const CFormFeedback: PolymorphicRefForwardingComponent<'div', CFormFeedba
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CFormFeedback.propTypes = {

package/src/components/form/CFormFloating.tsx

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

package/src/components/form/CFormInput.tsx

@@ -76,14 +76,14 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
       valid,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const [value, setValue] = useState<React.ChangeEvent<HTMLInputElement>>()
 
     useEffect(() => {
       const timeOutId = setTimeout(
         () => value && onChange && onChange(value),
-        typeof delay === 'number' ? delay : 500,
+        typeof delay === 'number' ? delay : 500
       )
 
       return () => clearTimeout(timeOutId)
@@ -113,7 +113,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
               'is-invalid': invalid,
               'is-valid': valid,
             },
-            className,
+            className
           )}
           id={id}
           type={type}
@@ -125,7 +125,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
         </input>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CFormInput.propTypes = {

package/src/components/form/CFormLabel.tsx

@@ -20,7 +20,7 @@ export const CFormLabel = forwardRef<HTMLLabelElement, CFormLabelProps>(
         {children}
       </label>
     )
-  },
+  }
 )
 
 CFormLabel.propTypes = {

package/src/components/form/CFormRange.tsx

@@ -54,7 +54,7 @@ export const CFormRange = forwardRef<HTMLInputElement, CFormRangeProps>(
         <input type="range" className={classNames('form-range', className)} {...rest} ref={ref} />
       </>
     )
-  },
+  }
 )
 
 CFormRange.propTypes = {

package/src/components/form/CFormSelect.tsx

@@ -66,7 +66,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
       valid,
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <CFormControlWrapper
@@ -92,7 +92,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
               'is-invalid': invalid,
               'is-valid': valid,
             },
-            className,
+            className
           )}
           size={htmlSize}
           {...rest}
@@ -116,7 +116,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
         </select>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CFormSelect.propTypes = {

package/src/components/form/CFormSwitch.tsx

@@ -53,7 +53,7 @@ export const CFormSwitch = forwardRef<HTMLInputElement, CFormSwitchProps>(
             'is-invalid': invalid,
             'is-valid': valid,
           },
-          className,
+          className
         )}
       >
         <input
@@ -73,7 +73,7 @@ export const CFormSwitch = forwardRef<HTMLInputElement, CFormSwitchProps>(
         )}
       </div>
     )
-  },
+  }
 )
 
 CFormSwitch.propTypes = {

package/src/components/form/CFormTextarea.tsx

@@ -54,7 +54,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
       valid,
       ...rest
     },
-    ref,
+    ref
   ) => {
     return (
       <CFormControlWrapper
@@ -78,7 +78,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
               'is-invalid': invalid,
               'is-valid': valid,
             },
-            className,
+            className
           )}
           id={id}
           {...rest}
@@ -88,7 +88,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
         </textarea>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CFormTextarea.propTypes = {

package/src/components/form/CInputGroup.tsx

@@ -22,7 +22,7 @@ export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
           {
             [`input-group-${size}`]: size,
           },
-          className,
+          className
         )}
         {...rest}
         ref={ref}
@@ -30,7 +30,7 @@ export const CInputGroup = forwardRef<HTMLDivElement, CInputGroupProps>(
         {children}
       </div>
     )
-  },
+  }
 )
 
 CInputGroup.propTypes = {

package/src/components/form/CInputGroupText.tsx

@@ -24,7 +24,7 @@ export const CInputGroupText: PolymorphicRefForwardingComponent<'span', CInputGr
           {children}
         </Component>
       )
-    },
+    }
   )
 
 CInputGroupText.propTypes = {

package/src/components/form/__tests__/CForm.spec.tsx

@@ -13,7 +13,7 @@ test('CForm customize', async () => {
   const { container } = render(
     <CForm className="bazinga" validated={true}>
       Test
-    </CForm>,
+    </CForm>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -30,7 +30,7 @@ test('CForm example', async () => {
       <CButton type="submit" color="primary">
         E
       </CButton>
-    </CForm>,
+    </CForm>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/form/__tests__/CFormCheck.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CFormCheck component', async () => {
 
 test('CFormCheck customize button=false', async () => {
   const { container } = render(
-    <CFormCheck className="bazinga" id="id" inline={true} label="label" type="radio" />,
+    <CFormCheck className="bazinga" id="id" inline={true} label="label" type="radio" />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')
@@ -27,7 +27,7 @@ test('CFormCheck customize button=true', async () => {
       inline={true}
       label="label"
       type="radio"
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/form/__tests__/CFormControl.spec.tsx

@@ -18,7 +18,7 @@ test('CFormInput customize', async () => {
       size="lg"
       type="color"
       value="value"
-    />,
+    />
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('bazinga')

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/header/CHeaderDivider.tsx

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

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

package/src/components/header/CHeaderToggler.tsx

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

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

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

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

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

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

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

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

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

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

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

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