@coreui/react-pro 4.1.3 → 4.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -35,9 +35,11 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@popperjs/core": "^2.11.0",
+    "@coreui/icons-pro": "^2.0.3",
+    "@coreui/icons-react": "^2.0.0",
+    "@popperjs/core": "^2.11.2",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -45,14 +47,14 @@
     "@types/react-dom": "^17.0.11",
     "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
-    "prop-types": "^15.8.0",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2",
-    "rollup": "^2.62.0",
+    "rollup": "^2.67.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "^17",

package/src/components/Types.tsx

@@ -133,6 +133,6 @@ export const textColorsPropType = PropTypes.oneOfType([
   PropTypes.string,
 ])
 
-export type Triggers = 'hover' | 'focus' | 'click'
+export type Triggers = 'hover' | 'focus' | 'click' | 'click-init'
 
-export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click'])
+export const triggerPropType = PropTypes.oneOf<Triggers>(['hover', 'focus', 'click', 'click-init'])

package/src/components/dropdown/CDropdown.tsx

@@ -138,12 +138,12 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     useEffect(() => {
       _visible &&
         setTimeout(() => {
-          window.addEventListener('click', handleClickOutside)
+          window.addEventListener('mouseup', handleClickOutside)
           window.addEventListener('keyup', handleKeyup)
         })
 
       return () => {
-        window.removeEventListener('click', handleClickOutside)
+        window.removeEventListener('mouseup', handleClickOutside)
         window.removeEventListener('keyup', handleKeyup)
       }
     }, [_visible])

package/src/components/dropdown/CDropdownToggleCustom.tsx

@@ -0,0 +1,81 @@
+import React, { FC, HTMLAttributes, useContext } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { Reference } from 'react-popper'
+
+import { Triggers, triggerPropType } from '../Types'
+
+import { CDropdownContext } from './CDropdown'
+
+export interface CDropdownToggleCustomProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean
+  /**
+   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+   *
+   * @type 'hover' | 'focus' | 'click'
+   */
+  trigger?: Triggers | Triggers[]
+}
+
+export const CDropdownToggleCustom: FC<CDropdownToggleCustomProps> = ({
+  children,
+  className,
+  disabled,
+  trigger = 'click',
+  ...rest
+}) => {
+  const { popper, visible, setVisible } = useContext(CDropdownContext)
+  const _className = classNames(className)
+
+  const triggers = {
+    ...((trigger === 'click' || trigger.includes('click')) &&
+      !disabled && {
+        onClick: (event: React.MouseEvent<HTMLElement>) => {
+          event.preventDefault()
+          setVisible(!visible)
+        },
+      }),
+    ...((trigger === 'click-init' || trigger.includes('click-init')) &&
+      !disabled && {
+        onClick: (event: React.MouseEvent<HTMLElement>) => {
+          event.preventDefault()
+          setVisible(true)
+        },
+      }),
+    ...((trigger === 'focus' || trigger.includes('focus')) &&
+      !disabled && {
+        onFocus: () => setVisible(true),
+        onBlur: () => setVisible(false),
+      }),
+  }
+
+  const togglerProps = {
+    className: _className,
+    'aria-expanded': visible,
+    ...triggers,
+  }
+
+  // We use any because Toggler can be `a` as well as `button`.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Toggler = (ref?: React.Ref<any>) => {
+    return (
+      <div {...togglerProps} {...rest} ref={ref}>
+        {children}
+      </div>
+    )
+  }
+
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+}
+
+CDropdownToggleCustom.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  trigger: triggerPropType,
+}
+
+CDropdownToggleCustom.displayName = 'CDropdownToggleCustom'

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

@@ -1,6 +1,8 @@
-import React, { ChangeEvent, forwardRef, useEffect, useMemo, useRef, useState } from 'react'
+import React, { ChangeEvent, forwardRef, useEffect, useMemo, useState } from 'react'
 import PropTypes from 'prop-types'
 
