rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/Dropdown/styles/index.less

@@ -1,19 +1,18 @@
 @import '../../styles/common.less';
 @import '../../styles/mixins/menu.less';
 @import '../../styles/mixins/combobox.less';
-@import 'mixin.less';
+@import './mixin.less';
 @import '../../Button/styles/index.less';
 
 //
 // Dropdown menus
 // --------------------------------------------------
 
-.rs-dropdown-toggle-caret {
-  .combobox-indicator-icon();
-}
-
 // The dropdown wrapper (div)
 .rs-dropdown {
+  --rs-dropdown-divider-color: var(--rs-divider-border);
+  --rs-dropdown-shadow: var(--rs-shadow-md);
+
   position: relative;
   display: inline-block;
   vertical-align: middle; // Make sure dropdown vertical alignment with button,button group and so on.
@@ -64,31 +63,36 @@
 }
 
 .rs-dropdown-toggle {
-  .dropdown-toggle-size();
-
   &,
   &.rs-btn {
     // Force set style even if has `.btn`.
     .dropdown-toggle();
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: calc(var(--rs-spacing) * 1.5);
   }
 
   &.rs-dropdown-toggle-no-caret {
-    padding-right: @padding-x;
+    padding-inline-end: @padding-x;
   }
 }
 
 // The dropdown menu (ul)
 .rs-dropdown-menu {
+  --rs-menu-padding: calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-padding-inline: calc(var(--rs-spacing) * 3);
+  --rs-menuitem-padding-block: calc(var(--rs-spacing) * 2);
+  --rs-menuitem-divider-margin-block: calc(var(--rs-spacing) * 1.5);
+  --rs-menuitem-spacing: calc(var(--rs-spacing) * 2);
+
   margin: 0; // override default ul
   list-style: none;
-  font-size: @font-size-base;
-  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  font-size: var(--rs-font-size-sm);
+  text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   background-color: var(--rs-bg-overlay);
-  border-radius: @dropdown-menu-radius;
-  padding: @dropdown-menu-padding-y 0;
+  border-radius: var(--rs-radius-md);
+  padding: var(--rs-menu-padding);
+
   outline: 0;
 
   &:focus-visible {
@@ -99,12 +103,12 @@
     position: absolute;
     // dropdown-menu zindex value is greater than dropdown-toggle
     z-index: @zindex-dropdown + 1;
-    float: left;
+    float: inline-start;
     box-shadow: var(--rs-dropdown-shadow);
     outline: none;
 
     .high-contrast-mode({
-      border: 1px solid var(--rs-border-primary);
+      border: 1px solid var(--rs-border-secondary);
     });
   }
 
@@ -118,23 +122,27 @@
   display: flex;
   align-items: center;
   width: 100%;
-  gap: 6px;
-  padding: @dropdown-item-padding-y @dropdown-item-padding-x;
+  gap: var(--rs-menuitem-spacing);
+  padding-inline: var(--rs-menuitem-padding-inline);
+  padding-block: var(--rs-menuitem-padding-block);
   clear: both;
   font-weight: normal;
   line-height: @line-height-base;
   color: var(--rs-text-primary);
+  border-radius: var(--rs-radius-sm);
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   cursor: pointer; //fixed link has not [href] style
   .reset-link-text-decoration(none);
 
   &-content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
   .rs-dropdown-item-shortcut {
-    margin-inline-start: 20px;
     border: none;
+    line-height: var(--rs-text-line-height-xs);
   }
 
   > .rs-icon {
@@ -149,11 +157,11 @@
     &,
     &:hover,
     &:focus {
-      color: var(--rs-dropdown-item-text-active);
-      background-color: var(--rs-dropdown-item-bg-active);
+      color: var(--rs-menuitem-text-active);
+      background-color: var(--rs-menuitem-bg-active);
 
       .rs-text {
-        color: var(--rs-dropdown-item-text-active);
+        color: var(--rs-menuitem-text-active);
       }
     }
   }
@@ -173,7 +181,6 @@
   &-disabled {
     color: var(--rs-text-disabled);
     cursor: @cursor-disabled;
-    pointer-events: none;
 
     .rs-text {
       color: var(--rs-text-disabled);
@@ -190,7 +197,10 @@
 }
 
 .rs-dropdown-item-divider {
-  .nav-divider(var(--rs-dropdown-divider));
+  height: 1px;
+  margin-block: var(--rs-menuitem-divider-margin-block);
+  overflow: hidden;
+  background-color: var(--rs-dropdown-divider-color);
 }
 
 // The dropdown submenu
@@ -214,7 +224,7 @@
 
     > .rs-dropdown-menu {
       position: absolute;
-      top: -@dropdown-menu-padding-y;
+      top: 0;
     }
   }
 
@@ -224,21 +234,21 @@
 
     .rs-dropdown-item-toggle {
       padding: @dropdown-item-padding-y @dropdown-item-padding-x;
-      padding-right: @dropdown-item-padding-x+ @dropdown-item-submenu-icon-angle-spacing+
+      padding-inline-end: @dropdown-item-padding-x+ @dropdown-item-submenu-icon-angle-spacing+
         @dropdown-item-submenu-icon-angle-width;
     }
 
     .rs-dropdown-menu-toggle-icon {
-      right: @dropdown-caret-icon-padding-horizontal;
+      inset-inline-end: @dropdown-caret-icon-padding-horizontal;
     }
   }
 
   .rs-dropdown-menu {
-    left: 100%;
+    inset-inline-start: 100%;
 
     &[data-direction='start'] {
-      left: unset;
-      right: 100%;
+      inset-inline-start: unset;
+      inset-inline-end: 100%;
     }
   }
 
