rsuite 5.2.4 → 5.4.2

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() {
@@ -47,6 +47,12 @@ var useModalManager = function useModalManager() {
     backdrop: null
   });
   return {
+    get dialog() {
+      var _modal$current;
+
+      return (_modal$current = modal.current) === null || _modal$current === void 0 ? void 0 : _modal$current.dialog;
+    },
+
     add: function add(containerElement, containerClassName) {
       return modalManager.add(modal.current, containerElement, containerClassName);
     },
@@ -88,8 +94,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       open = props.open,
       _props$autoFocus = props.autoFocus,
       autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
-      onBackdropClick = props.onBackdropClick,
-      onEscapeKeyUp = props.onEscapeKeyUp,
+      onEsc = props.onEsc,
       onExit = props.onExit,
       onExiting = props.onExiting,
       onExited = props.onExited,
@@ -98,7 +103,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onEntered = props.onEntered,
       onClose = props.onClose,
       onOpen = props.onOpen,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onBackdropClick", "onEscapeKeyUp", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "transition", "dialogTransitionTimeout", "style", "className", "container", "animationProps", "containerClassName", "keyboard", "enforceFocus", "backdrop", "backdropTransitionTimeout", "backdropStyle", "backdropClassName", "open", "autoFocus", "onEsc", "onExit", "onExiting", "onExited", "onEnter", "onEntering", "onEntered", "onClose", "onOpen"]);
 
   var _useState = (0, _react.useState)(!open),
       exited = _useState[0],
@@ -118,19 +123,13 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   var mountModal = open || Transition && !exited;
-  var rootRef = (0, _react.useRef)();
-  var lastFocus = (0, _react.useRef)();
-  var handleDocumentKeyUp = (0, _react.useCallback)(function (event) {
-    if (keyboard && event.keyCode === 27 && modal.isTopModal()) {
-      onEscapeKeyUp === null || onEscapeKeyUp === void 0 ? void 0 : onEscapeKeyUp(event);
+  var lastFocus = (0, _react.useRef)(null);
+  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, onEscapeKeyUp, onClose]);
-  var checkForFocus = (0, _react.useCallback)(function () {
-    if (_canUseDOM.default) {
-      lastFocus.current = document.activeElement;
-    }
-  }, []);
+  });
   var restoreLastFocus = (0, _react.useCallback)(function () {
     if (lastFocus.current) {
       var _lastFocus$current$fo, _lastFocus$current;
@@ -139,55 +138,60 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       lastFocus.current = null;
     }
   }, []);
