@coreui/react-pro 4.13.1 → 5.0.0-alpha.1

package/src/components/multi-select/utils.ts

@@ -1,7 +1,7 @@
 import type { Option, OptionsGroup, SelectedOption } from './types'
 
-export const createOption = (text: string, options: (Option | OptionsGroup)[]) => {
-  const value = text.toLowerCase().replace(/\s/g, '-')
+export const createOption = (label: string, options: (Option | OptionsGroup)[]) => {
+  const value = label.toLowerCase().replace(/\s/g, '-')
   let uniqueValue = value
   let i = 1
 
@@ -13,7 +13,7 @@ export const createOption = (text: string, options: (Option | OptionsGroup)[]) =
   return [
     {
       value: uniqueValue,
-      text,
+      label,
       custom: true,
     },
   ]
@@ -28,10 +28,10 @@ export const filterOptionsList = (search: string, _options: (Option | OptionsGro
         option.options &&
         option.options.filter(
           (option: Option) =>
-            option.text && option.text.toLowerCase().includes(search.toLowerCase()),
+            option.lable && option.label.toLowerCase().includes(search.toLowerCase()),
         )
       if (
-        (option.text && option.text.toLowerCase().includes(search.toLowerCase())) ||
+        (option.lable && option.label.toLowerCase().includes(search.toLowerCase())) ||
         (options && options.length > 0)
       ) {
         optionsList.push(Object.assign({}, option, options && options.length > 0 && { options }))

package/src/components/nav/CNav.tsx

@@ -19,7 +19,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'tabs' | 'pills' | 'underline'
+  variant?: 'pills' | 'tabs' | 'underline'
 }
 
 export const CNav = forwardRef<HTMLDivElement | HTMLUListElement | HTMLOListElement, CNavProps>(
@@ -49,7 +49,7 @@ CNav.propTypes = {
   className: PropTypes.string,
   component: PropTypes.elementType,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['tabs', 'pills', 'underline']),
+  variant: PropTypes.oneOf(['pills', 'tabs', 'underline']),
 }
 
 CNav.displayName = 'CNav'

package/src/components/navbar/CNavbar.tsx

@@ -17,7 +17,7 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
    */
   color?: Colors
   /**
-   * Sets if the color of text should be colored for a light or dark dark background.
+   * Sets if the color of text should be colored for a light or dark background.
    */
   colorScheme?: 'dark' | 'light'
   /**
@@ -59,12 +59,12 @@ export const CNavbar = forwardRef<HTMLDivElement, CNavbarProps>(
           'navbar',
           {
             [`bg-${color}`]: color,
-            [`navbar-${colorScheme}`]: colorScheme,
             [typeof expand === 'boolean' ? 'navbar-expand' : `navbar-expand-${expand}`]: expand,
           },
           placement,
           className,
         )}
+        {...(colorScheme && { 'data-coreui-theme': colorScheme })}
         {...rest}
         ref={ref}
       >

package/src/components/offcanvas/COffcanvas.tsx

@@ -17,6 +17,10 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
    * A string of all className you want applied to the base component.
    */
   className?: string
+  /**
+   * Sets a darker color scheme.
+   */
+  dark?: boolean
   /**
    * Closes the offcanvas when escape key is pressed.
    */
@@ -59,6 +63,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
       children,
       backdrop = true,
       className,
+      dark,
       keyboard = true,
       onHide,
       onShow,
@@ -135,6 +140,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>(
                 role="dialog"
                 tabIndex={-1}
                 onKeyDown={handleKeyDown}
+                {...(dark && { 'data-coreui-theme': 'dark' })}
                 {...rest}
                 ref={forkedRef}
               >
@@ -161,6 +167,7 @@ COffcanvas.propTypes = {
   backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
   children: PropTypes.node,
   className: PropTypes.string,
+  dark: PropTypes.bool,
   keyboard: PropTypes.bool,
   onHide: PropTypes.func,
   onShow: PropTypes.func,

package/src/components/picker/CPicker.tsx

@@ -141,7 +141,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
       default: {
         return (
           <div
-            className={classNames('dropdown', 'picker', className, {
+            className={classNames(className, {
               show: _visible,
             })}
             onClick={() => !disabled && setVisible(true)}
@@ -152,16 +152,7 @@ export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
               React.cloneElement(toggler as React.ReactElement<any>, {
                 ref: togglerRef,
               })}
-            <div
-              className={classNames(
-                'dropdown-menu',
-                {
-                  show: _visible,
-                },
-                dropdownClassNames,
-              )}
-              ref={dropdownRef}
-            >
+            <div className={dropdownClassNames} ref={dropdownRef}>
               {children}
               {footer && footerContent}
             </div>

package/src/components/smart-table/CSmartTable.tsx

@@ -409,6 +409,8 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
             )}
             <CSmartTableBody
               clickableRows={clickableRows}
+              columnNames={columnNames}
+              columns={columns ?? columnNames}
               currentItems={currentItems}
               firstItemOnActivePageIndex={firstItemOnActivePageIndex}
               noItemsLabel={noItemsLabel}
@@ -416,7 +418,6 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
                 clickableRows && onRowClick && onRowClick(item, index, columnName, event)
               }
               onRowChecked={(item, value) => handleRowChecked(item, value)}
-              columnNames={columnNames}
               scopedColumns={scopedColumns}
               selectable={selectable}
               selected={_selected}

package/src/components/smart-table/CSmartTableBody.tsx

@@ -7,12 +7,13 @@ import { CTableDataCell, CTableRow } from '../table'
 
 import { isObjectInArray } from '../../utils'
 
-import type { Item, ScopedColumns } from './types'
-import { getClickedColumnName, getTableDataCellProps } from './utils'
+import type { Column, Item, ScopedColumns } from './types'
+import { getClickedColumnName, getColumnName, getTableDataCellProps, getTableDataCellStyles } from './utils'
 
 export interface CSmartTableBodyProps extends CTableBodyProps {
   clickableRows?: boolean
   columnNames: string[]
+  columns: (Column | string)[]
   currentItems: Item[]
   firstItemOnActivePageIndex: number
   noItemsLabel?: string | ReactNode
@@ -28,6 +29,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
     {
       clickableRows,
       columnNames,
+      columns,
       currentItems,
       firstItemOnActivePageIndex,
       noItemsLabel,
@@ -40,7 +42,7 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
     },
     ref,
   ) => {
-    const colspan: number = selectable ? columnNames.length + 1 : columnNames.length
+    const colspan: number = selectable ? columns.length + 1 : columns.length
 
     return (
       <CTableBody
@@ -84,7 +86,8 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                       />
                     </CTableDataCell>
                   )}
-                  {columnNames.map((colName, index) => {
+                  {columns.map((column, index) => {
+                    const colName = getColumnName(column)
                     return (
                       (scopedColumns &&
                         scopedColumns[colName] &&
@@ -95,7 +98,10 @@ export const CSmartTableBody = forwardRef<HTMLTableSectionElement, CSmartTableBo
                           },
                         )) ||
                       (item[colName] !== undefined && (
-                        <CTableDataCell {...getTableDataCellProps(item, colName)} key={index}>
+                        <CTableDataCell 
+                          {...getTableDataCellProps(column, item, colName)}
+                          style={getTableDataCellStyles(column, item, colName)}
+                          key={index}>
                           {item[colName]}
                         </CTableDataCell>
                       ))

package/src/components/smart-table/CSmartTableInterface.tsx

@@ -115,9 +115,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
   itemsPerPageOptions?: number[]
   /**
    * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
-   * - label (String) - replaces default label text
-   * - values (Array) - custom array of pagination values
-   * - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).
+   * - external (Boolean) - disables automatic 'itemsPerPage' change.
    */
   itemsPerPageSelect?: boolean | ItemsPerPageSelect
   /**

package/src/components/smart-table/types.ts

@@ -13,6 +13,8 @@ export type Column = {
   sorter?: boolean
   _style?: any
   _props?: CTableHeaderCellProps
+  _colStyle?: any
+  _colProps?: CTableDataCellProps
 }
 
 export type ColumnFilter = {
@@ -49,8 +51,6 @@ export type Item = {
 
 export type ItemsPerPageSelect = {
   external?: boolean
-  label?: string
-  values?: Array<number>
 }
 
 export type Pagination = {

package/src/components/smart-table/utils.ts

@@ -65,7 +65,7 @@ export const getClickedColumnName = (
   const closest = target.closest('tr')
   const children = closest ? Array.from(closest.children) : []
   const clickedCell = children.filter((child) => child.contains(target))[0]
-  return columnNames[children.indexOf(clickedCell)]
+  return columnNames[children.indexOf(clickedCell) - 1]
 }
 
 export const getColumnKey = (column: Column | string) =>
@@ -78,6 +78,14 @@ export const getColumnLabel = (column: Column | string) =>
       : pretifyName(column.key)
     : pretifyName(column)
 
+export const getColumnName = (column: string | Column) => {
+  if (typeof column === 'object') {
+    return column.key
+  }
+
+  return column
+}
+
 export const getColumnNames = (
   columns: (string | Column)[] | undefined,
   items: Item[],
@@ -217,15 +225,42 @@ export const getColumnValues = (items: Item[], key: string) => {
   return items.map((item) => item[key])
 }
 
-export const getTableDataCellProps = (item: Item, colName: string) => {
-  const props = item._cellProps && {
-    ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-    ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+export const getTableDataCellProps = (column: Column | string, item: Item, colName: string) => {
+  const props = {}
+
+  if (typeof column === 'object' && column._colProps) {
+    Object.assign(props, column._colProps)
+  }
+
+  if (item._cellProps && item._cellProps['all']) {
+    Object.assign(props, item._cellProps['all'])
+  }
+
+  if (item._cellProps && item._cellProps[colName]) {
+    Object.assign(props, item._cellProps[colName])
   }
 
   return props
 }
 
+export const getTableDataCellStyles = (column: Column | string, item: Item, colName: string) => {
+  const styles = {}
+
+  if (typeof column === 'object' && column._colStyle) {
+    Object.assign(styles, column._colStyle)
+  }
+
+  if (item._cellStyle && item._cellStyle['all']) {
+    Object.assign(styles, item._cellStyle['all'])
+  }
+
+  if (item._cellStyle && item._cellStyle[colName]) {
+    Object.assign(styles, item._cellStyle[colName])
+  }
+
+  return styles
+}
+
 export const getTableHeaderCellProps = (column: Column | string) => {
   if (typeof column === 'object' && column._props) {
     return column._props

package/src/components/time-picker/CTimePicker.tsx

@@ -272,14 +272,11 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     }
 
     const InputGroup = () => (
-      <div
-        className={classNames('input-group', 'picker-input-group', {
-          [`input-group-${size}`]: size,
-        })}
-      >
+      <div className="time-picker-input-group">
         <input
           autoComplete="off"
-          className="form-control"
+          className="time-picker-input"
+          // delay={true}
           disabled={disabled}
           onChange={(event) =>
             isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))
@@ -289,32 +286,18 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           required={required}
           ref={inputRef}
         />
-        {(indicator || cleaner) && (
-          <span className="input-group-text">
-            {indicator && (
-              <span className="picker-input-group-indicator">
-                {typeof indicator === 'boolean' ? (
-                  <span className="picker-input-group-icon time-picker-input-icon" />
-                ) : (
-                  indicator
-                )}
-              </span>
-            )}
-            {cleaner && date && (
-              <span
-                className="picker-input-group-cleaner"
-                role="button"
-                onClick={(event) => handleClear(event)}
-              >
-                {typeof cleaner === 'boolean' ? (
-                  <span className="picker-input-group-icon time-picker-cleaner-icon" />
-                ) : (
-                  cleaner
-                )}
-              </span>
-            )}
-          </span>
-        )}
+        {indicator &&
+          (typeof indicator === 'boolean' ? <div className="time-picker-indicator" /> : indicator)}
+        {cleaner &&
+          date &&
+          (typeof cleaner === 'boolean' ? (
+            <div className="time-picker-cleaner" onClick={(event) => handleClear(event)} />
+          ) : (
+            React.isValidElement(cleaner) &&
+            React.cloneElement(cleaner as React.ReactElement<any>, {
+              onClick: (event: React.MouseEvent<HTMLElement>) => handleClear(event),
+            })
+          ))}
       </div>
     )
 
@@ -323,7 +306,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         <>
           <span className="time-picker-inline-icon" />
           <select
-            className="form-select"
+            className="time-picker-inline-select"
             disabled={disabled}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('hours', event.target.value)
@@ -339,7 +322,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           </select>
           <>:</>
           <select
-            className="form-select"
+            className="time-picker-inline-select"
             disabled={disabled}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
               handleTimeChange('minutes', event.target.value)
@@ -357,7 +340,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             <>
               <>:</>
               <select
-                className="form-select"
+                className="time-picker-inline-select"
                 disabled={disabled}
                 onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                   handleTimeChange('seconds', event.target.value)
@@ -375,7 +358,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           )}
           {localizedTimePartials && localizedTimePartials.hour12 && (
             <select
-              className="form-select"
+              className="time-picker-inline-select"
               disabled={disabled}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
                 handleTimeChange('toggle', event.target.value)
@@ -451,7 +434,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           dropdownClassNames="time-picker-dropdown"
           footer={footer}
           footerContent={
-            <div className="picker-footer">
+            <div className="time-picker-footer">
               {cancelButton && (
                 <CButton
                   color={cancelButtonColor}

package/src/components/time-picker/utils.ts

@@ -16,7 +16,11 @@ export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
 export const convert24hTo12h = (hour: number) => hour % 12 || 12
 
 export const convertTimeToDate = (time: Date | string | null | undefined) =>
-  time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null
+  time
+    ? time instanceof Date
+      ? time
+      : new Date(`1970-01-01 ${time}`)
+    : null
 
 export const getAmPm = (date: Date, locale: string) => {
   if (date.toLocaleTimeString(locale).includes('AM')) {

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
+import { useColorModes } from './useColorModes'
 import { useForkedRef } from './useForkedRef'
 import { usePopper } from './usePopper'
 import { useStateWithCallback } from './useStateWithCallback'
 
-export { useForkedRef, usePopper, useStateWithCallback }
+export { useColorModes, useForkedRef, usePopper, useStateWithCallback }