@coreui/react-pro 4.9.0-next.0 → 4.9.0

package/src/components/modal/CModal.tsx

@@ -2,23 +2,22 @@ import React, {
   createContext,
   forwardRef,
   HTMLAttributes,
-  useCallback,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react'
-import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
-import { useForkedRef } from '../../hooks'
-
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalPortal } from '../conditional-portal'
 import { CModalContent } from './CModalContent'
 import { CModalDialog } from './CModalDialog'
 
+import { useForkedRef } from '../../hooks'
+
 export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Align the modal in the center or top of the screen.
@@ -119,22 +118,22 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     const [_visible, setVisible] = useState(visible)
     const [staticBackdrop, setStaticBackdrop] = useState(false)
 
-    useEffect(() => {
-      setVisible(visible)
-    }, [visible])
-
     const contextValues = {
       visible: _visible,
       setVisible,
     }
 
     useEffect(() => {
-      modalRef.current && modalRef.current.addEventListener('click', handleClickOutside)
-      modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown)
+      setVisible(visible)
+    }, [visible])
+
+    useEffect(() => {
+      document.addEventListener('click', handleClickOutside)
+      document.addEventListener('keydown', handleKeyDown)
 
       return () => {
-        modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside)
-        modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown)
+        document.removeEventListener('click', handleClickOutside)
+        document.removeEventListener('keydown', handleKeyDown)
       }
     }, [_visible])
 
@@ -142,6 +141,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       if (backdrop === 'static') {
         return setStaticBackdrop(true)
       }
+
       return onClose && onClose()
     }
 
@@ -150,24 +150,6 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       setTimeout(() => setStaticBackdrop(false), duration)
     }, [staticBackdrop])
 
-    const getTransitionClass = (state: string) => {
-      return state === 'entering'
-        ? 'd-block'
-        : state === 'entered'
-        ? 'show d-block'
-        : state === 'exiting'
-        ? 'd-block'
-        : ''
-    }
-    const _className = classNames(
-      'modal',
-      {
-        'modal-static': staticBackdrop,
-        fade: transition,
-      },
-      className,
-    )
-
     // Set focus to modal after open
     useLayoutEffect(() => {
       if (_visible) {
@@ -182,7 +164,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           () => {
             modalRef.current?.focus()
           },
-          !transition ? 0 : duration,
+          transition ? duration : 0,
         )
       } else {
         document.body.classList.remove('modal-open')
@@ -210,37 +192,10 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
     }
 
-    const handleKeyDown = useCallback(
-      (event: KeyboardEvent) => {
-        if (event.key === 'Escape' && keyboard) {
-          return handleDismiss()
-        }
-      },
-      [modalRef, handleDismiss],
-    )
-
-    const modal = (ref?: React.Ref<HTMLDivElement>, transitionClass?: string) => {
-      return (
-        <CModalContext.Provider value={contextValues}>
-          <div
-            className={classNames(_className, transitionClass)}
-            tabIndex={-1}
-            role="dialog"
-            ref={ref}
-          >
-            <CModalDialog
-              alignment={alignment}
-              fullscreen={fullscreen}
-              scrollable={scrollable}
-              size={size}
-            >
-              <CModalContent {...rest} ref={modalContentRef}>
-                {children}
-              </CModalContent>
-            </CModalDialog>
-          </div>
-        </CModalContext.Provider>
-      )
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && keyboard) {
+        handleDismiss()
+      }
     }
 
     return (
@@ -252,18 +207,48 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           onEnter={onShow}
           onExit={onClose}
           unmountOnExit={unmountOnClose}
-          timeout={!transition ? 0 : duration}
+          timeout={transition ? duration : 0}
         >
-          {(state) => {
-            const transitionClass = getTransitionClass(state)
-            return typeof window !== 'undefined' && portal
-              ? createPortal(modal(forkedRef, transitionClass), document.body)
-              : modal(forkedRef, transitionClass)
-          }}
+          {(state) => (
+            <CConditionalPortal portal={portal}>
+              <CModalContext.Provider value={contextValues}>
+                <div
+                  className={classNames(
+                    'modal',
+                    {
+                      'modal-static': staticBackdrop,
+                      fade: transition,
+                      show: state === 'entered',
+                    },
+                    className,
+                  )}
+                  tabIndex={-1}
+                  role="dialog"
+                  style={{
+                    ...(state !== 'exited' && { display: 'block' }),
+                  }}
+                  ref={forkedRef}
+                >
+                  <CModalDialog
+                    alignment={alignment}
+                    fullscreen={fullscreen}
+                    scrollable={scrollable}
+                    size={size}
+                  >
+                    <CModalContent {...rest} ref={modalContentRef}>
+                      {children}
+                    </CModalContent>
+                  </CModalDialog>
+                </div>
+              </CModalContext.Provider>
+            </CConditionalPortal>
+          )}
         </Transition>
-        {typeof window !== 'undefined' && portal
-          ? backdrop && createPortal(<CBackdrop visible={_visible} />, document.body)
-          : backdrop && <CBackdrop visible={_visible} />}
+        {backdrop && (
+          <CConditionalPortal portal={portal}>
+            <CBackdrop visible={_visible} />
+          </CConditionalPortal>
+        )}
       </>
     )
   },