+import { cilArrowBottom, cilArrowTop, cilSwapVertical } from '@coreui/icons-pro'
+
 import {
   ColumnFilterValue,
   CSmartTableProps,
@@ -55,36 +57,9 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
       scopedColumns,
       selectable,
       sorterValue,
-      sortingIcon = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372" class="ci-primary"></polygon>',
-          ]}
-          key="csv"
-        />
-      ),
-      sortingIconAscending = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625" class="ci-primary"></polygon>',
-          ]}
-          key="cat"
-        />
-      ),
-      sortingIconDescending = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75" class="ci-primary"></polygon>',
-          ]}
-          key="cab"
-        />
-      ),
+      sortingIcon = <CIcon width={18} icon={cilSwapVertical} key="csv" />,
+      sortingIconAscending = <CIcon width={18} icon={cilArrowTop} key="cat" />,
+      sortingIconDescending = <CIcon width={18} icon={cilArrowBottom} key="cab" />,
       tableBodyProps,
       tableFootProps,
       tableFilter,
@@ -98,45 +73,40 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     ref,
   ) => {
     // instance data
-    const compData = useRef({ firstRun: true, columnFiltered: 0, changeItems: 0 }).current
-
-    const previousSorterValue = useRef<SorterValue>()
-    const previousItemsValue = useRef<Item[]>()
-
     const [_activePage, setActivePage] = useState<number>(activePage)
     const [_items, setItems] = useState<ItemInternal[]>([])
     const [_itemsPerPage, setItemsPerPage] = useState(itemsPerPage)
-    const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>(
-      columnFilterValue ? columnFilterValue : {},
-    )
+    const [columnFilterState, setColumnFilterState] = useState<ColumnFilterValue>({})
     const [selectedAll, setSelectedAll] = useState<boolean | string>()
-    const [sorterState, setSorterState] = useState<SorterValue>(previousSorterValue.current || {})
+    const [sorterState, setSorterState] = useState<SorterValue>({})
     const [tableFilterState, setTableFilterState] = useState<string>(
       tableFilterValue ? tableFilterValue : '',
     )
 
+    // watch
     useMemo(() => {
-      if (JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue)) {
-        previousSorterValue.current = sorterValue
-        setSorterState({ ...sorterValue })
+      if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
+        setActivePage(1)
       }
-    }, [sorterValue])
+
+      // Create the internal array of items
+      Array.isArray(items) &&
+        setItems(
+          items?.map((item: Item, index: number) => {
+            return { ...item, _id: index }
+          }),
+        )
+    }, [JSON.stringify(items)])
 
     useMemo(() => {
-      if (JSON.stringify(previousItemsValue.current) !== JSON.stringify(items)) {
-        if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
-          setActivePage(1)
-        }
-        previousItemsValue.current = items
-
-        Array.isArray(items) &&
-          setItems(
-            items?.map((item: Item, index: number) => {
-              return { ...item, _id: index }
-            }),
-          )
-      }
-    }, [items])
+      columnFilterValue && setColumnFilterState(columnFilterValue)
+    }, [JSON.stringify(columnFilterValue)])
+
+    useMemo(() => {
+      setSorterState({ ...sorterValue })
+    }, [JSON.stringify(sorterValue)])
+
+    useMemo(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
 
     // functions
 
@@ -225,17 +195,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     const itemsDataColumns = rawColumnNames.filter((name) => genCols.includes(name))
 
     // variables
-
-    useMemo(() => {
-      compData.columnFiltered++
-    }, [
-      JSON.stringify(columnFilter),
-      JSON.stringify(columnFilterState),
-      itemsDataColumns.join(''),
-      compData.changeItems,
-    ])
-
-    const columnFiltered: ItemInternal[] = useMemo(() => {
+    const filteredColumns: ItemInternal[] = useMemo(() => {
       let items = _items
       if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
         return items
@@ -249,10 +209,10 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         }
       })
       return items
-    }, [compData.columnFiltered, _items])
+    }, [JSON.stringify(columnFilterState), JSON.stringify(_items)])
 
