rsuite 5.75.0 → 5.76.1

package/esm/Carousel/Carousel.js

@@ -134,6 +134,7 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix('content')
   }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "carousel-slider",
     className: prefix('slider'),
     style: sliderStyles,
     onTransitionEnd: handleTransitionEnd

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

@@ -7,7 +7,7 @@ import IconProvider from '@rsuite/icons/IconProvider';
 import { usePortal, useIsomorphicLayoutEffect } from "../internals/hooks/index.js";
 import { getClassNamePrefix, prefix } from "../internals/utils/prefix.js";
 import { addClass, removeClass, canUseDOM } from "../DOMHelper/index.js";
-import ToastContainer, { toastPlacements } from "../toaster/ToastContainer.js";
+import ToastContainer, { toastPlacements, defaultToasterContainer } from "../toaster/ToastContainer.js";
 export var CustomContext = /*#__PURE__*/React.createContext({});
 var themes = ['light', 'dark', 'high-contrast'];
 
@@ -24,14 +24,15 @@ export default 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 ? defaultToasterContainer : _props$toastContainer,
     disableRipple = props.disableRipple,
     csp = props.csp,
     disableInlineStyles = props.disableInlineStyles,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   var toasters = useRef(new Map());
   var _usePortal = usePortal({
-      container: container,
+      container: toastContainer,
       waitMount: true
     }),
     Portal = _usePortal.Portal;
