rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-2025031415

package/Sidenav/styles/index.less

@@ -10,23 +10,45 @@
 // Base class
 // --------------------------------------------------
 .rs-sidenav {
+  --rs-sidenav-width: @sidenav-default-width;
+  --rs-sidenav-item-font-size: var(--rs-font-size-sm);
+  --rs-sidenav-nav-rounded: 6px;
+  --rs-sidenav-nav-item-p-x: @sidenav-padding-horizontal;
+  --rs-sidenav-nav-item-p-y: @sidenav-padding-vertical;
+  --rs-sidenav-subnav-p-x: 10px;
+  --rs-sidenav-subnav-m-x: 16px;
+  --rs-sidenav-p: calc(var(--rs-spacing) * 2);
+  --rs-sidenav-header-p: var(--rs-sidenav-p);
+  --rs-sidenav-footer-p: var(--rs-sidenav-p);
+  --rs-sidenav-group-p: var(--rs-sidenav-p);
+
   transition: width @sidenav-collapse-transition-config;
-  width: @sidenav-default-width;
+  width: var(--rs-sidenav-width);
   display: flex;
   flex-direction: column;
+
+  &.rs-sidenav-collapse-out .rs-dropdown-menu {
+    border: none;
+    inset-inline-start: 28px;
+    top: 0;
+  }
 }
 
 .rs-sidenav-nav {
   list-style: none;
-  padding: 0;
+  padding: var(--rs-sidenav-p);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--rs-spacing) / 2);
 
   .rs-sidenav-item,
-  .rs-dropdown-toggle,
+  .rs-sidenav-dropdown-toggle,
   .rs-dropdown-item,
   .rs-dropdown-item-toggle {
-    padding: @sidenav-padding-vertical @sidenav-padding-horizontal;
+    padding-inline: var(--rs-sidenav-nav-item-p-x);
+    padding-block: var(--rs-sidenav-nav-item-p-y);
     transition: @nav-item-transition;
-    border-radius: 0;
+    border-radius: var(--rs-sidenav-nav-rounded);
     color: inherit;
 
     .high-contrast-mode({
@@ -34,8 +56,13 @@
     });
   }
 
+  .rs-dropdown-menu {
+    margin-inline: var(--rs-sidenav-subnav-m-x);
+    padding-inline: var(--rs-sidenav-subnav-p-x);
+  }
+
   .rs-dropdown-item {
-    display: block;
+    padding-block: calc(var(--rs-sidenav-nav-item-p-y) * 0.65);
   }
 
   > .rs-sidenav-item,
@@ -51,12 +78,12 @@
       width: 100%;
       text-align: start;
       background: none;
-      padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
+      padding-inline-end: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
       position: relative;
       border-width: 0;
 
       .rs-sidenav-collapse-in & {
-        padding-left: @sidenav-level2-retract;
+        padding-inline-start: @sidenav-level2-retract;
       }
 
       &:focus {
@@ -75,13 +102,7 @@
 
       // Submenu toggle icon
       &-icon {
-        font-size: @sidenav-item-caret-size;
-        position: absolute;
-        right: @sidenav-padding-horizontal;
-        top: @sidenav-children-padding-vertical;
-        // width: auto;
-        // height: @sidenav-dropdown-toggle-caret-width;
-        // transform: rotate(90deg);
+        font-size: var(--rs-font-size-sm);
       }
     }
 
@@ -96,10 +117,16 @@
     }
   }
 
+  .rs-dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--rs-spacing) * 3);
+  }
+
   .high-contrast-mode({
-    .rs-dropdown-toggle,
+    .rs-sidenav-dropdown-toggle,
     .rs-dropdown-menu {
-      border: none;
+      border-width: 0 0 0 1px;
     }
   });
 
@@ -123,14 +150,12 @@
     transition: height @sidenav-collapse-transition-config;
   }
 
