rsuite 5.75.0 → 6.0.0-canary-20241227

package/Progress/styles/index.css

@@ -1,3 +1,8 @@
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
 :root,
 .rs-theme-light {
   --rs-gray-200: #e5e5ea;
@@ -40,27 +45,11 @@
 }
 /* stylelint-disable */
 *[class*='rs-'] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 *[class*='rs-']::before,
 *[class*='rs-']::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-@-webkit-keyframes progress-active {
-  0% {
-    opacity: 0.1;
-    width: 0;
-  }
-  20% {
-    opacity: 0.5;
-    width: 0;
-  }
-  100% {
-    opacity: 0;
-    width: 100%;
-  }
+  box-sizing: border-box;
 }
 @keyframes progress-active {
   0% {
@@ -76,20 +65,6 @@
     width: 100%;
   }
 }
-@-webkit-keyframes progress-active-vertical {
-  0% {
-    opacity: 0.1;
-    height: 0;
-  }
-  20% {
-    opacity: 0.5;
-    height: 0;
-  }
-  100% {
-    opacity: 0;
-    height: 100%;
-  }
-}
 @keyframes progress-active-vertical {
   0% {
     opacity: 0.1;
@@ -129,42 +104,30 @@
   font-size: 16px;
   line-height: 2.25;
   height: 36px;
-  color: #717273;
   color: var(--rs-text-secondary);
 }
 .rs-progress-circle .rs-progress-trail {
-  stroke: #e5e5ea;
   stroke: var(--rs-progress-bg);
 }
 .rs-progress-circle .rs-progress-stroke {
-  stroke: #3498ff;
   stroke: var(--rs-progress-bar);
-  -webkit-transition: stroke-dashoffset 0.3s ease, stroke-dasharray 0.2s ease-in-out, stroke 0.3s;
   transition: stroke-dashoffset 0.3s ease, stroke-dasharray 0.2s ease-in-out, stroke 0.3s;
 }
 .rs-progress-circle-success .rs-progress-circle-info {
-  color: #4caf50;
   color: var(--rs-progress-bar-success);
 }
 .rs-progress-circle-success .rs-progress-stroke {
-  stroke: #4caf50;
   stroke: var(--rs-progress-bar-success);
 }
 .rs-progress-circle-fail .rs-progress-circle-info {
-  color: #f44336;
   color: var(--rs-progress-bar-fail);
 }
 .rs-progress-circle-fail .rs-progress-stroke {
-  stroke: #f44336;
   stroke: var(--rs-progress-bar-fail);
 }
 .rs-progress-line {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   width: 100%;
   padding: 8px 12px;
 }
@@ -181,43 +144,30 @@
   bottom: 0;
   background-color: #fff;
   border-radius: 10px;
-  -webkit-animation: progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
-          animation: progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+  animation: progress-active 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
 }
 .rs-progress-line .rs-progress-info {
   width: 50px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 50px;
-          flex: 0 0 50px;
+  flex: 0 0 50px;
   height: 20px;
   padding-left: 12px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .rs-progress-line-outer {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   border-radius: 5px;
   overflow: hidden;
   vertical-align: middle;
 }
 .rs-progress-line-inner {
-  background: #e5e5ea;
   background: var(--rs-progress-bg);
   border-radius: 5px;
 }
 .rs-progress-line-bg {
-  background-color: #3498ff;
   background-color: var(--rs-progress-bar);
   border-radius: 5px;
-  -webkit-transition: 0.2s ease-in-out;
   transition: 0.2s ease-in-out;
-  -webkit-transition-property: width, background-color;
   transition-property: width, background-color;
 }
 .rs-progress-line-inner,
@@ -225,69 +175,49 @@
   height: 10px;
 }
 .rs-progress-line-success {
-  color: #4caf50;
   color: var(--rs-progress-bar-success);
 }
 .rs-progress-line-success .rs-progress-line-bg {
-  background-color: #4caf50;
   background-color: var(--rs-progress-bar-success);
 }
 .rs-progress-line-fail {
-  color: #f44336;
   color: var(--rs-progress-bar-fail);
 }
 .rs-progress-line-fail .rs-progress-line-bg {
-  background-color: #f44336;
   background-color: var(--rs-progress-bar-fail);
 }
 .rs-progress-line.rs-progress-line-vertical {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-          flex-direction: column-reverse;
+  flex-direction: column-reverse;
   width: auto;
 }
 .rs-progress-line.rs-progress-line-vertical .rs-progress-line-outer {
   width: auto;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
 }
 .rs-progress-line.rs-progress-line-vertical .rs-progress-line-inner {
   min-height: 100px;
   width: 10px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-          flex-direction: column-reverse;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: column-reverse;
+  align-items: center;
   position: relative;
   height: 100%;
 }
 .rs-progress-line.rs-progress-line-vertical .rs-progress-info {
-  -ms-flex-preferred-size: auto;
-      flex-basis: auto;
+  flex-basis: auto;
   padding-left: 0;
   padding-bottom: 12px;
   width: auto;
 }
 .rs-progress-line.rs-progress-line-vertical .rs-progress-line-bg {
   width: 100%;
-  -webkit-transition-property: height, background-color;
   transition-property: height, background-color;
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
+  transform: rotate(180deg);
   position: absolute;
   bottom: 0;
 }
 .rs-progress-line.rs-progress-line-vertical.rs-progress-line-active .rs-progress-line-bg::before {
-  -webkit-animation-name: progress-active-vertical;
-          animation-name: progress-active-vertical;
+  animation-name: progress-active-vertical;
 }
 .rs-progress-icon-success,
 .rs-progress-icon-fail {

package/README.md

@@ -19,13 +19,17 @@ React Suite is a set of React components. It is committed to providing high-qual
 
 ## Supported Platforms
 
-### Browser
+### Browsers support
 
-React Suite supports the latest, stable releases of all major browsers and platforms. IE<=10 is no longer supported since React Suite 5.0. React Suite is designed and implemented for use on modern desktop browsers rather than mobile browsers.
+| ![][edge]<br/>Edge | ![][firefox]<br/>Firefox | ![][chrome]<br/>Chrome | ![][safari]<br/>Safari | ![][electron]<br/>Electron |
+| ------------------ | ------------------------ | ---------------------- | ---------------------- | -------------------------- |
+| Edge               | last 2 versions          | last 2 versions        | last 2 versions        | last 2 versions            |
 
-| IE   | Edge | Firefox | Chrome | Safari |
-| ---- | ---- | ------- | ------ | ------ |
-| >=11 | >=14 | >= 45   | >= 49  | >= 10  |
+[edge]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png
+[firefox]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png
+[chrome]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png
+[safari]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png
+[electron]: https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png
 
 ### Server
 

package/Radio/styles/index.css

@@ -1,3 +1,8 @@
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
 :root,
 .rs-theme-light {
   --rs-gray-0: #fff;
@@ -90,13 +95,11 @@
 }
 /* stylelint-disable */
 *[class*='rs-'] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 *[class*='rs-']::before,
 *[class*='rs-']::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 .rs-radio {
   position: relative;
@@ -113,14 +116,12 @@
   cursor: pointer;
 }
 .rs-radio-inner::before {
-  border-color: #3498ff;
   border-color: var(--rs-checkbox-checked-bg);
 }
 .rs-radio.rs-radio-disabled label {
   cursor: not-allowed;
 }
 .rs-radio-disabled > .rs-radio-checker > label {
-  color: #717273;
   color: var(--rs-text-disabled);
 }
 .rs-radio-inline {
@@ -136,10 +137,7 @@
   margin-left: 0;
 }
 .rs-radio [type='radio']:focus ~ .rs-radio-inner::before {
-  -webkit-box-shadow: 0 0 0 3px rgb(from #3498ff r g b / 25%);
-  -webkit-box-shadow: var(--rs-state-focus-shadow);
-          box-shadow: 0 0 0 3px rgb(from #3498ff r g b / 25%);
-          box-shadow: var(--rs-state-focus-shadow);
+  box-shadow: var(--rs-state-focus-shadow);
 }
 .rs-radio-checker {
   padding-top: 10px;
@@ -185,57 +183,40 @@
   height: 16px;
 }
 .rs-radio-control::before {
-  border: 1px solid #3498ff;
   border: 1px solid var(--rs-radio-checked-bg);
   background-color: transparent;
   border-radius: 50%;
-  -webkit-transform: scale(1);
-          transform: scale(1);
+  transform: scale(1);
   opacity: 0.7;
   visibility: hidden;
-  -webkit-transition: opacity 0.2s linear, -webkit-transform 0.2s linear;
-  transition: opacity 0.2s linear, -webkit-transform 0.2s linear;
   transition: transform 0.2s linear, opacity 0.2s linear;
-  transition: transform 0.2s linear, opacity 0.2s linear, -webkit-transform 0.2s linear;
 }
 .rs-theme-high-contrast .rs-radio-control::before {
-  -webkit-transition: none;
   transition: none;
 }
 .rs-radio-checked .rs-radio-control::before {
-  -webkit-transform: scale(1.5);
-          transform: scale(1.5);
+  transform: scale(1.5);
   opacity: 0;
   visibility: visible;
 }
 .rs-radio-inner::before {
-  border: 1px solid #d9d9d9;
   border: 1px solid var(--rs-radio-border);
   background-color: transparent;
   border-radius: 50%;
-  -webkit-transition: background 0.2s linear, border 0.2s linear, -webkit-box-shadow 0.2s linear;
-  transition: background 0.2s linear, border 0.2s linear, -webkit-box-shadow 0.2s linear;
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
-  transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear;
 }
 .rs-theme-high-contrast .rs-radio-inner::before {
-  -webkit-transition: none;
   transition: none;
 }
 .rs-radio:hover .rs-radio-inner::before {
-  border-color: #3498ff;
   border-color: var(--rs-radio-checked-bg);
 }
 .rs-radio.rs-radio-disabled .rs-radio-inner::before {
-  border-color: #f7f7fa;
   border-color: var(--rs-radio-disabled-bg);
-  background-color: #f7f7fa;
   background-color: var(--rs-radio-disabled-bg);
 }
 .rs-radio.rs-radio-checked .rs-radio-inner::before {
-  border-color: #3498ff;
   border-color: var(--rs-radio-checked-bg);
-  background-color: #3498ff;
   background-color: var(--rs-radio-checked-bg);
 }
 .rs-radio.rs-radio-disabled.rs-radio-checked .rs-radio-inner::before {
@@ -244,123 +225,88 @@
 .rs-radio-inner::after {
   width: 6px;
   height: 6px;
-  background-color: #fff;
   background-color: var(--rs-radio-marker);
   margin-top: 5px;
   margin-left: 5px;
   border-radius: 50%;
   opacity: 0;
-  -webkit-transform: scale(0);
-          transform: scale(0);
-  -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
-  transition: opacity 0.2s ease-in, -webkit-transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
+  transform: scale(0);
   transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
-  transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46), -webkit-transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
 }
 .rs-theme-high-contrast .rs-radio-inner::after {
-  -webkit-transition: none;
   transition: none;
 }
 .rs-radio-checked .rs-radio-inner::after {
-  -webkit-transform: scale(1);
-          transform: scale(1);
+  transform: scale(1);
   opacity: 1;
 }
 .rs-radio-red .rs-radio-control::before {
-  border-color: #f44336;
   border-color: var(--rs-red-500);
 }
 .rs-radio-red label:hover .rs-radio-inner::before {
-  border-color: #f44336;
   border-color: var(--rs-red-500);
 }
 .rs-radio-red.rs-radio-checked .rs-radio-inner::before {
-  border-color: #f44336;
   border-color: var(--rs-red-500);
-  background-color: #f44336;
   background-color: var(--rs-red-500);
 }
 .rs-radio-orange .rs-radio-control::before {
-  border-color: #fa8900;
   border-color: var(--rs-orange-500);
 }
 .rs-radio-orange label:hover .rs-radio-inner::before {
-  border-color: #fa8900;
   border-color: var(--rs-orange-500);
 }
 .rs-radio-orange.rs-radio-checked .rs-radio-inner::before {
-  border-color: #fa8900;
   border-color: var(--rs-orange-500);
-  background-color: #fa8900;
   background-color: var(--rs-orange-500);
 }
 .rs-radio-yellow .rs-radio-control::before {
-  border-color: #ffb300;
   border-color: var(--rs-yellow-500);
 }
 .rs-radio-yellow label:hover .rs-radio-inner::before {
-  border-color: #ffb300;
   border-color: var(--rs-yellow-500);
 }
 .rs-radio-yellow.rs-radio-checked .rs-radio-inner::before {
-  border-color: #ffb300;
   border-color: var(--rs-yellow-500);
-  background-color: #ffb300;
   background-color: var(--rs-yellow-500);
 }
 .rs-radio-green .rs-radio-control::before {
-  border-color: #4caf50;
   border-color: var(--rs-green-500);
 }
 .rs-radio-green label:hover .rs-radio-inner::before {
-  border-color: #4caf50;
   border-color: var(--rs-green-500);
 }
 .rs-radio-green.rs-radio-checked .rs-radio-inner::before {
-  border-color: #4caf50;
   border-color: var(--rs-green-500);
-  background-color: #4caf50;
   background-color: var(--rs-green-500);
 }
 .rs-radio-cyan .rs-radio-control::before {
-  border-color: #00bcd4;
   border-color: var(--rs-cyan-500);
 }
 .rs-radio-cyan label:hover .rs-radio-inner::before {
-  border-color: #00bcd4;
   border-color: var(--rs-cyan-500);
 }
 .rs-radio-cyan.rs-radio-checked .rs-radio-inner::before {
-  border-color: #00bcd4;
   border-color: var(--rs-cyan-500);
-  background-color: #00bcd4;
   background-color: var(--rs-cyan-500);
 }
 .rs-radio-blue .rs-radio-control::before {
-  border-color: #2196f3;
   border-color: var(--rs-blue-500);
 }
 .rs-radio-blue label:hover .rs-radio-inner::before {
-  border-color: #2196f3;
   border-color: var(--rs-blue-500);
 }
 .rs-radio-blue.rs-radio-checked .rs-radio-inner::before {
-  border-color: #2196f3;
   border-color: var(--rs-blue-500);
-  background-color: #2196f3;
   background-color: var(--rs-blue-500);
 }
 .rs-radio-violet .rs-radio-control::before {
-  border-color: #673ab7;
   border-color: var(--rs-violet-500);
 }
 .rs-radio-violet label:hover .rs-radio-inner::before {
-  border-color: #673ab7;
   border-color: var(--rs-violet-500);
 }
 .rs-radio-violet.rs-radio-checked .rs-radio-inner::before {
-  border-color: #673ab7;
   border-color: var(--rs-violet-500);
-  background-color: #673ab7;
   background-color: var(--rs-violet-500);
 }

package/RadioGroup/styles/index.css

@@ -1,3 +1,8 @@
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
 :root,
 .rs-theme-light {
   --rs-gray-50: #f7f7fa;
@@ -40,39 +45,25 @@
 }
 /* stylelint-disable */
 *[class*='rs-'] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 *[class*='rs-']::before,
 *[class*='rs-']::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 .rs-radio-group {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 .rs-radio-group > .rs-radio {
   margin-left: -10px;
 }
 .rs-radio-group-inline {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
 }
 .rs-radio-group-picker {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  color: #343434;
   color: var(--rs-text-primary);
-  border: 1px solid #e5e5ea;
   border: 1px solid var(--rs-border-primary);
   border-radius: 6px;
 }
@@ -99,28 +90,22 @@
   font-size: 14px;
   line-height: 1.42857143;
   border-radius: 0;
-  color: #717273;
   color: var(--rs-text-secondary);
   background: none;
-  -webkit-transition: color 0.3s linear;
   transition: color 0.3s linear;
   padding: 7px 0 5px;
   border-bottom: 2px solid transparent;
 }
 .rs-theme-high-contrast .rs-radio-group-picker .rs-radio-checker > label {
-  -webkit-transition: none;
   transition: none;
 }
 .rs-radio-group-picker .rs-radio-checker > label:hover,
 .rs-radio-group-picker .rs-radio-checker > label:active {
-  color: #1675e0;
   color: var(--rs-text-active);
   background: none;
 }
 .rs-radio-group-picker .rs-radio-checked .rs-radio-checker > label {
-  color: #1675e0;
   color: var(--rs-text-active);
-  border-color: #1675e0;
   border-color: var(--rs-text-active);
 }
 .rs-radio-group-picker .rs-radio-disabled .rs-radio-checker {
@@ -128,6 +113,5 @@
   cursor: not-allowed;
 }
 .rs-radio-group-picker .rs-radio-disabled:not(.rs-radio-checked) .rs-radio-checker > label {
-  color: #717273;
   color: var(--rs-text-secondary);
 }

package/RadioTile/styles/index.css

@@ -1,3 +1,8 @@
+/**
+  * Map mixin
+  * @param {string} @size-name - The size name
+  * @param {string} @suffix - The suffix
+  */
 :root,
 .rs-theme-light {
   --rs-gray-200: #e5e5ea;
@@ -50,18 +55,15 @@
 }
 /* stylelint-disable */
 *[class*='rs-'] {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 *[class*='rs-']::before,
 *[class*='rs-']::after {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 .rs-radio-tile {
   border-radius: 6px;
   overflow: hidden;
-  border: 2px solid #d9d9d9;
   border: 2px solid var(--rs-radio-tile-border);
   padding: 10px;
   position: relative;
@@ -71,11 +73,9 @@
   font-weight: bold;
 }
 .rs-radio-tile-content {
-  color: #717273;
   color: var(--rs-text-secondary);
 }
 .rs-radio-tile-mark {
-  background: #3498ff;
   background: var(--rs-radio-tile-checked-color);
   border-bottom-left-radius: 50%;
   height: 48px;
@@ -91,28 +91,23 @@
   font-size: 16px;
   top: 25px;
   left: 7px;
-  color: #fff;
   color: var(--rs-radio-tile-checked-mark-color);
 }
 .rs-radio-tile-checked .rs-radio-tile-mark {
   opacity: 1;
 }
 .rs-radio-tile-checked.rs-radio-tile-disabled {
-  border-color: #a6d7ff;
   border-color: var(--rs-radio-tile-checked-disabled-color);
 }
 .rs-radio-tile-checked.rs-radio-tile-disabled .rs-radio-tile-mark {
-  background-color: #a6d7ff;
   background-color: var(--rs-radio-tile-checked-disabled-color);
 }
 .rs-radio-tile-checked,
 .rs-radio-tile:hover:not(.rs-radio-tile-disabled) {
-  border: 2px solid #3498ff;
   border: 2px solid var(--rs-radio-tile-checked-color);
 }
 .rs-radio-tile-disabled,
 .rs-radio-tile-disabled .rs-radio-tile-content {
-  color: #717273;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
 }
@@ -123,6 +118,5 @@
   position: absolute;
 }
 .rs-radio-tile-icon {
-  font-size: 32px;
   font-size: var(--rs-radio-tile-icon-size);
 }