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

package/dist/index.js

@@ -6941,7 +6941,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 = React$1.useState(calendarDate), date = _a[0], setDate = _a[1];
     var _b = React$1.useState([]), listOfMonths = _b[0], setListOfMonths = _b[1];
     React$1.useEffect(function () {
@@ -6974,7 +6974,7 @@ var Calendar = function (props) {
                     return (React$1.createElement("tr", { key: index }, week.map(function (_a, idx) {
                         var _b;
                         var date = _a.date, month = _a.month;
-                        return (React$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', (_b = {
+                        return month === 'current' || showAdjacementDays ? (React$1.createElement("td", __assign$1({ className: classNames$1('calendar-cell', (_b = {
                                     today: month === 'current' && isToday(date),
                                     disabled: isDateDisabled(date, minDate, maxDate, disabledDates)
                                 },
@@ -6988,19 +6988,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$1.createElement("div", { className: "calendar-cell-inner" }, typeof dayFormat === 'function'
                                 ? dayFormat(date)
-                                : date.toLocaleDateString(locale, { day: dayFormat }))));
+                                : date.toLocaleDateString(locale, { day: dayFormat })))) : (React$1.createElement("td", { key: idx }));
                     })));
                 }),
             view === 'months' &&
@@ -7042,9 +7043,9 @@ var Navigation = function (props) {
             React$1.createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return onNavigationClick('next', true); } }, navNextDoubleIcon ? (navNextDoubleIcon) : (React$1.createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
 };
 var CCalendar = React$1.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 = React$1.useRef(true);
-    var _j = React$1.useState(null), _calendarDate = _j[0], setCalendarDate = _j[1];
+    var _l = React$1.useState(null), _calendarDate = _l[0], setCalendarDate = _l[1];
     React$1.useEffect(function () {
         if (calendarDate === null) {
             setCalendarDate(new Date());
@@ -7055,30 +7056,30 @@ var CCalendar = React$1.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];
     React$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];
     React$1.useEffect(function () {
         var date = endDate ? new Date(endDate) : null;
         if (!isSameDateAs(date, _endDate)) {
             setEndDate(date);
         }
     }, [endDate]);
-    var _m = React$1.useState(null), _hoverDate = _m[0], setHoverDate = _m[1];
-    var _o = React$1.useState(maxDate ? new Date(maxDate) : null), _maxDate = _o[0], setMaxDate = _o[1];
+    var _p = React$1.useState(null), _hoverDate = _p[0], setHoverDate = _p[1];
+    var _q = React$1.useState(maxDate ? new Date(maxDate) : null), _maxDate = _q[0], setMaxDate = _q[1];
     React$1.useEffect(function () {
         maxDate && setMaxDate(new Date(maxDate));
     }, [maxDate]);
-    var _p = React$1.useState(minDate ? new Date(minDate) : null), _minDate = _p[0], setMinDate = _p[1];
+    var _r = React$1.useState(minDate ? new Date(minDate) : null), _minDate = _r[0], setMinDate = _r[1];
     React$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];
     React$1.useEffect(function () {
         setSelectEndDate(selectEndDate);
     }, [selectEndDate]);
@@ -7088,7 +7089,7 @@ var CCalendar = React$1.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];
     React$1.useEffect(function () {
         isInitialMount.current = false;
     }, []);
@@ -7106,10 +7107,12 @@ var CCalendar = React$1.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);
@@ -7153,10 +7156,10 @@ var CCalendar = React$1.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;
         }
     };