-  > .rs-dropdown .rs-dropdown-toggle {
+  > .rs-dropdown .rs-sidenav-dropdown-toggle {
     height: auto;
-    padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
 
-    .rs-dropdown-toggle-caret {
-      font-size: @sidenav-item-caret-size;
-      right: @sidenav-padding-horizontal;
-      top: @sidenav-padding-vertical;
+    .rs-sidenav-dropdown-toggle-caret {
+      font-size: var(--rs-font-size-sm);
+      margin-inline-start: auto;
 
       // Make Caret AngleRight direction at down.
       &[aria-label='angle-right'] {
@@ -142,10 +167,8 @@
   // Level1
   // -----------------
   > .rs-sidenav-item,
-  > .rs-dropdown .rs-dropdown-toggle {
-    font-size: @sidenav-level1-item-font-size;
-    line-height: @sidenav-level1-item-line-height;
-    padding-left: (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
+  > .rs-dropdown .rs-sidenav-dropdown-toggle {
+    font-size: var(--rs-sidenav-item-font-size);
     width: 100%;
     white-space: normal;
 
@@ -154,20 +177,10 @@
     &:focus-visible {
       .focus-ring(inset);
     }
-
-    > .rs-icon:not(.rs-dropdown-toggle-caret) {
-      font-size: @sidenav-level1-item-font-size;
-      margin-right: @sidenav-icon-spacing;
-      position: absolute;
-      left: @sidenav-padding-horizontal;
-      top: @sidenav-padding-vertical;
-      line-height: @sidenav-level1-item-line-height;
-      height: @sidenav-level1-item-font-size;
-    }
   }
 
-  > .rs-dropdown-focus .rs-dropdown-toggle,
-  .rs-dropdown-toggle:focus-visible {
+  > .rs-dropdown-focus .rs-sidenav-dropdown-toggle,
+  .rs-sidenav-dropdown-toggle:focus-visible {
     .focus-ring();
 
     .high-contrast-mode({
@@ -179,39 +192,64 @@
 }
 
 .rs-sidenav-item {
-  position: relative;
-  display: block;
+  display: flex;
+  align-items: center;
   outline: 0;
   overflow: hidden;
   text-decoration: none;
+  gap: calc(var(--rs-spacing) * 3);
 
   &:hover,
   &:focus {
     text-decoration: none;
   }
 
-  &:focus-visible,
-  &&-focus {
+  &:focus-visible {
     .focus-ring(slim-inset);
 
     z-index: 2;
   }
 }
 
-// TODO Consider rename as sidenav-footer
-.rs-sidenav-toggle {
-  height: @sidenav-footer-height;
+.rs-sidenav-header {
+  padding: var(--rs-sidenav-header-p);
+}
+
+.rs-sidenav-body {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.rs-sidenav-collapse-out .rs-sidenav-body {
+  overflow: inherit;
+}
+
+.rs-sidenav-footer {
   border-top: 1px solid;
   margin-top: auto;
+  padding: var(--rs-sidenav-footer-p);
+  display: flex;
+}
 
-  &-button {
-    float: right;
-    width: @sidenav-compact-width;
-    height: 100%;
-    border: none;
-    border-radius: 0;
-    color: inherit;
+.rs-sidenav-toggle {
+  border: none;
+  color: inherit;
+  .rs-icon {
+    transition: transform 0.3s ease;
   }
+
+  &-collapsed {
+    .rs-icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.rs-sidenav-group-label {
+  padding: var(--rs-sidenav-group-p);
+  margin-top: var(--rs-sidenav-group-p);
+  font-size: var(--rs-font-size-xs);
+  color: var(--rs-text-secondary);
 }
 
 // Expanded styles
@@ -220,7 +258,7 @@
 
   //Nav item
   .rs-sidenav-item {
-    border-radius: 0;
+    border-radius: var(--rs-sidenav-nav-rounded);
   }
 
   //Dropdown style rewrite
@@ -267,19 +305,21 @@
     }
 
     // Setting icon to dropdown-caret.
-    .rs-dropdown-toggle-caret::before,
+    .rs-sidenav-dropdown-toggle-caret::before,
     .rs-dropdown-item-toggle > .rs-dropdown-item-toggle-icon::before {
       display: none;
     }
 
-    .rs-dropdown-toggle-caret,
+    .rs-sidenav-dropdown-toggle-caret,
     .rs-dropdown-item-toggle > .rs-dropdown-item-toggle-icon {
-      transition: transform 0.3s linear;
+      transition-property: transform;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 0.15s;
     }
 
     // Expand
-    &.rs-dropdown-expand .rs-dropdown-toggle-caret {
-      transform: rotate(180deg);
+    &.rs-dropdown-expand .rs-sidenav-dropdown-toggle-caret {
+      transform: rotate(90deg);
     }
 
     // Dropdown menu
@@ -326,48 +366,20 @@
 
   .rs-dropdown-item-submenu {
     > .rs-dropdown-item-menu-icon {
-      padding-top: @sidenav-children-padding-vertical;
-      padding-bottom: @sidenav-children-padding-vertical;
       line-height: @line-height-base;
       width: @font-size-base;
-      position: absolute;
       z-index: 1;
     }
   }
-
-  // Level2
-  // -----------------
-  .rs-dropdown-item,
-  .rs-dropdown-item-submenu > .rs-dropdown-item-toggle {
-    padding: @sidenav-children-padding-vertical @sidenav-padding-horizontal
-      @sidenav-children-padding-vertical @sidenav-level2-retract;
-  }
-
-  .rs-dropdown-item {
-    .dropdown-menu-icon-left-position(@sidenav-level2-retract);
-  }
-
-  // Level3
-  // -----------------
-  .rs-dropdown-item .rs-dropdown-item:not(.rs-dropdown-item-submenu),
-  .rs-dropdown-item-submenu > .rs-dropdown-menu .rs-dropdown-item-toggle {
-    padding-left: @sidenav-level3-retract;
-  }
-
-  .rs-dropdown-item-submenu > .rs-dropdown-menu > .rs-dropdown-item {
-    .dropdown-menu-icon-left-position(@sidenav-level3-retract);
-  }
 }
 
 // Folded && Collapsing styles
 .rs-sidenav-collapse-out {
   .rs-sidenav-item,
-  .rs-dropdown .rs-dropdown-toggle {
-    padding-right: 0;
-    // fixed height
+  .rs-dropdown .rs-sidenav-dropdown-toggle {
+    justify-content: center;
     height: @sidenav-item-height;
-    // supplement padding
-    padding-left: @sidenav-default-width;
+    gap: 0;
 
     &:focus-visible {
       .focus-ring();
@@ -378,6 +390,10 @@
     }
   }
 
+  .rs-sidenav-item-title {
+    display: none;
+  }
+
   // The same to the dropdown item
   .rs-dropdown-item {
     @padding-right: @dropdown-item-padding-x+ @dropdown-item-submenu-icon-angle-spacing +
@@ -391,13 +407,13 @@
     padding: 0;
   }
 
-  .rs-dropdown-toggle-caret {
+  .rs-sidenav-dropdown-toggle-caret {
     display: none;
   }
 
   // Folded text animation setting
   .rs-sidenav-item-text,
-  .rs-dropdown-toggle > span {
+  .rs-sidenav-dropdown-toggle > span {
     animation: sideNavFoldedText @sidenav-collapse-transition-config forwards;
   }
 }
@@ -408,7 +424,7 @@
   &.rs-sidenav-collapse-in,
   &.rs-sidenav-collapse-out {
     .rs-sidenav-item,
-    .rs-dropdown .rs-dropdown-toggle,
+    .rs-dropdown .rs-sidenav-dropdown-toggle,
     .rs-dropdown-item,
     .rs-dropdown-item-submenu > .rs-dropdown-menu-toggle {
       white-space: nowrap;
@@ -417,7 +433,7 @@
   }
 
   &.rs-sidenav-collapse-in {
-    .rs-dropdown-toggle-caret {
+    .rs-sidenav-dropdown-toggle-caret {
       display: none;
     }
   }
@@ -425,7 +441,7 @@
   // Make sure icon text-align center
   &.rs-sidenav-collapse-out {
     .rs-dropdown .rs-dropdown-menu {
-      padding-left: @sidenav-default-width - @sidenav-level2-retract;
+      padding-inline-start: @sidenav-default-width - @sidenav-level2-retract;
     }
 
     .rs-dropdown-item {
@@ -443,29 +459,35 @@
   color: var(--rs-sidenav-default-text);
 
   .rs-sidenav-item,
-  .rs-dropdown-toggle,
-  .rs-sidenav-toggle-button {
+  .rs-sidenav-dropdown-toggle,
+  .rs-sidenav-toggle {
     background-color: var(--rs-sidenav-default-bg);
   }
 
   .rs-sidenav-item:hover,
-  .rs-dropdown .rs-dropdown-toggle:hover,
-  .rs-sidenav-toggle-button:hover,
-  .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
+  .rs-sidenav-dropdown-toggle:hover,
+  .rs-sidenav-toggle:hover,
+  .rs-dropdown-item:hover,
+  .rs-dropdown.rs-dropdown-open .rs-sidenav-dropdown-toggle {
     background-color: var(--rs-sidenav-default-hover-bg);
     color: var(--rs-sidenav-default-hover-text);
   }
 
+  // Active
   .rs-sidenav-item.rs-sidenav-item-active,
-  .rs-dropdown-item.rs-dropdown-item-active,
-  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
+  .rs-dropdown-item.rs-dropdown-item-active {
     color: var(--rs-sidenav-default-selected-text);
+    background-color: var(--rs-sidenav-default-selected-bg);
   }
 
-  .rs-sidenav-toggle {
+  .rs-sidenav-footer {
     border-top-color: var(--rs-sidenav-default-footer-border);
   }
 
+  .rs-dropdown-menu {
+    border-left: 1px solid var(--rs-sidenav-default-subnav-border-color);
+  }
+
   // Collapsed
   &.rs-sidenav-collapse-out {
     .rs-dropdown-item.rs-dropdown-item-active {
@@ -499,23 +521,14 @@
   }
 }
 
-.rs-sidenav-default.rs-sidenav-collapse-in,
-.rs-sidenav-default.rs-sidenav-collapsing,
-.rs-sidenav-default.rs-sidenav-collapse-out {
-  // Set active Level1 style
-  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
-    color: var(--rs-sidenav-default-selected-text);
-  }
-}
-
 // Inverse Sidenav
 .rs-sidenav-inverse {
   background-color: var(--rs-sidenav-inverse-bg);
   color: var(--rs-sidenav-inverse-text);
 
   .rs-sidenav-item,
-  .rs-dropdown .rs-dropdown-toggle,
-  .rs-sidenav-toggle-button,
+  .rs-dropdown .rs-sidenav-dropdown-toggle,
+  .rs-sidenav-toggle,
   .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
     background-color: var(--rs-sidenav-inverse-bg);
 
@@ -526,9 +539,9 @@
   }
 
   .rs-dropdown-item,
-  .rs-dropdown-item > .rs-dropdown-menu-toggle,
+  .rs-dropdown-item .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle,
-  .rs-sidenav-toggle-button {
+  .rs-sidenav-toggle {
     color: var(--rs-sidenav-inverse-text);
 
     &:hover,
@@ -539,35 +552,32 @@
     }
   }
 
-  // Active
-  .rs-sidenav-item.rs-sidenav-item-active,
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
-    .high-contrast-mode({
-      color: var(--rs-sidenav-inverse-selected-text);
-    });
-  }
-
-  // Active
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle,
-  .rs-sidenav-item,
-  .rs-dropdown .rs-dropdown-toggle {
-    color: var(--rs-sidenav-inverse-text);
+  &.rs-sidenav-collapse-out {
+    .rs-dropdown-item {
+      color: var(--rs-sidenav-default-text);
 
-    &:hover,
-    &:focus,
-    &.rs-dropdown-item-focus {
-      color: var(--rs-sidenav-inverse-text);
+      &:hover,
+      &:focus,
+      &.rs-dropdown-item-focus {
+        background-color: var(--rs-sidenav-default-hover-bg);
+        color: var(--rs-sidenav-default-hover-text);
+      }
     }
   }
 
   .rs-sidenav-item.rs-sidenav-item-active,
   .rs-dropdown-item.rs-dropdown-item-active {
+    color: var(--rs-sidenav-inverse-selected-text);
     background-color: var(--rs-sidenav-inverse-selected-bg);
   }
 
-  .rs-sidenav-toggle {
+  .rs-sidenav-footer {
     border-top-color: var(--rs-sidenav-inverse-footer-border);
   }
+
+  .rs-dropdown-menu {
+    border-left: 1px solid var(--rs-sidenav-inverse-subnav-border-color);
+  }
 }
 
 // Subtle Sidenav
@@ -575,9 +585,9 @@
   background-color: transparent;
 
   .rs-sidenav-item,
-  .rs-dropdown-toggle,
+  .rs-sidenav-dropdown-toggle,
   .rs-dropdown-item,
-  .rs-sidenav-toggle-button {
+  .rs-sidenav-toggle {
     background-color: transparent;
     color: var(--rs-sidenav-subtle-text);
 
@@ -590,12 +600,12 @@
 
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
-  .rs-dropdown-item.rs-dropdown-item-active,
-  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
+  .rs-dropdown-item.rs-dropdown-item-active {
     color: var(--rs-sidenav-subtle-selected-text);
+    background-color: var(--rs-sidenav-subtle-selected-bg);
   }
 
-  .rs-dropdown-open > .rs-dropdown-toggle.btn {
+  .rs-dropdown-open > .rs-sidenav-dropdown-toggle.btn {
     background-color: transparent;
 
     &:hover,
@@ -604,9 +614,13 @@
     }
   }
 
-  .rs-sidenav-toggle {
+  .rs-sidenav-footer {
     border-top-color: var(--rs-sidenav-subtle-footer-border);
   }
+
+  .rs-dropdown-menu {
+    border-left: 1px solid var(--rs-sidenav-subtle-subnav-border-color);
+  }
 }
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,
@@ -628,21 +642,6 @@
   }
 }
 
-.rs-sidenav-subtle.rs-sidenav-collapse-in,
-.rs-sidenav-subtle.rs-sidenav-collapsing,
-.rs-sidenav-subtle.rs-sidenav-collapse-out {
-  // Set active Level1 style
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
-    &:hover {
-      background-color: var(--rs-sidenav-subtle-hover-bg);
-    }
-
-    &-icon {
-      color: var(--rs-sidenav-subtle-selected-text);
-    }
-  }
-}
-
 @keyframes sideNavFoldedText {
   0% {
     max-width: 200px;

package/Sidenav/styles/mixin.less

@@ -1,22 +1,23 @@
 .reset-sidenav-dropdown-menu() {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   position: static;
   float: none;
   box-shadow: none;
   animation-name: none;
-  padding: 0;
   background-color: transparent;
-  border-radius: 0;
+   border-radius: var(--rs-radius-none);
 }
 
 .dropdown-menu-icon-left-position(@left) {
   &.rs-dropdown-item-with-icon > .rs-dropdown-item-content {
     > .rs-dropdown-item-menu-icon {
-      left: @left;
+      inset-inline-start: @left;
     }
 
     > .rs-dropdown-menu-toggle {
-      padding-left: (@left + 20px);
+      padding-inline-start: (@left + 20px);
     }
   }
 }

package/SidenavFooter/package.json

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

package/SidenavGroupLabel/package.json

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