rsuite 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [5.4.0](https://github.com/rsuite/rsuite/compare/v5.3.0...v5.4.0) (2021-12-17)
+
+### Bug Fixes
+
+- **DatePicker,DateRangePicker:** suppress depreated caretComponent warning ([#2233](https://github.com/rsuite/rsuite/issues/2233)) ([3a79d48](https://github.com/rsuite/rsuite/commit/3a79d486268ff31ad6a620dfc17165c3be259219))
+- **DateRangePicker:** fix selecting ending date not working ([#2217](https://github.com/rsuite/rsuite/issues/2217)) ([2136aa3](https://github.com/rsuite/rsuite/commit/2136aa3327f914a910fb5805b2d11a036e0f6601))
+- **Modal:** fix Modal focus being reset on re-rendering ([#2208](https://github.com/rsuite/rsuite/issues/2208)) ([a931b06](https://github.com/rsuite/rsuite/commit/a931b06942e7fc011ab77e70b105f5790a33e55b))
+- **Nav:** fix incorrect Dropdown button background ([#2227](https://github.com/rsuite/rsuite/issues/2227)) ([421de83](https://github.com/rsuite/rsuite/commit/421de838ed13694254cc6a178d0369e12b666202))
+- **Navbar:** fix icon style in Navbar items ([#2229](https://github.com/rsuite/rsuite/issues/2229)) ([560df61](https://github.com/rsuite/rsuite/commit/560df61a44c0338b153b2c09a50e946c207c684a))
+- **Overlay:** overlay is rendered inside Modal by default ([#2230](https://github.com/rsuite/rsuite/issues/2230)) ([4fac628](https://github.com/rsuite/rsuite/commit/4fac628e23e41db097ec63c2ac348a7345f3ee31))
+- **Radio:** fix unclickable without children ([#2190](https://github.com/rsuite/rsuite/issues/2190)) ([cef5946](https://github.com/rsuite/rsuite/commit/cef59463e281d6aa6b4b9576204d16eed58087c8))
+- **SelectPicker:** fix onChange argument type ([#2193](https://github.com/rsuite/rsuite/issues/2193)) ([db0efa9](https://github.com/rsuite/rsuite/commit/db0efa94ad33de5d02bfd81e926cf622c40ecce7))
+- **Steps:** step item not rendering number ([#2202](https://github.com/rsuite/rsuite/issues/2202)) ([413880b](https://github.com/rsuite/rsuite/commit/413880be99972d8a58d5f0a0c9b6b08017ad33a2))
+- **Toggle:** fix Toggle is still clickable in loading state ([#2219](https://github.com/rsuite/rsuite/issues/2219)) ([e5661fd](https://github.com/rsuite/rsuite/commit/e5661fdb4ef659527ca97c2ea2231b4025e904d3))
+- **Tree:** remove dragNode Element when drag node ([#2185](https://github.com/rsuite/rsuite/issues/2185)) ([#2237](https://github.com/rsuite/rsuite/issues/2237)) ([f6e959f](https://github.com/rsuite/rsuite/commit/f6e959f4aa24f0fa87b5fa1bbc6e1aa775fecd2b))
+
+### Features
+
+- **Stack:** add Stack support to the layout ([#2199](https://github.com/rsuite/rsuite/issues/2199)) ([1ac132e](https://github.com/rsuite/rsuite/commit/1ac132e0fc98a6739dee07d9e6281202530d80fa))
+
+### Performance Improvements
+
+- **CheckPicker:** infer value and onChange types from data prop ([#2228](https://github.com/rsuite/rsuite/issues/2228)) ([eb4f9a8](https://github.com/rsuite/rsuite/commit/eb4f9a8f4c84cf30b3521532d95f4dc2490d0699))
+
 # [5.3.0](https://github.com/rsuite/rsuite/compare/5.2.4...5.3.0) (2021-12-10)
 
 ### Bug Fixes

package/Dropdown/styles/index.less

@@ -1,6 +1,7 @@
 @import '../../styles/common';
 @import '../../styles/mixins/menu';
 @import 'mixin';
+@import '../../Button/styles/index.less';
 
 //
 // Dropdown menus

package/Nav/styles/index.less

@@ -1,5 +1,6 @@
 @import '../../styles/common';
 @import '../../Ripple/styles/mixins';
+@import '../../Dropdown/styles/index';
 
 //
 // Navs

package/Navbar/styles/index.less

@@ -59,6 +59,13 @@
   background-color: transparent;
   position: relative;
   overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  > .rs-icon {
+    font-size: 16px;
+    margin-right: 5px;
+  }
 }
 
 // Focus style

package/Radio/styles/index.less

@@ -30,6 +30,12 @@
 
   [type='radio'] {
     opacity: 0;
+    // bring to foreground
+    position: absolute;
+    z-index: 1;
+    width: @radio-width-height;
+    height: @radio-width-height;
+    cursor: pointer;
   }
 
   &::before,

package/Stack/package.json

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

package/Stack/styles/index.less

@@ -0,0 +1,5 @@
+@import '../../styles/common';
+
+.rs-stack {
+  display: flex;
+}

package/TreePicker/styles/index.less

@@ -13,20 +13,6 @@
   overflow-y: auto;
   flex: 1 1 auto;
 
-  &-drag-node-mover {
-    position: absolute;
-    top: -1000px;
-    color: var(--rs-text-primary);
-    background-color: var(--rs-bg-overlay);
-    display: inline-block;
-    margin: 0;
-    padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-    border-radius: 6px;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
-    z-index: 1060;
-    cursor: move;
-  }
-
   &.rs-tree-virtualized {
     overflow: hidden;
 

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

@@ -134,12 +134,12 @@ export interface SVGIcon {
     viewBox: string;
     id: string;
 }
-export interface ItemDataType extends Record<string, any> {
+export interface ItemDataType<T = number | string> extends Record<string, any> {
     label?: string | React.ReactNode;
-    value?: string | number;
+    value?: T;
     groupBy?: string;
-    parent?: ItemDataType;
-    children?: ItemDataType[];
+    parent?: ItemDataType<T>;
+    children?: ItemDataType<T>[];
     loading?: boolean;
 }
 export interface Offset {

package/cjs/Cascader/utils.d.ts

@@ -2,16 +2,16 @@
 import { CascaderProps } from './Cascader';
 import { ItemDataType } from '../@types/common';
 export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
-    columns: ItemDataType[][];
+    columns: ItemDataType<string | number>[][];
     paths: T[];
 };
 export declare function usePaths(props: CascaderProps): {
     enforceUpdate: (nextValue: any, isAttachChildren?: boolean | undefined) => void;
-    columnData: ItemDataType[][];
-    valueToPaths: ItemDataType[];
-    selectedPaths: ItemDataType[];
-    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType[][]>>;
-    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
+    columnData: ItemDataType<string | number>[][];
+    valueToPaths: ItemDataType<string | number>[];
+    selectedPaths: ItemDataType<string | number>[];
+    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
+    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
     addColumn: (column: ItemDataType[], index: number) => void;
 };

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -1,13 +1,18 @@
+import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker';
+import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, SelectProps<T> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */
     countable?: boolean;
 }
-declare const CheckPicker: PickerComponent<CheckPickerProps>;
+export interface CheckPickerComponent {
+    <T>(props: CheckPickerProps<T>): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
+}
+declare const CheckPicker: CheckPickerComponent;
 export default CheckPicker;

package/cjs/CheckPicker/test/CheckPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/CheckPicker/test/CheckPicker.test.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tsExpect = require("ts-expect");
+
+var _CheckPicker = _interopRequireDefault(require("../CheckPicker"));
+
+// Infer value and onChange types from data
+var numberValuedData = [{
+  label: 'One',
+  value: 1
+}];
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: [1]
+}); // @ts-expect-error should not accept single value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: 1
+}); // @ts-expect-error should not accept string value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: ['1']
+});
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  onChange: function onChange(newValue) {
+    (0, _tsExpect.expectType)(newValue);
+  }
+});
+
+var stringValuedData = [{
+  label: 'One',
+  value: 'One'
+}];
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: stringValuedData,
+  value: ['1']
+}); // @ts-expect-error should not accept single value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: numberValuedData,
+  value: "1"
+}); // @ts-expect-error should not accept number value
+
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: stringValuedData,
+  value: [1]
+});
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  data: stringValuedData,
+  onChange: function onChange(newValue) {
+    (0, _tsExpect.expectType)(newValue);
+  }
+});

package/cjs/CheckTree/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,18 +7,16 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _CheckTreePicker = _interopRequireDefault(require("../CheckTreePicker"));
 
 var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
 
 var CheckTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var dragNodeRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
     value: {
-      inline: true,
-      dragNodeRef: dragNodeRef
+      inline: true
     }
   }, /*#__PURE__*/_react.default.createElement(_CheckTreePicker.default, (0, _extends2.default)({
     ref: ref

package/cjs/DatePicker/DatePicker.js

@@ -439,7 +439,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
-  var caretComponent = (0, _react.useMemo)(function () {
+  var caretAs = (0, _react.useMemo)(function () {
     return _utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default;
   }, [formatStr]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
@@ -475,7 +475,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     active: active,
     placement: placement,
     disabled: disabled,
-    caretComponent: caretComponent
+    caretAs: caretAs
   }), renderDate())));
 });
 

package/cjs/DateRangePicker/DateRangePicker.js

@@ -294,6 +294,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setHoverDateRange(nextHoverDateRange);
     }
   }, [getHoverRangeValue, hoverRange]);
+  /**
+   * Callback for selecting a date cell in the calendar grid
+   */
+
   var handleSelectDate = (0, _react.useCallback)(function (date, event) {
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
@@ -329,7 +333,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       nextSelectDates.reverse();
     }
 
-    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : null);
+    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
     updateCalendarDate(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
@@ -628,7 +632,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretComponent: _Calendar.default,
+    caretAs: _Calendar.default,
     disabled: disabled
   }), getDisplayString(value))));
 });

