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

package/README.md

@@ -42,7 +42,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.10.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.11.0-next.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/calendar/CCalendar.d.ts

@@ -80,6 +80,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.
      */

package/dist/components/multi-select/CMultiSelect.d.ts

@@ -2,6 +2,12 @@ import React, { HTMLAttributes, ReactNode } from 'react';
 import { CFormControlWrapperProps } from './../form/CFormControlWrapper';
 import type { Option } 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.
      */
@@ -10,10 +16,22 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      * 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.
      */
@@ -83,7 +101,6 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      */
     visible?: boolean;
     /**
-     *
      * Amount of visible items when virtualScroller is set to `true`.
      *
      * @since 4.8.0

package/dist/components/multi-select/CMultiSelectOptions.d.ts

@@ -2,6 +2,7 @@ import React, { HTMLAttributes, ReactNode } from 'react';
 import type { Option } from './types';
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
     handleOptionOnClick?: (option: Option) => void;
+    loading?: boolean;
     options: Option[];
     optionsMaxHeight?: number | string;
     optionsStyle?: 'checkbox' | 'text';

package/dist/components/multi-select/types.d.ts

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

package/dist/components/multi-select/utils.d.ts

@@ -1,4 +1,9 @@
 import type { Option, SelectedOption } from './types';
+export declare const createOption: (text: string, options: Option[]) => {
+    value: string;
+    text: string;
+    custom: boolean;
+}[];
 export declare const filterOptionsList: (search: string, _options: Option[]) => Option[];
 export declare const flattenArray: (options: Option[]) => Option[];
 export declare const getNextSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;

package/dist/components/smart-table/CSmartTableInterface.d.ts

@@ -106,7 +106,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;
     /**

package/dist/index.es.js

@@ -6921,7 +6921,7 @@ var isToday = function (date) {
 };
 
 var Calendar = function (props) {
-    var addMonths = props.addMonths, calendarDate = props.calendarDate, dayFormat = props.dayFormat, disabledDates = props.disabledDates, endDate = props.endDate, firstDayOfWeek = props.firstDayOfWeek, hoverDate = props.hoverDate, locale = props.locale, maxDate = props.maxDate, minDate = props.minDate, onCellClick = props.onCellClick, onCellKeyDown = props.onCellKeyDown, onCellMouseEnter = props.onCellMouseEnter, onCellMouseLeave = props.onCellMouseLeave, onMonthClick = props.onMonthClick, onYearClick = props.onYearClick, selectEndDate = props.selectEndDate, startDate = props.startDate, view = props.view, weekdayFormat = props.weekdayFormat;
+    var addMonths = props.addMonths, calendarDate = props.calendarDate, dayFormat = props.dayFormat, disabledDates = props.disabledDates, endDate = props.endDate, firstDayOfWeek = props.firstDayOfWeek, hoverDate = props.hoverDate, locale = props.locale, maxDate = props.maxDate, minDate = props.minDate, onCellClick = props.onCellClick, onCellKeyDown = props.onCellKeyDown, onCellMouseEnter = props.onCellMouseEnter, onCellMouseLeave = props.onCellMouseLeave, onMonthClick = props.onMonthClick, onYearClick = props.onYearClick, selectAdjacementDays = props.selectAdjacementDays, selectEndDate = props.selectEndDate, showAdjacementDays = props.showAdjacementDays, startDate = props.startDate, view = props.view, weekdayFormat = props.weekdayFormat;
     var _a = useState(calendarDate), date = _a[0], setDate = _a[1];
     var _b = useState([]), listOfMonths = _b[0], setListOfMonths = _b[1];
     useEffect(function () {
@@ -6954,7 +6954,7 @@ var Calendar = function (props) {
                     return (React__default$1.createElement("tr", { key: index }, week.map(function (_a, idx) {
                         var _b;
                         var date = _a.date, month = _a.month;
-                        return (React__default$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', (_b = {
+                        return month === 'current' || showAdjacementDays ? (React__default$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', (_b = {
                                     today: month === 'current' && isToday(date),
                                     disabled: isDateDisabled(date, minDate, maxDate, disabledDates)
                                 },
@@ -6968,19 +6968,20 @@ var Calendar = function (props) {
                                 _b.selected = isDateSelected(date, startDate, endDate),
                                 _b.start = isStartDate(date, startDate, endDate),
                                 _b.end = isEndDate(date, startDate, endDate),
-                                _b)), key: idx, tabIndex: 0, title: date.toLocaleDateString(locale) }, (month === 'current' && {
+                                _b)), key: idx, tabIndex: 0, title: date.toLocaleDateString(locale) }, ((month === 'current' || selectAdjacementDays) && {
                             onBlur: function () { return onCellMouseLeave(); },
                             onClick: function () { return onCellClick(date); },
                             onFocus: function () { return onCellMouseEnter(date); },
                             onKeyDown: function (event) { return onCellKeyDown(event, date); },
                             onMouseEnter: function () { return onCellMouseEnter(date); },
                             onMouseLeave: function () { return onCellMouseLeave(); },
-                        }), (month !== 'current' && {
+                        }), (month !== 'current' &&
+                            !selectAdjacementDays && {
                             onMouseEnter: function () { return onCellMouseLeave(); },
                         })),
                             React__default$1.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
                                 ? dayFormat(date)
-                                : date.toLocaleDateString(locale, { day: dayFormat }))));
+                                : date.toLocaleDateString(locale, { day: dayFormat })))) : (React__default$1.createElement("td", { key: idx }));
                     })));
                 }),
             view === 'months' &&
@@ -7022,9 +7023,9 @@ var Navigation = function (props) {
             React__default$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next', true); } }, navNextDoubleIcon ? (navNextDoubleIcon) : (React__default$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
 };
 var CCalendar = forwardRef(function (_a, ref) {
-    var startDate = _a.startDate, endDate = _a.endDate, _b = _a.calendarDate, calendarDate = _b === void 0 ? startDate || endDate || null : _b, _c = _a.calendars, calendars = _c === void 0 ? 1 : _c, className = _a.className, _d = _a.dayFormat, dayFormat = _d === void 0 ? 'numeric' : _d, disabledDates = _a.disabledDates, _e = _a.firstDayOfWeek, firstDayOfWeek = _e === void 0 ? 1 : _e, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, _g = _a.navigation, navigation = _g === void 0 ? true : _g, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, navYearFirst = _a.navYearFirst, range = _a.range, selectEndDate = _a.selectEndDate, _h = _a.weekdayFormat, weekdayFormat = _h === void 0 ? 2 : _h, onCalendarCellHover = _a.onCalendarCellHover, onCalendarDateChange = _a.onCalendarDateChange, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
+    var startDate = _a.startDate, endDate = _a.endDate, _b = _a.calendarDate, calendarDate = _b === void 0 ? startDate || endDate || null : _b, _c = _a.calendars, calendars = _c === void 0 ? 1 : _c, className = _a.className, _d = _a.dayFormat, dayFormat = _d === void 0 ? 'numeric' : _d, disabledDates = _a.disabledDates, _e = _a.firstDayOfWeek, firstDayOfWeek = _e === void 0 ? 1 : _e, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, _g = _a.navigation, navigation = _g === void 0 ? true : _g, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, navYearFirst = _a.navYearFirst, range = _a.range, _h = _a.selectAdjacementDays, selectAdjacementDays = _h === void 0 ? false : _h, selectEndDate = _a.selectEndDate, _j = _a.showAdjacementDays, showAdjacementDays = _j === void 0 ? true : _j, _k = _a.weekdayFormat, weekdayFormat = _k === void 0 ? 2 : _k, onCalendarCellHover = _a.onCalendarCellHover, onCalendarDateChange = _a.onCalendarDateChange, onEndDateChange = _a.onEndDateChange, onStartDateChange = _a.onStartDateChange, onSelectEndChange = _a.onSelectEndChange, onViewChanged = _a.onViewChanged;
     var isInitialMount = useRef(true);
-    var _j = useState(null), _calendarDate = _j[0], setCalendarDate = _j[1];
+    var _l = useState(null), _calendarDate = _l[0], setCalendarDate = _l[1];
     useEffect(function () {
         if (calendarDate === null) {
             setCalendarDate(new Date());
@@ -7035,30 +7036,30 @@ var CCalendar = forwardRef(function (_a, ref) {
             !isSameDateAs(_calendarDate, date) && setCalendarDate(date);
         }
     }, [calendarDate]);
-    var _k = useStateWithCallback(startDate ? new Date(startDate) : null, onStartDateChange, !isInitialMount.current), _startDate = _k[0], setStartDate = _k[1];
+    var _m = useStateWithCallback(startDate ? new Date(startDate) : null, onStartDateChange, !isInitialMount.current), _startDate = _m[0], setStartDate = _m[1];
     useEffect(function () {
         var date = startDate ? new Date(startDate) : null;
         if (!isSameDateAs(date, _startDate)) {
             setStartDate(date);
         }
     }, [startDate]);
-    var _l = useStateWithCallback(endDate ? new Date(endDate) : null, onEndDateChange, !isInitialMount.current), _endDate = _l[0], setEndDate = _l[1];
+    var _o = useStateWithCallback(endDate ? new Date(endDate) : null, onEndDateChange, !isInitialMount.current), _endDate = _o[0], setEndDate = _o[1];
     useEffect(function () {
         var date = endDate ? new Date(endDate) : null;
         if (!isSameDateAs(date, _endDate)) {
             setEndDate(date);
         }
     }, [endDate]);
-    var _m = useState(null), _hoverDate = _m[0], setHoverDate = _m[1];
-    var _o = useState(maxDate ? new Date(maxDate) : null), _maxDate = _o[0], setMaxDate = _o[1];
+    var _p = useState(null), _hoverDate = _p[0], setHoverDate = _p[1];
+    var _q = useState(maxDate ? new Date(maxDate) : null), _maxDate = _q[0], setMaxDate = _q[1];
     useEffect(function () {
         maxDate && setMaxDate(new Date(maxDate));
     }, [maxDate]);
-    var _p = useState(minDate ? new Date(minDate) : null), _minDate = _p[0], setMinDate = _p[1];
+    var _r = useState(minDate ? new Date(minDate) : null), _minDate = _r[0], setMinDate = _r[1];
     useEffect(function () {
         minDate && setMinDate(new Date(minDate));
     }, [minDate]);
-    var _q = useStateWithCallback(selectEndDate, onSelectEndChange), _selectEndDate = _q[0], setSelectEndDate = _q[1];
+    var _s = useStateWithCallback(selectEndDate, onSelectEndChange), _selectEndDate = _s[0], setSelectEndDate = _s[1];
     useEffect(function () {
         setSelectEndDate(selectEndDate);
     }, [selectEndDate]);
@@ -7068,7 +7069,7 @@ var CCalendar = forwardRef(function (_a, ref) {
             onSelectEndChange &&
             onSelectEndChange(_selectEndDate);
     }, [_selectEndDate]);
-    var _r = useStateWithCallback('days', onViewChanged), view = _r[0], setView = _r[1];
+    var _t = useStateWithCallback('days', onViewChanged), view = _t[0], setView = _t[1];
     useEffect(function () {
         isInitialMount.current = false;
     }, []);
@@ -7086,10 +7087,12 @@ var CCalendar = forwardRef(function (_a, ref) {
         setCalendarDate(d);
         onCalendarDateChange && onCalendarDateChange(d);
     };
-    var handleCellOnClick = function (date) {
+    var handleCellOnClick = function (date, index) {
         if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
             return;
         }
+        var _date = new Date(date);
+        setCalendarDate(index ? new Date(_date.setMonth(_date.getMonth() - index)) : _date);
         if (range) {
             if (_selectEndDate) {
                 setSelectEndDate(false);
@@ -7133,10 +7136,10 @@ var CCalendar = forwardRef(function (_a, ref) {
         setHoverDate(null);
         onCalendarCellHover && onCalendarCellHover(null);
     };
-    var handleCellKeyDown = function (event, date) {
+    var handleCellKeyDown = function (event, date, index) {
         if (event.code === 'Space' || event.key === 'Enter') {
             event.preventDefault();
-            handleCellOnClick && handleCellOnClick(date);
+            handleCellOnClick && handleCellOnClick(date, index);
             return;
         }
     };
@@ -7170,13 +7173,13 @@ var CCalendar = forwardRef(function (_a, ref) {
     return (React__default$1.createElement("div", { className: classNames$1('calendars', className) }, _calendarDate &&
         Array.from({ length: calendars }, function (_, index) { return (React__default$1.createElement("div", { className: classNames$1('calendar', view), key: index, ref: ref },
             React__default$1.createElement(Navigation, { addMonths: index, calendarDate: _calendarDate, locale: locale, navigation: navigation, navNextDoubleIcon: navNextDoubleIcon, navNextIcon: navNextIcon, navPrevDoubleIcon: navPrevDoubleIcon, navPrevIcon: navPrevIcon, navYearFirst: navYearFirst, onMonthClick: function () { return setView('months'); }, onNavigationClick: handleNavigationOnClick, onYearClick: function () { return setView('years'); }, view: view }),
-            React__default$1.createElement(Calendar, { addMonths: index, calendarDate: _calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCellClick: handleCellOnClick, onCellKeyDown: handleCellKeyDown, onCellMouseEnter: handleCellMouseEnter, onCellMouseLeave: handleCellMouseLeave, onMonthClick: function (month, view) {
+            React__default$1.createElement(Calendar, { addMonths: index, calendarDate: _calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCellClick: function (date) { return handleCellOnClick(date, index); }, onCellKeyDown: function (event, date) { return handleCellKeyDown(event, date, index); }, onCellMouseEnter: handleCellMouseEnter, onCellMouseLeave: handleCellMouseLeave, onMonthClick: function (month, view) {
                     setCalendarPage(0, 0, month);
                     setView(view);
                 }, onYearClick: function (date, view) {
                     setCalendarDate(date);
                     setView(view);
-                }, selectEndDate: _selectEndDate, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
+                }, selectEndDate: _selectEndDate, selectAdjacementDays: selectAdjacementDays, showAdjacementDays: showAdjacementDays, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
 });
 CCalendar.propTypes = {
     className: propTypesExports.string,
@@ -7199,7 +7202,9 @@ CCalendar.propTypes = {
     navPrevDoubleIcon: propTypesExports.node,
     navYearFirst: propTypesExports.bool,
     range: propTypesExports.bool,
+    selectAdjacementDays: propTypesExports.bool,
     selectEndDate: propTypesExports.bool,
+    showAdjacementDays: propTypesExports.bool,
     startDate: propTypesExports.oneOfType([propTypesExports.instanceOf(Date), propTypesExports.string]),
     weekdayFormat: propTypesExports.oneOfType([
         propTypesExports.func,
@@ -10434,7 +10439,7 @@ var getLocalDateFromString = function (string, locale, time) {
 
 var _a, _b, _c, _d, _e, _f;
 var CDateRangePicker = forwardRef(function (_a, ref) {
-    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, calendarDate = _a.calendarDate, _d = _a.closeOnSelect, closeOnSelect = _d === void 0 ? true : _d, _e = _a.indicator, indicator = _e === void 0 ? true : _e, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _g = _a.placeholder, placeholder = _g === void 0 ? ['Start date', 'End date'] : _g, _h = _a.range, range = _h === void 0 ? true : _h, ranges = _a.ranges, _j = _a.rangesButtonsColor, rangesButtonsColor = _j === void 0 ? 'secondary' : _j, rangesButtonsSize = _a.rangesButtonsSize, _k = _a.rangesButtonsVariant, rangesButtonsVariant = _k === void 0 ? 'ghost' : _k, required = _a.required, _l = _a.separator, separator = _l === void 0 ? true : _l, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _m = _a.todayButton, todayButton = _m === void 0 ? 'Today' : _m, _o = _a.todayButtonColor, todayButtonColor = _o === void 0 ? 'primary' : _o, _p = _a.todayButtonSize, todayButtonSize = _p === void 0 ? 'sm' : _p, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "className", "cleaner", "calendarDate", "closeOnSelect", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
+    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, calendarDate = _a.calendarDate, _d = _a.closeOnSelect, closeOnSelect = _d === void 0 ? true : _d, _e = _a.indicator, indicator = _e === void 0 ? true : _e, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _f = _a.locale, locale = _f === void 0 ? 'default' : _f, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _g = _a.placeholder, placeholder = _g === void 0 ? ['Start date', 'End date'] : _g, _h = _a.range, range = _h === void 0 ? true : _h, ranges = _a.ranges, _j = _a.rangesButtonsColor, rangesButtonsColor = _j === void 0 ? 'secondary' : _j, rangesButtonsSize = _a.rangesButtonsSize, _k = _a.rangesButtonsVariant, rangesButtonsVariant = _k === void 0 ? 'ghost' : _k, required = _a.required, _l = _a.separator, separator = _l === void 0 ? true : _l, selectAdjacementDays = _a.selectAdjacementDays, showAdjacementDays = _a.showAdjacementDays, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _m = _a.todayButton, todayButton = _m === void 0 ? 'Today' : _m, _o = _a.todayButtonColor, todayButtonColor = _o === void 0 ? 'primary' : _o, _p = _a.todayButtonSize, todayButtonSize = _p === void 0 ? 'sm' : _p, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "className", "cleaner", "calendarDate", "closeOnSelect", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "selectAdjacementDays", "showAdjacementDays", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
     var _q = useState(visible), _visible = _q[0], setVisible = _q[1];
     var inputStartRef = useRef(null);
     var inputEndRef = useRef(null);
@@ -10582,7 +10587,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                         handleStartDateChange(ranges[key][0]);
                         handleEndDateChange(ranges[key][1]);
                     }, size: rangesButtonsSize, variant: rangesButtonsVariant }, key)); }))),
-                React__default$1.createElement(CCalendar, { calendarDate: _calendarDate, calendars: isMobile_1 ? 1 : calendars, className: "date-picker-calendars", dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, locale: locale, maxDate: _maxDate, minDate: _minDate, navigation: navigation, navYearFirst: navYearFirst, range: range, selectEndDate: selectEndDate, startDate: _startDate, onCalendarCellHover: function (date) { return handleCalendarCellHover(date); }, onCalendarDateChange: function (date) { return handleCalendarDateChange(date); }, onStartDateChange: function (date) { return handleStartDateChange(date); }, onEndDateChange: function (date) { return handleEndDateChange(date); }, onSelectEndChange: function (value) { return setSelectEndDate(value); }, weekdayFormat: weekdayFormat }),
+                React__default$1.createElement(CCalendar, { calendarDate: _calendarDate, calendars: isMobile_1 ? 1 : calendars, className: "date-picker-calendars", dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, locale: locale, maxDate: _maxDate, minDate: _minDate, navigation: navigation, navYearFirst: navYearFirst, range: range, selectAdjacementDays: selectAdjacementDays, selectEndDate: selectEndDate, showAdjacementDays: showAdjacementDays, startDate: _startDate, onCalendarCellHover: function (date) { return handleCalendarCellHover(date); }, onCalendarDateChange: function (date) { return handleCalendarDateChange(date); }, onStartDateChange: function (date) { return handleStartDateChange(date); }, onEndDateChange: function (date) { return handleEndDateChange(date); }, onSelectEndChange: function (value) { return setSelectEndDate(value); }, weekdayFormat: weekdayFormat }),
                 timepicker && (React__default$1.createElement("div", { className: "date-picker-timepickers" }, isMobile_1 || (range && calendars === 1) ? (React__default$1.createElement(React__default$1.Fragment, null,
                     React__default$1.createElement(CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleStartDateChange(date); }, time: _startDate, variant: "select" }),
                     React__default$1.createElement(CTimePicker, { container: "inline", disabled: _endDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleEndDateChange(date); }, time: _endDate, variant: "select" }))) : (__spreadArray([], Array(calendars), true).map(function (_, index) { return (React__default$1.createElement(CTimePicker, { container: "inline", disabled: index === 0
@@ -11274,15 +11279,15 @@ var CVirtualScroller = forwardRef(function (_a, ref) {
             setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop));
     });
     useEffect(function () {
-        setItemsNumber(itemsNumber || React__default$1.Children.count(children));
-    }, [children, itemsNumber]);
+        setItemsNumber(React__default$1.Children.count(children));
+    }, [children]);
     useEffect(function () {
-        setViewportHeight(visibleItems * itemHeight + 2 * viewportPadding);
-    }, [viewportPadding, visibleItems, itemHeight]);
+        setViewportHeight(Math.min(visibleItems, itemsNumber) * itemHeight + 2 * viewportPadding);
+    }, [itemHeight, itemsNumber, viewportPadding, visibleItems]);
     useEffect(function () {
-        setMaxHeight(itemsNumber * itemHeight + 2 * viewportPadding);
+        setMaxHeight(itemsNumber * itemHeight);
         virtualScrollRef.current && virtualScrollRef.current.scrollTop;
-    }, [itemsNumber, itemHeight]);
+    }, [itemHeight, itemsNumber]);
     useEffect(function () {
         setBuffer(Math.floor(visibleItems / 2));
     }, [visibleItems]);
@@ -11294,7 +11299,8 @@ var CVirtualScroller = forwardRef(function (_a, ref) {
     return (React__default$1.createElement("div", { className: classNames$1('virtual-scroller', className), onScroll: function (event) {
             return handleScroll(event.target.scrollTop);
         }, ref: forkedRef, style: {
-            height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
+            // height: maxHeight > viewportHeight ? viewportHeight : maxHeight,
+            height: viewportHeight,
             overflowY: 'auto',
         } },
         React__default$1.createElement("div", { className: "virtual-scroller-content", style: {
@@ -11329,14 +11335,28 @@ CVirtualScroller.propTypes = {
 };
 CVirtualScroller.displayName = 'CVirtualScroller';
 
+var createOption = function (text, options) {
+    var value = text.toLowerCase().replace(/\s/g, '-');
+    var uniqueValue = value;
+    var i = 1;
+    while (options.find(function (option) { return String(option.value) === uniqueValue; })) {
+        uniqueValue = "".concat(value, "-").concat(i);
+        i++;
+    }
+    return [
+        {
+            value: uniqueValue,
+            text: text,
+            custom: true,
+        },
+    ];
+};
 var filterOptionsList = function (search, _options) {
     return search.length > 0
         ? _options &&
             _options.reduce(function (acc, val) {
                 var options = val.options &&
-                    val.options.filter(function (element) {
-                        return element.text && element.text.toLowerCase().includes(search.toLowerCase());
-                    });
+                    val.options.filter(function (element) { return 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: options }));
@@ -11397,7 +11417,7 @@ var selectOptions = function (options, selected, deselected) {
 };
 
 var CMultiSelectOptions = forwardRef(function (_a, ref) {
-    var handleOptionOnClick = _a.handleOptionOnClick, options = _a.options, optionsMaxHeight = _a.optionsMaxHeight, optionsStyle = _a.optionsStyle, searchNoResultsLabel = _a.searchNoResultsLabel, selected = _a.selected, virtualScroller = _a.virtualScroller, _b = _a.visibleItems, visibleItems = _b === void 0 ? 10 : _b;
+    var handleOptionOnClick = _a.handleOptionOnClick, loading = _a.loading, options = _a.options, optionsMaxHeight = _a.optionsMaxHeight, optionsStyle = _a.optionsStyle, searchNoResultsLabel = _a.searchNoResultsLabel, selected = _a.selected, virtualScroller = _a.virtualScroller, _b = _a.visibleItems, visibleItems = _b === void 0 ? 10 : _b;
     var handleKeyDown = function (event, option) {
         if (event.code === 'Space' || event.key === 'Enter') {
             event.preventDefault();
@@ -11432,12 +11452,15 @@ var CMultiSelectOptions = forwardRef(function (_a, ref) {
                 }), key: index, onClick: function () { return handleOptionOnClick && handleOptionOnClick(option); }, onKeyDown: function (event) { return handleKeyDown(event, option); }, tabIndex: 0 }, option.text));
         })) : (React__default$1.createElement("div", { className: "form-multi-select-options-empty" }, searchNoResultsLabel));
     };
-    return virtualScroller ? (React__default$1.createElement(CVirtualScroller, { className: "form-multi-select-options", visibleItems: visibleItems, ref: ref }, createOptions(options))) : (React__default$1.createElement("div", __assign$1({ className: "form-multi-select-options" }, (optionsMaxHeight !== 'auto' && {
-        style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
-    }), { ref: ref }), createOptions(options)));
+    return (React__default$1.createElement(React__default$1.Fragment, null,
+        virtualScroller ? (React__default$1.createElement(CVirtualScroller, { className: "form-multi-select-options", visibleItems: visibleItems, ref: ref }, createOptions(options))) : (React__default$1.createElement("div", __assign$1({ className: "form-multi-select-options" }, (optionsMaxHeight !== 'auto' && {
+            style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
+        }), { ref: ref }), createOptions(options))),
+        loading && React__default$1.createElement(CElementCover, null)));
 });
 CMultiSelectOptions.propTypes = {
     handleOptionOnClick: propTypesExports.func,
+    loading: propTypesExports.bool,
     options: propTypesExports.array.isRequired,
     optionsMaxHeight: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]),
     optionsStyle: propTypesExports.oneOf(['checkbox', 'text']),
@@ -11480,14 +11503,27 @@ CMultiSelectSelection.displayName = 'CMultiSelectSelection';
 
 var CMultiSelect = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _d = _a.multiple, multiple = _d === void 0 ? true : _d, id = _a.id, invalid = _a.invalid, label = _a.label, onChange = _a.onChange, onFilterChange = _a.onFilterChange, options = _a.options, _e = _a.optionsMaxHeight, optionsMaxHeight = _e === void 0 ? 'auto' : _e, _f = _a.optionsStyle, optionsStyle = _f === void 0 ? 'checkbox' : _f, _g = _a.placeholder, placeholder = _g === void 0 ? 'Select...' : _g, _h = _a.search, search = _h === void 0 ? true : _h, _j = _a.searchNoResultsLabel, searchNoResultsLabel = _j === void 0 ? 'No results found' : _j, _k = _a.selectAll, selectAll = _k === void 0 ? true : _k, _l = _a.selectAllLabel, selectAllLabel = _l === void 0 ? 'Select all options' : _l, _m = _a.selectionType, selectionType = _m === void 0 ? 'tags' : _m, _o = _a.selectionTypeCounterText, selectionTypeCounterText = _o === void 0 ? 'item(s) selected' : _o, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, virtualScroller = _a.virtualScroller, _p = _a.visible, visible = _p === void 0 ? false : _p, _q = _a.visibleItems, visibleItems = _q === void 0 ? 10 : _q, rest = __rest$1(_a, ["className", "cleaner", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "multiple", "id", "invalid", "label", "onChange", "onFilterChange", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "search", "searchNoResultsLabel", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "size", "text", "tooltipFeedback", "valid", "virtualScroller", "visible", "visibleItems"]);
+    var allowCreateOptions = _a.allowCreateOptions, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, clearSearchOnSelect = _a.clearSearchOnSelect, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, loading = _a.loading, _d = _a.multiple, multiple = _d === void 0 ? true : _d, id = _a.id, invalid = _a.invalid, label = _a.label, onChange = _a.onChange, onFilterChange = _a.onFilterChange, options = _a.options, _e = _a.optionsMaxHeight, optionsMaxHeight = _e === void 0 ? 'auto' : _e, _f = _a.optionsStyle, optionsStyle = _f === void 0 ? 'checkbox' : _f, _g = _a.placeholder, placeholder = _g === void 0 ? 'Select...' : _g, _h = _a.search, search = _h === void 0 ? true : _h, _j = _a.searchNoResultsLabel, searchNoResultsLabel = _j === void 0 ? 'No results found' : _j, _k = _a.selectAll, selectAll = _k === void 0 ? true : _k, _l = _a.selectAllLabel, selectAllLabel = _l === void 0 ? 'Select all options' : _l, _m = _a.selectionType, selectionType = _m === void 0 ? 'tags' : _m, _o = _a.selectionTypeCounterText, selectionTypeCounterText = _o === void 0 ? 'item(s) selected' : _o, size = _a.size, text = _a.text, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, virtualScroller = _a.virtualScroller, _p = _a.visible, visible = _p === void 0 ? false : _p, _q = _a.visibleItems, visibleItems = _q === void 0 ? 10 : _q, rest = __rest$1(_a, ["allowCreateOptions", "className", "cleaner", "clearSearchOnSelect", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "loading", "multiple", "id", "invalid", "label", "onChange", "onFilterChange", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "search", "searchNoResultsLabel", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "size", "text", "tooltipFeedback", "valid", "virtualScroller", "visible", "visibleItems"]);
     var isInitialMount = useRef(true);
     var nativeSelectRef = useRef(null);
     var searchRef = useRef(null);
     var _r = useState(options), _options = _r[0], setOptions = _r[1];
-    var _s = useState(''), _search = _s[0], setSearch = _s[1];
-    var _t = useState(visible), _visible = _t[0], setVisible = _t[1];
+    var _s = useState(visible), _visible = _s[0], setVisible = _s[1];
+    var _t = useState(''), searchValue = _t[0], setSearchValue = _t[1];
     var _u = useState([]), selected = _u[0], setSelected = _u[1];
+    var _v = useState([]), userOptions = _v[0], setUserOptions = _v[1];
+    var filteredOptions = useMemo(function () {
+        return search === 'external'
+            ? __spreadArray(__spreadArray([], _options, true), filterOptionsList(searchValue, userOptions), true) : filterOptionsList(searchValue, __spreadArray(__spreadArray([], _options, true), userOptions, true));
+    }, [_options, searchValue, userOptions]);
+    var userOption = useMemo(function () {
+        if (allowCreateOptions &&
+            filteredOptions.length > 0 &&
+            flattenArray(filteredOptions).filter(function (option) { return option.text.toLowerCase() === searchValue.toLowerCase(); }).length > 0) {
+            return false;
+        }
+        return searchRef.current && createOption(String(searchValue), flattenArray(_options));
+    }, [filteredOptions, searchValue]);
     useMemo(function () {
         setOptions(options);
         var _selected = options &&
@@ -11506,6 +11542,9 @@ var CMultiSelect = forwardRef(function (_a, ref) {
             });
         _selected && setSelected(selectOptions(_selected, selected, deselected));
     }, [JSON.stringify(options)]);
+    useEffect(function () {
+        !isInitialMount.current && onFilterChange && onFilterChange(searchValue);
+    }, [searchValue]);
     useEffect(function () {
         !isInitialMount.current &&
             nativeSelectRef.current &&
@@ -11515,14 +11554,27 @@ var CMultiSelect = forwardRef(function (_a, ref) {
         isInitialMount.current = false;
     }, []);
     var handleSearchChange = function (event) {
-        var target = event.target;
-        if (search !== 'external') {
-            setSearch(target.value.toLowerCase());
-        }
-        onFilterChange && onFilterChange(target.value);
+        var value = event.target.value;
+        setSearchValue(value);
     };
     var handleSearchKeyDown = function (event) {
-        if (_search.length > 0) {
+        if (event.key === 'Enter' && searchValue && allowCreateOptions) {
+            if (userOption) {
+                setSelected(__spreadArray(__spreadArray([], selected, true), userOption, true));
+                setUserOptions(__spreadArray(__spreadArray([], userOptions, true), userOption, true));
+            }
+            if (!userOption) {
+                setSelected(__spreadArray(__spreadArray([], selected, true), [
+                    flattenArray(filteredOptions).filter(function (option) { return String(option.text).toLowerCase() === searchValue.toLowerCase(); })[0],
+                ], false));
+            }
+            setSearchValue('');
+            if (searchRef.current) {
+                searchRef.current.value = '';
+            }
+            return;
+        }
+        if (searchValue.length > 0) {
             return;
         }
         if (event.key === 'Backspace' || event.key === 'Delete') {
@@ -11534,12 +11586,22 @@ var CMultiSelect = forwardRef(function (_a, ref) {
         if (!multiple) {
             setSelected([{ value: option.value, text: option.text }]);
             setVisible(false);
-            setSearch('');
+            setSearchValue('');
             if (searchRef.current) {
                 searchRef.current.value = '';
             }
             return;
         }
+        if (option.custom && !userOptions.some(function (_option) { return _option.value === option.value; })) {
+            setUserOptions(__spreadArray(__spreadArray([], userOptions, true), [option], false));
+        }
+        if (clearSearchOnSelect || option.custom) {
+            setSearchValue('');
+            if (searchRef.current) {
+                searchRef.current.value = '';
+                searchRef.current.focus();
+            }
+        }
         if (selected.some(function (_option) { return _option.value === option.value; })) {
             setSelected(selected.filter(function (_option) { return _option.value !== option.value; }));
         }
@@ -11548,7 +11610,7 @@ var CMultiSelect = forwardRef(function (_a, ref) {
         }
     };
     var handleSelectAll = function () {
-        setSelected(selectOptions(flattenArray(options).filter(function (option) { return !option.disabled; }), selected));
+        setSelected(selectOptions(__spreadArray(__spreadArray([], flattenArray(options).filter(function (option) { return !option.disabled; }), true), userOptions, true), selected));
     };
     var handleDeselectAll = function () {
         setSelected(selected.filter(function (option) { return option.disabled; }));
@@ -11578,12 +11640,14 @@ var CMultiSelect = forwardRef(function (_a, ref) {
                 }), (selected.length > 0 &&
                     !multiple && { placeholder: selected.map(function (option) { return option.text; })[0] }), (multiple &&
                     selected.length > 0 &&
-                    selectionType !== 'counter' && { size: _search.length + 2 }), { ref: searchRef })))), visible: _visible, ref: ref },
+                    selectionType !== 'counter' && { size: searchValue.length + 2 }), { ref: searchRef })))), visible: _visible, ref: ref },
             React__default$1.createElement(React__default$1.Fragment, null,
                 multiple && selectAll && (React__default$1.createElement("button", { type: "button", className: "form-multi-select-all", onClick: function () { return handleSelectAll(); } }, selectAllLabel)),
-                React__default$1.createElement(CMultiSelectOptions, { handleOptionOnClick: function (option) { return !disabled && handleOptionOnClick(option); }, options: search === 'external' ? _options : filterOptionsList(_search, _options), optionsMaxHeight: optionsMaxHeight, optionsStyle: optionsStyle, searchNoResultsLabel: searchNoResultsLabel, selected: selected, virtualScroller: virtualScroller, visibleItems: visibleItems })))));
+                React__default$1.createElement(CMultiSelectOptions, { handleOptionOnClick: function (option) { return !disabled && handleOptionOnClick(option); }, loading: loading, options: filteredOptions.length === 0 && allowCreateOptions
+                        ? userOption || []
+                        : filteredOptions, optionsMaxHeight: optionsMaxHeight, optionsStyle: optionsStyle, searchNoResultsLabel: searchNoResultsLabel, selected: selected, virtualScroller: virtualScroller, visibleItems: visibleItems })))));
 });
-CMultiSelect.propTypes = __assign$1({ className: propTypesExports.string, cleaner: propTypesExports.bool, disabled: propTypesExports.bool, multiple: propTypesExports.bool, onChange: propTypesExports.func, options: propTypesExports.array.isRequired, optionsMaxHeight: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]), optionsStyle: propTypesExports.oneOf(['checkbox', 'text']), placeholder: propTypesExports.string, search: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.oneOf(['external'])]), searchNoResultsLabel: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]), selectAll: propTypesExports.bool, selectAllLabel: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]), selectionType: propTypesExports.oneOf(['counter', 'tags', 'text']), selectionTypeCounterText: propTypesExports.string, size: propTypesExports.oneOf(['sm', 'lg']), virtualScroller: propTypesExports.bool, visible: propTypesExports.bool, visibleItems: propTypesExports.number }, CFormControlWrapper.propTypes);
+CMultiSelect.propTypes = __assign$1({ className: propTypesExports.string, cleaner: propTypesExports.bool, clearSearchOnSelect: propTypesExports.bool, disabled: propTypesExports.bool, loading: propTypesExports.bool, multiple: propTypesExports.bool, onChange: propTypesExports.func, options: propTypesExports.array.isRequired, optionsMaxHeight: propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]), optionsStyle: propTypesExports.oneOf(['checkbox', 'text']), placeholder: propTypesExports.string, search: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.oneOf(['external'])]), searchNoResultsLabel: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]), selectAll: propTypesExports.bool, selectAllLabel: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.node]), selectionType: propTypesExports.oneOf(['counter', 'tags', 'text']), selectionTypeCounterText: propTypesExports.string, size: propTypesExports.oneOf(['sm', 'lg']), virtualScroller: propTypesExports.bool, visible: propTypesExports.bool, visibleItems: propTypesExports.number }, CFormControlWrapper.propTypes);
 CMultiSelect.displayName = 'CMultiSelect';
 
 var CNav = forwardRef(function (_a, ref) {