@coreui/react-pro 4.1.3 → 4.2.0-beta.1

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -33,6 +34,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+  /**
+   * Configure the auto close behavior of the dropdown:
+   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   */
+  autoClose?: 'inside' | 'outside' | boolean
   /**
    * A string of all className you want applied to the base component.
    */
@@ -80,6 +89,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 }
 
 interface ContextProps extends CDropdownProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
 }
 
@@ -90,6 +101,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     {
       children,
       alignment,
+      autoClose = true,
       className,
       dark,
       direction,
@@ -106,6 +118,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
   ) => {
     const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
+    const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
 
     const Component = variant === 'nav-item' ? 'li' : component
@@ -117,8 +130,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      autoClose,
       dark,
       direction: direction,
+      dropdownToggleRef,
       placement: placement,
       popper,
       variant,
@@ -135,19 +150,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       className,
     )
 
-    useEffect(() => {
-      _visible &&
-        setTimeout(() => {
-          window.addEventListener('click', handleClickOutside)
-          window.addEventListener('keyup', handleKeyup)
-        })
-
-      return () => {
-        window.removeEventListener('click', handleClickOutside)
-        window.removeEventListener('keyup', handleKeyup)
-      }
-    }, [_visible])
-
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -157,17 +159,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const handleKeyup = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-    const handleClickOutside = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-
     const dropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
@@ -203,6 +194,10 @@ CDropdown.propTypes = {
     PropTypes.shape({ xl: alignmentDirection }),
     PropTypes.shape({ xxl: alignmentDirection }),
   ]),
+  autoClose: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
+  ]),
   children: PropTypes.node,
   className: PropTypes.string,
   component: PropTypes.elementType,

package/src/components/dropdown/CDropdownMenu.tsx

@@ -1,5 +1,5 @@
+import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
-import React, { ElementType, FC, HTMLAttributes, useContext } from 'react'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -35,7 +35,59 @@ 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: KeyboardEvent) => {
+    if (autoClose === false) {
+      return
+    }
+
+    if (event.key === 'Escape') {
+      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 +153,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/picker/CPicker.tsx

@@ -0,0 +1,207 @@
+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'
+
+import { Colors } from '../Types'
+
+export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
+  /**
+   * Toggle visibility or set the content of cancel button.
+   *
+   * @default 'Cancel'
+   */
+  cancelButton?: boolean | ReactNode
+  /**
+   * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @default 'primary'
+   */
+  cancelButtonColor?: Colors
+  /**
+   * Size the cancel button small or large.
+   *
+   * @default 'sm'
+   */
+  cancelButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the cancel button variant to an outlined button or a ghost button.
+   *
+   * @default 'ghost'
+   */
+  cancelButtonVariant?: 'outline' | 'ghost'
+  /**
+   * Toggle visibility or set the content of confirm button.
+   *
+   * @default 'OK'
+   */
+  confirmButton?: boolean | ReactNode
+  /**
+   * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+   *
+   * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+   * @default 'primary'
+   */
+  confirmButtonColor?: Colors
+  /**
+   * Size the confirm button small or large.
+   *
+   * @default 'sm'
+   */
+  confirmButtonSize?: 'sm' | 'lg'
+  /**
+   * Set the confirm button variant to an outlined button or a ghost button.
+   */
+  confirmButtonVariant?: 'outline' | 'ghost'
+  /**
+   * 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
+  /**
+   * Callback fired when the cancel button has been clicked.
+   */
+  onCancel?: () => void
+  /**
+   * Callback fired when the confirm button has been clicked.
+   */
+  onConfirm?: () => void
+  /**
+   * The content of toggler.
+   */
+  toggler?: ReactNode
+}
+
+export const CPicker = forwardRef<HTMLDivElement | HTMLLIElement, CPickerProps>(
+  (
+    {
+      children,
+      cancelButton = 'Cancel',
+      cancelButtonColor = 'primary',
+      cancelButtonSize = 'sm',
+      cancelButtonVariant = 'ghost',
+      confirmButton = 'OK',
+      confirmButtonColor = 'primary',
+      confirmButtonSize = 'sm',
+      confirmButtonVariant,
+      className,
+      container = 'dropdown',
+      disabled,
+      footer,
+      onCancel,
+      onConfirm,
+      onHide,
+      onShow,
+      toggler: Toggler,
+      visible,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [_visible, setVisible] = useState(visible)
+
+    useEffect(() => {
+      setVisible(visible)
+    }, [visible])
+
+    const Footer = () => (
+      <>
+        {cancelButton && (
+          <CButton
+            color={cancelButtonColor}
+            size={cancelButtonSize}
+            variant={cancelButtonVariant}
+            onClick={() => onCancel && onCancel()}
+          >
+            {cancelButton}
+          </CButton>
+        )}
+        {confirmButton && (
+          <CButton
+            color={confirmButtonColor}
+            size={confirmButtonSize}
+            variant={confirmButtonVariant}
+            onClick={() => {
+              onConfirm && onConfirm()
+              setVisible(false)
+            }}
+          >
+            {confirmButton}
+          </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 = {
+  cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  cancelButtonColor: CButton.propTypes?.color,
+  cancelButtonSize: CButton.propTypes?.size,
+  cancelButtonVariant: CButton.propTypes?.variant,
+  confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  confirmButtonColor: CButton.propTypes?.color,
+  confirmButtonSize: CButton.propTypes?.size,
+  confirmButtonVariant: CButton.propTypes?.variant,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  container: PropTypes.oneOf(['dropdown', 'inline']),
+  disabled: PropTypes.bool,
+  footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  onCancel: PropTypes.func,
+  onConfirm: PropTypes.func,
+  toggler: PropTypes.node,
+  ...CDropdown.propTypes,
+}

package/src/components/picker/__tests__/CPicker.spec.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import { CPicker } from '../CPicker'
+
+test('loads and displays CPicker component', async () => {
+  const { container } = render(<CPicker>Test</CPicker>)
+  expect(container).toMatchSnapshot()
+})

package/src/components/picker/__tests__/__snapshots__/CPicker.spec.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loads and displays CPicker component 1`] = `
+<div>
+  <div
+    class="dropdown picker"
+  >
+    <button
+      aria-expanded="false"
+      class="btn btn-primary dropdown-toggle"
+      tabindex="0"
+      type="button"
+    />
+    <div
+      aria-hidden="true"
+      class="dropdown-menu"
+      role="menu"
+    >
+      Test
+    </div>
+  </div>
+</div>
+`;