-    const tableFiltered: ItemInternal[] = useMemo(() => {
-      let items = columnFiltered
+    const filteredTable: ItemInternal[] = useMemo(() => {
+      let items = filteredColumns
       if (
         !tableFilterState ||
         (tableFilter && typeof tableFilter === 'object' && tableFilter.external)
@@ -265,12 +225,7 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return !!itemsDataColumns.find((key) => valueContainFilter(item[key]))
       })
       return items
-    }, [
-      compData.columnFiltered,
-      tableFilterState,
-      JSON.stringify(tableFilter),
-      JSON.stringify(columnFiltered),
-    ])
+    }, [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)])
 
     const sortedItems: ItemInternal[] = useMemo(() => {
       const col = sorterState?.column
@@ -279,12 +234,11 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         !itemsDataColumns.includes(col) ||
         (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
       ) {
-        return tableFiltered
+        return filteredTable
       }
-      //if values in column are to be sorted by numeric value they all have to be type number
-      // const flip = sorterState.asc ? 1 : -1
+
       const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
-      const sorted = tableFiltered.slice().sort((item, item2) => {
+      const sorted = filteredTable.slice().sort((item, item2) => {
         const value = item[col]
         const value2 = item2[col]
         const a = typeof value === 'number' ? value : String(value).toLowerCase()
@@ -292,7 +246,13 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
         return a > b ? 1 * flip : b > a ? -1 * flip : 0
       })
       return sorted
-    }, [JSON.stringify(tableFiltered), JSON.stringify(sorterState), JSON.stringify(columnSorter)])
+    }, [
+      JSON.stringify(filteredTable),
+      JSON.stringify(sorterState),
+      JSON.stringify(columnSorter),
+      JSON.stringify(filteredColumns),
+      JSON.stringify(_items),
+    ])
 
     const numberOfPages: number = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1
 
@@ -332,21 +292,9 @@ export const CSmartTable = forwardRef<HTMLDivElement, CSmartTableProps>(
     }, [tableFilterState])
 
     useEffect(() => {
-      !compData.firstRun && onFilteredItemsChange && onFilteredItemsChange(sortedItems)
+      onFilteredItemsChange && onFilteredItemsChange(sortedItems)
     }, [JSON.stringify(sortedItems)])
 
-    // watch
-    useMemo(() => setItemsPerPage(itemsPerPage), [itemsPerPage])
-    useMemo(
-      () =>
-        JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue) &&
-        setSorterState({ ...sorterValue }),
-      [sorterValue],
-    )
-    useMemo(() => setColumnFilterState({ ...columnFilterValue }), [columnFilterValue])
-
-    compData.firstRun = false
-
     const handleRowChecked = (id: number, value: boolean) => {
       const newArr = [..._items]
       newArr[id]._selected = value

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

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types'
 import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'
 
+import { cilFilterX } from '@coreui/icons-pro'
+
 import CIcon from '@coreui/icons-react'
 
 interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
@@ -9,22 +11,7 @@ interface CSmartTableCleanerProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 export const CSmartTableCleaner = forwardRef<HTMLButtonElement, CSmartTableCleanerProps>(
-  (
-    {
-      content = (
-        <CIcon
-          width={18}
-          icon={[
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225" class="ci-primary"></polygon>',
-          ]}
-        />
-      ),
-      isFiltered,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ content = <CIcon width={18} icon={cilFilterX} />, isFiltered, ...rest }, ref) => {
     return (
       <button
         type="button"

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

@@ -59,8 +59,6 @@ export interface SorterValue {
 export interface TableFilter {
   lazy?: boolean
   external?: boolean
-  label?: string
-  placeholder?: string
 }
 
 export interface NoItemsView {
@@ -75,14 +73,9 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * @default 1
    */
   activePage?: number
-  /**
-   * A string of all className you want applied to the base component.
-   */
-  className?: string
   /**
    * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
    * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.
-   *
    */
   cleaner?: boolean
   /**
@@ -276,8 +269,6 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    * When set, displays table filter above table, allowing filtering by specific column.
    *
    * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
-   * - placeholder (String) - Sets custom table filter placeholder.
-   * - label (String) - Sets custom table filter label.
    * - external (Boolean) - Disables automatic filtering inside component.
    * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
    */

package/src/index.ts

@@ -39,6 +39,7 @@ import { CDropdownItem } from './components/dropdown/CDropdownItem'
 import { CDropdownItemPlain } from './components/dropdown/CDropdownItemPlain'
 import { CDropdownMenu } from './components/dropdown/CDropdownMenu'
 import { CDropdownToggle } from './components/dropdown/CDropdownToggle'
+import { CDropdownToggleCustom } from './components/dropdown/CDropdownToggleCustom'
 import { CCol } from './components/grid/CCol'
 import { CContainer } from './components/grid/CContainer'
 import { CRow } from './components/grid/CRow'
@@ -163,6 +164,7 @@ export {
   CDropdownItemPlain,
   CDropdownMenu,
   CDropdownToggle,
+  CDropdownToggleCustom,
   CCol,
   CContainer,
   CRow,