rsuite 6.0.0-canary-20251029 → 6.0.0

package/Modal/styles/index.css

@@ -215,6 +215,11 @@ body{
 .rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-footer{
   flex:0 0 auto;
 }
+.rs-modal.rs-modal-fill .rs-modal-dialog,
+.rs-modal.rs-modal-fill .rs-modal-body{
+  margin:0;
+  padding:0;
+}
 .rs-modal .rs-modal-dialog{
   position:relative;
   background-color:var(--rs-bg-overlay);

package/Nav/styles/index.css

@@ -1709,6 +1709,10 @@ body{
   bottom:auto;
   top:0;
 }
+.rs-nav[data-appearance=subtle][data-direction=vertical]{
+  display:flex;
+  flex-direction:column;
+}
 .rs-nav[data-appearance=subtle][data-direction=vertical] .rs-nav-bar{
   width:2px;
   background:var(--rs-navs-subtle-border);

package/Pagination/styles/index.css

@@ -2483,10 +2483,33 @@ body{
 }
 
 .rs-pagination-group{
-  --pagination-group-gap:calc(var(--rs-spacing) * 2.5);
+  --rs-pagination-font-size-xs:var(--rs-font-size-xs);
+  --rs-pagination-font-size-sm:var(--rs-font-size-sm);
+  --rs-pagination-font-size-md:var(--rs-font-size-sm);
+  --rs-pagination-font-size-lg:var(--rs-font-size-md);
+  --rs-pagination-group-gap:calc(var(--rs-spacing) * 2.5);
   display:flex;
   align-items:center;
-  gap:var(--pagination-group-gap);
+  gap:var(--rs-pagination-group-gap);
+}
+.rs-pagination-group-total, .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-md);
+}
+.rs-pagination-group[data-size=xs] .rs-pagination-group-total,
+.rs-pagination-group[data-size=xs] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-xs);
+}
+.rs-pagination-group[data-size=sm] .rs-pagination-group-total,
+.rs-pagination-group[data-size=sm] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-sm);
+}
+.rs-pagination-group[data-size=md] .rs-pagination-group-total,
+.rs-pagination-group[data-size=md] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-md);
+}
+.rs-pagination-group[data-size=lg] .rs-pagination-group-total,
+.rs-pagination-group[data-size=lg] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-lg);
 }
 .rs-pagination-group-grow{
   flex-grow:1;

package/Tabs/styles/index.css

@@ -1709,6 +1709,10 @@ body{
   bottom:auto;
   top:0;
 }
+.rs-nav[data-appearance=subtle][data-direction=vertical]{
+  display:flex;
+  flex-direction:column;
+}
 .rs-nav[data-appearance=subtle][data-direction=vertical] .rs-nav-bar{
   width:2px;
   background:var(--rs-navs-subtle-border);

package/cjs/Badge/Badge.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-import type { Color, PlacementCorners } from '../internals/types';
+import type { Color, PlacementCorners, Size } from '../internals/types';
 export interface BadgeProps extends BoxProps {
     /**
      * The content of the badge
@@ -33,6 +33,10 @@ export interface BadgeProps extends BoxProps {
      * @version 6.0.0
      */
     shape?: 'rectangle' | 'circle';
+    /**
+     * A badge can have different sizes
+     */
+    size?: Size;
     /**
      * Define the horizontal and vertical offset of the badge relative to its wrapped element
      * @version 6.0.0

package/cjs/Badge/Badge.js

@@ -31,6 +31,7 @@ const Badge = (0, _utils.forwardRef)((props, ref) => {
     outline = true,
     placement = 'topEnd',
     shape,
+    size = 'md',
     style,
     invisible,
     ...rest
@@ -58,9 +59,10 @@ const Badge = (0, _utils.forwardRef)((props, ref) => {
       ['data-outline']: outline,
       ['data-hidden']: invisible,
       ['data-independent']: !children,
-      ['data-placement']: children ? placement : undefined
+      ['data-placement']: children ? placement : undefined,
+      ['data-size']: size
     };
-  }, [color, shape, compact, isOneChar, outline, invisible, children, placement]);
+  }, [color, shape, compact, isOneChar, outline, invisible, children, placement, size]);
   if (!children) {
     return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
       as: as,

package/cjs/Breadcrumb/Breadcrumb.js

@@ -36,7 +36,7 @@ const Breadcrumb = (0, _utils.forwardRef)((props, ref) => {
     ellipsis = '...',
     maxItems = 5,
     separator = '/',
-    size = 'md',
+    size,
     locale,
     onExpand,
     ...rest

package/cjs/CheckPicker/CheckPicker.js

@@ -52,6 +52,7 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     searchable = true,
     sticky,
     style,
+    size,
     toggleAs,
     value: valueProp,
     valueKey = 'value',
@@ -210,7 +211,8 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
       countable: countable,
       valueKey: valueKey,
       labelKey: labelKey,
-      prefix: prefix
+      prefix: prefix,
+      badgeSize: size
     });
   }
   if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (0, _isFunction.default)(renderValue)) {
@@ -310,7 +312,8 @@ const CheckPicker = (0, _utils2.forwardRef)((props, ref) => {
     active: active,
     placement: placement,
     inputValue: value,
-    focusItemValue: focusItemValue
+    focusItemValue: focusItemValue,
+    size: size
   }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 CheckPicker.displayName = 'CheckPicker';

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -61,6 +61,7 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     showIndentLine,
     searchable = true,
     style,
+    size,
     valueKey = 'value',
     value: controlledValue,
     virtualized = false,
@@ -274,7 +275,8 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
       childrenKey: childrenKey,
       prefix: prefix,
       cascade: cascade,
-      locale: locale
+      locale: locale,
+      badgeSize: size
     });
     if ((0, _isFunction.default)(renderValue)) {
       selectedElement = renderValue(value, selectedNodes, selectedElement);
@@ -316,7 +318,8 @@ const CheckTreePicker = (0, _utils.forwardRef)((props, ref) => {
     active: active,
     placement: placement,
     inputValue: value,
-    focusItemValue: focusItemValue
+    focusItemValue: focusItemValue,
+    size: size
   }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 CheckTreePicker.displayName = 'CheckTreePicker';

package/cjs/DatePicker/Toolbar.js

@@ -51,10 +51,13 @@ const Toolbar = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     return null;
   }
   const classes = merge(className, withPrefix());
+
+  // If there are no ranges, the ok button should be aligned to the right
+  const justify = (ranges === null || ranges === void 0 ? void 0 : ranges.length) === 0 ? 'flex-end' : 'space-between';
   return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
     ref: ref,
     className: classes,
-    justify: "space-between",
+    justify: justify,
     align: "flex-start"
   }, rest), /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
     wrap: true,

package/cjs/Modal/Modal.d.ts

@@ -27,6 +27,11 @@ export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HT
     isDrawer?: boolean;
     /** Custom close button, used when rendered as a Drawer */
     closeButton?: React.ReactNode | boolean;
+    /**
+     * Remove default padding from the dialog and body so the content can occupy the full height.
+     * Useful for creating custom layouts with full-width/height content like split panels or image galleries.
+     */
+    bodyFill?: boolean;
 }
 /**
  * The `Modal` component is used to show content in a layer above the app.

package/cjs/Modal/Modal.js

@@ -46,6 +46,7 @@ const Modal = (0, _utils.forwardRef)((props, ref) => {
     'aria-describedby': ariaDescribedby,
     backdropClassName,
     backdrop = true,
+    bodyFill,
     className,
     classPrefix = 'modal',
     centered,
@@ -77,6 +78,7 @@ const Modal = (0, _utils.forwardRef)((props, ref) => {
   const [shake, setShake] = (0, _react.useState)(false);
   const classes = merge(className, prefix({
     full,
+    fill: bodyFill,
     [size]: modalSizes.includes(size)
   }));
   const dialogRef = (0, _react.useRef)(null);

package/cjs/Modal/utils.js

@@ -20,7 +20,6 @@ const useBodyStyles = (ref, options) => {
   const contentElementResizeObserver = (0, _react.useRef)(null);
   const updateBodyStyles = (0, _react.useCallback)((_event, entering) => {
     const dialog = ref.current;
-    const scrollHeight = dialog ? dialog.scrollHeight : 0;
     const styles = {
       overflow: 'auto'
     };
@@ -33,13 +32,33 @@ const useBodyStyles = (ref, options) => {
       headerHeight = headerDOM ? (0, _getHeight.default)(headerDOM) + headerHeight : headerHeight;
       footerHeight = footerDOM ? (0, _getHeight.default)(footerDOM) + footerHeight : footerHeight;
 
+      // Get the actual margin from the modal element itself (.rs-modal)
+      const computedStyle = window.getComputedStyle(dialog);
+      const marginTop = parseFloat(computedStyle.marginTop) || 0;
+      const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
+      const dialogMargin = marginTop + marginBottom;
+
+      // Get padding from the wrapper if needed
+      const wrapper = dialog.parentElement;
+      let wrapperPadding = 0;
+      if (wrapper) {
+        const wrapperStyle = window.getComputedStyle(wrapper);
+        const paddingTop = parseFloat(wrapperStyle.paddingTop) || 0;
+        const paddingBottom = parseFloat(wrapperStyle.paddingBottom) || 0;
+        wrapperPadding = paddingTop + paddingBottom;
+      }
+
+      // Add extra space during entering animation (10px buffer)
+      const extraSpace = entering ? 10 : 0;
+
       /**
-       * Header height + Footer height + Dialog margin
+       * Header height + Footer height + Dialog margin + Wrapper padding + Extra space
        */
-      const excludeHeight = headerHeight + footerHeight + (entering ? 70 : 60);
+      const excludeHeight = headerHeight + footerHeight + dialogMargin + wrapperPadding + extraSpace;
       const bodyHeight = (0, _getHeight.default)(window) - excludeHeight;
-      const maxHeight = scrollHeight >= bodyHeight ? bodyHeight : scrollHeight;
-      styles.maxHeight = maxHeight;
+
+      // Always set maxHeight to available space, let browser handle content that's smaller
+      styles.maxHeight = bodyHeight;
     }
     setBodyStyles(styles);
   }, [prefix, ref]);

