@coreui/react 4.5.0 → 4.5.2

package/dist/utils/index.d.ts

@@ -1,2 +1,2 @@
-import isVisible from './isVisible';
-export { isVisible };
+import isInViewport from './isInViewport';
+export { isInViewport };

package/dist/utils/isInViewport.d.ts

@@ -0,0 +1,2 @@
+declare const isInViewport: (element: HTMLElement) => boolean;
+export default isInViewport;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.5.0",
+  "version": "4.5.2",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -36,12 +36,12 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^23.0.7",
+    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^10.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/react": "18.0.26",
+    "@types/react": "18.0.27",
     "@types/react-dom": "^18.0.6",
     "@types/react-transition-group": "^4.4.5",
     "classnames": "^2.3.2",

package/src/components/accordion/CAccordionBody.tsx

@@ -18,7 +18,7 @@ export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
     const _className = classNames('accordion-body', className)
 
     return (
-      <CCollapse className="accordion-collpase" visible={visible}>
+      <CCollapse className="accordion-collapse" visible={visible}>
         <div className={_className} {...rest} ref={ref}>
           {children}
         </div>

package/src/components/carousel/CCarousel.tsx

@@ -11,7 +11,7 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isVisible } from '../../utils'
+import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../utils/hooks'
 
 export interface CCarouselProps extends HTMLAttributes<HTMLDivElement> {
@@ -157,7 +157,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
     const nextItemWhenVisible = () => {
       // Don't call next when the page isn't visible
       // or the carousel or its parent isn't visible
-      if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+      if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
         if (animating) {
           return
         }
@@ -195,7 +195,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
     }
 
     const handleScroll = () => {
-      if (!document.hidden && carouselRef.current && isVisible(carouselRef.current)) {
+      if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
         setVisible(true)
       } else {
         setVisible(false)

package/src/components/form/CFormControlWrapper.tsx

@@ -57,37 +57,31 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
   tooltipFeedback,
   valid,
 }) => {
+  const formControlValidation = () => (
+    <CFormControlValidation
+      describedby={describedby}
+      feedback={feedback}
+      feedbackInvalid={feedbackInvalid}
+      feedbackValid={feedbackValid}
+      floatingLabel={floatingLabel}
+      invalid={invalid}
+      tooltipFeedback={tooltipFeedback}
+      valid={valid}
+    />
+  )
   return floatingLabel ? (
     <CFormFloating className={floatingClassName}>
       {children}
       <CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
       {text && <CFormText id={describedby}>{text}</CFormText>}
-      <CFormControlValidation
-        describedby={describedby}
-        feedback={feedback}
-        feedbackInvalid={feedbackInvalid}
-        feedbackValid={feedbackValid}
-        floatingLabel={floatingLabel}
-        invalid={invalid}
-        tooltipFeedback={tooltipFeedback}
-        valid={valid}
-      />
+      {formControlValidation()}
     </CFormFloating>
   ) : (
     <>
       {label && <CFormLabel htmlFor={id}>{label}</CFormLabel>}
       {children}
       {text && <CFormText id={describedby}>{text}</CFormText>}
-      <CFormControlValidation
-        describedby={describedby}
-        feedback={feedback}
-        feedbackInvalid={feedbackInvalid}
-        feedbackValid={feedbackValid}
-        floatingLabel={floatingLabel}
-        invalid={invalid}
-        tooltipFeedback={tooltipFeedback}
-        valid={valid}
-      />
+      {formControlValidation()}
     </>
   )
 }

package/src/components/form/CFormInput.tsx

@@ -26,7 +26,7 @@ export interface CFormInputProps
    */
   onChange?: ChangeEventHandler<HTMLInputElement>
   /**
-   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly` [docs]
+   * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
    */
   plainText?: boolean
   /**

package/src/components/form/CFormSwitch.tsx

@@ -22,7 +22,7 @@ export interface CFormSwitchProps extends Omit<InputHTMLAttributes<HTMLInputElem
    */
   label?: string | ReactNode
   /**
-   * Size the component large or extra large. Works only with `switch` [docs]
+   * Size the component large or extra large. Works only with `switch`.
    */
   size?: 'lg' | 'xl'
   /**

package/src/components/grid/CCol.tsx

@@ -139,6 +139,10 @@ CCol.propTypes = {
   className: PropTypes.string,
   xs: col,
   sm: col,
+  md: col,
+  lg: col,
+  xl: col,
+  xxl: col,
 }
 
 CCol.displayName = 'CCol'

package/src/components/nav/CNavGroup.tsx

@@ -15,19 +15,19 @@ import { CNavContext } from '../sidebar/CSidebarNav'
 export interface CNavGroupProps {
   children?: ReactNode
   /**
-   * A string of all className you want applied to the component. [docs]
+   * A string of all className you want applied to the component.
    */
   className?: string
   /**
-   * Make nav group more compact by cutting all `padding` in half. [docs]
+   * Make nav group more compact by cutting all `padding` in half.
    */
   compact?: boolean
   /**
-   * Set group toggler label. [docs]
+   * Set group toggler label.
    */
   toggler?: string | ReactNode
   /**
-   * Show nav group items. [docs]
+   * Show nav group items.
    */
   visible?: boolean
   /**

package/src/components/offcanvas/COffcanvas.tsx

@@ -17,7 +17,7 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    */
   className?: string
   /**
-   * Closes the offcanvas when escape key is pressed [docs]
+   * Closes the offcanvas when escape key is pressed.
    */
   keyboard?: boolean
   /**

package/src/components/popover/CPopover.tsx

@@ -1,17 +1,17 @@
-import React, { FC, ReactNode, useRef, useState } from 'react'
+import React, { FC, HTMLAttributes, ReactNode, useRef, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
-
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Transition } from 'react-transition-group'
 
 import { Triggers, triggerPropType } from '../Types'
-import { useEffect } from 'react'
 
-export interface CPopoverProps {
-  // TODO: find solution to not use any
-  children: any
+export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
   /**
    * Content node for your component.
    */
@@ -50,6 +50,7 @@ export interface CPopoverProps {
 
 export const CPopover: FC<CPopoverProps> = ({
   children,
+  className,
   content,
   offset = [0, 8],
   onHide,
@@ -95,7 +96,7 @@ export const CPopover: FC<CPopoverProps> = ({
 
   return (
     <>
-      {React.cloneElement(children, {
+      {React.cloneElement(children as React.ReactElement<any>, {
         ref: setReferenceElement,
         ...((trigger === 'click' || trigger.includes('click')) && {
           onClick: () => setVisible(!_visible),
@@ -131,6 +132,7 @@ export const CPopover: FC<CPopoverProps> = ({
                     `popover bs-popover-${
                       placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
                     }`,
+                    className,
                     transitionClass,
                   )}
                   ref={setPopperElement}
@@ -153,7 +155,8 @@ export const CPopover: FC<CPopoverProps> = ({
 }
 
 CPopover.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node,
+  className: PropTypes.string,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,

package/src/components/sidebar/CSidebar.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { isVisible } from '../../utils'
+import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../utils/hooks'
 import { CBackdrop } from '../backdrop/CBackdrop'
 
@@ -95,7 +95,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     useEffect(() => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
 
       window.addEventListener('resize', () => handleResize())
       window.addEventListener('mouseup', handleClickOutside)
@@ -103,7 +103,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
       sidebarRef.current?.addEventListener('mouseup', handleOnClick)
       sidebarRef.current?.addEventListener('transitionend', () => {
-        sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+        sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
       })
 
       return () => {
@@ -113,7 +113,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
         sidebarRef.current?.removeEventListener('mouseup', handleOnClick)
         sidebarRef.current?.removeEventListener('transitionend', () => {
-          sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+          sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
         })
       }
     })
@@ -124,7 +124,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 
     const handleResize = () => {
       sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
-      sidebarRef.current && setInViewport(isVisible(sidebarRef.current))
+      sidebarRef.current && setInViewport(isInViewport(sidebarRef.current))
     }
 
     const handleKeyup = (event: Event) => {

package/src/components/table/CTable.tsx

@@ -53,7 +53,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
    * Object: item is object with following keys available as column configuration:
    * - key (required)(String) - define column name equal to item key.
    * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
-   * - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },
+   * - _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`,
    * - _style (Object) - adds styles to the column header (useful for defining widths)
    *
    * @since 4.3.0
@@ -69,13 +69,13 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
    * Array of objects or strings, where each element represents one cell in the table footer.
    *
    * Example items:
-   * ['FooterCell', 'FooterCell', 'FooterCell']
+   * `['FooterCell', 'FooterCell', 'FooterCell']`
    * or
-   * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+   * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
    *
    * @since 4.3.0
    */
-  footer?: FooterItem[]
+  footer?: (FooterItem | string)[]
   /**
    * Enable a hover state on table rows within a `<CTableBody>`.
    */
@@ -84,7 +84,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
    * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
    *
    * Example item:
-   * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
+   * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
    *
    * @since 4.3.0
    */
@@ -155,7 +155,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
       columns,
       footer,
       hover,
-      items = [],
+      items,
       responsive,
       small,
       striped,
@@ -188,7 +188,7 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
           if (typeof column === 'object') return column.key
           else return column
         })
-      : Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')
+      : Object.keys((items && items[0]) || {}).filter((el) => el.charAt(0) !== '_')
 
     const pretifyName = (name: string) => {
       return name
@@ -253,8 +253,11 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
           {footer && (
             <CTableFoot {...tableFootProps}>
               <CTableRow>
-                {footer.map((item: FooterItem, index: number) => (
-                  <CTableDataCell {...(item._props && { ...item._props })} key={index}>
+                {footer.map((item: FooterItem | string, index: number) => (
+                  <CTableDataCell
+                    {...(typeof item === 'object' && item._props && { ...item._props })}
+                    key={index}
+                  >
                     {typeof item === 'object' ? item.label : item}
                   </CTableDataCell>
                 ))}

package/src/components/tooltip/CTooltip.tsx

@@ -1,6 +1,5 @@
-import React, { FC, ReactNode, useRef, useState } from 'react'
+import React, { FC, HTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { usePopper } from 'react-popper'
@@ -8,9 +7,11 @@ import { Transition } from 'react-transition-group'
 
 import { Triggers, triggerPropType } from '../Types'
 
-export interface CTooltipProps {
-  // TODO: find solution to not use any
-  children: any
+export interface CTooltipProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string
   /**
    * Content node for your component.
    */
@@ -45,6 +46,7 @@ export interface CTooltipProps {
 
 export const CTooltip: FC<CTooltipProps> = ({
   children,
+  className,
   content,
   offset = [0, 0],
   onHide,
@@ -73,6 +75,10 @@ export const CTooltip: FC<CTooltipProps> = ({
     placement: placement,
   })
 
+  useEffect(() => {
+    setVisible(visible)
+  }, [visible])
+
   const getTransitionClass = (state: string) => {
     return state === 'entering'
       ? 'fade'
@@ -85,7 +91,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 
   return (
     <>
-      {React.cloneElement(children, {
+      {React.cloneElement(children as React.ReactElement<any>, {
         ref: setReferenceElement,
         ...((trigger === 'click' || trigger.includes('click')) && {
           onClick: () => setVisible(!_visible),
@@ -121,6 +127,7 @@ export const CTooltip: FC<CTooltipProps> = ({
                     `tooltip bs-tooltip-${
                       placement === 'left' ? 'start' : placement === 'right' ? 'end' : placement
                     }`,
+                    className,
                     transitionClass,
                   )}
                   ref={setPopperElement}
@@ -142,7 +149,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 }
 
 CTooltip.propTypes = {
-  children: PropTypes.any,
+  children: PropTypes.node,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   offset: PropTypes.any, // TODO: find good proptype
   onHide: PropTypes.func,

package/src/utils/index.ts

@@ -1,3 +1,3 @@
-import isVisible from './isVisible'
+import isInViewport from './isInViewport'
 
-export { isVisible }
+export { isInViewport }

package/src/utils/isInViewport.ts

@@ -0,0 +1,11 @@
+const isInViewport = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    Math.floor(rect.top) >= 0 &&
+    Math.floor(rect.left) >= 0 &&
+    Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
+    Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export default isInViewport

package/src/utils/isVisible.ts

@@ -1,11 +0,0 @@
-const isVisible = (element: HTMLElement) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
-export default isVisible