@coreui/react 4.3.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -36,24 +36,24 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/react": "18.0.15",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "18.0.19",
     "@types/react-dom": "^18.0.6",
     "@types/react-transition-group": "^4.4.5",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-popper": "^2.2.5",
-    "react-transition-group": "^4.4.2",
-    "rollup": "^2.75.7",
+    "react-transition-group": "^4.4.5",
+    "rollup": "^2.79.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/alert/__tests__/__snapshots__/CAlert.spec.tsx.snap

@@ -10,6 +10,7 @@ exports[`CAlert customize 1`] = `
     <button
       aria-label="Close"
       class="btn btn-close"
+      type="button"
     />
   </div>
 </div>

package/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`CCloseButton customize 1`] = `
     aria-label="Close"
     class="btn btn-close btn-close-white bazinga"
     disabled=""
+    type="button"
   >
     Test
   </button>
@@ -17,6 +18,7 @@ exports[`loads and displays CCloseButton component 1`] = `
   <button
     aria-label="Close"
     class="btn btn-close"
+    type="button"
   >
     Test
   </button>

package/src/components/carousel/CCarousel.tsx

@@ -235,7 +235,7 @@ export const CCarousel = forwardRef<HTMLDivElement, CCarouselProps>(
           <div className="carousel-inner">
             {Children.map(children, (child, index) => {
               if (React.isValidElement(child)) {
-                return React.cloneElement(child, {
+                return React.cloneElement(child as React.ReactElement<any>, {
                   active: active === index ? true : false,
                   direction: direction,
                   key: index,

package/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`CCloseButton customize 1`] = `
     aria-label="Close"
     class="btn btn-close btn-close-white bazinga"
     disabled=""
+    type="button"
   />
 </div>
 `;
@@ -15,6 +16,7 @@ exports[`loads and displays CCloseButton component 1`] = `
   <button
     aria-label="Close"
     class="btn btn-close"
+    type="button"
   />
 </div>
 `;

package/src/components/dropdown/CDropdown.tsx

@@ -56,10 +56,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   dark?: boolean
   /**
    * Sets a specified  direction and location of the dropdown menu.
-   *
-   * @type 'dropup' | 'dropend' | 'dropstart'
    */
-  direction?: 'dropup' | 'dropend' | 'dropstart'
+  direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
   /**
    * Callback fired when the component requests to be hidden.
    */
@@ -146,7 +144,11 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       {
         show: _visible,
       },
-      direction,
+      direction === 'center'
+        ? 'dropdown-center'
+        : direction === 'dropup-center'
+        ? 'dropup dropup-center'
+        : direction,
       className,
     )
 
@@ -202,7 +204,7 @@ CDropdown.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   dark: PropTypes.bool,
-  direction: PropTypes.oneOf(['dropup', 'dropend', 'dropstart']),
+  direction: PropTypes.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: placementPropType,

package/src/components/dropdown/CDropdownMenu.tsx

@@ -86,10 +86,18 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
 
   let _placement: Placements = placement
 
+  if (direction === 'center') {
+    _placement = 'bottom'
+  }
+
   if (direction === 'dropup') {
     _placement = 'top-start'
   }
 
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
   if (direction === 'dropend') {
     _placement = 'right-start'
   }

package/src/components/dropdown/CDropdownToggle.tsx

@@ -75,7 +75,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const Toggler = (ref?: React.Ref<any>) => {
     return custom && React.isValidElement(children) ? (
       <>
-        {React.cloneElement(children, {
+        {React.cloneElement(children as React.ReactElement<any>, {
           'aria-expanded': visible,
           ...(!rest.disabled && { ...triggers }),
           ref: useForkedRef(ref, dropdownToggleRef),

package/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.tsx.snap

@@ -6,6 +6,7 @@ exports[`CFormTextarea customize 1`] = `
     class="form-control-plaintext is-invalid is-valid bazinga"
     disabled=""
     readonly=""
+    rows="2"
   >
     Some value
   </textarea>

package/src/components/modal/CModal.tsx

