rsuite 5.29.0 → 5.31.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [5.31.0](https://github.com/rsuite/rsuite/compare/v5.30.0...v5.31.0) (2023-04-07)
+
+### Bug Fixes
+
+- **toaster:** fix style when message at the left ([#3138](https://github.com/rsuite/rsuite/issues/3138)) ([6084c2a](https://github.com/rsuite/rsuite/commit/6084c2a35cdd32db1e9a4ec560e9bfaadb7a173c))
+
+### Features
+
+- **Calendar:** add support for `onMonthChange` on `<Calendar>` ([#3150](https://github.com/rsuite/rsuite/issues/3150)) ([8dfe9d6](https://github.com/rsuite/rsuite/commit/8dfe9d6da95a55277d78f712b1d91ea56a70b9bb))
+
+# [5.30.0](https://github.com/rsuite/rsuite/compare/v5.29.0...v5.30.0) (2023-03-31)
+
+### Bug Fixes
+
+- **Cascader:** fix infinite load state on inline mode and fix typo ([#3131](https://github.com/rsuite/rsuite/issues/3131)) ([faa05f0](https://github.com/rsuite/rsuite/commit/faa05f03df1ab890f0bcf13ebd173e52129400df))
+- **DatePicker:** fix abnormal time display in the calendar header ([#3136](https://github.com/rsuite/rsuite/issues/3136)) ([860df1a](https://github.com/rsuite/rsuite/commit/860df1a7bd03b40371ac6891e45f3295b9edc72f))
+- **DateRangePicker:** fix the error of invalid time during date selection ([#3135](https://github.com/rsuite/rsuite/issues/3135)) ([adeafdc](https://github.com/rsuite/rsuite/commit/adeafdc44162fd2ef9e2470094a52cb17b5cddb3))
+
 # [5.29.0](https://github.com/rsuite/rsuite/compare/v5.28.3...v5.29.0) (2023-03-24)
 
 ### Bug Fixes

package/cjs/Calendar/Calendar.d.ts

@@ -17,6 +17,8 @@ export interface CalendarProps extends WithAsProps {
     locale?: CalendarLocale;
     /**  Callback fired before the value changed  */
     onChange?: (date: Date) => void;
+    /** Callback fired before the month changed */
+    onMonthChange?: (date: Date) => void;
     /** Callback fired before the date selected */
     onSelect?: (date: Date) => void;
     /** Custom render calendar cells  */

package/cjs/Calendar/Calendar.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isSameMonth = _interopRequireDefault(require("date-fns/isSameMonth"));
+
 var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -38,10 +40,11 @@ var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       isoWeek = props.isoWeek,
       overrideLocale = props.locale,
       onChange = props.onChange,
+      onMonthChange = props.onMonthChange,
       onSelect = props.onSelect,
       renderCell = props.renderCell,
       value = props.value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onSelect", "renderCell", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onMonthChange", "onSelect", "renderCell", "value"]);
 
   var _useCalendarDate = (0, _useCalendarDate2.default)(value, defaultValue),
       calendarDate = _useCalendarDate.calendarDate,
@@ -60,7 +63,14 @@ var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var handleSelect = (0, _react.useCallback)(function (nextValue) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
     handleChange(nextValue);
-  }, [handleChange, onSelect]);
+  }, [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]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
@@ -98,9 +108,9 @@ var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     },
     renderToolbar: renderToolbar,
     renderCell: customRenderCell,
-    onMoveForward: handleChange,
-    onMoveBackward: handleChange,
-    onChangeMonth: handleChange,
+    onMoveForward: handleMonthChange,
+    onMoveBackward: handleMonthChange,
+    onChangeMonth: handleMonthChange,
     onSelect: handleSelect
   }));
 });

package/cjs/Calendar/CalendarHeader.js

@@ -29,6 +29,8 @@ var _CustomProvider = require("../CustomProvider");
 
 var _CalendarContext = require("./CalendarContext");
 
+var _DateRangePickerContext = require("../DateRangePicker/DateRangePickerContext");
+
 var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -59,6 +61,9 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       inline = _useCalendarContext.inline,
       disabledDate = _useCalendarContext.disabledDate;
 
+  var _useDateRangePickerCo = (0, _DateRangePickerContext.useDateRangePickerContext)(),
+      isSelectedIdle = _useDateRangePickerCo.isSelectedIdle;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -120,13 +125,17 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var monthToolbar = /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('month-toolbar')
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({}, btnProps, {
+    // TODO: aria-label should be translated by i18n
+    "aria-label": "Previous month",
     className: backwardClass,
     onClick: disabledBackward ? undefined : onMoveBackward,
     icon: /*#__PURE__*/_react.default.createElement(_AngleLeft.default, null)
   })), /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
+    "aria-label": "Select month",
     className: dateTitleClasses,
     onClick: onToggleMonthDropdown
   }), renderTitle()), /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({}, btnProps, {
+    "aria-label": "Next month",
     className: forwardClass,
     onClick: disabledForward ? undefined : onMoveForward,
     icon: /*#__PURE__*/_react.default.createElement(_AngleRight.default, null)
@@ -136,7 +145,9 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var classes = merge(className, withClassPrefix({
     'has-month': hasMonth,
     'has-time': showTime
-  }));
+  })); // If the date is not selected, the time cannot be selected (it only works in DateRangePicker).
+
+  var disableSelectTime = typeof isSelectedIdle === 'undefined' ? false : !isSelectedIdle;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
@@ -144,13 +155,15 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     className: prefix('time-toolbar')
   }, /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
     className: timeTitleClasses,
