rsuite 5.4.0 → 5.4.4

package/cjs/Dropdown/DropdownMenu.js

@@ -35,11 +35,15 @@ var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
 
 var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
 
+var _Navbar = require("../Navbar");
+
 var _Menubar = _interopRequireDefault(require("../Menu/Menubar"));
 
 var _SidenavDropdownMenu = _interopRequireDefault(require("../Sidenav/SidenavDropdownMenu"));
 
-var _templateObject, _templateObject2;
+var _Disclosure = _interopRequireDefault(require("../Disclosure"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /**
  * The <Dropdown.Menu> API
@@ -71,6 +75,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "activeKey", "onSelect", "classPrefix", "children"]);
   var dropdown = (0, _react.useContext)(_DropdownContext.default);
   var sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
+  var withinNavbar = Boolean((0, _react.useContext)(_Navbar.NavbarContext));
 
   var _useCustom = (0, _useCustom2.default)('DropdownMenu'),
       rtl = _useCustom.rtl;
@@ -91,17 +96,20 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),
       mergeItemClassNames = _useClassNames3.merge,
       withItemClassPrefix = _useClassNames3.withClassPrefix,
-      prefixItemClassName = _useClassNames3.prefix; // <Dropdown.Menu> is used outside of <Dropdown>
+      prefixItemClassName = _useClassNames3.prefix;
+
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      activeKey: activeKey,
+      onSelect: onSelect
+    };
+  }, [activeKey, onSelect]); // <Dropdown.Menu> is used outside of <Dropdown>
   // renders a vertical `menubar`
 
-
   if (!dropdown) {
     var classes = merge(props.className, withClassPrefix());
     return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelect
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
       vertical: true,
       onActivateItem: function onActivateItem(event) {
@@ -132,20 +140,65 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       disabled = _omit.disabled,
       menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, ["icon", "className", "disabled"]);
 
-  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;
+  var Icon = rtl ? _AngleLeft.default : _AngleRight.default; // Renders a disclosure when used within <Navbar>
+
+  if (withinNavbar) {
+    return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
+      hideOnClickOutside: true,
+      trigger: ['click', 'mouseover']
+    }, function (_ref, containerRef) {
+      var open = _ref.open,
+          props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
+      var classes = mergeItemClassNames(className, withItemClassPrefix({
+        disabled: disabled,
+        open: open,
+        submenu: true
+      }));
+      return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+        ref: (0, _utils.mergeRefs)(ref, containerRef),
+        className: classes
+      }, props), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (_ref2, buttonRef) {
+        var open = _ref2.open,
+            buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["open"]);
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({
+          'with-icon': icon,
+          open: open,
+          disabled: disabled
+        }));
+        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+          ref: (0, _utils.mergeRefs)(buttonRef, buttonRef),
+          className: classes,
+          "data-event-key": eventKey,
+          "data-event-key-type": typeof eventKey
+        }, buttonProps), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+          className: prefix('menu-icon')
+        }), title, /*#__PURE__*/_react.default.createElement(Icon, {
+          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
+        }));
+      }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref3, elementRef) {
+        var open = _ref3.open;
+        var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+        return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
+          ref: elementRef,
+          className: menuClassName,
+          hidden: !open
+        }, menuProps), children);
+      }));
+    });
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Menu.default, {
     openMenuOn: ['mouseover', 'click'],
-    renderMenuButton: function renderMenuButton(_ref, buttonRef) {
-      var open = _ref.open,
-          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
+    renderMenuButton: function renderMenuButton(_ref4, buttonRef) {
+      var open = _ref4.open,
+          menuButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
       return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
         disabled: disabled
-      }, function (_ref2, menuitemRef) {
-        var selected = _ref2.selected,
-            active = _ref2.active,
-            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["selected", "active"]);
-        var classes = mergeItemClassNames(className, prefixItemClassName("pull-" + (rtl ? 'left' : 'right')), prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), // prefixItemClassName`submenu`,
-        withItemClassPrefix({
+      }, function (_ref5, menuitemRef) {
+        var selected = _ref5.selected,
+            active = _ref5.active,
+            menuitem = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["selected", "active"]);
+        var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({
           'with-icon': icon,
           open: open,
           active: selected,
@@ -160,13 +213,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         }, menuitem, (0, _omit2.default)(menuButtonProps, ['role'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
           className: prefix('menu-icon')
         }), title, /*#__PURE__*/_react.default.createElement(Icon, {
-          className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
+          className: prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
         }));
       });
     },
