rsuite 5.0.0-beta.5 → 5.0.0

package/Animation/styles/index.less

@@ -3,32 +3,32 @@
 @import 'animation';
 
 // Slide
-.slide-out {
+.rs-anim-slide-out {
   .animation-common(cubic-bezier(0.4, 0, 1, 1)); //Fast out
 }
 
-.slide-in {
+.rs-anim-slide-in {
   .animation-common(ease-in-out);
 }
 
-.right {
+.rs-anim-right {
   .slide-animation-setting(slideInRight, slideOutRight);
 }
 
-.left {
+.rs-anim-left {
   .slide-animation-setting(slideInLeft, slideOutLeft);
 }
 
-.top {
+.rs-anim-top {
   .slide-animation-setting(slideInTop, slideOutTop);
 }
 
-.bottom {
+.rs-anim-bottom {
   .slide-animation-setting(slideInBottom, slideOutBottom);
 }
 
 // Bounce
-.bounce-in {
+.rs-anim-bounce-in {
   animation-name: bounceIn;
   .animation-common(cubic-bezier(0.68, -0.55, 0.27, 1.55)); // Ease in out
 
@@ -45,7 +45,7 @@
   }
 }
 
-.bounce-out {
+.rs-anim-bounce-out {
   animation-name: bounceOut;
   .animation-common(cubic-bezier(0.4, 0, 1, 1)); //Fast out
 
@@ -62,36 +62,36 @@
   }
 }
 
-.fade {
+.rs-anim-fade {
   opacity: 0;
   transition: opacity 0.15s linear;
   pointer-events: none;
 
-  &.in {
+  &.rs-anim-in {
     opacity: 1;
     pointer-events: unset;
   }
 }
 
-.collapse {
+.rs-anim-collapse {
   display: none;
 
-  &.in {
+  &.rs-anim-in {
     display: block;
   }
 
-  tr&.in {
+  tr&.rs-anim-in {
     display: table-row;
   }
 
-  tbody&.in {
+  tbody&.rs-anim-in {
     display: table-row-group;
   }
 }
 
-.collapsing {
+.rs-anim-collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
-  transition: height 0.35s ease, visibility 0.35s ease;
+  transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
 }

package/Animation/styles/mixin.less

@@ -5,11 +5,11 @@
 }
 
 .slide-animation-setting(@move-in-animation-name,@move-out-animation-name) {
-  &.slide-in {
+  &.rs-anim-slide-in {
     animation-name: @move-in-animation-name;
   }
 
-  &.slide-out {
+  &.rs-anim-slide-out {
     animation-name: @move-out-animation-name;
   }
 }

package/Button/styles/index.less

@@ -18,13 +18,17 @@
   white-space: nowrap;
   transition: @btn-transition;
   // Reset border style in all browser
-  border: none;
+  border: var(--rs-btn-default-border, none);
   user-select: none;
   text-decoration: none;
   color: var(--rs-btn-default-text);
   background-color: var(--rs-btn-default-bg);
   border-radius: 6px;
 
+  .high-contrast-mode({
+    transition: none;
+  });
+
   .rs-btn-md();
 
   &:focus {
@@ -33,6 +37,7 @@
   }
 
   .button-activated({
+    color: var(--rs-btn-default-hover-text);
     background-color: var(--rs-btn-default-hover-bg);
   });
 
@@ -57,6 +62,7 @@
 .rs-btn-primary {
   color: var(--rs-btn-primary-text);
   background-color: var(--rs-btn-primary-bg);
+  border: none;
 
   .button-activated({
     color: var(--rs-btn-primary-text);
@@ -79,6 +85,7 @@
 .rs-btn-subtle {
   color: var(--rs-btn-subtle-text);
   background-color: transparent;
+  border: none;
 
   .button-activated({
     color: var(--rs-btn-subtle-hover-text);
@@ -100,6 +107,7 @@
 .rs-btn-link {
   color: var(--rs-btn-link-text);
   background-color: transparent;
+  border: none;
 
   .button-activated({
     color: var(--rs-btn-link-hover-text);
@@ -191,6 +199,25 @@ each(@spectrum, .(@color) {
       --rs-btn-link-hover-text: @C400;
       --rs-btn-link-active-text: @C200;
     });
+
+    .high-contrast-mode({
+      --rs-btn-primary-bg: @C700;
+      --rs-btn-primary-hover-bg: @C600;
+      --rs-btn-primary-active-bg: @C400;
+      --rs-btn-subtle-hover-bg: @C600;
+      --rs-btn-subtle-hover-text: var(--rs-gray-900);
+      --rs-btn-subtle-active-bg: @C400;
+      --rs-btn-subtle-active-text: var(--rs-gray-900);
+      --rs-btn-ghost-border: @C500;
+      --rs-btn-ghost-text: @C500;
+      --rs-btn-ghost-hover-border: @C400;
+      --rs-btn-ghost-hover-text: @C400;
+      --rs-btn-ghost-active-border: @C200;
+      --rs-btn-ghost-active-text: @C200;
+      --rs-btn-link-text: @C500;
+      --rs-btn-link-hover-text: @C400;
+      --rs-btn-link-active-text: @C200;
+    });
   }
 });
 
@@ -260,6 +287,10 @@ each(@spectrum, .(@color) {
 
       .rs-btn-primary& {
         border-color: rgba(248, 247, 250, 0.3);
+
+        .high-contrast-mode({
+          border-color: var(--rs-loader-ring-inverse);
+        });
       }
     }
 
@@ -271,6 +302,10 @@ each(@spectrum, .(@color) {
 
       .rs-btn-primary& {
         border-top-color: #fff;
+
+        .high-contrast-mode({
+          border-top-color: var(--rs-loader-rotor-inverse);
+        });
       }
     }
   }

package/Button/styles/mixin.less

@@ -1,3 +1,4 @@
+@import '../../styles/mixins/color-modes';
 // States
 
 .button-activated(@rules) {
@@ -18,6 +19,10 @@
   &:disabled,
   &.rs-btn-disabled {
     @rules();
+
+    .high-contrast-mode({
+      opacity: 0.5;
+    });
   }
 }
 
@@ -65,6 +70,7 @@
 
       > .rs-icon {
         left: 0;
+        border-right: var(--rs-btn-default-border, none);
       }
     }
 
@@ -73,6 +79,7 @@
 
       > .rs-icon {
         right: 0;
+        border-left: var(--rs-btn-default-border, none);
       }
     }
   }
@@ -117,4 +124,3 @@
     @icon-size: 12px;
   );
 }
-

package/CHANGELOG.md

@@ -1,17 +1,60 @@
-<a name="5.0.0-beta.5"></a>
-# [5.0.0-beta.5](https://github.com/rsuite/rsuite/compare/v5.0.0-beta.4...v5.0.0-beta.5) (2021-08-18)
+<a name="5.0.0-beta.8"></a>
+# [5.0.0-beta.8](https://github.com/rsuite/rsuite/compare/v5.0.0-beta.7...v5.0.0-beta.8) (2021-09-17)
+
+
+### Bug Fixes
+
+* **date-picker:** fix calendar header wrapping ([#1907](https://github.com/rsuite/rsuite/issues/1907)) ([4cfc3af](https://github.com/rsuite/rsuite/commit/4cfc3af))
+* **navbar,dropdown:** unexpected focus submenu ([#1908](https://github.com/rsuite/rsuite/issues/1908)) ([697aa3e](https://github.com/rsuite/rsuite/commit/697aa3e))
+
+
+### Features
+
+* **table:** support `rowSpan` on `<Table.Column>` ([#1909](https://github.com/rsuite/rsuite/issues/1909)) ([34a3a1f](https://github.com/rsuite/rsuite/commit/34a3a1f))
+
 
 
+<a name="5.0.0-beta.7"></a>
+
+# [5.0.0-beta.7](https://github.com/rsuite/rsuite/compare/v5.0.0-beta.6...v5.0.0-beta.7) (2021-09-09)
+
 ### Bug Fixes
 
-* **date-picker:** fix DatePicker cannot be used as controlled ([#1844](https://github.com/rsuite/rsuite/issues/1844)) ([3d6c035](https://github.com/rsuite/rsuite/commit/3d6c035)), closes [#1842](https://github.com/rsuite/rsuite/issues/1842)
+- **tag-input:** adjust default value of the trigger to `Enter` ([#1886](https://github.com/rsuite/rsuite/issues/1886)) ([4405b6b](https://github.com/rsuite/rsuite/commit/4405b6b))
+
+### Features
+
+- **carousel:** support `onSelect`, `onSlideEnd`, `onSlideStart` on `<Carousel>` ([#1889](https://github.com/rsuite/rsuite/issues/1889)) ([91e7b98](https://github.com/rsuite/rsuite/commit/91e7b98))
+- **date-picker:** remove `inline` on `<DatePicker>` ([#1892](https://github.com/rsuite/rsuite/issues/1892)) ([83a77df](https://github.com/rsuite/rsuite/commit/83a77df))
+- **theme:** added support for high-contrast theme ([#1828](https://github.com/rsuite/rsuite/pull/1828))
 
+<a name="5.0.0-beta.6"></a>
+
+# [5.0.0-beta.6](https://github.com/rsuite/rsuite/compare/v5.0.0-beta.5...v5.0.0-beta.6) (2021-09-06)
+
+### Bug Fixes
+
+- **drawer:** fix incorrect styles in drawer title and drawer actions ([#1874](https://github.com/rsuite/rsuite/issues/1874)) ([747a5f1](https://github.com/rsuite/rsuite/commit/747a5f1))
+- **list-item:** fix unable to set HTML event on List.Item ([#1863](https://github.com/rsuite/rsuite/issues/1863)) ([07578a2](https://github.com/rsuite/rsuite/commit/07578a2)), closes [#1859](https://github.com/rsuite/rsuite/issues/1859)
+- **sidenav:** fix incorrect indent before dropdown toggle ([#1856](https://github.com/rsuite/rsuite/issues/1856)) ([048da73](https://github.com/rsuite/rsuite/commit/048da73))
 
 ### Features
 
-* **dropdown:** support `renderToggle` on `<Dropdown>` ([#1843](https://github.com/rsuite/rsuite/issues/1843)) ([99c1925](https://github.com/rsuite/rsuite/commit/99c1925))
+- **tag-input:** add support for TagInput ([#1848](https://github.com/rsuite/rsuite/issues/1848)) ([eb66602](https://github.com/rsuite/rsuite/commit/eb66602)), closes [#1265](https://github.com/rsuite/rsuite/issues/1265)
+- **tag-picker:** support `trigger` on `<TagPicker>` ([#1847](https://github.com/rsuite/rsuite/issues/1847)) ([8ace065](https://github.com/rsuite/rsuite/commit/8ace065))
+- **uploader:** support `disableMultipart` on `<Uploader>` ([#1862](https://github.com/rsuite/rsuite/issues/1862)) ([a6d7dcb](https://github.com/rsuite/rsuite/commit/a6d7dcb))
+
+<a name="5.0.0-beta.5"></a>
+
+# [5.0.0-beta.5](https://github.com/rsuite/rsuite/compare/v5.0.0-beta.4...v5.0.0-beta.5) (2021-08-18)
 
+### Bug Fixes
+
+- **date-picker:** fix DatePicker cannot be used as controlled ([#1844](https://github.com/rsuite/rsuite/issues/1844)) ([3d6c035](https://github.com/rsuite/rsuite/commit/3d6c035)), closes [#1842](https://github.com/rsuite/rsuite/issues/1842)
+
+### Features
 
+- **dropdown:** support `renderToggle` on `<Dropdown>` ([#1843](https://github.com/rsuite/rsuite/issues/1843)) ([99c1925](https://github.com/rsuite/rsuite/commit/99c1925))
 
 <a name="5.0.0-beta.4"></a>
 

package/Calendar/styles/index.less

@@ -590,7 +590,13 @@
 
     &&-active {
       background-color: var(--rs-bg-active);
-      color: #fff;
+      color: var(--rs-calendar-date-selected-text);
+
+      .high-contrast-mode({
+        &:hover {
+          .listbox-option-active();
+        }
+      });
     }
 
     &&-disabled {

package/Checkbox/styles/index.less

@@ -4,7 +4,7 @@
 .rs-checkbox {
   .radio-checkbox-common();
 
-  [type='checkbox']:focus ~ .rs-checkbox-inner::before {
+  [type='checkbox']:focus-visible ~ .rs-checkbox-inner::before {
     box-shadow: var(--rs-state-focus-shadow);
   }
 }
@@ -37,6 +37,10 @@
     transform: rotate(45deg) scale(0);
     transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
 
+    .high-contrast-mode({
+      transition: none;
+    });
+
     .rs-checkbox-checked &,
     .rs-checkbox-indeterminate & {
       border: solid var(--rs-checkbox-icon);
@@ -95,6 +99,10 @@
     visibility: hidden;
     transition: transform 0.2s linear, opacity 0.2s linear;
 
+    .high-contrast-mode({
+      transition: none;
+    });
+
     .rs-checkbox-checked & {
       transform: scale(1.5);
       opacity: 0;
@@ -116,7 +124,11 @@
 
     transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
 
-    .rs-checkbox-checker:hover & {
+    .high-contrast-mode({
+      transition: none;
+    });
+
+    label:hover & {
       border-color: var(--rs-checkbox-checked-bg);
     }
 
@@ -134,6 +146,10 @@
     .rs-checkbox-disabled.rs-checkbox-checked &,
     .rs-checkbox-disabled.rs-checkbox-indeterminate & {
       opacity: 0.3;
+
+      .high-contrast-mode({
+        opacity: 0.5;
+      });
     }
   }
 }

package/DatePicker/styles/index.less

@@ -55,7 +55,7 @@
   }
 
   .rs-calendar {
-    width: @calendar-width;
+    min-width: @calendar-width;
     // To make sure <Calendar/> horizontal align at center when toolbar  width is so long.
     display: block;
     margin: 0 auto;
@@ -65,13 +65,17 @@
         @datepicker-calendar-cell-gap-x * 7 + 30px * 8 + @datepicker-calendar-padding-x * 2
       );
 
-      width: @calendar-width;
+      min-width: @calendar-width;
     }
 
     &-header {
       width: 100%;
     }
 
+    &-table {
+      width: unset;
+    }
+
     .rs-calendar-month-dropdown-cell-content,
     .rs-calendar-table-cell-content {
       width: @calendar-in-menu-content-side-length;

package/Drawer/styles/index.less

@@ -127,6 +127,10 @@
   outline: 0;
   width: 100%;
   height: 100%;
+
+  .high-contrast-mode({
+    background-color: var(--rs-drawer-bg);
+  });
 }
 
 .rs-drawer-backdrop {
@@ -139,12 +143,12 @@
   background-color: var(--rs-bg-backdrop);
 
   // Fade for backdrop
-  &.fade {
+  &.rs-anim-fade {
     opacity: 0;
     transition: opacity 0.3s ease-in;
   }
 
-  &.in {
+  &.rs-anim-in {
     opacity: 1;
   }
 }
@@ -183,6 +187,11 @@
   flex-shrink: 0;
   text-align: right; // right align buttons
   border-top: none;
+  margin-left: auto;
+
+  .rs-drawer-title ~ & {
+    margin-left: 10px;
+  }
 
   // Properly space out buttons
   .rs-btn + .rs-btn {

package/Drawer/styles/mixin.less

@@ -13,11 +13,11 @@
 }
 
 .drawer-animation-setting(@move-in-animation-name,@move-out-animation-name) {
-  &.slide-out {
+  &.rs-slide-out {
     animation-name: @move-out-animation-name;
   }
 
-  &.slide-in {
+  &.rs-slide-in {
     animation-name: @move-in-animation-name;
   }
 }

package/Dropdown/styles/index.less

@@ -107,6 +107,10 @@
     z-index: @zindex-dropdown + 1;
     float: left;
     box-shadow: var(--rs-dropdown-shadow);
+
+    .high-contrast-mode({
+      border: 1px solid var(--rs-border-primary);
+    });
   }
 
   &[hidden] {

package/Form/styles/mixin.less

@@ -1,3 +1,5 @@
+@import '../../styles/mixins/color-modes';
+
 .default-input() {
   display: block;
   width: 100%;
@@ -9,6 +11,10 @@
   border-radius: @border-radius;
   .input-md();
 
+  .high-contrast-mode({
+    transition: none;
+  });
+
   // Placeholder
   &::placeholder {
     color: var(--rs-text-secondary);

package/InputGroup/styles/index.less

@@ -18,6 +18,10 @@
   color: var(--rs-text-primary);
   border: 1px solid var(--rs-border-primary);
 
+  .high-contrast-mode({
+    transition: none;
+  });
+
   &:not(.rs-input-group-disabled):hover,
   &:not(.rs-input-group-disabled).rs-input-group-focus,
   &:focus-within {

package/Message/styles/index.less

@@ -117,6 +117,10 @@
     var(--rs-message-success-text);
     var(--rs-message-success-icon);
   );
+
+  .high-contrast-mode({
+    border: 1px solid var(--rs-message-success-border);
+  });
 }
 
 .rs-message-info {
@@ -126,6 +130,10 @@
     var(--rs-message-info-text);
     var(--rs-message-info-icon);
   );
+
+  .high-contrast-mode({
+    border: 1px solid var(--rs-message-info-border);
+  });
 }
 
 .rs-message-warning {
@@ -135,6 +143,10 @@
     var(--rs-message-warning-text);
     var(--rs-message-warning-icon);
   );
+
+  .high-contrast-mode({
+    border: 1px solid var(--rs-message-warning-border);
+  });
 }
 
 .rs-message-error {
@@ -144,4 +156,8 @@
     var(--rs-message-error-text);
     var(--rs-message-error-icon);
   );
+
+  .high-contrast-mode({
+    border: 1px solid var(--rs-message-error-border);
+  });
 }

package/Modal/styles/index.less

@@ -63,6 +63,7 @@
 .rs-modal-content {
   position: relative;
   background-color: var(--rs-bg-overlay);
+  border: var(--rs-modal-border, none);
   border-radius: @modal-border-radius;
   // Remove focus outline from opened modal
   outline: 0;
@@ -80,12 +81,12 @@
   background-color: var(--rs-bg-backdrop);
 
   // Fade for backdrop
-  &.fade {
+  &.rs-anim-fade {
     opacity: 0;
     transition: opacity 0.3s ease-in;
   }
 
-  &.in {
+  &.rs-anim-in {
     opacity: 1;
   }
 }

package/Nav/styles/index.less

@@ -37,20 +37,32 @@
   outline: none;
   .reset-link-text-decoration(none);
 
+  .high-contrast-mode({
+    transition: none;
+  });
+
   &:hover,
   &:focus,
   &&-focus {
     color: var(--rs-navs-text-hover);
+
+    .high-contrast-mode({
+      text-decoration: underline;
+    });
   }
 
   &:focus-visible {
-    .focus-ring();
+    .focus-ring(slim);
 
-    z-index: 1;
+    z-index: 2;
   }
 
   &:active {
     color: var(--rs-navs-text-active);
+
+    .high-contrast-mode({
+      text-decoration: underline;
+    });
   }
 
   &.rs-nav-item-disabled {
@@ -63,6 +75,10 @@
     position: relative;
     color: var(--rs-navs-selected);
     z-index: 1;
+
+    .high-contrast-mode({
+      text-decoration: underline;
+    });
   }
 
   > .rs-icon {