@coreui/react-pro 4.11.3 → 4.12.0-beta.0

package/src/components/date-range-picker/utils.ts

@@ -32,9 +32,9 @@ export const getLocalDateFromString = (string: string, locale: string, time?: bo
           Number(partials.groups['month']) - 1,
           Number(partials.groups['day']),
           partials.groups['ampm']
-            ? partials.groups['ampm'] === 'PM'
+            ? (partials.groups['ampm'] === 'PM'
               ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour'])
+              : Number(partials.groups['hour']))
             : Number(partials.groups['hour']),
           Number(partials.groups['minute']),
           Number(partials.groups['second']),

package/src/components/dropdown/CDropdownMenu.tsx

@@ -7,6 +7,7 @@ import { Alignments, CDropdownContext } from './CDropdown'
 import { CConditionalPortal } from '../conditional-portal'
 
 import type { Placements } from '../../types'
+import { isRTL } from '../../utils'
 
 export interface CDropdownMenuProps
   extends HTMLAttributes<HTMLDivElement | HTMLUListElement>,
@@ -109,7 +110,7 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   if (direction === 'dropup') {
-    _placement = 'top-start'
+    _placement = isRTL(dropdownMenuRef.current) ? 'top-end' : 'top-start'
   }
 
   if (direction === 'dropup-center') {
@@ -117,15 +118,15 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   if (direction === 'dropend') {
-    _placement = 'right-start'
+    _placement = isRTL(dropdownMenuRef.current) ? 'left-start' : 'right-start'
   }
 
   if (direction === 'dropstart') {
-    _placement = 'left-start'
+    _placement = isRTL(dropdownMenuRef.current) ? 'right-start' : 'left-start'
   }
 
   if (alignment === 'end') {
-    _placement = 'bottom-end'
+    _placement = isRTL(dropdownMenuRef.current) ? 'bottom-start' : 'bottom-end'
   }
 
   const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CDropdown customize 1`] = `
 <div>
   <li
-    class="nav-item dropdown dropstart show bazinga"
+    class="nav-item dropdown direction show bazinga"
   >
     Test
   </li>

package/src/components/element-cover/CElementCover.tsx

@@ -78,6 +78,7 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
     const coverStyles: CSSProperties = {
       ...containerCoords,
       position: 'absolute',
+      zIndex: 2,
       backgroundColor: `rgba(255,255,255,${opacity})`,
     }
 

package/src/components/form/CFormSelect.tsx

@@ -9,6 +9,7 @@ type Option = {
   label?: string
   value?: string
 }
+
 export interface CFormSelectProps
   extends CFormControlWrapperProps,
     Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
@@ -102,7 +103,8 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
                   <option
                     {...(typeof option === 'object' &&
                       option.disabled && { disabled: option.disabled })}
-                    {...(typeof option === 'object' && option.value && { value: option.value })}
+                    {...(typeof option === 'object' &&
+                      option.value !== undefined && { value: option.value })}
                     key={index}
                   >
                     {typeof option === 'string' ? option : option.label}

package/src/components/modal/CModal.tsx

@@ -142,6 +142,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
         return setStaticBackdrop(true)
       }
 
+      setVisible(false)
       return onClose && onClose()
     }
 
@@ -174,6 +175,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
           document.body.style.removeProperty('padding-right')
         }
       }
