rsuite 5.5.0 → 5.5.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [5.5.1](https://github.com/rsuite/rsuite/compare/v5.5.0...v5.5.1) (2022-01-21)
+
+### Bug Fixes
+
+- **Carousel:** add a flex-wrap property on toolbar buttons ([#2302](https://github.com/rsuite/rsuite/issues/2302)) ([a9a9113](https://github.com/rsuite/rsuite/commit/a9a911378c4aaeba43233dd3acdc05913a9bf6ae))
+- **CheckTreePicker:** fix CheckTreePicker label style ([#2304](https://github.com/rsuite/rsuite/issues/2304)) ([07eb5ac](https://github.com/rsuite/rsuite/commit/07eb5acd4e8283529619ad2b4d6003b0c4f8614d))
+- **DateRangePicker:** fix month not selectable on calendar ([#2312](https://github.com/rsuite/rsuite/issues/2312)) ([5199845](https://github.com/rsuite/rsuite/commit/5199845ee435e923c807da5e0813f4ba06a86798))
+- **Sidenav:** hide focus ring when interacting with mouse ([#2311](https://github.com/rsuite/rsuite/issues/2311)) ([9413bc9](https://github.com/rsuite/rsuite/commit/9413bc9a48fb8a3f915cc811b3392ba4e65b0b70))
+
+### Performance Improvements
+
+- Responsive for small screen ([#2293](https://github.com/rsuite/rsuite/issues/2293)) ([cadc42e](https://github.com/rsuite/rsuite/commit/cadc42e39baee174ff7d5577ea933cb471ef5bd0))
+
 # [5.5.0](https://github.com/rsuite/rsuite/compare/v5.4.4...v5.5.0) (2022-01-13)
 
 ### Bug Fixes

package/Carousel/styles/index.less

@@ -53,6 +53,7 @@
 
     > ul {
       display: flex;
+      flex-wrap: wrap;
       list-style: none;
       margin: 0;
       padding: 0;

package/CheckTreePicker/styles/index.less

@@ -32,8 +32,8 @@
       margin: 0;
       //padding-left: 16px;
       padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-      //text gap + checkbox space
-      padding-left: 58px; // 10px + 36px + 12px
+      //text gap + checkbox space + label gap
+      padding-left: 50px; // 10px + 36px + 4px
 
       &::before {
         content: '';
@@ -44,7 +44,7 @@
 
         height: 100%;
         top: 0;
-        margin-left: -58px; // 10px + 36px + 12px
+        margin-left: -52px; // 10px + 36px + 6px
       }
     }
 
@@ -57,11 +57,11 @@
 // Only has the first level
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
   > label {
-    padding-left: 34px; //text gap + checkbox space
+    padding-left: 32px; //text gap + checkbox space
 
     &::before {
       width: 28px;
-      margin-left: -36px;
+      margin-left: -34px;
     }
   }
 

package/Modal/styles/mixin.less

@@ -1,3 +1,4 @@
 .content-width(@width) {
   width: @width;
+  max-width: calc(100% - 10px);
 }

package/Sidenav/styles/index.less

@@ -137,7 +137,7 @@
 
     // Sidenav is usually placed by the left/right edge of the page
     // thus use an inset focus ring to prevent overflow clipping
-    &:focus {
+    &:focus-visible {
       .focus-ring(inset);
     }
 
@@ -337,7 +337,7 @@
     // supplement padding
     padding-left: @sidenav-default-width;
 
-    &:focus {
+    &:focus-visible {
       .focus-ring();
 
       .high-contrast-mode({

package/cjs/DateRangePicker/Calendar.js

@@ -114,22 +114,8 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
-    var after;
-
-    if (disabledDate !== null && disabledDate !== void 0 && disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
-      return true;
-    }
-
-    if (showOneCalendar) return false;
-
-    if (index === 1) {
-      after = (0, _dateUtils.isAfter)(date, calendarDate[0]);
-      return !after;
-    }
-
-    after = (0, _dateUtils.isAfter)(calendarDate[1], date);
-    return !after;
-  }, [calendarDate, disabledDate, index, showOneCalendar, value]);
+    return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);
+  }, [disabledDate, value]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     format: format,
     calendarState: calendarState,

package/dist/rsuite-rtl.css

@@ -3529,6 +3529,8 @@ tbody.rs-anim-collapse.rs-anim-in {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -4159,7 +4161,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   position: relative;
   margin: 0;
   padding: 8px 12px;
-  padding-right: 58px;
+  padding-right: 50px;
 }
 .rs-check-tree .rs-check-item .rs-checkbox-checker > label::before {
   content: '';
@@ -4167,17 +4169,17 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   width: 46px;
   height: 100%;
   top: 0;
-  margin-right: -58px;
+  margin-right: -52px;
 }
 .rs-check-tree .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
   right: 20px;
 }
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label {
-  padding-right: 34px;
+  padding-right: 32px;
 }
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label::before {
   width: 28px;
-  margin-right: -36px;
+  margin-right: -34px;
 }
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
   right: 0;
@@ -8753,18 +8755,23 @@ textarea.rs-picker-search-input {
 }
 .rs-modal-lg {
   width: 968px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-md {
   width: 800px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-sm {
   width: 600px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-xs {
   width: 400px;
+  max-width: calc(100% - 10px);
 }
 .rs-modal-full {
   width: calc(100% - 120px);
+  max-width: calc(100% - 10px);
 }
 .rs-modal-shake .rs-modal-dialog {
   -webkit-animation: 0.3s linear shakeHead;
@@ -12594,14 +12601,14 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   width: 100%;
   white-space: normal;
 }
-.rs-sidenav-nav > .rs-sidenav-item:focus,
-.rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-sidenav-nav > .rs-sidenav-item:focus-visible,
+.rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline: 3px solid rgba(52, 152, 255, 0.25);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
 }
-.rs-theme-high-contrast .rs-sidenav-nav > .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-sidenav-nav > .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-sidenav-nav > .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline-offset: 2px;
 }
 .rs-sidenav-nav > .rs-sidenav-item > .rs-icon:not(.rs-dropdown-toggle-caret),
@@ -12823,24 +12830,24 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   height: 50px;
   padding-right: 56px;
 }
-.rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline: 3px solid rgba(52, 152, 255, 0.25);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline-offset: 2px;
 }
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline: 3px solid rgba(52, 152, 255, 0.25);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
   outline-width: 2px;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus {
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-sidenav-item:focus-visible,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-sidenav-collapse-out .rs-dropdown .rs-dropdown-toggle:focus-visible {
   outline-offset: 2px;
 }
 .rs-sidenav-collapse-out .rs-dropdown-item {