-    renderMenuPopup: function renderMenuPopup(_ref3, popupRef) {
-      var open = _ref3.open,
-          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["open"]);
+    renderMenuPopup: function renderMenuPopup(_ref6, popupRef) {
+      var open = _ref6.open,
+          popupProps = (0, _objectWithoutPropertiesLoose2.default)(_ref6, ["open"]);
       var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
       return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
         ref: popupRef,
@@ -175,14 +228,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }, popupProps, menuProps), children);
     },
     onToggleMenu: handleToggleSubmenu
-  }, function (_ref4, menuContainerRef) {
-    var open = _ref4.open,
-        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["open"]);
+  }, function (_ref7, menuContainerRef) {
+    var open = _ref7.open,
+        menuContainer = (0, _objectWithoutPropertiesLoose2.default)(_ref7, ["open"]);
     var classes = mergeItemClassNames(className, withItemClassPrefix({
       disabled: disabled,
       open: open,
-      submenu: true // focus: hasFocus
-
+      submenu: true
     }));
     return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),

package/cjs/FormGroup/FormGroup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -33,10 +35,13 @@ var FormGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(FormGroupContext.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       controlId: controlId
-    }
+    };
+  }, [controlId]);
+  return /*#__PURE__*/_react.default.createElement(FormGroupContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,

package/cjs/Menu/MenuItem.js

@@ -55,7 +55,7 @@ function MenuItem(props) {
         id: menuitemRef.current.id
       });
     }
-  }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
+  }, [dispatch, hasFocus]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = (0, _react.useCallback)(function () {
     if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {

package/cjs/Modal/Modal.js

@@ -90,6 +90,10 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix;
 
+  var _useState = (0, _react.useState)(false),
+      shake = _useState[0],
+      setShake = _useState[1];
+
   var classes = merge(className, prefix(size, {
     full: full
   }));
@@ -116,24 +120,6 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       isDrawer: drawer
     };
   }, [dialogId, onClose, bodyStyles, drawer]);
-
-  var _useState = (0, _react.useState)(false),
-      shake = _useState[0],
-      setShake = _useState[1];
-
-  var handleBackdropClick = (0, _react.useCallback)(function () {
-    // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.
-    if (backdrop === 'static') {
-      setShake(true);
-
-      if (!transitionEndListener.current && dialogRef.current) {
-        //fix: https://github.com/rsuite/rsuite/blob/a93d13c14fb20cc58204babe3331d3c3da3fe1fd/src/Modal/styles/index.less#L59
-        transitionEndListener.current = (0, _on.default)(dialogRef.current, (0, _getAnimationEnd.default)(), function () {
-          setShake(false);
-        });
-      }
-    }
-  }, [backdrop]);
   var handleExited = (0, _react.useCallback)(function (node) {
     var _transitionEndListene;
 
@@ -150,11 +136,37 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);
     onChangeBodyStyles(true);
   }, [onChangeBodyStyles, onEntering]);
-  (0, _react.useEffect)(function () {
+  var handleBackdropClick = (0, _react.useCallback)(function (e) {
+    if (e.target !== e.currentTarget) {
+      return;
+    } // When the value of `backdrop` is `static`, a jitter animation will be added to the dialog when clicked.
+
+
+    if (backdrop === 'static') {
+      setShake(true);
+
+      if (!transitionEndListener.current && dialogRef.current) {
+        //fix: https://github.com/rsuite/rsuite/blob/a93d13c14fb20cc58204babe3331d3c3da3fe1fd/src/Modal/styles/index.less#L59
+        transitionEndListener.current = (0, _on.default)(dialogRef.current, (0, _getAnimationEnd.default)(), function () {
+          setShake(false);
+        });
+      }
+
+      return;
+    }
+
+    onClose === null || onClose === void 0 ? void 0 : onClose(e);
+  }, [backdrop, onClose]);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    if (dialogRef.current && e.target !== dialogRef.current) {
+      handleBackdropClick(e);
+    }
+  }, [handleBackdropClick]);
+  (0, _utils.useWillUnmount)(function () {
     var _transitionEndListene2;
 
     (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 ? void 0 : _transitionEndListene2.off();
-  }, []);
+  });
   return /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, {
     value: modalContextValue
   }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