+
       return () => {
         document.body.classList.remove('modal-open')
         if (backdrop) {

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

@@ -2,7 +2,6 @@ import React, {
   FormEvent,
   forwardRef,
   HTMLAttributes,
-  KeyboardEvent,
   ReactNode,
   useEffect,
   useState,
@@ -12,16 +11,18 @@ import React, {
 
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import { createPopper, Instance } from '@popperjs/core'
 
-import { CFormControlWrapper, CFormControlWrapperProps } from './../form/CFormControlWrapper'
-import { CPicker } from '../picker/CPicker'
+import { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'
 
 import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
-import { createOption, filterOptionsList, flattenArray, selectOptions } from './utils'
-import type { Option, SelectedOption } from './types'
+import { useForkedRef } from '../../hooks'
+import { isRTL } from '../../utils'
+import { createOption, filterOptionsList, flattenOptionsArray, selectOptions } from './utils'
+import type { Option, OptionsGroup, SelectedOption } from './types'
 
 export interface CMultiSelectProps
   extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
@@ -50,6 +51,13 @@ export interface CMultiSelectProps
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   *
+   * The name and id attributes for the native select element are generated based on the `id` property:
+   * - <select id="\{id\}-multi-select" name="\{id\}-multi-select" />
+   */
+  id?: string
   /**
    * When set, the options list will have a loading style: loading spinner and reduced opacity.
    *
@@ -70,10 +78,18 @@ export interface CMultiSelectProps
    * @since 4.8.0
    */
   onFilterChange?: (value: string) => void
+  /**
+   * The callback is fired when the Multi Select component requests to be hidden.
+   */
+  onHide?: () => void
+  /**
+   * The callback is fired when the Multi Select component requests to be shown.
+   */
+  onShow?: () => void
   /**
    * List of option elements.
    */
-  options: Option[]
+  options: (Option | OptionsGroup)[]
   /**
    * Sets maxHeight of options list.
    */
@@ -82,10 +98,26 @@ export interface CMultiSelectProps
    * Sets option style.
    */
   optionsStyle?: 'checkbox' | 'text'
+  /**
+   * Custom template for options.
+   *
+   * @since 4.12.0-beta.0
+   */
+  optionsTemplate?: (option: Option) => ReactNode
+  /**
+   * Custom template for options groups.
+   *
+   * @since 4.12.0-beta.0
+   */
+  optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode
   /**
    * Specifies a short hint that is visible in the search input.
    */
   placeholder?: string
+  /**
+   * When it is present, it indicates that the user must choose a value before submitting the form.
+   */
+  required?: boolean
   /**
    * Enables search input element.
    */
@@ -150,10 +182,15 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       label,
       onChange,
       onFilterChange,
+      onHide,
+      onShow,
       options,
       optionsMaxHeight = 'auto',
       optionsStyle = 'checkbox',
+      optionsTemplate,
+      optionsGroupsTemplate,
       placeholder = 'Select...',
+      required,
       search = true,
       searchNoResultsLabel = 'No results found',
       selectAll = true,
@@ -171,11 +208,18 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     },
     ref,
   ) => {
-    const isInitialMount = useRef(true)
+    const multiSelectRef = useRef<HTMLDivElement>(null)
+    const multiSelectForkedRef = useForkedRef(ref, multiSelectRef)
+
+    const dropdownRef = useRef<HTMLDivElement>(null)
     const nativeSelectRef = useRef<HTMLSelectElement>(null)
+    const togglerRef = useRef<HTMLDivElement>(null)
     const searchRef = useRef<HTMLInputElement>(null)
 
-    const [_options, setOptions] = useState<Option[]>(options)
+    const isInitialMount = useRef(true)
+    const popper = useRef<Instance>()
+
+    const [_options, setOptions] = useState<(Option | OptionsGroup)[]>(options)
     const [_visible, setVisible] = useState(visible)
     const [searchValue, setSearchValue] = useState('')
     const [selected, setSelected] = useState<SelectedOption[]>([])
@@ -183,47 +227,37 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const filteredOptions = useMemo(
       () =>
-        search === 'external'
-          ? [..._options, ...filterOptionsList(searchValue, userOptions)]
-          : filterOptionsList(searchValue, [..._options, ...userOptions]),
+        flattenOptionsArray(
+          search === 'external'
+            ? [..._options, ...filterOptionsList(searchValue, userOptions)]
+            : filterOptionsList(searchValue, [..._options, ...userOptions]),
+          true,
+        ),
       [_options, searchValue, userOptions],
     )
 
+    const flattenedOptions = useMemo(() => flattenOptionsArray(options), [JSON.stringify(options)])
+
     const userOption = useMemo(() => {
       if (
         allowCreateOptions &&
-        filteredOptions.length > 0 &&
-        flattenArray(filteredOptions).filter(
-          (option) => option.text.toLowerCase() === searchValue.toLowerCase(),
-        ).length > 0
+        filteredOptions.some(
+          (option) => option.text && option.text.toLowerCase() === searchValue.toLowerCase(),
+        )
       ) {
         return false
       }
 
-      return searchRef.current && createOption(String(searchValue), flattenArray(_options))
+      return searchRef.current && createOption(String(searchValue), flattenedOptions)
     }, [filteredOptions, searchValue])
 
-    useMemo(() => {
+    useEffect(() => {
       setOptions(options)
-      const _selected =
-        options &&
-        flattenArray(options).filter((option: Option) => {
-          if (option.selected) {
-            return option
-          }
-
-          return
-        })
 
-      const deselected =
-        options &&
-        flattenArray(options).filter((option: Option) => {
-          if (option.selected === false) {
-            return option
-          }
-
-          return
-        })
+      const _selected = flattenedOptions.filter((option: Option) => option.selected === true)
+      const deselected = flattenedOptions.filter(
+        (option: Option) => option.selected === false,
+      ) as Option[]
 
       _selected && setSelected(selectOptions(_selected, selected, deselected))
     }, [JSON.stringify(options)])
@@ -233,21 +267,90 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }, [searchValue])
 
     useEffect(() => {
-      !isInitialMount.current &&
-        nativeSelectRef.current &&
+      if (!isInitialMount.current && nativeSelectRef.current) {
         nativeSelectRef.current.dispatchEvent(new Event('change', { bubbles: true }))
+      }
+
+      if (popper.current) {
+        popper.current.update()
+      }
     }, [JSON.stringify(selected)])
 
+    useEffect(() => {
+      if (_visible) {
+        onShow && onShow()
+
+        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('keyup', handleKeyUp)
+
+        initPopper()
+        searchRef.current && searchRef.current.focus()
+      }
+
+      return () => {
+        onHide && onHide()
+
+        window.removeEventListener('mouseup', handleMouseUp)
+        window.removeEventListener('keyup', handleKeyUp)
+
+        destroyPopper()
+      }
+    }, [_visible])
+
     useEffect(() => {
       isInitialMount.current = false
     }, [])
 
+    const initPopper = () => {
+      if (togglerRef.current && dropdownRef.current) {
+        popper.current = createPopper(togglerRef.current, dropdownRef.current, {
+          placement: isRTL(multiSelectRef.current) ? 'bottom-end' : 'bottom-start',
+          modifiers: [
+            {
+              name: 'preventOverflow',
+              options: {
+                boundary: 'clippingParents',
+              },
+            },
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 2],
+              },
+            },
+          ],
+        })
+      }
+    }
+
+    const destroyPopper = () => {
+      if (popper.current) {
+        popper.current.destroy()
+      }
+
+      popper.current = undefined
+    }
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setVisible(false)
+      }
+    }
+
+    const handleMouseUp = (event: Event) => {
+      if (multiSelectRef.current && multiSelectRef.current.contains(event.target as HTMLElement)) {
+        return
+      }
+
+      setVisible(false)
+    }
+
     const handleSearchChange = (event: FormEvent<HTMLInputElement>) => {
       const value = (event.target as HTMLInputElement).value
       setSearchValue(value)
     }
 
