@coreui/react-pro 4.11.3 → 4.12.0-beta.0

package/dist/props.d.ts

@@ -5,4 +5,4 @@ export declare const gradientsPropType: PropTypes.Requireable<string>;
 export declare const placementPropType: PropTypes.Requireable<Placements>;
 export declare const shapePropType: PropTypes.Requireable<string>;
 export declare const textColorsPropType: PropTypes.Requireable<string>;
-export declare const triggerPropType: PropTypes.Requireable<Triggers>;
+export declare const triggerPropType: PropTypes.Requireable<NonNullable<Triggers | NonNullable<Triggers>[] | null | undefined>>;

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 import isInViewport from './isInViewport';
 import isObjectInArray from './isObjectInArray';
-export { isInViewport, isObjectInArray };
+import isRTL from './isRTL';
+export { isInViewport, isObjectInArray, isRTL };

package/dist/utils/isRTL.d.ts

@@ -0,0 +1,2 @@
+declare const isRTL: (element?: HTMLElement | HTMLDivElement | null) => boolean;
+export default isRTL;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "4.11.3",
+  "version": "4.12.0-beta.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -37,34 +37,34 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
-    "@coreui/icons": "^3.0.0",
+    "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
-    "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@popperjs/core": "^2.11.8",
+    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@types/react-transition-group": "^4.4.5",
+    "@types/react": "18.2.11",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-transition-group": "^4.4.6",
     "classnames": "^2.3.2",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-device-detect": "^2.2.2",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^3.19.1",
-    "tslib": "^2.5.0",
-    "ts-jest": "^29.0.5",
+    "rollup": "^3.25.0",
+    "tslib": "^2.5.3",
+    "ts-jest": "^29.1.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": ">=4.5.0",
+    "@coreui/coreui-pro": ">=4.6.0-beta.0",
     "react": ">=17",
     "react-dom": ">=17"
   }

package/src/components/accordion/index.ts

@@ -4,10 +4,4 @@ import { CAccordionButton } from './CAccordionButton'
 import { CAccordionHeader } from './CAccordionHeader'
 import { CAccordionItem } from './CAccordionItem'
 
-export {
-  CAccordion,
-  CAccordionBody,
-  CAccordionButton,
-  CAccordionHeader,
-  CAccordionItem,
-}
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem }

package/src/components/calendar/CCalendar.tsx

@@ -133,14 +133,14 @@ export interface CCalendarProps {
    * @default 2
    */
   weekdayFormat?: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)
-  /**
-   * Callback fired when the user hovers over the calendar cell.
-   */
-  onCalendarCellHover?: (date: Date | null) => void
   /**
    * Callback fired when the calendar date changed.
    */
   onCalendarDateChange?: (date: Date) => void
+  /**
+   * Callback fired when the user hovers over the calendar cell.
+   */
+  onDayHover?: (date: Date | null) => void
   /**
    * Callback fired when the start date changed.
    */
@@ -170,10 +170,10 @@ const Calendar = (props: {
   locale: string
   maxDate: Date | null
   minDate: Date | null
-  onCellClick: (date: Date) => void
-  onCellKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
-  onCellMouseEnter: (date: Date) => void
-  onCellMouseLeave: () => void
+  onDayClick: (date: Date) => void
+  onDayKeyDown: (event: KeyboardEvent<HTMLDivElement>, date: Date) => void
+  onDayMouseEnter: (date: Date) => void
+  onDayMouseLeave: () => void
   onMonthClick: (month: number) => void
   onMonthKeyDown: (event: KeyboardEvent<HTMLDivElement>, month: number) => void
   onYearClick: (date: Date) => void
@@ -196,10 +196,10 @@ const Calendar = (props: {
     locale,
     maxDate,
     minDate,
-    onCellClick,
-    onCellKeyDown,
-    onCellMouseEnter,
-    onCellMouseLeave,
+    onDayClick,
+    onDayKeyDown,
+    onDayMouseEnter,
+    onDayMouseLeave,
     onMonthClick,
     onMonthKeyDown,
     onYearClick,
@@ -241,9 +241,9 @@ const Calendar = (props: {
                 <div className="calendar-header-cell-inner">
                   {typeof weekdayFormat === 'function'
                     ? weekdayFormat(date)
-                    : typeof weekdayFormat === 'string'
+                    : (typeof weekdayFormat === 'string'
                     ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat)}
+                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat))}
                 </div>
               </th>
             ))}
