rsuite 5.83.2 → 5.83.4

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

@@ -123,7 +123,7 @@ export { default as CustomProvider } from "./CustomProvider/index.js";
 
 export { default as useMediaQuery } from "./useMediaQuery/index.js";
 export { default as useBreakpointValue } from "./useBreakpointValue/index.js";
-
+export { default as CreateRootContextProvider } from "./useCreateRoot/index.js";
 // Disclosure
 // --------------------------------------------------------
 export { default as VisuallyHidden } from "./VisuallyHidden/index.js";

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

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 var _excluded = ["as", "className", "classPrefix", "placement"],
   _excluded2 = ["className"],
-  _excluded3 = ["container"];
+  _excluded3 = ["container", "userCreateRoot"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useState, useImperativeHandle, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -153,11 +153,11 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 ToastContainer.getInstance = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
-    var container, rest, getRefResolve, getRefPromise, containerRef, containerId;
+    var container, userCreateRoot, rest, getRefResolve, getRefPromise, containerRef, containerId;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          container = props.container, rest = _objectWithoutPropertiesLoose(props, _excluded3);
+          container = props.container, userCreateRoot = props.userCreateRoot, rest = _objectWithoutPropertiesLoose(props, _excluded3);
           getRefResolve = null;
           getRefPromise = new Promise(function (res) {
             getRefResolve = res;
@@ -168,7 +168,7 @@ ToastContainer.getInstance = /*#__PURE__*/function () {
               containerRef.current = _ref3;
               getRefResolve && getRefResolve();
             }
-          })), container);
+          })), container, userCreateRoot);
           _context.next = 7;
           return getRefPromise;
         case 7:

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

@@ -5,7 +5,22 @@ import * as ReactDOM from 'react-dom';
 var majorVersion = parseInt(React.version);
 var SuperposedReactDOM = ReactDOM;
 export var toasterKeyOfContainerElement = 'toasterId';
-export 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;
+}
+export function render(element, container, userCreateRoot) {
   var mountElement = document.createElement('div');
   mountElement.className = 'rs-toaster-mount-element';
   var containerElement = container;
@@ -18,12 +33,7 @@ export 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/esm/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/esm/toaster/toaster.js

@@ -12,8 +12,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);
 }
 /**
@@ -22,13 +23,15 @@ function createContainer(_x, _x2) {
  * @param placement
  */
 function _createContainer() {
-  _createContainer = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(placement, props) {
+  _createContainer = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(placement, props, userCreateRoot) {
     var _yield$ToastContainer, container, containerId;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.next = 2;
-          return ToastContainer.getInstance(props);
+          return ToastContainer.getInstance(_extends({}, props, {
+            userCreateRoot: userCreateRoot
+          }));
         case 2:
           _yield$ToastContainer = _context.sent;
           container = _yield$ToastContainer[0];
@@ -49,7 +52,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 = {};
   }
@@ -72,7 +75,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/esm/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/esm/useCreateRoot/index.js

@@ -0,0 +1,4 @@
+'use client';
+import { CreateRootContextProvider } from "./useCreateRoot.js";
+export { useCreateRoot } from "./useCreateRoot.js";
+export default CreateRootContextProvider;

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

@@ -0,0 +1,8 @@
+'use client';
+import { createContext, useContext } from 'react';
+var CreateRootContext = /*#__PURE__*/createContext(null);
+export function useCreateRoot() {
+  return useContext(CreateRootContext) || undefined;
+}
+export var CreateRootContextProvider = CreateRootContext.Provider;
+export default CreateRootContextProvider;

package/esm/useToaster/useToaster.js

@@ -4,6 +4,8 @@ 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/CustomContext.js";
+import { useCreateRoot } from "../useCreateRoot/index.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.
@@ -15,6 +17,7 @@ var useToaster = function useToaster() {
   var _useContext = useContext(CustomContext),
     toasters = _useContext.toasters,
     toastContainer = _useContext.toastContainer;
+  var userCreateRoot = useCreateRoot();
   return useMemo(function () {
     return {
       /**
@@ -31,7 +34,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.push(message, options);
+          return toaster.push(message, options, userCreateRoot);
         }
       },
       /**
@@ -54,6 +57,6 @@ var useToaster = function useToaster() {
         }) : toaster.clear();
       }
     };
-  }, [toastContainer, toasters]);
+  }, [toastContainer, toasters, userCreateRoot]);
 };
 export default useToaster;

package/package.json

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

package/useCreateRoot/package.json

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