-  var getDialogElement = (0, _react.useCallback)(function () {
-    return (0, _utils2.getDOMNode)(rootRef.current);
-  }, []);
-  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 = getDialogElement();
+    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, getDialogElement, modal]);
-  var handleBackdropClick = (0, _react.useCallback)(function (event) {
-    if (event.target !== event.currentTarget) {
+  });
+  var handleEnforceFocus = (0, _utils2.useEventCallback)(function () {
+    if (!enforceFocus || !modal.isTopModal()) {
       return;
     }
 
-    onBackdropClick === null || onBackdropClick === void 0 ? void 0 : onBackdropClick(event);
-
-    if (backdrop === true) {
-      onClose === null || onClose === void 0 ? void 0 : onClose(event);
-    }
-  }, [backdrop, onBackdropClick, onClose]);
-  var documentKeyupListener = (0, _react.useRef)();
-  var docusinListener = (0, _react.useRef)();
-  var handleOpen = (0, _react.useCallback)(function () {
-    var dialog = getDialogElement();
+    handleFocusDialog();
+  });
+  var documentKeyDownListener = (0, _react.useRef)();
+  var documentFocusListener = (0, _react.useRef)();
+  var handleOpen = (0, _utils2.useEventCallback)(function () {
     var containerElement = (0, _getContainer.default)(container, document.body);
     modal.add(containerElement, containerClassName);
-    documentKeyupListener.current = (0, _on.default)(document, 'keydown', handleDocumentKeyUp);
-    docusinListener.current = (0, _on.default)(document, 'focus', handleEnforceFocus, true);
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    checkForFocus();
+
+    if (!documentKeyDownListener.current) {
+      documentKeyDownListener.current = (0, _on.default)(document, 'keydown', handleDocumentKeyDown);
+    }
+
+    if (!documentFocusListener.current) {
+      documentFocusListener.current = (0, _on.default)(document, 'focus', handleEnforceFocus, true);
+    }
 
     if (autoFocus) {
-      dialog === null || dialog === void 0 ? void 0 : dialog.focus();
+      handleFocusDialog(function () {
+        lastFocus.current = document.activeElement;
+      });
     }
-  }, [autoFocus, checkForFocus, container, containerClassName, getDialogElement, handleDocumentKeyUp, handleEnforceFocus, modal, onOpen]);
-  var handleClose = (0, _react.useCallback)(function () {
-    var _documentKeyupListene, _docusinListener$curr;
+
+    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+  });
+  var handleClose = (0, _utils2.useEventCallback)(function () {
+    var _documentKeyDownListe, _documentFocusListene;
 
     modal.remove();
-    (_documentKeyupListene = documentKeyupListener.current) === null || _documentKeyupListene === void 0 ? void 0 : _documentKeyupListene.off();
-    (_docusinListener$curr = docusinListener.current) === null || _docusinListener$curr === void 0 ? void 0 : _docusinListener$curr.off();
+    (_documentKeyDownListe = documentKeyDownListener.current) === null || _documentKeyDownListe === void 0 ? void 0 : _documentKeyDownListe.off();
+    documentKeyDownListener.current = null;
+    (_documentFocusListene = documentFocusListener.current) === null || _documentFocusListene === void 0 ? void 0 : _documentFocusListene.off();
+    documentFocusListener.current = null;
     restoreLastFocus();
-  }, [modal, restoreLastFocus]);
+  });
   (0, _react.useEffect)(function () {
     if (!open) {
       return;
@@ -208,17 +212,19 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleExited = (0, _react.useCallback)(function () {
     setExited(true);
   }, []);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      overlayContainer: function overlayContainer() {
+        return modal.dialog;
+      }
+    };
+  }, [modal.dialog]);
 
   if (!mountModal) {
     return null;
   }
 
   var renderBackdrop = function renderBackdrop() {
-    var backdropPorps = {
-      style: backdropStyle,
-      onClick: handleBackdropClick
-    };
-
     if (Transition) {
       return /*#__PURE__*/_react.default.createElement(_Fade.default, {
         transitionAppear: true,
@@ -229,18 +235,19 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
             rest = (0, _objectWithoutPropertiesLoose2.default)(fadeProps, ["className"]);
         return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
           "aria-hidden": true
-        }, rest, backdropPorps, {
+        }, rest, {
+          style: backdropStyle,
           ref: (0, _utils2.mergeRefs)(modal.setBackdropRef, ref),
           className: (0, _classnames.default)(backdropClassName, className)
         }));
       });
     }
 
