rsuite 5.4.0 → 5.4.4

package/Button/styles/index.less

@@ -14,7 +14,6 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  outline: 0 !important;
   white-space: nowrap;
   transition: @btn-transition;
   // Reset border style in all browser
@@ -31,10 +30,7 @@
 
   .rs-btn-md();
 
-  &:focus {
-    outline: 0;
-    box-shadow: var(--rs-state-focus-shadow);
-  }
+  .with-focus-ring();
 
   .button-activated({
     color: var(--rs-btn-default-hover-text);

package/CHANGELOG.md

@@ -1,3 +1,41 @@
+## [5.4.4](https://github.com/rsuite/rsuite/compare/v5.4.3...v5.4.4) (2022-01-06)
+
+### Bug Fixes
+
+- **CheckTreePicker:** fix root node style incorrect ([#2279](https://github.com/rsuite/rsuite/issues/2279)) ([c09226e](https://github.com/rsuite/rsuite/commit/c09226e141f7881b11fe5594d802974f49e789a9))
+- **DatePicker:** fix clear button not working ([#2273](https://github.com/rsuite/rsuite/issues/2273)) ([649362a](https://github.com/rsuite/rsuite/commit/649362aa697a292af28c5ec666e4337a7bd449c7))
+- **Dropdown:** wrong submenu placement in RTL direction ([#2280](https://github.com/rsuite/rsuite/issues/2280)) ([c3735c3](https://github.com/rsuite/rsuite/commit/c3735c335d5a8ca6e9954af1e5b77c453b5bd4d2))
+- **Navbar:** fix Whisper on Nav.Item within Navbar wrong positioning ([#2274](https://github.com/rsuite/rsuite/issues/2274)) ([bd0f5e3](https://github.com/rsuite/rsuite/commit/bd0f5e316e6bb910d9a41e43770b4d1a61528d9f)), closes [#2263](https://github.com/rsuite/rsuite/issues/2263)
+
+## [5.4.3](https://github.com/rsuite/rsuite/compare/v5.4.2...v5.4.3) (2021-12-30)
+
+### Bug Fixes
+
+- **Drawer:** fix Drawer cannot be closed when backdrop is clicked ([#2259](https://github.com/rsuite/rsuite/issues/2259)) ([a49ee03](https://github.com/rsuite/rsuite/commit/a49ee03db33c11db30597221ca61ce6daa088c4b))
+- **Picker:** add ref to PickerComponentProps ([#2261](https://github.com/rsuite/rsuite/issues/2261)) ([6e3e6c5](https://github.com/rsuite/rsuite/commit/6e3e6c57932af142dc1a74da6b7fffb57ae628ca))
+
+## [5.4.2](https://github.com/rsuite/rsuite/compare/v5.4.1...v5.4.2) (2021-12-24)
+
+### Bug Fixes
+
+- **Affix:** fix unupdated position after window size change ([#2256](https://github.com/rsuite/rsuite/issues/2256)) ([61c7b27](https://github.com/rsuite/rsuite/commit/61c7b279f136ae44b9470046344cd6e163d02589))
+- **Modal:** improve the mouse scrolling experience on Modal ([#2254](https://github.com/rsuite/rsuite/issues/2254)) ([137d57e](https://github.com/rsuite/rsuite/commit/137d57ef1e79ca0055b3af8d6cd5cff2a9c4ef55))
+- **Navbar:** fix dropdown submenu throwing error ([#2250](https://github.com/rsuite/rsuite/issues/2250)) ([875130d](https://github.com/rsuite/rsuite/commit/875130d342f58e4078babe428913640e0b2faa04))
+
+## [5.4.1](https://github.com/rsuite/rsuite/compare/v5.4.0...v5.4.1) (2021-12-23)
+
+### Bug Fixes
+
+- **Dropdown:** reduce padding in noCaret variant ([#2236](https://github.com/rsuite/rsuite/issues/2236)) ([682f883](https://github.com/rsuite/rsuite/commit/682f8830601d784452c10729a369ebe91057eddb))
+- **Sidenav:** fix missing highlight on selected dropdown items ([#2216](https://github.com/rsuite/rsuite/issues/2216)) ([8f79d4a](https://github.com/rsuite/rsuite/commit/8f79d4a8aafb123f75f420a3adf3f680386aae68))
+- **Sidenav:** prevent text wrapping when collapsing ([#2245](https://github.com/rsuite/rsuite/issues/2245)) ([4094233](https://github.com/rsuite/rsuite/commit/409423360a5226c8a0e11bbeecea0a4316c5c8e0))
+- **Toggle:** dismiss uncontrolled input warning ([#2243](https://github.com/rsuite/rsuite/issues/2243)) ([c4737d5](https://github.com/rsuite/rsuite/commit/c4737d5af2fabf88312c7ee2b84d4e9139e743f1))
+
+### Performance Improvements
+
+- **Context:** use `useMemo` to memozie the values returned to the Context Provider ([#2244](https://github.com/rsuite/rsuite/issues/2244)) ([d25a719](https://github.com/rsuite/rsuite/commit/d25a71920d38bceefcf100248173121d54be8313))
+- **DatePicker:** improve date grid a11y ([#2220](https://github.com/rsuite/rsuite/issues/2220)) ([655178e](https://github.com/rsuite/rsuite/commit/655178e05afe5e4b4619bda3a222dc753766e13b))
+
 # [5.4.0](https://github.com/rsuite/rsuite/compare/v5.3.0...v5.4.0) (2021-12-17)
 
 ### Bug Fixes

package/CheckTreePicker/styles/index.less

@@ -73,7 +73,7 @@
       }
 
       // Only has the first level
-      .without-children & {
+      .rs-check-tree-without-children & {
         padding-left: 34px; //text gap + checkbox space
 
         &::before {

package/Drawer/styles/index.less

@@ -6,6 +6,9 @@
   position: fixed;
   z-index: @zindex-drawer;
   top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 // Container that the drawer scrolls within

package/Dropdown/styles/index.less

@@ -81,10 +81,10 @@
     // Force set style even if has `.btn`.
     .dropdown-toggle();
   }
-}
 
-.rs-dropdown-toggle.rs-dropdown-no-caret {
-  padding-right: @padding-x;
+  &.rs-dropdown-toggle-no-caret {
+    padding-right: @padding-x;
+  }
 }
 
 // The dropdown menu (ul)
@@ -108,6 +108,7 @@
     z-index: @zindex-dropdown + 1;
     float: left;
     box-shadow: var(--rs-dropdown-shadow);
+    outline: none;
 
     .high-contrast-mode({
       border: 1px solid var(--rs-border-primary);
@@ -219,26 +220,9 @@
       right: @dropdown-caret-icon-padding-horizontal;
     }
   }
-  //
-  //&.rs-dropdown-menu-pull-left {
-  //  &.rs-dropdown-item {
-  //    padding-left: @dropdown-item-padding-x+ @dropdown-item-submenu-icon-angle-spacing +
-  //      @dropdown-item-submenu-icon-angle-width;
-  //
-  //    > .rs-dropdown-menu-toggle .rs-dropdown-menu-toggle-icon {
-  //      left: @dropdown-caret-icon-padding-horizontal;
-  //    }
-  //  }
-  //}
-
-  // Pull right
-  .rs-dropdown-item-pull-right ~ .rs-dropdown-menu {
-    left: 100%;
-  }
 
-  // Pull Left
-  .rs-dropdown-item-pull-left ~ .rs-dropdown-menu {
-    right: 100%;
+  .rs-dropdown-menu {
+    left: 100%;
   }
 
   // Open

package/Dropdown/styles/mixin.less

@@ -39,8 +39,6 @@
   padding-right: @dropdown-toggle-padding-right;
   // Fixed: Content is not centered when customizing renderTitle.
   display: inline-block;
-  // Rest `:focus` blue border.
-  outline: none;
   cursor: pointer;
 }
 

package/Modal/styles/index.less

@@ -5,6 +5,27 @@
 // Modals
 // --------------------------------------------------
 
+// Modal background
+.rs-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: @zindex-modal - 1;
+  background-color: var(--rs-bg-backdrop);
+
+  // Fade for backdrop
+  &.rs-anim-fade {
+    opacity: 0;
+    transition: opacity 0.3s ease-in;
+  }
+
+  &.rs-anim-in {
+    opacity: 1;
+  }
+}
+
 // Kill the scroll on the body
 .rs-modal-open {
   overflow: hidden;
@@ -15,9 +36,9 @@
   overflow: auto;
   z-index: @zindex-modal;
   top: 0;
-  bottom: 0;
-  right: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 // Container that the modal scrolls within
@@ -71,26 +92,6 @@
   padding: @modal-content-padding;
 }
 
-// Modal background
-.rs-modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: var(--rs-bg-backdrop);
-
-  // Fade for backdrop
-  &.rs-anim-fade {
-    opacity: 0;
-    transition: opacity 0.3s ease-in;
-  }
-
-  &.rs-anim-in {
-    opacity: 1;
-  }
-}
-
 // Modal header
 // Top section of the modal w/ title and dismiss
 .rs-modal-header {

package/Navbar/styles/index.less

@@ -1,4 +1,5 @@
 @import '../../styles/common';
+@import '../../Dropdown/styles/index';
 
 // NavBar
 // --------------------------------------------------
@@ -72,8 +73,6 @@
 .rs-navbar-brand,
 .rs-navbar-item,
 .rs-navbar-nav > .rs-dropdown-item {
-  outline: 0;
-
   &,
   &:hover,
   &:focus,
@@ -82,7 +81,9 @@
   }
 
   &:focus-visible {
-    .focus-ring();
+    // Navbar is usually placed by the top edge of the page
+    // thus use an inset focus ring to prevent overflow clipping
+    .focus-ring(inset);
 
     .high-contrast-mode({
       .focus-ring(slim-inset);
@@ -97,10 +98,21 @@
   margin: 0 !important;
 }
 
-// DropDown
+.rs-navbar-item.rs-navbar-item-active {
+  .high-contrast-mode({
+    text-decoration: underline;
+  });
+}
+
+// Dropdown
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
   &:extend(.rs-navbar-item);
 
+  &:focus,
+  &:focus-visible {
+    &:extend(.rs-navbar-item:focus-visible);
+  }
+
   padding-right: @navbar-item-padding-x+ @dropdown-caret-width+ @dropdown-caret-padding;
 
   .high-contrast-mode({
@@ -117,10 +129,10 @@
   }
 }
 
-.rs-navbar-item.rs-navbar-item-active {
-  .high-contrast-mode({
-    text-decoration: underline;
-  });
+.rs-navbar .rs-dropdown-item {
+  &:hover {
+    .menuitem-active();
+  }
 }
 
 // Default Navbar

package/README.md

@@ -8,7 +8,7 @@ English | [中文版][readm-cn]
 
 [![npm][npm-svg]][npm-home]
 [![GitHub Actions][actions-svg]][actions-home]
-[![codecov](https://codecov.io/gh/rsuite/rsuite/branch/next/graph/badge.svg?token=HGeKd0BD3t)](https://codecov.io/gh/rsuite/rsuite)
+[![codecov](https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t)](https://codecov.io/gh/rsuite/rsuite)
 [![Discord][discord-svg]][discord-invite]
 [![Gitter][gitter-svg]][gitter]
 [![Gitter][gitter-cn-svg]][gitter-cn]

package/Sidenav/styles/index.less

@@ -110,6 +110,12 @@
     width: 100%;
     white-space: normal;
 
+    // Sidenav is usually placed by the left/right edge of the page
+    // thus use an inset focus ring to prevent overflow clipping
+    &:focus {
+      .focus-ring(inset);
+    }
+
     > .rs-icon:not(.rs-dropdown-toggle-caret) {
       font-size: @sidenav-level1-item-font-size;
       margin-right: @sidenav-icon-spacing;
@@ -378,6 +384,7 @@
     .rs-dropdown .rs-dropdown-toggle,
     .rs-dropdown-item,
     .rs-dropdown-item-submenu > .rs-dropdown-menu-toggle {
+      white-space: nowrap;
       text-overflow: clip;
     }
   }
@@ -436,7 +443,6 @@
 
 .rs-sidenav-default.rs-sidenav-collapse-in,
 .rs-sidenav-default.rs-sidenav-collapsing {
-  .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
     color: var(--rs-sidenav-default-text);
@@ -543,6 +549,7 @@
 
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown-item.rs-dropdown-item-active,
   .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
     color: var(--rs-sidenav-subtle-selected-text);
   }
@@ -559,7 +566,6 @@
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,
 .rs-sidenav-subtle.rs-sidenav-collapsing {
-  .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
     color: var(--rs-sidenav-subtle-text);

package/cjs/Affix/Affix.js

@@ -35,7 +35,9 @@ function useOffset(mountRef) {
     return mountRef.current;
   }, updateOffset); // Initialize after the first render
 
-  (0, _react.useEffect)(updateOffset, [updateOffset]);
+  (0, _utils.useMount)(updateOffset); // Update after window size changes
+
+  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);
   return offset;
 }
 /**

package/cjs/AvatarGroup/AvatarGroup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -41,13 +43,16 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix({
     stack: stack
   }));
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      size: size
+    };
+  }, [size]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
-    value: {
-      size: size
-    }
+    value: contextValue
   }, spacing ? _react.default.Children.map(children, function (child) {
     var _extends2;
 

package/cjs/ButtonGroup/ButtonGroup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -41,10 +43,13 @@ var ButtonGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     vertical: vertical,
     justified: justified
   }));
-  return /*#__PURE__*/_react.default.createElement(_ButtonGroupContext.default.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       size: size
-    }
+    };
+  }, [size]);
+  return /*#__PURE__*/_react.default.createElement(_ButtonGroupContext.default.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     role: role,
     ref: ref,

package/cjs/Calendar/Calendar.js

@@ -77,11 +77,11 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
-  var isDisabledDate = function isDisabledDate(date) {
+  var isDisabledDate = (0, _react.useCallback)(function (date) {
     var _disabledDate;
 
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
-  };
+  }, [disabledDate]);
 
   var isTimeDisabled = function isTimeDisabled(date) {
     return _utils.DateUtils.disabledTime(props, date);
@@ -117,27 +117,28 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = (0, _pick.default)(rest, _utils.DateUtils.calendarOnlyProps);
-  var contextValue = {
-    date: calendarDate,
-    dateRange: dateRange,
-    disabledDate: isDisabledDate,
-    format: format,
-    hoverRangeValue: hoverRangeValue,
-    inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
-    isoWeek: isoWeek,
-    locale: locale,
-    onChangePageDate: onChangePageDate,
-    onChangePageTime: onChangePageTime,
-    onMouseMove: onMouseMove,
-    onSelect: onSelect,
-    renderCell: renderCell,
-    showWeekNumbers: showWeekNumbers,
-    inline: inline
-  };
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      date: calendarDate,
+      dateRange: dateRange,
+      disabledDate: isDisabledDate,
+      format: format,
+      hoverRangeValue: hoverRangeValue,
+      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
+      isoWeek: isoWeek,
+      locale: locale,
+      onChangePageDate: onChangePageDate,
+      onChangePageTime: onChangePageTime,
+      onMouseMove: onMouseMove,
+      onSelect: onSelect,
+      renderCell: renderCell,
+      showWeekNumbers: showWeekNumbers,
+      inline: inline
+    };
+  }, [calendarDate, dateRange, format, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageDate, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
   return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, _utils.DateUtils.omitHideDisabledProps(rest), {
-    role: "table",
     className: calendarClasses,
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_Header.default, {

package/cjs/Calendar/Header.js

@@ -139,9 +139,7 @@ var Header = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     'has-month': hasMonth,
     'has-time': showTime
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "row"
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
   }), hasMonth && monthToolbar, showTime && /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Calendar/Table.js

@@ -35,7 +35,7 @@ var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "table"
+    role: "grid"
   }, rest, {
     ref: ref,
     className: classes

package/cjs/Calendar/TableRow.js

@@ -36,16 +36,19 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       selected = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
       dateRange = _useCalendarContext.dateRange,
       disabledDate = _useCalendarContext.disabledDate,
-      formatDate = _useCalendarContext.formatDate,
       hoverRangeValue = _useCalendarContext.hoverRangeValue,
       inSameMonth = _useCalendarContext.inSameMonth,
       isoWeek = _useCalendarContext.isoWeek,
       onMouseMove = _useCalendarContext.onMouseMove,
       onSelect = _useCalendarContext.onSelect,
       renderCell = _useCalendarContext.renderCell,
-      locale = _useCalendarContext.locale,
+      overrideLocale = _useCalendarContext.locale,
       showWeekNumbers = _useCalendarContext.showWeekNumbers;
 
+  var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
+      locale = _useCustom.locale,
+      formatDate = _useCustom.formatDate;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
       merge = _useClassNames.merge;
@@ -59,7 +62,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [onSelect]);
 
   var renderDays = function renderDays() {
-    var formatStr = (locale === null || locale === void 0 ? void 0 : locale.formattedDayPattern) || 'yyyy-MM-dd';
+    var formatStr = locale.formattedDayPattern;
     var days = [];
 
     var _ref = dateRange || [],
@@ -86,7 +89,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       var isEndSelected = !unSameMonth && selectedEndDate && _utils.DateUtils.isSameDay(thisDate, selectedEndDate);
 
-      var isSelected = isStartSelected || isEndSelected;
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.DateUtils.isSameDay(thisDate, selected);
       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', {
         'cell-un-same-month': unSameMonth,
         'cell-is-today': isToday,
-        'cell-selected': isRangeSelectionMode ? isSelected : _utils.DateUtils.isSameDay(thisDate, selected),
+        'cell-selected': isSelected,
         'cell-selected-start': isStartSelected,
         'cell-selected-end': isEndSelected,
         'cell-in-range': !unSameMonth && inRange,
@@ -122,8 +125,10 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       var title = formatDate ? formatDate(thisDate, formatStr) : _utils.DateUtils.format(thisDate, formatStr);
       days.push( /*#__PURE__*/_react.default.createElement("div", {
-        role: "cell",
+        role: "gridcell",
         key: title,
+        "aria-label": title,
+        "aria-selected": isSelected || undefined,
         className: _classes
       }, /*#__PURE__*/_react.default.createElement("div", {
         role: "button",
@@ -147,7 +152,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: classes
   }), showWeekNumbers && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('cell-week-number'),
-    role: "cell"
+    role: "rowheader"
   }, _utils.DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
 });
 

package/cjs/Calendar/View.js

@@ -30,7 +30,12 @@ var View = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
       _useCalendarContext$d = _useCalendarContext.date,
       date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-      isoWeek = _useCalendarContext.isoWeek;
+      isoWeek = _useCalendarContext.isoWeek,
+      overrideLocale = _useCalendarContext.locale;
+
+  var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
+      locale = _useCustom.locale,
+      formatDate = _useCustom.formatDate;
 
   var thisMonthDate = _utils.DateUtils.setDate(date, 1);
 
@@ -39,13 +44,12 @@ var View = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       withClassPrefix = _useClassNames.withClassPrefix;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "row"
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(_Table.default, {
-    rows: _utils.DateUtils.getMonthView(thisMonthDate, isoWeek)
+    rows: _utils.DateUtils.getMonthView(thisMonthDate, isoWeek),
+    "aria-label": formatDate(thisMonthDate, locale.formattedMonthPattern)
   }));
 });
 

package/cjs/Calendar/useCalendarDate.d.ts

@@ -1,4 +1,4 @@
-declare const useCalendarDate: (value: Date | undefined, defaultDate: Date | undefined) => {
+declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
     calendarDate: Date;
     setCalendarDate: (date: Date | undefined) => void;
 };

package/cjs/Calendar/useCalendarDate.js

@@ -25,7 +25,7 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
     var _valueRef$current;
 
     if ((value === null || value === void 0 ? void 0 : value.valueOf()) !== ((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.valueOf())) {
-      setCalendarDate(value);
+      setCalendarDate(value !== null && value !== void 0 ? value : new Date());
       valueRef.current = value;
     }
   }, [value]);

package/cjs/Carousel/Carousel.js

@@ -62,7 +62,13 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       lastIndex = _useState2[0],
       setLastIndex = _useState2[1];
 
+  var rootRef = (0, _react.useRef)(null);
+
   var handleSlide = function handleSlide(nextActiveIndex, event) {
+    if (!rootRef.current) {
+      return;
+    }
+
     clear();
     var index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1; // When index is greater than count, start from 1 again.
 
@@ -129,7 +135,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + "%", _sliderStyles.transform = vertical ? "translate3d(0, " + activeRatio + " ,0)" : "translate3d(" + activeRatio + ", 0 ,0)", _sliderStyles);
   var showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends4.default)({}, rest, {
-    ref: ref,
+    ref: (0, _utils.mergeRefs)(ref, rootRef),
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('content')