@@ -41,9 +42,10 @@ export default 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 = useMemo(function () {
     return {
       classPrefix: iconClassPrefix,

package/esm/CustomProvider/types.d.ts

@@ -53,6 +53,7 @@ import type { InputProps } from '../Input';
 import type { InputGroupProps } from '../InputGroup';
 import type { InputNumberProps } from '../InputNumber';
 import type { InputPickerProps } from '../InputPicker';
+import type { ImageProps } from '../Image';
 import type { ListProps } from '../List';
 import type { LoaderProps } from '../Loader';
 import type { MaskedInputProps } from '../MaskedInput';
@@ -164,6 +165,7 @@ export interface ReactSuiteComponents {
     InputGroup: ComponentProps<InputGroupProps>;
     InputNumber: ComponentProps<InputNumberProps>;
     InputPicker: ComponentProps<InputPickerProps>;
+    Image: ComponentProps<ImageProps>;
     List: ComponentProps<ListProps>;
     Loader: ComponentProps<LoaderProps>;
     MaskedInput: ComponentProps<MaskedInputProps>;

package/esm/Image/Image.d.ts

@@ -0,0 +1,42 @@
+import React, { CSSProperties } from 'react';
+import type { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+export interface ImageProps extends WithAsProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
+    /**
+     * An image may appear with border.
+     */
+    bordered?: boolean;
+    /**
+     * An image may appear circular.
+     */
+    circle?: boolean;
+    /**
+     * The fallback image when the src fails to load.
+     */
+    fallbackSrc?: string;
+    /**
+     * An image may appear rounded.
+     */
+    rounded?: boolean;
+    /**
+     * Whether there is a shadow.
+     */
+    shaded?: boolean;
+    /**
+     * It maps to css `object-fit` property.
+     */
+    fit?: CSSProperties['objectFit'];
+    /**
+     * It maps to css `object-position` property.
+     */
+    position?: CSSProperties['objectPosition'];
+    /**
+     * The placeholder to display when the image is loading.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * Whether the image should be zoomed when hovered.
+     */
+    zoomed?: boolean;
+}
+declare const Image: RsRefForwardingComponent<'img', ImageProps>;
+export default Image;

package/esm/Image/Image.js

@@ -0,0 +1,97 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["as", "bordered", "classPrefix", "className", "circle", "crossOrigin", "fit", "fallbackSrc", "loading", "rounded", "srcSet", "sizes", "shaded", "src", "style", "position", "placeholder", "width", "height", "zoomed"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames } from "../internals/hooks/index.js";
+import { ImageWrapper } from "./ImageWrapper.js";
+import { useImage } from "./hooks/useImage.js";
+import { useCustom } from "../CustomProvider/index.js";
+var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _extends2;
+  var _useCustom = useCustom('Image', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'img' : _propsWithDefaults$as,
+    bordered = propsWithDefaults.bordered,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'image' : _propsWithDefaults$cl,
+    className = propsWithDefaults.className,
+    circle = propsWithDefaults.circle,
+    crossOrigin = propsWithDefaults.crossOrigin,
+    fit = propsWithDefaults.fit,
+    fallbackSrc = propsWithDefaults.fallbackSrc,
+    loading = propsWithDefaults.loading,
+    rounded = propsWithDefaults.rounded,
+    srcSet = propsWithDefaults.srcSet,
+    sizes = propsWithDefaults.sizes,
+    shaded = propsWithDefaults.shaded,
+    src = propsWithDefaults.src,
+    style = propsWithDefaults.style,
+    position = propsWithDefaults.position,
+    placeholder = propsWithDefaults.placeholder,
+    width = propsWithDefaults.width,
+    height = propsWithDefaults.height,
+    zoomed = propsWithDefaults.zoomed,
+    rest = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
+  var _useClassNames = useClassNames(classPrefix),
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var classes = merge(className, withClassPrefix({
+    circle: circle,
+    bordered: bordered,
+    rounded: rounded,
+    shaded: shaded,
+    zoomed: zoomed
+  }));
+  var imgProps = {
+    crossOrigin: crossOrigin,
+    srcSet: srcSet,
+    sizes: sizes,
+    loading: loading
+  };
+  var _useImage = useImage(_extends({
+      src: src,
+      fallbackSrc: fallbackSrc
+    }, imgProps)),
+    imgSrc = _useImage.imgSrc,
+    isLoading = _useImage.isLoading;
+  var styles = _extends({}, style, (_extends2 = {}, _extends2['--rs-object-fit'] = fit, _extends2['--rs-object-position'] = position, _extends2));
+  var wrapStyles = {
+    width: width,
+    height: height
+  };
+  var image = /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    src: imgSrc,
+    className: classes,
+    style: styles,
+    width: width,
+    height: height
+  }, imgProps, rest));
+  if (zoomed) {
+    return /*#__PURE__*/React.createElement(ImageWrapper, {
+      style: wrapStyles
+    }, image);
+  }
+  if (placeholder) {
+    return /*#__PURE__*/React.createElement(ImageWrapper, {
+      style: wrapStyles
+    }, isLoading && placeholder, image);
+  }
+  return image;
+});
+Image.displayName = 'Image';
+Image.propTypes = {
+  bordered: PropTypes.bool,
+  circle: PropTypes.bool,
+  fallbackSrc: PropTypes.string,
+  fit: PropTypes.string,
+  position: PropTypes.string,
+  rounded: PropTypes.bool,
+  shaded: PropTypes.bool,
+  placeholder: PropTypes.node,
+  zoomed: PropTypes.bool
+};
+export default Image;

package/esm/Image/ImageWrapper.d.ts

@@ -0,0 +1 @@
+export declare const ImageWrapper: import("../internals/types").RsRefForwardingComponent<"div", import("../internals/utils").ComponentProps>;

package/esm/Image/ImageWrapper.js

@@ -0,0 +1,6 @@
+'use client';
+import { createComponent } from "../internals/utils/index.js";
+export var ImageWrapper = createComponent({
+  name: 'ImageWrapper',
+  componentAs: 'div'
+});

package/esm/Image/hooks/useImage.d.ts

@@ -0,0 +1,14 @@
+interface UseImageProps {
+    src?: string;
+    fallbackSrc?: string;
+    crossOrigin?: string;
+    srcSet?: string;
+    sizes?: string;
+    loading?: 'lazy' | 'eager';
+}
+export declare const useImage: (props: UseImageProps) => {
+    imgSrc: string | null;
+    isLoading: boolean;
+    error: boolean;
+};
+export {};