-    const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    const handleSearchKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter' && searchValue && allowCreateOptions) {
         event.preventDefault()
 
@@ -259,9 +362,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         if (!userOption) {
           setSelected([
             ...selected,
-            flattenArray(filteredOptions).filter(
+            filteredOptions.find(
               (option) => String(option.text).toLowerCase() === searchValue.toLowerCase(),
-            )[0],
+            ) as Option,
           ])
         }
 
@@ -285,7 +388,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const handleOptionOnClick = (option: Option) => {
       if (!multiple) {
-        setSelected([{ value: option.value, text: option.text }] as SelectedOption[])
+        setSelected([option] as SelectedOption[])
         setVisible(false)
         setSearchValue('')
         if (searchRef.current) {
@@ -310,14 +413,14 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       if (selected.some((_option) => _option.value === option.value)) {
         setSelected(selected.filter((_option) => _option.value !== option.value))
       } else {
-        setSelected([...selected, { value: option.value, text: option.text }] as SelectedOption[])
+        setSelected([...selected, option] as SelectedOption[])
       }
     }
 
     const handleSelectAll = () => {
       setSelected(
         selectOptions(
-          [...flattenArray(options).filter((option: Option) => !option.disabled), ...userOptions],
+          [...flattenedOptions.filter((option: Option) => !option.disabled), ...userOptions],
           selected,
         ),
       )
@@ -341,8 +444,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         valid={valid}
       >
         <CMultiSelectNativeSelect
+          id={id}
           multiple={multiple}
           options={selected}
+          required={required}
           value={
             multiple
               ? selected.map((option: SelectedOption) => option.value.toString())
@@ -351,51 +456,44 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
           onChange={() => onChange && onChange(selected)}
           ref={nativeSelectRef}
         />
-        <CPicker
+        <div
           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,
+              show: _visible,
             },
             className,
           )}
-          disabled={disabled}
+          aria-expanded={_visible}
           id={id}
-          onHide={() => setVisible(false)}
-          onShow={() => {
-            searchRef.current && searchRef.current.focus()
-            setVisible(true)
-          }}
-          toggler={
-            <div>
-              <CMultiSelectSelection
-                multiple={multiple}
-                onRemove={(option) => !disabled && handleOptionOnClick(option)}
-                search={search}
-                selected={selected}
-                selectionType={selectionType}
-                selectionTypeCounterText={selectionTypeCounterText}
-              />
-              {multiple && cleaner && selected.length > 0 && (
-                <button
-                  type="button"
-                  className="form-multi-select-selection-cleaner"
-                  onClick={() => handleDeselectAll()}
-                ></button>
-              )}
+          ref={multiSelectForkedRef}
+        >
+          <div
+            className="form-multi-select-input-group"
+            onClick={() => setVisible(true)}
+            ref={togglerRef}
+          >
+            <CMultiSelectSelection
+              multiple={multiple}
+              onRemove={(option) => !disabled && handleOptionOnClick(option)}
+              placeholder={placeholder}
+              search={search}
+              selected={selected}
+              selectionType={selectionType}
+              selectionTypeCounterText={selectionTypeCounterText}
+            >
               {search && (
                 <input
                   type="text"
                   className="form-multi-select-search"
                   disabled={disabled}
-                  onChange={(event) => handleSearchChange(event)}
-                  onKeyDown={(event) => handleSearchKeyDown(event)}
+                  autoComplete="off"
+                  onChange={handleSearchChange}
+                  onKeyDown={handleSearchKeyDown}
                   {...(selected.length === 0 && { placeholder: placeholder })}
                   {...(selected.length > 0 &&
                     selectionType === 'counter' && {
@@ -409,12 +507,27 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                   ref={searchRef}
                 ></input>
               )}
+            </CMultiSelectSelection>
+            <div className="form-multi-select-buttons">
+              {!disabled && cleaner && selected.length > 0 && (
+                <button
+                  type="button"
+                  className="form-multi-select-cleaner"
+                  onClick={() => handleDeselectAll()}
+                ></button>
+              )}
+              <button
+                type="button"
+                className="form-multi-select-indicator"
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  setVisible(!_visible)
+                }}
+              ></button>
             </div>
-          }
-          visible={_visible}
-          ref={ref}
-        >
-          <>
+          </div>
+          <div className="form-multi-select-dropdown" role="menu" ref={dropdownRef}>
             {multiple && selectAll && (
               <button
                 type="button"
@@ -434,13 +547,15 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
               }
               optionsMaxHeight={optionsMaxHeight}
               optionsStyle={optionsStyle}
+              optionsTemplate={optionsTemplate}
+              optionsGroupsTemplate={optionsGroupsTemplate}
               searchNoResultsLabel={searchNoResultsLabel}
               selected={selected}
               virtualScroller={virtualScroller}
               visibleItems={visibleItems}
             />
-          </>
-        </CPicker>
+          </div>
+        </div>
       </CFormControlWrapper>
     )
   },
@@ -454,10 +569,16 @@ CMultiSelect.propTypes = {
   loading: PropTypes.bool,
   multiple: PropTypes.bool,
   onChange: PropTypes.func,
+  onFilterChange: PropTypes.func,
+  onHide: PropTypes.func,
+  onShow: PropTypes.func,
   options: PropTypes.array.isRequired,
   optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   optionsStyle: PropTypes.oneOf(['checkbox', 'text']),
+  optionsTemplate: PropTypes.func,
+  optionsGroupsTemplate: PropTypes.func,
   placeholder: PropTypes.string,
+  required: PropTypes.bool,
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'external'>(['external'])]),
   searchNoResultsLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   selectAll: PropTypes.bool,

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

