rsuite 5.75.0 → 5.76.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [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)
+
+
+### Features
+
+* **Image:** add support for Image ([#4068](https://github.com/rsuite/rsuite/issues/4068)) ([46980f9](https://github.com/rsuite/rsuite/commit/46980f985094110925fa5e2ad5c69a46cd84e7eb))
+
+
+
 # [5.75.0](https://github.com/rsuite/rsuite/compare/v5.74.2...v5.75.0) (2024-12-06)
 
 

package/Image/package.json

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

package/Image/styles/index.css

@@ -0,0 +1,33 @@
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+  -o-object-fit: var(--rs-object-fit);
+     object-fit: var(--rs-object-fit);
+  -o-object-position: var(--rs-object-position);
+     object-position: var(--rs-object-position);
+  max-width: 100%;
+}
+.rs-image-rounded {
+  border-radius: 6px;
+}
+.rs-image-circle {
+  border-radius: 50%;
+}
+.rs-image-bordered {
+  border: 1px solid var(--rs-border-primary);
+}
+.rs-image-zoomed {
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  transition: -webkit-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+  cursor: pointer;
+}
+.rs-image-zoomed:hover {
+  -webkit-transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+          transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+}
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}

package/Image/styles/index.less

@@ -0,0 +1,34 @@
+.rs-image {
+  --rs-object-fit: cover;
+  --rs-object-position: initial;
+
+  object-fit: var(--rs-object-fit);
+  object-position: var(--rs-object-position);
+  max-width: 100%;
+
+  &-rounded {
+    border-radius: 6px;
+  }
+
+  &-circle {
+    border-radius: 50%;
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+  }
+
+  &-zoomed {
+    transition: transform 0.3s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+      transform: matrix(1.25, 0, 0, 1.25, 0, 0);
+    }
+  }
+}
+
+.rs-image-wrapper {
+  position: relative;
+  overflow: hidden;
+}

package/cjs/Carousel/Carousel.js

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

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/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/cjs/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/cjs/Image/Image.js

@@ -0,0 +1,102 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../internals/hooks");
+var _ImageWrapper = require("./ImageWrapper");
+var _useImage2 = require("./hooks/useImage");
+var _CustomProvider = require("../CustomProvider");
+var _excluded = ["as", "bordered", "classPrefix", "className", "circle", "crossOrigin", "fit", "fallbackSrc", "loading", "rounded", "srcSet", "sizes", "shaded", "src", "style", "position", "placeholder", "width", "height", "zoomed"];
+var Image = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _extends2;
+  var _useCustom = (0, _CustomProvider.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 = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
+  var _useClassNames = (0, _hooks.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 = (0, _useImage2.useImage)((0, _extends3.default)({
+      src: src,
+      fallbackSrc: fallbackSrc
+    }, imgProps)),
+    imgSrc = _useImage.imgSrc,
+    isLoading = _useImage.isLoading;
+  var styles = (0, _extends3.default)({}, style, (_extends2 = {}, _extends2['--rs-object-fit'] = fit, _extends2['--rs-object-position'] = position, _extends2));
+  var wrapStyles = {
+    width: width,
+    height: height
+  };
+  var image = /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({
+    ref: ref,
+    src: imgSrc,
+    className: classes,
+    style: styles,
+    width: width,
+    height: height
+  }, imgProps, rest));
+  if (zoomed) {
+    return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
+      style: wrapStyles
+    }, image);
+  }
+  if (placeholder) {
+    return /*#__PURE__*/_react.default.createElement(_ImageWrapper.ImageWrapper, {
+      style: wrapStyles
+    }, isLoading && placeholder, image);
+  }
+  return image;
+});
+Image.displayName = 'Image';
+Image.propTypes = {
+  bordered: _propTypes.default.bool,
+  circle: _propTypes.default.bool,
+  fallbackSrc: _propTypes.default.string,
+  fit: _propTypes.default.string,
+  position: _propTypes.default.string,
+  rounded: _propTypes.default.bool,
+  shaded: _propTypes.default.bool,
+  placeholder: _propTypes.default.node,
+  zoomed: _propTypes.default.bool
+};
+var _default = exports.default = Image;

package/cjs/Image/ImageWrapper.d.ts

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

package/cjs/Image/ImageWrapper.js

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.ImageWrapper = void 0;
+var _utils = require("../internals/utils");
+var ImageWrapper = exports.ImageWrapper = (0, _utils.createComponent)({
+  name: 'ImageWrapper',
+  componentAs: 'div'
+});

package/cjs/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/cjs/Image/hooks/useImage.js

@@ -0,0 +1,68 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useImage = void 0;
+var _react = require("react");
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../../internals/hooks/useIsomorphicLayoutEffect"));
+var useImage = exports.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 = (0, _react.useState)(src || fallbackSrc || null),
+    imgSrc = _useState[0],
+    setImgSrc = _useState[1];
+  var _useState2 = (0, _react.useState)(!!src),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    error = _useState3[0],
+    setError = _useState3[1];
+  var imageRef = (0, _react.useRef)(null);
+  (0, _react.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 = (0, _react.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]);
+  (0, _useIsomorphicLayoutEffect.default)(function () {
+    loadImage();
+    return function () {
+      flush();
+    };
+  }, [loadImage]);
+  return {
+    imgSrc: imgSrc,
+    isLoading: isLoading,
+    error: error
+  };
+};

package/cjs/Image/index.d.ts

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

package/cjs/Image/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Image = _interopRequireDefault(require("./Image"));
+var _default = exports.default = _Image.default;

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

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

package/cjs/internals/utils/getDOMNode.js

@@ -8,8 +8,9 @@ exports.getDOMNode = getDOMNode;
 var _reactDom = _interopRequireDefault(require("react-dom"));
 function safeFindDOMNode(componentOrElement) {
   if (componentOrElement && 'setState' in componentOrElement) {
+    var _ReactDOM$findDOMNode;
     // eslint-disable-next-line react/no-find-dom-node
-    return _reactDom.default.findDOMNode(componentOrElement);
+    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;
 }

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;