rsuite 5.37.4 → 5.38.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [5.38.0](https://github.com/rsuite/rsuite/compare/v5.37.4...v5.38.0) (2023-08-18)
+
+### Bug Fixes
+
+- **Calendar:** fix onMonthChange not fired when clicking on dates ([#3335](https://github.com/rsuite/rsuite/issues/3335)) ([035d287](https://github.com/rsuite/rsuite/commit/035d287c0f998e1f1aeed62dca7d2cfeded46167))
+- **InputPicker:** cursor should be text ([#3334](https://github.com/rsuite/rsuite/issues/3334)) ([eed2337](https://github.com/rsuite/rsuite/commit/eed2337546665878c51cf3d88d0801c8a37a908d))
+
+### Features
+
+- **Calendar:** add cellClassName prop ([#3336](https://github.com/rsuite/rsuite/issues/3336)) ([cb7c2ae](https://github.com/rsuite/rsuite/commit/cb7c2aee30985219cb0d29155a3ae3d2f739d1d2)), closes [#3333](https://github.com/rsuite/rsuite/issues/3333)
+
 ## [5.37.4](https://github.com/rsuite/rsuite/compare/v5.37.3...v5.37.4) (2023-08-11)
 
 ### Bug Fixes

package/Dropdown/styles/mixin.less

@@ -39,7 +39,6 @@
   padding-right: @dropdown-toggle-padding-right;
   // Fixed: Content is not centered when customizing renderTitle.
   display: inline-block;
-  cursor: pointer;
 }
 
 // Horizontal dividers

package/cjs/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/cjs/Calendar/Calendar.js

@@ -44,7 +44,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       renderCell = props.renderCell,
       value = props.value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value"]);
+      cellClassName = props.cellClassName,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value", "cellClassName"]);
 
   var _useCalendarDate = (0, _useCalendarDate2.default)(value, defaultValue),
       calendarDate = _useCalendarDate.calendarDate,
@@ -56,21 +57,18 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleChange = (0, _react.useCallback)(function (nextValue) {
     setCalendarDate(nextValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [setCalendarDate, onChange]);
+
+    if (!(0, _isSameMonth.default)(nextValue, calendarDate)) {
+      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
+    }
+  }, [setCalendarDate, onChange, calendarDate, onMonthChange]);
   var handleClickToday = (0, _react.useCallback)(function () {
     handleChange(new Date());
   }, [handleChange]);
   var handleSelect = (0, _react.useCallback)(function (nextValue) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
     handleChange(nextValue);
-  }, [handleChange, onSelect]); // Trigger onMonthChange when the month changes
-
-  var handleMonthChange = (0, _react.useCallback)(function (nextValue) {
-    if (!(0, _isSameMonth.default)(nextValue, calendarDate)) {
-      handleChange(nextValue);
-      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
-    }
-  }, [calendarDate, handleChange, onMonthChange]);
+  }, [handleChange, onSelect]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
@@ -108,9 +106,10 @@ var Calendar = /*#__PURE__*/_react.default.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/cjs/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/cjs/Calendar/CalendarContainer.js

@@ -63,13 +63,14 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -155,11 +156,12 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {

package/cjs/Calendar/TableRow.js

@@ -41,6 +41,7 @@ var TableRow = /*#__PURE__*/_react.default.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;
@@ -89,7 +90,9 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       var isEndSelected = !unSameMonth && selectedEndDate && _utils.DateUtils.isSameDay(thisDate, selectedEndDate);
 
-      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.DateUtils.isSameDay(thisDate, selected);
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.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) {
@@ -113,7 +116,7 @@ var TableRow = /*#__PURE__*/_react.default.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,
@@ -121,7 +124,7 @@ var TableRow = /*#__PURE__*/_react.default.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) : _utils.DateUtils.format(thisDate, formatStr);
       days.push( /*#__PURE__*/_react.default.createElement("div", {

package/cjs/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/dist/rsuite-no-reset-rtl.css

@@ -2708,7 +2708,6 @@ tbody.rs-anim-collapse.rs-anim-in {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
 }
 .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle {
   cursor: not-allowed;
@@ -4902,7 +4901,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
 }
 .rs-dropdown-toggle.rs-dropdown-toggle-no-caret {
   padding-left: 12px;
@@ -11502,7 +11500,6 @@ textarea.rs-picker-search-input {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
   color: #575757;
   color: var(--rs-text-primary);
   border: 1px solid #e5e5ea;
@@ -11521,7 +11518,6 @@ textarea.rs-picker-search-input {
   z-index: 5;
   padding-left: 32px;
   display: inline-block;
-  cursor: pointer;
 }
 .rs-picker-subtle.rs-picker-disabled .rs-picker-toggle {
   cursor: not-allowed;