package/esm/Image/hooks/useImage.js

@@ -0,0 +1,63 @@
+'use client';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import useIsomorphicLayoutEffect from "../../internals/hooks/useIsomorphicLayoutEffect.js";
+export var useImage = function useImage(props) {
+  var src = props.src,
+    fallbackSrc = props.fallbackSrc,
+    crossOrigin = props.crossOrigin,
+    srcSet = props.srcSet,
+    sizes = props.sizes,
+    loading = props.loading;
+  var _useState = useState(src || fallbackSrc || null),
+    imgSrc = _useState[0],
+    setImgSrc = _useState[1];
+  var _useState2 = useState(!!src),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(false),
+    error = _useState3[0],
+    setError = _useState3[1];
+  var imageRef = useRef(null);
+  useEffect(function () {
+    setIsLoading(!!src); // true if src exists, false otherwise
+  }, [src]);
+  var flush = function flush() {
+    if (imageRef.current) {
+      imageRef.current.onload = null;
+      imageRef.current.onerror = null;
+    }
+  };
+  var loadImage = useCallback(function () {
+    if (!src) return;
+    flush();
+    var image = new Image();
+    image.src = src;
+    if (crossOrigin) image.crossOrigin = crossOrigin;
+    if (srcSet) image.srcset = srcSet;
+    if (sizes) image.sizes = sizes;
+    if (loading) image.loading = loading;
+    image.onload = function () {
+      flush();
+      setImgSrc(src);
+      setIsLoading(false);
+    };
+    image.onerror = function () {
+      flush();
+      setError(true);
+      setImgSrc(fallbackSrc || null);
+      setIsLoading(false);
+    };
+    imageRef.current = image;
+  }, [crossOrigin, fallbackSrc, loading, sizes, src, srcSet]);
+  useIsomorphicLayoutEffect(function () {
+    loadImage();
+    return function () {
+      flush();
+    };
+  }, [loadImage]);
+  return {
+    imgSrc: imgSrc,
+    isLoading: isLoading,
+    error: error
+  };
+};

package/esm/Image/index.d.ts

@@ -0,0 +1,3 @@
+import Image from './Image';
+export type { ImageProps } from './Image';
+export default Image;

package/esm/Image/index.js

@@ -0,0 +1,3 @@
+'use client';
+import Image from "./Image.js";
+export default Image;

package/esm/index.d.ts

@@ -47,6 +47,8 @@ export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { default as AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupProps } from './AvatarGroup';
+export { default as Image } from './Image';
+export type { ImageProps } from './Image';
 export { default as Nav } from './Nav';
 export type { NavProps, NavItemProps } from './Nav';
 export { default as Navbar } from './Navbar';

package/esm/index.js

@@ -34,6 +34,7 @@ export { default as Progress } from "./Progress/index.js";
 // --------------------------------------------------------
 export { default as Avatar } from "./Avatar/index.js";
 export { default as AvatarGroup } from "./AvatarGroup/index.js";
+export { default as Image } from "./Image/index.js";
 // Nav
 // --------------------------------------------------------
 export { default as Nav } from "./Nav/index.js";

package/esm/internals/utils/getDOMNode.js

