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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.10.0",
+  "version": "4.11.0-next.1",
   "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.
    */
@@ -162,9 +174,13 @@ const Calendar = (props: {
   onCellKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   onCellMouseEnter: (date: Date) => void
   onCellMouseLeave: () => void
-  onMonthClick: (month: number, view: string) => void
-  onYearClick: (date: Date, view: string) => void
+  onMonthClick: (month: number) => void
+  onMonthKeyDown: (event: KeyboardEvent<HTMLDivElement>, month: number) => void
+  onYearClick: (date: Date) => void
+  onYearKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
+  selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
+  showAdjacementDays: boolean
   startDate: Date | null
   view: string
   weekdayFormat: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
@@ -185,8 +201,12 @@ const Calendar = (props: {
     onCellMouseEnter,
     onCellMouseLeave,
     onMonthClick,
+    onMonthKeyDown,
     onYearClick,
+    onYearKeyDown,
+    selectAdjacementDays,
     selectEndDate,
+    showAdjacementDays,
     startDate,
     view,
     weekdayFormat,
@@ -235,45 +255,56 @@ 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,
+                        clickable: month !== 'current' && selectAdjacementDays,
+                        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={
+                        (month === 'current' || selectAdjacementDays) &&
+                        !isDateDisabled(date, minDate, maxDate, disabledDates)
+                          ? 0
+                          : -1
+                      }
+                      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>
             )
           })}
@@ -284,9 +315,11 @@ const Calendar = (props: {
                 {row.map((month, idx) => {
                   return (
                     <td
-                      key={idx}
                       className="calendar-cell month"
-                      onClick={() => onMonthClick(index * 3 + idx - addMonths, 'days')}
+                      key={idx}
+                      onClick={() => onMonthClick(index * 3 + idx - addMonths)}
+                      onKeyDown={(event) => onMonthKeyDown(event, index * 3 + idx - addMonths)}
+                      tabIndex={0}
                     >
                       <div className="calendar-cell-inner">{month}</div>
                     </td>
@@ -302,14 +335,18 @@ const Calendar = (props: {
                 {row.map((year, idx) => {
                   return (
                     <td
-                      key={idx}
                       className="calendar-cell year"
+                      key={idx}
                       onClick={() =>
-                        onYearClick(
+                        onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()))
+                      }
+                      onKeyDown={(event) =>
+                        onYearKeyDown(
+                          event,
                           new Date(year, date.getMonth() - addMonths, date.getDate()),
-                          'months',
                         )
                       }
+                      tabIndex={0}
                     >
                       <div className="calendar-cell-inner">
                         {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
@@ -451,7 +488,9 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       navPrevDoubleIcon,
       navYearFirst,
       range,
+      selectAdjacementDays = false,
       selectEndDate,
+      showAdjacementDays = true,
       weekdayFormat = 2,
       onCalendarCellHover,
       onCalendarDateChange,
@@ -551,11 +590,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 +642,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
+
       setHoverDate(date)
       onCalendarCellHover && onCalendarCellHover(date)
     }
@@ -609,14 +652,30 @@ 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
       }
     }
 
+    const handleMonthClick = (month: number) => {
+      setCalendarPage(0, 0, month)
+      setView('days')
+    }
+
+    const handleMonthKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, month: number) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        setCalendarPage(0, 0, month)
+        setView('days')
+      }
+    }
+
     const handleNavigationOnClick = (direction: string, double = false) => {
       if (direction === 'prev') {
         if (double) {
@@ -648,6 +707,18 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }
 
+    const handleYearClick = (date: Date) => {
+      setCalendarDate(date)
+      setView('months')
+    }
+
+    const handleYearKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, date: Date) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        setCalendarDate(date)
+        setView('months')
+      }
+    }
+
     return (
       <div className={classNames('calendars', className)}>
         {_calendarDate &&
@@ -679,19 +750,17 @@ 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) => {
-                  setCalendarPage(0, 0, month)
-                  setView(view)
-                }}
-                onYearClick={(date, view) => {
-                  setCalendarDate(date)
-                  setView(view)
-                }}
+                onMonthClick={handleMonthClick}
+                onMonthKeyDown={handleMonthKeyDown}
+                onYearClick={handleYearClick}
+                onYearKeyDown={handleYearKeyDown}
                 selectEndDate={_selectEndDate}
+                selectAdjacementDays={selectAdjacementDays}
+                showAdjacementDays={showAdjacementDays}
                 startDate={_startDate}
                 view={view}
                 weekdayFormat={weekdayFormat}
@@ -724,7 +793,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,37 @@ 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) {
+        event.preventDefault()
+
+        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 +287,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 +295,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 +317,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 +405,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 +426,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 +449,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[]