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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.9.0",
+  "version": "4.11.0-next.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -64,7 +64,7 @@
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": ">=4.4.0",
+    "@coreui/coreui-pro": ">=4.4.4",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/calendar/CCalendar.tsx

@@ -103,6 +103,18 @@ export interface CCalendarProps {
    * @since 4.3.0
    */
   navYearFirst?: boolean
+  /**
+   * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
+   *
+   * @since 4.11.0-next.0
+   */
+  selectAdjacementDays?: boolean
+  /**
+   * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
+   *
+   * @since 4.11.0-next.0
+   */
+  showAdjacementDays?: boolean
   /**
    * Allow range selection.
    */
@@ -164,7 +176,9 @@ const Calendar = (props: {
   onCellMouseLeave: () => void
   onMonthClick: (month: number, view: string) => void
   onYearClick: (date: Date, view: string) => void
+  selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
+  showAdjacementDays: boolean
   startDate: Date | null
   view: string
   weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
@@ -186,7 +200,9 @@ const Calendar = (props: {
     onCellMouseLeave,
     onMonthClick,
     onYearClick,
+    selectAdjacementDays,
     selectEndDate,
+    showAdjacementDays,
     startDate,
     view,
     weekdayFormat,
@@ -235,45 +251,50 @@ const Calendar = (props: {
           monthDetails.map((week, index) => {
             return (
               <tr key={index}>
-                {week.map(({ date, month }: { date: Date; month: string }, idx: number) => (
-                  <td
-                    className={classNames('calendar-cell', {
-                      today: month === 'current' && isToday(date),
-                      disabled: isDateDisabled(date, minDate, maxDate, disabledDates),
-                      [month]: true,
-                      last: isLastDayOfMonth(date),
-                      'range-hover':
-                        month === 'current' &&
-                        (hoverDate && selectEndDate
-                          ? isDateInRange(date, startDate, hoverDate)
-                          : isDateInRange(date, hoverDate, endDate)),
-                      range: month === 'current' && isDateInRange(date, startDate, endDate),
-                      selected: isDateSelected(date, startDate, endDate),
-                      start: isStartDate(date, startDate, endDate),
-                      end: isEndDate(date, startDate, endDate),
-                    })}
-                    key={idx}
-                    tabIndex={0}
-                    title={date.toLocaleDateString(locale)}
-                    {...(month === 'current' && {
-                      onBlur: () => onCellMouseLeave(),
-                      onClick: () => onCellClick(date),
-                      onFocus: () => onCellMouseEnter(date),
-                      onKeyDown: (event) => onCellKeyDown(event, date),
-                      onMouseEnter: () => onCellMouseEnter(date),
-                      onMouseLeave: () => onCellMouseLeave(),
-                    })}
-                    {...(month !== 'current' && {
-                      onMouseEnter: () => onCellMouseLeave(),
-                    })}
-                  >
-                    <div className="calendar-cell-inner">
-                      {typeof dayFormat === 'function'
-                        ? dayFormat(date)
-                        : date.toLocaleDateString(locale, { day: dayFormat })}
-                    </div>
-                  </td>
-                ))}
+                {week.map(({ date, month }: { date: Date; month: string }, idx: number) =>
+                  month === 'current' || showAdjacementDays ? (
+                    <td
+                      className={classNames('calendar-cell', {
+                        today: month === 'current' && isToday(date),
+                        disabled: isDateDisabled(date, minDate, maxDate, disabledDates),
+                        [month]: true,
+                        last: isLastDayOfMonth(date),
+                        'range-hover':
+                          month === 'current' &&
+                          (hoverDate && selectEndDate
+                            ? isDateInRange(date, startDate, hoverDate)
+                            : isDateInRange(date, hoverDate, endDate)),
+                        range: month === 'current' && isDateInRange(date, startDate, endDate),
+                        selected: isDateSelected(date, startDate, endDate),
+                        start: isStartDate(date, startDate, endDate),
+                        end: isEndDate(date, startDate, endDate),
+                      })}
+                      key={idx}
+                      tabIndex={0}
+                      title={date.toLocaleDateString(locale)}
+                      {...((month === 'current' || selectAdjacementDays) && {
+                        onBlur: () => onCellMouseLeave(),
+                        onClick: () => onCellClick(date),
+                        onFocus: () => onCellMouseEnter(date),
+                        onKeyDown: (event) => onCellKeyDown(event, date),
+                        onMouseEnter: () => onCellMouseEnter(date),
+                        onMouseLeave: () => onCellMouseLeave(),
+                      })}
+                      {...(month !== 'current' &&
+                        !selectAdjacementDays && {
+                          onMouseEnter: () => onCellMouseLeave(),
+                        })}
+                    >
+                      <div className="calendar-cell-inner">
+                        {typeof dayFormat === 'function'
+                          ? dayFormat(date)
+                          : date.toLocaleDateString(locale, { day: dayFormat })}
+                      </div>
+                    </td>
+                  ) : (
+                    <td key={idx}></td>
+                  ),
+                )}
               </tr>
             )
           })}
@@ -451,7 +472,9 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       navPrevDoubleIcon,
       navYearFirst,
       range,
+      selectAdjacementDays = false,
       selectEndDate,
+      showAdjacementDays = true,
       weekdayFormat = 2,
       onCalendarCellHover,
       onCalendarDateChange,
@@ -551,11 +574,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       onCalendarDateChange && onCalendarDateChange(d)
     }
 
-    const handleCellOnClick = (date: Date) => {
+    const handleCellOnClick = (date: Date, index?: number) => {
       if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
 
+      const _date = new Date(date)
+      setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date)
+
       if (range) {
         if (_selectEndDate) {
           setSelectEndDate(false)
@@ -600,6 +626,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
+
       setHoverDate(date)
       onCalendarCellHover && onCalendarCellHover(date)
     }
@@ -609,10 +636,14 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       onCalendarCellHover && onCalendarCellHover(null)
     }
 
-    const handleCellKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, date: Date) => {
+    const handleCellKeyDown = (
+      event: React.KeyboardEvent<HTMLDivElement>,
+      date: Date,
+      index?: number,
+    ) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        handleCellOnClick && handleCellOnClick(date)
+        handleCellOnClick && handleCellOnClick(date, index)
         return
       }
     }
@@ -679,8 +710,8 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 locale={locale}
                 maxDate={_maxDate}
                 minDate={_minDate}
-                onCellClick={handleCellOnClick}
-                onCellKeyDown={handleCellKeyDown}
+                onCellClick={(date) => handleCellOnClick(date, index)}
+                onCellKeyDown={(event, date) => handleCellKeyDown(event, date, index)}
                 onCellMouseEnter={handleCellMouseEnter}
                 onCellMouseLeave={handleCellMouseLeave}
                 onMonthClick={(month, view) => {
@@ -692,6 +723,8 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                   setView(view)
                 }}
                 selectEndDate={_selectEndDate}
+                selectAdjacementDays={selectAdjacementDays}
+                showAdjacementDays={showAdjacementDays}
                 startDate={_startDate}
                 view={view}
                 weekdayFormat={weekdayFormat}
@@ -724,7 +757,9 @@ CCalendar.propTypes = {
   navPrevDoubleIcon: PropTypes.node,
   navYearFirst: PropTypes.bool,
   range: PropTypes.bool,
+  selectAdjacementDays: PropTypes.bool,
   selectEndDate: PropTypes.bool,
+  showAdjacementDays: PropTypes.bool,
   startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   weekdayFormat: PropTypes.oneOfType([
     PropTypes.func,

package/src/components/calendar/utils.ts

@@ -164,6 +164,7 @@ export const isDateDisabled = (
   if (max && date > max) {
     disabled = true
   }
+  
   return disabled
 }
 

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -84,6 +84,12 @@ export interface CDateRangePickerProps
    * Set the ranges button variant to an outlined button or a ghost button.
    */
   rangesButtonsVariant?: 'outline' | 'ghost'
+  /**
+   * When present, it specifies that date must be filled out before submitting the form.
+   * 
+   * @since 4.10.0
+   */
+  required?: boolean
   /**
    * Default icon or character character that separates two dates.
    */
@@ -159,7 +165,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       rangesButtonsColor = 'secondary',
       rangesButtonsSize,
       rangesButtonsVariant = 'ghost',
+      required,
       separator = true,
+      selectAdjacementDays,
+      showAdjacementDays,
       size,
       startDate,
       text,
@@ -316,6 +325,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           {...(id && { name: range ? `${id}-start-date` : `${id}-date` })}
           placeholder={Array.isArray(placeholder) ? placeholder[0] : placeholder}
           readOnly={inputReadOnly || typeof format === 'string'}
+          required={required}
           onChange={(event) => {
             const date = getLocalDateFromString(event.target.value, locale, timepicker)
             if (date instanceof Date && date.getTime()) {
@@ -346,6 +356,7 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
             {...(id && { name: `${id}-end-date` })}
             placeholder={placeholder[1]}
             readOnly={inputReadOnly || typeof format === 'string'}
+            required={required}
             onChange={(event) => {
               const date = getLocalDateFromString(event.target.value, locale, timepicker)
               if (date instanceof Date && date.getTime()) {
@@ -482,7 +493,9 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               navigation={navigation}
               navYearFirst={navYearFirst}
               range={range}
+              selectAdjacementDays={selectAdjacementDays}
               selectEndDate={selectEndDate}
+              showAdjacementDays={showAdjacementDays}
               startDate={_startDate}
               onCalendarCellHover={(date) => handleCalendarCellHover(date)}
               onCalendarDateChange={(date) => handleCalendarDateChange(date)}
@@ -565,6 +578,7 @@ CDateRangePicker.propTypes = {
   rangesButtonsColor: CButton.propTypes?.color,
   rangesButtonsSize: CButton.propTypes?.size,
   rangesButtonsVariant: CButton.propTypes?.variant,
+  required: PropTypes.bool,
   separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
   size: PropTypes.oneOf(['sm', 'lg']),
   timepicker: PropTypes.bool,

package/src/components/dropdown/CDropdown.tsx

@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  ReactNode,
   RefObject,
   useEffect,
   useRef,
@@ -87,6 +88,16 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
   visible?: boolean
 }
 
+const PopperManagerWrapper = ({
+  children,
+  popper,
+}: {
+  children: ReactNode
+  popper: boolean
+}) => {
+  return popper ? <Manager>{children}</Manager> : <>{children}</>
+}
+
 interface ContextProps extends CDropdownProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dropdownToggleRef: RefObject<any> | undefined
@@ -149,38 +160,30 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const DropdownContent = () => {
-      return variant === 'input-group' ? (
-        <>{children}</>
-      ) : (
-        <Component
-          className={classNames(
-            variant === 'nav-item' ? 'nav-item dropdown' : variant,
-            {
-              'dropdown-center': direction === 'center',
-              'dropup dropup-center': direction === 'dropup-center',
-              direction: direction && direction !== 'center' && direction !== 'dropup-center',
-              show: _visible,
-            },
-            className,
-          )}
-          {...rest}
-          ref={forkedRef}
-        >
-          {children}
-        </Component>
-      )
-    }
-
     return (
       <CDropdownContext.Provider value={contextValues}>
-        {popper ? (
-          <Manager>
-            <DropdownContent />
-          </Manager>
-        ) : (
-          <DropdownContent />
-        )}
+        <PopperManagerWrapper popper={popper}>
+          {variant === 'input-group' ? (
+            <>{children}</>
+          ) : (
+            <Component
+              className={classNames(
+                variant === 'nav-item' ? 'nav-item dropdown' : variant,
+                {
+                  'dropdown-center': direction === 'center',
+                  'dropup dropup-center': direction === 'dropup-center',
+                  direction: direction && direction !== 'center' && direction !== 'dropup-center',
+                  show: _visible,
+                },
+                className,
+              )}
+              {...rest}
+              ref={forkedRef}
+            >
+              {children}
+            </Component>
+          )}
+        </PopperManagerWrapper>
       </CDropdownContext.Provider>
     )
   },

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

@@ -20,12 +20,18 @@ import { CMultiSelectNativeSelect } from './CMultiSelectNativeSelect'
 import { CMultiSelectOptions } from './CMultiSelectOptions'
 import { CMultiSelectSelection } from './CMultiSelectSelection'
 
-import { filterOptionsList, flattenArray, selectOptions } from './utils'
+import { createOption, filterOptionsList, flattenArray, selectOptions } from './utils'
 import type { Option, SelectedOption } from './types'
 
 export interface CMultiSelectProps
   extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>,
     Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * Allow users to create options if they are not in the list of options.
+   *
+   * @since 4.11.0-next.0
+   */
+  allowCreateOptions?: boolean
   /**
    * A string of all className you want applied to the base component.
    */
@@ -34,10 +40,22 @@ export interface CMultiSelectProps
    * Enables selection cleaner element.
    */
   cleaner?: boolean
+  /**
+   * Clear current search on selecting an item.
+   *
+   * @since 4.11.0-next.0
+   */
+  clearSearchOnSelect?: boolean
   /**
    * Toggle the disabled state for the component.
    */
   disabled?: boolean
+  /**
+   * When set, the options list will have a loading style: loading spinner and reduced opacity.
+   *
+   * @since 4.11.0-next.0
+   */
+  loading?: boolean
   /**
    * It specifies that multiple options can be selected at once.
    */
@@ -107,7 +125,6 @@ export interface CMultiSelectProps
    */
   visible?: boolean
   /**
-   *
    * Amount of visible items when virtualScroller is set to `true`.
    *
    * @since 4.8.0
@@ -118,12 +135,15 @@ export interface CMultiSelectProps
 export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
   (
     {
+      allowCreateOptions,
       className,
       cleaner = true,
+      clearSearchOnSelect,
       disabled,
       feedback,
       feedbackInvalid,
       feedbackValid,
+      loading,
       multiple = true,
       id,
       invalid,
@@ -156,9 +176,32 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const searchRef = useRef<HTMLInputElement>(null)
 
     const [_options, setOptions] = useState<Option[]>(options)
-    const [_search, setSearch] = useState('')
     const [_visible, setVisible] = useState(visible)
+    const [searchValue, setSearchValue] = useState('')
     const [selected, setSelected] = useState<SelectedOption[]>([])
+    const [userOptions, setUserOptions] = useState<Option[]>([])
+
+    const filteredOptions = useMemo(
+      () =>
+        search === 'external'
+          ? [..._options, ...filterOptionsList(searchValue, userOptions)]
+          : filterOptionsList(searchValue, [..._options, ...userOptions]),
+      [_options, searchValue, userOptions],
+    )
+
+    const userOption = useMemo(() => {
+      if (
+        allowCreateOptions &&
+        filteredOptions.length > 0 &&
+        flattenArray(filteredOptions).filter(
+          (option) => option.text.toLowerCase() === searchValue.toLowerCase(),
+        ).length > 0
+      ) {
+        return false
+      }
+
+      return searchRef.current && createOption(String(searchValue), flattenArray(_options))
+    }, [filteredOptions, searchValue])
 
     useMemo(() => {
       setOptions(options)
@@ -185,6 +228,10 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       _selected && setSelected(selectOptions(_selected, selected, deselected))
     }, [JSON.stringify(options)])
 
+    useEffect(() => {
+      !isInitialMount.current && onFilterChange && onFilterChange(searchValue)
+    }, [searchValue])
+
     useEffect(() => {
       !isInitialMount.current &&
         nativeSelectRef.current &&
@@ -196,16 +243,35 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     }, [])
 
     const handleSearchChange = (event: FormEvent<HTMLInputElement>) => {
-      const target = event.target as HTMLInputElement
-      if (search !== 'external') {
-        setSearch(target.value.toLowerCase())
-      }
-
-      onFilterChange && onFilterChange(target.value)
+      const value = (event.target as HTMLInputElement).value
+      setSearchValue(value)
     }
 
     const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-      if (_search.length > 0) {
+      if (event.key === 'Enter' && searchValue && allowCreateOptions) {
+        if (userOption) {
+          setSelected([...selected, ...userOption])
+          setUserOptions([...userOptions, ...userOption])
+        }
+
+        if (!userOption) {
+          setSelected([
+            ...selected,
+            flattenArray(filteredOptions).filter(
+              (option) => String(option.text).toLowerCase() === searchValue.toLowerCase(),
+            )[0],
+          ])
+        }
+
+        setSearchValue('')
+        if (searchRef.current) {
+          searchRef.current.value = ''
+        }
+
+        return
+      }
+
+      if (searchValue.length > 0) {
         return
       }
 
@@ -219,7 +285,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
       if (!multiple) {
         setSelected([{ value: option.value, text: option.text }] as SelectedOption[])
         setVisible(false)
-        setSearch('')
+        setSearchValue('')
         if (searchRef.current) {
           searchRef.current.value = ''
         }
@@ -227,6 +293,18 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
         return
       }
 
+      if (option.custom && !userOptions.some((_option) => _option.value === option.value)) {
+        setUserOptions([...userOptions, option])
+      }
+
+      if (clearSearchOnSelect || option.custom) {
+        setSearchValue('')
+        if (searchRef.current) {
+          searchRef.current.value = ''
+          searchRef.current.focus()
+        }
+      }
+
       if (selected.some((_option) => _option.value === option.value)) {
         setSelected(selected.filter((_option) => _option.value !== option.value))
       } else {
@@ -237,7 +315,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
     const handleSelectAll = () => {
       setSelected(
         selectOptions(
-          flattenArray(options).filter((option: Option) => !option.disabled),
+          [...flattenArray(options).filter((option: Option) => !option.disabled), ...userOptions],
           selected,
         ),
       )
@@ -325,7 +403,7 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
                     !multiple && { placeholder: selected.map((option) => option.text)[0] })}
                   {...(multiple &&
                     selected.length > 0 &&
-                    selectionType !== 'counter' && { size: _search.length + 2 })}
+                    selectionType !== 'counter' && { size: searchValue.length + 2 })}
                   ref={searchRef}
                 ></input>
               )}
@@ -346,7 +424,12 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
             )}
             <CMultiSelectOptions
               handleOptionOnClick={(option) => !disabled && handleOptionOnClick(option)}
-              options={search === 'external' ? _options : filterOptionsList(_search, _options)}
+              loading={loading}
+              options={
+                filteredOptions.length === 0 && allowCreateOptions
+                  ? userOption || []
+                  : filteredOptions
+              }
               optionsMaxHeight={optionsMaxHeight}
               optionsStyle={optionsStyle}
               searchNoResultsLabel={searchNoResultsLabel}
@@ -364,7 +447,9 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 CMultiSelect.propTypes = {
   className: PropTypes.string,
   cleaner: PropTypes.bool,
+  clearSearchOnSelect: PropTypes.bool,
   disabled: PropTypes.bool,
+  loading: PropTypes.bool,
   multiple: PropTypes.bool,
   onChange: PropTypes.func,
   options: PropTypes.array.isRequired,