rsuite 5.13.0 → 5.15.0

package/Button/styles/index.less

@@ -35,6 +35,7 @@
   .button-activated({
     color: var(--rs-btn-default-hover-text);
     background-color: var(--rs-btn-default-hover-bg);
+    text-decoration: none;
   });
 
   .button-pressed({

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+# [5.15.0](https://github.com/rsuite/rsuite/compare/v5.14.0...v5.15.0) (2022-06-09)
+
+### Features
+
+- **less:** expose primary palette variables ([#2532](https://github.com/rsuite/rsuite/issues/2532)) ([b1d187d](https://github.com/rsuite/rsuite/commit/b1d187da0f831a31d87f0e73ab28216d86394327))
+
+# [5.14.0](https://github.com/rsuite/rsuite/compare/v5.13.1...v5.14.0) (2022-06-02)
+
+### Bug Fixes
+
+- **Button:** remove underline when hovered ([#2516](https://github.com/rsuite/rsuite/issues/2516)) ([8bbb10d](https://github.com/rsuite/rsuite/commit/8bbb10db425dadd4110db60b8b7066d8f97bab54))
+- **Dropdown:** fix vertical alignment of submenus ([#2524](https://github.com/rsuite/rsuite/issues/2524)) ([7c0ef52](https://github.com/rsuite/rsuite/commit/7c0ef52e9c7f57abfd97814725f5b3b82cc5dd70))
+- **Form:** make FormInstance methods non-nullable ([#2521](https://github.com/rsuite/rsuite/issues/2521)) ([225af8a](https://github.com/rsuite/rsuite/commit/225af8a9abdffaf76101f28e3690b7ede6a16139))
+- **Modal:** expose missing props ([#2522](https://github.com/rsuite/rsuite/issues/2522)) ([2ed7040](https://github.com/rsuite/rsuite/commit/2ed704002d03cec1478de879b08c0d3e7fd2dcf1))
+- **Panel:** fix accordion not collapsible expanded panel ([#2514](https://github.com/rsuite/rsuite/issues/2514)) ([10c80f2](https://github.com/rsuite/rsuite/commit/10c80f26622e2f5b8c2e81731b66e2276d5622c4))
+- **Sidenav:** display tooltip when hovering collapsed Sidenav item ([#2504](https://github.com/rsuite/rsuite/issues/2504)) ([d1238eb](https://github.com/rsuite/rsuite/commit/d1238ebb22e2458a780846903e042de72c1d8143))
+- **Sidenav:** remove subtle item bg when focused by mouse ([#2511](https://github.com/rsuite/rsuite/issues/2511)) ([819461c](https://github.com/rsuite/rsuite/commit/819461c918e809fa397fe3dc6146510a9ffb1bd2))
+- **Table:** fix elements in merged cells being occluded ([#2513](https://github.com/rsuite/rsuite/issues/2513)) ([22e5467](https://github.com/rsuite/rsuite/commit/22e54671cbeb3e63d8480469c3d53744732308f2))
+
+### Features
+
+- **grid:** synchronize all grid size and breakpoint with bootstrap5 ([e8d2d37](https://github.com/rsuite/rsuite/commit/e8d2d372e2280336482de648d9619607b9cb1798))
+- **Nav.Menu:** add `openDirection` prop ([#2523](https://github.com/rsuite/rsuite/issues/2523)) ([bd824ac](https://github.com/rsuite/rsuite/commit/bd824ac9359cc5cebb848424d8045986e32c6462))
+- **toaster:** add support for useToaster ([#2518](https://github.com/rsuite/rsuite/issues/2518)) ([75cb960](https://github.com/rsuite/rsuite/commit/75cb9601b56fbdc64a09b9bbc93aaf2b22b715c4))
+- **Tooltip,Popover:** add arrow props to hide arrow indicator ([48d876f](https://github.com/rsuite/rsuite/commit/48d876f7d2211f5e9cb1db7e8f552152821e05ac))
+- **Tooltip,Popover:** add followCursor props to enable speaker follow cursor ([e3bf75d](https://github.com/rsuite/rsuite/commit/e3bf75d4e4c537bf677c404fce84b76266531630))
+
+### Performance Improvements
+
+- **Dropdown:** improve contrast of active Dropdown item background color ([#2510](https://github.com/rsuite/rsuite/issues/2510)) ([35a418a](https://github.com/rsuite/rsuite/commit/35a418ae5f2104e6ac56ebe5c91d426025fce94a))
+
+## [5.13.1](https://github.com/rsuite/rsuite/compare/v5.13.0...v5.13.1) (2022-05-27)
+
+### Bug Fixes
+
+- **CheckTreePicker:** fix duplicated key when data changed ([#2486](https://github.com/rsuite/rsuite/issues/2486)) ([#2500](https://github.com/rsuite/rsuite/issues/2500)) ([d155719](https://github.com/rsuite/rsuite/commit/d155719a9ae9d9cec119a0c33281c628379b4a78))
+- **Sidenav:** correct Sidenav.Toggle styles ([#2497](https://github.com/rsuite/rsuite/issues/2497)) ([b3168e4](https://github.com/rsuite/rsuite/commit/b3168e426c3a2caad1689e9e9d3babf1d76022b8))
+- **Sidenav:** correct subtle Sidenav item hover styles ([#2498](https://github.com/rsuite/rsuite/issues/2498)) ([2d853ee](https://github.com/rsuite/rsuite/commit/2d853ee8419a3283683bbf897442b9bc789b5a2a))
+- **Sidenav:** fix Sidenav.Toggle icon direction ([#2495](https://github.com/rsuite/rsuite/issues/2495)) ([c490632](https://github.com/rsuite/rsuite/commit/c490632cc613807ff27124140b4250fc132aa8b2))
+- **Whisper:** correct type declarations for ref ([856877a](https://github.com/rsuite/rsuite/commit/856877aec5a20710b94f6ddf241be76ecd34c88d))
+
+### Features
+
+- export WhisperInstance ([1c4eb5f](https://github.com/rsuite/rsuite/commit/1c4eb5ffbb6b5e69987436c03cc133f39c245866))
+
 # [5.13.0](https://github.com/rsuite/rsuite/compare/v5.12.0...v5.13.0) (2022-05-19)
 
 ### Bug Fixes

package/Dropdown/styles/index.less

@@ -94,8 +94,8 @@
   font-size: @font-size-base;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   background-color: var(--rs-bg-overlay);
-  border-radius: @border-radius;
-  padding: @border-radius 0;
+  border-radius: @dropdown-menu-radius;
+  padding: @dropdown-menu-padding-y 0;
   outline: 0;
 
   &:focus-visible {
@@ -202,7 +202,7 @@
 
     > .rs-dropdown-menu {
       position: absolute;
-      top: 0;
+      top: -@dropdown-menu-padding-y;
     }
   }
 
@@ -223,6 +223,11 @@
 
   .rs-dropdown-menu {
     left: 100%;
+
+    &[data-direction='start'] {
+      left: unset;
+      right: 100%;
+    }
   }
 
   // Open

package/Grid/styles/index.less

@@ -13,17 +13,25 @@
 .rs-grid-container {
   .container-fixed();
 
-  @media (min-width: @screen-phone) {
+  @media (min-width: @screen-sm) {
     width: @container-sm;
   }
 
-  @media (min-width: @screen-desktop) {
+  @media (min-width: @screen-md) {
     width: @container-md;
   }
 
-  @media (min-width: @screen-lg-desktop) {
+  @media (min-width: @screen-lg) {
     width: @container-lg;
   }
+
+  @media (min-width: @screen-xl) {
+    width: @container-xl;
+  }
+
+  @media (min-width: @screen-xxl) {
+    width: @container-xxl;
+  }
 }
 
 // Fluid container
@@ -60,7 +68,7 @@
 // Columns, offsets, pushes, and pulls for the small device range, from phones
 // to tablets / phones.
 
-@media (min-width: @screen-phone) {
+@media (min-width: @screen-sm) {
   .make-grid(sm);
 }
 
@@ -68,7 +76,7 @@
 //
 // Columns, offsets, pushes, and pulls for the desktop device range.
 
-@media (min-width: @screen-desktop) {
+@media (min-width: @screen-md) {
   .make-grid(md);
 }
 
@@ -76,26 +84,50 @@
 //
 // Columns, offsets, pushes, and pulls for the large desktop device range.
 
-@media (min-width: @screen-lg-desktop) {
+@media (min-width: @screen-lg) {
   .make-grid(lg);
 }
 
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-xl) {
+  .make-grid(xl);
+}
+
+// Extra extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-xxl) {
+  .make-grid(xxl);
+}
+
 // Hiddens
 //
 // All hidden styles.
 
-@media (max-width: (@screen-phone - 1)) {
+@media (max-width: (@screen-sm - 1)) {
   .hidden(xs);
 }
 
-@media (min-width: @screen-phone) and (max-width: (@screen-desktop - 1)) {
+@media (min-width: @screen-sm) and (max-width: (@screen-md - 1)) {
   .hidden(sm);
 }
 
-@media (min-width: @screen-desktop) and (max-width: (@screen-lg-desktop - 1)) {
+@media (min-width: @screen-md) and (max-width: (@screen-lg - 1)) {
   .hidden(md);
 }
 
-@media (min-width: @screen-lg-desktop) {
+@media (min-width: @screen-lg) and (max-width: (@screen-xl - 1)) {
   .hidden(lg);
 }
+
+@media (min-width: @screen-xl) and (max-width: (@screen-xxl - 1)) {
+  .hidden(xl);
+}
+
+@media (min-width: @screen-xxl) {
+  .hidden(xxl);
+}

package/Sidenav/styles/index.less

@@ -12,14 +12,16 @@
 .rs-sidenav {
   transition: width @sidenav-collapse-transition-config;
   width: @sidenav-default-width;
+  display: flex;
+  flex-direction: column;
 }
 
 .rs-sidenav-nav {
   list-style: none;
   padding: 0;
 
-  > .rs-sidenav-item,
-  > .rs-dropdown .rs-dropdown-toggle,
+  .rs-sidenav-item,
+  .rs-dropdown-toggle,
   .rs-dropdown-item,
   .rs-dropdown-item-toggle {
     padding: @sidenav-padding-vertical @sidenav-padding-horizontal;
@@ -185,6 +187,22 @@
   }
 }
 
+// TODO Consider rename as sidenav-footer
+.rs-sidenav-toggle {
+  height: @sidenav-footer-height;
+  border-top: 1px solid;
+  margin-top: auto;
+
+  &-button {
+    float: right;
+    width: @sidenav-compact-width;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    color: inherit;
+  }
+}
+
 // Expanded styles
 .rs-sidenav-collapse-in {
   width: @sidenav-collapse-in-width;
@@ -414,12 +432,14 @@
   color: var(--rs-sidenav-default-text);
 
   .rs-sidenav-item,
-  .rs-dropdown-toggle {
+  .rs-dropdown-toggle,
+  .rs-sidenav-toggle-button {
     background-color: var(--rs-sidenav-default-bg);
   }
 
   .rs-sidenav-item:hover,
   .rs-dropdown .rs-dropdown-toggle:hover,
+  .rs-sidenav-toggle-button:hover,
   .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
     background-color: var(--rs-sidenav-default-hover-bg);
     color: var(--rs-sidenav-default-hover-text);
@@ -431,6 +451,10 @@
     color: var(--rs-sidenav-default-selected-text);
   }
 
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-default-footer-border);
+  }
+
   // Collapsed
   &.rs-sidenav-collapse-out {
     .rs-dropdown-item.rs-dropdown-item-active {
@@ -480,6 +504,7 @@
 
   .rs-sidenav-item,
   .rs-dropdown .rs-dropdown-toggle,
+  .rs-sidenav-toggle-button,
   .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
     background-color: var(--rs-sidenav-inverse-bg);
 
@@ -491,7 +516,8 @@
 
   .rs-dropdown-item,
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
-  .rs-dropdown-item > .rs-dropdown-item-toggle {
+  .rs-dropdown-item > .rs-dropdown-item-toggle,
+  .rs-sidenav-toggle-button {
     color: var(--rs-sidenav-inverse-text);
 
     &:hover,
@@ -527,20 +553,26 @@
   .rs-dropdown-item.rs-dropdown-item-active {
     background-color: var(--rs-sidenav-inverse-selected-bg);
   }
+
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-inverse-footer-border);
+  }
 }
 
 // Subtle Sidenav
 .rs-sidenav-subtle {
   background-color: transparent;
-  color: var(--rs-sidenav-subtle-text);
 
   .rs-sidenav-item,
-  .rs-dropdown .rs-dropdown-toggle {
+  .rs-dropdown-toggle,
+  .rs-dropdown-item,
+  .rs-sidenav-toggle-button {
     background-color: transparent;
+    color: var(--rs-sidenav-subtle-text);
 
     &:hover,
-    &:focus {
-      background-color: transparent;
+    &:focus-visible {
+      background-color: var(--rs-sidenav-subtle-hover-bg);
       color: var(--rs-sidenav-subtle-hover-text);
     }
   }
@@ -560,6 +592,10 @@
       background-color: var(--rs-sidenav-subtle-hover-bg);
     }
   }
+
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-subtle-footer-border);
+  }
 }
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,
@@ -569,7 +605,7 @@
     color: var(--rs-sidenav-subtle-text);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: var(--rs-sidenav-subtle-hover-bg);
       color: var(--rs-sidenav-subtle-hover-text);
     }
@@ -586,8 +622,6 @@
 .rs-sidenav-subtle.rs-sidenav-collapse-out {
   // Set active Level1 style
   .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
-    color: var(--rs-sidenav-subtle-text);
-
     &:hover {
       background-color: var(--rs-sidenav-subtle-hover-bg);
     }

package/Table/styles/index.less

@@ -222,9 +222,7 @@
   &-column-resize-spanner {
     .column-resize-spanner();
 
-    border-left: @table-column-resize-spanner-gap-width solid var(--rs-bg-card);
     box-sizing: content-box;
-    margin-left: (-1 * @table-column-resize-spanner-gap-width);
 
     &::after,
     &::before {

package/Tooltip/styles/index.less

@@ -31,8 +31,8 @@
   }
 
   // Arrows
-  &::before,
-  &::after {
+  &-arrow::before,
+  &-arrow::after {
     content: ' ';
     display: block;
     position: absolute;
@@ -42,14 +42,14 @@
     border-style: solid;
   }
 
-  &::before {
+  &-arrow::before {
     display: none;
   }
 
   .high-contrast-mode({
     border: 1px solid var(--rs-border-primary);
 
-    &::before {
+    &-arrow::before {
       display: block;
     }
   });

package/cjs/@types/common.d.ts

@@ -149,4 +149,10 @@ export interface Offset {
     height: number;
 }
 export declare type OnChangeCallback<T, E = React.SyntheticEvent> = (value: T, event: E) => void;
+export declare type CursorPosition = {
+    top: number;
+    left: number;
+    clientTop: number;
+    clientLeft: number;
+};
 export {};

package/cjs/Cascader/utils.d.ts

@@ -6,7 +6,7 @@ export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], va
     paths: T[];
 };
 export declare function usePaths(props: CascaderProps): {
-    enforceUpdate: (nextValue: any, isAttachChildren?: boolean | undefined) => void;
+    enforceUpdate: (nextValue: any, isAttachChildren?: boolean) => void;
     columnData: ItemDataType<string | number>[][];
     valueToPaths: ItemDataType<string | number>[];
     selectedPaths: ItemDataType<string | number>[];

package/cjs/Col/Col.d.ts

@@ -1,21 +1,29 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface ColProps extends WithAsProps {
-    /** The number of columns you wish to span for Extra small devices Phones (< 480px) */
+    /** The number of columns you wish to span for Extra small devices Phones (< 576px) */
     xs?: number;
-    /** The number of columns you wish to span for Small devices Tablets (≥ 480px) */
+    /** The number of columns you wish to span for Small devices Tablets (≥ 576px) */
     sm?: number;
-    /** The number of columns you wish to span for Medium devices Desktops (≥ 992px) */
+    /** The number of columns you wish to span for Medium devices Desktops (≥ 768px) */
     md?: number;
-    /** The number of columns you wish to span for Large devices Desktops (≥ 1200px) */
+    /** The number of columns you wish to span for Large devices Desktops (≥ 992px) */
     lg?: number;
+    /** The number of columns you wish to span for Extra Large devices Desktops (≥ 1200px) */
+    xl?: number;
+    /** The number of columns you wish to span for Ultra Large devices Desktops (≥ 1400px) */
+    xxl?: number;
     /** Move columns to the right for Extra small devices Phones */
     xsOffset?: number;
     /** Move columns to the right for Small devices Tablets */
     smOffset?: number;
     /** Move columns to the right for Medium devices Desktops */
     mdOffset?: number;
-    /** Move columns to the right for Medium devices Desktops */
+    /** Move columns to the right for Large devices Desktops */
     lgOffset?: number;
+    /** Move columns to the right for Extra large devices Desktops */
+    xlOffset?: number;
+    /** Move columns to the right for Ultra large devices Desktops */
+    xxlOffset?: number;
     /** Change the order of grid columns to the right for Extra small devices Phones */
     xsPush?: number;
     /** Change the order of grid columns to the right for Small devices Tablets */
@@ -24,6 +32,10 @@ export interface ColProps extends WithAsProps {
     mdPush?: number;
     /** Change the order of grid columns to the right for Large devices Desktops */
     lgPush?: number;
+    /** Change the order of grid columns to the right for Extra large devices Desktops */
+    xlPush?: number;
+    /** Change the order of grid columns to the right for Ultra large devices Desktops */
+    xxlPush?: number;
     /** Change the order of grid columns to the left for Extra small devices Phones */
     xsPull?: number;
     /** Change the order of grid columns to the left for Small devices Tablets */
@@ -32,6 +44,10 @@ export interface ColProps extends WithAsProps {
     mdPull?: number;
     /** Change the order of grid columns to the left for Large devices Desktops */
     lgPull?: number;
+    /** Change the order of grid columns to the left for Extra large devices Desktops */
+    xlPull?: number;
+    /** Change the order of grid columns to the left for Ultra large devices Desktops */
+    xxlPull?: number;
     /** Hide column on Extra small devices Phones */
     xsHidden?: boolean;
     /** Hide column on Small devices Tablets */
@@ -40,6 +56,10 @@ export interface ColProps extends WithAsProps {
     mdHidden?: boolean;
     /** Hide column on Large devices Desktops */
     lgHidden?: boolean;
+    /** Hide column on Extra large devices Desktops */
+    xlHidden?: boolean;
+    /** Hide column on Ultra large devices Desktops */
+    xxlHidden?: boolean;
 }
 declare const Col: RsRefForwardingComponent<'div', ColProps>;
 export default Col;

package/cjs/Col/Col.js

@@ -39,7 +39,7 @@ var Col = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return rest[key];
   };
 
-  _utils.SIZE.forEach(function (size) {
+  _utils.COLUMN_SIZE.forEach(function (size) {
     var col = getPropValue(size);
     var hidden = getPropValue(size + "Hidden");
     var offset = getPropValue(size + "Offset");
@@ -70,10 +70,14 @@ Col.propTypes = {
   sm: _propTypes.default.number,
   md: _propTypes.default.number,
   lg: _propTypes.default.number,
+  xl: _propTypes.default.number,
+  xxl: _propTypes.default.number,
   xsOffset: _propTypes.default.number,
   smOffset: _propTypes.default.number,
   mdOffset: _propTypes.default.number,
   lgOffset: _propTypes.default.number,
+  xlOffset: _propTypes.default.number,
+  xxlOffset: _propTypes.default.number,
   xsPush: _propTypes.default.number,
   smPush: _propTypes.default.number,
   mdPush: _propTypes.default.number,
@@ -82,10 +86,14 @@ Col.propTypes = {
   smPull: _propTypes.default.number,
   mdPull: _propTypes.default.number,
   lgPull: _propTypes.default.number,
+  xlPull: _propTypes.default.number,
+  xxlPull: _propTypes.default.number,
   xsHidden: _propTypes.default.bool,
   smHidden: _propTypes.default.bool,
   mdHidden: _propTypes.default.bool,
   lgHidden: _propTypes.default.bool,
+  xlHidden: _propTypes.default.bool,
+  xxlHidden: _propTypes.default.bool,
   as: _propTypes.default.elementType
 };
 var _default = Col;

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Locale } from '../locales';
+import { ToastContainerInstance } from '../toaster/ToastContainer';
 export interface CustomValue<T = Locale> {
     /** Language configuration */
     locale: T;
@@ -33,6 +34,10 @@ export interface CustomValue<T = Locale> {
      *
      * */
     parseDate: (dateString: string, formatString: string) => Date;
+    /**
+     * A Map of toast containers
+     */
+    toasters?: React.MutableRefObject<Map<string, ToastContainerInstance>>;
 }
 export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
     /** Supported themes */
@@ -41,6 +46,8 @@ export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>>
     classPrefix?: string;
     /** Primary content */
     children?: React.ReactNode;
+    /** Sets a container for toast rendering */
+    toastContainer?: HTMLElement | (() => HTMLElement | null) | null;
 }
 declare const CustomContext: React.Context<CustomProviderProps<{
     common?: {
@@ -75,7 +82,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -93,7 +100,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -112,7 +119,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -125,6 +132,9 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     } | undefined;
     InputPicker?: {
         newItem: string;
+        /**
+         * A Map of toast containers
+         */
         createOption: string;
     } | undefined;
     Uploader?: {
@@ -179,7 +189,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -197,7 +207,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -216,7 +226,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         yesterday: string;
         hours: string;
         minutes: string;
-        seconds: string; /** Support right-to-left */
+        seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
@@ -229,6 +239,9 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
     } | undefined;
     InputPicker?: {
         newItem: string;
+        /**
+         * A Map of toast containers
+         */
         createOption: string;
     } | undefined;
     Uploader?: {
@@ -250,6 +263,6 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         off: string;
     } | undefined;
 }>>;
-declare const CustomProvider: (props: CustomProviderProps) => JSX.Element;
+declare const CustomProvider: (props: Omit<CustomProviderProps, 'toasters'>) => JSX.Element;
 export { CustomContext, Consumer as CustomConsumer };
 export default CustomProvider;

package/cjs/CustomProvider/CustomProvider.js

@@ -17,6 +17,10 @@ var _prefix = require("../utils/prefix");
 
 var _DOMHelper = require("../DOMHelper");
 
+var _ToastContainer = _interopRequireWildcard(require("../toaster/ToastContainer"));
+
+var _utils = require("../utils");
+
 var CustomContext = /*#__PURE__*/_react.default.createContext({});
 
 exports.CustomContext = CustomContext;
@@ -30,12 +34,21 @@ var CustomProvider = function CustomProvider(props) {
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? (0, _prefix.getClassNamePrefix)() : _props$classPrefix,
       theme = props.theme,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "classPrefix", "theme"]);
+      container = props.toastContainer,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "classPrefix", "theme", "toastContainer"]);
+
+  var toasters = _react.default.useRef(new Map());
+
+  var _usePortal = (0, _utils.usePortal)({
+    container: container
+  }),
+      Portal = _usePortal.Portal;
 
   var value = _react.default.useMemo(function () {
     return (0, _extends2.default)({
       classPrefix: classPrefix,
-      theme: theme
+      theme: theme,
+      toasters: toasters
     }, rest);
   }, [classPrefix, theme, rest]);
 
@@ -52,7 +65,15 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme]);
   return /*#__PURE__*/_react.default.createElement(Provider, {
     value: value
-  }, children);
+  }, children, /*#__PURE__*/_react.default.createElement(Portal, null, _ToastContainer.toastPlacements.map(function (placement) {
+    return /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {
+      key: placement,
+      placement: placement,
+      ref: function ref(_ref) {
+        toasters.current.set(placement, _ref);
+      }
+    });
+  })));
 };
 
 var _default = CustomProvider;

package/cjs/Dropdown/useRenderDropdownItem.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function useRenderDropdownItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType<any> | undefined) => JSX.Element;
+export declare function useRenderDropdownItem(Component: React.ElementType): (props: any, OverrideComponent?: React.ElementType) => JSX.Element;