@@ -7190,13 +7193,13 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
     return (React$1.createElement("div", { className: classNames$1('calendars', className) }, _calendarDate &&
         Array.from({ length: calendars }, function (_, index) { return (React$1.createElement("div", { className: classNames$1('calendar', view), key: index, ref: ref },
             React$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$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$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,
@@ -7219,7 +7222,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,
@@ -9936,6 +9941,10 @@ function Reference(_ref) {
   });
 }
 
+var PopperManagerWrapper = function (_a) {
+    var children = _a.children, popper = _a.popper;
+    return popper ? React$1.createElement(Manager, null, children) : React$1.createElement(React$1.Fragment, null, children);
+};
 var CDropdownContext = React$1.createContext({});
 var CDropdown = React$1.forwardRef(function (_a, ref) {
     var children = _a.children, alignment = _a.alignment, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.popper, popper = _d === void 0 ? true : _d, _e = _a.variant, variant = _e === void 0 ? 'btn-group' : _e, _f = _a.component, component = _f === void 0 ? 'div' : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest$1(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
@@ -9967,16 +9976,13 @@ var CDropdown = React$1.forwardRef(function (_a, ref) {
         _visible && onShow && onShow();
         !_visible && onHide && onHide();
     }, [_visible]);
-    var DropdownContent = function () {
-        return variant === 'input-group' ? (React$1.createElement(React$1.Fragment, null, children)) : (React$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
+    return (React$1.createElement(CDropdownContext.Provider, { value: contextValues },
+        React$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React$1.createElement(React$1.Fragment, null, children)) : (React$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
                 'dropdown-center': direction === 'center',
                 'dropup dropup-center': direction === 'dropup-center',
                 direction: direction && direction !== 'center' && direction !== 'dropup-center',
                 show: _visible,
-            }, className) }, rest, { ref: forkedRef }), children));
-    };
-    return (React$1.createElement(CDropdownContext.Provider, { value: contextValues }, popper ? (React$1.createElement(Manager, null,
-        React$1.createElement(DropdownContent, null))) : (React$1.createElement(DropdownContent, null))));
+            }, className) }, rest, { ref: forkedRef }), children)))));
 });
 var alignmentDirection = propTypesExports.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -10284,7 +10290,7 @@ var isValidTime = function (time) {
 
 var CTimePicker = React$1.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.ampm, ampm = _c === void 0 ? 'auto' : _c, className = _a.className, _d = _a.cleaner, cleaner = _d === void 0 ? true : _d, _e = _a.container, container = _e === void 0 ? 'dropdown' : _e, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _f = _a.footer, footer = _f === void 0 ? true : _f, id = _a.id, _g = _a.indicator, indicator = _g === void 0 ? true : _g, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _h = _a.locale, locale = _h === void 0 ? 'default' : _h, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select time' : _j, _k = _a.seconds, seconds = _k === void 0 ? true : _k, size = _a.size, text = _a.text, time = _a.time, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, _l = _a.variant, variant = _l === void 0 ? 'roll' : _l, visible = _a.visible, rest = __rest$1(_a, ["ampm", "className", "cleaner", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "id", "indicator", "inputReadOnly", "invalid", "label", "locale", "onTimeChange", "onHide", "onShow", "placeholder", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
+    var _c = _a.ampm, ampm = _c === void 0 ? 'auto' : _c, className = _a.className, _d = _a.cleaner, cleaner = _d === void 0 ? true : _d, _e = _a.container, container = _e === void 0 ? 'dropdown' : _e, disabled = _a.disabled, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, _f = _a.footer, footer = _f === void 0 ? true : _f, id = _a.id, _g = _a.indicator, indicator = _g === void 0 ? true : _g, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _h = _a.locale, locale = _h === void 0 ? 'default' : _h, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _j = _a.placeholder, placeholder = _j === void 0 ? 'Select time' : _j, required = _a.required, _k = _a.seconds, seconds = _k === void 0 ? true : _k, size = _a.size, text = _a.text, time = _a.time, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, _l = _a.variant, variant = _l === void 0 ? 'roll' : _l, visible = _a.visible, rest = __rest$1(_a, ["ampm", "className", "cleaner", "container", "disabled", "feedback", "feedbackInvalid", "feedbackValid", "footer", "id", "indicator", "inputReadOnly", "invalid", "label", "locale", "onTimeChange", "onHide", "onShow", "placeholder", "required", "seconds", "size", "text", "time", "tooltipFeedback", "valid", "variant", "visible"]);
     var inputRef = React$1.useRef(null);
     var _m = React$1.useState(convertTimeToDate(time)), date = _m[0], setDate = _m[1];
     var _o = React$1.useState(null), initialDate = _o[0], setInitialDate = _o[1];
@@ -10343,7 +10349,7 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
     var InputGroup = function () { return (React$1.createElement(CInputGroup, { className: "picker-input-group", size: size },
         React$1.createElement(CFormInput, { autoComplete: "off", delay: true, disabled: disabled, onChange: function (event) {
                 return isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value));
-            }, placeholder: placeholder, readOnly: inputReadOnly, ref: inputRef }),
+            }, placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
         (indicator || cleaner) && (React$1.createElement(CInputGroupText, null,
             indicator && (React$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon time-picker-input-icon" })) : (indicator))),
             cleaner && date && (React$1.createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon time-picker-cleaner-icon" })) : (cleaner))))))); };
@@ -10415,7 +10421,7 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
                     _b['time-picker-roll'] = variant === 'roll',
                     _b)) }, variant === 'select' ? React$1.createElement(TimePickerSelect, null) : TimePickerRoll()))));
 });
-CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.bool]), className: propTypesExports.string, locale: propTypesExports.string, onTimeChange: propTypesExports.func, seconds: propTypesExports.bool, time: propTypesExports.oneOfType([propTypesExports.instanceOf(Date), propTypesExports.string]), variant: propTypesExports.oneOf(['roll', 'select']) });
+CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: propTypesExports.oneOfType([propTypesExports.oneOf(['auto']), propTypesExports.bool]), className: propTypesExports.string, locale: propTypesExports.string, onTimeChange: propTypesExports.func, required: propTypesExports.bool, seconds: propTypesExports.bool, time: propTypesExports.oneOfType([propTypesExports.instanceOf(Date), propTypesExports.string]), variant: propTypesExports.oneOf(['roll', 'select']) });
 CTimePicker.displayName = 'CTimePicker';
 
 var getLocalDateFromString = function (string, locale, time) {
@@ -10453,7 +10459,7 @@ var getLocalDateFromString = function (string, locale, time) {
 
 var _a, _b, _c, _d, _e, _f;
 var CDateRangePicker = React$1.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, _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", "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 = React$1.useState(visible), _visible = _q[0], setVisible = _q[1];
     var inputStartRef = React$1.useRef(null);
     var inputEndRef = React$1.useRef(null);
@@ -10554,7 +10560,7 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
     var InputGroup = function () { return (React$1.createElement(CInputGroup, { className: "picker-input-group", size: size },
         React$1.createElement(CFormInput, __assign$1({ autoComplete: "off", className: classNames$1({
                 hover: inputStartHoverValue,
-            }), delay: true, disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format === 'string', onChange: function (event) {
+            }), delay: true, disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
                 var date = getLocalDateFromString(event.target.value, locale, timepicker);
                 if (date instanceof Date && date.getTime()) {
                     setCalendarDate(date);
@@ -10564,7 +10570,7 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
         range && separator !== false && (React$1.createElement(CInputGroupText, null, typeof separator === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" })) : (separator))),
         range && (React$1.createElement(CFormInput, __assign$1({ autoComplete: "off", className: classNames$1({
                 hover: inputEndHoverValue,
-            }), delay: true, disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format === 'string', onChange: function (event) {
+            }), delay: true, disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format === 'string', required: required, onChange: function (event) {
                 var date = getLocalDateFromString(event.target.value, locale, timepicker);
                 if (date instanceof Date && date.getTime()) {
                     setCalendarDate(date);
@@ -10601,7 +10607,7 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
                         handleStartDateChange(ranges[key][0]);
                         handleEndDateChange(ranges[key][1]);
                     }, size: rangesButtonsSize, variant: rangesButtonsVariant }, key)); }))),
-                React$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$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$1.createElement("div", { className: "date-picker-timepickers" }, isMobile_1 || (range && calendars === 1) ? (React$1.createElement(React$1.Fragment, null,
                     React$1.createElement(CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return date && handleStartDateChange(date); }, time: _startDate, variant: "select" }),
                     React$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$1.createElement(CTimePicker, { container: "inline", disabled: index === 0
@@ -10617,7 +10623,7 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
                     }, time: index === 0 ? _startDate : _endDate, variant: "select" })); }))))))));
 });
 CDateRangePicker.displayName = 'CDateRangePicker';
-CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { calendars: propTypesExports.number, className: propTypesExports.string, cleaner: propTypesExports.bool, closeOnSelect: propTypesExports.bool, id: propTypesExports.string, indicator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), inputReadOnly: propTypesExports.bool, placeholder: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.arrayOf(propTypesExports.any)]), range: propTypesExports.bool, ranges: propTypesExports.object, rangesButtonsColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, rangesButtonsSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, rangesButtonsVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, separator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), size: propTypesExports.oneOf(['sm', 'lg']), timepicker: propTypesExports.bool, todayButton: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), todayButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, todayButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, todayButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant });
+CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { calendars: propTypesExports.number, className: propTypesExports.string, cleaner: propTypesExports.bool, closeOnSelect: propTypesExports.bool, id: propTypesExports.string, indicator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), inputReadOnly: propTypesExports.bool, placeholder: propTypesExports.oneOfType([propTypesExports.string, propTypesExports.arrayOf(propTypesExports.any)]), range: propTypesExports.bool, ranges: propTypesExports.object, rangesButtonsColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, rangesButtonsSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, rangesButtonsVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, required: propTypesExports.bool, separator: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), size: propTypesExports.oneOf(['sm', 'lg']), timepicker: propTypesExports.bool, todayButton: propTypesExports.oneOfType([propTypesExports.bool, propTypesExports.node]), todayButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, todayButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, todayButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant });
 
 var CDatePicker = React$1.forwardRef(function (_a, ref) {
     var date = _a.date, id = _a.id, onDateChange = _a.onDateChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select date' : _b, rest = __rest$1(_a, ["date", "id", "onDateChange", "placeholder"]);
@@ -11293,15 +11299,15 @@ var CVirtualScroller = React$1.forwardRef(function (_a, ref) {
             setViewportPadding(Number.parseFloat(getComputedStyle(virtualScrollRef.current).paddingTop));
     });
     React$1.useEffect(function () {
-        setItemsNumber(itemsNumber || React$1.Children.count(children));
-    }, [children, itemsNumber]);
+        setItemsNumber(React$1.Children.count(children));
+    }, [children]);
     React$1.useEffect(function () {
-        setViewportHeight(visibleItems * itemHeight + 2 * viewportPadding);
-    }, [viewportPadding, visibleItems, itemHeight]);
+        setViewportHeight(Math.min(visibleItems, itemsNumber) * itemHeight + 2 * viewportPadding);
+    }, [itemHeight, itemsNumber, viewportPadding, visibleItems]);
     React$1.useEffect(function () {
-        setMaxHeight(itemsNumber * itemHeight + 2 * viewportPadding);
+        setMaxHeight(itemsNumber * itemHeight);
         virtualScrollRef.current && virtualScrollRef.current.scrollTop;
-    }, [itemsNumber, itemHeight]);
+    }, [itemHeight, itemsNumber]);
     React$1.useEffect(function () {
         setBuffer(Math.floor(visibleItems / 2));
     }, [visibleItems]);
