rsuite 5.30.0 → 5.31.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [5.31.1](https://github.com/rsuite/rsuite/compare/v5.31.0...v5.31.1) (2023-04-14)
+
+### Bug Fixes
+
+- **Calendar:** fix style errors that are not as designed ([#3146](https://github.com/rsuite/rsuite/issues/3146)) ([f3fe484](https://github.com/rsuite/rsuite/commit/f3fe484a8f63e877c517061e5911116d3107b68b))
+- **i18n:** update ru_RU locale ([#3153](https://github.com/rsuite/rsuite/issues/3153)) ([5c626a9](https://github.com/rsuite/rsuite/commit/5c626a99ca70d9e30836b02f81b90a37f5f2de2d))
+- **Toggle:** fix spinner size in sm/lg Toggles ([#3156](https://github.com/rsuite/rsuite/issues/3156)) ([896ee49](https://github.com/rsuite/rsuite/commit/896ee492bbdd2277dbe23f6667305ceaf9154a8a))
+
+# [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

package/Calendar/styles/index.less

@@ -18,7 +18,7 @@
   }
 
   &-bordered &-table-row:not(:last-child) &-table-cell,
-  &-bordered &-table-header-row &-table-cell {
+  &-bordered &-table-header-row &-table-header-cell {
     border-bottom: 1px solid var(--rs-border-secondary);
   }
 
@@ -63,7 +63,7 @@
     padding-right: 0;
   }
 
-  &-panel &-table-header-row &-table-cell-content {
+  &-panel &-table-header-row &-table-header-cell-content {
     padding-top: 8px; // padding + border = 10px
     padding-bottom: 8px;
   }
@@ -420,6 +420,7 @@
 
 // Table header row
 .rs-calendar-table-header-cell-content {
+  display: inline-block;
   color: var(--rs-text-secondary);
   font-size: @font-size-small;
   line-height: @line-height-small;

package/Toggle/styles/mixin.less

@@ -6,6 +6,20 @@
     height: @handle-diameter;
     left: @toggle-handle-gap;
     top: @toggle-handle-gap;
+
+    .rs-loader-spin,
+    .rs-loader-spin::before,
+    .rs-loader-spin::after {
+      width: @handle-diameter;
+      height: @handle-diameter;
+    }
+
+    & when (@handle-diameter < 16px) {
+      .rs-loader-spin::before,
+      .rs-loader-spin::after {
+        border-width: 2px;
+      }
+    }
   }
 
   .rs-toggle-presentation {

package/cjs/Calendar/Calendar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import Calendar from './CalendarContainer';
+import CalendarContainer from './CalendarContainer';
 import { CalendarLocale } from '../locales';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 export interface CalendarProps extends WithAsProps {
@@ -17,10 +17,12 @@ 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  */
     renderCell?: (date: Date) => React.ReactNode;
 }
-declare const CalendarPanel: RsRefForwardingComponent<typeof Calendar, CalendarProps>;
-export default CalendarPanel;
+declare const Calendar: RsRefForwardingComponent<typeof CalendarContainer, CalendarProps>;
+export default Calendar;

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"));
@@ -25,7 +27,7 @@ var _utils = require("../utils");
 
 var _useCalendarDate2 = _interopRequireDefault(require("./useCalendarDate"));
 
-var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _CalendarContainer.default : _props$as,
       bordered = props.bordered,
@@ -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,15 +108,15 @@ 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
   }));
 });
 
-CalendarPanel.displayName = 'CalendarPanel';
-CalendarPanel.propTypes = {
+Calendar.displayName = 'Calendar';
+Calendar.propTypes = {
   value: _propTypes.default.instanceOf(Date),
   defaultValue: _propTypes.default.instanceOf(Date),
   isoWeek: _propTypes.default.bool,
@@ -119,5 +129,5 @@ CalendarPanel.propTypes = {
   onSelect: _propTypes.default.func,
   renderCell: _propTypes.default.func
 };
-var _default = CalendarPanel;
+var _default = Calendar;
 exports.default = _default;

package/cjs/Calendar/CalendarContainer.d.ts

@@ -30,8 +30,6 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     hideSeconds?: (second: number, date: Date) => boolean;
     /** The value that mouse hover on in range selection */
     hoverRangeValue?: [Date, Date];
-    /** Is it in the same month as today */
-    inSameMonth?: (date: Date) => boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
     isoWeek?: boolean;
     /** Limit showing how many years in the future */

package/cjs/Calendar/CalendarContainer.js

@@ -48,7 +48,6 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       disabledForward = props.disabledForward,
       format = props.format,
       hoverRangeValue = props.hoverRangeValue,
-      inSameMonth = props.inSameMonth,
       _props$isoWeek = props.isoWeek,
       isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
       limitEndYear = props.limitEndYear,
@@ -69,7 +68,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "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", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -129,12 +128,8 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   var showTime = calendarState === _useCalendarState2.CalendarState.TIME || onlyShowTime;
   var showMonth = calendarState === _useCalendarState2.CalendarState.MONTH || onlyShowMonth;
   var inSameThisMonthDate = (0, _react.useCallback)(function (date) {
-    return (0, _utils.composeFunctions)(function (d) {
-      return (0, _dateUtils.setDate)(d, 1);
-    }, function (d) {
-      return (0, _dateUtils.isSameMonth)(d, date);
-    })(date);
-  }, []);
+    return (0, _dateUtils.isSameMonth)(calendarDate, date);
+  }, [calendarDate]);
   var calendarClasses = merge(className, withClassPrefix({
     'time-view': showTime,
     'month-view': showMonth,
@@ -152,7 +147,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       disabledDate: isDisabledDate,
       format: format,
       hoverRangeValue: hoverRangeValue,
-      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
+      inSameMonth: inSameThisMonthDate,
       isoWeek: isoWeek,
       locale: locale,
       onChangeMonth: handleChangeMonth,
@@ -163,7 +158,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
   return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {
@@ -210,7 +205,6 @@ CalendarContainer.propTypes = {
   hideHours: _propTypes.default.func,
   hideMinutes: _propTypes.default.func,
   hideSeconds: _propTypes.default.func,
-  inSameMonth: _propTypes.default.func,
   isoWeek: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
   locale: _propTypes.default.object,

package/cjs/Calendar/CalendarHeader.js

@@ -125,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)

package/cjs/DatePicker/DatePicker.js

@@ -376,9 +376,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       };
     });
   }, [props]);
-  var inSameMonth = (0, _react.useCallback)(function (date) {
-    return _utils.DateUtils.isSameMonth(date, calendarDate);
-  }, [calendarDate]);
 
   var calendar = /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
     locale: locale,
@@ -391,7 +388,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     limitEndYear: limitEndYear,
     format: formatStr,
     isoWeek: isoWeek,
-    inSameMonth: inSameMonth,
     calendarDate: calendarDate,
     onMoveForward: handleMoveForward,
     onMoveBackward: handleMoveBackward,

package/cjs/DateRangePicker/Calendar.js

@@ -57,9 +57,6 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleToggleMeridian = (0, _react.useCallback)(function (event) {
     onToggleMeridian(index, event);
   }, [index, onToggleMeridian]);
-  var inSameMonth = (0, _react.useCallback)(function (date) {
-    return (0, _dateUtils.isSameMonth)(date, calendarDate[index]);
-  }, [calendarDate, index]);
   var getCalendarDate = (0, _react.useCallback)(function () {
     return calendarDate[index];
   }, [calendarDate, index]);
@@ -76,7 +73,6 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     format: format,
     dateRange: value,
     disabledDate: disabledMonth,
-    inSameMonth: inSameMonth,
     index: index,
     limitEndYear: limitEndYear,
     onChangeMonth: handleChangeMonth,

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/locales/ru_RU.js

@@ -24,7 +24,7 @@ var Calendar = {
   minutes: 'Минут',
   seconds: 'Секунд',
   formattedMonthPattern: 'MMM, yyyy',
-  formattedDayPattern: 'MMM dd, yyyy',
+  formattedDayPattern: 'dd MMM yyyy',
   dateLocale: _ru.default
 };
 var _default = {
@@ -34,8 +34,8 @@ var _default = {
   },
   Plaintext: {
     unfilled: 'незаполненной',
-    notSelected: 'Није изабран',
-    notUploaded: 'Није отпремљено'
+    notSelected: 'Не выбрано',
+    notUploaded: 'Не загружено'
   },
   Pagination: {
     more: 'Больше',
@@ -45,7 +45,7 @@ var _default = {
     last: 'Последняя',
     limit: '{0} / страниц',
     total: 'всего: {0}',
-    skip: 'Идти к{0}'
+    skip: 'Перейти к {0}'
   },
   Calendar: Calendar,
   DatePicker: (0, _extends2.default)({}, Calendar),
@@ -64,9 +64,9 @@ var _default = {
   },
   Uploader: {
     inited: 'Начало',
-    progress: 'Выгрузка',
+    progress: 'Загрузка',
     error: 'Ошибка',
-    complete: 'Завершенно',
+    complete: 'Завершено',
     emptyFile: 'Пусто',
     upload: 'Загрузить'
   },

package/dist/rsuite-no-reset-rtl.css

@@ -2719,7 +2719,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   border-radius: 6px;
 }
 .rs-calendar-bordered .rs-calendar-table-row:not(:last-child) .rs-calendar-table-cell,
-.rs-calendar-bordered .rs-calendar-table-header-row .rs-calendar-table-cell {
+.rs-calendar-bordered .rs-calendar-table-header-row .rs-calendar-table-header-cell {
   border-bottom: 1px solid #f2f2f5;
   border-bottom: 1px solid var(--rs-border-secondary);
 }
@@ -2764,7 +2764,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   padding-right: 0;
   padding-left: 0;
 }
-.rs-calendar-panel .rs-calendar-table-header-row .rs-calendar-table-cell-content {
+.rs-calendar-panel .rs-calendar-table-header-row .rs-calendar-table-header-cell-content {
   padding-top: 8px;
   padding-bottom: 8px;
 }
@@ -3178,6 +3178,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   text-decoration: underline;
 }
 .rs-calendar-table-header-cell-content {
+  display: inline-block;
   color: #8e8e93;
   color: var(--rs-text-secondary);
   font-size: 12px;
@@ -14899,6 +14900,12 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   right: 3px;
   top: 3px;
 }
+.rs-toggle .rs-toggle-loader .rs-loader-spin,
+.rs-toggle .rs-toggle-loader .rs-loader-spin::before,
+.rs-toggle .rs-toggle-loader .rs-loader-spin::after {
+  width: 18px;
+  height: 18px;
+}
 .rs-toggle .rs-toggle-presentation {
   height: 24px;
   min-width: 44px;
@@ -15062,6 +15069,16 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   right: 2px;
   top: 2px;
 }
+.rs-toggle-sm .rs-toggle-loader .rs-loader-spin,
+.rs-toggle-sm .rs-toggle-loader .rs-loader-spin::before,
+.rs-toggle-sm .rs-toggle-loader .rs-loader-spin::after {
+  width: 10px;
+  height: 10px;
+}
+.rs-toggle-sm .rs-toggle-loader .rs-loader-spin::before,
+.rs-toggle-sm .rs-toggle-loader .rs-loader-spin::after {
+  border-width: 2px;
+}
 .rs-toggle-sm .rs-toggle-presentation {
   height: 14px;
   min-width: 26px;
@@ -15108,6 +15125,12 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   right: 3px;
   top: 3px;
 }
+.rs-toggle-md .rs-toggle-loader .rs-loader-spin,
+.rs-toggle-md .rs-toggle-loader .rs-loader-spin::before,
+.rs-toggle-md .rs-toggle-loader .rs-loader-spin::after {
+  width: 18px;
+  height: 18px;
+}
 .rs-toggle-md .rs-toggle-presentation {
   height: 24px;
   min-width: 44px;
@@ -15154,6 +15177,12 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   right: 4px;
   top: 4px;
 }
+.rs-toggle-lg .rs-toggle-loader .rs-loader-spin,
+.rs-toggle-lg .rs-toggle-loader .rs-loader-spin::before,
+.rs-toggle-lg .rs-toggle-loader .rs-loader-spin::after {
+  width: 22px;
+  height: 22px;
+}
 .rs-toggle-lg .rs-toggle-presentation {
   height: 30px;
   min-width: 55px;
@@ -16633,7 +16662,6 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
 }
 .rs-toast-container-bottom-start .rs-toast-fade-entered,
 .rs-toast-container-top-start .rs-toast-fade-entered {
-  margin-right: auto;
   -webkit-animation-name: notificationMoveInLeft;
           animation-name: notificationMoveInLeft;
 }