package/cjs/Dropdown/DropdownToggle.js

@@ -23,6 +23,8 @@ var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"))
 
 var _Sidenav = require("../Sidenav/Sidenav");
 
+var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
+
 var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Button.default : _props$as,
@@ -38,6 +40,9 @@ var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "renderToggle", "children", "icon", "noCaret", "placement"]);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
 
+  var _useContext = (0, _react.useContext)(_NavContext.default),
+      withinNav = _useContext.withinNav;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -50,7 +55,9 @@ var DropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
   var Caret = (0, _useToggleCaret.default)(inSidenav ? 'bottomStart' : placement);
 
-  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    appearance: withinNav ? 'subtle' : undefined
+  }, rest, {
     ref: ref,
     className: classes
   }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {

package/cjs/MultiCascader/utils.d.ts

@@ -39,16 +39,16 @@ export declare const removeAllChildrenValue: <T>(value: T[], item: ItemType, ite
  */
 export declare function useFlattenData(data: ItemDataType[], itemKeys: ItemKeys): {
     addFlattenData: (children: ItemDataType[], parent: ItemDataType) => void;
-    flattenData: ItemDataType[];
+    flattenData: ItemDataType<string | number>[];
 };
 /**
  * A hook for column data
  * @param flattenData
  */
 export declare function useColumnData(flattenData: ItemType[]): {
-    columnData: ItemDataType[][];
+    columnData: ItemDataType<string | number>[][];
     addColumn: (column: ItemDataType[], index: number) => void;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType[][]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
     enforceUpdateColumnData: (nextData: ItemDataType[]) => void;
 };
 /**

package/cjs/Nav/Nav.js

@@ -79,6 +79,7 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
       value: {
+        withinNav: true,
         activeKey: activeKey,
         onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
       }
@@ -93,6 +94,7 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (sidenav) {
     return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
       value: {
+        withinNav: true,
         activeKey: activeKey,
         onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
       }
@@ -109,6 +111,7 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
     value: {
+      withinNav: true,
       activeKey: activeKey,
       onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
     }

package/cjs/Nav/NavContext.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 export interface NavContextProps {
+    /**
+     * Whether component is rendered within a <Nav>
+     *
+     * FIXME: Bad design. Should use NavContextProps | null to determin whether within a <Nav>
+     */
+    withinNav: boolean;
     activeKey: string | null;
     onSelect?: (eventKey: string | undefined, event: React.SyntheticEvent) => void;
 }

package/cjs/Nav/NavContext.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _noop = _interopRequireDefault(require("lodash/noop"));
 
 var NavContext = /*#__PURE__*/_react.default.createContext({
+  withinNav: false,
   activeKey: null,
   onSelect: _noop.default
 });

package/cjs/Overlay/Modal.js

@@ -17,8 +17,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
-
 var _contains = _interopRequireDefault(require("dom-lib/contains"));
 
 var _getContainer = _interopRequireDefault(require("dom-lib/getContainer"));
@@ -33,6 +31,8 @@ var _utils = require("../Animation/utils");
 
 var _utils2 = require("../utils");
 
+var _OverlayContext = _interopRequireDefault(require("./OverlayContext"));
+
 var manager;
 
 function getManager() {
@@ -125,12 +125,12 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var mountModal = open || Transition && !exited;
   var lastFocus = (0, _react.useRef)(null);
-  var handleDocumentKeyDown = (0, _react.useCallback)(function (event) {
+  var handleDocumentKeyDown = (0, _utils2.useEventCallback)(function (event) {
     if (keyboard && event.key === _utils2.KEY_VALUES.ESC && modal.isTopModal()) {
       onEsc === null || onEsc === void 0 ? void 0 : onEsc(event);
       onClose === null || onClose === void 0 ? void 0 : onClose(event);
     }
-  }, [keyboard, modal, onEsc, onClose]);
+  });
   var restoreLastFocus = (0, _react.useCallback)(function () {
     if (lastFocus.current) {
       var _lastFocus$current$fo, _lastFocus$current;
@@ -139,19 +139,29 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       lastFocus.current = null;
     }
   }, []);
-  var handleEnforceFocus = (0, _react.useCallback)(function () {
-    if (!enforceFocus || !modal.isTopModal()) {
-      return;
-    }
+  /**
+   * Determines if the currently focused element is inside the dialog,
+   * and if not, returns the focus to the dialog.
+   *
+   */
 
+  var handleFocusDialog = (0, _utils2.useEventCallback)(function (onBeforeFocusCallback) {
     var currentActiveElement = document.activeElement;
     var dialog = modal.dialog;
 
-    if (dialog && dialog !== currentActiveElement && !(0, _contains.default)(dialog, currentActiveElement)) {
+    if (dialog && currentActiveElement && !(0, _contains.default)(dialog, currentActiveElement)) {
+      onBeforeFocusCallback === null || onBeforeFocusCallback === void 0 ? void 0 : onBeforeFocusCallback();
       dialog.focus();
     }
-  }, [enforceFocus, modal]);
-  var handleBackdropClick = (0, _react.useCallback)(function (event) {
+  });
+  var handleEnforceFocus = (0, _utils2.useEventCallback)(function () {
+    if (!enforceFocus || !modal.isTopModal()) {
+      return;
+    }
+
+    handleFocusDialog();
+  });
+  var handleBackdropClick = (0, _utils2.useEventCallback)(function (event) {
     if (event.target !== event.currentTarget) {
       return;
     }
@@ -161,10 +171,10 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (backdrop === true) {
       onClose === null || onClose === void 0 ? void 0 : onClose(event);
     }
-  }, [backdrop, onBackdropClick, onClose]);
+  });
   var documentKeyDownListener = (0, _react.useRef)();
   var documentFocusListener = (0, _react.useRef)();
-  var handleOpen = (0, _react.useCallback)(function () {
+  var handleOpen = (0, _utils2.useEventCallback)(function () {
     var containerElement = (0, _getContainer.default)(container, document.body);
     modal.add(containerElement, containerClassName);
 
@@ -176,19 +186,15 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       documentFocusListener.current = (0, _on.default)(document, 'focus', handleEnforceFocus, true);
     }
 
-    if (_canUseDOM.default) {
-      lastFocus.current = document.activeElement;
-    }
-
     if (autoFocus) {
-      var _modal$dialog;
-
-      (_modal$dialog = modal.dialog) === null || _modal$dialog === void 0 ? void 0 : _modal$dialog.focus();
+      handleFocusDialog(function () {
+        lastFocus.current = document.activeElement;
+      });
     }
 
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [autoFocus, container, containerClassName, handleDocumentKeyDown, handleEnforceFocus, modal, onOpen]);
-  var handleClose = (0, _react.useCallback)(function () {
+  });
+  var handleClose = (0, _utils2.useEventCallback)(function () {
     var _documentKeyDownListe, _documentFocusListene;
 
     modal.remove();
@@ -197,7 +203,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     (_documentFocusListene = documentFocusListener.current) === null || _documentFocusListene === void 0 ? void 0 : _documentFocusListene.off();
     documentFocusListener.current = null;
     restoreLastFocus();
-  }, [modal, restoreLastFocus]);
+  });
   (0, _react.useEffect)(function () {
     if (!open) {
       return;
@@ -265,12 +271,18 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onEntering: onEntering,
     onEntered: onEntered
   }), children) : children;
-  return /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_OverlayContext.default.Provider, {
+    value: {
+      overlayContainer: function overlayContainer() {
+        return modal.dialog;
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: (0, _utils2.mergeRefs)(modal.setDialogRef, ref),
     style: style,
     className: className,
     tabIndex: -1
-  }), backdrop && renderBackdrop(), dialogElement));
+  }), backdrop && renderBackdrop(), dialogElement)));
 });
 
 var modalPropTypes = {

package/cjs/Overlay/Overlay.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
 export interface OverlayProps extends AnimationEventProps {
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
     children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
     childrenProps?: React.HTMLAttributes<HTMLElement>;
     className?: string;

package/cjs/Overlay/Overlay.js

@@ -21,6 +21,8 @@ var _utils = require("../utils");
 
 var _Fade = _interopRequireDefault(require("../Animation/Fade"));
 
+var _OverlayContext = _interopRequireDefault(require("./OverlayContext"));
+
 var overlayPropTypes = {
   container: _propTypes.default.any,
   children: _propTypes.default.any,
@@ -44,7 +46,11 @@ var overlayPropTypes = {
 exports.overlayPropTypes = overlayPropTypes;
 
 var Overlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var container = props.container,
+  var _useContext = (0, _react.useContext)(_OverlayContext.default),
+      overlayContainer = _useContext.overlayContainer;
+
+  var _props$container = props.container,
+      container = _props$container === void 0 ? overlayContainer : _props$container,
       containerPadding = props.containerPadding,
       placement = props.placement,
       rootClose = props.rootClose,

package/cjs/Overlay/OverlayContext.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface OverlayContextProps {
+    overlayContainer?: () => HTMLElement | null;
+}
+declare const OverlayContext: React.Context<OverlayContextProps>;
+export default OverlayContext;

package/cjs/Overlay/OverlayContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var OverlayContext = /*#__PURE__*/_react.default.createContext({});
+
+OverlayContext.displayName = 'OverlayContext';
+var _default = OverlayContext;
+exports.default = _default;

package/cjs/Overlay/OverlayTrigger.js

@@ -27,6 +27,8 @@ var _utils = require("../utils");
 
 var _isOneOf = _interopRequireDefault(require("../utils/isOneOf"));
 
+var _OverlayContext = _interopRequireDefault(require("./OverlayContext"));
+
 function mergeEvents(events, props) {
   if (events === void 0) {
     events = {};
@@ -66,8 +68,12 @@ function onMouseEventHandler(handler, event, delay) {
 var defaultTrigger = ['hover', 'focus'];
 
 var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useContext = (0, _react.useContext)(_OverlayContext.default),
+      overlayContainer = _useContext.overlayContainer;
+
   var children = props.children,
-      container = props.container,
+      _props$container = props.container,
+      container = _props$container === void 0 ? overlayContainer : _props$container,
       controlId = props.controlId,
       defaultOpen = props.defaultOpen,
       _props$trigger = props.trigger,