@coreui/react 4.2.2 → 4.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "4.2.2",
+  "version": "4.3.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -36,24 +36,24 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.1",
+    "@rollup/plugin-typescript": "^8.3.4",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@types/react": "18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@types/react-transition-group": "^4.4.4",
+    "@testing-library/react": "^13.3.0",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-transition-group": "^4.4.5",
     "classnames": "^2.3.1",
     "prop-types": "^15.8.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-popper": "^2.2.5",
-    "react-transition-group": "^4.4.2",
-    "rollup": "^2.74.1",
+    "react-transition-group": "^4.4.5",
+    "rollup": "^2.77.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
   "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/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/form/CFormTextarea.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler, forwardRef, InputHTMLAttributes } from 'react'
+import React, { ChangeEventHandler, forwardRef, TextareaHTMLAttributes } from 'react'
 
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
@@ -7,7 +7,7 @@ import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWra
 
 export interface CFormTextareaProps
   extends CFormControlWrapperProps,
-    InputHTMLAttributes<HTMLTextAreaElement> {
+    TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * A string of all className you want applied to the component.
    */

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

@@ -19,6 +19,7 @@ test('CFormTextarea customize', async () => {
       readOnly={true}
       valid={true}
       defaultValue="Some value"
+      rows={2}
     />,
   )
   expect(container).toMatchSnapshot()

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/__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/popover/CPopover.tsx

@@ -7,6 +7,7 @@ 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
@@ -78,6 +79,10 @@ export const CPopover: FC<CPopoverProps> = ({
     placement: placement,
   })
 
+  useEffect(() => {
+    setVisible(visible)
+  }, [visible])
+
   const getTransitionClass = (state: string) => {
     return state === 'entering'
       ? 'fade'

package/src/components/table/CTable.tsx

@@ -3,12 +3,20 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
+import { CTableHead, CTableHeadProps } from './CTableHead'
+import { CTableHeaderCell, CTableHeaderCellProps } from './CTableHeaderCell'
+import { CTableBody } from './CTableBody'
+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 TableHTMLAttributes<HTMLTableElement> {
+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.
    *
@@ -24,23 +32,63 @@ export interface CTableProps extends TableHTMLAttributes<HTMLTableElement> {
    */
   borderless?: boolean
   /**
-   * Put the `<caption>` on the top of the table.
+   * Put the caption on the top if you set `caption="top"` of the table or set the text of the table caption.
    */
-  caption?: 'top'
+  caption?: 'top' | string
+  /**
+   * Set the text of the table caption and the caption on the top of the table.
+   *
+   * @since 4.3.0
+   */
+  captionTop?: string
   /**
    * A string of all className you want applied to the component.
    */
   className?: string
+  /**
+   * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
+   *
+   * In columns prop each array item represents one column. Item might be specified in two ways:
+   * String: each item define column name equal to item value.
+   * 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' },
+   * - _style (Object) - adds styles to the column header (useful for defining widths)
+   *
+   * @since 4.3.0
+   */
+  columns?: (string | Column)[]
   /**
    * Sets the color context of the component to one of CoreUI’s themed colors.
    *
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
+  /**
+   * Array of objects or strings, where each element represents one cell in the table footer.
+   *
+   * Example items:
+   * ['FooterCell', 'FooterCell', 'FooterCell']
+   * or
+   * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+   *
+   * @since 4.3.0
+   */
+  footer?: FooterItem[]
   /**
    * Enable a hover state on table rows within a `<CTableBody>`.
    */
   hover?: boolean
+  /**
+   * 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'}}}
+   *
+   * @since 4.3.0
+   */
+  items?: Item[]
   /**
    * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
    */
@@ -53,6 +101,43 @@ export interface CTableProps extends TableHTMLAttributes<HTMLTableElement> {
    * Add zebra-striping to any table row within the `<CTableBody>`.
    */
   striped?: boolean
+  /**
+   * Add zebra-striping to any table column.
+   *
+   * @since 4.3.0
+   */
+  stripedColumns?: boolean
+  /**
+   * Properties that will be passed to the table footer component.
+   *
+   * @link https://coreui.io/react/docs/components/table/#ctablefoot
+   * @since 4.3.0
+   */
+  tableFootProps?: CTableFootProps
+  /**
+   * Properties that will be passed to the table head component.
+   *
+   * @link https://coreui.io/react/docs/components/table/#ctablehead
+   * @since 4.3.0
+   */
+  tableHeadProps?: CTableHeadProps
+}
+
+export interface Column {
+  label?: string
+  key: string
+  _style?: any
+  _props?: CTableHeaderCellProps
+}
+
+export interface Item {
+  [key: string]: number | string | any
+  _props?: CTableRowProps
+}
+
+export interface FooterItem {
+  label?: string
+  _props?: CTableDataCellProps
 }
 
 export const CTable = forwardRef<HTMLTableElement, CTableProps>(
@@ -64,12 +149,19 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
       bordered,
       borderless,
       caption,
+      captionTop,
       className,
       color,
+      columns,
+      footer,
       hover,
+      items = [],
       responsive,
       small,
       striped,
+      stripedColumns,
+      tableFootProps,
+      tableHeadProps,
       ...rest
     },
     ref,
@@ -78,32 +170,99 @@ export const CTable = forwardRef<HTMLTableElement, CTableProps>(
       'table',
       {
         [`align-${align}`]: align,
-        [`caption-${caption}`]: caption,
         [`border-${borderColor}`]: borderColor,
+        [`caption-top`]: captionTop || caption === 'top',
         'table-bordered': bordered,
         'table-borderless': borderless,
         [`table-${color}`]: color,
         'table-hover': hover,
         'table-sm': small,
         'table-striped': striped,
+        'table-striped-columns': stripedColumns,
       },
       className,
     )
 
-    return responsive ? (
-      <div
-        className={
-          typeof responsive === 'boolean' ? 'table-responsive' : `table-responsive-${responsive}`
-        }
-      >
-        <table className={_className ? _className : undefined} {...rest} ref={ref}>
+    const rawColumnNames = columns
+      ? columns.map((column: Column) => {
+          if (typeof column === 'object') return column.key
+          else return column
+        })
+      : Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')
+
+    const pretifyName = (name: string) => {
+      return name
+        .replace(/[-_.]/g, ' ')
+        .replace(/ +/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ')
+    }
+
+    const label = (column: Column | string) =>
+      typeof column === 'object'
+        ? column.label !== undefined
+          ? column.label
+          : pretifyName(column.key)
+        : pretifyName(column)
+
+    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>
+            </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>
+              ))}
+            </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>
-      </div>
-    ) : (
-      <table className={_className ? _className : undefined} {...rest} ref={ref}>
-        {children}
-      </table>
+      </CTableResponsiveWrapper>
     )
   },
 )
@@ -113,17 +272,24 @@ CTable.propTypes = {
   borderColor: PropTypes.string,
   bordered: PropTypes.bool,
   borderless: PropTypes.bool,
-  caption: PropTypes.oneOf(['top']),
+  caption: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['top'])]),
+  captionTop: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
+  columns: PropTypes.array,
+  footer: PropTypes.array,
   hover: PropTypes.bool,
