rsuite 6.0.0-canary-20241227 → 6.0.0-canary-20250103

package/cjs/internals/types/index.d.ts

@@ -1,5 +1,9 @@
 import { ReactNode, CSSProperties, ElementType, InputHTMLAttributes, SyntheticEvent, FocusEventHandler } from 'react';
 import { ReplaceProps } from './utils';
+import { Placement } from './placement';
+import { Colours } from './colours';
+export * from './placement';
+export * from './colours';
 export interface StandardProps {
     /** The prefix of the component CSS class */
     classPrefix?: string;
@@ -20,7 +24,6 @@ export interface WithAsPropsWithoutChildren<As extends ElementType | string = El
 }
 export interface RsRefForwardingComponent<T extends ElementType, P = unknown, ExcludeChildren extends boolean = false> {
     <As extends ElementType = T>(props: ReplaceProps<As, ExcludeChildren extends true ? WithAsPropsWithoutChildren<As> & P : WithAsProps<As> & P>, context?: any): any;
-    propTypes?: any;
     contextTypes?: any;
     displayName?: string;
 }
@@ -66,7 +69,7 @@ export interface PickerBaseProps<L = any> extends WithAsProps, AnimationEventPro
     /** Placeholder text */
     placeholder?: ReactNode;
     /** The placement of picker */
-    placement?: TypeAttributes.Placement;
+    placement?: Placement;
     /** Prevent floating element overflow */
     preventOverflow?: boolean;
     /** Open the menu and control it */
@@ -169,12 +172,8 @@ export interface FormControlPickerProps<T = any, L = any, D = Record<string, any
 export declare namespace TypeAttributes {
     type Size = 'lg' | 'md' | 'sm' | 'xs';
     type Status = 'success' | 'warning' | 'error' | 'info';
-    type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
+    type Color = `${Colours}`;
     type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
-    type Placement4 = 'top' | 'bottom' | 'right' | 'left';
-    type Placement8 = 'bottomStart' | 'bottomEnd' | 'topStart' | 'topEnd' | 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
-    type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
-    type Placement = Placement4 | Placement8 | PlacementAuto;
     type CheckTrigger = 'change' | 'blur' | 'none' | null;
     type DisplayState = 'show' | 'hide' | 'hiding';
 }

package/cjs/internals/types/index.js

@@ -1,4 +1,16 @@
 'use client';
 "use strict";
 
-exports.__esModule = true;
+exports.__esModule = true;
+var _placement = require("./placement");
+Object.keys(_placement).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _placement[key]) return;
+  exports[key] = _placement[key];
+});
+var _colours = require("./colours");
+Object.keys(_colours).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colours[key]) return;
+  exports[key] = _colours[key];
+});

package/cjs/internals/types/placement.d.ts

@@ -0,0 +1,5 @@
+export type PlacementCardinal = 'top' | 'bottom' | 'right' | 'left';
+export type PlacementCornersPolyfill = 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
+export type PlacementCorners = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd' | PlacementCornersPolyfill;
+export type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
+export type Placement = PlacementCardinal | PlacementCorners | PlacementAuto;

package/cjs/internals/types/placement.js

@@ -0,0 +1,4 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;

package/cjs/internals/utils/BrowserDetection.d.ts

@@ -1,4 +1,2 @@
 export declare const isIE: () => boolean;
-export declare const isIE11: () => boolean;
 export declare const isAndroid: () => boolean;
-export declare const getChromeVersion: () => number | false;

package/cjs/internals/utils/BrowserDetection.js

@@ -3,22 +3,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.isIE11 = exports.isIE = exports.isAndroid = exports.getChromeVersion = void 0;
+exports.isIE = exports.isAndroid = void 0;
 var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
 // from http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
 
 // Internet Explorer 6-11
 const isIE = () => _canUseDOM.default && /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
 exports.isIE = isIE;
-const isIE11 = () => _canUseDOM.default && window.navigator.userAgent.indexOf('Trident') > -1 && window.navigator.userAgent.indexOf('rv:11.0') > -1;
-exports.isIE11 = isIE11;
 const isAndroid = () => _canUseDOM.default && /Android/i.test(navigator.userAgent);
