@coreui/react-pro 4.1.2 → 4.2.0-beta.0

package/src/components/dropdown/CDropdownMenu.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { ElementType, FC, HTMLAttributes, useContext } from 'react'
+import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -35,7 +35,57 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   component: Component = 'ul',
   ...rest
 }) => {
-  const { alignment, dark, direction, placement, popper, visible } = useContext(CDropdownContext)
+  const {
+    alignment,
+    autoClose,
+    dark,
+    direction,
+    dropdownToggleRef,
+    placement,
+    popper,
+    visible,
+    setVisible,
+  } = useContext(CDropdownContext)
+
+  const dropdownMenuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    visible && window.addEventListener('mouseup', handleMouseUp)
+    visible && window.addEventListener('keyup', handleKeyup)
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+    }
+  }, [visible])
+
+  const handleKeyup = (event: Event) => {
+    if (autoClose === false) {
+      return
+    }
+    if (!dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+      setVisible(false)
+    }
+  }
+  const handleMouseUp = (event: Event) => {
+    if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      return
+    }
+    if (autoClose === true) {
+      setVisible(false)
+      return
+    }
+    if (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+      setVisible(false)
+      return
+    }
+    if (
+      autoClose === 'outside' &&
+      !dropdownMenuRef.current?.contains(event.target as HTMLElement)
+    ) {
+      setVisible(false)
+    }
+  }
 
   let _placement: Placements = placement
 
@@ -101,7 +151,9 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   return popper && visible ? (
-    <Popper placement={_placement}>{({ ref, style }) => dropdownMenuComponent(style, ref)}</Popper>
+    <Popper innerRef={dropdownMenuRef} placement={_placement}>
+      {({ ref, style }) => dropdownMenuComponent(style, ref)}
+    </Popper>
   ) : (
     dropdownMenuComponent()
   )

package/src/components/dropdown/CDropdownToggle.tsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
+import { useForkedRef } from '../../utils/hooks'
+
 import { Triggers, triggerPropType } from '../Types'
 
 import { CButton, CButtonProps } from '../button/CButton'
@@ -13,6 +15,10 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Enables pseudo element caret on toggler.
    */
   caret?: boolean
+  /**
+   * Create a custom toggler which accepts any content.
+   */
+  custom?: boolean
   /**
    * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
    */
@@ -28,12 +34,13 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
 export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   children,
   caret = true,
+  custom,
   className,
   split,
   trigger = 'click',
   ...rest
 }) => {
-  const { popper, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
   const _className = classNames(
     {
       'dropdown-toggle': caret,
@@ -59,31 +66,47 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const togglerProps = {
     className: _className,
     'aria-expanded': visible,
+    ...(!rest.disabled && { ...triggers }),
     ...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 variant === 'nav-item' ? (
-      <a href="#" {...togglerProps} ref={ref}>
+    return custom && React.isValidElement(children) ? (
+      <>
+        {React.cloneElement(children, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: useForkedRef(ref, dropdownToggleRef),
+        })}
+      </>
+    ) : variant === 'nav-item' ? (
+      <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
         {children}
       </a>
     ) : (
-      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={ref}>
+      <CButton
+        type="button"
+        {...togglerProps}
+        tabIndex={0}
+        {...rest}
+        ref={useForkedRef(ref, dropdownToggleRef)}
+      >
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>
     )
   }
 
-  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler(dropdownToggleRef)
 }
 
 CDropdownToggle.propTypes = {
   caret: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  custom: PropTypes.bool,
   split: PropTypes.bool,
   trigger: triggerPropType,
 }

package/src/components/modal/CModal.tsx

@@ -72,6 +72,10 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
    * Remove animation to create modal that simply appear rather than fade in to view.
    */
   transition?: boolean
+  /*
+   * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false
+   */
+  unmountOnClose?: boolean
   /**
    * Toggle the visibility of modal component.
    */
@@ -102,11 +106,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       scrollable,
       size,
       transition = true,
+      unmountOnClose = true,
       visible,
     },
     ref,
   ) => {
     const modalRef = useRef<HTMLDivElement>(null)
+    const modalContentRef = useRef<HTMLDivElement>(null)
     const forkedRef = useForkedRef(ref, modalRef)
 
     const [_visible, setVisible] = useState(visible)
@@ -121,6 +127,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       setVisible,
     }
 
+    useEffect(() => {
+      modalRef.current && modalRef.current.addEventListener('click', handleClickOutside)
+      modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown)
+
+      return () => {
+        modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside)
+        modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown)
+      }
+    }, [_visible])
+
     const handleDismiss = () => {
       if (backdrop === 'static') {
         return setStaticBackdrop(true)
@@ -167,6 +183,15 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       return () => document.body.classList.remove('modal-open')
     }, [_visible])
 
