rsuite 5.76.0 → 5.76.1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [5.76.1](https://github.com/rsuite/rsuite/compare/v5.76.0...v5.76.1) (2024-12-30)
+
+
+### Bug Fixes
+
+* **useToaster:** support dynamic container of useToaster with correct styles ([#4088](https://github.com/rsuite/rsuite/issues/4088)) ([62b1a12](https://github.com/rsuite/rsuite/commit/62b1a128bd0f68ddc22a5b0f1acf27c5bc56a69e))
+
+
+
 # [5.76.0](https://github.com/rsuite/rsuite/compare/v5.75.0...v5.76.0) (2024-12-20)
 
 

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -142,9 +142,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     Calendar?: {
@@ -165,9 +163,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DatePicker?: {
@@ -188,9 +184,7 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DateRangePicker?: {
@@ -212,14 +206,14 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         shortDateFormat: string;
-        shortTimeFormat: string; /**
-         * The prefix of the component CSS class
-         */
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     Combobox?: {
         noResultsText: string;
-        placeholder: string;
+        placeholder: string; /**
+         * The locale object that contains the language and formatting rules for the date.
+         */
         searchPlaceholder: string;
         checkAll: string;
     } | undefined;
@@ -227,7 +221,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         newItem: string;
         createOption: string;
         noResultsText: string;
-        placeholder: string;
+        placeholder: string; /**
+         * The locale object that contains the language and formatting rules for the date.
+         */
         searchPlaceholder: string;
         checkAll: string;
     } | undefined;
@@ -235,7 +231,9 @@ export declare const CustomContext: React.Context<CustomProviderProps<{
         newItem: string;
         createOption: string;
         noResultsText: string;
-        placeholder: string;
+        placeholder: string; /**
+         * The locale object that contains the language and formatting rules for the date.
+         */
         searchPlaceholder: string;
         checkAll: string;
     } | undefined;

package/cjs/CustomProvider/CustomProvider.js

@@ -32,14 +32,15 @@ function CustomProvider(props) {
     _props$iconClassPrefi = props.iconClassPrefix,
     iconClassPrefix = _props$iconClassPrefi === void 0 ? classPrefix : _props$iconClassPrefi,
     theme = props.theme,
-    container = props.toastContainer,
+    _props$toastContainer = props.toastContainer,
+    toastContainer = _props$toastContainer === void 0 ? _ToastContainer.defaultToasterContainer : _props$toastContainer,
     disableRipple = props.disableRipple,
     csp = props.csp,
     disableInlineStyles = props.disableInlineStyles,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   var toasters = (0, _react.useRef)(new Map());
   var _usePortal = (0, _hooks.usePortal)({
-      container: container,
+      container: toastContainer,
       waitMount: true
     }),
     Portal = _usePortal.Portal;
@@ -49,9 +50,10 @@ function CustomProvider(props) {
       theme: theme,
       toasters: toasters,
       disableRipple: disableRipple,
-      components: components
+      components: components,
+      toastContainer: toastContainer
     }, rest);
-  }, [classPrefix, theme, disableRipple, components, rest]);
+  }, [classPrefix, theme, disableRipple, components, toastContainer, rest]);
   var iconContext = (0, _react.useMemo)(function () {
     return {
       classPrefix: iconClassPrefix,

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

@@ -13,7 +13,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';

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,
@@ -32,7 +31,7 @@ var _exportNames = {
   isFocusLeaving: 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.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;
@@ -77,8 +76,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");

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;
 export type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
 export declare const toastPlacements: PlacementType[];
 export interface ToastContainerProps extends WithAsProps {
@@ -21,10 +22,6 @@ 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;
@@ -32,7 +29,6 @@ interface PushOptions {
     container?: HTMLElement | (() => HTMLElement);
 }
 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;
+    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,22 +3,25 @@
 
 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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _Transition = _interopRequireDefault(require("../Animation/Transition"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _ToastContext = _interopRequireDefault(require("./ToastContext"));
-var _excluded = ["as", "className", "classPrefix", "placement", "callback"],
+var _render = require("./render");
+var _excluded = ["as", "className", "classPrefix", "placement"],
   _excluded2 = ["className"],
   _excluded3 = ["container"];
 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 = document.body;
 var toastPlacements = exports.toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
 var useMessages = function useMessages() {
   var _useState = (0, _react.useState)([]),
@@ -87,7 +90,6 @@ var useMessages = function useMessages() {
   };
 };
 var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var rootRef = (0, _react.useRef)();
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     className = props.className,
@@ -95,7 +97,6 @@ var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     classPrefix = _props$classPrefix === void 0 ? 'toast-container' : _props$classPrefix,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'topCenter' : _props$placement,
-    callback = props.callback,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -109,7 +110,6 @@ var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     messages = _useMessages.messages;
   (0, _react.useImperativeHandle)(ref, function () {
     return {
-      root: rootRef.current,
       push: push,
       clear: clear,
       remove: remove
@@ -118,9 +118,15 @@ var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var elements = messages.map(function (item) {
     var mouseReset = item.mouseReset,
       duration = item.duration,
-      node = item.node,
-      container = item.container;
-    var toastWithTransition = /*#__PURE__*/_react.default.createElement(_Transition.default, {
+      node = item.node;
+    return /*#__PURE__*/_react.default.createElement(_ToastContext.default.Provider, {
+      value: {
+        usedToaster: true,
+        mouseReset: mouseReset,
+        duration: duration
+      },
+      key: item.key
+    }, /*#__PURE__*/_react.default.createElement(_Transition.default, {
       in: item.visible,
       exitedClassName: rootPrefix('toast-fade-exited'),
       exitingClassName: rootPrefix('toast-fade-exiting'),
@@ -139,40 +145,44 @@ var ToastContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref
         }),
         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: mouseReset,
-        duration: 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: function ref(selfRef) {
-      rootRef.current = selfRef;
-      callback === null || callback === void 0 || callback(selfRef);
-    },
     className: classes
   }), elements);
 });
-ToastContainer.getInstance = function (props) {
-  var container = props.container,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
-  var containerRef = /*#__PURE__*/_react.default.createRef();
-  var containerElement = (typeof container === 'function' ? container() : container) || document.body;
-  return new Promise(function (resolve) {
-    var renderCallback = function renderCallback() {
-      resolve([containerRef, unmount]);
-    };
-    var _render = (0, _utils.render)(/*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, rest, {
-        ref: containerRef,
-        callback: renderCallback
-      })), containerElement),
-      unmount = _render.unmount;
-  });
-};
+ToastContainer.getInstance = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(props) {
+    var container, 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);
+          getRefResolve = null;
+          getRefPromise = new Promise(function (res) {
+            getRefResolve = res;
+          });
+          containerRef = /*#__PURE__*/_react.default.createRef(); // promise containerId & containerRef all have value
+          containerId = (0, _render.render)(/*#__PURE__*/_react.default.createElement(ToastContainer, (0, _extends2.default)({}, rest, {
+            ref: function ref(_ref3) {
+              containerRef.current = _ref3;
+              getRefResolve && getRefResolve();
+            }
+          })), container);
+          _context.next = 7;
+          return getRefPromise;
+        case 7:
+          return _context.abrupt("return", [containerRef, containerId]);
+        case 8:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function (_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
 ToastContainer.displayName = 'ToastContainer';
 ToastContainer.propTypes = {
   className: _propTypes.default.string,

package/cjs/toaster/render.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const toasterKeyOfContainerElement = "toasterId";
+export declare function render(element: React.ReactElement<any>, container: HTMLElement): string;

package/cjs/toaster/render.js

@@ -0,0 +1,43 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.render = render;
+exports.toasterKeyOfContainerElement = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../internals/utils");
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+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 majorVersion = parseInt(_react.default.version);
+var SuperposedReactDOM = ReactDOM;
+var toasterKeyOfContainerElement = exports.toasterKeyOfContainerElement = 'toasterId';
+function render(element, container) {
+  var mountElement = document.createElement('div');
+  mountElement.className = 'rs-toaster-mount-element';
+  var containerElement = container;
+
+  // Add the detached element to the root
+  containerElement.appendChild(mountElement);
+  var newContainerId = (0, _utils.guid)();
+  if (!containerElement[toasterKeyOfContainerElement]) {
+    // attach the containerId to the containerElement
+    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 root = createRoot(mountElement, {
+      identifierPrefix: 'rs-root-'
+    });
+    root.render(element);
+  } else {
+    SuperposedReactDOM.render(element, mountElement);
+  }
+  return containerElement[toasterKeyOfContainerElement];
+}

package/cjs/toaster/toaster.js

@@ -5,17 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _ToastContainer = _interopRequireDefault(require("./ToastContainer"));
-var _excluded = ["placement"];
-var defaultContainerId = 'default';
+var _ToastContainer = _interopRequireWildcard(require("./ToastContainer"));
+var _render = require("./render");
+var _excluded = ["placement", "container"];
+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 containers = new Map();
 
 /**
- * Create a container by Id.
- * @param containerId
- * @param options
+ * Create a container instance.
+ * @param placement
+ * @param props
  */
 function createContainer(_x, _x2) {
   return _createContainer.apply(this, arguments);
@@ -23,10 +26,11 @@ function createContainer(_x, _x2) {
 /**
  * Get the container by ID. Use default ID when ID is not available.
  * @param containerId
+ * @param placement
  */
 function _createContainer() {
-  _createContainer = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(containerId, props) {
-    var _yield$ToastContainer, container;
+  _createContainer = (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee(placement, props) {
+    var _yield$ToastContainer, container, containerId;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -35,9 +39,10 @@ function _createContainer() {
         case 2:
           _yield$ToastContainer = _context.sent;
           container = _yield$ToastContainer[0];
-          containers.set(containerId || defaultContainerId, container);
+          containerId = _yield$ToastContainer[1];
+          containers.set(containerId + "_" + placement, container);
           return _context.abrupt("return", container);
-        case 6:
+        case 7:
         case "end":
           return _context.stop();
       }
@@ -45,11 +50,8 @@ function _createContainer() {
   }));
   return _createContainer.apply(this, arguments);
 }
-function getContainer(containerId) {
-  if (containers.size == 0) {
-    return null;
-  }
-  return containers.get(containerId || defaultContainerId);
+function getContainer(containerId, placement) {
+  return containers.get(containerId + "_" + placement);
 }
 var _toaster = function toaster(message) {
   return _toaster.push(message);
@@ -59,13 +61,24 @@ _toaster.push = function (message, options) {
     options = {};
   }
   var _options = options,
-    containerId = _options.placement,
+    _options$placement = _options.placement,
+    placement = _options$placement === void 0 ? 'topCenter' : _options$placement,
+    container = _options.container,
     restOptions = (0, _objectWithoutPropertiesLoose2.default)(_options, _excluded);
-  var container = getContainer(containerId);
-  if (container !== null && container !== void 0 && container.current) {
-    return container.current.push(message, restOptions);
+  var containerElement = (typeof container === 'function' ? container() : container) || _ToastContainer.defaultToasterContainer;
+  var containerElementId = containerElement[_render.toasterKeyOfContainerElement];
+  if (containerElementId) {
+    var existedContainer = getContainer(containerElementId, placement);
+    if (existedContainer) {
+      var _existedContainer$cur;
+      return (_existedContainer$cur = existedContainer.current) === null || _existedContainer$cur === void 0 ? void 0 : _existedContainer$cur.push(message, restOptions);
+    }
   }
-  return createContainer(containerId !== null && containerId !== void 0 ? containerId : '', options).then(function (ref) {
+  var newOptions = (0, _extends2.default)({}, options, {
+    container: containerElement,
+    placement: placement
+  });
+  return createContainer(placement, newOptions).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/useToaster/useToaster.js

@@ -19,7 +19,8 @@ var _CustomProvider = require("../CustomProvider/CustomProvider");
  */
 var useToaster = function useToaster() {
   var _useContext = (0, _react.useContext)(_CustomProvider.CustomContext),
-    toasters = _useContext.toasters;
+    toasters = _useContext.toasters,
+    toastContainer = _useContext.toastContainer;
   return (0, _react.useMemo)(function () {
     return {
       /**
@@ -31,9 +32,13 @@ var useToaster = function useToaster() {
        * @returns The key of the toast message.
        */
       push: function push(message, options) {
-        var _toasters$current;
-        var customToaster = toasters === null || toasters === void 0 || (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
-        return customToaster ? customToaster.push(message, options) : _toaster.default.push(message, options);
+        var container = (typeof (options === null || options === void 0 ? void 0 : options.container) === 'function' ? options === null || options === void 0 ? void 0 : options.container() : options === null || options === void 0 ? void 0 : options.container) || toastContainer;
+        if (container === toastContainer) {
+          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);
+        }
       },
       /**
        * Remove a toast message.
@@ -55,6 +60,6 @@ var useToaster = function useToaster() {
         }) : _toaster.default.clear();
       }
     };
-  }, [toasters]);
+  }, [toastContainer, toasters]);
 };
 var _default = exports.default = useToaster;