-    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-      "aria-hidden": true
-    }, backdropPorps, {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "aria-hidden": true,
+      style: backdropStyle,
       className: backdropClassName
-    }));
+    });
   };
 
   var dialogElement = Transition ? /*#__PURE__*/_react.default.createElement(Transition, (0, _extends2.default)({}, animationProps, {
@@ -255,12 +262,14 @@ 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: contextValue
+  }, /*#__PURE__*/_react.default.createElement(Portal, null, backdrop && renderBackdrop(), /*#__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));
+  }), dialogElement)));
 });
 
 var modalPropTypes = {
@@ -287,8 +296,7 @@ Modal.propTypes = (0, _extends2.default)({}, _utils.animationPropTypes, modalPro
   dialogTransitionTimeout: _propTypes.default.number,
   backdropTransitionTimeout: _propTypes.default.number,
   transition: _propTypes.default.any,
-  onEscapeKeyUp: _propTypes.default.func,
-  onBackdropClick: _propTypes.default.func
+  onEsc: _propTypes.default.func
 });
 var _default = Modal;
 exports.default = _default;

package/cjs/Overlay/ModalManager.d.ts

@@ -1,11 +1,20 @@
+import React from 'react';
+export interface ModalInstance {
+    dialog: HTMLElement | null;
+    backdrop: HTMLElement | null;
+}
+export interface ContainerState {
+    classes: string[];
+    modals: ModalInstance[];
+    style: React.CSSProperties;
+    overflowing: boolean;
+}
 declare class ModalManager {
-    constructor(hideSiblingNodes?: boolean);
-    hideSiblingNodes: any;
-    modals: any[];
-    containers: any[];
-    data: any[];
-    add(modal: any, container: any, className?: string): number;
-    remove(modal: any): void;
-    isTopModal(modal: any): boolean;
+    modals: ModalInstance[];
+    containers: HTMLElement[];
+    data: ContainerState[];
+    add(modal: ModalInstance, container: HTMLElement, className?: string): number;
+    remove(modal: ModalInstance): void;
+    isTopModal(modal: ModalInstance): boolean;
 }
 export default ModalManager;

package/cjs/Overlay/ModalManager.js

@@ -37,16 +37,7 @@ function findContainer(data, modal) {
 }
 
 var ModalManager = /*#__PURE__*/function () {
-  function ModalManager(hideSiblingNodes) {
-    if (hideSiblingNodes === void 0) {
-      hideSiblingNodes = true;
-    }
-
-    this.hideSiblingNodes = null;
-    this.modals = [];
-    this.containers = [];
-    this.data = [];
-    this.hideSiblingNodes = hideSiblingNodes;
+  function ModalManager() {
     this.modals = [];
     this.containers = [];
     this.data = [];
@@ -70,7 +61,7 @@ var ModalManager = /*#__PURE__*/function () {
       return modalIndex;
     }
 
-    var data = {
+    var containerState = {
       modals: [modal],
       classes: className ? className.split(/\s+/) : [],
       style: {
@@ -80,7 +71,7 @@ var ModalManager = /*#__PURE__*/function () {
       overflowing: (0, _isOverflowing.default)(container)
     };
 
-    if (data.overflowing) {
+    if (containerState.overflowing) {
       var paddingRight = parseInt((0, _getStyle.default)(container, 'paddingRight') || 0, 10);
       var barSize = (0, _getScrollbarSize.default)();
       (0, _addStyle.default)(container, {
@@ -88,9 +79,9 @@ var ModalManager = /*#__PURE__*/function () {
       });
     }
 
-    data.classes.forEach(_addClass.default.bind(null, container));
+    containerState.classes.forEach(_addClass.default.bind(null, container));
     this.containers.push(container);
-    this.data.push(data);
+    this.data.push(containerState);
     return modalIndex;
   };
 
@@ -102,16 +93,16 @@ var ModalManager = /*#__PURE__*/function () {
     }
 
     var containerIndex = findContainer(this.data, modal);
-    var data = this.data[containerIndex];
+    var containerState = this.data[containerIndex];
     var container = this.containers[containerIndex];
-    data.modals.splice(data.modals.indexOf(modal), 1);
+    containerState.modals.splice(containerState.modals.indexOf(modal), 1);
     this.modals.splice(modalIndex, 1);
 
-    if (data.modals.length === 0) {
-      Object.keys(data.style).forEach(function (key) {
-        return container.style[key] = data.style[key];
+    if (containerState.modals.length === 0) {
+      Object.keys(containerState.style).forEach(function (key) {
+        return container.style[key] = containerState.style[key];
       });
-      data.classes.forEach(_removeClass.default.bind(null, container));
+      containerState.classes.forEach(_removeClass.default.bind(null, container));
       this.containers.splice(containerIndex, 1);
       this.data.splice(containerIndex, 1);
     }

package/cjs/Overlay/Overlay.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
 export interface OverlayProps extends AnimationEventProps {
-    container?: HTMLElement | (() => HTMLElement);
-    children?: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
+    children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
     childrenProps?: React.HTMLAttributes<HTMLElement>;
     className?: string;
     containerPadding?: number;
@@ -13,7 +13,7 @@ export interface OverlayProps extends AnimationEventProps {
     rootClose?: boolean;
     transition?: React.ElementType;
     triggerTarget?: React.RefObject<any>;
-    onClose?: () => void;
+    onClose?: React.ReactEventHandler;
 }
 export declare const overlayPropTypes: {
     container: PropTypes.Requireable<any>;

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,
@@ -67,7 +73,7 @@ var Overlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       exited = _useState[0],
       setExited = _useState[1];
 
-  var overlayTarget = (0, _react.useRef)();
+  var overlayTarget = (0, _react.useRef)(null);
 
   if (open) {
     if (exited) setExited(false);

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.d.ts

@@ -17,7 +17,7 @@ export interface OverlayTriggerProps extends StandardProps, AnimationEventProps
     /** Container padding */
     containerPadding?: number;
     /** display element */
-    speaker?: React.ReactElement | ((props: any, ref: React.RefObject<any>) => React.ReactElement);
+    speaker: React.ReactElement | ((props: any, ref: React.RefObject<any>) => React.ReactElement);
     /** Prevent floating element overflow */
     preventOverflow?: boolean;
     /** Opern  overlay */
@@ -27,7 +27,7 @@ export interface OverlayTriggerProps extends StandardProps, AnimationEventProps
     /** Whether mouse is allowed to enter the floating layer of popover, whose default value is false. */
     enterable?: boolean;
     /** For the monitored component, the event will be bound to this component. */
-    children?: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
+    children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
     /** Whether to allow clicking document to close the overlay */
     rootClose?: boolean;
     /** Once disabled, the event cannot be triggered. */
@@ -39,27 +39,27 @@ export interface OverlayTriggerProps extends StandardProps, AnimationEventProps
     /**  Set the `id` on `<Overlay>` and `aria-describedby` on `<OverlayTrigger>` */
     controlId?: string;
     /** Lose Focus callback function */
-    onBlur?: () => void;
+    onBlur?: React.FocusEventHandler;
     /** Click on the callback function */
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler;
     /** RightClick on the callback function */
     onContextMenu?: React.MouseEventHandler;
     /** Callback function to get focus */
-    onFocus?: () => void;
+    onFocus?: React.FocusEventHandler;
     /** Mouse leave callback function */
-    onMouseOut?: () => void;
+    onMouseOut?: React.MouseEventHandler;
     /** Mouse over callback function */
-    onMouseOver?: () => void;
+    onMouseOver?: React.MouseEventHandler;
     /** Callback fired when open component */
     onOpen?: () => void;
     /** Callback fired when close component */
     onClose?: () => void;
 }
 export interface OverlayTriggerInstance {
-    root: Element;
-    updatePosition?: () => void;
-    open?: () => void;
-    close?: () => void;
+    root: HTMLElement;
+    updatePosition: () => void;
+    open: () => void;
+    close: () => void;
 }
 declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<unknown>>;
 export default OverlayTrigger;

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,
@@ -109,8 +115,8 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   // In order to keep the overlay open, a timer is used to delay the closing.
 
 
-  var delayOpenTimer = (0, _react.useRef)();
-  var delayCloseTimer = (0, _react.useRef)();
+  var delayOpenTimer = (0, _react.useRef)(null);
+  var delayCloseTimer = (0, _react.useRef)(null);
   var delayOpen = (0, _isNil.default)(delayOpenProp) ? delay : delayOpenProp;
   var delayClose = (0, _isNil.default)(delayCloseProp) ? delay : delayCloseProp; // Whether the cursor is on the overlay
 
@@ -119,8 +125,13 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var isOnTrigger = (0, _react.useRef)(false);
   (0, _react.useEffect)(function () {
     return function () {
-      clearTimeout(delayOpenTimer.current);
-      clearTimeout(delayCloseTimer.current);
+      if (!(0, _isNil.default)(delayOpenTimer.current)) {
+        clearTimeout(delayOpenTimer.current);
+      }
+
+      if (!(0, _isNil.default)(delayCloseTimer.current)) {
+        clearTimeout(delayCloseTimer.current);
+      }
     };
   }, []);
   var handleOpen = (0, _react.useCallback)(function (delay) {
@@ -226,8 +237,11 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     }
 
     delayCloseTimer.current = setTimeout(function () {
-      clearTimeout(delayCloseTimer.current);
-      delayCloseTimer.current = null;
+      if (!(0, _isNil.default)(delayCloseTimer.current)) {
+        clearTimeout(delayCloseTimer.current);
+        delayCloseTimer.current = null;
+      }
+
       handleCloseWhenLeave();
     }, 200);
   }, [enterable, open, handleClose, handleCloseWhenLeave]);

package/cjs/Overlay/Position.d.ts

@@ -2,13 +2,13 @@ import React from 'react';
 import { TypeAttributes } from '../@types/common';
 export interface PositionChildProps {
     className: string;
-    left: number;
-    top: number;
+    left?: number;
+    top?: number;
 }
 export interface PositionProps {
-    children?: (props: PositionChildProps, ref: any) => React.ReactElement;
+    children: (props: PositionChildProps, ref: any) => React.ReactElement;
     className?: string;
-    container?: HTMLElement | (() => HTMLElement);
+    container?: HTMLElement | (() => HTMLElement | null) | null;
     containerPadding?: number;
     placement?: TypeAttributes.Placement;
     preventOverflow?: boolean;

package/cjs/Overlay/Position.js

@@ -36,13 +36,14 @@ var _utils = require("../utils");
 var usePosition = function usePosition(props, ref) {
   var _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'right' : _props$placement,
-      preventOverflow = props.preventOverflow,
+      _props$preventOverflo = props.preventOverflow,
+      preventOverflow = _props$preventOverflo === void 0 ? false : _props$preventOverflo,
       _props$containerPaddi = props.containerPadding,
       containerPadding = _props$containerPaddi === void 0 ? 0 : _props$containerPaddi,
       container = props.container,
       triggerTarget = props.triggerTarget;
-  var containerRef = (0, _react.useRef)();
-  var lastTargetRef = (0, _react.useRef)();
+  var containerRef = (0, _react.useRef)(null);
+  var lastTargetRef = (0, _react.useRef)(null);
   var overlayResizeObserver = (0, _react.useRef)();
   var defaultPosition = {
     positionLeft: 0,
@@ -88,8 +89,9 @@ var usePosition = function usePosition(props, ref) {
       return;
     }
 
-    var overlay = (0, _utils.getDOMNode)(ref.current);
-    var containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container, (0, _ownerDocument.default)(ref.current).body);
+    var overlay = (0, _utils.getDOMNode)(ref.current); // fixme dom-lib getContainer incorrect type
+
+    var containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, (0, _ownerDocument.default)(ref.current).body);
     var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement);
 
     if (forceUpdateDOM && overlay) {
@@ -97,7 +99,11 @@ var usePosition = function usePosition(props, ref) {
 
       var preClassName = overlay === null || overlay === void 0 ? void 0 : (_overlay$className = overlay.className) === null || _overlay$className === void 0 ? void 0 : (_overlay$className$ma = _overlay$className.match(/(placement-\S+)/)) === null || _overlay$className$ma === void 0 ? void 0 : _overlay$className$ma[0];
       (0, _removeClass.default)(overlay, preClassName);
-      (0, _addClass.default)(overlay, posi.positionClassName);
+
+      if (posi.positionClassName) {
+        (0, _addClass.default)(overlay, posi.positionClassName);
+      }
+
       (0, _addStyle.default)(overlay, {
         left: posi.positionLeft + "px",
         top: posi.positionTop + "px"
@@ -155,7 +161,7 @@ var Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
       className = props.className;
 
-  var childRef = _react.default.useRef();
+  var childRef = _react.default.useRef(null);
 
   var _usePosition = usePosition(props, childRef),
       position = _usePosition[0],
@@ -193,7 +199,7 @@ var Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 Position.displayName = 'Position';
 Position.propTypes = {
   className: _propTypes.default.string,
-  children: _propTypes.default.func,
+  children: _propTypes.default.func.isRequired,
   container: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.any]),
   containerPadding: _propTypes.default.number,
   placement: _propTypes.default.any,

package/cjs/Overlay/positionUtils.d.ts

@@ -29,7 +29,7 @@ declare const _default: (props: UtilProps) => {
         left: number;
         height: number;
         width: number;
-    };
+    } | null;
     calcAutoPlacement(targetOffset: any, container: any, overlay: any): any;
     calcOverlayPosition(overlayNode: any, target: any, container: any): PositionType;
 };