rsuite 6.0.0-canary-20251029 → 6.0.0

package/esm/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/esm/Badge/Badge.js

@@ -25,6 +25,7 @@ const Badge = forwardRef((props, ref) => {
     outline = true,
     placement = 'topEnd',
     shape,
+    size = 'md',
     style,
     invisible,
     ...rest
@@ -52,9 +53,10 @@ const Badge = 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.createElement(Box, _extends({
       as: as,

package/esm/Breadcrumb/Breadcrumb.js

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

package/esm/CheckPicker/CheckPicker.js

@@ -46,6 +46,7 @@ const CheckPicker = forwardRef((props, ref) => {
     searchable = true,
     sticky,
     style,
+    size,
     toggleAs,
     value: valueProp,
     valueKey = 'value',
@@ -204,7 +205,8 @@ const CheckPicker = 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 && isFunction(renderValue)) {
@@ -304,7 +306,8 @@ const CheckPicker = 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/esm/CheckTreePicker/CheckTreePicker.js

@@ -55,6 +55,7 @@ const CheckTreePicker = forwardRef((props, ref) => {
     showIndentLine,
     searchable = true,
     style,
+    size,
     valueKey = 'value',
     value: controlledValue,
     virtualized = false,
@@ -268,7 +269,8 @@ const CheckTreePicker = forwardRef((props, ref) => {
       childrenKey: childrenKey,
       prefix: prefix,
       cascade: cascade,
-      locale: locale
+      locale: locale,
+      badgeSize: size
     });
     if (isFunction(renderValue)) {
       selectedElement = renderValue(value, selectedNodes, selectedElement);
@@ -310,7 +312,8 @@ const CheckTreePicker = 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/esm/DatePicker/Toolbar.js

@@ -46,10 +46,13 @@ const Toolbar = /*#__PURE__*/React.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.createElement(Stack, _extends({
     ref: ref,
     className: classes,
-    justify: "space-between",
+    justify: justify,
     align: "flex-start"
   }, rest), /*#__PURE__*/React.createElement(PredefinedRanges, {
     wrap: true,

package/esm/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/esm/Modal/Modal.js

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

package/esm/Modal/utils.js

@@ -15,7 +15,6 @@ export const useBodyStyles = (ref, options) => {
   const contentElementResizeObserver = useRef(null);
   const updateBodyStyles = useCallback((_event, entering) => {
     const dialog = ref.current;
-    const scrollHeight = dialog ? dialog.scrollHeight : 0;
     const styles = {
       overflow: 'auto'
     };
@@ -28,13 +27,33 @@ export const useBodyStyles = (ref, options) => {
       headerHeight = headerDOM ? getHeight(headerDOM) + headerHeight : headerHeight;
       footerHeight = footerDOM ? getHeight(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 = getHeight(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/esm/MultiCascader/MultiCascader.js

@@ -54,6 +54,7 @@ const MultiCascader = forwardRef((props, ref) => {
     renderValue,
     searchable = true,
     style,
+    size,
     toggleAs,
     uncheckableItemValues = emptyArray,
     value: valueProp,
@@ -270,7 +271,8 @@ const MultiCascader = forwardRef((props, ref) => {
       childrenKey: childrenKey,
       prefix: prefix,
       cascade: cascade,
-      locale: locale
+      locale: locale,
+      badgeSize: size
     });
   }
 
@@ -319,7 +321,8 @@ const MultiCascader = 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/esm/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/esm/internals/Picker/SelectedElement.js

@@ -11,7 +11,8 @@ const SelectedElement = props => {
     childrenKey = 'children',
     countable,
     cascade,
-    locale
+    locale,
+    badgeSize
   } = props;
   const count = selectedItems.length;
   let title = '';
@@ -41,7 +42,8 @@ const SelectedElement = props => {
   })), countable ? /*#__PURE__*/React.createElement(Badge, {
     className: prefix('value-count'),
     title: `${count}`,
-    content: count > 99 ? '99+' : count
+    content: count > 99 ? '99+' : count,
+    size: badgeSize
   }) : null);
 };
 export default SelectedElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "6.0.0-canary-20251029",
+  "version": "6.0.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",