-exports.isAndroid = isAndroid;
-const getChromeVersion = () => {
-  if (_canUseDOM.default) {
-    const match = window.navigator.userAgent.match(/Chrom(e|ium)\/([\d\.]+)\./);
-    return match ? parseFloat(match[2]) : false;
-  }
-  return false;
-};
-exports.getChromeVersion = getChromeVersion;
+exports.isAndroid = isAndroid;

package/cjs/internals/utils/ReactChildren.js

@@ -145,8 +145,6 @@ function some(children, func, context) {
     if (! /*#__PURE__*/_react.default.isValidElement(child)) {
       return;
     }
-
-    /* eslint-disable */
     if (func.call(context, child, index += 1)) {
       result = true;
     }

package/cjs/internals/utils/colours.d.ts

@@ -0,0 +1,21 @@
+import { Color } from '../types/colours';
+export declare const isPresetColor: (color?: Color | React.CSSProperties['color']) => boolean;
+/**
+ * Convert short hex color to full hex color
+ * e.g. #fff -> #ffffff
+ */
+export declare const expandHexColor: (color: string) => string;
+/**
+ * Calculate relative luminance of a color
+ * Using the formula from WCAG 2.0
+ */
+export declare const getLuminance: (color: string) => number;
+/**
+ * Get contrasting text color (black or white) based on background color
+ */
+export declare const getContrastText: (bgColor: string) => string;
+/**
+ * Create CSS color variables for custom colors
+ * Returns background and optional text color variables
+ */
+export declare const createColorVariables: (color?: Color | React.CSSProperties['color'], bgFieldName?: string, textFieldName?: string) => React.CSSProperties | undefined;

package/cjs/internals/utils/colours.js

@@ -0,0 +1,86 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.isPresetColor = exports.getLuminance = exports.getContrastText = exports.expandHexColor = exports.createColorVariables = void 0;
+var _colours = require("../types/colours");
+const isPresetColor = color => {
+  if (!color) {
+    return false;
+  }
+  if (color === 'default') {
+    return true;
+  }
+  return Object.values(_colours.Colours).includes(color);
+};
+
+/**
+ * Convert short hex color to full hex color
+ * e.g. #fff -> #ffffff
+ */
+exports.isPresetColor = isPresetColor;
+const expandHexColor = color => {
+  const hex = color.toLowerCase().replace('#', '');
+  if (hex.length === 3) {
+    return `#${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
+  }
+  return `#${hex}`;
+};
+
+/**
+ * Calculate relative luminance of a color
+ * Using the formula from WCAG 2.0
+ */
+exports.expandHexColor = expandHexColor;
+const getLuminance = color => {
+  // Convert hex to rgb
+  const fullHex = expandHexColor(color);
+  const hex = fullHex.replace('#', '');
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+  // Convert rgb to relative luminance
+  const rs = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+  const gs = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+  const bs = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+};
+
+/**
+ * Get contrasting text color (black or white) based on background color
+ */
+exports.getLuminance = getLuminance;
+const getContrastText = bgColor => {
+  // For non-hex colors, return default dark text
+  if (!bgColor.startsWith('#')) {
+    return 'var(--rs-text-primary)';
+  }
+  const luminance = getLuminance(bgColor);
+  return luminance > 0.5 ? '#000000' : '#ffffff';
+};
+
+/**
+ * Create CSS color variables for custom colors
+ * Returns background and optional text color variables
+ */
+exports.getContrastText = getContrastText;
+const createColorVariables = function (color, bgFieldName, textFieldName) {
+  if (bgFieldName === void 0) {
+    bgFieldName = '--rs-color-bg';
+  }
+  if (color && !isPresetColor(color)) {
+    const colorStr = color.toString();
+    // Only convert to hex if it's a hex color
+    const bgColor = colorStr.startsWith('#') ? expandHexColor(colorStr) : colorStr;
+    const styles = {
+      [bgFieldName]: bgColor
+    };
+    if (textFieldName) {
+      styles[textFieldName] = getContrastText(bgColor);
+    }
+    return styles;
+  }
+  return undefined;
+};
+exports.createColorVariables = createColorVariables;

package/cjs/internals/utils/css.d.ts

@@ -1,4 +1,16 @@
+/// <reference types="react" />
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
-export declare function getCssValue(value?: number | string, unit?: string): string | undefined;
+export declare function getCssValue(value?: number | string | null, unit?: string): string;
+type CSSVariables = Partial<Record<`--${string}`, string>>;
+type StyleProperties = React.CSSProperties & CSSVariables;
+/**
+ * Merge multiple style objects, filtering out undefined values
+ */
+export declare function mergeStyles(...styles: (React.CSSProperties | undefined | null)[]): StyleProperties;
+/**
+ * Create CSS variables for offset positioning
+ */
+export declare function createOffsetStyles(offset?: [number | string, number | string], prefix?: string): React.CSSProperties | undefined;
+export {};

package/cjs/internals/utils/css.js

@@ -2,7 +2,9 @@
 "use strict";
 
 exports.__esModule = true;
+exports.createOffsetStyles = createOffsetStyles;
 exports.getCssValue = getCssValue;
+exports.mergeStyles = mergeStyles;
 /**
  * Processes and returns a value suitable for CSS (with a unit).
  */
@@ -10,13 +12,50 @@ function getCssValue(value, unit) {
   if (unit === void 0) {
     unit = 'px';
   }
+  if (value === undefined || value === null || value === '') {
+    return '';
+  }
+
+  // If the value is 0, return it as a string without unit
+  if (value === 0) {
+    return '0';
+  }
+
   // If the value is a number, append the default unit (defaults to 'px')
   if (typeof value === 'number') {
     return `${value}${unit}`;
   }
 
-  // If the value is already a string (and likely contains a unit), return it as is
-  if (typeof value === 'string') {
-    return value;
+  // Return string values as is
+  return value.toString();
+}
+/**
+ * Merge multiple style objects, filtering out undefined values
+ */
+function mergeStyles() {
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  return styles.filter(Boolean).reduce((acc, style) => {
+    if (!style) return acc;
+    return {
+      ...acc,
+      ...style
+    };
+  }, {});
+}
+
+/**
+ * Create CSS variables for offset positioning
+ */
+function createOffsetStyles(offset, prefix) {
+  if (prefix === void 0) {
+    prefix = '--rs-offset';
   }
+  if (!offset) return undefined;
+  const [x, y] = offset;
+  return {
+    [`${prefix}-x`]: getCssValue(x),
+    [`${prefix}-y`]: getCssValue(y)
+  };
 }

package/cjs/internals/utils/getDOMNode.js

@@ -6,10 +6,11 @@ exports.__esModule = true;
 exports.default = void 0;
 exports.getDOMNode = getDOMNode;
 var _reactDom = _interopRequireDefault(require("react-dom"));
+/* eslint-disable react/no-find-dom-node */
+
 function safeFindDOMNode(componentOrElement) {
   if (componentOrElement && 'setState' in componentOrElement) {
     var _ReactDOM$findDOMNode;
-    // eslint-disable-next-line react/no-find-dom-node
     return (_ReactDOM$findDOMNode = _reactDom.default.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(_reactDom.default, componentOrElement);
   }
   return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;
@@ -27,7 +28,6 @@ function getDOMNode(elementOrRef) {
   }
 
   // If you can't get the native HTML element, you can only get it through findDOMNode.
-  // eslint-disable-next-line react/no-find-dom-node
   return safeFindDOMNode(element);
 }
 var _default = exports.default = getDOMNode;

package/cjs/internals/utils/getSafeRegExpString.js

@@ -7,5 +7,6 @@ exports.getSafeRegExpString = getSafeRegExpString;
  * @description escape Regular_Expressions special_characters '^$.|*+?{\\[()'
  */
 function getSafeRegExpString(str) {
-  return str.replace(/([\^\$\.\|\*\+\?\{\\\[\(\)])/g, '\\$1');
+  const specialChars = '\\^$.|?*+()[]{}';
+  return str.replace(new RegExp(`([${specialChars}])`, 'g'), '\\$1');
 }

package/cjs/internals/utils/index.d.ts

@@ -1,5 +1,7 @@
 export * from './BrowserDetection';
 export * from './htmlPropsUtils';
+export * from './css';
+export * from './colours';
 export { stringifyReactNode, reactToString } from './stringifyReactNode';
 export { getSafeRegExpString } from './getSafeRegExpString';
 export { getDOMNode } from './getDOMNode';
@@ -13,7 +15,6 @@ export { placementPolyfill } from './placementPolyfill';
 export { mergeRefs } from './mergeRefs';
 export { shallowEqual, shallowEqualArray } from './shallowEqual';
 export { composeFunctions } from './composeFunctions';
-export { render } from './render';
 export { safeSetSelection } from './safeSetSelection';
 export { getStringLength } from './getStringLength';
 export { getDataGroupBy } from './getDataGroupBy';
@@ -24,4 +25,3 @@ export type { ComponentProps } from './createComponent';
 export { attachParent } from './attachParent';
 export { isFocusEntering, isFocusLeaving } from './events';
 export { isFocusableElement } from './dom';
-export { getCssValue } from './css';

package/cjs/internals/utils/index.js

@@ -20,7 +20,6 @@ var _exportNames = {
   shallowEqual: true,
   shallowEqualArray: true,
   composeFunctions: true,
-  render: true,
   safeSetSelection: true,
   getStringLength: true,
   getDataGroupBy: true,
@@ -30,10 +29,9 @@ var _exportNames = {
   attachParent: true,
   isFocusEntering: true,
   isFocusLeaving: true,
-  isFocusableElement: true,
-  getCssValue: true
+  isFocusableElement: true
 };
-exports.warnOnce = exports.tplTransform = exports.stringifyReactNode = exports.shallowEqualArray = exports.shallowEqual = exports.safeSetSelection = exports.render = exports.reactToString = exports.prefix = exports.placementPolyfill = exports.mergeRefs = exports.isOneOf = exports.isFocusableElement = exports.isFocusLeaving = exports.isFocusEntering = exports.guid = exports.getStringLength = exports.getSafeRegExpString = exports.getDataGroupBy = exports.getDOMNode = exports.getCssValue = exports.getClassNamePrefix = exports.deprecateComponent = exports.defaultClassPrefix = exports.createComponent = exports.createChainedFunction = exports.composeFunctions = exports.attachParent = exports.ReactChildren = void 0;
+exports.warnOnce = exports.tplTransform = exports.stringifyReactNode = exports.shallowEqualArray = exports.shallowEqual = exports.safeSetSelection = exports.reactToString = exports.prefix = exports.placementPolyfill = exports.mergeRefs = exports.isOneOf = exports.isFocusableElement = exports.isFocusLeaving = exports.isFocusEntering = exports.guid = exports.getStringLength = exports.getSafeRegExpString = exports.getDataGroupBy = exports.getDOMNode = exports.getClassNamePrefix = exports.deprecateComponent = exports.defaultClassPrefix = exports.createComponent = exports.createChainedFunction = exports.composeFunctions = exports.attachParent = exports.ReactChildren = void 0;
 var _BrowserDetection = require("./BrowserDetection");
 Object.keys(_BrowserDetection).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -48,6 +46,20 @@ Object.keys(_htmlPropsUtils).forEach(function (key) {
   if (key in exports && exports[key] === _htmlPropsUtils[key]) return;
   exports[key] = _htmlPropsUtils[key];
 });
+var _css = require("./css");
+Object.keys(_css).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _css[key]) return;
+  exports[key] = _css[key];
+});
+var _colours = require("./colours");
+Object.keys(_colours).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _colours[key]) return;
+  exports[key] = _colours[key];
+});
 var _stringifyReactNode = require("./stringifyReactNode");
 exports.stringifyReactNode = _stringifyReactNode.stringifyReactNode;
 exports.reactToString = _stringifyReactNode.reactToString;
@@ -78,8 +90,6 @@ exports.shallowEqual = _shallowEqual.shallowEqual;
 exports.shallowEqualArray = _shallowEqual.shallowEqualArray;
 var _composeFunctions = require("./composeFunctions");
 exports.composeFunctions = _composeFunctions.composeFunctions;
-var _render = require("./render");
-exports.render = _render.render;
 var _safeSetSelection = require("./safeSetSelection");
 exports.safeSetSelection = _safeSetSelection.safeSetSelection;
 var _getStringLength = require("./getStringLength");
@@ -98,6 +108,4 @@ var _events = require("./events");
 exports.isFocusEntering = _events.isFocusEntering;
 exports.isFocusLeaving = _events.isFocusLeaving;
 var _dom = require("./dom");
-exports.isFocusableElement = _dom.isFocusableElement;
-var _css = require("./css");
-exports.getCssValue = _css.getCssValue;
+exports.isFocusableElement = _dom.isFocusableElement;

package/cjs/toaster/ToastContainer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+export declare const defaultToasterContainer: () => HTMLElement | null;
 export type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
 export declare const toastPlacements: PlacementType[];
 export interface ToastContainerProps extends WithAsProps {
@@ -12,7 +13,7 @@ export interface ToastContainerProps extends WithAsProps {
     /**
      * Set the message to appear in the specified container
      */
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement) | null;
     /**
      * The number of milliseconds to wait before automatically closing a message.
      */
@@ -21,18 +22,13 @@ export interface ToastContainerProps extends WithAsProps {
      * Reset the hide timer if the mouse moves over the message.
      */
     mouseReset?: boolean;
-    /**
-     * Callback fired when the component mounts
-     */
-    callback?: (ref: React.RefObject<ToastContainerInstance>) => void;
 }
 interface PushOptions {
     duration?: number;
     mouseReset?: boolean;
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement) | null;
 }
 export interface ToastContainerInstance {
-    root: HTMLElement;
     push: (message: React.ReactNode, options?: PushOptions) => string;
     remove: (key: string) => void;
     clear: () => void;
@@ -41,8 +37,12 @@ export interface ToastContainerInstance {
 export interface NodeProps extends WithAsProps {
     onClose?: (event?: React.MouseEvent<HTMLDivElement>) => void;
 }
+export type GetInstancePropsType = Omit<ToastContainerProps, 'container' | 'placement'> & {
+    container: HTMLElement | null;
+    placement: PlacementType;
+};
 interface ToastContainerComponent extends RsRefForwardingComponent<'div', ToastContainerProps> {
-    getInstance: (props: ToastContainerProps) => Promise<[React.RefObject<ToastContainerInstance>, () => void]>;
+    getInstance: (props: GetInstancePropsType) => Promise<[React.RefObject<ToastContainerInstance>, string]>;
 }
 declare const ToastContainer: ToastContainerComponent;
 export default ToastContainer;

package/cjs/toaster/ToastContainer.js

@@ -3,17 +3,22 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.toastPlacements = exports.default = void 0;
+exports.toastPlacements = exports.defaultToasterContainer = exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _Transition = _interopRequireDefault(require("../Animation/Transition"));
+var _ToastContext = _interopRequireDefault(require("./ToastContext"));
+var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _ToastContext = _interopRequireDefault(require("./ToastContext"));
+var _render = require("./render");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const defaultToasterContainer = () => {
+  return _canUseDOM.default ? document.body : null;
+};
+exports.defaultToasterContainer = defaultToasterContainer;
 const toastPlacements = exports.toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
 const useMessages = () => {
   const [messages, setMessages] = (0, _react.useState)([]);
@@ -75,13 +80,11 @@ const useMessages = () => {
   };
 };
 const ToastContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  const rootRef = (0, _react.useRef)();
   const {
     as: Component = 'div',
     className,
     classPrefix = 'toast-container',
     placement = 'topCenter',
-    callback,
     ...rest
   } = props;
   const {
@@ -97,7 +100,6 @@ const ToastContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     messages
   } = useMessages();
   (0, _react.useImperativeHandle)(ref, () => ({
-    root: rootRef.current,
     push,
     clear,
     remove
@@ -106,10 +108,16 @@ const ToastContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     const {
       mouseReset,
       duration,
-      node,
-      container
+      node
     } = item;
-    const toastWithTransition = /*#__PURE__*/_react.default.createElement(_Transition.default, {
+    return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {
+      value: {
+        usedToaster: true,
+        mouseReset,
+        duration
+      },
+      key: item.key
+    }, /*#__PURE__*/_react.default.createElement(_Transition.default, {
       in: item.visible,
       exitedClassName: rootPrefix('toast-fade-exited'),
       exitingClassName: rootPrefix('toast-fade-exiting'),
@@ -129,42 +137,37 @@ const ToastContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
         onClose: (0, _utils.createChainedFunction)((_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.onClose, () => remove(item.key)),
         className: merge(rootPrefix('toast'), (_node$props2 = node.props) === null || _node$props2 === void 0 ? void 0 : _node$props2.className, transitionClassName)
       });
-    });
-    return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {
-      value: {
-        usedToaster: true,
-        mouseReset,
-        duration
-      },
-      key: item.key
-    }, container ? /*#__PURE__*/(0, _reactDom.createPortal)(toastWithTransition, typeof container === 'function' ? container() : container) : toastWithTransition);
+    }));
   });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
-    ref: selfRef => {
-      rootRef.current = selfRef;
-      callback === null || callback === void 0 || callback(selfRef);
-    },
     className: classes
   }), elements);
 });
