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

package/esm/internals/types/colours.js

@@ -0,0 +1,11 @@
+'use client';
+export let Colours = /*#__PURE__*/function (Colours) {
+  Colours["Red"] = "red";
+  Colours["Orange"] = "orange";
+  Colours["Yellow"] = "yellow";
+  Colours["Green"] = "green";
+  Colours["Cyan"] = "cyan";
+  Colours["Blue"] = "blue";
+  Colours["Violet"] = "violet";
+  return Colours;
+}({});

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

@@ -1,2 +1,8 @@
 'use client';
+export * from "./placement.js";
+export * from "./colours.js";
+
+/**
+ * Represents the data properties for a component.
+ */
 export {};

package/esm/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/esm/internals/types/placement.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

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

@@ -5,12 +5,4 @@ import canUseDOM from 'dom-lib/canUseDOM';
 
 // Internet Explorer 6-11
 export const isIE = () => canUseDOM && /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
-export const isIE11 = () => canUseDOM && window.navigator.userAgent.indexOf('Trident') > -1 && window.navigator.userAgent.indexOf('rv:11.0') > -1;
-export const isAndroid = () => canUseDOM && /Android/i.test(navigator.userAgent);
-export const getChromeVersion = () => {
-  if (canUseDOM) {
-    const match = window.navigator.userAgent.match(/Chrom(e|ium)\/([\d\.]+)\./);
-    return match ? parseFloat(match[2]) : false;
-  }
-  return false;
-};
+export const isAndroid = () => canUseDOM && /Android/i.test(navigator.userAgent);

package/esm/internals/utils/ReactChildren.js

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

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

@@ -0,0 +1,77 @@
+'use client';
+import { Colours } from "../types/colours.js";
+export const isPresetColor = color => {
+  if (!color) {
+    return false;
+  }
+  if (color === 'default') {
+    return true;
+  }
+  return Object.values(Colours).includes(color);
+};
+
+/**
+ * Convert short hex color to full hex color
+ * e.g. #fff -> #ffffff
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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;
+};

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

@@ -6,13 +6,50 @@ export 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
+ */
+export 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
+ */
+export 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/esm/internals/utils/getDOMNode.js

@@ -1,9 +1,9 @@
 'use client';
+/* eslint-disable react/no-find-dom-node */
 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 = ReactDOM.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(ReactDOM, componentOrElement);
   }
   return componentOrElement !== null && componentOrElement !== void 0 ? componentOrElement : null;
@@ -21,7 +21,6 @@ export 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);
 }
 export default getDOMNode;

package/esm/internals/utils/getSafeRegExpString.js

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

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

@@ -1,6 +1,8 @@
 'use client';
 export * from "./BrowserDetection.js";
 export * from "./htmlPropsUtils.js";
+export * from "./css.js";
+export * from "./colours.js";
 export { stringifyReactNode, reactToString } from "./stringifyReactNode.js";
 export { getSafeRegExpString } from "./getSafeRegExpString.js";
 export { getDOMNode } from "./getDOMNode.js";
@@ -14,7 +16,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";
@@ -23,5 +24,4 @@ export { warnOnce } from "./warnOnce.js";
 export { createComponent } from "./createComponent.js";
 export { attachParent } from "./attachParent.js";
 export { isFocusEntering, isFocusLeaving } from "./events.js";
-export { isFocusableElement } from "./dom.js";
-export { getCssValue } from "./css.js";
+export { isFocusableElement } from "./dom.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 | 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/esm/toaster/ToastContainer.js

@@ -1,12 +1,16 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useState, useImperativeHandle, useRef, useCallback } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useState, useImperativeHandle, useCallback } from 'react';
 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 ToastContext from "./ToastContext.js";
