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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.11.0-next.0",
+  "version": "4.11.0-next.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",

package/src/components/calendar/CCalendar.tsx

@@ -174,8 +174,10 @@ const Calendar = (props: {
   onCellKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   onCellMouseEnter: (date: Date) => void
   onCellMouseLeave: () => void
-  onMonthClick: (month: number, view: string) => void
-  onYearClick: (date: Date, view: string) => void
+  onMonthClick: (month: number) => void
+  onMonthKeyDown: (event: KeyboardEvent<HTMLDivElement>, month: number) => void
+  onYearClick: (date: Date) => void
+  onYearKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
   selectAdjacementDays: boolean
   selectEndDate: boolean | undefined
   showAdjacementDays: boolean
@@ -199,7 +201,9 @@ const Calendar = (props: {
     onCellMouseEnter,
     onCellMouseLeave,
     onMonthClick,
+    onMonthKeyDown,
     onYearClick,
+    onYearKeyDown,
     selectAdjacementDays,
     selectEndDate,
     showAdjacementDays,
@@ -258,6 +262,7 @@ const Calendar = (props: {
                         today: month === 'current' && isToday(date),
                         disabled: isDateDisabled(date, minDate, maxDate, disabledDates),
                         [month]: true,
+                        clickable: month !== 'current' && selectAdjacementDays,
                         last: isLastDayOfMonth(date),
                         'range-hover':
                           month === 'current' &&
@@ -270,7 +275,12 @@ const Calendar = (props: {
                         end: isEndDate(date, startDate, endDate),
                       })}
                       key={idx}
-                      tabIndex={0}
+                      tabIndex={
+                        (month === 'current' || selectAdjacementDays) &&
+                        !isDateDisabled(date, minDate, maxDate, disabledDates)
+                          ? 0
+                          : -1
+                      }
                       title={date.toLocaleDateString(locale)}
                       {...((month === 'current' || selectAdjacementDays) && {
                         onBlur: () => onCellMouseLeave(),
@@ -305,9 +315,11 @@ const Calendar = (props: {
                 {row.map((month, idx) => {
                   return (
                     <td
-                      key={idx}
                       className="calendar-cell month"
-                      onClick={() => onMonthClick(index * 3 + idx - addMonths, 'days')}
+                      key={idx}
+                      onClick={() => onMonthClick(index * 3 + idx - addMonths)}
+                      onKeyDown={(event) => onMonthKeyDown(event, index * 3 + idx - addMonths)}
+                      tabIndex={0}
                     >
                       <div className="calendar-cell-inner">{month}</div>
                     </td>
@@ -323,14 +335,18 @@ const Calendar = (props: {
                 {row.map((year, idx) => {
                   return (
                     <td
-                      key={idx}
                       className="calendar-cell year"
+                      key={idx}
                       onClick={() =>
-                        onYearClick(
+                        onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()))
+                      }
+                      onKeyDown={(event) =>
+                        onYearKeyDown(
+                          event,
                           new Date(year, date.getMonth() - addMonths, date.getDate()),
-                          'months',
                         )
                       }
+                      tabIndex={0}
                     >
                       <div className="calendar-cell-inner">
                         {new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' })}
@@ -648,6 +664,18 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }
 
+    const handleMonthClick = (month: number) => {
+      setCalendarPage(0, 0, month)
+      setView('days')
+    }
+
+    const handleMonthKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, month: number) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        setCalendarPage(0, 0, month)
+        setView('days')
+      }
+    }
+
     const handleNavigationOnClick = (direction: string, double = false) => {
       if (direction === 'prev') {
         if (double) {
@@ -679,6 +707,18 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       }
     }
 
+    const handleYearClick = (date: Date) => {
+      setCalendarDate(date)
+      setView('months')
+    }
+
+    const handleYearKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, date: Date) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        setCalendarDate(date)
+        setView('months')
+      }
+    }
+
     return (
       <div className={classNames('calendars', className)}>
         {_calendarDate &&
@@ -714,14 +754,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 onCellKeyDown={(event, date) => handleCellKeyDown(event, date, index)}
                 onCellMouseEnter={handleCellMouseEnter}
                 onCellMouseLeave={handleCellMouseLeave}
-                onMonthClick={(month, view) => {
-                  setCalendarPage(0, 0, month)
-                  setView(view)
-                }}
-                onYearClick={(date, view) => {
-                  setCalendarDate(date)
-                  setView(view)
-                }}
+                onMonthClick={handleMonthClick}
+                onMonthKeyDown={handleMonthKeyDown}
+                onYearClick={handleYearClick}
+                onYearKeyDown={handleYearKeyDown}
                 selectEndDate={_selectEndDate}
                 selectAdjacementDays={selectAdjacementDays}
                 showAdjacementDays={showAdjacementDays}

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

@@ -249,6 +249,8 @@ export const CMultiSelect = forwardRef<HTMLDivElement, CMultiSelectProps>(
 
     const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter' && searchValue && allowCreateOptions) {
+        event.preventDefault()
+
         if (userOption) {
           setSelected([...selected, ...userOption])
           setUserOptions([...userOptions, ...userOption])