@@ -2,8 +2,9 @@
 import ReactDOM from 'react-dom';
 function safeFindDOMNode(componentOrElement) {
   if (componentOrElement && 'setState' in componentOrElement) {
+    var _ReactDOM$findDOMNode;
     // eslint-disable-next-line react/no-find-dom-node
-    return ReactDOM.findDOMNode(componentOrElement);
+    return (_ReactDOM$findDOMNode = ReactDOM.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(ReactDOM, componentOrElement);
   }
   return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;
 }

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

@@ -14,7 +14,6 @@ export { placementPolyfill } from "./placementPolyfill.js";
 export { mergeRefs } from "./mergeRefs.js";
 export { shallowEqual, shallowEqualArray } from "./shallowEqual.js";
 export { composeFunctions } from "./composeFunctions.js";
-export { render } from "./render.js";
 export { safeSetSelection } from "./safeSetSelection.js";
 export { getStringLength } from "./getStringLength.js";
 export { getDataGroupBy } from "./getDataGroupBy.js";

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

@@ -1,17 +1,20 @@
 'use client';
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["as", "className", "classPrefix", "placement", "callback"],
+var _excluded = ["as", "className", "classPrefix", "placement"],
   _excluded2 = ["className"],
   _excluded3 = ["container"];
-import React, { useState, useImperativeHandle, useRef, useCallback } from 'react';
-import { createPortal } from 'react-dom';
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useImperativeHandle, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import kebabCase from 'lodash/kebabCase';
 import Transition from "../Animation/Transition.js";
 import { useClassNames } from "../internals/hooks/index.js";
-import { guid, createChainedFunction, render } from "../internals/utils/index.js";
+import { guid, createChainedFunction } from "../internals/utils/index.js";
 import ToastContext from "./ToastContext.js";
+import { render } from "./render.js";
+export var defaultToasterContainer = document.body;
 export var toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
 var useMessages = function useMessages() {
   var _useState = useState([]),
@@ -80,7 +83,6 @@ var useMessages = function useMessages() {
   };
 };
 var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var rootRef = useRef();
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     className = props.className,
@@ -88,7 +90,6 @@ var ToastContainer = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -102,7 +103,6 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     messages = _useMessages.messages;
   useImperativeHandle(ref, function () {
     return {
-      root: rootRef.current,
       push: push,
       clear: clear,
       remove: remove
@@ -111,9 +111,15 @@ var ToastContainer = /*#__PURE__*/React.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.createElement(Transition, {
+      node = item.node;
+    return /*#__PURE__*/React.createElement(ToastContext.Provider, {
+      value: {
+        usedToaster: true,
+        mouseReset: mouseReset,
+        duration: duration
+      },
+      key: item.key
+    }, /*#__PURE__*/React.createElement(Transition, {
       in: item.visible,
       exitedClassName: rootPrefix('toast-fade-exited'),
       exitingClassName: rootPrefix('toast-fade-exiting'),
@@ -132,40 +138,44 @@ var ToastContainer = /*#__PURE__*/React.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.createElement(ToastContext.Provider, {
-      value: {
-        usedToaster: true,
-        mouseReset: mouseReset,
-        duration: duration
-      },
-      key: item.key
-    }, container ? /*#__PURE__*/createPortal(toastWithTransition, typeof container === 'function' ? container() : container) : toastWithTransition);
+    }));
   });
   return /*#__PURE__*/React.createElement(Component, _extends({}, 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 = _objectWithoutPropertiesLoose(props, _excluded3);
-  var containerRef = /*#__PURE__*/React.createRef();
-  var containerElement = (typeof container === 'function' ? container() : container) || document.body;
-  return new Promise(function (resolve) {
-    var renderCallback = function renderCallback() {
-      resolve([containerRef, unmount]);
-    };
-    var _render = render(/*#__PURE__*/React.createElement(ToastContainer, _extends({}, rest, {
-        ref: containerRef,
-        callback: renderCallback
-      })), containerElement),
-      unmount = _render.unmount;
-  });
-};
+ToastContainer.getInstance = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
+    var container, 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);
+          getRefResolve = null;
+          getRefPromise = new Promise(function (res) {
+            getRefResolve = res;
+          });
+          containerRef = /*#__PURE__*/React.createRef(); // promise containerId & containerRef all have value
+          containerId = render(/*#__PURE__*/React.createElement(ToastContainer, _extends({}, 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.string,

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

@@ -0,0 +1,35 @@
+'use client';
+import React from 'react';
+import { guid } from "../internals/utils/index.js";
+import * as ReactDOM from 'react-dom';
+var majorVersion = parseInt(React.version);
+var SuperposedReactDOM = ReactDOM;
+export var toasterKeyOfContainerElement = 'toasterId';
+export 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 = 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];
+}