-ToastContainer.getInstance = props => {
+ToastContainer.getInstance = async props => {
   const {
     container,
-    ...rest
+    ...toastProps
   } = props;
-  const containerRef = /*#__PURE__*/_react.default.createRef();
-  const containerElement = (typeof container === 'function' ? container() : container) || document.body;
-  return new Promise(resolve => {
-    const renderCallback = () => {
-      resolve([containerRef, unmount]);
-    };
-    const {
-      unmount
-    } = (0, _utils.render)(/*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, rest, {
-      ref: containerRef,
-      callback: renderCallback
-    })), containerElement);
+
+  // Promise to wait for containerRef to be assigned
+  let resolveContainerRef = null;
+  const containerRefReady = new Promise(resolve => {
+    resolveContainerRef = resolve;
   });
+
+  // Create a React ref for the ToastContainer instance
+  const toastContainerRef = /*#__PURE__*/_react.default.createRef();
+
+  // Render the ToastContainer component into the specified container
+  const containerId = (0, _render.render)(/*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, toastProps, {
+    ref: ref => {
+      var _resolveContainerRef;
+      toastContainerRef.current = ref;
+      (_resolveContainerRef = resolveContainerRef) === null || _resolveContainerRef === void 0 || _resolveContainerRef();
+    }
+  })), container);
+  await containerRefReady;
+  return [toastContainerRef, containerId];
 };
 ToastContainer.displayName = 'ToastContainer';
 var _default = exports.default = ToastContainer;

package/cjs/toaster/render.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function render(element: React.ReactElement<any>, container: HTMLElement | null): string;

package/cjs/toaster/render.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+var _client = require("react-dom/client");
+var _utils = require("../internals/utils");
+var _symbols = require("../internals/symbols");
+function render(element, container) {
+  const mountElement = document.createElement('div');
+  mountElement.className = 'rs-toaster-mount-element';
+  const containerElement = container;
+
+  // Add the detached element to the root
+  containerElement.appendChild(mountElement);
+  if (!containerElement[_symbols.RSUITE_TOASTER_ID]) {
+    // Attach the containerId to the containerElement
+    containerElement[_symbols.RSUITE_TOASTER_ID] = (0, _utils.guid)();
+  }
+  const root = (0, _client.createRoot)(mountElement, {
+    identifierPrefix: 'rs-root-'
+  });
+  root.render(element);
+  return containerElement[_symbols.RSUITE_TOASTER_ID];
+}