@@ -11313,7 +11319,8 @@ var CVirtualScroller = React$1.forwardRef(function (_a, ref) {
     return (React$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$1.createElement("div", { className: "virtual-scroller-content", style: {
@@ -11348,14 +11355,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 }));
@@ -11416,7 +11437,7 @@ var selectOptions = function (options, selected, deselected) {
 };
 
 var CMultiSelectOptions = React$1.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();
@@ -11451,12 +11472,15 @@ var CMultiSelectOptions = React$1.forwardRef(function (_a, ref) {
                 }), key: index, onClick: function () { return handleOptionOnClick && handleOptionOnClick(option); }, onKeyDown: function (event) { return handleKeyDown(event, option); }, tabIndex: 0 }, option.text));
         })) : (React$1.createElement("div", { className: "form-multi-select-options-empty" }, searchNoResultsLabel));
     };
-    return virtualScroller ? (React$1.createElement(CVirtualScroller, { className: "form-multi-select-options", visibleItems: visibleItems, ref: ref }, createOptions(options))) : (React$1.createElement("div", __assign$1({ className: "form-multi-select-options" }, (optionsMaxHeight !== 'auto' && {
-        style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
-    }), { ref: ref }), createOptions(options)));
+    return (React$1.createElement(React$1.Fragment, null,
+        virtualScroller ? (React$1.createElement(CVirtualScroller, { className: "form-multi-select-options", visibleItems: visibleItems, ref: ref }, createOptions(options))) : (React$1.createElement("div", __assign$1({ className: "form-multi-select-options" }, (optionsMaxHeight !== 'auto' && {
+            style: { maxHeight: optionsMaxHeight, overflow: 'scroll' },
+        }), { ref: ref }), createOptions(options))),
+        loading && React$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']),
@@ -11499,14 +11523,27 @@ CMultiSelectSelection.displayName = 'CMultiSelectSelection';
 
 var CMultiSelect = React$1.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 = React$1.useRef(true);
     var nativeSelectRef = React$1.useRef(null);
     var searchRef = React$1.useRef(null);
     var _r = React$1.useState(options), _options = _r[0], setOptions = _r[1];
-    var _s = React$1.useState(''), _search = _s[0], setSearch = _s[1];
-    var _t = React$1.useState(visible), _visible = _t[0], setVisible = _t[1];
+    var _s = React$1.useState(visible), _visible = _s[0], setVisible = _s[1];
+    var _t = React$1.useState(''), searchValue = _t[0], setSearchValue = _t[1];
     var _u = React$1.useState([]), selected = _u[0], setSelected = _u[1];
+    var _v = React$1.useState([]), userOptions = _v[0], setUserOptions = _v[1];
+    var filteredOptions = React$1.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 = React$1.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]);
     React$1.useMemo(function () {
         setOptions(options);
         var _selected = options &&
@@ -11525,6 +11562,9 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
             });
         _selected && setSelected(selectOptions(_selected, selected, deselected));
     }, [JSON.stringify(options)]);
+    React$1.useEffect(function () {
+        !isInitialMount.current && onFilterChange && onFilterChange(searchValue);
+    }, [searchValue]);
     React$1.useEffect(function () {
         !isInitialMount.current &&
             nativeSelectRef.current &&
@@ -11534,14 +11574,27 @@ var CMultiSelect = React$1.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') {
@@ -11553,12 +11606,22 @@ var CMultiSelect = React$1.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; }));
         }
@@ -11567,7 +11630,7 @@ var CMultiSelect = React$1.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; }));
@@ -11597,12 +11660,14 @@ var CMultiSelect = React$1.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$1.createElement(React$1.Fragment, null,
                 multiple && selectAll && (React$1.createElement("button", { type: "button", className: "form-multi-select-all", onClick: function () { return handleSelectAll(); } }, selectAllLabel)),
-                React$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$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 = React$1.forwardRef(function (_a, ref) {