@@ -162,7 +174,6 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     backdrop: backdrop,
     open: open,
     onClose: onClose,
-    onBackdropClick: handleBackdropClick,
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["wrapper"]))),
     onEntered: handleEntered,
     onEntering: handleEntering,
@@ -175,7 +186,8 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     transition: animation ? animation : undefined,
     animationProps: animationProps,
     dialogTransitionTimeout: animationTimeout,
-    backdropTransitionTimeout: 150
+    backdropTransitionTimeout: 150,
+    onClick: backdrop ? handleClick : undefined
   }), function (transitionProps, transitionRef) {
     var transitionClassName = transitionProps.className,
         transitionRest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, ["className"]);

package/cjs/Modal/utils.js

@@ -56,21 +56,29 @@ var useBodyStyles = function useBodyStyles(ref, options) {
 
     (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
     (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
+    windowResizeListener.current = null;
+    contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = (0, _react.useCallback)(function (entering) {
-    if (overflow && !drawer) {
+    if (overflow && !drawer && ref.current) {
       updateBodyStyles(undefined, entering);
       contentElement.current = ref.current.querySelector("." + prefix('content'));
-      windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);
-      contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
-        return updateBodyStyles();
-      });
-      contentElementResizeObserver.current.observe(contentElement.current);
+
+      if (!windowResizeListener.current) {
+        windowResizeListener.current = (0, _on.default)(window, 'resize', updateBodyStyles);
+      }
+
+      if (contentElement.current && !contentElementResizeObserver.current) {
+        contentElementResizeObserver.current = new _resizeObserver.ResizeObserver(function () {
+          return updateBodyStyles();
+        });
+        contentElementResizeObserver.current.observe(contentElement.current);
+      }
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   (0, _react.useEffect)(function () {
-    onDestroyEvents();
-  }, [onDestroyEvents]);
+    return onDestroyEvents; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
 };
 

package/cjs/MultiCascader/MultiCascader.js

@@ -220,8 +220,11 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         children.then(function (data) {
           node.loading = false;
           node[childrenKey] = data;
-          addFlattenData(data, node);
-          addColumn(data, cascadePaths.length);
+
+          if (targetRef.current) {
+            addFlattenData(data, node);
+            addColumn(data, cascadePaths.length);
+          }
         });
       } else {
         node.loading = false;
@@ -258,7 +261,7 @@ var MultiCascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onCheck === null || onCheck === void 0 ? void 0 : onCheck(nextValue, node, checked, event);
   }, [cascade, onChange, onCheck, setValue, splitValue, value, valueKey]);
   var handleClean = (0, _react.useCallback)(function (event) {
-    if (disabled) {
+    if (disabled || !targetRef.current) {
       return;
     }
 

package/cjs/Nav/Nav.js

@@ -75,14 +75,17 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;
 
   var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      withinNav: true,
+      activeKey: activeKey,
+      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
+    };
+  }, [activeKey, onSelectFromSidenav, onSelectProp]);
 
   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
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
       ref: ref,
       className: classes
@@ -93,11 +96,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
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
       vertical: !!sidenav
     }, function (menubar, ref) {
@@ -110,11 +109,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
-    }
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: menubarRef,
     className: classes

package/cjs/Nav/NavItem.js

