rsuite 5.3.0 → 5.4.3

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,56 @@
+## [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
+
+- **DatePicker,DateRangePicker:** suppress depreated caretComponent warning ([#2233](https://github.com/rsuite/rsuite/issues/2233)) ([3a79d48](https://github.com/rsuite/rsuite/commit/3a79d486268ff31ad6a620dfc17165c3be259219))
+- **DateRangePicker:** fix selecting ending date not working ([#2217](https://github.com/rsuite/rsuite/issues/2217)) ([2136aa3](https://github.com/rsuite/rsuite/commit/2136aa3327f914a910fb5805b2d11a036e0f6601))
+- **Modal:** fix Modal focus being reset on re-rendering ([#2208](https://github.com/rsuite/rsuite/issues/2208)) ([a931b06](https://github.com/rsuite/rsuite/commit/a931b06942e7fc011ab77e70b105f5790a33e55b))
+- **Nav:** fix incorrect Dropdown button background ([#2227](https://github.com/rsuite/rsuite/issues/2227)) ([421de83](https://github.com/rsuite/rsuite/commit/421de838ed13694254cc6a178d0369e12b666202))
+- **Navbar:** fix icon style in Navbar items ([#2229](https://github.com/rsuite/rsuite/issues/2229)) ([560df61](https://github.com/rsuite/rsuite/commit/560df61a44c0338b153b2c09a50e946c207c684a))
+- **Overlay:** overlay is rendered inside Modal by default ([#2230](https://github.com/rsuite/rsuite/issues/2230)) ([4fac628](https://github.com/rsuite/rsuite/commit/4fac628e23e41db097ec63c2ac348a7345f3ee31))
+- **Radio:** fix unclickable without children ([#2190](https://github.com/rsuite/rsuite/issues/2190)) ([cef5946](https://github.com/rsuite/rsuite/commit/cef59463e281d6aa6b4b9576204d16eed58087c8))
+- **SelectPicker:** fix onChange argument type ([#2193](https://github.com/rsuite/rsuite/issues/2193)) ([db0efa9](https://github.com/rsuite/rsuite/commit/db0efa94ad33de5d02bfd81e926cf622c40ecce7))
+- **Steps:** step item not rendering number ([#2202](https://github.com/rsuite/rsuite/issues/2202)) ([413880b](https://github.com/rsuite/rsuite/commit/413880be99972d8a58d5f0a0c9b6b08017ad33a2))
+- **Toggle:** fix Toggle is still clickable in loading state ([#2219](https://github.com/rsuite/rsuite/issues/2219)) ([e5661fd](https://github.com/rsuite/rsuite/commit/e5661fdb4ef659527ca97c2ea2231b4025e904d3))
+- **Tree:** remove dragNode Element when drag node ([#2185](https://github.com/rsuite/rsuite/issues/2185)) ([#2237](https://github.com/rsuite/rsuite/issues/2237)) ([f6e959f](https://github.com/rsuite/rsuite/commit/f6e959f4aa24f0fa87b5fa1bbc6e1aa775fecd2b))
+
+### Features
+
+- **Stack:** add Stack support to the layout ([#2199](https://github.com/rsuite/rsuite/issues/2199)) ([1ac132e](https://github.com/rsuite/rsuite/commit/1ac132e0fc98a6739dee07d9e6281202530d80fa))
+
+### Performance Improvements
+
+- **CheckPicker:** infer value and onChange types from data prop ([#2228](https://github.com/rsuite/rsuite/issues/2228)) ([eb4f9a8](https://github.com/rsuite/rsuite/commit/eb4f9a8f4c84cf30b3521532d95f4dc2490d0699))
+
 # [5.3.0](https://github.com/rsuite/rsuite/compare/5.2.4...5.3.0) (2021-12-10)
 
 ### Bug Fixes

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

@@ -1,6 +1,7 @@
 @import '../../styles/common';
 @import '../../styles/mixins/menu';
 @import 'mixin';
+@import '../../Button/styles/index.less';
 
 //
 // Dropdown menus
@@ -80,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)
@@ -107,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);

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/Nav/styles/index.less

@@ -1,5 +1,6 @@
 @import '../../styles/common';
 @import '../../Ripple/styles/mixins';
+@import '../../Dropdown/styles/index';
 
 //
 // Navs

package/Navbar/styles/index.less

@@ -1,4 +1,5 @@
 @import '../../styles/common';
+@import '../../Dropdown/styles/index';
 
 // NavBar
 // --------------------------------------------------
@@ -59,14 +60,19 @@
   background-color: transparent;
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  > .rs-icon {
+    font-size: 16px;
+    margin-right: 5px;
+  }
 }
 
 // Focus style
 .rs-navbar-brand,
 .rs-navbar-item,
 .rs-navbar-nav > .rs-dropdown-item {
-  outline: 0;
-
   &,
   &:hover,
   &:focus,
@@ -75,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);
@@ -90,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({
@@ -110,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/Radio/styles/index.less

@@ -30,6 +30,12 @@
 
   [type='radio'] {
     opacity: 0;
+    // bring to foreground
+    position: absolute;
+    z-index: 1;
+    width: @radio-width-height;
+    height: @radio-width-height;
+    cursor: pointer;
   }
 
   &::before,

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/Stack/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/Stack",
+  "private": true,
+  "main": "../cjs/Stack/index.js",
+  "module": "../esm/Stack/index.js",
+  "types": "../esm/Stack/index.d.ts"
+}

package/Stack/styles/index.less

@@ -0,0 +1,5 @@
+@import '../../styles/common';
+
+.rs-stack {
+  display: flex;
+}

package/TreePicker/styles/index.less

@@ -13,20 +13,6 @@
   overflow-y: auto;
   flex: 1 1 auto;
 
-  &-drag-node-mover {
-    position: absolute;
-    top: -1000px;
-    color: var(--rs-text-primary);
-    background-color: var(--rs-bg-overlay);
-    display: inline-block;
-    margin: 0;
-    padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-    border-radius: 6px;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
-    z-index: 1060;
-    cursor: move;
-  }
-
   &.rs-tree-virtualized {
     overflow: hidden;
 

package/cjs/@types/common.d.ts

@@ -134,12 +134,12 @@ export interface SVGIcon {
     viewBox: string;
     id: string;
 }
-export interface ItemDataType extends Record<string, any> {
+export interface ItemDataType<T = number | string> extends Record<string, any> {
     label?: string | React.ReactNode;
-    value?: string | number;
+    value?: T;
     groupBy?: string;
-    parent?: ItemDataType;
-    children?: ItemDataType[];
+    parent?: ItemDataType<T>;
+    children?: ItemDataType<T>[];
     loading?: boolean;
 }
 export interface Offset {

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)
   }));
 });