+  items: PropTypes.array,
   responsive: PropTypes.oneOfType([
     PropTypes.bool,
     PropTypes.oneOf<'sm' | 'md' | 'lg' | 'xl' | 'xxl'>(['sm', 'md', 'lg', 'xl', 'xxl']),
   ]),
   small: PropTypes.bool,
   striped: PropTypes.bool,
+  stripedColumns: PropTypes.bool,
+  tableFootProps: PropTypes.shape({ ...CTableFoot.propTypes }),
+  tableHeadProps: PropTypes.shape({ ...CTableHead.propTypes }),
 }
 
 CTable.displayName = 'CTable'

package/src/components/table/CTableDataCell.tsx

@@ -1,11 +1,12 @@
-import React, { forwardRef, TdHTMLAttributes } from 'react'
+import React, { forwardRef, TdHTMLAttributes, ThHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
 export interface CTableDataCellProps
-  extends Omit<TdHTMLAttributes<HTMLTableDataCellElement>, 'align'> {
+  extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'>,
+    Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
   /**
    * Highlight a table row or cell.
    */
@@ -13,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.
    */
@@ -24,9 +25,13 @@ export interface CTableDataCellProps
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
+  /**
+   * @ignore
+   */
+  colSpan?: number
 }
 
-export const CTableDataCell = forwardRef<HTMLTableDataCellElement, CTableDataCellProps>(
+export const CTableDataCell = forwardRef<HTMLTableCellElement, CTableDataCellProps>(
   ({ children, active, align, className, color, ...rest }, ref) => {
     const _className = classNames(
       {
@@ -37,10 +42,12 @@ export const CTableDataCell = forwardRef<HTMLTableDataCellElement, CTableDataCel
       className,
     )
 
+    const Component = rest.scope ? 'th' : 'td'
+
     return (
-      <td className={_className ? _className : undefined} {...rest} ref={ref}>
+      <Component className={_className ? _className : undefined} {...rest} ref={ref}>
         {children}
-      </td>
+      </Component>
     )
   },
 )

package/src/components/table/CTableHeaderCell.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 import { Colors, colorPropType } from '../Types'
 
-export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
   /**
    * A string of all className you want applied to the component.
    */
@@ -17,7 +17,7 @@ export interface CTableHeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderC
   color?: Colors
 }
 
-export const CTableHeaderCell = forwardRef<HTMLTableHeaderCellElement, CTableHeaderCellProps>(
+export const CTableHeaderCell = forwardRef<HTMLTableCellElement, CTableHeaderCellProps>(
   ({ children, className, color, ...rest }, ref) => {
     const _className = classNames(
       {

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