rsuite 5.83.3 → 5.83.4

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [5.83.4](https://github.com/rsuite/rsuite/compare/v5.83.3...v5.83.4) (2025-11-10)
+
+
+### Bug Fixes
+
+* **docs:** the link in the theme is incorrect ([#4385](https://github.com/rsuite/rsuite/issues/4385)) ([7f23594](https://github.com/rsuite/rsuite/commit/7f235946bf378a78164f97aa0f0b4d61a39b8441))
+* label is wider than the text within vertical form layout ([#4392](https://github.com/rsuite/rsuite/issues/4392)) ([dcbfde2](https://github.com/rsuite/rsuite/commit/dcbfde20a13e89eb4e52e3f328a2698507fa3703))
+* **useToaster:** using toaster with React 19 ([#4420](https://github.com/rsuite/rsuite/issues/4420)) ([e90de05](https://github.com/rsuite/rsuite/commit/e90de058e82b7e855302c0f84f36a5bd7ce8eec6))
+
+
+
 ## [5.83.3](https://github.com/rsuite/rsuite/compare/v5.83.2...v5.83.3) (2025-08-04)
 
 

package/FormGroup/styles/index.css

@@ -35,6 +35,9 @@
 }
 .rs-form-vertical .rs-form-group .rs-form-control-label {
   display: block;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .rs-form-vertical .rs-form-group .rs-form-help-text:not(.rs-form-help-text-tooltip) {
   padding-top: 4px;

package/FormGroup/styles/index.less

@@ -26,6 +26,7 @@
 .rs-form-vertical .rs-form-group {
   .rs-form-control-label {
     display: block;
+    width: fit-content;
   }
 
   .rs-form-help-text:not(.rs-form-help-text-tooltip) {

package/cjs/index.d.ts

@@ -195,6 +195,8 @@ export type { Locale, CalendarLocale, PlaintextLocale, PaginationLocale, TableLo
 export type { PickerHandle } from './internals/Picker';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useBreakpointValue } from './useBreakpointValue';
+export { default as CreateRootContextProvider } from './useCreateRoot';
+export type { ReactRoot, CreateRootFn } from './useCreateRoot';
 export { default as VisuallyHidden } from './VisuallyHidden';
 export type { VisuallyHiddenProps } from './VisuallyHidden';
 export { default as Tabs } from './Tabs';

package/cjs/index.js

@@ -3,8 +3,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.VisuallyHidden = exports.VStack = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.TimeRangePicker = exports.TimePicker = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.StatGroup = exports.Stat = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.Image = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.HStack = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.CardGroup = exports.Card = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
-exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = exports.Whisper = void 0;
+exports.VStack = exports.Uploader = exports.TreePicker = exports.Tree = exports.Tooltip = exports.Toggle = exports.Timeline = exports.TimeRangePicker = exports.TimePicker = exports.Text = exports.TagPicker = exports.TagInput = exports.TagGroup = exports.Tag = exports.Tabs = exports.Table = exports.Steps = exports.StatGroup = exports.Stat = exports.Stack = exports.Slider = exports.Sidenav = exports.Sidebar = exports.SelectPicker = exports.Schema = exports.SafeAnchor = exports.Row = exports.Rate = exports.RangeSlider = exports.RadioTileGroup = exports.RadioTile = exports.RadioGroup = exports.Radio = exports.Progress = exports.Popover = exports.Placeholder = exports.PanelGroup = exports.Panel = exports.Pagination = exports.Notification = exports.Navbar = exports.Nav = exports.MultiCascader = exports.MultiCascadeTree = exports.Modal = exports.Message = exports.MaskedInput = exports.Loader = exports.List = exports.InputPicker = exports.InputNumber = exports.InputGroup = exports.Input = exports.InlineEdit = exports.Image = exports.IconButton = exports.Highlight = exports.HeadingGroup = exports.Heading = exports.Header = exports.HStack = exports.Grid = exports.Form = exports.Footer = exports.FlexboxGrid = exports.Dropdown = exports.Drawer = exports.Divider = exports.DateRangePicker = exports.DateRangeInput = exports.DatePicker = exports.DateInput = exports.DOMHelper = exports.CustomProvider = exports.CreateRootContextProvider = exports.Content = exports.Container = exports.Col = exports.CheckboxGroup = exports.Checkbox = exports.CheckTreePicker = exports.CheckTree = exports.CheckPicker = exports.Cascader = exports.CascadeTree = exports.Carousel = exports.CardGroup = exports.Card = exports.Calendar = exports.ButtonToolbar = exports.ButtonGroup = exports.Button = exports.Breadcrumb = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.AutoComplete = exports.Animation = exports.Affix = exports.Accordion = void 0;
+exports.useToaster = exports.useMediaQuery = exports.useFormClassNames = exports.useBreakpointValue = exports.toaster = exports.Whisper = exports.VisuallyHidden = void 0;
 var _Text = _interopRequireDefault(require("./Text"));
 exports.Text = _Text.default;
 var _Heading = _interopRequireDefault(require("./Heading"));
@@ -208,6 +208,8 @@ var _useMediaQuery = _interopRequireDefault(require("./useMediaQuery"));
 exports.useMediaQuery = _useMediaQuery.default;
 var _useBreakpointValue = _interopRequireDefault(require("./useBreakpointValue"));
 exports.useBreakpointValue = _useBreakpointValue.default;
+var _useCreateRoot = _interopRequireDefault(require("./useCreateRoot"));
+exports.CreateRootContextProvider = _useCreateRoot.default;
 var _VisuallyHidden = _interopRequireDefault(require("./VisuallyHidden"));
 exports.VisuallyHidden = _VisuallyHidden.default;
 var _Tabs = _interopRequireDefault(require("./Tabs"));

package/cjs/toaster/ToastContainer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+import { CreateRootFn } from '../useCreateRoot';
 export declare const defaultToasterContainer: () => HTMLElement | null;
 export type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
 export declare const toastPlacements: PlacementType[];
@@ -42,7 +43,9 @@ export type GetInstancePropsType = Omit<ToastContainerProps, 'container' | 'plac
     placement: PlacementType;
 };
 interface ToastContainerComponent extends RsRefForwardingComponent<'div', ToastContainerProps> {
-    getInstance: (props: GetInstancePropsType) => Promise<[React.RefObject<ToastContainerInstance>, string]>;
+    getInstance: (props: GetInstancePropsType & {
+        userCreateRoot?: CreateRootFn;
+    }) => Promise<[React.RefObject<ToastContainerInstance>, string]>;
 }
 declare const ToastContainer: ToastContainerComponent;
 export default ToastContainer;

package/cjs/toaster/ToastContainer.js

@@ -19,7 +19,7 @@ var _utils = require("../internals/utils");
 var _render = require("./render");
 var _excluded = ["as", "className", "classPrefix", "placement"],
   _excluded2 = ["className"],
-  _excluded3 = ["container"];
+  _excluded3 = ["container", "userCreateRoot"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var defaultToasterContainer = exports.defaultToasterContainer = function defaultToasterContainer() {
@@ -160,11 +160,11 @@ var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 });
 ToastContainer.getInstance = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(props) {
-    var container, rest, getRefResolve, getRefPromise, containerRef, containerId;
+    var container, userCreateRoot, rest, getRefResolve, getRefPromise, containerRef, containerId;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          container = props.container, rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+          container = props.container, userCreateRoot = props.userCreateRoot, rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
           getRefResolve = null;
           getRefPromise = new Promise(function (res) {
             getRefResolve = res;
@@ -175,7 +175,7 @@ ToastContainer.getInstance = /*#__PURE__*/function () {
               containerRef.current = _ref3;
               getRefResolve && getRefResolve();
             }
-          })), container);
+          })), container, userCreateRoot);
           _context.next = 7;
           return getRefPromise;
         case 7:

package/cjs/toaster/render.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import type { CreateRootFn } from '../useCreateRoot';
 export declare const toasterKeyOfContainerElement = "toasterId";
-export declare function render(element: React.ReactElement<any>, container: HTMLElement | null): string;
+export declare function render(element: React.ReactElement<any>, container: HTMLElement | null, userCreateRoot?: CreateRootFn): string;

package/cjs/toaster/render.js

@@ -13,7 +13,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var majorVersion = parseInt(_react.default.version);
 var SuperposedReactDOM = ReactDOM;
 var toasterKeyOfContainerElement = exports.toasterKeyOfContainerElement = 'toasterId';
-function render(element, container) {
+function getCreateRoot(userCreateRoot) {
+  if (userCreateRoot) return userCreateRoot;
+  if (majorVersion === 19) {
+    console.info('Use CreateRootContextProvider to pass createRoot function from react-dom/client');
+  }
+
+  // just to disable the rspack warning
+  var secretInternals = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED';
+  /**
+   * ignore react 18 warnings
+   * Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
+   */
+  ReactDOM[secretInternals].usingClientEntryPoint = true;
+  return SuperposedReactDOM.createRoot;
+}
+function render(element, container, userCreateRoot) {
   var mountElement = document.createElement('div');
   mountElement.className = 'rs-toaster-mount-element';
   var containerElement = container;
@@ -26,12 +41,7 @@ function render(element, container) {
     containerElement[toasterKeyOfContainerElement] = newContainerId;
   }
   if (majorVersion >= 18) {
-    /**
-     * ignore react 18 warnings
-     * Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
-     */
-    ReactDOM['__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'].usingClientEntryPoint = true;
-    var createRoot = SuperposedReactDOM.createRoot;
+    var createRoot = getCreateRoot(userCreateRoot);
     var root = createRoot(mountElement, {
       identifierPrefix: 'rs-root-'
     });

package/cjs/toaster/toaster.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ToastContainerProps } from './ToastContainer';
+import type { CreateRootFn } from '../useCreateRoot';
 export interface Toaster {
     /**
      * Push a toast message.
@@ -7,9 +8,10 @@ export interface Toaster {
      *                eg: `<Message type="success" description="Success" />` or `<Notification type="success" closable>Success</Notification>`
      * @param options The options of the toast message. (optional)
      *                eg: `{ placement: 'topCenter', duration: 5000 }`
+     * @param userCreateRoot React DOM's createRoot function
      * @returns The key of the toast message.
      */
-    push(message: React.ReactNode, options?: ToastContainerProps): string | undefined | Promise<string | undefined>;
+    push(message: React.ReactNode, options?: ToastContainerProps, userCreateRoot?: CreateRootFn): string | undefined | Promise<string | undefined>;
     /**
      * Remove a toast message.
      * @param key  The key of the toast message.

package/cjs/toaster/toaster.js

@@ -19,8 +19,9 @@ var containers = new Map();
  * Create a container instance.
  * @param placement
  * @param props
+ * @param userCreateRoot
  */
-function createContainer(_x, _x2) {
+function createContainer(_x, _x2, _x3) {
   return _createContainer.apply(this, arguments);
 }
 /**
@@ -29,13 +30,15 @@ function createContainer(_x, _x2) {
  * @param placement
  */
 function _createContainer() {
-  _createContainer = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(placement, props) {
+  _createContainer = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(placement, props, userCreateRoot) {
     var _yield$ToastContainer, container, containerId;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.next = 2;
-          return _ToastContainer.default.getInstance(props);
+          return _ToastContainer.default.getInstance((0, _extends2.default)({}, props, {
+            userCreateRoot: userCreateRoot
+          }));
         case 2:
           _yield$ToastContainer = _context.sent;
           container = _yield$ToastContainer[0];
@@ -56,7 +59,7 @@ function getContainer(containerId, placement) {
 var _toaster = function toaster(message) {
   return _toaster.push(message);
 };
-_toaster.push = function (message, options) {
+_toaster.push = function (message, options, userCreateRoot) {
   if (options === void 0) {
     options = {};
   }
@@ -79,7 +82,7 @@ _toaster.push = function (message, options) {
     container: containerElement,
     placement: placement
   });
-  return createContainer(placement, newOptions).then(function (ref) {
+  return createContainer(placement, newOptions, userCreateRoot).then(function (ref) {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.push(message, restOptions);
   });

package/cjs/useCreateRoot/index.d.ts

@@ -0,0 +1,4 @@
+import { CreateRootContextProvider } from './useCreateRoot';
+export { useCreateRoot } from './useCreateRoot';
+export type { ReactRoot, CreateRootFn } from './useCreateRoot';
+export default CreateRootContextProvider;

package/cjs/useCreateRoot/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.useCreateRoot = exports.default = void 0;
+var _useCreateRoot = require("./useCreateRoot");
+exports.useCreateRoot = _useCreateRoot.useCreateRoot;
+var _default = exports.default = _useCreateRoot.CreateRootContextProvider;

package/cjs/useCreateRoot/useCreateRoot.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { Container } from 'react-dom';
+export interface ReactRoot {
+    render(children: ReactNode): void;
+    unmount(): void;
+}
+export type CreateRootFn = (container: Container, options?: any) => ReactRoot;
+export declare function useCreateRoot(): CreateRootFn | undefined;
+export declare const CreateRootContextProvider: import("react").Provider<CreateRootFn | null>;
+export default CreateRootContextProvider;

package/cjs/useCreateRoot/useCreateRoot.js

@@ -0,0 +1,13 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.CreateRootContextProvider = void 0;
+exports.useCreateRoot = useCreateRoot;
+var _react = require("react");
+var CreateRootContext = /*#__PURE__*/(0, _react.createContext)(null);
+function useCreateRoot() {
+  return (0, _react.useContext)(CreateRootContext) || undefined;
+}
+var CreateRootContextProvider = exports.CreateRootContextProvider = CreateRootContext.Provider;
+var _default = exports.default = CreateRootContextProvider;

package/cjs/useToaster/useToaster.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("react");
 var _toaster = _interopRequireDefault(require("../toaster"));
 var _CustomContext = require("../CustomProvider/CustomContext");
+var _useCreateRoot = require("../useCreateRoot");
 // From CustomProvider/CustomProvider.tsx import CustomContext instead of directly from 'CustomProvider/index.ts'
 // because babel compiles commonjs, which causes CustomContext to be undefined
 
@@ -21,6 +22,7 @@ var useToaster = function useToaster() {
   var _useContext = (0, _react.useContext)(_CustomContext.CustomContext),
     toasters = _useContext.toasters,
     toastContainer = _useContext.toastContainer;
+  var userCreateRoot = (0, _useCreateRoot.useCreateRoot)();
   return (0, _react.useMemo)(function () {
     return {
       /**
@@ -37,7 +39,7 @@ var useToaster = function useToaster() {
           var _toasters$current;
           return toasters === null || toasters === void 0 || (_toasters$current = toasters.current) === null || _toasters$current === void 0 || (_toasters$current = _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter')) === null || _toasters$current === void 0 ? void 0 : _toasters$current.push(message, options);
         } else {
-          return _toaster.default.push(message, options);
+          return _toaster.default.push(message, options, userCreateRoot);
         }
       },
       /**
@@ -60,6 +62,6 @@ var useToaster = function useToaster() {
         }) : _toaster.default.clear();
       }
     };
-  }, [toastContainer, toasters]);
+  }, [toastContainer, toasters, userCreateRoot]);
 };
 var _default = exports.default = useToaster;

package/dist/rsuite-no-reset-rtl.css

@@ -5976,6 +5976,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 }
 .rs-form-vertical .rs-form-group .rs-form-control-label {
   display: block;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .rs-form-vertical .rs-form-group .rs-form-help-text:not(.rs-form-help-text-tooltip) {
   padding-top: 4px;