package/cjs/MultiCascader/MultiCascader.js

@@ -60,6 +60,7 @@ const MultiCascader = (0, _utils3.forwardRef)((props, ref) => {
     renderValue,
     searchable = true,
     style,
+    size,
     toggleAs,
     uncheckableItemValues = emptyArray,
     value: valueProp,
@@ -276,7 +277,8 @@ const MultiCascader = (0, _utils3.forwardRef)((props, ref) => {
       childrenKey: childrenKey,
       prefix: prefix,
       cascade: cascade,
-      locale: locale
+      locale: locale,
+      badgeSize: size
     });
   }
 
@@ -325,7 +327,8 @@ const MultiCascader = (0, _utils3.forwardRef)((props, ref) => {
     hasValue: hasValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    size: size
   }, rest), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder)));
 });
 MultiCascader.displayName = 'MultiCascader';

package/cjs/internals/Picker/SelectedElement.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { PickerLocale } from '../../locales';
+import type { Size } from '../types';
 export interface SelectedElementProps {
+    badgeSize?: Size;
     selectedItems: any[];
     valueKey: string;
     labelKey: string;

package/cjs/internals/Picker/SelectedElement.js

@@ -16,7 +16,8 @@ const SelectedElement = props => {
     childrenKey = 'children',
     countable,
     cascade,
-    locale
+    locale,
+    badgeSize
   } = props;
   const count = selectedItems.length;
   let title = '';
@@ -46,7 +47,8 @@ const SelectedElement = props => {
   })), countable ? /*#__PURE__*/_react.default.createElement(_Badge.default, {
     className: prefix('value-count'),
     title: `${count}`,
-    content: count > 99 ? '99+' : count
+    content: count > 99 ? '99+' : count,
+    size: badgeSize
   }) : null);
 };
 var _default = exports.default = SelectedElement;