@@ -104,7 +104,9 @@ var NavItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   if (navbar) {
-    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, props);
+    return /*#__PURE__*/_react.default.createElement(_NavbarItem.default, (0, _extends2.default)({
+      ref: ref
+    }, props));
   }
 
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({

package/cjs/Navbar/index.d.ts

@@ -3,4 +3,5 @@ export type { NavbarProps } from './Navbar';
 export type { NavbarBodyProps } from './NavbarBody';
 export type { NavbarHeaderProps } from './NavbarHeader';
 export type { NavbarBrandProps } from './NavbarBrand';
+export { NavbarContext } from './Navbar';
 export default Navbar;

package/cjs/Navbar/index.js

@@ -1,11 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
 exports.__esModule = true;
-exports.default = void 0;
+exports.default = exports.NavbarContext = void 0;
 
-var _Navbar = _interopRequireDefault(require("./Navbar"));
+var _Navbar = _interopRequireWildcard(require("./Navbar"));
 
+exports.NavbarContext = _Navbar.NavbarContext;
 var _default = _Navbar.default;
 exports.default = _default;

package/cjs/Overlay/Modal.js

@@ -94,7 +94,6 @@ 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,
       onEsc = props.onEsc,
       onExit = props.onExit,
       onExiting = props.onExiting,
@@ -104,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", "onEsc", "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],
@@ -161,17 +160,6 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     handleFocusDialog();
   });
-  var handleBackdropClick = (0, _utils2.useEventCallback)(function (event) {
-    if (event.target !== event.currentTarget) {
-      return;
-    }
-
-    onBackdropClick === null || onBackdropClick === void 0 ? void 0 : onBackdropClick(event);
-
-    if (backdrop === true) {
-      onClose === null || onClose === void 0 ? void 0 : onClose(event);
-    }
-  });
   var documentKeyDownListener = (0, _react.useRef)();
   var documentFocusListener = (0, _react.useRef)();
   var handleOpen = (0, _utils2.useEventCallback)(function () {
@@ -224,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,
@@ -245,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, {
@@ -272,17 +263,13 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onEntered: onEntered
   }), children) : children;
   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, {
+    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 = {
@@ -309,8 +296,7 @@ Modal.propTypes = (0, _extends2.default)({}, _utils.animationPropTypes, modalPro
   dialogTransitionTimeout: _propTypes.default.number,
   backdropTransitionTimeout: _propTypes.default.number,
   transition: _propTypes.default.any,
-  onEsc: _propTypes.default.func,
-  onBackdropClick: _propTypes.default.func
+  onEsc: _propTypes.default.func
 });
 var _default = Modal;
 exports.default = _default;

package/cjs/PanelGroup/PanelGroup.js

@@ -51,16 +51,19 @@ var PanelGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setActiveKey(activeKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeKey, event);
   }, [onSelect, setActiveKey]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      accordion: accordion,
+      activeKey: activeKey,
+      onGroupSelect: handleSelect
+    };
+  }, [accordion, activeKey, handleSelect]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     role: accordion ? 'tablist' : undefined,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(PanelGroupContext.Provider, {
-    value: {
-      accordion: accordion,
-      activeKey: activeKey,
-      onGroupSelect: handleSelect
-    }
+    value: contextValue
   }, children));
 });
 

package/cjs/Picker/DropdownMenu.js

@@ -122,6 +122,11 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
 
   (0, _react.useEffect)(function () {
     var container = menuBodyContainerRef.current;
+
+    if (!container) {
+      return;
+    }
+
     var activeItem = container.querySelector("." + prefix('item-focus'));
 
     if (!activeItem) {

package/cjs/Picker/PickerToggle.js

@@ -111,11 +111,9 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }, [input, onFocus]);
   var handleBlur = (0, _react.useCallback)(function (event) {
-    if (document.activeElement !== inputRef.current) {
-      var _inputRef$current2;
-
+    if (inputRef.current && document.activeElement !== inputRef.current) {
       setActive(false);
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      inputRef.current.blur();
     }
 
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
+import { PickerInstance } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 import { ListProps } from 'react-virtualized/dist/commonjs/List';
 export interface SelectProps<T> {
@@ -42,7 +43,9 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
 export interface SelectPickerProps<T> extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, SelectProps<T> {
 }
 export interface SelectPickerComponent {
-    <T>(props: SelectPickerProps<T>): JSX.Element | null;
+    <T>(props: SelectPickerProps<T> & {
+        ref?: Ref<PickerInstance>;
+    }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;
 }

package/cjs/SelectPicker/test/SelectPicker.test.js

@@ -59,4 +59,12 @@ _react.default.createElement(_SelectPicker.default, {
   onChange: function onChange(newValue) {
     (0, _tsExpect.expectType)(newValue);
   }
+});
+
+var pickerRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_SelectPicker.default, {
+  ref: pickerRef,
+  data: []
 });