@@ -1,44 +1,54 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, InputHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 import type { Option } from './types'
 
 export interface CMultiSelectNativeSelectProps
-  extends Omit<HTMLAttributes<HTMLSelectElement>, 'options'> {
-  multiple?: boolean
-  options: Option[] | undefined
-  value?: string | number | readonly string[]
+  extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'options'> {
+  options?: Option[]
+  value?: string | number | string[]
 }
 
+const createNativeOptions = (options: Option[]) =>
+  options &&
+  options.map((option: Option, index: number) =>
+    option.options ? (
+      <optgroup label={option.label} key={index}>
+        {createNativeOptions(option.options)}
+      </optgroup>
+    ) : (
+      <option value={option.value} key={index} disabled={option.disabled}>
+        {option.text}
+      </option>
+    ),
+  )
+
 export const CMultiSelectNativeSelect = forwardRef<
   HTMLSelectElement,
   CMultiSelectNativeSelectProps
->(({ multiple, options, ...rest }, ref) => {
-  const createNativeOptions = (options: Option[]) => {
-    return options.map((option: Option, index: number) => {
-      return option.options ? (
-        <optgroup label={option.label} key={index}>
-          {createNativeOptions(option.options)}
-        </optgroup>
-      ) : (
-        <option value={option.value} key={index} disabled={option.disabled}>
-          {option.text}
-        </option>
-      )
-    })
-  }
-
+>(({ id, options, ...rest }, ref) => {
   return (
-    <select multiple={multiple} tabIndex={-1} style={{ display: 'none' }} {...rest} ref={ref}>
+    <select
+      className="multi-select-new"
+      {...(id && { id: `${id}-multi-select` })}
+      {...(id && { name: `${id}-multi-select` })}
+      tabIndex={-1}
+      style={{ display: 'none' }}
+      {...rest}
+      ref={ref}
+    >
       {options && createNativeOptions(options)}
     </select>
   )
 })
 
 CMultiSelectNativeSelect.propTypes = {
-  multiple: PropTypes.any, // TODO: update
-  options: PropTypes.array.isRequired,
-  value: PropTypes.any, // TODO: update
+  options: PropTypes.array,
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string.isRequired),
+  ]),
 }
 
 CMultiSelectNativeSelect.displayName = 'CMultiSelectNativeSelect'