-    onClick: onToggleTimeDropdown
+    onClick: onToggleTimeDropdown,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
     className: prefix('meridian'),
-    onClick: onToggleMeridian
+    onClick: onToggleMeridian,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
     date: date,
     formatStr: "a"

package/cjs/Cascader/Cascader.js

@@ -295,7 +295,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           node.loading = false;
           node[childrenKey] = data;
 
-          if (targetRef.current) {
+          if (targetRef.current || inline) {
             addColumn(data, columnIndex);
           }
         });

package/cjs/DateRangePicker/DateRangePicker.js

@@ -47,6 +47,8 @@ var _utils2 = require("./utils");
 
 var _deprecatePropType = require("../utils/deprecatePropType");
 
+var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
+
 var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _ref, _ref2, _merge;
 
@@ -127,7 +129,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
 
-  var hasDoneSelect = (0, _react.useRef)(true);
+  var _useState = (0, _react.useState)(true),
+      isSelectedIdle = _useState[0],
+      setSelectedIdle = _useState[1];
   /**
    * The currently selected date range.
    *
@@ -137,25 +141,26 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    *
    */
 
-  var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
-      selectedDates = _useState[0],
-      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
+
+  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
+      selectedDates = _useState2[0],
+      setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
 
 
-  var _useState2 = (0, _react.useState)(null),
-      hoverDateRange = _useState2[0],
-      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
+  var _useState3 = (0, _react.useState)(null),
+      hoverDateRange = _useState3[0],
+      setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
 
 
-  var _useState3 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
+  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
     value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
-      calendarDate = _useState3[0],
-      setCalendarDate = _useState3[1];
+      calendarDate = _useState4[0],
+      setCalendarDate = _useState4[1];
 
-  var _useState4 = (0, _react.useState)(),
-      inputState = _useState4[0],
-      setInputState = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+      inputState = _useState5[0],
+      setInputState = _useState5[1];
   /**
    * When hoverRange is set, `selectValue` will be updated during the hover process,
    * which will cause the `selectValue` to be updated after the first click,
@@ -211,9 +216,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
 
-  var _useState5 = (0, _react.useState)(false),
-      isPickerToggleActive = _useState5[0],
-      setPickerToggleActive = _useState5[1];
+  var _useState6 = (0, _react.useState)(false),
+      isPickerToggleActive = _useState6[0],
+      setPickerToggleActive = _useState6[1];
 
   var rootRef = (0, _react.useRef)(null);
   var overlayRef = (0, _react.useRef)(null);
@@ -316,7 +321,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     // it means there's already one selected date
     // and waiting for user to select the second date to complete the selection.
 
-    if (!hasDoneSelect.current) {
+    if (!isSelectedIdle) {
       // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
       if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
@@ -335,7 +340,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else if (!(0, _isNil.default)(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue]);
+  }, [getHoverRangeValue, isSelectedIdle]);
   /**
    * Callback for selecting a date cell in the calendar grid
    */
@@ -346,23 +351,23 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var hoverRangeValue = getHoverRangeValue(date);
     var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode
 
-    if (hasDoneSelect.current && oneTap) {
+    if (isSelectedIdle && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);
-      hasDoneSelect.current = false;
+      setSelectedIdle(false);
       return;
     } // no preset hover range can use
 
 
     if (noHoverRangeValid) {
       // start select
-      if (hasDoneSelect.current) {
+      if (isSelectedIdle) {
         nextSelectDates = [date];
       } else {
         // finish select
         nextSelectDates[1] = date;
       }
     } else {
-      if (!hasDoneSelect.current) {
+      if (!isSelectedIdle) {
         nextSelectDates = selectedDates;
         selectRangeValueRef.current = null;
       } else {
@@ -399,8 +404,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       eventName: 'changeDate'
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
-    hasDoneSelect.current = !hasDoneSelect.current;
-  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+    setSelectedIdle(!isSelectedIdle);
+  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, isSelectedIdle, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -476,7 +481,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } // End unfinished selections.
 
 
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
   }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = (0, _react.useCallback)(function (event) {
     handleValueUpdate(event, selectedDates);
@@ -563,7 +568,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   }, [onOpen]);
   var handleExited = (0, _react.useCallback)(function () {
     setPickerToggleActive(false);
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
   var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {
@@ -581,7 +586,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     // If the date is between the start and the end
     // the button is disabled
     while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {
-      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {
+      if (isDateDisabled(start, selectedDates, isSelectedIdle, type)) {
         return true;
       }
 
@@ -589,17 +594,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     return false;
-  }, [isDateDisabled, selectedDates]);
+  }, [isDateDisabled, isSelectedIdle, selectedDates]);
   var disabledOkButton = (0, _react.useCallback)(function () {
     var start = selectedDates[0],
         end = selectedDates[1];
 
-    if (!start || !end || !hasDoneSelect.current) {
+    if (!start || !end || !isSelectedIdle) {
       return true;
     }
 
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, selectedDates]);
+  }, [disabledByBetween, isSelectedIdle, selectedDates]);
   var disabledShortcutButton = (0, _react.useCallback)(function (value) {
     if (value === void 0) {
       value = [];
@@ -616,8 +621,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {
-    return isDateDisabled(date, values, hasDoneSelect.current, type);
-  }, [isDateDisabled]);
+    return isDateDisabled(date, values, isSelectedIdle, type);
+  }, [isDateDisabled, isSelectedIdle]);
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -686,11 +691,15 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: prefix('daterange-header')
     }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
+    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {
+      value: {
+        isSelectedIdle: isSelectedIdle
+      }
     }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 0
     }, calendarProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 1