@@ -254,7 +264,7 @@
 // Active state
 .rs-dropdown-menu > .rs-dropdown-menu-item-focus {
   outline: 0;
-  background-color: var(--rs-dropdown-item-bg-active);
+  background-color: var(--rs-menuitem-bg-active);
 
   &:hover,
   &:focus {
@@ -268,67 +278,42 @@
     animation-play-state: running;
   }
 
-  // Show the menu
-  &.rs-dropdown-placement-top-start,
-  &.rs-dropdown-placement-top-end {
-    > .rs-dropdown-menu {
-      bottom: 100%;
-    }
-  }
-
-  &.rs-dropdown-placement-left-start,
-  &.rs-dropdown-placement-left-end {
-    > .rs-dropdown-menu {
-      right: 100%;
-    }
-  }
-
-  &.rs-dropdown-placement-right-start,
-  &.rs-dropdown-placement-right-end {
-    > .rs-dropdown-menu {
-      left: 100%;
-    }
-  }
-
-  &.rs-dropdown-placement-bottom-start,
-  &.rs-dropdown-placement-bottom-end {
-    > .rs-dropdown-menu {
-      top: 100%;
-    }
-  }
-
-  &.rs-dropdown-placement-top-start,
-  &.rs-dropdown-placement-bottom-start {
-    > .rs-dropdown-menu {
-      left: 0;
-    }
-  }
-
-  &.rs-dropdown-placement-top-end,
-  &.rs-dropdown-placement-bottom-end {
-    > .rs-dropdown-menu {
-      right: 0;
-    }
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
   }
 
-  &.rs-dropdown-placement-left-start,
-  &.rs-dropdown-placement-right-start {
-    > .rs-dropdown-menu {
-      top: 0;
+  // Vertical placements
+  .placement-vertical(@position, @value) {
+    &[data-placement="@{position}-start"],
+    &[data-placement="@{position}-end"] {
+      > .rs-dropdown-menu {
+        @{value}: 100%;
+      }
     }
   }
 
-  &.rs-dropdown-placement-right-end,
-  &.rs-dropdown-placement-left-end {
-    > .rs-dropdown-menu {
-      bottom: 0;
+  // Horizontal alignments
+  .placement-align(@start, @end, @value) {
+    &[data-placement="@{start}"],
+    &[data-placement="@{end}"] {
+      > .rs-dropdown-menu {
+        @{value}: 0;
+      }
     }
   }
 
-  // Remove the outline when :focus is triggered
-  > a {
-    outline: 0;
-  }
+  // Apply placements
+  .placement-vertical(top, bottom);
+  .placement-vertical(bottom, top);
+  .placement-vertical(left, inset-inline-end);
+  .placement-vertical(right, inset-inline-start);
+
+  // Apply alignments
+  .placement-align(top-start, bottom-start, inset-inline-start);
+  .placement-align(top-end, bottom-end, inset-inline-end);
+  .placement-align(left-start, right-start, top);
+  .placement-align(left-end, right-end, bottom);
 }
 
 // Dropdown section headers
@@ -337,8 +322,9 @@
   padding: @dropdown-item-padding-y @dropdown-item-padding-x;
   line-height: @line-height-base;
   color: var(--rs-dropdown-header-text);
-  border-bottom: 1px solid @dropdown-divider-bg;
+  border-bottom: 1px solid var(--rs-dropdown-divider-color);
   white-space: nowrap; // as with > li > a
+  margin-bottom: 2px;
 }
 
 // Opacity not working in Safari,so remove .

package/Dropdown/styles/mixin.less

@@ -1,42 +1,4 @@
-.dropdown-toggle-caret-size(@vertical,@horizontal,@caret-size) {
-  padding-right: @horizontal+ @dropdown-caret-width+ @dropdown-caret-padding !important;
-
-  .rs-dropdown-toggle-caret {
-    top: @vertical;
-    right: @horizontal;
-    font-size: @caret-size;
-  }
-}
-
-.dropdown-toggle-size() {
-  &.rs-btn-lg {
-    .dropdown-toggle-caret-size(@padding-y-lg, @padding-x-lg, 14px);
-  }
-
-  &.rs-btn-sm {
-    .dropdown-toggle-caret-size(@padding-y-sm, @padding-x-sm, 10px);
-  }
-
-  &.rs-btn-xs {
-    .dropdown-toggle-caret-size(@padding-y-xs, @padding-x-xs, 8px);
-  }
-}
-
 .dropdown-toggle() {
   position: relative;
   z-index: @zindex-dropdown;
-  padding-right: @dropdown-toggle-padding-right;
-  // Fixed: Content is not centered when customizing renderTitle.
-  display: inline-block;
-}
-
-// Horizontal dividers
-//
-// Dividers (basically an hr) within dropdowns and nav lists
-
-.nav-divider(@color: #e5e5e5) {
-  height: 1px;
-  margin: @nav-divider-margin-vertical 0;
-  overflow: hidden;
-  background-color: @color;
 }

package/FlexboxGrid/styles/index.css

@@ -16,7 +16,8 @@
   flex-flow: row wrap;
 }
 .rs-flex-box-grid-item {
-  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
 }
 .rs-flex-box-grid-top {
   align-items: flex-start;
@@ -43,6 +44,7 @@
   justify-content: space-around;
 }
 .rs-flex-box-grid-item-1 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -52,6 +54,7 @@
   order: 1;
 }
 .rs-flex-box-grid-item-2 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -61,6 +64,7 @@
   order: 2;
 }
 .rs-flex-box-grid-item-3 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -70,6 +74,7 @@
   order: 3;
 }
 .rs-flex-box-grid-item-4 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -79,6 +84,7 @@
   order: 4;
 }
 .rs-flex-box-grid-item-5 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -88,6 +94,7 @@
   order: 5;
 }
 .rs-flex-box-grid-item-6 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -97,6 +104,7 @@
   order: 6;
 }
 .rs-flex-box-grid-item-7 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -106,6 +114,7 @@
   order: 7;
 }
 .rs-flex-box-grid-item-8 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -115,6 +124,7 @@
   order: 8;
 }
 .rs-flex-box-grid-item-9 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -124,6 +134,7 @@
   order: 9;
 }
 .rs-flex-box-grid-item-10 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -133,6 +144,7 @@
   order: 10;
 }
 .rs-flex-box-grid-item-11 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -142,6 +154,7 @@
   order: 11;
 }
 .rs-flex-box-grid-item-12 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -151,6 +164,7 @@
   order: 12;
 }
 .rs-flex-box-grid-item-13 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -160,6 +174,7 @@
   order: 13;
 }
 .rs-flex-box-grid-item-14 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -169,6 +184,7 @@
   order: 14;
 }
 .rs-flex-box-grid-item-15 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -178,6 +194,7 @@
   order: 15;
 }
 .rs-flex-box-grid-item-16 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -187,6 +204,7 @@
   order: 16;
 }
 .rs-flex-box-grid-item-17 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -196,6 +214,7 @@
   order: 17;
 }
 .rs-flex-box-grid-item-18 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -205,6 +224,7 @@
   order: 18;
 }
 .rs-flex-box-grid-item-19 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -214,6 +234,7 @@
   order: 19;
 }
 .rs-flex-box-grid-item-20 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -223,6 +244,7 @@
   order: 20;
 }
 .rs-flex-box-grid-item-21 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -232,6 +254,7 @@
   order: 21;
 }
 .rs-flex-box-grid-item-22 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -241,6 +264,7 @@
   order: 22;
 }
 .rs-flex-box-grid-item-23 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;
