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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.10.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

@@ -167,6 +167,8 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
       rangesButtonsVariant = 'ghost',
       required,
       separator = true,
+      selectAdjacementDays,
+      showAdjacementDays,
       size,
       startDate,
       text,
@@ -491,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)}

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,

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

@@ -6,9 +6,11 @@ import { CVirtualScroller } from './../virtual-scroller'
 
 import { getNextSibling, getPreviousSibling } from './utils'
 import type { Option } from './types'
+import { CElementCover } from '../element-cover'
 
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
   handleOptionOnClick?: (option: Option) => void
+  loading?: boolean
   options: Option[]
   optionsMaxHeight?: number | string
   optionsStyle?: 'checkbox' | 'text'
@@ -22,6 +24,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
   (
     {
       handleOptionOnClick,
+      loading,
       options,
       optionsMaxHeight,
       optionsStyle,
@@ -44,7 +47,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         const target = event.target as HTMLElement
         const next = getNextSibling(target, '.form-multi-select-option')
         if (next) {
-          (next as HTMLElement).focus() // eslint-disable-line prettier/prettier
+          ;(next as HTMLElement).focus() // eslint-disable-line prettier/prettier
         }
       }
 
@@ -53,7 +56,7 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         const target = event.target as HTMLElement
         const prev = getPreviousSibling(target, '.form-multi-select-option')
         if (prev) {
-          (prev as HTMLElement).focus() // eslint-disable-line prettier/prettier
+          ;(prev as HTMLElement).focus() // eslint-disable-line prettier/prettier
         }
       }
     }
@@ -86,26 +89,36 @@ export const CMultiSelectOptions = forwardRef<HTMLDivElement, CMultiSelectOption
         <div className="form-multi-select-options-empty">{searchNoResultsLabel}</div>
       )
 
-    return virtualScroller ? (
-      <CVirtualScroller className="form-multi-select-options" visibleItems={visibleItems} ref={ref}>
-        {createOptions(options)}
-      </CVirtualScroller>
-    ) : (
-      <div
-        className="form-multi-select-options"
-        {...(optionsMaxHeight !== 'auto' && {
-          style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
-        })}
-        ref={ref}
-      >
-        {createOptions(options)}
-      </div>
+    return (
+      <>
+        {virtualScroller ? (
+          <CVirtualScroller
+            className="form-multi-select-options"
+            visibleItems={visibleItems}
+            ref={ref}
+          >
+            {createOptions(options)}
+          </CVirtualScroller>
+        ) : (
+          <div
+            className="form-multi-select-options"
+            {...(optionsMaxHeight !== 'auto' && {
+              style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
+            })}
+            ref={ref}
+          >
+            {createOptions(options)}
+          </div>
+        )}
+        {loading && <CElementCover />}
+      </>
     )
   },
 )
 
 CMultiSelectOptions.propTypes = {
   handleOptionOnClick: PropTypes.func,
+  loading: PropTypes.bool,
   options: PropTypes.array.isRequired,
   optionsMaxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   optionsStyle: PropTypes.oneOf(['checkbox', 'text']),

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

@@ -1,4 +1,5 @@
 export type Option = {
+  custom?: boolean
   disabled?: boolean
   label?: string
   options?: Option[]

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

@@ -1,33 +1,50 @@
 import type { Option, SelectedOption } from './types'
 
-export const filterOptionsList = (search: string, _options: Option[]) => {
-  return search.length > 0
+export const createOption = (text: string, options: Option[]) => {
+  const value = text.toLowerCase().replace(/\s/g, '-')
+  let uniqueValue = value
+  let i = 1
+
+  while (options.find((option) => String(option.value) === uniqueValue)) {
+    uniqueValue = `${value}-${i}`
+    i++
+  }
+
+  return [
+    {
+      value: uniqueValue,
+      text,
+      custom: true,
+    },
+  ]
+}
+
+export const filterOptionsList = (search: string, _options: Option[]) =>
+  search.length > 0
     ? _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 > 0)
-          ) {
-            acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
-          }
-
-          return acc
-        }, [])
+      _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 > 0)
+        ) {
+          acc.push(Object.assign({}, val, options && options.length > 0 && { options }))
+        }
+
+        return acc
+      }, [])
     : _options
-}
 
-export const flattenArray = (options: Option[]): Option[] => {
-  return options.reduce((acc: Option[], val: Option) => {
-    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
-  }, [])
-}
+export const flattenArray = (options: Option[]): Option[] =>
+  options.reduce(
+    (acc: Option[], val: Option) =>
+      acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val),
+    [],
+  )
 
 export const getNextSibling = (elem: HTMLElement, selector?: string) => {
   // Get the next sibling element

package/src/components/smart-table/CSmartTableInterface.tsx

@@ -121,7 +121,7 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
    */
   itemsPerPageSelect?: boolean | ItemsPerPageSelect
   /**
-   * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
+   * When set, table will have loading style: loading spinner and reduced opacity.
    */
   loading?: boolean
   /**