rsuite 5.57.0 → 5.58.0

package/Dropdown/styles/index.css

@@ -1158,12 +1158,6 @@
   display: inline-block;
   vertical-align: middle;
 }
-.rs-dropdown .rs-btn > .rs-dropdown-toggle-icon {
-  margin-right: 6px;
-}
-.rs-dropdown .rs-btn > .rs-dropdown-toggle-caret {
-  margin-left: 4px;
-}
 .rs-dropdown-disabled .rs-dropdown-toggle.rs-btn {
   cursor: not-allowed !important;
   -webkit-box-shadow: none;
@@ -1227,6 +1221,13 @@
   z-index: 5;
   padding-right: 32px;
   display: inline-block;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 6px;
 }
 .rs-dropdown-toggle.rs-dropdown-toggle-no-caret {
   padding-right: 12px;
@@ -1267,7 +1268,14 @@
   display: none;
 }
 .rs-dropdown-item {
-  display: block;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  gap: 6px;
   padding: 8px 12px;
   clear: both;
   font-weight: normal;
@@ -1283,10 +1291,19 @@
 .rs-dropdown-item:active {
   text-decoration: none;
 }
+.rs-dropdown-item-content {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.rs-dropdown-item .rs-dropdown-item-shortcut {
+  -webkit-margin-start: 20px;
+          margin-inline-start: 20px;
+  border: none;
+}
 .rs-dropdown-item > .rs-icon {
   width: 14px;
   text-align: center;
-  margin-right: 6px;
 }
 .rs-dropdown-item.rs-dropdown-item-active {
   outline: 0;
@@ -1300,6 +1317,12 @@
   background-color: #f2faff;
   background-color: var(--rs-dropdown-item-bg-active);
 }
+.rs-dropdown-item.rs-dropdown-item-active .rs-text,
+.rs-dropdown-item.rs-dropdown-item-active:hover .rs-text,
+.rs-dropdown-item.rs-dropdown-item-active:focus .rs-text {
+  color: #1675e0;
+  color: var(--rs-dropdown-item-text-active);
+}
 .rs-dropdown-item:focus-visible,
 .rs-dropdown-item.rs-dropdown-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
@@ -1322,6 +1345,10 @@
   cursor: not-allowed;
   pointer-events: none;
 }
+.rs-dropdown-item-disabled .rs-text {
+  color: #c5c6c7;
+  color: var(--rs-text-disabled);
+}
 .rs-dropdown-item-disabled:hover,
 .rs-dropdown-item-disabled:focus {
   text-decoration: none;

package/Dropdown/styles/index.less

@@ -18,17 +18,6 @@
   display: inline-block;
   vertical-align: middle; // Make sure dropdown vertical alignment with button,button group and so on.
 
-  // Dropdown button style
-  .rs-btn {
-    > .rs-dropdown-toggle-icon {
-      margin-right: 6px;
-    }
-
-    > .rs-dropdown-toggle-caret {
-      margin-left: 4px;
-    }
-  }
-
   &-disabled &-toggle.rs-btn {
     cursor: @cursor-disabled !important;
     box-shadow: none;
@@ -81,6 +70,9 @@
   &.rs-btn {
     // Force set style even if has `.btn`.
     .dropdown-toggle();
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
   }
 
   &.rs-dropdown-toggle-no-caret {
@@ -123,7 +115,10 @@
 
 // Links within the dropdown menu
 .rs-dropdown-item {
-  display: block;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 6px;
   padding: @dropdown-item-padding-y @dropdown-item-padding-x;
   clear: both;
   font-weight: normal;
@@ -133,10 +128,18 @@
   cursor: pointer; //fixed link has not [href] style
   .reset-link-text-decoration(none);
 
+  &-content {
+    flex: 1;
+  }
+
+  .rs-dropdown-item-shortcut {
+    margin-inline-start: 20px;
+    border: none;
+  }
+
   > .rs-icon {
     width: @font-size-base;
     text-align: center;
-    margin-right: 6px;
   }
 
   &&-active {
@@ -148,6 +151,10 @@
     &:focus {
       color: var(--rs-dropdown-item-text-active);
       background-color: var(--rs-dropdown-item-bg-active);
+
+      .rs-text {
+        color: var(--rs-dropdown-item-text-active);
+      }
     }
   }
 
@@ -168,6 +175,10 @@
     cursor: @cursor-disabled;
     pointer-events: none;
 
+    .rs-text {
+      color: var(--rs-text-disabled);
+    }
+
     // Nuke hover/focus effects
     &:hover,
     &:focus {

package/Heading/package.json

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

package/Heading/styles/index.css

@@ -0,0 +1,42 @@
+/* stylelint-disable */
+*[class*='rs-'] {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+*[class*='rs-']::before,
+*[class*='rs-']::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.rs-heading {
+  font-family: inherit;
+  font-weight: bolder;
+  color: inherit;
+  margin: 0;
+}
+.rs-heading.h1 {
+  font-size: 46px;
+  line-height: 62px;
+}
+.rs-heading.h2 {
+  font-size: 36px;
+  line-height: 50px;
+}
+.rs-heading.h3 {
+  font-size: 28px;
+  line-height: 42px;
+}
+.rs-heading.h4 {
+  font-size: 22px;
+  line-height: 34px;
+}
+.rs-heading.h5 {
+  font-size: 18px;
+  line-height: 24px;
+}
+.rs-heading.h6 {
+  font-size: 16px;
+  line-height: 22px;
+}
+
+/*# sourceMappingURL=index.css.map */

package/Heading/styles/index.less

@@ -0,0 +1,41 @@
+@import '../../styles/common';
+
+// Heading
+// -------------------------
+
+.rs-heading {
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  color: @headings-color;
+  margin: 0;
+
+  &.h1 {
+    font-size: @font-size-h1;
+    line-height: @line-height-h1;
+  }
+
+  &.h2 {
+    font-size: @font-size-h2;
+    line-height: @line-height-h2;
+  }
+
+  &.h3 {
+    font-size: @font-size-h3;
+    line-height: @line-height-h3;
+  }
+
+  &.h4 {
+    font-size: @font-size-h4;
+    line-height: @line-height-h4;
+  }
+
+  &.h5 {
+    font-size: @font-size-h5;
+    line-height: @line-height-h5;
+  }
+
+  &.h6 {
+    font-size: @font-size-h6;
+    line-height: @line-height-h6;
+  }
+}

package/HeadingGroup/package.json

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

package/HeadingGroup/styles/index.css

@@ -0,0 +1,5 @@
+.rs-heading-group {
+  margin-bottom: 1rem;
+}
+
+/*# sourceMappingURL=index.css.map */

package/HeadingGroup/styles/index.less

@@ -0,0 +1,3 @@
+.rs-heading-group {
+  margin-bottom: 1rem;
+}

package/InputPicker/styles/index.css

@@ -2606,31 +2606,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn .rs-picker-toggle-indicator .rs-picker-clean {
   top: 7px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox {
-  padding-bottom: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-tag {
-  margin-top: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn,
 .rs-picker-daterange .rs-picker-toggle.rs-btn {
   padding-right: 36px;
@@ -2675,31 +2650,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-lg {
   padding-left: 15px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 8px 16px;
-  font-size: 16px;
-  line-height: 1.375;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox {
-  padding-bottom: 6px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-tag {
-  margin-top: 6px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 16px;
-  margin-top: 6px;
-  font-size: 16px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox input {
-  height: 20px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-lg {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-lg,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-lg {
   padding-right: 42px;
@@ -2776,31 +2726,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-md {
   padding-left: 11px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 7px 12px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox {
-  padding-bottom: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-tag {
-  margin-top: 5px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-md ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-md {
-  padding-top: 7px;
-  padding-bottom: 7px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-md,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-md {
   padding-right: 36px;
@@ -2879,31 +2804,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-sm {
   padding-left: 9px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 4px 10px;
-  font-size: 14px;
-  line-height: 1.42857143;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox {
-  padding-bottom: 2px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-tag {
-  margin-top: 2px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 10px;
-  margin-top: 2px;
-  font-size: 14px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-sm {
-  padding-top: 4px;
-  padding-bottom: 4px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-sm,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-sm {
   padding-right: 34px;
@@ -2929,8 +2829,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   font-size: 12px;
   line-height: 20px;
   padding: 2px 8px;
-  /* stylelint-disable */
-  /* stylelint-enable */
 }
 .rs-btn-ghost.rs-picker-toggle.rs-btn-xs {
   padding: 1px 7px;
@@ -2984,41 +2882,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-default .rs-picker-toggle.rs-btn-xs {
   padding-left: 7px;
 }
-.rs-picker-input:not(.rs-picker-tag) .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding: 1px 8px;
-  font-size: 12px;
-  line-height: 1.66666667;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  padding-bottom: -1px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-tag {
-  margin-top: -1px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-left: 8px;
-  margin-top: -1px;
-  font-size: 12px;
-}
-.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox input {
-  height: 18px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs {
-  padding-top: 1px;
-  padding-bottom: 1px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  padding-bottom: 1px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-tag {
-  margin-top: 1px;
-}
-.rs-picker-input.rs-picker-tag .rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox .rs-picker-search-input {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
 .rs-picker-date .rs-picker-toggle.rs-btn-xs,
 .rs-picker-daterange .rs-picker-toggle.rs-btn-xs {
   padding-right: 30px;
@@ -3327,15 +3190,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   margin-right: 32px;
   min-height: 34px;
 }
-.rs-picker-toggle.rs-btn-lg ~ .rs-picker-textbox {
-  min-height: 40px;
-}
-.rs-picker-toggle.rs-btn-sm ~ .rs-picker-textbox {
-  min-height: 28px;
-}
-.rs-picker-toggle.rs-btn-xs ~ .rs-picker-textbox {
-  min-height: 22px;
-}
 .rs-picker-cleanable .rs-picker-textbox {
   margin-right: 44px;
 }
@@ -3378,5 +3232,34 @@ textarea.rs-picker-search-input {
 .rs-picker-focused .rs-picker-search-input {
   z-index: 6;
 }
+.rs-picker-input-lg .rs-picker-search-input {
+  padding: 8px 16px;
+  font-size: 16px;
+  line-height: 1.375;
+}
+.rs-picker-input-lg .rs-picker-textbox {
+  min-height: 40px;
+}
+.rs-picker-input-md .rs-picker-search-input {
+  padding: 7px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+}
+.rs-picker-input-sm .rs-picker-search-input {
+  padding: 4px 10px;
+  font-size: 14px;
+  line-height: 1.42857143;
+}
+.rs-picker-input-sm .rs-picker-textbox {
+  min-height: 28px;
+}
+.rs-picker-input-xs .rs-picker-search-input {
+  padding: 1px 8px;
+  font-size: 12px;
+  line-height: 1.66666667;
+}
+.rs-picker-input-xs .rs-picker-textbox {
+  min-height: 22px;
+}
 
 /*# sourceMappingURL=index.css.map */

package/InputPicker/styles/index.less

@@ -3,6 +3,7 @@
 @import '../../Input/styles/index.less';
 @import '../../SelectPicker/styles/index.less';
 @import '../../internals/Picker/styles/index.less';
+@import './mixin.less';
 
 .rs-picker-input {
   position: relative;
@@ -38,18 +39,6 @@
   margin-right: @dropdown-toggle-padding-right;
   min-height: 34px;
 
-  .rs-picker-toggle.rs-btn-lg ~ & {
-    min-height: 40px;
-  }
-
-  .rs-picker-toggle.rs-btn-sm ~ & {
-    min-height: 28px;
-  }
-
-  .rs-picker-toggle.rs-btn-xs ~ & {
-    min-height: 22px;
-  }
-
   .rs-picker-cleanable & {
     margin-right: (@dropdown-toggle-padding-right + @picker-toggle-clean-width);
   }
@@ -88,3 +77,30 @@
     }
   }
 }
+
+// Input Picker Size
+// --------------------------------------------------
+.rs-picker-input-lg {
+  .rs-input-picker-size(@padding-y-lg - 1; @padding-x-lg; @font-size-large; @line-height-large);
+  .rs-picker-textbox {
+    min-height: 40px;
+  }
+}
+
+.rs-picker-input-md {
+  .rs-input-picker-size(@padding-y; @padding-x; @font-size-base; @line-height-base);
+}
+
+.rs-picker-input-sm {
+  .rs-input-picker-size(@padding-y-sm; @padding-x-sm; @font-size-base; @line-height-base);
+  .rs-picker-textbox {
+    min-height: 28px;
+  }
+}
+
+.rs-picker-input-xs {
+  .rs-input-picker-size(@padding-y-xs; @padding-x-xs; @font-size-extra-small; @line-height-extra-small);
+  .rs-picker-textbox {
+    min-height: 22px;
+  }
+}

package/InputPicker/styles/mixin.less

@@ -0,0 +1,7 @@
+.rs-input-picker-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
+  .rs-picker-search-input {
+    padding: (@padding-vertical - 1px) @padding-horizontal;
+    font-size: @font-size;
+    line-height: @line-height;
+  }
+}