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

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.11.0-next.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.11.0-next.1.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/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, selectAdjacementDays = props.selectAdjacementDays, selectEndDate = props.selectEndDate, showAdjacementDays = props.showAdjacementDays, 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, onMonthKeyDown = props.onMonthKeyDown, onYearClick = props.onYearClick, onYearKeyDown = props.onYearKeyDown, 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 () {
@@ -6959,6 +6959,7 @@ var Calendar = function (props) {
                                     disabled: isDateDisabled(date, minDate, maxDate, disabledDates)
                                 },
                                 _b[month] = true,
+                                _b.clickable = month !== 'current' && selectAdjacementDays,
                                 _b.last = isLastDayOfMonth(date),
                                 _b['range-hover'] = month === 'current' &&
                                     (hoverDate && selectEndDate
@@ -6968,7 +6969,10 @@ 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' || selectAdjacementDays) && {
+                                _b)), key: idx, tabIndex: (month === 'current' || selectAdjacementDays) &&
+                                !isDateDisabled(date, minDate, maxDate, disabledDates)
+                                ? 0
+                                : -1, title: date.toLocaleDateString(locale) }, ((month === 'current' || selectAdjacementDays) && {
                             onBlur: function () { return onCellMouseLeave(); },
                             onClick: function () { return onCellClick(date); },
                             onFocus: function () { return onCellMouseEnter(date); },
@@ -6987,16 +6991,18 @@ var Calendar = function (props) {
             view === 'months' &&
                 listOfMonths.map(function (row, index) {
                     return (React__default$1.createElement("tr", { key: index }, row.map(function (month, idx) {
-                        return (React__default$1.createElement("td", { key: idx, className: "calendar-cell month", onClick: function () { return onMonthClick(index * 3 + idx - addMonths, 'days'); } },
+                        return (React__default$1.createElement("td", { className: "calendar-cell month", key: idx, onClick: function () { return onMonthClick(index * 3 + idx - addMonths); }, onKeyDown: function (event) { return onMonthKeyDown(event, index * 3 + idx - addMonths); }, tabIndex: 0 },
                             React__default$1.createElement("div", { className: "calendar-cell-inner" }, month)));
                     })));
                 }),
             view === 'years' &&
                 listOfYears.map(function (row, index) {
                     return (React__default$1.createElement("tr", { key: index }, row.map(function (year, idx) {
-                        return (React__default$1.createElement("td", { key: idx, className: "calendar-cell year", onClick: function () {
-                                return onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()), 'months');
-                            } },
+                        return (React__default$1.createElement("td", { className: "calendar-cell year", key: idx, onClick: function () {
+                                return onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()));
+                            }, onKeyDown: function (event) {
+                                return onYearKeyDown(event, new Date(year, date.getMonth() - addMonths, date.getDate()));
+                            }, tabIndex: 0 },
                             React__default$1.createElement("div", { className: "calendar-cell-inner" }, new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' }))));
                     })));
                 }))));
@@ -7143,6 +7149,16 @@ var CCalendar = forwardRef(function (_a, ref) {
             return;
         }
     };
+    var handleMonthClick = function (month) {
+        setCalendarPage(0, 0, month);
+        setView('days');
+    };
+    var handleMonthKeyDown = function (event, month) {
+        if (event.code === 'Space' || event.key === 'Enter') {
+            setCalendarPage(0, 0, month);
+            setView('days');
+        }
+    };
     var handleNavigationOnClick = function (direction, double) {
         if (double === void 0) { double = false; }
         if (direction === 'prev') {
@@ -7170,16 +7186,20 @@ var CCalendar = forwardRef(function (_a, ref) {
             return;
         }
     };
+    var handleYearClick = function (date) {
+        setCalendarDate(date);
+        setView('months');
+    };
+    var handleYearKeyDown = function (event, date) {
+        if (event.code === 'Space' || event.key === 'Enter') {
+            setCalendarDate(date);
+            setView('months');
+        }
+    };
     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: 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, selectAdjacementDays: selectAdjacementDays, showAdjacementDays: showAdjacementDays, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
+            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: handleMonthClick, onMonthKeyDown: handleMonthKeyDown, onYearClick: handleYearClick, onYearKeyDown: handleYearKeyDown, selectEndDate: _selectEndDate, selectAdjacementDays: selectAdjacementDays, showAdjacementDays: showAdjacementDays, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
 });
 CCalendar.propTypes = {
     className: propTypesExports.string,
@@ -11559,6 +11579,7 @@ var CMultiSelect = forwardRef(function (_a, ref) {
     };
     var handleSearchKeyDown = function (event) {
         if (event.key === 'Enter' && searchValue && allowCreateOptions) {
+            event.preventDefault();
             if (userOption) {
                 setSelected(__spreadArray(__spreadArray([], selected, true), userOption, true));
                 setUserOptions(__spreadArray(__spreadArray([], userOptions, true), userOption, true));