-    }, calendarProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    }, calendarProps))))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,

package/cjs/DateRangePicker/DateRangePickerContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DateRangePickerContextValue {
+    isSelectedIdle?: boolean;
+}
+declare const DateRangePickerContext: React.Context<DateRangePickerContextValue>;
+export default DateRangePickerContext;
+export declare const useDateRangePickerContext: () => DateRangePickerContextValue;

package/cjs/DateRangePicker/DateRangePickerContext.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports.useDateRangePickerContext = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var DateRangePickerContext = /*#__PURE__*/_react.default.createContext({});
+
+var _default = DateRangePickerContext;
+exports.default = _default;
+
+var useDateRangePickerContext = function useDateRangePickerContext() {
+  return (0, _react.useContext)(DateRangePickerContext) || {};
+};
+
+exports.useDateRangePickerContext = useDateRangePickerContext;

package/cjs/Table/Table.d.ts

@@ -6,7 +6,7 @@ export interface CellProps<T = any> extends Omit<TableCellProps, 'rowData' | 'da
     /** Row Data */
     rowData?: T;
 }
-declare const _default: (<Row extends RowDataType, Key>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+declare const _default: (<Row extends RowDataType<never>, Key>(props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     Cell: React.ForwardRefExoticComponent<import("rsuite-table/lib/Cell").InnerCellProps & React.RefAttributes<HTMLDivElement>>;
     Column: typeof Column;
     HeaderCell: React.ForwardRefExoticComponent<import("rsuite-table").HeaderCellProps & React.RefAttributes<HTMLDivElement>>;

package/cjs/utils/dateUtils.js

@@ -181,21 +181,21 @@ function validTime(calendarProps, date) {
 
   return Object.keys(calendarProps).some(function (key) {
     if (/(Hours)/.test(key)) {
-      var _calendarProps$key, _calendarProps$key2;
+      var _calendarProps$key;
 
-      return (_calendarProps$key = (_calendarProps$key2 = calendarProps[key]) === null || _calendarProps$key2 === void 0 ? void 0 : _calendarProps$key2.call(calendarProps, (0, _getHours.default)(date), date)) !== null && _calendarProps$key !== void 0 ? _calendarProps$key : true;
+      return (_calendarProps$key = calendarProps[key]) === null || _calendarProps$key === void 0 ? void 0 : _calendarProps$key.call(calendarProps, (0, _getHours.default)(date), date);
     }
 
     if (/(Minutes)/.test(key)) {
-      var _calendarProps$key3, _calendarProps$key4;
+      var _calendarProps$key2;
 
-      return (_calendarProps$key3 = (_calendarProps$key4 = calendarProps[key]) === null || _calendarProps$key4 === void 0 ? void 0 : _calendarProps$key4.call(calendarProps, (0, _getMinutes.default)(date), date)) !== null && _calendarProps$key3 !== void 0 ? _calendarProps$key3 : true;
+      return (_calendarProps$key2 = calendarProps[key]) === null || _calendarProps$key2 === void 0 ? void 0 : _calendarProps$key2.call(calendarProps, (0, _getMinutes.default)(date), date);
     }
 
     if (/(Seconds)/.test(key)) {
-      var _calendarProps$key5, _calendarProps$key6;
+      var _calendarProps$key3;
 
-      return (_calendarProps$key5 = (_calendarProps$key6 = calendarProps[key]) === null || _calendarProps$key6 === void 0 ? void 0 : _calendarProps$key6.call(calendarProps, (0, _getSeconds.default)(date), date)) !== null && _calendarProps$key5 !== void 0 ? _calendarProps$key5 : true;
+      return (_calendarProps$key3 = calendarProps[key]) === null || _calendarProps$key3 === void 0 ? void 0 : _calendarProps$key3.call(calendarProps, (0, _getSeconds.default)(date), date);
     }
 
     return false;