@@ -283,16 +283,16 @@ const Calendar = (props: {
                       }
                       title={date.toLocaleDateString(locale)}
                       {...((month === 'current' || selectAdjacementDays) && {
-                        onBlur: () => onCellMouseLeave(),
-                        onClick: () => onCellClick(date),
-                        onFocus: () => onCellMouseEnter(date),
-                        onKeyDown: (event) => onCellKeyDown(event, date),
-                        onMouseEnter: () => onCellMouseEnter(date),
-                        onMouseLeave: () => onCellMouseLeave(),
+                        onBlur: () => onDayMouseLeave(),
+                        onClick: () => onDayClick(date),
+                        onFocus: () => onDayMouseEnter(date),
+                        onKeyDown: (event) => onDayKeyDown(event, date),
+                        onMouseEnter: () => onDayMouseEnter(date),
+                        onMouseLeave: () => onDayMouseLeave(),
                       })}
                       {...(month !== 'current' &&
                         !selectAdjacementDays && {
-                          onMouseEnter: () => onCellMouseLeave(),
+                          onMouseEnter: () => onDayMouseLeave(),
                         })}
                     >
                       <div className="calendar-cell-inner">
@@ -408,19 +408,13 @@ const Navigation = (props: {
       {navigation && (
         <div className="calendar-nav-prev">
           <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev', true)}>
-            {navPrevDoubleIcon ? (
-              navPrevDoubleIcon
-            ) : (
+            {navPrevDoubleIcon ?? (
               <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
             )}
           </CButton>
           {view === 'days' && (
             <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev')}>
-              {navPrevIcon ? (
-                navPrevIcon
-              ) : (
-                <span className="calendar-nav-icon calendar-nav-icon-prev" />
-              )}
+              {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
             </CButton>
           )}
         </div>
@@ -447,17 +441,11 @@ const Navigation = (props: {
         <div className="calendar-nav-next">
           {view === 'days' && (
             <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next')}>
-              {navNextIcon ? (
-                navNextIcon
-              ) : (
-                <span className="calendar-nav-icon calendar-nav-icon-next" />
-              )}
+              {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
             </CButton>
           )}
           <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next', true)}>
-            {navNextDoubleIcon ? (
-              navNextDoubleIcon
-            ) : (
+            {navNextDoubleIcon ?? (
               <span className="calendar-nav-icon calendar-nav-icon-double-next" />
             )}
           </CButton>
@@ -492,7 +480,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       selectEndDate,
       showAdjacementDays = true,
       weekdayFormat = 2,
-      onCalendarCellHover,
+      onDayHover,
       onCalendarDateChange,
       onEndDateChange,
       onStartDateChange,
@@ -590,7 +578,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       onCalendarDateChange && onCalendarDateChange(d)
     }
 
-    const handleCellOnClick = (date: Date, index?: number) => {
+    const handleDayClick = (date: Date, index?: number) => {
       if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
@@ -638,30 +626,29 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
       setStartDate(date)
     }
 
-    const handleCellMouseEnter = (date: Date) => {
-      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
-        return
-      }
-
-      setHoverDate(date)
-      onCalendarCellHover && onCalendarCellHover(date)
-    }
-
-    const handleCellMouseLeave = () => {
-      setHoverDate(null)
-      onCalendarCellHover && onCalendarCellHover(null)
-    }
-
-    const handleCellKeyDown = (
+    const handleDayKeyDown = (
       event: React.KeyboardEvent<HTMLDivElement>,
       date: Date,
       index?: number,
     ) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
-        handleCellOnClick && handleCellOnClick(date, index)
+        handleDayClick(date, index)
+      }
+    }
+
+    const handleDayMouseEnter = (date: Date) => {
+      if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
         return
       }
+
+      setHoverDate(date)
+      onDayHover && onDayHover(date)
+    }
+
+    const handleDayMouseLeave = () => {
+      setHoverDate(null)
+      onDayHover && onDayHover(null)
     }
 
     const handleMonthClick = (month: number) => {
@@ -671,8 +658,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
     const handleMonthKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, month: number) => {
       if (event.code === 'Space' || event.key === 'Enter') {
-        setCalendarPage(0, 0, month)
-        setView('days')
+        handleMonthClick(month)
       }
     }
 
@@ -714,8 +700,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 
     const handleYearKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, date: Date) => {
       if (event.code === 'Space' || event.key === 'Enter') {
-        setCalendarDate(date)
-        setView('months')
+        handleYearClick(date)
       }
     }
 
@@ -750,10 +735,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
                 locale={locale}
                 maxDate={_maxDate}
                 minDate={_minDate}
-                onCellClick={(date) => handleCellOnClick(date, index)}
-                onCellKeyDown={(event, date) => handleCellKeyDown(event, date, index)}
-                onCellMouseEnter={handleCellMouseEnter}
-                onCellMouseLeave={handleCellMouseLeave}
+                onDayClick={(date) => handleDayClick(date, index)}
+                onDayKeyDown={(event, date) => handleDayKeyDown(event, date, index)}
+                onDayMouseEnter={handleDayMouseEnter}
+                onDayMouseLeave={handleDayMouseLeave}
                 onMonthClick={handleMonthClick}
                 onMonthKeyDown={handleMonthKeyDown}
                 onYearClick={handleYearClick}
@@ -802,7 +787,7 @@ CCalendar.propTypes = {
     PropTypes.number,
     PropTypes.oneOf<'long' | 'narrow' | 'short'>(['long', 'narrow', 'short']),
   ]),
-  onCalendarCellHover: PropTypes.func,
+  onDayHover: PropTypes.func,
   onCalendarDateChange: PropTypes.func,
   onEndDateChange: PropTypes.func,
   onSelectEndChange: PropTypes.func,