+    const handleClickOutside = (event: Event) => {
+      if (
+        modalContentRef.current &&
+        !modalContentRef.current.contains(event.target as HTMLElement)
+      ) {
+        handleDismiss()
+      }
+    }
+
     const handleKeyDown = useCallback(
       (event) => {
         if (event.key === 'Escape' && keyboard) {
@@ -190,9 +215,8 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
               fullscreen={fullscreen}
               scrollable={scrollable}
               size={size}
-              onClick={(event) => event.stopPropagation()}
             >
-              <CModalContent>{children}</CModalContent>
+              <CModalContent ref={modalContentRef}>{children}</CModalContent>
             </CModalDialog>
           </div>
         </CModalContext.Provider>
@@ -201,23 +225,21 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
     return (
       <>
-        <div onClick={handleDismiss} onKeyDown={handleKeyDown}>
-          <Transition
-            in={_visible}
-            mountOnEnter
-            onEnter={onShow}
-            onExit={onClose}
-            unmountOnExit
-            timeout={!transition ? 0 : duration}
-          >
-            {(state) => {
-              const transitionClass = getTransitionClass(state)
-              return typeof window !== 'undefined' && portal
-                ? createPortal(modal(forkedRef, transitionClass), document.body)
-                : modal(forkedRef, transitionClass)
-            }}
-          </Transition>
-        </div>
+        <Transition
+          in={_visible}
+          mountOnEnter
+          onEnter={onShow}
+          onExit={onClose}
+          unmountOnExit={unmountOnClose}
+          timeout={!transition ? 0 : duration}
+        >
+          {(state) => {
+            const transitionClass = getTransitionClass(state)
+            return typeof window !== 'undefined' && portal
+              ? createPortal(modal(forkedRef, transitionClass), document.body)
+              : modal(forkedRef, transitionClass)
+          }}
+        </Transition>
         {typeof window !== 'undefined' && portal
           ? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)
           : backdrop && <CBackdrop visible={_visible} />}
@@ -244,6 +266,7 @@ CModal.propTypes = {
   scrollable: PropTypes.bool,
   size: PropTypes.oneOf(['sm', 'lg', 'xl']),
   transition: PropTypes.bool,
+  unmountOnClose: PropTypes.bool,
   visible: PropTypes.bool,
 }
 

package/src/components/modal/__tests__/CModal.spec.tsx

@@ -36,7 +36,7 @@ test('CModal dialog close on press ESC', async () => {
   expect(onClose).toHaveBeenCalledTimes(0)
   const modal = document.querySelector('.modal')
   if (modal !== null) {
-    fireEvent.keyDown(modal, {
+    fireEvent.keyUp(modal, {
       key: 'Escape',
       code: 'Escape',
       keyCode: 27,

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

@@ -1,13 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CModal customize 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`CModal customize 1`] = `<div />`;
 
-exports[`loads and displays CModal component 1`] = `
-<div>
-  <div />
-</div>
-`;
+exports[`loads and displays CModal component 1`] = `<div />`;

package/src/components/picker/CPicker.tsx

@@ -0,0 +1,142 @@
+import React, { forwardRef, ReactNode, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import { CButton } from '../button/CButton'
+import { CDropdown, CDropdownProps } from '../dropdown/CDropdown'
+import { CDropdownMenu } from '../dropdown/CDropdownMenu'
+import { CDropdownToggle } from '../dropdown/CDropdownToggle'
+
+export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
+  /**
+   * Cancel button text.
+   */
+  cancelButtonText?: ReactNode
+  /**
+   * Set container type for the component.
+   */
+  container?: 'dropdown' | 'inline'
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean
+  /**
+   * Toggle visibility of footer element or set the content of footer.
+   */
+  footer?: boolean | ReactNode
+  /**
+   * Ok button text
+   */
+  okButtonText?: ReactNode
+  /**
+   * Callback fired when the cancel button has been clicked.
+   */
+  onCancelClick?: () => void
+  /**
+   * Callback fired when the ok button has been clicked.
+   */
+  onOkClick?: () => void
+  /**
+   * The content of toggler.
+   */
+  toggler?: ReactNode
+}
+
+export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
+  (
+    {
+      children,
+      cancelButtonText = 'Cancel',
+      className,
+      container = 'dropdown',
+      disabled,
+      footer,
+      okButtonText = 'OK',
+      onCancelClick,
+      onOkClick,
+      onHide,
+      onShow,
+      toggler: Toggler,
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState(visible)
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    const Footer = () => (
+      <>
+        <CButton
+          color="primary"
+          size="sm"
+          variant="ghost"
+          onClick={() => onCancelClick && onCancelClick()}
+        >
+          {cancelButtonText}
+        </CButton>
+        <CButton
+          color="primary"
+          size="sm"
+          onClick={() => {
+            onOkClick && onOkClick()
+            setVisible(false)
+          }}
+        >
+          {okButtonText}
+        </CButton>
+      </>
+    )
+
+    const _className = classNames('picker', className)
+
+    switch (container) {
+      case 'inline':
+        return <div className={_className}>{children}</div>
+      default:
+        return (
+          <CDropdown
+            autoClose="outside"
+            className={_className}
+            onHide={() => {
+              setVisible(false)
+              onHide && onHide()
+            }}
+            onShow={() => {
+              setVisible(true)
+              onShow && onShow()
+            }}
+            variant="dropdown"
+            visible={_visible}
+            {...rest}
+            ref={ref}
+          >
+            <CDropdownToggle custom disabled={_visible || disabled}>
+              {Toggler}
+            </CDropdownToggle>
+            <CDropdownMenu component="div">
+              {children}
+              {footer && (
+                <div className="picker-footer">
+                  {typeof footer === 'boolean' ? Footer() : footer}
+                </div>
+              )}
+            </CDropdownMenu>
+          </CDropdown>
+        )
+    }
+  },
+)
+
+CPicker.displayName = 'CPicker'
+
+CPicker.propTypes = {
+  ...CDropdown.propTypes,
+  container: PropTypes.oneOf(['dropdown', 'inline']),
+  disabled: PropTypes.bool,
+  onCancelClick: PropTypes.func,
+  onOkClick: PropTypes.func,
+}

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