rsuite 6.0.0-canary-20250403 → 6.0.0-canary-20250424

package/esm/useBreakpointValue/useBreakpointValue.d.ts

@@ -11,7 +11,7 @@ interface UseBreakpointValueOptions<T = any> {
 }
 /**
  * A React Hook that returns different values based on different screen sizes in responsive design.
- * @version 5.63.0
+ * @version 5.64.0
  * @unstable Please note that this API is not stable and may change in the future.
  * @see https://rsuitejs.com/components/use-breakpoint-value
  *

package/esm/useBreakpointValue/useBreakpointValue.js

@@ -2,7 +2,7 @@
 import useMediaQuery from "../useMediaQuery/index.js";
 /**
  * A React Hook that returns different values based on different screen sizes in responsive design.
- * @version 5.63.0
+ * @version 5.64.0
  * @unstable Please note that this API is not stable and may change in the future.
  * @see https://rsuitejs.com/components/use-breakpoint-value
  *

package/esm/useToaster/useToaster.js

@@ -1,9 +1,7 @@
 'use client';
 import { useMemo, useContext } from 'react';
 import toaster from "../toaster/index.js";
-// From CustomProvider/CustomProvider.tsx import CustomContext instead of directly from 'CustomProvider/index.ts'
-// because babel compiles commonjs, which causes CustomContext to be undefined
-import { CustomContext } from "../CustomProvider/CustomProvider.js";
+import { CustomContext } from "../internals/Provider/CustomContext.js";
 /**
  * Toaster display brief, temporary notifications of actions, errors, or other events in an application.
  * It is often used with the Message and Notification components.

package/internals/Burger/styles/index.less

@@ -0,0 +1,67 @@
+.rs-burger {
+  --rs-burger-size: 36px;
+  --rs-burger-thickness: 2px;
+  --rs-burger-color: currentColor;
+  --rs-burger-spacing: calc(var(--rs-spacing) * 1.5);
+  --rs-burger-line-size: calc(var(--rs-burger-size) - var(--rs-burger-spacing) * 2);
+
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  transition: background 0.2s;
+  box-sizing: border-box;
+  width: var(--rs-burger-size);
+  height: var(--rs-burger-size);
+  padding: var(--rs-burger-spacing);
+
+  // The burger line (middle)
+  &-line {
+    position: relative;
+    display: block;
+    width: var(--rs-burger-line-size);
+    height: var(--rs-burger-thickness);
+    background: var(--rs-burger-color);
+    border-radius: var(--rs-burger-thickness);
+    transition-property: background, transform;
+    transition-duration: 0.2s, 0.3s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+
+    // Top and bottom lines
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      inset-inline-start: 0;
+      width: 100%;
+      height: var(--rs-burger-thickness);
+      background: var(--rs-burger-color);
+      border-radius: var(--rs-burger-thickness);
+      transition-property: transform;
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &::before {
+      top: calc(var(--rs-burger-line-size) / -3);
+    }
+    &::after {
+      top: calc(var(--rs-burger-line-size) / 3);
+    }
+  }
+
+  // Opened state animation
+  &:where([data-opened='true']) {
+    .rs-burger-line {
+      background: transparent;
+      &::before {
+        transform: translateY(calc(var(--rs-burger-line-size) / 3)) rotate(45deg);
+      }
+      &::after {
+        transform: translateY(calc(var(--rs-burger-line-size) / -3)) rotate(-45deg);
+      }
+    }
+  }
+}

package/internals/CloseButton/styles/index.less

@@ -12,14 +12,4 @@
   .rs-icon {
     vertical-align: bottom;
   }
-
-  &:hover,
-  &:focus {
-    color: var(--rs-close-button-hover-color);
-
-    svg path {
-      stroke: var(--rs-close-button-hover-color);
-      stroke-width: 1;
-    }
-  }
 }

package/internals/Picker/styles/index.less

@@ -24,6 +24,7 @@
   --rs-picker-loader-size: 20px;
   --rs-picker-toggle-border-width: 1px;
   --rs-picker-toggle-bg: var(--rs-input-bg);
+  --rs-picker-toggle-border-color: var(--rs-border-primary);
 
   display: inline-block;
   vertical-align: middle;
@@ -46,6 +47,10 @@
     .rs-picker-value-count {
       opacity: 0.5;
     }
+
+    .rs-picker-toggle {
+      pointer-events: none;
+    }
   }
 
   &-toggle &-toggle-placeholder {
@@ -73,14 +78,14 @@
     margin: 0 var(--rs-spacing) 0 0;
   }
 
-  &:not([data-disabled='true']):hover,
   &.rs-picker-focused {
     border-color: var(--rs-input-focus-border);
   }
 
   &-toggle-active,
   &.rs-picker-focused {
-    box-shadow: var(--rs-state-focus-shadow);
+    --rs-picker-toggle-border-color: var(--rs-input-focus-border);
+    .focus-ring();
   }
 
   &-label.rs-input-group-addon {
@@ -278,11 +283,8 @@
     });
   }
 
-  .rs-picker[data-variant='default'],
-  :not([data-disabled='true']) & {
-    &:hover,
-    &:focus,
-    &-active {
+  .rs-picker[data-variant='default'] {
+    &:focus {
       border-color: var(--rs-input-focus-border);
     }
   }
@@ -351,13 +353,14 @@
 
   // Picker clear button
   .rs-picker-clean {
-    .combobox-indicator-icon();
-
-    background: inherit;
     color: var(--rs-text-secondary);
     transition: 0.2s color linear;
     cursor: pointer;
 
+    &:hover {
+      color: var(--rs-text-primary);
+    }
+
     &.rs-btn-close {
       padding: 0;
     }

package/internals/Picker/styles/mixin.less

@@ -93,7 +93,9 @@
 .picker-default-toggle() {
   [data-variant='default'] & {
     color: var(--rs-text-primary);
-    border: var(--rs-picker-toggle-border-width) solid var(--rs-border-primary);
+    border-width: var(--rs-picker-toggle-border-width);
+    border-color: var(--rs-picker-toggle-border-color);
+    border-style: solid;
   }
 
   [data-disabled='true'] & {
@@ -101,7 +103,6 @@
   }
 
   [data-variant='default']:not([data-disabled='true']) {
-    &:hover,
     &:focus {
       border-color: var(--rs-input-focus-border);
     }
@@ -118,7 +119,6 @@
   .rs-picker[data-variant='subtle'][data-disabled='true'] & {
     cursor: @cursor-disabled;
 
-    &:hover,
     &:focus,
     &:active {
       background: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-20250403",
+  "version": "6.0.0-canary-20250424",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -34,10 +34,11 @@
     "date-fns": "^4.1.0",
     "dom-lib": "^3.3.1",
     "lodash": "^4.17.21",
+    "react-textarea-autosize": "^8.5.9",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.11",
     "rsuite-table": "^5.19.1",
-    "schema-typed": "^2.4.1"
+    "schema-typed": "^2.4.2"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -59,7 +60,7 @@
   "size-limit": [
     {
       "path": "lib/dist/rsuite.min.js",
-      "limit": "280 kB",
+      "limit": "300 kB",
       "gzip": true
     }
   ]

package/styles/color-modes/dark.less

@@ -76,10 +76,10 @@
   --rs-bg-active: var(--rs-primary-700);
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
   --rs-state-hover-bg: var(--rs-gray-600);
-  --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-focus-outline: 3px solid rgb(from var(--rs-gray-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-color-focus-ring: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-focus-shadow: 0 0 0 2px rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-focus-outline: 2px solid rgb(from var(--rs-gray-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
 
   // Kbd
   --rs-kbd-bg: var(--rs-gray-600);
@@ -295,7 +295,7 @@
 
   // Rate
   --rs-rate-symbol: var(--rs-gray-600);
-  --rs-rate-symbol-checked: var(--rs-yellow-500);
+  --rs-rate-color: var(--rs-yellow-500);
 
   // Toggle
   --rs-toggle-bg: var(--rs-gray-500);
@@ -336,9 +336,6 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-badge-border: var(--rs-gray-900);
 
-  // Close Button
-  --rs-close-button-hover-color: var(--rs-color-red);
-
   // Tag
   --rs-tag-bg: var(--rs-gray-600);
 
@@ -407,9 +404,9 @@
   @supports not (color: rgb(from white r g b)) {
     // Misc
     --rs-bg-backdrop: fade(@B900-dark, 80%);
-    --rs-color-focus-ring: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-shadow: 0 0 0 3px fade(@H500-dark, 25%);
-    --rs-state-focus-outline: 3px solid fade(@H500-dark, 25%);
+    --rs-color-focus-ring: 0 0 0 2px fade(@H500-dark, 25%);
+    --rs-state-focus-shadow: 0 0 0 2px fade(@H500-dark, 25%);
+    --rs-state-focus-outline: 2px solid fade(@H500-dark, 25%);
 
     // Loader
     --rs-loader-ring: fade(@B050-dark, 30);

package/styles/color-modes/high-contrast.less

@@ -41,7 +41,7 @@
       --rs-@{color-name}-50: @@color-name-50;
 
       each(range(9), {
-        @level: @{index}00;
+        @level: ~'@{index}00';
         @color-name-level: ~'@{color-name}-@{level}-high-contrast';
         --rs-@{color-name}-@{level}: @@color-name-level;
       });
@@ -78,10 +78,10 @@
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 80%);
   --rs-state-hover-bg: var(--rs-gray-600);
   --rs-color-focus-ring: var(--rs-gray-0);
-  --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
+  --rs-state-focus-shadow: 0 0 0 2px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
   --rs-state-focus-shadow-slim: 0 0 0 2px var(--rs-gray-0);
-  --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-focus-outline: 2px solid rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
 
   // Kbd
   --rs-kbd-bg: var(--rs-gray-600);
@@ -300,7 +300,7 @@
 
   // Rate
   --rs-rate-symbol: var(--rs-gray-100);
-  --rs-rate-symbol-checked: var(--rs-primary-500);
+  --rs-rate-color: var(--rs-primary-500);
 
   // Toggle
   --rs-toggle-bg: var(--rs-gray-800);
@@ -342,9 +342,6 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-badge-border: var(--rs-gray-900);
 
-  // Close Button
-  --rs-close-button-hover-color: var(--rs-color-red);
-
   // Tag
   --rs-tag-bg: var(--rs-gray-600);
 

package/styles/color-modes/light.less

@@ -85,9 +85,9 @@
   --rs-bg-backdrop: rgb(from var(--rs-gray-900) r g b / 30%);
   --rs-state-hover-bg: var(--rs-primary-50);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-focus-outline: 3px solid rgb(from var(--rs-primary-500) r g b / 25%);
-  --rs-state-error-outline: 3px solid rgb(from var(--rs-color-red) r g b / 25%);
+  --rs-state-focus-shadow: 0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-focus-outline: 2px solid rgb(from var(--rs-primary-500) r g b / 25%);
+  --rs-state-error-outline: 2px solid rgb(from var(--rs-color-red) r g b / 25%);
 
   // Kbd
   --rs-kbd-bg: var(--rs-gray-50);
@@ -308,7 +308,7 @@
 
   // Rate
   --rs-rate-symbol: var(--rs-gray-600);
-  --rs-rate-symbol-checked: var(--rs-blue-500);
+  --rs-rate-color: var(--rs-blue-500);
 
   // Toggle
   --rs-toggle-bg: var(--rs-gray-500);
@@ -351,9 +351,6 @@
   --rs-badge-text: var(--rs-gray-0);
   --rs-badge-border: var(--rs-gray-0);
 
-  // Close Button
-  --rs-close-button-hover-color: var(--rs-color-red);
-
   // Tag
   --rs-tag-bg: var(--rs-gray-50);
 
@@ -425,8 +422,8 @@
     // Misc
     --rs-bg-backdrop: fade(@B900, 30%);
     --rs-color-focus-ring: fade(@H500, 25%);
-    --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
-    --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+    --rs-state-focus-shadow: 0 0 0 2px fade(@H500, 25%);
+    --rs-state-focus-outline: 2px solid fade(@H500, 25%);
 
     // Loader
     --rs-loader-ring: fade(@B050, 80);

package/styles/index.less

@@ -43,8 +43,9 @@
 @import '../Image/styles/index';
 @import '../Input/styles/index';
 @import '../InputGroup/styles/index';
-@import '../InputNumber/styles/index';
+@import '../NumberInput/styles/index';
 @import '../InputPicker/styles/index';
+@import '../Textarea/styles/index';
 @import '../InlineEdit/styles/index';
 @import '../Kbd/styles/index';
 @import '../Link/styles/index';
@@ -58,12 +59,14 @@
 @import '../Nav/styles/index';
 @import '../Navbar/styles/index';
 @import '../Notification/styles/index';
+@import '../PasswordStrengthMeter/styles/index';
 @import '../Pagination/styles/index';
 @import '../Panel/styles/index';
 @import '../PanelGroup/styles/index';
 @import '../Placeholder/styles/index';
 @import '../Popover/styles/index';
 @import '../Progress/styles/index';
+@import '../PinInput/styles/index';
 @import '../Radio/styles/index';
 @import '../RadioGroup/styles/index';
 @import '../RadioTile/styles/index';
@@ -100,3 +103,4 @@
 @import '../internals/Picker/styles/index';
 @import '../internals/SearchBox/styles/index';
 @import '../internals/Box/styles/index';
+@import '../internals/Burger/styles/index';

package/styles/mixins/utilities.less

@@ -124,11 +124,8 @@
 
 // Useful when appending the ring into an existing :focus rule
 .focus-ring() {
-  outline: 3px solid var(--rs-color-focus-ring);
-
-  .high-contrast-mode({
-    outline-offset: 2px;
-  });
+  outline: 2px solid var(--rs-color-focus-ring);
+  outline-offset: -1px;
 }
 
 .focus-ring(slim) {