package/dist/rsuite-no-reset.css

@@ -3685,11 +3685,33 @@ tbody.rs-anim-collapse.rs-anim-in{
 }
 
 .rs-badge{
+  --rs-badge-font-size-xs:0.625rem;
+  --rs-badge-font-size-sm:0.6875rem;
+  --rs-badge-font-size-md:0.75rem;
+  --rs-badge-font-size-lg:0.875rem;
+  --rs-badge-font-size-xl:1rem;
+  --rs-badge-line-height-xs:0.875rem;
+  --rs-badge-line-height-sm:0.9375rem;
+  --rs-badge-line-height-md:1rem;
+  --rs-badge-line-height-lg:1.125rem;
+  --rs-badge-line-height-xl:1.25rem;
+  --rs-badge-one-char-size-xs:1rem;
+  --rs-badge-one-char-size-sm:1.125rem;
+  --rs-badge-one-char-size-md:1.25rem;
+  --rs-badge-one-char-size-lg:1.5rem;
+  --rs-badge-one-char-size-xl:1.75rem;
+  --rs-badge-dot-size-xs:0.375rem;
+  --rs-badge-dot-size-sm:0.5rem;
+  --rs-badge-dot-size-md:0.625rem;
+  --rs-badge-dot-size-lg:0.75rem;
+  --rs-badge-dot-size-xl:0.875rem;
   --rs-badge-offset-x:5%;
   --rs-badge-offset-y:5%;
   --rs-badge-move:var(--rs-badge-offset, 40%);
-  --rs-badge-one-char-size:20px;
-  --rs-badge-dot-size:10px;
+  --rs-badge-one-char-size:var(--rs-badge-one-char-size-md);
+  --rs-badge-dot-size:var(--rs-badge-dot-size-md);
+  --rs-badge-font-size:var(--rs-badge-font-size-md);
+  --rs-badge-line-height:var(--rs-badge-line-height-md);
   --rs-badge-transform-top-start:translate(calc(-1 * var(--rs-badge-move)), calc(-1 * var(--rs-badge-move)));
   --rs-badge-transform-top-end:translate(var(--rs-badge-move), calc(-1 * var(--rs-badge-move)));
   --rs-badge-transform-bottom-start:translate(calc(-1 * var(--rs-badge-move)), var(--rs-badge-move));
@@ -3721,14 +3743,15 @@ tbody.rs-anim-collapse.rs-anim-in{
   background-color:var(--rs-badge-bg);
   color:var(--rs-badge-text);
   border-radius:var(--rs-radius-full);
-  font-size:var(--rs-font-size-xs);
-  line-height:1rem;
+  font-size:var(--rs-badge-font-size);
+  line-height:var(--rs-badge-line-height);
   padding-inline:0.3125rem;
   transition:opacity 0.3s ease-in-out;
 }
 .rs-badge[data-one-char=true] .rs-badge-content, .rs-badge[data-one-char=true][data-independent=true]{
   width:var(--rs-badge-one-char-size);
   height:var(--rs-badge-one-char-size);
+  line-height:var(--rs-badge-one-char-size);
 }
 .rs-badge-content{
   box-sizing:border-box;
@@ -3806,12 +3829,47 @@ tbody.rs-anim-collapse.rs-anim-in{
   --rs-badge-bg:var(--rs-pink-500);
 }
 
+.rs-badge[data-size=xs]{
+  --rs-badge-font-size:var(--rs-badge-font-size-xs);
+  --rs-badge-line-height:var(--rs-badge-line-height-xs);
+  --rs-badge-one-char-size:var(--rs-badge-one-char-size-xs);
+  --rs-badge-dot-size:var(--rs-badge-dot-size-xs);
+}
+
+.rs-badge[data-size=sm]{
+  --rs-badge-font-size:var(--rs-badge-font-size-sm);
+  --rs-badge-line-height:var(--rs-badge-line-height-sm);
+  --rs-badge-one-char-size:var(--rs-badge-one-char-size-sm);
+  --rs-badge-dot-size:var(--rs-badge-dot-size-sm);
+}
+
+.rs-badge[data-size=md]{
+  --rs-badge-font-size:var(--rs-badge-font-size-md);
+  --rs-badge-line-height:var(--rs-badge-line-height-md);
+  --rs-badge-one-char-size:var(--rs-badge-one-char-size-md);
+  --rs-badge-dot-size:var(--rs-badge-dot-size-md);
+}
+
+.rs-badge[data-size=lg]{
+  --rs-badge-font-size:var(--rs-badge-font-size-lg);
+  --rs-badge-line-height:var(--rs-badge-line-height-lg);
+  --rs-badge-one-char-size:var(--rs-badge-one-char-size-lg);
+  --rs-badge-dot-size:var(--rs-badge-dot-size-lg);
+}
+
+.rs-badge[data-size=xl]{
+  --rs-badge-font-size:var(--rs-badge-font-size-xl);
+  --rs-badge-line-height:var(--rs-badge-line-height-xl);
+  --rs-badge-one-char-size:var(--rs-badge-one-char-size-xl);
+  --rs-badge-dot-size:var(--rs-badge-dot-size-xl);
+}
+
 .rs-breadcrumb{
   --rs-breadcrumb-spacing:var(--rs-spacing);
   --rs-breadcrumb-size-sm:var(--rs-font-size-xs);
   --rs-breadcrumb-size-md:var(--rs-font-size-sm);
   --rs-breadcrumb-size-lg:var(--rs-font-size-md);
-  --rs-breadcrumb-size:var(--rs-breadcrumb-size-sm);
+  --rs-breadcrumb-size:var(--rs-breadcrumb-size-md);
   font-size:var(--rs-breadcrumb-size);
   color:var(--rs-text-secondary);
 }
@@ -10130,6 +10188,11 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
 .rs-modal.rs-modal-full .rs-modal-dialog .rs-modal-footer{
   flex:0 0 auto;
 }
+.rs-modal.rs-modal-fill .rs-modal-dialog,
+.rs-modal.rs-modal-fill .rs-modal-body{
+  margin:0;
+  padding:0;
+}
 .rs-modal .rs-modal-dialog{
   position:relative;
   background-color:var(--rs-bg-overlay);
@@ -10467,6 +10530,10 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
   bottom:auto;
   top:0;
 }
+.rs-nav[data-appearance=subtle][data-direction=vertical]{
+  display:flex;
+  flex-direction:column;
+}
 .rs-nav[data-appearance=subtle][data-direction=vertical] .rs-nav-bar{
   width:2px;
   background:var(--rs-navs-subtle-border);
@@ -10978,10 +11045,33 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before{
 }
 
 .rs-pagination-group{
-  --pagination-group-gap:calc(var(--rs-spacing) * 2.5);
+  --rs-pagination-font-size-xs:var(--rs-font-size-xs);
+  --rs-pagination-font-size-sm:var(--rs-font-size-sm);
+  --rs-pagination-font-size-md:var(--rs-font-size-sm);
+  --rs-pagination-font-size-lg:var(--rs-font-size-md);
+  --rs-pagination-group-gap:calc(var(--rs-spacing) * 2.5);
   display:flex;
   align-items:center;
-  gap:var(--pagination-group-gap);
+  gap:var(--rs-pagination-group-gap);
+}
+.rs-pagination-group-total, .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-md);
+}
+.rs-pagination-group[data-size=xs] .rs-pagination-group-total,
+.rs-pagination-group[data-size=xs] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-xs);
+}
+.rs-pagination-group[data-size=sm] .rs-pagination-group-total,
+.rs-pagination-group[data-size=sm] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-sm);
+}
+.rs-pagination-group[data-size=md] .rs-pagination-group-total,
+.rs-pagination-group[data-size=md] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-md);
+}
+.rs-pagination-group[data-size=lg] .rs-pagination-group-total,
+.rs-pagination-group[data-size=lg] .rs-pagination-group-skip{
+  font-size:var(--rs-pagination-font-size-lg);
 }
 .rs-pagination-group-grow{
   flex-grow:1;