package/src/components/modal/CModalBody.tsx

@@ -11,10 +11,8 @@ export interface CModalBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CModalBody = forwardRef<HTMLDivElement, CModalBodyProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('modal-body', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('modal-body', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/modal/CModalContent.tsx

@@ -11,10 +11,8 @@ export interface CModalContentProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CModalContent = forwardRef<HTMLDivElement, CModalContentProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('modal-content', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('modal-content', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/modal/CModalDialog.tsx

@@ -27,21 +27,23 @@ export interface CModalDialogProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CModalDialog = forwardRef<HTMLDivElement, CModalDialogProps>(
   ({ children, alignment, className, fullscreen, scrollable, size, ...rest }, ref) => {
-    const _className = classNames(
-      'modal-dialog',
-      {
-        'modal-dialog-centered': alignment === 'center',
-        [typeof fullscreen === 'boolean'
-          ? 'modal-fullscreen'
-          : `modal-fullscreen-${fullscreen}-down`]: fullscreen,
-        'modal-dialog-scrollable': scrollable,
-        [`modal-${size}`]: size,
-      },
-      className,
-    )
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div
+        className={classNames(
+          'modal-dialog',
+          {
+            'modal-dialog-centered': alignment === 'center',
+            [typeof fullscreen === 'boolean'
+              ? 'modal-fullscreen'
+              : `modal-fullscreen-${fullscreen}-down`]: fullscreen,
+            'modal-dialog-scrollable': scrollable,
+            [`modal-${size}`]: size,
+          },
+          className,
+        )}
+        {...rest}
+        ref={ref}
+      >
         {children}
       </div>
     )

package/src/components/modal/CModalFooter.tsx

@@ -11,10 +11,8 @@ export interface CModalFooterProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CModalFooter = forwardRef<HTMLDivElement, CModalFooterProps>(
   ({ children, className, ...rest }, ref) => {
-    const _className = classNames('modal-footer', className)
-
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('modal-footer', className)} {...rest} ref={ref}>
         {children}
       </div>
     )

package/src/components/modal/CModalHeader.tsx

@@ -1,9 +1,10 @@
 import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
-import { CModalContext } from './CModal'
-import { CCloseButton } from '../close-button/CCloseButton'
 import classNames from 'classnames'
 
+import { CCloseButton } from '../close-button/CCloseButton'
+import { CModalContext } from './CModal'
+
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -18,10 +19,9 @@ export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
 export const CModalHeader = forwardRef<HTMLDivElement, CModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
     const { setVisible } = useContext(CModalContext)
-    const _className = classNames('modal-header', className)
 
     return (
-      <div className={_className} {...rest} ref={ref}>
+      <div className={classNames('modal-header', className)} {...rest} ref={ref}>
         {children}
         {closeButton && <CCloseButton onClick={() => setVisible(false)} />}
       </div>

package/src/components/modal/CModalTitle.tsx

@@ -15,10 +15,8 @@ export interface CModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export const CModalTitle = forwardRef<HTMLHeadElement, CModalTitleProps>(
   ({ children, component: Component = 'h5', className, ...rest }, ref) => {
-    const _className = classNames('modal-title', className)
-
     return (
-      <Component className={_className} {...rest} ref={ref}>
+      <Component className={classNames('modal-title', className)} {...rest} ref={ref}>
         {children}
       </Component>
     )

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

@@ -26,7 +26,6 @@ test('CModal customize', async () => {
 })
 
 test('CModal dialog close on press ESC', async () => {
-  jest.useFakeTimers()
   const onClose = jest.fn()
   render(
     <CModal onClose={onClose} portal={false} visible>
@@ -36,32 +35,32 @@ test('CModal dialog close on press ESC', async () => {
   expect(onClose).toHaveBeenCalledTimes(0)
   const modal = document.querySelector('.modal')
   if (modal !== null) {
-    fireEvent.keyUp(modal, {
+    fireEvent.keyDown(modal, {
       key: 'Escape',
       code: 'Escape',
       keyCode: 27,
       charCode: 27,
     })
   }
+  await new Promise((r) => setTimeout(r, 1000))
+  console.log(modal)
+  expect(onClose).toHaveBeenCalledTimes(1)
+})
+
+test('CModal dialog close on backdrop', async () => {
+  jest.useFakeTimers()
+  const onClose = jest.fn()
+  render(
+    <CModal onClose={onClose} portal={false} visible={true}>
+      Test
+    </CModal>,
+  )
+  expect(onClose).toHaveBeenCalledTimes(0)
+  const backdrop = document.querySelector('.modal-backdrop')
+  if (backdrop !== null) {
+    fireEvent.click(backdrop)
+  }
   jest.runAllTimers()
   expect(onClose).toHaveBeenCalledTimes(1)
   jest.useRealTimers()
 })
-
-// test('CModal dialog close on backdrop', async () => {
-//   jest.useFakeTimers()
-//   const onClose = jest.fn()
-//   render(
-//     <CModal onClose={onClose} portal={false} visible={true}>
-//       Test
-//     </CModal>,
-//   )
-//   expect(onClose).toHaveBeenCalledTimes(0)
-//   const backdrop = document.querySelector('.modal-backdrop')
-//   if (backdrop !== null) {
-//     fireEvent.click(backdrop)
-//   }
-//   jest.runAllTimers()
-//   expect(onClose).toHaveBeenCalledTimes(1)
-//   jest.useRealTimers()
-// })

package/src/components/multi-select/CMultiSelect.tsx

@@ -16,11 +16,13 @@ import PropTypes from 'prop-types'
 import { CFormControlWrapper, CFormControlWrapperProps } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker/CPicker'
 
-import { CMultiSelectCleaner } from './CMultiSelectCleaner'
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
+import { filterOptionsList, flattenArray, selectOptions } from './utils'
+import type { Option, SelectedOption } from './types'
+
 export interface CMultiSelectProps
   extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
     Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -113,29 +115,6 @@ export interface CMultiSelectProps
   visibleItems?: number
 }
 
-export interface Option {
-  disabled?: boolean
-  label?: string
-  options?: Option[]
-  selected?: boolean
-  // TODO: change to label
-  text?: string
-  value?: number | string
-}
-
-export interface SelectedOption {
-  disabled?: boolean
-  text: string
-  value: number | string
-}
-
-const flattenArray = (options: Option[]): Option[] =>
-  options.reduce(
-    (acc: Option[], val: Option) =>
-      acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val),
-    [],
-  )
-
 export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
   (
     {
@@ -181,30 +160,6 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const [_visible, setVisible] = useState(visible)
     const [selected, setSelected] = useState<SelectedOption[]>([])
 
-    const selectOptions = (options: Option[], deselected?: Option[]) => {
-      let _selected = [...selected, ...options]
-
-      if (deselected) {
-        _selected = _selected.filter(
-          (selectedOption) =>
-            !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
-        )
-      }
-
-      const deduplicated = _selected.reduce((unique: Option[], option) => {
-        if (!unique.some((obj) => obj.value === option.value)) {
-          unique.push({
-            value: option.value,
-            text: option.text,
-            ...(option.disabled && { disabled: option.disabled }),
-          })
-        }
-        return unique
-      }, []) as SelectedOption[]
-
-      setSelected(deduplicated)
-    }
-
     useMemo(() => {
       setOptions(options)
       const _selected =
@@ -227,7 +182,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           return
         })
 
-      _selected && selectOptions(_selected, deselected)
+      _selected && setSelected(selectOptions(_selected, selected, deselected))
     }, [JSON.stringify(options)])
 
     useEffect(() => {
@@ -236,47 +191,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         nativeSelectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
     }, [JSON.stringify(selected)])
 
-    const _className = classNames(
-      'form-multi-select',
-      {
-        'form-multi-select-with-cleaner': cleaner,
-        [`form-multi-select-${size}`]: size,
-        show: _visible,
-        'form-multi-select-selection-tags': multiple && selectionType === 'tags',
-        disabled,
-        'is-invalid': invalid,
-        'is-valid': valid,
-      },
-      className,
-    )
-
     useEffect(() => {
       isInitialMount.current = false
     }, [])
 
-    const filterOptionsList = (search: string, options: Option[]) => {
-      return search.length
-        ? options &&
-            options.reduce((acc: Option[], val: Option) => {
-              const options =
-                val.options &&
-                val.options.filter(
-                  (element) =>
-                    element.text && element.text.toLowerCase().includes(search.toLowerCase()),
-                )
-
-              if (
-                (val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-                (options && options.length)
-              ) {
-                acc.push(Object.assign({}, val, options && options.length && { options }))
-              }
-
-              return acc
-            }, [])
-        : _options
-    }
-
     const handleSearchChange = (event: FormEvent<HTMLInputElement>) => {
       const target = event.target as HTMLInputElement
       if (search !== 'external') {
@@ -287,7 +205,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }
 
     const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-      if (_search.length) return
+      if (_search.length > 0) {
+        return
+      }
 
       if (event.key === 'Backspace' || event.key === 'Delete') {
         const last = selected.filter((option: Option) => !option.disabled).pop()
@@ -315,7 +235,12 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }
 
     const handleSelectAll = () => {
-      selectOptions(flattenArray(options).filter((option: Option) => !option.disabled))
+      setSelected(
+        selectOptions(
+          flattenArray(options).filter((option: Option) => !option.disabled),
+          selected,
+        ),
+      )
     }
 
     const handleDeselectAll = () => {
@@ -347,7 +272,19 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           ref={nativeSelectRef}
         />
         <CPicker
-          className={_className}
+          className={classNames(
+            'form-multi-select',
+            {
+              'form-multi-select-with-cleaner': cleaner,
+              [`form-multi-select-${size}`]: size,
+              show: _visible,
+              'form-multi-select-selection-tags': multiple && selectionType === 'tags',
+              disabled,
+              'is-invalid': invalid,
+              'is-valid': valid,
+            },
+            className,
+          )}
           disabled={disabled}
           id={id}
           onHide={() => setVisible(false)}
@@ -366,7 +303,11 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                 selectionTypeCounterText={selectionTypeCounterText}
               />
               {multiple && cleaner && selected.length > 0 && (
-                <CMultiSelectCleaner onClick={() => handleDeselectAll()} />
+                <button
+                  type="button"
+                  className="form-multi-select-selection-cleaner"
+                  onClick={() => handleDeselectAll()}
+                ></button>
               )}
               {search && (
                 <input
@@ -376,14 +317,14 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                   onChange={(event) => handleSearchChange(event)}
                   onKeyDown={(event) => handleSearchKeyDown(event)}
                   {...(selected.length === 0 && { placeholder: placeholder })}
-                  {...(selected.length &&
+                  {...(selected.length > 0 &&
                     selectionType === 'counter' && {
                       placeholder: `${selected.length} ${selectionTypeCounterText}`,
                     })}
-                  {...(selected.length &&
+                  {...(selected.length > 0 &&
                     !multiple && { placeholder: selected.map((option) => option.text)[0] })}
                   {...(multiple &&
-                    selected.length &&
+                    selected.length > 0 &&
                     selectionType !== 'counter' && { size: _search.length + 2 })}
                   ref={searchRef}
                 ></input>

package/src/components/multi-select/CMultiSelectNativeSelect.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import { Option } from './CMultiSelect'
+import type { Option } from './types'
 
 export interface CMultiSelectNativeSelectProps
   extends Omit<HTMLAttributes<HTMLSelectElement>, 'options'> {

package/src/components/multi-select/CMultiSelectOptions.tsx

@@ -2,10 +2,10 @@ import React, { forwardRef, Fragment, HTMLAttributes, ReactNode } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { Option } from './CMultiSelect'
 import { CVirtualScroller } from './../virtual-scroller'
 
-import { getNextSibling, getPreviousSibling } from './../../utils'
+import { getNextSibling, getPreviousSibling } from './utils'
+import type { Option } from './types'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
   handleOptionOnClick?: (option: Option) => void

package/src/components/multi-select/CMultiSelectSelection.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
-import type { SelectedOption } from './CMultiSelect'
+import type { SelectedOption } from './types'
 
 export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
   multiple?: boolean

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

@@ -0,0 +1,15 @@
+export type Option = {
+  disabled?: boolean
+  label?: string
+  options?: Option[]
+  order?: number
+  selected?: boolean
+  text: string
+  value: number | string
+}
+
+export type SelectedOption = {
+  disabled?: boolean
+  text: string
+  value: number | string
+}