rsuite 5.37.4 → 5.38.0

package/esm/Calendar/Calendar.d.ts

@@ -17,12 +17,17 @@ export interface CalendarProps extends WithAsProps {
     locale?: CalendarLocale;
     /**  Callback fired before the value changed  */
     onChange?: (date: Date) => void;
-    /** Callback fired before the month changed */
+    /**
+     * Callback fired before the month changed
+     * @todo-Doma Change signature to `onMonthChange(year: number, month: number, reason: string)`?
+     */
     onMonthChange?: (date: Date) => void;
     /** Callback fired before the date selected */
     onSelect?: (date: Date) => void;
     /** Custom render calendar cells  */
     renderCell?: (date: Date) => React.ReactNode;
+    /** Custom cell classes base on it's date */
+    cellClassName?: (date: Date) => string | undefined;
 }
 declare const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps>;
 export default Calendar;

package/esm/Calendar/Calendar.js

@@ -25,7 +25,8 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       renderCell = props.renderCell,
       value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value"]);
+      cellClassName = props.cellClassName,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value", "cellClassName"]);
 
   var _useCalendarDate = useCalendarDate(value, defaultValue),
       calendarDate = _useCalendarDate.calendarDate,
@@ -37,21 +38,18 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleChange = useCallback(function (nextValue) {
     setCalendarDate(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [setCalendarDate, onChange]);
+
+    if (!isSameMonth(nextValue, calendarDate)) {
+      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
+    }
+  }, [setCalendarDate, onChange, calendarDate, onMonthChange]);
   var handleClickToday = useCallback(function () {
     handleChange(new Date());
   }, [handleChange]);
   var handleSelect = useCallback(function (nextValue) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
     handleChange(nextValue);
-  }, [handleChange, onSelect]); // Trigger onMonthChange when the month changes
-
-  var handleMonthChange = useCallback(function (nextValue) {
-    if (!isSameMonth(nextValue, calendarDate)) {
-      handleChange(nextValue);
-      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
-    }
-  }, [calendarDate, handleChange, onMonthChange]);
+  }, [handleChange, onSelect]);
 
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
@@ -89,9 +87,10 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     },
     renderToolbar: renderToolbar,
     renderCell: customRenderCell,
-    onMoveForward: handleMonthChange,
-    onMoveBackward: handleMonthChange,
-    onChangeMonth: handleMonthChange,
+    cellClassName: cellClassName,
+    onMoveForward: handleChange,
+    onMoveBackward: handleChange,
+    onChangeMonth: handleChange,
     onSelect: handleSelect
   }));
 });

package/esm/Calendar/CalendarContainer.d.ts

@@ -52,6 +52,8 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     /** Custom rendering cell*/
     renderCell?: (date: Date) => React.ReactNode;
+    /** Custom cell classes base on it's date */
+    cellClassName?: (date: Date) => string | undefined;
     /** Called when opening the month view */
     onToggleMonthDropdown?: (toggle: boolean) => void;
     /** Called when opening the time view */

package/esm/Calendar/CalendarContainer.js

@@ -40,13 +40,14 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
       calendarDate = props.calendarDate,
+      cellClassName = props.cellClassName,
       renderCell = props.renderCell,
       renderTitle = props.renderTitle,
       renderToolbar = props.renderToolbar,
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
 
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -132,11 +133,12 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChangeTime: onChangeTime,
       onMouseMove: onMouseMove,
       onSelect: onSelect,
+      cellClassName: cellClassName,
       renderCell: renderCell,
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, omitHideDisabledProps(rest), {

package/esm/Calendar/TableRow.js

@@ -25,6 +25,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isoWeek = _useCalendarContext.isoWeek,
       onMouseMove = _useCalendarContext.onMouseMove,
       onSelect = _useCalendarContext.onSelect,
+      cellClassName = _useCalendarContext.cellClassName,
       renderCell = _useCalendarContext.renderCell,
       overrideLocale = _useCalendarContext.locale,
       showWeekNumbers = _useCalendarContext.showWeekNumbers;
@@ -67,7 +68,9 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
       var isStartSelected = !unSameMonth && selectedStartDate && DateUtils.isSameDay(thisDate, selectedStartDate);
       var isEndSelected = !unSameMonth && selectedEndDate && DateUtils.isSameDay(thisDate, selectedEndDate);
-      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected);
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected); // TODO-Doma Move those logic that's for DatePicker/DateRangePicker to a separate component
+      //           Calendar is not supposed to be reused this way
+
       var inRange = false; // for Selected
 
       if (selectedStartDate && selectedEndDate) {
@@ -91,7 +94,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
       }
 
-      var _classes = prefix('cell', {
+      var _classes = merge(prefix('cell', {
         'cell-un-same-month': unSameMonth,
         'cell-is-today': isToday,
         'cell-selected': isSelected,
@@ -99,7 +102,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
         'cell-selected-end': isEndSelected,
         'cell-in-range': !unSameMonth && inRange,
         'cell-disabled': disabled
-      });
+      }), cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(thisDate));
 
       var title = formatDate ? formatDate(thisDate, formatStr) : DateUtils.format(thisDate, formatStr);
       days.push( /*#__PURE__*/React.createElement("div", {

package/esm/Calendar/types.d.ts

@@ -13,6 +13,7 @@ export interface CalendarInnerContextValue {
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     renderCell?: (date: Date) => React.ReactNode;
+    cellClassName?: (date: Date) => string | undefined;
     showWeekNumbers?: boolean;
     inline?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.37.4",
+  "version": "5.38.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",