@@ -171,6 +171,12 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     useLayoutEffect(() => {
       if (_visible) {
         document.body.classList.add('modal-open')
+
+        if (backdrop) {
+          document.body.style.overflow = 'hidden'
+          document.body.style.paddingRight = '0px'
+        }
+
         setTimeout(
           () => {
             modalRef.current?.focus()
@@ -179,8 +185,19 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         )
       } else {
         document.body.classList.remove('modal-open')
+
+        if (backdrop) {
+          document.body.style.removeProperty('overflow')
+          document.body.style.removeProperty('padding-right')
+        }
+      }
+      return () => {
+        document.body.classList.remove('modal-open')
+        if (backdrop) {
+          document.body.style.removeProperty('overflow')
+          document.body.style.removeProperty('padding-right')
+        }
       }
-      return () => document.body.classList.remove('modal-open')
     }, [_visible])
 
     const handleClickOutside = (event: Event) => {

package/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.tsx.snap

@@ -9,6 +9,7 @@ exports[`CModalHeader customize 1`] = `
     <button
       aria-label="Close"
       class="btn btn-close"
+      type="button"
     />
   </div>
 </div>
@@ -23,6 +24,7 @@ exports[`loads and displays CModalHeader component 1`] = `
     <button
       aria-label="Close"
       class="btn btn-close"
+      type="button"
     />
   </div>
 </div>

package/src/components/nav/CNavGroup.tsx

@@ -124,7 +124,10 @@ export const CNavGroup = forwardRef<HTMLLIElement, CNavGroupProps>(
             >
               {React.Children.map(children, (child, index) => {
                 if (React.isValidElement(child)) {
-                  return React.cloneElement(child, { key: index, idx: `${idx}.${index}` })
+                  return React.cloneElement(child as React.ReactElement<any>, {
+                    key: index,
+                    idx: `${idx}.${index}`,
+                  })
                 }
                 return
               })}

package/src/components/sidebar/CSidebarNav.tsx

@@ -29,7 +29,10 @@ export const CSidebarNav = forwardRef<HTMLUListElement, CSidebarNavProps>(
         <CNavContext.Provider value={CNavContextValues}>
           {React.Children.map(children, (child, index) => {
             if (React.isValidElement(child)) {
-              return React.cloneElement(child, { key: index, idx: `${index}` })
+              return React.cloneElement(child as React.ReactElement<any>, {
+                key: index,
+                idx: `${index}`,
+              })
             }
             return
           })}

package/src/components/table/CTable.tsx

@@ -10,12 +10,13 @@ import { CTableDataCell, CTableDataCellProps } from './CTableDataCell'
 import { CTableRow, CTableRowProps } from './CTableRow'
 import { CTableFoot, CTableFootProps } from './CTableFoot'
 import { CTableCaption } from './CTableCaption'
+import { CTableResponsiveWrapper } from './CTableResponsiveWrapper'
 
 export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>, 'align'> {
   /**
    * Set the vertical aligment.
    */
-  align?: 'bottom' | 'middle' | 'top'
+  align?: 'bottom' | 'middle' | 'top' | string
   /**
    * Sets the border color of the component to one of CoreUI’s themed colors.
    *
@@ -206,72 +207,62 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
           : pretifyName(column.key)
         : pretifyName(column)
 
-    const Table = () => (
-      <table className={_className} {...rest} ref={ref}>
-        {((caption && caption !== 'top') || captionTop) && (
-          <CTableCaption>{caption || captionTop}</CTableCaption>
-        )}
-        {columns && (
-          <CTableHead {...tableHeadProps}>
-            <CTableRow>
-              {columns.map((column: Column, index: number) => (
-                <CTableHeaderCell
-                  {...(column._props && { ...column._props })}
-                  {...(column._style && { style: { ...column._style } })}
-                  key={index}
-                >
-                  {label(column)}
-                </CTableHeaderCell>
-              ))}
-            </CTableRow>
-          </CTableHead>
-        )}
-        {items && (
-          <CTableBody>
-            {items.map((item: Item, index: number) => (
-              <CTableRow {...(item._props && { ...item._props })} key={index}>
-                {rawColumnNames.map((colName: string, index: number) => {
-                  return item[colName] ? (
-                    <CTableDataCell
-                      {...(item._cellProps && {
-                        ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-                        ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-                      })}
-                      key={index}
-                    >
-                      {item[colName]}
-                    </CTableDataCell>
-                  ) : null
-                })}
+    return (
+      <CTableResponsiveWrapper responsive={responsive}>
+        <table className={_className} {...rest} ref={ref}>
+          {((caption && caption !== 'top') || captionTop) && (
+            <CTableCaption>{caption || captionTop}</CTableCaption>
+          )}
+          {columns && (
+            <CTableHead {...tableHeadProps}>
+              <CTableRow>
+                {columns.map((column: Column, index: number) => (
+                  <CTableHeaderCell
+                    {...(column._props && { ...column._props })}
+                    {...(column._style && { style: { ...column._style } })}
+                    key={index}
+                  >
+                    {label(column)}
+                  </CTableHeaderCell>
+                ))}
               </CTableRow>
-            ))}
-          </CTableBody>
-        )}
-        {children}
-        {footer && (
-          <CTableFoot {...tableFootProps}>
-            <CTableRow>
-              {footer.map((item: FooterItem, index: number) => (
-                <CTableDataCell {...(item._props && { ...item._props })} key={index}>
-                  {typeof item === 'object' ? item.label : item}
-                </CTableDataCell>
+            </CTableHead>
+          )}
+          {items && (
+            <CTableBody>
+              {items.map((item: Item, index: number) => (
+                <CTableRow {...(item._props && { ...item._props })} key={index}>
+                  {rawColumnNames.map((colName: string, index: number) => {
+                    return item[colName] ? (
+                      <CTableDataCell
+                        {...(item._cellProps && {
+                          ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+                          ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+                        })}
+                        key={index}
+                      >
+                        {item[colName]}
+                      </CTableDataCell>
+                    ) : null
+                  })}
+                </CTableRow>
               ))}
-            </CTableRow>
-          </CTableFoot>
-        )}
-      </table>
-    )
-
-    return responsive ? (
-      <div
-        className={
-          typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
-        }
-      >
-        <Table />
-      </div>
-    ) : (
-      <Table />
+            </CTableBody>
+          )}
+          {children}
+          {footer && (
+            <CTableFoot {...tableFootProps}>
+              <CTableRow>
+                {footer.map((item: FooterItem, index: number) => (
+                  <CTableDataCell {...(item._props && { ...item._props })} key={index}>
+                    {typeof item === 'object' ? item.label : item}
+                  </CTableDataCell>
+                ))}
+              </CTableRow>
+            </CTableFoot>
+          )}
+        </table>
+      </CTableResponsiveWrapper>
     )
   },
 )

package/src/components/table/CTableDataCell.tsx

@@ -14,7 +14,7 @@ export interface CTableDataCellProps
   /**
    * Set the vertical aligment.
    */
-  align?: 'bottom' | 'middle' | 'top'
+  align?: 'bottom' | 'middle' | 'top' | string
   /**
    * A string of all className you want applied to the component.
    */
@@ -25,6 +25,10 @@ export interface CTableDataCellProps
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
+  /**
+   * @ignore
+   */
+  colSpan?: number
 }
 
 export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellProps>(

package/src/components/table/CTableResponsiveWrapper.tsx

@@ -0,0 +1,39 @@
+import React, { FC, HTMLAttributes } from 'react'
+import PropTypes from 'prop-types'
+
+export interface CTableResponsiveWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  children: any
+  /**
+   * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+   */
+  responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+}
+
+export const CTableResponsiveWrapper: FC<CTableResponsiveWrapperProps> = ({
+  children,
+  responsive,
+  ...rest
+}) => {
+  return responsive ? (
+    <div
+      className={
+        typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
+      }
+      {...rest}
+    >
+      {children}
+    </div>
+  ) : (
+    children
+  )
+}
+
+CTableResponsiveWrapper.propTypes = {
+  children: PropTypes.any,
+  responsive: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
+  ]),
+}
+
+CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper'

package/src/components/table/CTableRow.tsx

@@ -12,7 +12,7 @@ export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   /**
    * Set the vertical aligment.
    */
-  align?: 'bottom' | 'middle' | 'top'
+  align?: 'bottom' | 'middle' | 'top' | string
   /**
    * A string of all className you want applied to the component.
    */

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

@@ -17,6 +17,51 @@ test('loads and displays CTable component', async () => {
   expect(container).toMatchSnapshot()
 })
 
+test('loads and displays CTable component - new way', async () => {
+  const columns = [
+    {
+      key: 'id',
+      label: '#',
+      _props: { scope: 'col' },
+    },
+    'class',
+    {
+      key: 'heading_1',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+    {
+      key: 'heading_2',
+      label: 'Heading',
+      _props: { scope: 'col' },
+    },
+  ]
+  const items = [
+    {
+      id: 1,
+      class: 'Mark',
+      heading_1: 'Otto',
+      heading_2: '@mdo',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 2,
+      class: 'Jacob',
+      heading_1: 'Thornton',
+      heading_2: '@fat',
+      _cellProps: { id: { scope: 'row' } },
+    },
+    {
+      id: 3,
+      class: 'Larry the Bird',
+      heading_2: '@twitter',
+      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
+    },
+  ]
+  const { container } = render(<CTable columns={columns} items={items} />)
+  expect(container).toMatchSnapshot()
+})
+
 test('CTable customize', async () => {
   const { container } = render(
     <CTable

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

@@ -6,8 +6,9 @@ exports[`CTable customize 1`] = `
     class="table-responsive-xl"
   >
     <table
-      class="table align-middle caption-top border-primary table-bordered table-borderless table-info table-hover table-sm table-striped bazinga"
+      class="table align-middle border-primary caption-top table-bordered table-borderless table-info table-hover table-sm table-striped bazinga"
     >
+      <tbody />
       <tbody>
         <tr>
           <td>
@@ -25,6 +26,7 @@ exports[`CTable full example test 1`] = `
   <table
     class="table caption-top"
   >
+    <tbody />
     <caption>
       List of users
     </caption>
@@ -108,10 +110,92 @@ exports[`CTable full example test 1`] = `
 </div>
 `;
 
+exports[`loads and displays CTable component - new way 1`] = `
+<div>
+  <table
+    class="table"
+  >
+    <thead>
+      <tr>
+        <th
+          scope="col"
+        >
+          #
+        </th>
+        <th>
+          Class
+        </th>
+        <th
+          scope="col"
+        >
+          Heading
+        </th>
+        <th
+          scope="col"
+        >
+          Heading
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th
+          scope="row"
+        >
+          1
+        </th>
+        <td>
+          Mark
+        </td>
+        <td>
+          Otto
+        </td>
+        <td>
+          @mdo
+        </td>
+      </tr>
+      <tr>
+        <th
+          scope="row"
+        >
+          2
+        </th>
+        <td>
+          Jacob
+        </td>
+        <td>
+          Thornton
+        </td>
+        <td>
+          @fat
+        </td>
+      </tr>
+      <tr>
+        <th
+          scope="row"
+        >
+          3
+        </th>
+        <td
+          colspan="2"
+        >
+          Larry the Bird
+        </td>
+        <td>
+          @twitter
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;
+
 exports[`loads and displays CTable component 1`] = `
 <div>
   <table
     class="table"
-  />
+  >
+    <tbody />
+  </table>
 </div>
 `;

package/src/components/toast/CToast.tsx

@@ -153,7 +153,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                 aria-atomic="true"
                 role="alert"
                 onMouseEnter={() => clearTimeout(timeout.current)}
-                onMouseLeave={() => _autohide}
+                onMouseLeave={() => _autohide()}
                 {...rest}
                 key={key}
                 ref={forkedRef}