@@ -250,6 +274,7 @@
   order: 23;
 }
 .rs-flex-box-grid-item-24 {
+  flex: 0 0 auto;
   position: relative;
   display: block;
   min-height: 1px;

package/FlexboxGrid/styles/index.less

@@ -7,7 +7,8 @@
 
   // Flex-box grid item
   &-item {
-    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
   }
 
   //##==== Alignment (Y-Axis).
@@ -62,6 +63,7 @@
 each(range(24), {
   // Generate columns styles.
   .rs-flex-box-grid-item-@{value} {
+    flex: 0 0 auto;
     // Provide positioning for child elements.
     position: relative;
     display: block;

package/Form/styles/index.css

@@ -11,16 +11,16 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
-.rs-form-inline > *,
-.rs-form-inline > .rs-btn {
-  margin-right: 20px;
-  margin-bottom: 24px;
-  vertical-align: top;
+:root {
+  --rs-spacing: 0.25rem;
 }
-.rs-form-inline .rs-form-control-label {
-  vertical-align: top;
-  margin-bottom: auto;
-  margin-right: 12px;
-  margin-top: 8px;
-  display: inline-block;
+.rs-form {
+  --rs-form-direction: column;
+  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+  display: flex;
+  flex-direction: var(--rs-form-direction);
+  gap: var(--rs-form-spacing);
+}
+.rs-form-inline {
+  --rs-form-direction: row;
 }

package/Form/styles/index.less

@@ -1,21 +1,17 @@
-@import '../../styles/common';
-@import 'mixin';
+@import '../../styles/common.less';
 
 // Form
 
-.rs-form-inline {
-  > *,
-  > .rs-btn {
-    margin-right: 20px;
-    margin-bottom: 24px;
-    vertical-align: top;
-  }
+.rs-form {
+  --rs-form-direction: column;
+  --rs-form-spacing: calc(var(--rs-spacing) * 4);
+  --rs-form-group-spacing: var(--rs-spacing);
+  --rs-form-group-direction: column;
+  display: flex;
+  flex-direction: var(--rs-form-direction);
+  gap: var(--rs-form-spacing);
+}
 
-  .rs-form-control-label {
-    vertical-align: top;
-    margin-bottom: auto;
-    margin-right: @form-control-label-margin-right;
-    margin-top: @padding-y;
-    display: inline-block;
-  }
+.rs-form-inline {
+  --rs-form-direction: row;
 }

package/FormControl/styles/index.css

@@ -11,6 +11,9 @@
 *[class*='rs-']::after {
   box-sizing: border-box;
 }
+:root {
+  --rs-radius-none: 0;
+}
 .rs-form-fluid .rs-form-control-wrapper {
   width: 100%;
 }
@@ -21,6 +24,9 @@
 .rs-form-fluid.rs-form-vertical .rs-form-group .rs-input-group {
   width: 100%;
 }
+.rs-form-fluid.rs-form-vertical .rs-form-group .rs-form-control-wrapper {
+  max-width: 100%;
+}
 .rs-form-control-wrapper {
   position: relative;
 }
@@ -37,20 +43,23 @@
 }
 .rs-form-vertical .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
-  max-width: 100%;
+  max-width: -moz-max-content;
+  max-width: max-content;
 }
 .rs-form-horizontal .rs-form-group .rs-form-control-wrapper {
-  float: left;
+  float: inline-start;
 }
 .rs-form-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text {
   clear: both;
 }
-.rs-form-horizontal .rs-form-group .rs-form-control-wrapper + .rs-form-help-text:not(.rs-form-help-text-tooltip) {
-  margin-left: 182px;
-}
 .rs-form-inline .rs-form-group .rs-form-control-wrapper {
   display: inline-block;
 }
 .rs-form-inline .rs-form-group .rs-sr-only + .rs-form-control-wrapper {
-  margin-left: 0;
+  margin-inline-start: 0;
+}
+.rs-input-group > .rs-form-control > .rs-input {
+  border-radius: var(--rs-radius-none);
+  border: none;
+  outline: none;
 }