+import canUseDOM from 'dom-lib/canUseDOM';
+import { useClassNames } from "../internals/hooks/index.js";
+import { guid, createChainedFunction } from "../internals/utils/index.js";
+import { render } from "./render.js";
+export const defaultToasterContainer = () => {
+  return canUseDOM ? document.body : null;
+};
 export const toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
 const useMessages = () => {
   const [messages, setMessages] = useState([]);
@@ -68,13 +72,11 @@ const useMessages = () => {
   };
 };
 const ToastContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const rootRef = useRef();
   const {
     as: Component = 'div',
     className,
     classPrefix = 'toast-container',
     placement = 'topCenter',
-    callback,
     ...rest
   } = props;
   const {
@@ -90,7 +92,6 @@ const ToastContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     messages
   } = useMessages();
   useImperativeHandle(ref, () => ({
-    root: rootRef.current,
     push,
     clear,
     remove
@@ -99,10 +100,16 @@ const ToastContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     const {
       mouseReset,
       duration,
-      node,
-      container
+      node
     } = item;
-    const toastWithTransition = /*#__PURE__*/React.createElement(Transition, {
+    return /*#__PURE__*/React.createElement(ToastContext.Provider, {
+      value: {
+        usedToaster: true,
+        mouseReset,
+        duration
+      },
+      key: item.key
+    }, /*#__PURE__*/React.createElement(Transition, {
       in: item.visible,
       exitedClassName: rootPrefix('toast-fade-exited'),
       exitingClassName: rootPrefix('toast-fade-exiting'),
@@ -122,42 +129,37 @@ const ToastContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
         onClose: 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.createElement(ToastContext.Provider, {
-      value: {
-        usedToaster: true,
-        mouseReset,
-        duration
-      },
-      key: item.key
-    }, container ? /*#__PURE__*/createPortal(toastWithTransition, typeof container === 'function' ? container() : container) : toastWithTransition);
+    }));
   });
   return /*#__PURE__*/React.createElement(Component, _extends({}, 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.createRef();
-  const containerElement = (typeof container === 'function' ? container() : container) || document.body;
-  return new Promise(resolve => {
-    const renderCallback = () => {
-      resolve([containerRef, unmount]);
-    };
-    const {
-      unmount
-    } = render(/*#__PURE__*/React.createElement(ToastContainer, _extends({}, 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.createRef();
+
+  // Render the ToastContainer component into the specified container
+  const containerId = render(/*#__PURE__*/React.createElement(ToastContainer, _extends({}, toastProps, {
+    ref: ref => {
+      var _resolveContainerRef;
+      toastContainerRef.current = ref;
+      (_resolveContainerRef = resolveContainerRef) === null || _resolveContainerRef === void 0 || _resolveContainerRef();
+    }
+  })), container);
+  await containerRefReady;
+  return [toastContainerRef, containerId];
 };
 ToastContainer.displayName = 'ToastContainer';
 export default ToastContainer;

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

@@ -0,0 +1,21 @@
+'use client';
+import { createRoot } from 'react-dom/client';
+import { guid } from "../internals/utils/index.js";
+import { RSUITE_TOASTER_ID } from "../internals/symbols.js";
+export 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[RSUITE_TOASTER_ID]) {
+    // Attach the containerId to the containerElement
+    containerElement[RSUITE_TOASTER_ID] = guid();
+  }
+  const root = createRoot(mountElement, {
+    identifierPrefix: 'rs-root-'
+  });
+  root.render(element);
+  return containerElement[RSUITE_TOASTER_ID];
+}

package/esm/toaster/toaster.js

@@ -1,28 +1,26 @@
 'use client';
-import ToastContainer from "./ToastContainer.js";
-const defaultContainerId = 'default';
+import ToastContainer, { defaultToasterContainer } from "./ToastContainer.js";
+import { RSUITE_TOASTER_ID } from "../internals/symbols.js";
 const containers = new Map();
 
 /**
- * Create a container by Id.
- * @param containerId
- * @param options
+ * Create a container instance.
+ * @param placement
+ * @param props
  */
-async function createContainer(containerId, props) {
-  const [container] = await ToastContainer.getInstance(props);
-  containers.set(containerId || defaultContainerId, container);
+async function createContainer(placement, props) {
+  const [container, containerId] = await ToastContainer.getInstance(props);
+  containers.set(`${containerId}_${placement}`, container);
   return container;
 }
 
 /**
  * Get the container by ID. Use default ID when ID is not available.
  * @param containerId
+ * @param placement
  */
-function getContainer(containerId) {
-  if (containers.size == 0) {
-    return null;
-  }
-  return containers.get(containerId || defaultContainerId);
+function getContainer(containerId, placement) {
+  return containers.get(`${containerId}_${placement}`);
 }
 const toaster = message => toaster.push(message);
 toaster.push = function (message, options) {
@@ -30,14 +28,25 @@ toaster.push = function (message, options) {
     options = {};
   }
   const {
-    placement: containerId,
+    placement = 'topCenter',
+    container = defaultToasterContainer,
     ...restOptions
   } = options;
-  const container = getContainer(containerId);
-  if (container !== null && container !== void 0 && container.current) {
-    return container.current.push(message, restOptions);
+  const containerElement = typeof container === 'function' ? container() : container;
+  const containerElementId = containerElement ? containerElement[RSUITE_TOASTER_ID] : null;
+  if (containerElementId) {
+    const 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(ref => {
+  const newOptions = {
+    ...options,
+    container: containerElement,
+    placement
+  };
+  return createContainer(placement, newOptions).then(ref => {
     var _ref$current;
     return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.push(message, restOptions);
   });

package/esm/useMediaQuery/useMediaQuery.js

@@ -32,9 +32,7 @@ const matchMedia = query => {
  */
 export function useMediaQuery(query) {
   const queries = Array.isArray(query) ? query : [query];
-  const mediaQueries = useMemo(() => queries.map(query => mediaQuerySizeMap[query] || query),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [...queries]);
+  const mediaQueries = useMemo(() => queries.map(query => mediaQuerySizeMap[query] || query), [...queries]);
   const mediaQueryArray = useRef(mediaQueries.map(query => matchMedia(query).matches));
   const subscribe = useCallback(callback => {
     const list = mediaQueries.map(query => matchMedia(query));